/* Al Adan Warehouse OS — Design System v2
   Light, colorful theme with real motion. Every color below is a CSS
   custom property so a company's branding (Settings > Branding) can
   override it via an inline <style> block injected after this file —
   see core/shell.php, modules/auth/views/login.php,
   modules/client_portal/views/dashboard.php. Changing a company's
   colors in Settings re-skins the ENTIRE app instantly, since every
   module's markup already uses these shared classes. */

:root {
  --color-primary: #7B1E3D;
  --color-primary-rgb: 123, 30, 61;
  --color-primary-dark: #4A1225;
  --color-primary-light: #F5E6EB;
  --color-accent: #C9A227;
  --color-accent-light: #FBF3D9;

  --color-sidebar-bg: #2E1A32;
  --color-sidebar-active: #4A2A42;
  --color-sidebar-text: #E8DFE0;
  --color-sidebar-text-muted: #9C8B93;

  --color-background: #FAF6EE;
  --color-success: #2E7D46; --color-success-light: #E1F0E5;
  --color-warning: #B8860B; --color-warning-light: #F7ECD3;
  --color-danger: #B3261E;  --color-danger-light: #F6E1DF;
  --color-info: #2C5F8A;    --color-info-light: #E1E9F0;

  --color-text-primary: #211A1D;
  --color-text-muted: #6B6067;
  --color-border: #E4DCCB;
  --color-surface: #FFFEFB;

  --text-xs: 12px; --text-sm: 13.5px; --text-base: 15px;
  --text-lg: 17px; --text-xl: 21px; --text-2xl: 27px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px;

  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px;
  --shadow-color-rgb: 33,26,29;
  --shadow-sm: 0 1px 2px rgba(var(--shadow-color-rgb),.06);
  --shadow: 0 2px 10px rgba(var(--shadow-color-rgb),.07);
  --shadow-lg: 0 10px 30px rgba(var(--shadow-color-rgb),.12);
  --ease: cubic-bezier(.4,0,.2,1);

  /* ---- Vibrant supporting palette ----
     Raspberry/gold above remain the core brand (primary buttons, logo,
     login screen) — these are the ADDITIONAL colors used for section
     accents, chart series, and richer status treatment, so the app
     reads as genuinely colorful without replacing the brand identity.
     Each has a solid, a soft tinted background, and a glow shadow for
     hover states. */
  --v-indigo: #6366F1;   --v-indigo-bg: rgba(99,102,241,.12);   --v-indigo-glow: rgba(99,102,241,.35);
  --v-emerald: #10B981;  --v-emerald-bg: rgba(16,185,129,.12);  --v-emerald-glow: rgba(16,185,129,.35);
  --v-violet: #8B5CF6;   --v-violet-bg: rgba(139,92,246,.12);   --v-violet-glow: rgba(139,92,246,.35);
  --v-amber: #F59E0B;    --v-amber-bg: rgba(245,158,11,.14);    --v-amber-glow: rgba(245,158,11,.35);
  --v-cyan: #06B6D4;     --v-cyan-bg: rgba(6,182,212,.12);      --v-cyan-glow: rgba(6,182,212,.35);
  --v-teal: #14B8A6;     --v-teal-bg: rgba(20,184,166,.12);     --v-teal-glow: rgba(20,184,166,.35);
  --v-rose: #F43F5E;     --v-rose-bg: rgba(244,63,94,.12);      --v-rose-glow: rgba(244,63,94,.35);
  --v-slate: #64748B;    --v-slate-bg: rgba(100,116,139,.12);   --v-slate-glow: rgba(100,116,139,.3);

  /* Section colors — one per sidebar nav group, used for its active
     link's left-accent bar and its group label. Purely a navigation
     aid (quick visual "which part of the app am I in"), independent
     of the brand and semantic colors above. */
  --sec-catalog: var(--v-cyan);
  --sec-warehouse-ops: var(--v-emerald);
  --sec-procurement: var(--v-amber);
  --sec-sales: var(--v-indigo);
  --sec-finance: var(--v-violet);
  --sec-intelligence: var(--v-teal);
  --sec-admin: var(--v-slate);
  --sec-platform: var(--color-accent);
}

/* ---- Appearance customization ----
   Driven by data-* attributes on <html>, injected per-company by
   shell.php/login.php from Settings > Branding — same mechanism as
   data-theme above. Falls back to the defaults already set in :root
   when no attribute is present (a company that's never touched these
   settings sees exactly what it always did). */
html[data-shadow-intensity="subtle"] {
  --shadow-sm: 0 1px 2px rgba(var(--shadow-color-rgb),.035);
  --shadow: 0 1px 6px rgba(var(--shadow-color-rgb),.045);
  --shadow-lg: 0 6px 18px rgba(var(--shadow-color-rgb),.07);
}
html[data-shadow-intensity="bold"] {
  --shadow-sm: 0 2px 4px rgba(var(--shadow-color-rgb),.12);
  --shadow: 0 4px 18px rgba(var(--shadow-color-rgb),.16);
  --shadow-lg: 0 16px 44px rgba(var(--shadow-color-rgb),.24);
}

html[data-corner="sharp"] { --radius-sm: 2px; --radius: 3px; --radius-lg: 4px; }
html[data-corner="soft"] { --radius-sm: 10px; --radius: 16px; --radius-lg: 22px; }

html[data-card-style="gradient"] .card {
  background: linear-gradient(160deg, var(--color-surface), rgba(var(--color-primary-rgb),.035));
}
html[data-card-style="glass"] .card {
  background: rgba(var(--shadow-color-rgb),.03);
  backdrop-filter: blur(10px);
  border-color: rgba(var(--shadow-color-rgb),.1);
}
html[data-theme="dark"][data-card-style="glass"] .card {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

html[data-animation="none"] .app-content,
html[data-animation="none"] .card { animation: none !important; }
html[data-animation="slide"] .app-content { animation: slideUpIn .3s var(--ease); }
html[data-animation="scale"] .app-content { animation: scaleIn .25s var(--ease); }
@keyframes slideUpIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }

/* Dark mode — toggled via data-theme="dark" on <html>, persisted client-side.
   Every color above is a variable specifically so this override is a single
   block, not a per-component rewrite — every existing component
   (.card, .btn, tables, badges) automatically re-skins correctly.
   Selector is html[data-theme="dark"], not just [data-theme="dark"]: a
   bare attribute selector has the same specificity as a plain :root rule,
   and the company branding block (injected as an inline <style> after
   this file, per Settings > Branding) sets :root colors directly — with
   equal specificity, the LATER rule wins regardless of intent, which
   silently overwrote dark mode every time. Adding the html type selector
   raises this rule's specificity so it wins correctly regardless of
   where branding's override appears in the cascade. */
html[data-theme="dark"] {
  --color-primary: #9F75E8;
  --color-primary-rgb: 159, 117, 232;
  --color-primary-dark: #7C4FD1;
  --color-primary-light: #2E2249;
  --color-accent: #FBBF24;
  --color-accent-light: #453419;

  --color-sidebar-bg: #1A1625;
  --color-sidebar-active: #2A2340;
  --color-sidebar-text: #E4E1EC;
  --color-sidebar-text-muted: #8B85A0;

  --color-background: #121018;
  --color-surface: #1E1A29;
  --color-success: #34D399; --color-success-light: #123326;
  --color-warning: #FBBF24; --color-warning-light: #3D2E0C;
  --color-danger: #F87171;  --color-danger-light: #3D1818;
  --color-info: #60A5FA;    --color-info-light: #132A4A;

  --color-text-primary: #F1EFF7;
  --color-text-muted: #A199B3;
  --color-border: #322C42;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow: 0 2px 10px rgba(0,0,0,.35);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.45);
}
html[data-theme="dark"] body { background: var(--color-background); color: var(--color-text-primary); }
html[data-theme="dark"] .app-topbar { background: rgba(30,26,41,.82); border-color: var(--color-border); backdrop-filter: blur(10px); }
html[data-theme="dark"] .skeleton { background: linear-gradient(90deg, #2A2438 25%, #362F4A 37%, #2A2438 63%); }

/* Funky theme — a third option alongside light/dark, toggled the same
   way (data-theme="funky" on <html>). Every color contrast pairing
   below was checked against WCAG AA before picking these hex values —
   "funky" only as far as the palette goes, not at the expense of
   actually being able to read the numbers on a stock report. */
html[data-theme="funky"] {
  --color-primary: #CC1268;
  --color-primary-rgb: 204, 18, 104;
  --color-primary-dark: #A6115A;
  --color-primary-light: #FCE1EE;
  --color-accent: #007A6B;
  --color-accent-light: #D6F7F1;

  --color-sidebar-bg: #1E0B2E;
  --color-sidebar-active: #3B1259;
  --color-sidebar-text: #F3E8FF;
  --color-sidebar-text-muted: #C4A8DE;

  --color-background: #FFF8FB;
  --color-surface: #FFFFFF;
  --color-success: #0A8754; --color-success-light: #D3FAE7;
  --color-warning: #B8650A; --color-warning-light: #FEF0D6;
  --color-danger: #E1265A;  --color-danger-light: #FDE1E9;
  --color-info: #0A6FAE;    --color-info-light: #DBF1FE;

  --color-text-primary: #2A1338;
  --color-text-muted: #7A6389;
  --color-border: #F0D9E8;

  --shadow-sm: 0 1px 3px rgba(204,18,104,.15);
  --shadow: 0 4px 16px rgba(204,18,104,.18);
  --shadow-lg: 0 14px 34px rgba(204,18,104,.22);
}
html[data-theme="funky"] body { background: var(--color-background); color: var(--color-text-primary); }
html[data-theme="funky"] .app-topbar { background: var(--color-surface); border-color: var(--color-border); }
html[data-theme="funky"] .skeleton { background: linear-gradient(90deg, #FCE1EE 25%, #FDF0F6 37%, #FCE1EE 63%); }
/* .btn-primary already uses a gradient of --color-primary -> --color-primary-dark (see below),
   so it automatically picks up the funky magenta gradient with no extra rule needed here. */

* { box-sizing: border-box; }

/* Default size for any icon SVG that doesn't set its own width/height
   (every icon from core/Icons.php is built this way, relying on CSS for
   sizing). Excludes chart SVGs (shared/js/charts.js), which always set
   explicit width/height attributes and must stay at their intended size.
   This is a defensive backstop so a new icon added anywhere in the app
   can't silently render at the browser's ~300x150px SVG default the way
   the sidebar and account-menu icons both did before this rule existed. */
svg:not([width]) { width: 16px; height: 16px; flex-shrink: 0; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* ---- Layout shell ---- */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
  width: 252px;
  background: var(--color-sidebar-bg);
  color: var(--color-sidebar-text);
  flex-shrink: 0;
  padding: var(--space-5) var(--space-3);
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.app-brand { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-2); margin-bottom: var(--space-6); }
.app-brand img { height: 54px; width: 180px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.app-brand .brand-text { font-size: var(--text-lg); font-weight: 700; color: var(--color-sidebar-text); letter-spacing: -.01em; }

.nav-group { margin-bottom: var(--space-4); }
.nav-group-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-sidebar-text-muted); padding: var(--space-2) var(--space-3) var(--space-1);
}
.app-sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  color: var(--color-sidebar-text);
  text-decoration: none;
  padding: 9px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 500;
  margin-bottom: 2px;
  border-left: 3px solid transparent;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease), padding-left .15s var(--ease);
}
.app-sidebar nav a svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .8; transition: opacity .15s var(--ease); }
.app-sidebar nav a:hover { background: rgba(255,255,255,.07); color: var(--color-sidebar-text); padding-left: 16px; }
.app-sidebar nav a:hover svg { opacity: 1; }
.app-sidebar nav a.active { background: var(--color-primary); color: #FFFFFF; border-left-color: var(--color-accent); font-weight: 600; }
.app-sidebar nav a.active svg { opacity: 1; }
.app-sidebar nav a:active { transform: scale(.98); }

/* ---- Section colors ---- one distinct accent per nav group, so each
   part of the app reads as visually distinct rather than every
   section looking identical. Dashboard has no section color — it's
   not really "a section" the way the others are. */
.nav-group[data-section="catalog"] .nav-group-label { color: var(--v-cyan); }
.nav-group[data-section="catalog"] a.active { border-left-color: var(--v-cyan); box-shadow: inset 0 0 0 1px var(--v-cyan-bg), 0 0 16px var(--v-cyan-glow); }
.nav-group[data-section="warehouse-ops"] .nav-group-label { color: var(--v-emerald); }
.nav-group[data-section="warehouse-ops"] a.active { border-left-color: var(--v-emerald); box-shadow: inset 0 0 0 1px var(--v-emerald-bg), 0 0 16px var(--v-emerald-glow); }
.nav-group[data-section="procurement"] .nav-group-label { color: var(--v-amber); }
.nav-group[data-section="procurement"] a.active { border-left-color: var(--v-amber); box-shadow: inset 0 0 0 1px var(--v-amber-bg), 0 0 16px var(--v-amber-glow); }
.nav-group[data-section="sales"] .nav-group-label { color: var(--v-indigo); }
.nav-group[data-section="sales"] a.active { border-left-color: var(--v-indigo); box-shadow: inset 0 0 0 1px var(--v-indigo-bg), 0 0 16px var(--v-indigo-glow); }
.nav-group[data-section="finance"] .nav-group-label { color: var(--v-violet); }
.nav-group[data-section="finance"] a.active { border-left-color: var(--v-violet); box-shadow: inset 0 0 0 1px var(--v-violet-bg), 0 0 16px var(--v-violet-glow); }
.nav-group[data-section="intelligence"] .nav-group-label { color: var(--v-teal); }
.nav-group[data-section="intelligence"] a.active { border-left-color: var(--v-teal); box-shadow: inset 0 0 0 1px var(--v-teal-bg), 0 0 16px var(--v-teal-glow); }
.nav-group[data-section="admin"] .nav-group-label { color: var(--v-slate); }
.nav-group[data-section="admin"] a.active { border-left-color: var(--v-slate); box-shadow: inset 0 0 0 1px var(--v-slate-bg), 0 0 16px var(--v-slate-glow); }
.nav-group[data-section="platform"] .nav-group-label { color: var(--color-accent); }
.nav-group[data-section="platform"] a.active { border-left-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent-light), 0 0 16px rgba(var(--color-primary-rgb), .2); }

.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.app-topbar {
  height: 60px;
  border-bottom: 1px solid var(--color-border);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-6);
  position: sticky; top: 0; z-index: 20;
}

.app-content { padding: var(--space-6); animation: fadeIn .25s var(--ease); }

/* Section accent — a colored top border on the page content area,
   matching the sidebar section the current page belongs to (see
   shell.php's section-detection script). Absent for Dashboard, which
   isn't really "a section" the way the others are. */
body[data-active-section="catalog"] .app-content { border-top: 3px solid var(--v-cyan); }
body[data-active-section="warehouse-ops"] .app-content { border-top: 3px solid var(--v-emerald); }
body[data-active-section="procurement"] .app-content { border-top: 3px solid var(--v-amber); }
body[data-active-section="sales"] .app-content { border-top: 3px solid var(--v-indigo); }
body[data-active-section="finance"] .app-content { border-top: 3px solid var(--v-violet); }
body[data-active-section="intelligence"] .app-content { border-top: 3px solid var(--v-teal); }
body[data-active-section="admin"] .app-content { border-top: 3px solid var(--v-slate); }
body[data-active-section="platform"] .app-content { border-top: 3px solid var(--color-accent); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: var(--text-sm); font-weight: 600;
  cursor: pointer;
  transition: transform .12s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.btn-primary { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: #fff; box-shadow: 0 1px 2px rgba(var(--color-primary-rgb),.25); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--color-primary-rgb),.32); }
.btn-primary:active { transform: translateY(0) scale(.98); }

.quick-action-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 10px; border-radius: var(--radius-sm);
  color: #fff; font-size: var(--text-sm); font-weight: 700; text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.quick-action-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.quick-action-btn:active { transform: translateY(0) scale(.98); }
.btn-outline { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-primary); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-outline:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ---- Form fields ---- */
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: 6px; color: var(--color-text-primary); }
.field input, .field select, .field textarea {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: var(--text-base); font-family: inherit;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
  background: var(--color-surface);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light);
}
.field .error { color: var(--color-danger); font-size: var(--text-xs); margin-top: 4px; min-height: 14px; }
.field input[type="color"] { padding: 3px; height: 40px; cursor: pointer; }

/* ---- Structured form sections ----
   Wraps a logical group of fields (e.g. "Identity", "Commercial") in a
   visually distinct sub-panel — a subtle tinted background and a left
   accent bar — so a long form reads as organized groups rather than one
   undifferentiated stack of inputs. Usage: <div class="form-section">
   <h3 class="form-section-title">Identity</h3> ...fields... </div> */
.form-section {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
.form-section-title {
  font-size: var(--text-base); font-weight: 700; margin: 0 0 var(--space-1);
  color: var(--color-text-primary);
}
.form-section-hint {
  font-size: var(--text-xs); color: var(--color-text-muted); margin: 0 0 var(--space-4);
}
.form-section .field:last-child, .form-section > div:last-child .field { margin-bottom: 0; }

/* Line-item tables inside a form get a bit more visual containment than
   a bare .data-table — a defined edge makes clear where the "add a row"
   working area ends and the rest of the form begins. */
.form-section .data-table { background: var(--color-surface); border-radius: var(--radius-sm); overflow: hidden; }
.form-section .data-table th { background: var(--color-primary-light); }

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px; border: 1px solid transparent;
  font-size: var(--text-xs); font-weight: 700;
}
.badge-success { background: var(--color-success-light); color: var(--color-success); border-color: rgba(46,125,70,.25); }
.badge-warning { background: var(--color-warning-light); color: var(--color-warning); border-color: rgba(184,134,11,.25); }
.badge-danger  { background: var(--color-danger-light);  color: var(--color-danger);  border-color: rgba(179,38,30,.25); }
.badge-info    { background: var(--color-info-light);    color: var(--color-info);    border-color: rgba(44,95,138,.25); }
.badge-indigo  { background: var(--v-indigo-bg);  color: var(--v-indigo);  border-color: rgba(99,102,241,.3); }
.badge-violet  { background: var(--v-violet-bg);  color: var(--v-violet);  border-color: rgba(139,92,246,.3); }
.badge-cyan    { background: var(--v-cyan-bg);    color: var(--v-cyan);    border-color: rgba(6,182,212,.3); }
.badge-teal    { background: var(--v-teal-bg);    color: var(--v-teal);    border-color: rgba(20,184,166,.3); }

/* ---- Cards ---- */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-sm);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.card:hover { box-shadow: var(--shadow), 0 0 0 1px rgba(var(--color-primary-rgb),.15), 0 0 24px rgba(var(--color-primary-rgb),.12); border-color: rgba(var(--color-primary-rgb),.35); transform: translateY(-1px); }

/* ---- Tables ---- */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table th {
  text-align: left; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em; font-size: 11px;
  padding: 10px var(--space-3); border-bottom: 2px solid var(--color-border);
}
.data-table td { padding: 12px var(--space-3); border-bottom: 1px solid var(--color-border); }
.data-table tbody tr { transition: background .12s var(--ease); }
.data-table tbody tr:hover { background: var(--color-primary-light); }
.data-table a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.data-table a:hover { text-decoration: underline; }

/* ---- Toasts ---- */
.toast {
  position: fixed; bottom: var(--space-5); right: var(--space-5);
  background: var(--color-text-primary); color: #fff;
  padding: 12px 18px; border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: slideInRight .25s var(--ease);
  z-index: 100;
}
.toast-success { background: var(--color-success); }
.toast-danger { background: var(--color-danger); }
.toast-upgrade { background: var(--color-primary-dark); border: 1px solid var(--color-accent); max-width: 340px; line-height: 1.4; }

/* ---- Report controls (Financial Statements & similar filter+action rows) ---- */
.stmt-controls {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-4);
}
.stmt-filters, .stmt-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.stmt-actions { flex-shrink: 0; }

/* ---- Misc utility ---- */
.spinner {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: spin .6s linear infinite; display: inline-block;
}
.skeleton { background: linear-gradient(90deg, var(--color-border) 25%, #f4f2fa 50%, var(--color-border) 75%); background-size: 200% 100%; animation: pulse 1.4s ease-in-out infinite; border-radius: var(--radius-sm); }

/* ---- User dropdown ---- */
.user-menu { position: relative; }
.user-menu-trigger {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 10px; border-radius: var(--radius-sm); transition: background .15s var(--ease);
}
.user-menu-trigger:hover { background: var(--color-primary-light); }
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.user-menu-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: var(--space-2);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s;
  z-index: 30;
}
.user-menu-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.user-menu-dropdown a, .user-menu-dropdown button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: var(--radius-sm); font-size: var(--text-sm);
  color: var(--color-text-primary); text-decoration: none; border: none; background: none; cursor: pointer;
  transition: background .12s var(--ease);
}
.user-menu-dropdown a:hover, .user-menu-dropdown button:hover { background: var(--color-primary-light); color: var(--color-primary); }
.user-menu-divider { height: 1px; background: var(--color-border); margin: 4px 0; }

/* ---- Color swatch picker (Settings > Branding) ---- */
.swatch-row { display: flex; align-items: center; gap: var(--space-3); }
.swatch-row input[type="color"] { width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--color-border); border-radius: 50%; overflow: hidden; cursor: pointer; }
.swatch-row input[type="text"] { width: 110px; }

/* ---- Tabs ---- */
.tab-btn { position: relative; }
.tab-btn.active { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: #fff; border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(var(--color-primary-rgb),.3); }

/* ---- Dashboard widgets ---- */
.widget-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
}
.widget-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm);
  transition: box-shadow .2s var(--ease), transform .15s var(--ease), opacity .15s var(--ease);
  grid-column: span 1; animation: fadeIn .3s var(--ease);
}
.widget-card:hover { box-shadow: var(--shadow); }
.widget-card.wide { grid-column: span 2; }
.widget-card.dragging { opacity: .4; transform: scale(.98); }
.widget-card.drag-over { outline: 2px dashed var(--color-primary); outline-offset: 2px; }
.widget-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.widget-header-left { display: flex; align-items: center; gap: 8px; }
.widget-drag-handle { cursor: grab; color: var(--color-text-muted); display: flex; }
.widget-drag-handle svg { width: 15px; height: 15px; }
.widget-title { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-primary); }
.widget-remove-btn {
  background: none; border: none; cursor: pointer; color: var(--color-text-muted);
  display: flex; padding: 2px; border-radius: 4px; transition: background .12s var(--ease), color .12s var(--ease);
}
.widget-remove-btn:hover { background: var(--color-danger-light); color: var(--color-danger); }
.widget-remove-btn svg { width: 14px; height: 14px; }

.kpi-icon-wrap {
  width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
  position: relative; overflow: hidden;
  box-shadow: 0 4px 14px -2px rgba(0,0,0,.25);
}
.kpi-icon-wrap::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
}
.kpi-icon-wrap svg { width: 20px; height: 20px; color: #fff; position: relative; z-index: 1; }
.kpi-value { font-size: 26px; font-weight: 800; line-height: 1.1; }
.kpi-label { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }

.widget-picker {
  position: fixed; inset: 0; background: rgba(31,27,46,.35); display: none; align-items: center; justify-content: center; z-index: 50;
}
.widget-picker.open { display: flex; }
.widget-picker-panel { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-5); width: 460px; max-height: 70vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.widget-picker-item {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: var(--radius-sm);
  transition: background .12s var(--ease); cursor: pointer;
}
.widget-picker-item:hover { background: var(--color-primary-light); }

@media (max-width: 1100px) {
  .widget-grid { grid-template-columns: repeat(2, 1fr); }
  .widget-card.wide { grid-column: span 2; }
}
@media (max-width: 640px) {
  .widget-grid { grid-template-columns: 1fr; }
  .widget-card.wide { grid-column: span 1; }
}

/* InfoTag — small inline (?) that reveals a short explanation on click */
.info-tag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; margin-left: 4px; vertical-align: -2px;
  background: none; border: none; color: var(--color-text-muted); cursor: pointer;
  border-radius: 50%; transition: color .12s var(--ease);
}
.info-tag:hover, .info-tag:focus-visible { color: var(--color-primary); }
.info-tag svg { width: 16px; height: 16px; }
.info-tag-popover {
  position: absolute; z-index: 200; width: 260px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: var(--space-3); font-size: var(--text-sm); color: var(--color-text-primary);
  line-height: 1.5;
}

/* Guided tour — spotlight overlay + step card */
.tour-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.55); pointer-events: none;
}
.tour-spotlight {
  position: fixed; z-index: 301; border-radius: var(--radius-sm); pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.55);
  transition: top .2s var(--ease), left .2s var(--ease), width .2s var(--ease), height .2s var(--ease);
}
.tour-card {
  position: fixed; z-index: 302; width: 320px; max-width: calc(100vw - 32px);
  background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: var(--space-4);
  transition: top .2s var(--ease), left .2s var(--ease);
}
.tour-card-title { font-weight: 700; font-size: var(--text-base); margin-bottom: 6px; color: var(--color-text-primary); }
.tour-card-body { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5; margin-bottom: var(--space-3); }
.tour-dots { display: flex; gap: 6px; margin-bottom: var(--space-3); }
.tour-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-border); }
.tour-dot.active { background: var(--color-primary); }
.tour-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Scan row — an input paired with a camera-scan button (shared/js/camera-scanner.js).
   Originally scoped only to Picking's own <style> block; moved here so
   Receiving, Packing, and Adjustments can use the identical pattern
   instead of each re-declaring their own copy. */
.scan-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.scan-row input { flex: 1; padding: 12px 14px; font-size: 16px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); }
.scan-row input.matched { border-color: var(--color-success); background: var(--color-success-light); }
.scan-row input.mismatched { border-color: var(--color-danger); background: var(--color-danger-light); }
.camera-scan-btn { padding: 10px 12px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; font-size: 18px; line-height: 1; }

/* ---- Responsive main shell (Products/Sales/Purchasing/Accounting/
   Reports/Settings — the "management" side of the app). The 6
   dedicated warehouse-floor screens (Pick/Dispatch/Receive/Adjust/
   Lookup + the mobile hub) are separate, purpose-built pages and are
   untouched by this — this block only concerns the sidebar+table
   layout used everywhere else, which previously had zero responsive
   treatment at all. Graceful degradation, not a redesign: the desktop
   experience is unchanged above the breakpoint. */
.sidebar-toggle-btn { display: none; }
.sidebar-overlay { display: none; }

@media (max-width: 900px) {
  .app-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 500;
    transform: translateX(-100%);
    transition: transform .2s var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .app-shell.sidebar-open .app-sidebar { transform: translateX(0); }

  .sidebar-overlay {
    display: none; position: fixed; inset: 0; z-index: 499;
    background: rgba(0,0,0,.45);
  }
  .app-shell.sidebar-open .sidebar-overlay { display: block; }

  .sidebar-toggle-btn {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-surface); cursor: pointer; color: var(--color-text-primary);
  }
  .sidebar-toggle-btn svg { width: 20px; height: 20px; }

  /* The 340px fixed-width global search doesn't fit a phone topbar
     alongside a hamburger button and the icon row — collapse it to
     whatever space remains rather than forcing horizontal scroll on
     the topbar itself. */
  #global-search { width: 100% !important; min-width: 0; }
  #global-search-kbd { display: none; }

  /* The topbar's right-side icon group (warehouse-floor link, clock,
     language, notifications, help, currency, theme, user menu) has
     too many items for one row on a phone. Deliberately NOT using
     overflow-x here: several of these open a dropdown that's
     position:absolute (.user-menu-dropdown) — an overflow-x other
     than visible on this container forces overflow-y to clip too per
     the CSS spec, which would hide those dropdowns entirely rather
     than just scroll the row. The actual, width-independent fix is
     letting the topbar wrap: search+hamburger claim the first line,
     and the icon group drops to a second line only if it doesn't fit
     — this can't overflow off-screen at any width, unlike hiding a
     fixed set of icons based on a guessed pixel budget (which this
     was, and wasn't reliable — the narrowest viewport this was
     actually verified against was ~539px, not a true ~375-390px
     phone width). height must become auto here too: the desktop
     60px is a fixed height, which would clip a wrapped second row
     entirely.

     Wrapping alone is correct but was taking up to 3 rows — real,
     but too much of the screen on an actual phone. Cutting that down
     for real rather than just shrinking things: the clock is hidden
     (the device already shows the time) and so is the warehouse-floor
     link (it now also lives in the sidebar nav, reachable via the
     hamburger — added there specifically so hiding this copy doesn't
     remove the feature, just the duplicate). The remaining icon
     buttons are also shrunk on mobile; their padding is inline HTML
     (shared with desktop), so !important is the only way to override
     it from here without duplicating every button's markup. Wrap
     stays in place underneath all of this as the safety net — if a
     device is narrow enough that even this doesn't fit on one row,
     it still can't overflow off-screen. */
  .app-topbar { flex-wrap: wrap; height: auto; min-height: 60px; padding: var(--space-2) var(--space-3); row-gap: var(--space-2); }
  #topbar-actions { flex-wrap: wrap; row-gap: 6px; gap: 4px !important; }
  #topbar-clock, #topbar-actions > a[title^="Warehouse floor"] { display: none; }
  #topbar-actions .btn, #topbar-actions .user-menu-trigger { padding: 6px 8px !important; }

  /* All 5 topbar menus (language, notifications, help, currency,
     user avatar) share .user-menu-dropdown, positioned absolute +
     right:0 relative to their OWN trigger button — correct on
     desktop where triggers sit in a fixed right-aligned row, but on
     the wrapped mobile row above, a trigger can end up anywhere
     (language/notifications often land toward the left of that row),
     dragging a 220px-wide dropdown off the left edge of the screen
     entirely — exactly the overflow this fixes. Anchoring to the
     viewport instead of the trigger removes the dependency on where
     in the row a given icon happens to sit. */
  .user-menu-dropdown {
    position: fixed; right: 12px; left: 12px; width: auto; min-width: 0;
    max-height: 70vh; overflow-y: auto;
  }

  .data-table { display: block; overflow-x: auto; white-space: nowrap; }
  .data-table thead, .data-table tbody, .data-table tr { display: revert; }

  /* Card grids and multi-column forms across the app already use
     repeat(auto-fit, minmax(...)) — that pattern already collapses to
     one column once the container is narrower than the minmax
     minimum, so no extra rule is needed there; it was only ever the
     sidebar eating the width that prevented it from happening. */
}