/* ═══════════════════════════════════════════════════════════════════════
   sg-modern.css — StockGenie design language (Oct 2026)
   ═══════════════════════════════════════════════════════════════════════
   The look first built for the Customer Portal (customer.html), applied to
   the staff app. CSS ONLY: no markup, ids, classes or JavaScript change.
   Link it LAST (after sg-theme.css / sg-console.css) so it wins on order.

   Language: Inter everywhere, indigo→violet brand gradient, 14–16px radii,
   soft layered shadows, pill badges, glass top bar, quiet table headers,
   gradient primary buttons, focus rings. Colours come from the existing
   theme variables, so the dark theme keeps working; light-only touches are
   scoped to :root[data-theme="light"].
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --sgm-brand:#4f46e5; --sgm-brand2:#7c3aed;
  --sgm-grad:linear-gradient(135deg,#4f46e5,#7c3aed);
  --sgm-r:16px; --sgm-r-sm:12px;
  --sgm-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --sgm-shadow-hover:0 12px 30px -14px rgba(16,24,40,.28);
  --sgm-shadow-pop:0 24px 60px -16px rgba(16,24,40,.35);
  --sgm-ring:0 0 0 4px rgba(79,70,229,.14);
}
/* Only pages in the light theme (sg-theme.js sets data-theme="light"). Pages
   designed dark without the theme switch (portal, picklist) keep their own palette. */
:root[data-theme="light"]{ --bg:#f6f7fb; --border:#e8ebf2; --surface2:#f4f6fa; }

/* ── Type ─────────────────────────────────────────────────────────────── */
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
.sb-brand-name,.topnav-title,.card-title,.modal h3,.ac-name,.rs-val,.pipe-count,.wl-brand,.login-logo h1,.lb-brand h1{
  font-family:'Inter',system-ui,sans-serif!important;letter-spacing:-.03em;
}
.btn,.lbtn,.filter-chip,.dash-tab,.search-input,.field input,.field select,.lfield input,.l-field input,
.sb-co-role,.sb-uemail,.nav-badge,.ac-meta,.u-email{font-family:'Inter',system-ui,sans-serif}
.td-mono,.stat-val{font-family:'Inter',system-ui,sans-serif;font-feature-settings:"tnum" 1}

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.sidebar{box-shadow:1px 0 0 var(--border)}
.sb-brand{padding:18px 18px 16px;display:block}
.sb-brand-name{font-size:18px;font-weight:800;display:flex;align-items:center;gap:10px}
.sb-brand-name::before{
  content:"";width:32px;height:32px;border-radius:10px;flex:none;background:var(--sgm-grad) center/18px no-repeat;
  box-shadow:0 6px 16px -6px rgba(79,70,229,.7);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E"),var(--sgm-grad);
}
.sb-brand-name em{background:var(--sgm-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sb-brand-sub{margin-left:42px;margin-top:0}
.sb-company{border-radius:14px;border:1px solid var(--border);background:var(--surface2);box-shadow:none}
.sb-section{font-size:10.5px;letter-spacing:.08em;padding:16px 10px 6px}
.nav-item{border-radius:10px;padding:9px 12px;font-weight:500}
.nav-item.active{background:var(--tint-accent-h);color:var(--accent);font-weight:650;box-shadow:inset 0 0 0 1px var(--tint-accent-b)}
.nav-item.active::before{display:none}
.nav-badge{border:0;font-weight:700}
.nav-item.active .nav-badge{background:var(--sgm-grad)}
.sidebar.collapsed .nav-item.active{background:var(--sgm-grad);box-shadow:none}
.sb-avatar,.u-avatar{background:var(--sgm-grad);border-radius:10px}
.sb-footer{padding:12px 14px}

/* ── Top bar: glass ───────────────────────────────────────────────────── */
.topnav{background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);padding:12px 24px;border-bottom:1px solid var(--border)}
.topnav-title{font-size:19px;font-weight:800}
.live-dot{font-weight:600;font-size:12px;background:color-mix(in srgb,var(--green) 10%,transparent);padding:4px 10px;border-radius:999px}

.page-content{padding:22px 24px 40px}

/* ── KPI / stat cards ─────────────────────────────────────────────────── */
.stats-row{gap:14px;margin-bottom:16px}
.stat{border-radius:var(--sgm-r);padding:16px 18px;box-shadow:var(--sgm-shadow);border:1px solid var(--border);position:relative;transition:transform .15s ease,box-shadow .15s ease}
.stat:hover{transform:translateY(-1px);box-shadow:var(--sgm-shadow-hover)}
.stat-label{font-size:12px;text-transform:none;letter-spacing:0;font-weight:600;color:var(--muted);margin-bottom:6px}
.stat-val{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.stat-sub{font-size:12px;margin-top:4px}
.stat-icon{position:absolute;top:14px;right:14px;float:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:18px;background:var(--tint-accent);margin:0}
.rs-card{border-radius:var(--sgm-r);box-shadow:var(--sgm-shadow)}
.rs-label{text-transform:none;letter-spacing:0;font-weight:600;font-size:12px}
.inw-pipeline-stage{border-radius:var(--sgm-r);background:var(--surface);box-shadow:var(--sgm-shadow)}

/* ── Cards ────────────────────────────────────────────────────────────── */
.card{border-radius:var(--sgm-r);box-shadow:var(--sgm-shadow);border:1px solid var(--border)}
.card-header{padding:14px 18px;border-bottom:1px solid var(--border);background:transparent}
.card-title{font-size:15px;font-weight:700}
.card-body{padding:16px 18px}
.audit-card{border-radius:var(--sgm-r);box-shadow:var(--sgm-shadow);transition:transform .15s,box-shadow .15s,border-color .15s}
.audit-card:hover{transform:translateY(-1px);box-shadow:var(--sgm-shadow-hover);border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}

/* ── Tables ───────────────────────────────────────────────────────────── */
th,.ow-tbl th{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted);background:var(--surface2);padding:10px 12px;border-bottom:1px solid var(--border)}
td,.ow-tbl td{padding:11px 12px;font-size:13px;border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent)}
tr:hover td,.ow-tbl tr:hover td{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.card .tbl-wrap{border-radius:0 0 var(--sgm-r) var(--sgm-r)}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{border-radius:var(--sgm-r-sm);font-weight:600;padding:9px 16px;transition:transform .12s ease,box-shadow .15s ease,background .15s,border-color .15s,color .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--sgm-grad);color:#fff;border:0;box-shadow:0 8px 20px -10px rgba(79,70,229,.7)}
.btn-primary:hover{background:var(--sgm-grad);filter:brightness(1.06);box-shadow:0 12px 26px -10px rgba(79,70,229,.75)}
.btn-outline{background:var(--surface);border:1px solid var(--border);box-shadow:var(--sgm-shadow)}
.btn-outline:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));color:var(--accent);background:var(--surface)}
.btn-danger{border-radius:var(--sgm-r-sm)}
.btn-sm{padding:6px 12px;font-size:12.5px;border-radius:10px}
.lbtn{border-radius:var(--sgm-r-sm);background:var(--sgm-grad);font-weight:700;box-shadow:0 10px 24px -10px rgba(79,70,229,.75)}

/* ── Inputs ───────────────────────────────────────────────────────────── */
.search-input,.field input,.field select,.lfield input,.l-field input,.town-picker-input,
.page-content input[type=text],.page-content input[type=search],.page-content input[type=number],.page-content input[type=email],
.page-content input[type=date],.page-content select,.page-content textarea,.modal input[type=text],.modal input[type=number],.modal select,.modal textarea{
  border-radius:var(--sgm-r-sm)!important;transition:border-color .15s,box-shadow .15s;
}
.search-input:focus,.field input:focus,.field select:focus,.lfield input:focus,.l-field input:focus,
.page-content input:focus,.page-content select:focus,.page-content textarea:focus,.modal input:focus,.modal select:focus,.modal textarea:focus{
  border-color:var(--accent)!important;box-shadow:var(--sgm-ring);outline:0;
}
.field label,.lfield label,.field-label{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600;color:var(--text)}

/* ── Chips, tabs, badges ──────────────────────────────────────────────── */
.filter-chip{border-radius:999px;font-weight:600;padding:7px 14px;transition:.15s}
.filter-chip.on{background:var(--sgm-grad);color:#fff;border-color:transparent;box-shadow:0 6px 14px -8px rgba(79,70,229,.7)}
.dash-tab{border-radius:10px 10px 0 0;font-weight:600}
.dash-tab.active{color:var(--accent);border-bottom-width:2px}
.sg-mnav-t.on{color:var(--accent)}
.badge,.ow-badge{border-radius:999px;font-size:11px;font-weight:650;letter-spacing:.01em;text-transform:none;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}
.badge::before,.ow-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.role-chip,.audit-num-chip,.box-chip{border-radius:999px;text-transform:none;letter-spacing:0;font-weight:650}
.cn-badge-ss,.cn-badge-mrp,.cn-badge-pending,.cn-badge-raised,.cn-badge-closed{border-radius:999px;padding:3px 10px}

/* ── Modals & overlays ────────────────────────────────────────────────── */
.overlay{background:rgba(15,23,42,.45);backdrop-filter:blur(4px)}
.modal{border-radius:20px;box-shadow:var(--sgm-shadow-pop);border:1px solid var(--border);padding:26px 28px}
.modal h3{font-size:19px;font-weight:800}
.m-actions .btn{padding:11px}
.warn-box{border-radius:var(--sgm-r-sm)}

/* ── Toast ────────────────────────────────────────────────────────────── */
#toast{border-radius:14px;padding:13px 18px;font-weight:500;box-shadow:var(--sgm-shadow-pop);backdrop-filter:blur(8px)}

/* ── Progress, loaders ────────────────────────────────────────────────── */
.prog-bar,.loc-bar-track{background:color-mix(in srgb,var(--border) 80%,transparent)}
.prog-fill,.loc-bar-fill{background:var(--sgm-grad)}
.wl-fill{background:var(--sgm-grad)}
.spinner{border-top-color:var(--sgm-brand)}

/* ── Login (staff) ────────────────────────────────────────────────────── */
.lcard,.login-card{border-radius:20px;box-shadow:var(--sgm-shadow-pop);border:1px solid var(--border)}
.login-tab.active{background:var(--sgm-grad);box-shadow:0 6px 14px -8px rgba(79,70,229,.7)}
.lb-logo{background:var(--sgm-grad);border-radius:16px}

/* ── Scrollbars ───────────────────────────────────────────────────────── */
.sb-nav::-webkit-scrollbar,.tbl-wrap::-webkit-scrollbar{width:8px;height:8px}
.sb-nav::-webkit-scrollbar-thumb,.tbl-wrap::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 30%,transparent);border-radius:8px}

/* ── Icons: calm, monochrome emoji (colour comes back on hover/active) ──
   The colourful emoji icons were the loudest "dated" signal left. Rendered
   as quiet monochrome glyphs they read like an icon set; the active nav item
   and hovered buttons get their colour back. */
.nav-icon{filter:grayscale(1);opacity:.62;transition:filter .15s,opacity .15s}
.nav-item:hover .nav-icon{opacity:.85}
.nav-item.active .nav-icon{filter:none;opacity:1}
.stat-icon,.rs-card .ico,.empty .ei{filter:grayscale(1) contrast(1.1);opacity:.75}
.stat:hover .stat-icon{filter:none;opacity:1}
.btn-outline,.btn-sm,.dash-tab,.sg-mnav-t,.card-title{font-variant-emoji:text}
.btn-outline .ico,.page-content .btn-sm{transition:filter .15s}
.page-content .btn-outline,.page-content .btn-sm:not(.btn-primary){filter:saturate(.35)}
.page-content .btn-outline:hover,.page-content .btn-sm:not(.btn-primary):hover{filter:none}
.dash-tab,.sg-mnav-t{filter:saturate(.4)}
.dash-tab.active,.sg-mnav-t.on,.dash-tab:hover,.sg-mnav-t:hover{filter:none}

/* ── Typewriter fonts inside tables / lists → Inter with tabular figures ── */
.page-content [style*="monospace"],.page-content code,.page-content .mono{
  font-family:'Inter',system-ui,sans-serif!important;font-feature-settings:"tnum" 1;letter-spacing:0;
}
.page-content td [style*="monospace"]{font-weight:600}

/* ── Page header subtitle + section spacing ── */
.page-content > p,.page-content .page-sub{color:var(--muted)}
.page-content .card + .card{margin-top:16px}

/* ── Tabs → segmented control ─────────────────────────────────────────────
   Every tab strip in the Control Centre (Outward, Dispatch, Sales Order,
   Inward, Masters (BC), Reports, Fleet, Expenses, Dashboard…) was an
   underlined text row. They become the iOS-style segmented control used in
   the Customer Portal. The tab JS still writes its inline styles — the
   active tab is the one it colours var(--accent), so that is what we key on. */
div:has(> button[onclick^="dspTab"]),div:has(> button[onclick^="soSubTab"]),div:has(> button[onclick^="owSwitchTab"]),
div:has(> button[onclick^="bcOpsTab"]),div:has(> button[onclick^="drTab"]),div:has(> button[onclick^="fuelTab"]),
div:has(> button[onclick^="plRptTab"]),div:has(> button[onclick^="plTab"]),div:has(> button[onclick^="pwRptTab"]),
div:has(> button[onclick^="secTab"]),div:has(> button[onclick^="showDashTab"]),div:has(> button[onclick^="switchBcMastersTab"]),
div:has(> button[onclick^="switchExpTab"]),div:has(> button[onclick^="switchInwardTab"]){
  display:inline-flex;flex-wrap:nowrap!important;gap:2px!important;align-items:center;
  width:auto!important;max-width:100%;overflow-x:auto;scrollbar-width:none;
  background:color-mix(in srgb,var(--muted) 12%,var(--bg))!important;border:0!important;border-bottom:0!important;
  border-radius:14px!important;padding:4px!important;margin-bottom:18px!important;
}
button[onclick^="dspTab"],button[onclick^="soSubTab"],button[onclick^="owSwitchTab"],button[onclick^="bcOpsTab"],button[onclick^="drTab"],
button[onclick^="fuelTab"],button[onclick^="plRptTab"],button[onclick^="plTab"],button[onclick^="pwRptTab"],button[onclick^="secTab"],
button[onclick^="showDashTab"],button[onclick^="switchBcMastersTab"],button[onclick^="switchExpTab"],button[onclick^="switchInwardTab"]{
  border:0!important;border-radius:10px!important;margin:0!important;padding:8px 14px!important;
  background:transparent!important;color:var(--muted)!important;font-weight:600!important;font-size:13px!important;
  white-space:nowrap;filter:saturate(.4);box-shadow:none!important;transition:background .15s,color .15s,box-shadow .15s,filter .15s!important;
}
button[onclick^="dspTab"]:hover,button[onclick^="soSubTab"]:hover,button[onclick^="owSwitchTab"]:hover,button[onclick^="bcOpsTab"]:hover,
button[onclick^="drTab"]:hover,button[onclick^="fuelTab"]:hover,button[onclick^="plRptTab"]:hover,button[onclick^="plTab"]:hover,
button[onclick^="pwRptTab"]:hover,button[onclick^="secTab"]:hover,button[onclick^="showDashTab"]:hover,button[onclick^="switchBcMastersTab"]:hover,
button[onclick^="switchExpTab"]:hover,button[onclick^="switchInwardTab"]:hover{color:var(--text)!important}
button[onclick*="Tab("][style*="var(--accent)"],button[onclick*="Tab("].btn-primary,.ow-tab-btn.active,.dash-tab.active,button[onclick*="Tab("].active{
  background:var(--surface)!important;color:var(--text)!important;filter:none;
  box-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1)!important;
}
.ow-tab-badge{border-radius:999px}

/* ── Action buttons inside tables: one tidy line ── */
td .btn{white-space:nowrap}
td .btn-sm{padding:6px 10px}

/* ── Inline ALL-CAPS status tags → calm pills ── */
.page-content span[style*="text-transform:uppercase"][style*="border-radius"]{
  text-transform:none!important;letter-spacing:0!important;border-radius:999px!important;font-weight:650!important;font-size:11.5px!important;padding:4px 10px!important;
}

/* ═══════════════════════════════════════════════════════════════════════
   OTHER PAGES (Oct 2026) — the same language on every staff page
   (portal, outward, inward, scan, picklist, bc-*, bl-*, retail, delivery,
   hgpd-inward, initial-stock, parts-lookup, superadmin). Looks only: no
   display/visibility is changed on anything a page shows or hides.
   ═══════════════════════════════════════════════════════════════════════ */
body{background-color:var(--bg)}
input[type=text],input[type=search],input[type=number],input[type=email],input[type=password],input[type=date],input[type=tel],select,textarea{
  border-radius:var(--sgm-r-sm);transition:border-color .15s,box-shadow .15s}
input[type=text]:focus,input[type=search]:focus,input[type=number]:focus,input[type=email]:focus,input[type=password]:focus,
input[type=date]:focus,input[type=tel]:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:var(--sgm-ring);outline:0}

/* page headers / top bars used by the stand-alone pages */
/* (frosted headers removed: backdrop-filter traps fixed pop-ups opened from inside a header) */
.topbar-title,.page-title,.hdr-title{font-family:'Inter',system-ui,sans-serif;font-weight:800;letter-spacing:-.03em}

/* panels & cards on other pages */
.panel,.section-card,.search-card,.sum-card,.info-card,.stat-card,.stat-box,.kpi,.box-card,.bin-card,.scan-card,.result-card,.so-card,.po-card{
  border-radius:var(--sgm-r);box-shadow:var(--sgm-shadow)}
.stat-box .stat-val,.stat-card .stat-val,.kpi-val,.sum-val{font-family:'Inter',system-ui,sans-serif;font-weight:800;letter-spacing:-.03em}
.stat-lbl,.stat-label,.kpi-label{letter-spacing:.02em}

/* tabs → segmented control (underlined tab rows on the other pages) */
.main-tabs,.stab-row,.tabs,.items-tab-bar,.tabs-row{
  gap:2px;width:fit-content;max-width:calc(100% - 24px);overflow-x:auto;scrollbar-width:none;
  background:color-mix(in srgb,var(--muted) 12%,var(--bg))!important;border:0!important;border-radius:14px!important;
  padding:4px!important;margin:12px!important;
}
.main-tab,.stab,.tab,.items-tab,.sa-tab,.tab-b{
  border:0!important;border-radius:10px!important;margin:0!important;padding:8px 14px!important;
  background:transparent!important;color:var(--muted);font-weight:600;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s}
.main-tab:hover,.stab:hover,.tab:hover,.items-tab:hover,.sa-tab:hover,.tab-b:hover{color:var(--text)}
.main-tab.active,.stab.active,.tab.active,.tab.on,.items-tab.active,.sa-tab.active,.tab-b.active{
  background:var(--surface)!important;color:var(--text)!important;box-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1)!important}
.tab-badge{border-radius:999px}
/* pill-style mode tabs (scanner / camera / manual) already segmented: brand gradient when active */
.mode-tabs,.scanner-tabs,.loc-tabs{border-radius:14px!important;padding:4px!important}
.mode-tab,.scanner-tab,.loc-tab{border-radius:10px!important}
.mode-tab.active,.scanner-tab.active,.loc-tab.active,.login-tab.active{background:var(--sgm-grad)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 6px 14px -8px rgba(79,70,229,.7)}

/* badges / pills used across pages */
.pill,.chip,.tag,.status-pill,.st-badge{border-radius:999px}