/* ============================================================================
   Trade Portal — "Ledger / ERP" design system (Concept E from the mockups).
   Brand colours are runtime CSS variables injected from Admin → Settings →
   Branding (--c-primary / --c-secondary / --c-accent). Never hardcode a brand.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   THEMING (ADR-030). Every colour in this file resolves through a token below.
   Light is the default on :root; dark redefines the SAME token names under
   [data-theme="dark"], which _Layout stamps on <html> before first paint.
   Rules:
     - surfaces/text/borders -> --surface / --surface2 / --ink / --border...
     - text on a --c-primary fill -> --on-brand; on a --c-accent fill -> --on-accent.
       Both are computed from the brand colour's luminance by _Layout (ADR-032), so an
       acid-yellow or lime primary gets dark text instead of unreadable white.
     - text drawn ON a surface in a status colour -> --ok/--warn/--info/--c-primary-text
     - the pale wash behind such text -> --ok-bg/--warn-bg/--err-bg/--info-bg
   Brand tokens (--c-primary/--c-secondary/--c-accent) come from Admin ->
   Settings -> Branding and are NEVER hardcoded or theme-swapped.
   --------------------------------------------------------------------------- */
:root {
  /* brand tokens — overridden at runtime by the branding <style> block */
  --c-primary: #C8102E;
  --c-secondary: #C99A2E;
  --c-accent: #2E2E30;
  /* derived */
  --c-primary-dark: color-mix(in srgb, var(--c-primary), black 22%);
  --c-secondary-soft: color-mix(in srgb, var(--c-secondary), white 78%);
  /* brand primary as TEXT on a surface (lightened in dark so it stays legible) */
  --c-primary-text: var(--c-primary-dark);
  /* headings: the brand charcoal reads as "ink" in light, but must invert in dark */
  --heading: var(--c-accent);
  /* neutrals */
  --ink: #3A3A3C; --grey: #6E6E70; --grey2: #8a847c;
  --cream: #FBFAF8; --cream2: #F4F2EE;
  --border: #E0DCD4; --border2: #D8D4CC;
  --white: #FFFFFF;
  --page: #FFFFFF;          /* body background */
  --surface: #FFFFFF;       /* panels, cards, inputs, menus */
  --surface2: #FCFBF9;      /* row hover, subtle inset rows */
  --surface3: #F2F2F0;      /* tinted panels */
  --on-brand: #FFFFFF;      /* text on a --c-primary fill — RECOMPUTED per brand by _Layout */
  --on-accent: #FFFFFF;     /* text on a --c-accent fill — likewise */
  /* the top utility bar keeps the brand charcoal in BOTH themes, so its text
     colours are fixed rather than theme-swapped */
  --on-bar: color-mix(in srgb, var(--on-accent) 86%, transparent);
  --on-bar-dim: color-mix(in srgb, var(--on-accent) 66%, transparent);
  --brand-wash: color-mix(in srgb, var(--c-primary) 8%, var(--surface));
  --ok: #1d7a4d; --warn: #b4790b; --danger: #C8102E; --info: #2c5f8a;
  --ok-bg: #e7f3ec;   --ok-bd: #bcdccb;
  --warn-bg: #fbf0d9; --warn-bd: #ecd9a6;
  --err-bg: #fbe7e9;  --err-bd: #f3c2c9;
  --info-bg: #e8eff5; --info-bd: #c6d8e6;
  --sage-on: #7CFC00;       /* Sage connection indicator — lime, deliberately loud */
  /* chart series palette — overwritten per theme by the branding <style> block (ADR-032) */
  --chart-1: #C8102E; --chart-2: #C99A2E; --chart-3: #2b6a9d; --chart-4: #2e7d54;
  --chart-5: #7d3f8d; --chart-6: #1d7a74; --chart-7: #8a8578; --chart-8: #2E2E30;
  --shadow-sm: rgba(0,0,0,.06);
  --shadow-md: rgba(0,0,0,.14);
  --shadow-lg: rgba(0,0,0,.28);
  --scrim: rgba(30, 28, 26, .45);
  --sku-bg: rgba(255,255,255,.85);
  /* deterministic 8-colour pill palette: text colour + its wash */
  --pc0: #2b6a9d; --pc0-bg: #e8eff5;
  --pc1: #2e7d54; --pc1-bg: #e7f3ec;
  --pc2: #9a6b15; --pc2-bg: #fbf0d9;
  --pc3: #7d3f8d; --pc3-bg: #f3e8f5;
  --pc4: #b02a37; --pc4-bg: #fbe7e9;
  --pc5: #1d7a74; --pc5-bg: #e6f2f2;
  --pc6: #6b5537; --pc6-bg: #efeae2;
  --pc7: #4a4aa8; --pc7-bg: #e9e9f7;
  /* ---- layout density (ADR-037) ----
     One gutter token drives every page band (E-util / E-crumb / E-strip / E-cont), so the
     three device tiers are a single override each rather than a rule per band.
     --tap is the minimum height for anything a finger has to hit. */
  --gutter: 26px;
  --tap: 32px;
  --mnav-h: 0px;            /* bottom tab bar height; only non-zero on the phone tier */
  --safe-b: env(safe-area-inset-bottom, 0px);
}

[data-theme="dark"] {
  --c-secondary-soft: color-mix(in srgb, var(--c-secondary), #1E2023 76%);
  --c-primary-text: color-mix(in srgb, var(--c-primary), white 34%);
  --heading: #F0EFEC;
  --ink: #E3E1DD; --grey: #A8A5A0; --grey2: #8B8781;
  --cream: #1A1C1F; --cream2: #26282C;
  --border: #34373C; --border2: #41454B;
  --page: #131417;
  --surface: #1E2023;
  --surface2: #25282C;
  --surface3: #24262A;
  --ok: #4ec98a; --warn: #e2a93f; --danger: #ff6b7d; --info: #6fb3e8;
  --ok-bg: #163024;   --ok-bd: #245a41;
  --warn-bg: #33280f; --warn-bd: #6b5320;
  --err-bg: #38191f;  --err-bd: #6e2c39;
  --info-bg: #16283a; --info-bd: #2b4c69;
  --shadow-sm: rgba(0,0,0,.35);
  --shadow-md: rgba(0,0,0,.5);
  --shadow-lg: rgba(0,0,0,.6);
  --scrim: rgba(0, 0, 0, .62);
  --sku-bg: rgba(20,21,24,.8);
  --pc0: #7fb6e6; --pc0-bg: #17293a;
  --pc1: #6ecf9d; --pc1-bg: #162e24;
  --pc2: #ddab4e; --pc2-bg: #322612;
  --pc3: #c690d6; --pc3-bg: #2c1d33;
  --pc4: #f0808d; --pc4-bg: #371a1f;
  --pc5: #5cc3bc; --pc5-bg: #16302f;
  --pc6: #c3a677; --pc6-bg: #2b2419;
  --pc7: #9a9aec; --pc7-bg: #21213b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--page);
  font-family: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;
  color: var(--ink); font-size: 13px; -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
/* native widgets (date pickers, scrollbars, autofill) follow the theme */
[data-theme="dark"] { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; font-size: inherit; }
table { border-collapse: collapse; width: 100%; }

/* ---------------- top utility bar (E-util) ---------------- */
.E-util { background: var(--c-accent); color: var(--on-bar); display: flex; align-items: center; padding: 0 var(--gutter); height: 46px; gap: 24px; }
.E-util .lg { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; color: var(--on-accent); white-space: nowrap; }
.E-util .lg .crest { width: 26px; height: 26px; border-radius: 5px; background: var(--c-primary); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--on-brand); font-weight: 700; overflow: hidden; }
.E-util .lg .crest img { width: 100%; height: 100%; object-fit: cover; }
.E-util nav { display: flex; gap: 2px; height: 100%; overflow-x: auto;
    flex: 0 1 auto; min-width: 0; }   /* min-width:0 lets it actually shrink and scroll */
.E-util nav a { display: flex; align-items: center; padding: 0 13px; font-size: 13px; color: var(--on-bar-dim); height: 100%; border-bottom: 2px solid transparent; white-space: nowrap; }
.E-util nav a:hover { color: var(--on-accent); }
.E-util nav a.on { color: var(--on-accent); border-bottom-color: var(--c-primary); }
.E-util .r { margin-left: auto; flex: none; display: flex; align-items: center; gap: 16px; font-size: 12px; white-space: nowrap; }
.E-util .r .acct { display: flex; align-items: center; gap: 8px; }
.E-util .r .av { width: 28px; height: 28px; border-radius: 5px; background: var(--c-primary); color: var(--on-brand); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px; }
.E-util .r form { display: inline; }
.E-util .r button { color: var(--on-bar-dim); font-size: 12px; }
.E-util .r button:hover { color: var(--on-accent); }
.bell { position: relative; font-size: 16px; color: var(--on-bar); display: inline-flex; }
.bell .bdg { position: absolute; top: -7px; right: -9px; background: var(--c-primary); color: var(--on-brand); font-size: 9px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }

/* ---------------- Sage connection indicator + theme toggle (top bar) --------- */
.sagedot { font-weight: 600; letter-spacing: .02em; }
.sagedot.on { color: var(--sage-on); text-shadow: 0 0 7px color-mix(in srgb, var(--sage-on) 55%, transparent); }
.sagedot.off { color: var(--on-bar-dim); }
.themebtn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    border-radius: 6px; color: var(--on-bar); font-size: 14px; line-height: 1; }
.themebtn:hover { background: color-mix(in srgb, var(--on-accent) 15%, transparent); color: var(--on-accent); }
/* One glyph per theme — the other is hidden, so the control always shows what you'd switch TO.
   Keyed off [data-theme-toggle] rather than .themebtn so the same pair works in the phone
   More sheet, which renders the toggle as a .sheet-i row (ADR-037). */
[data-theme-toggle] .ico-dark { display: inline; } [data-theme-toggle] .ico-light { display: none; }
[data-theme="dark"] [data-theme-toggle] .ico-dark { display: none; }
[data-theme="dark"] [data-theme-toggle] .ico-light { display: inline; }

/* ---------------- breadcrumb row (E-crumb) ---------------- */
.E-crumb { display: flex; align-items: center; gap: 14px; padding: 7px var(--gutter);
    background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.crumb-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
    color: var(--heading); border: 1px solid var(--border2); border-radius: 6px; padding: 5px 11px;
    background: var(--surface); white-space: nowrap; }
.crumb-back:hover { background: var(--cream2); border-color: var(--c-primary); color: var(--c-primary-text); }
.crumbs { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; min-width: 0; }
.crumbs a { color: var(--grey); font-weight: 500; border-radius: 4px; padding: 2px 3px; }
.crumbs a:hover { color: var(--c-primary-text); text-decoration: underline; }
.crumbs .sep { color: var(--grey2); font-size: 13px; }
.crumbs .cur { color: var(--heading); font-weight: 600; max-width: 46ch;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { .E-crumb { gap: 10px; } }

/* ---------------- sub band (E-strip) ---------------- */
.E-strip { background: var(--cream2); border-bottom: 1px solid var(--border); padding: 9px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.E-strip .l { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.E-strip .a { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.E-strip .t { font-size: 12px; color: var(--grey); }
.E-strip .t b { color: var(--heading); font-size: 15px; font-weight: 600; margin-right: 8px; }

/* ---------------- content ---------------- */
.E-cont { padding: 18px var(--gutter); }
.E-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.E-bar .left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.E-bar .right { display: flex; align-items: center; gap: 10px; }
.E-bar .search { position: relative; }
.E-bar .search input { border: 1px solid var(--border2); border-radius: 6px; padding: 7px 11px 7px 30px; font-size: 13px; font-family: inherit; width: 260px; }
.E-bar .search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--grey2); font-size: 13px; font-style: normal; }
.E-bar .cats { display: flex; gap: 5px; flex-wrap: wrap; }
.E-bar .cats a { font-size: 12.5px; padding: 7px 12px; border: 1px solid var(--border2); border-radius: 6px; color: var(--grey); font-weight: 500; }
.E-bar .cats a.on { background: var(--c-primary); color: var(--on-brand); border-color: var(--c-primary); }
.E-bar .filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.E-bar .filterbar select,
.E-bar .filterbar input[type="month"],
.E-bar .filterbar input[type="date"] { border: 1px solid var(--border2); border-radius: 6px; padding: 7px 9px; font-size: 13px; font-family: inherit; background: var(--surface); color: var(--ink); max-width: 220px; }
.E-bar .filterbar .chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--grey); white-space: nowrap; cursor: pointer; }
.E-bar .filterbar .chk input { accent-color: var(--c-primary); }
th a.sortlink { color: inherit; text-decoration: none; white-space: nowrap; }
th a.sortlink:hover { color: var(--c-primary); }
.E-tablewrap { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }

/* ---------------- KPI cards ---------------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 20px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
.kpi .l { font-size: 11.5px; color: var(--grey); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.kpi .v { font-size: 25px; font-weight: 700; color: var(--heading); margin-top: 7px; }
.kpi .d { font-size: 11.5px; margin-top: 3px; font-weight: 600; color: var(--grey); }
.kpi .d.up { color: var(--ok); } .kpi .d.wn { color: var(--warn); } .kpi .d.dn { color: var(--c-primary-text); }

/* ---------------- panels + dense tables ---------------- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 18px; }
.panel .ph { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); gap: 10px; flex-wrap: wrap; }
.panel .ph h3 { font-size: 14px; font-weight: 600; color: var(--heading); }
.panel .ph .tools { display: flex; gap: 8px; align-items: center; }
.panel .pb { padding: 16px 18px; }
.panel.tinted, .panel.tinted .ph { background: var(--surface3); }

/* ---------------- settings sidebar (shared _SettingsNav partial) ---------------- */
.settings-side { grid-column: 1; grid-row: 1 / span 40; background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 10px; align-self: start; position: sticky; top: 14px;
    display: flex; flex-direction: column; gap: 2px; }
.settings-side .side-title { font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--grey2); padding: 4px 10px 8px; }
.settings-side a { display: block; padding: 9px 12px; border-radius: 6px; font-size: 13px;
    font-weight: 500; color: var(--grey); }
.settings-side a:hover { background: var(--surface2); color: var(--ink); }
.settings-side a.on { background: var(--c-accent); color: var(--on-accent); }
.E-cont:has(> .settings-side) { display: grid; grid-template-columns: 200px 1fr; gap: 0 16px; align-items: start; }
.E-cont:has(> .settings-side) > *:not(.settings-side) { grid-column: 2; }
/* folds on the tablet tier too (ADR-037): a 200px sticky rail plus a settings form does not
   fit an iPad in portrait */
@media (max-width: 1180px) {
  .E-cont:has(> .settings-side) { display: block; }
  .settings-side { position: static; flex-direction: row; flex-wrap: wrap; margin-bottom: 14px; }
}
.dtbl { font-size: 13px; }
.dtbl th { text-align: left; padding: 11px 18px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--grey2); background: var(--cream2); font-weight: 700; border-bottom: 1px solid var(--border); white-space: nowrap; }
.dtbl th.num, .dtbl td.num { text-align: right; }
.dtbl th.ctr, .dtbl td.ctr { text-align: center; }
.dtbl td { padding: 12px 18px; border-bottom: 1px solid var(--border); color: var(--ink); vertical-align: middle; }
.dtbl tr:last-child td { border-bottom: none; }
.dtbl tr:hover td { background: var(--surface2); }
.dtbl .empty { text-align: center; color: var(--grey2); padding: 28px 18px; }
/* combined/total row pinned under the body (Reps performance) */
.dtbl tfoot td { background: var(--cream2); border-top: 2px solid var(--border); border-bottom: none; font-weight: 600; }
.dtbl tfoot tr:hover td { background: var(--cream2); }
.mono { font-family: ui-monospace, Consolas, monospace; color: var(--grey); font-size: 12px; }

/* ---------------- pills / status ---------------- */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
.pill .dotc { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.pill.in { background: var(--ok-bg); color: var(--ok); } .pill.in .dotc { background: var(--ok); }
.pill.low { background: var(--warn-bg); color: var(--warn); } .pill.low .dotc { background: var(--warn); }
.pill.out { background: var(--err-bg); color: var(--c-primary-text); } .pill.out .dotc { background: var(--c-primary); }
.pill.neutral { background: var(--cream2); color: var(--grey); } .pill.neutral .dotc { background: var(--grey2); }
.pill.save { background: var(--ok); color: var(--surface); }
.pill.save.big { font-size: 12px; padding: 4px 10px; }
/* branch pills: max 3 per row (6 stocked branches → 2 rows of 3), status text alongside */
.whpills { display: grid; grid-template-columns: repeat(3, max-content); gap: 4px; justify-content: center; }
.whpills .pill { justify-content: center; }
.avail { display: inline-flex; align-items: center; gap: 8px; }
.avail-status { font-size: 11px; font-weight: 700; white-space: nowrap; }
.avail-status.in { color: var(--ok); }
.avail-status.low { color: var(--warn); }
/* deterministic 8-colour palette for warehouse / price-list pills */
.pill.pc-0 { background: var(--pc0-bg); color: var(--pc0); }
.pill.pc-1 { background: var(--pc1-bg); color: var(--pc1); }
.pill.pc-2 { background: var(--pc2-bg); color: var(--pc2); }
.pill.pc-3 { background: var(--pc3-bg); color: var(--pc3); }
.pill.pc-4 { background: var(--pc4-bg); color: var(--pc4); }
.pill.pc-5 { background: var(--pc5-bg); color: var(--pc5); }
.pill.pc-6 { background: var(--pc6-bg); color: var(--pc6); }
.pill.pc-7 { background: var(--pc7-bg); color: var(--pc7); }
.rowlink tbody tr[data-href] { cursor: pointer; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
/* connection test: expandable per-view column list */
.view-cols summary { cursor: pointer; color: var(--c-primary-text); }
.view-cols summary:hover { text-decoration: underline; }
.cols-list { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 0 4px; max-width: 520px; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; align-items: start; }
@media (max-width: 1100px) { .three-col { grid-template-columns: 1fr; } }

/* ---------------- centered confirmation modal (replaces native confirm) ---------------- */
.modal-overlay { position: fixed; inset: 0; z-index: 1000; background: var(--scrim);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    animation: modal-fade .12s ease-out; }
.modal-card { background: var(--surface); border-radius: 8px; box-shadow: 0 18px 50px var(--shadow-lg);
    max-width: 440px; width: 100%; padding: 22px 24px; animation: modal-pop .14s ease-out; }
.modal-msg { font-size: 14px; line-height: 1.55; color: var(--ink); white-space: pre-line; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.chartgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.chartgrid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1500px) { .chartgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .chartgrid, .chartgrid.two { grid-template-columns: 1fr; } }
.chartgrid .panel { margin-bottom: 0; }
.chartbox { position: relative; height: 260px; }
/* per-card chart-type switcher (injected by dashboard.js into each chart's .ph) */
.chart-gear { position: relative; display: inline-flex; margin-left: auto; }
.chart-gear-btn { background: transparent; border: 1px solid transparent; color: var(--grey);
    font-size: 14px; line-height: 1; padding: 3px 6px; border-radius: 6px; cursor: pointer; }
.chart-gear-btn:hover { background: var(--cream2); color: var(--heading); }
.chart-gear-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; background: var(--surface);
    border: 1px solid var(--border); border-radius: 8px; padding: 5px; min-width: 152px;
    box-shadow: 0 8px 22px var(--shadow-md); display: flex; flex-direction: column; gap: 2px; }
.chart-gear-menu[hidden] { display: none; }
.chart-gear-menu button { text-align: left; background: transparent; border: 0; padding: 7px 10px;
    font-size: 12px; color: var(--ink); border-radius: 6px; cursor: pointer; }
.chart-gear-menu button:hover { background: var(--cream2); }
.chart-gear-menu button.on { background: var(--c-primary); color: var(--on-brand); font-weight: 600; }
.widget-picker { position: relative; }
.widget-picker summary { list-style: none; cursor: pointer; }
.widget-picker[open] form { position: absolute; right: 0; top: 34px; z-index: 30; background: var(--surface);
    border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; min-width: 300px;
    box-shadow: 0 8px 22px var(--shadow-sm); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.perm-row td { background: var(--surface2); }
.perm-row summary { cursor: pointer; font-size: 12px; color: var(--grey); }
.perm-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 10px 0 4px; }
.role-change { display: inline-flex; gap: 4px; align-items: center; }
.role-change select { font-size: 12px; padding: 2px 4px; }
.soh { font-weight: 600; color: var(--ink); }
.soh.low { color: var(--warn); } .soh.out { color: var(--c-primary-text); }
.soh small { display: block; font-weight: 400; color: var(--grey2); font-size: 10px; }
.sb { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 4px; white-space: nowrap; }
.sb-info { background: var(--info-bg); color: var(--info); }
.sb-warning { background: var(--warn-bg); color: var(--warn); }
.sb-error { background: var(--err-bg); color: var(--c-primary-text); }
.sb-ok { background: var(--ok-bg); color: var(--ok); }
.lnk { font-size: 12px; color: var(--c-primary-text); font-weight: 600; }
.lnk:hover { text-decoration: underline; }

/* ---------------- buttons ---------------- */
.btn { background: var(--c-primary); color: var(--on-brand); font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 7px; display: inline-flex; align-items: center; gap: 7px; }
.btn:hover { background: var(--c-primary-dark); }
.btn.ghost { background: var(--surface); color: var(--heading); border: 1px solid var(--border2); }
.btn.ghost:hover { background: var(--cream2); }
.btn.danger { background: var(--danger); }
.btn.sm { padding: 6px 11px; font-size: 12px; }
.btn:disabled { background: var(--surface3); color: var(--grey2); cursor: not-allowed; }

/* ---------------- forms ---------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--grey); margin-bottom: 5px; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number],
.field select, .field textarea {
  width: 100%; border: 1px solid var(--border2); border-radius: 6px; padding: 8px 11px;
  font-size: 13px; font-family: inherit; color: var(--ink); background: var(--surface);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid color-mix(in srgb, var(--c-primary), white 60%); border-color: var(--c-primary); }
.field .hint { font-size: 11.5px; color: var(--grey2); margin-top: 4px; }
.field.checkbox { display: flex; align-items: center; gap: 8px; }
.field.checkbox label { margin: 0; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--ink); }
.field input[type=checkbox] { accent-color: var(--c-primary); width: 15px; height: 15px; }
.field input[type=color] { width: 44px; height: 32px; border: 1px solid var(--border2); border-radius: 6px; padding: 2px; background: var(--surface); }
.color-row { display: flex; align-items: center; gap: 10px; }
.color-row input[type=text] { width: 110px; }
.form-actions { display: flex; gap: 10px; margin-top: 18px; align-items: center; flex-wrap: wrap; }
.validation-error, .field-validation-error { color: var(--danger); font-size: 12px; display: block; margin-top: 4px; }
.validation-summary-errors { background: var(--err-bg); border: 1px solid var(--err-bd); color: var(--c-primary-text); border-radius: 7px; padding: 10px 14px; margin-bottom: 14px; font-size: 12.5px; }
.validation-summary-errors ul { margin-left: 16px; }
.validation-summary-valid { display: none; }

/* ---------------- banners ---------------- */
.banner { border-radius: 7px; padding: 11px 15px; font-size: 12.5px; margin-bottom: 14px; border: 1px solid; display: flex; gap: 9px; align-items: flex-start; }
.banner.error { background: var(--err-bg); border-color: var(--err-bd); color: var(--c-primary-text); }
.banner.warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); }
.banner.info { background: var(--info-bg); border-color: var(--info-bd); color: var(--info); }
.banner.success { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); }
.banner b { font-weight: 700; }

/* ---------------- auth (login / forced change) ---------------- */
.auth-wrap { min-height: 100vh; background: var(--c-accent); display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { background: var(--surface); border-radius: 10px; box-shadow: 0 22px 64px var(--shadow-lg); width: 100%; max-width: 420px; padding: 32px; }
.auth-card .lg { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: var(--heading); margin-bottom: 6px; }
.auth-card .lg .crest { width: 32px; height: 32px; border-radius: 7px; background: var(--c-primary); color: var(--on-brand); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; overflow: hidden; }
.auth-card .lg .crest img { width: 100%; height: 100%; object-fit: cover; }
.auth-card .sub { font-size: 12.5px; color: var(--grey); margin-bottom: 22px; }
.auth-card .field { margin-bottom: 14px; }
.auth-card .btn { width: 100%; justify-content: center; padding: 10px; }
.auth-card h1 { font-size: 18px; color: var(--heading); margin-bottom: 4px; }

/* split sign-in card: form left, branding image right (only when an image is uploaded) */
.auth-card.split { max-width: 880px; padding: 0; display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 9fr); overflow: hidden; }
.auth-card.split .auth-form { padding: 40px 36px; }
.auth-card.split h1 { font-size: 22px; letter-spacing: .02em; }
.auth-visual { background: var(--c-accent); min-height: 480px; }
.auth-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) {
    .auth-card.split { grid-template-columns: 1fr; max-width: 420px; }
    .auth-card.split .auth-form { padding: 32px; }
    .auth-visual { display: none; }
}

/* ---------------- maintenance / status page ---------------- */
.status-card { max-width: 560px; }
.status-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px; }
.status-row:last-child { border-bottom: none; }
.status-row .k { color: var(--grey); }
.status-row .v { font-weight: 600; color: var(--heading); }

/* ---------------- pagination ---------------- */
.pager { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 14px; font-size: 12.5px; color: var(--grey); }
.pager a, .pager span.cur { padding: 6px 11px; border: 1px solid var(--border2); border-radius: 6px; font-weight: 500; }
.pager span.cur { background: var(--c-accent); color: var(--on-accent); border-color: var(--c-accent); }
.pager a:hover { background: var(--cream2); }
.pager .dis { opacity: .45; pointer-events: none; }
.pager .pagesize select { border: 1px solid var(--border2); border-radius: 6px; padding: 6px 8px; font-size: 12.5px; font-family: inherit; background: var(--surface); color: var(--ink); }

/* ---------------- audit diff ---------------- */
.diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.diff-grid h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--grey2); margin-bottom: 7px; }
.diff-grid pre { background: var(--cream); border: 1px solid var(--border); border-radius: 7px; padding: 12px; font-size: 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, Consolas, monospace; }
.diff-grid .old pre { background: var(--err-bg); border-color: var(--err-bd); }
.diff-grid .new pre { background: var(--ok-bg); border-color: var(--ok-bd); }

/* ---------------- notifications ---------------- */
.notif-row td { position: relative; }
.notif-row.unread td { background: var(--c-secondary-soft); }
.notif-row.unread .nt { font-weight: 700; }

/* ---------------- customer catalogue: shared bits ---------------- */
.E-cont-banner { padding: 14px var(--gutter) 0; }
.E-cont-banner .banner { margin-bottom: 0; }

/* grid view (product cards — dense 5-across per the Ledger/ERP concept) */
.cardgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.pcard { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: .15s; }
.pcard:hover { border-color: var(--border2); box-shadow: 0 6px 18px var(--shadow-sm); }
/* square image area: full uploaded image visible (contain), with a blurred copy of the
   image as backdrop so non-square photos fade into their own colours instead of white bars */
.pcard .th { aspect-ratio: 1 / 1; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 34px; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.pcard .th img.th-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(16px) saturate(1.1); transform: scale(1.2); opacity: .6; }
.pcard .th img.th-main { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 4px var(--shadow-sm)); }
.pcard .th .sku { z-index: 2; }
.pcard .th .sku { position: absolute; bottom: 6px; left: 8px; font-size: 10px; font-family: ui-monospace, Consolas, monospace; color: var(--grey2); background: var(--sku-bg); padding: 1px 5px; border-radius: 3px; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .bd { padding: 9px 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pcard h3 { font-size: 12.5px; font-weight: 600; color: var(--heading); line-height: 1.25; min-height: 30px; }
.pcard .meta { display: flex; align-items: center; justify-content: space-between; font-size: 12px; gap: 6px; }
.pcard .price b { font-size: 15px; color: var(--heading); font-weight: 700; }
.pcard .price s { font-weight: 400; font-size: 11px; color: var(--grey2); margin-left: 4px; }
.pcard .stockline { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--grey); border-top: 1px dashed var(--border); margin-top: 2px; padding-top: 7px; }
.pcard .addrow { display: flex; gap: 7px; margin-top: 4px; }
.pcard .qty { display: flex; align-items: center; border: 1px solid var(--border2); border-radius: 6px; }
.pcard .qty button { padding: 6px 7px; color: var(--grey); font-size: 13px; }
.pcard .qty input { width: 32px; border: none; text-align: center; font-size: 12px; font-weight: 600; font-family: inherit; }
.pcard .add { flex: 1; background: var(--c-primary); color: var(--on-brand); font-size: 12.5px; font-weight: 600; padding: 8px; border-radius: 6px; }
.pcard .add:hover { background: var(--c-primary-dark); }
.pcard .add:disabled { background: var(--surface3); color: var(--grey2); cursor: not-allowed; }

/* list view */
table.plist { font-size: 13px; }
table.plist th { text-align: left; padding: 10px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--grey2); background: var(--cream2); font-weight: 700; border-bottom: 1px solid var(--border); }
table.plist th.num, table.plist td.num { text-align: right; }
table.plist th.ctr, table.plist td.ctr { text-align: center; }
table.plist td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.plist tr:last-child td { border-bottom: none; }
table.plist tr:hover td { background: var(--surface2); }
.pname { display: flex; align-items: center; gap: 12px; }
.pname .nm b { display: block; font-weight: 600; color: var(--heading); font-size: 13.5px; }
.pname .nm span { font-size: 11px; color: var(--grey2); font-family: ui-monospace, Consolas, monospace; }
.li-price { font-weight: 700; color: var(--heading); font-size: 15px; white-space: nowrap; }
.li-price s { font-weight: 400; font-size: 11px; color: var(--grey2); margin: 0 5px; }
.li-qty { display: inline-flex; align-items: center; border: 1px solid var(--border2); border-radius: 6px; }
.li-qty button { padding: 5px 8px; color: var(--grey); }
.li-qty input { width: 38px; border: none; text-align: center; font-size: 12px; font-weight: 600; font-family: inherit; }
.li-add { background: var(--c-primary); color: var(--on-brand); font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 6px; white-space: nowrap; }
.li-add:hover { background: var(--c-primary-dark); }
.li-add:disabled { background: var(--surface3); color: var(--grey2); cursor: not-allowed; }

/* view toggle */
.viewtoggle { display: inline-flex; border: 1px solid var(--border2); border-radius: 7px; overflow: hidden; }
.viewtoggle a { padding: 7px 11px; font-size: 12px; font-weight: 500; color: var(--grey); display: flex; align-items: center; gap: 6px; background: var(--surface); }
.viewtoggle a.on { background: var(--c-accent); color: var(--on-accent); }

@media (max-width: 1400px) {
  .cardgrid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1100px) {
  .cardgrid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------- placeholder panels ---------------- */
.placeholder { border: 2px dashed var(--border2); border-radius: 10px; padding: 48px 24px; text-align: center; color: var(--grey2); }
.placeholder b { display: block; color: var(--grey); font-size: 15px; margin-bottom: 6px; }

/* ---------------- misc ---------------- */
.cmini { display: flex; align-items: center; gap: 9px; }
.cmini .av { width: 28px; height: 28px; border-radius: 6px; background: var(--cream2); color: var(--c-primary-text); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; border: 1px solid var(--border); }
.cat-label { font-size: 10px; color: var(--c-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.muted { color: var(--grey2); }
.small { font-size: 11.5px; }
.thumb-mini { width: 44px; height: 44px; border-radius: 6px; background: var(--cream2); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; border: 1px solid var(--border); overflow: hidden; }
.thumb-mini img { width: 100%; height: 100%; object-fit: cover; }
.img-grid { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.img-tile { border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: var(--surface); text-align: center; }
.img-tile img { width: 120px; height: 120px; object-fit: contain; display: block; margin-bottom: 6px; }
.txt-ok { color: var(--ok); font-weight: 600; }
.txt-warn { color: var(--warn); font-weight: 600; }
.txt-dn { color: var(--c-primary-text); font-weight: 600; }
.txt-danger { color: var(--c-primary-text); font-weight: 600; }
.txt-info { color: var(--info); font-weight: 600; }
.w-140 { width: 140px; }
.logo-preview { max-height: 60px; max-width: 220px; border: 1px solid var(--border); border-radius: 7px; padding: 6px; background: var(--white); }
.qr-holder { display: flex; justify-content: center; margin: 14px 0; }
/* stays white in dark mode: a QR needs dark-on-light contrast to scan */
.qr-holder #qr { padding: 10px; background: var(--white); border: 1px solid var(--border); border-radius: 8px; }
.recovery-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; background: var(--cream); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; margin: 12px 0; }
.lost-device { margin-top: 14px; }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr; }
}

/* ---------------- custom report builder (ADR-027) ---------------- */
.rb { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.rb-step { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; }
.rb-stephead { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.rb-stephead h3 { font-size: 15px; font-weight: 600; color: var(--heading); }
.rb-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--c-primary); color: var(--on-brand);
    font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

.rb-subjects { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.rb-subject { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px 14px;
    background: var(--surface); border: 1px solid var(--border2); border-radius: 8px; cursor: pointer; transition: all .12s; }
.rb-subject:hover { border-color: var(--c-primary); background: var(--cream2); }
.rb-subject.on { border-color: var(--c-primary); background: var(--brand-wash); box-shadow: inset 0 0 0 1px var(--c-primary); }
.rb-subject-ic { font-size: 20px; line-height: 1; }
.rb-subject-body { display: flex; flex-direction: column; gap: 3px; }
.rb-subject-t { font-weight: 600; font-size: 13px; color: var(--ink); }
.rb-subject-d { font-size: 11px; color: var(--grey); line-height: 1.35; }

.rb-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .rb-fields { grid-template-columns: 1fr; } }
.rb-fieldpicker { display: flex; flex-direction: column; gap: 8px; }
.rb-fieldpicker input { padding: 8px 10px; border: 1px solid var(--border2); border-radius: 7px; font-size: 13px; }
.rb-fieldlist { border: 1px solid var(--border); border-radius: 8px; max-height: 300px; overflow-y: auto; padding: 6px; }
.rb-fieldgroup { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--grey2); padding: 8px 6px 4px; }
.rb-fieldrow { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; }
.rb-fieldrow:hover { background: var(--cream2); }
.rb-fieldlbl { flex: 1; font-size: 12px; color: var(--ink); }
.rb-typebadge { flex: none; width: 18px; height: 18px; border-radius: 4px; background: var(--surface3); color: var(--grey);
    font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.rb-selectedwrap h4, .rb-sub h4 { font-size: 12px; font-weight: 700; color: var(--heading); margin-bottom: 8px; }
.rb-selected { display: flex; flex-direction: column; gap: 6px; }
.rb-selchip { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 7px 8px 7px 11px; background: var(--cream2); border: 1px solid var(--border); border-radius: 7px; }
.rb-selname { font-size: 12px; font-weight: 600; color: var(--ink); }
.rb-selbtns { display: inline-flex; gap: 2px; }
.rb-empty { font-size: 12px; color: var(--grey); padding: 10px; text-align: center;
    border: 1px dashed var(--border2); border-radius: 7px; }
.rb-iconbtn { width: 24px; height: 24px; border: 1px solid var(--border2); background: var(--surface); border-radius: 5px;
    font-size: 11px; color: var(--grey); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rb-iconbtn:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); }
.rb-iconbtn:disabled { opacity: .35; cursor: default; }

.rb-daterange { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
    padding-bottom: 12px; border-bottom: 1px dashed var(--border); }
.rb-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.rb-filterrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rb-filterrow select, .rb-filterrow input, .rb-daterange input, .rb-add,
.rb-addagg select, .rb-summarybox select { padding: 7px 9px; border: 1px solid var(--border2);
    border-radius: 7px; font-size: 12px; background: var(--surface); }
.rb-filterfield { min-width: 150px; } .rb-filterval { min-width: 120px; }
.rb-and { font-size: 12px; color: var(--grey); }

.rb-toggle { font-size: 13px; }
.rb-summarybox { margin: 12px 0; padding: 14px; background: var(--cream2);
    border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; gap: 14px; }
.rb-sub { display: flex; flex-direction: column; gap: 8px; }
.rb-chips, .rb-aggs { display: flex; flex-wrap: wrap; gap: 6px; }
.rb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 11px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 20px; font-size: 12px; color: var(--ink); }
.rb-addagg { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rb-sorts { display: flex; flex-direction: column; gap: 6px; }
.rb-sortrow { display: flex; align-items: center; gap: 8px; }
.rb-sortname { font-size: 12px; font-weight: 600; color: var(--ink); min-width: 140px; }
.rb-dirbtn { padding: 5px 10px; border: 1px solid var(--border2); background: var(--surface); border-radius: 6px;
    font-size: 11px; color: var(--grey); cursor: pointer; }
.rb-dirbtn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.rb-add { min-width: 160px; }

.rb-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.rb-savepanel { margin-top: 14px; padding: 14px; background: var(--cream2);
    border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; gap: 10px; }
.rb-saverow { display: flex; gap: 12px; flex-wrap: wrap; }
.fld { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 200px; }
.fld span { font-size: 11px; font-weight: 600; color: var(--grey); }
.fld input { padding: 8px 10px; border: 1px solid var(--border2); border-radius: 7px; font-size: 13px; }

.rb-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.rb-preset { display: flex; flex-direction: column; gap: 4px; padding: 13px 15px; background: var(--surface);
    border: 1px solid var(--border2); border-radius: 8px; transition: all .12s; }
.rb-preset:hover { border-color: var(--c-primary); background: var(--cream2); transform: translateY(-1px); }
.rb-preset-t { font-weight: 600; font-size: 13px; color: var(--c-primary-text); }
.rb-preset-d { font-size: 11px; color: var(--grey); line-height: 1.35; }

/* ---------------- avatars & profile (ADR-033) ---------------- */
/* header chip: initials by default, uploaded picture when there is one */
.E-util .r .av.has-img { background: transparent; padding: 0; overflow: hidden; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct { border-radius: 6px; padding: 3px 6px 3px 3px; }
a.acct:hover { background: color-mix(in srgb, var(--on-accent) 12%, transparent); }
.av-lg { width: 76px; height: 76px; border-radius: 12px; background: var(--c-primary);
    color: var(--on-brand); display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 26px; flex: none; overflow: hidden; }
.av-lg.has-img { background: transparent; border: 1px solid var(--border); }
.avatar-edit { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.avatar-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

/* ---------------- colour-scheme picker (Settings → Branding, ADR-032) ---------------- */
.themes { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px dashed var(--border); }
.themes-head { margin-bottom: 12px; }
.themes-head h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--grey); margin-bottom: 4px; }
.themegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.themecard { position: relative; display: block; cursor: pointer; }
/* the radio is stretched invisibly over the whole card: the card is the hit target, and the
   control stays a real focusable radio for keyboard and screen-reader users */
.themecard input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
    opacity: 0; cursor: pointer; z-index: 1; }
.tc-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 13px;
    background: var(--surface); border: 1px solid var(--border2); border-radius: 9px; transition: .12s; height: 100%; }
.themecard:hover .tc-body { border-color: var(--c-primary); transform: translateY(-1px); }
.themecard input:focus-visible + .tc-body { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.themecard input:checked + .tc-body { border-color: var(--c-primary);
    box-shadow: inset 0 0 0 1px var(--c-primary); background: var(--brand-wash); }
.tc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tc-name { font-size: 13px; font-weight: 700; color: var(--heading); }
.tc-swatches { display: flex; gap: 3px; }
.tc-sw { flex: 1; height: 22px; border-radius: 4px; border: 1px solid var(--border); min-width: 0; }
.tc-brand { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
/* colour set from data-ink (computed per swatch), so a yellow chip gets dark text */
.tc-chip { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 3px 7px; border-radius: 4px; border: 1px solid var(--border); }
.tc-blurb { font-size: 11px; color: var(--grey); line-height: 1.35; }

.rowactions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rowactions form { display: inline; margin: 0; }

/* Chart titles link to their drill-down (/Admin/Insights). Styled to stay a heading: the
   affordance is the hover underline and the caret, not a colour change that would make every
   dashboard card look like a link farm. */
.chart-drill { color: inherit; }
.chart-drill:hover { text-decoration: underline; text-decoration-color: var(--c-primary-text); }
.chart-drill::after { content: " ›"; color: var(--c-primary-text); font-weight: 700; }

/* ============================================================================
   RESPONSIVE / MOBILE + TABLET (ADR-037)

   Three tiers, driven by the --gutter / --tap tokens declared on :root:

     > 1180px   desktop — unchanged, this file's default
     <= 1180px  tablet  — roomier gutters and touch targets, top nav still visible
     <= 767px   phone   — app shell: the top nav collapses and a fixed bottom tab
                          bar (.mnav) takes over, tables become cards, dense
                          filter bars move into bottom sheets (.sheet)

   767 rather than 820 is the phone/tablet line on purpose: an iPad in portrait is 810-834
   CSS px and has ample room for the top nav, so it must land on the tablet tier.

   The bottom bar is built from the SAME AdminTabs registry as the desktop nav
   (Services/MobileNav.cs), so there is exactly one place where tab visibility is
   decided. Never duplicate a permission check here.
   ========================================================================== */

/* ---------------- tablet ---------------- */
@media (max-width: 1180px) {
  :root { --gutter: 18px; --tap: 40px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  /* the nav can outgrow the bar on a tablet — let it scroll rather than squash */
  .E-util { gap: 14px; }
  .E-util nav { scrollbar-width: none; }
  .E-util nav::-webkit-scrollbar { display: none; }
  /* Reclaim width for the nav: on a tablet the crest and the avatar already say who is signed
     in, so the company wording and the display name are redundant. */
  .E-util .lg-t { display: none; }
  .E-util .r .acct > span:not(.av) { display: none; }
  .E-util .r { gap: 13px; }
  .btn { padding: 10px 16px; }
  .btn.sm { padding: 8px 12px; }
  .dtbl th, .dtbl td { padding-left: 13px; padding-right: 13px; }
  /* dense tables stay tables on a tablet, but must never push the page sideways */
  .E-tablewrap { overflow-x: auto; }
}

/* ---------------- phone ---------------- */
@media (max-width: 767px) {
  :root { --gutter: 14px; --tap: 44px; --mnav-h: 56px; }

  /* --- top bar collapses to identity + alerts; navigation moves to .mnav --- */
  .E-util { height: 50px; gap: 10px; }
  .E-util nav { display: none; }
  .E-util .lg-t { display: none; }           /* crest only — the company name is in the sheet */
  .E-util .sagedot { display: none; }         /* surfaced on the dashboard instead */
  .E-util .r { gap: 12px; }
  .E-util .r .acct > span:not(.av) { display: none; }
  .E-util .r form { display: none; }          /* Sign out lives in the More sheet */

  /* --- page bands --- */
  .E-strip { padding-top: 10px; padding-bottom: 10px; align-items: flex-start; flex-direction: column; gap: 8px; }
  .E-strip .t b { display: block; margin-right: 0; font-size: 17px; }
  .E-strip .a { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .E-strip .a::-webkit-scrollbar { display: none; }
  .crumbs .cur { max-width: 22ch; }

  /* leave room for the fixed bottom bar (plus the iPhone home indicator). Keyed off :has()
     rather than a JS-applied body class so there is no reflow after first paint. */
  body:has(.mnav) .E-cont { padding-bottom: calc(var(--mnav-h) + var(--safe-b) + 18px); }

  /* --- density --- */
  .E-cont { padding-top: 14px; }
  .panel { margin-bottom: 14px; }
  .panel .ph { padding: 12px 14px; }
  .panel .pb { padding: 14px; }
  .kpi { padding: 12px 13px; }
  .kpi .v { font-size: 21px; }
  .kpi .l { font-size: 10.5px; }

  /* --- touch targets --- */
  .btn { padding: 0 18px; min-height: var(--tap); font-size: 14px; }
  .btn.sm { min-height: 38px; padding: 0 14px; }
  .form-actions .btn, .auth-card .btn { width: 100%; justify-content: center; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .lnk, .crumbs a, .pager a { padding: 6px 4px; }

  /* iOS zooms the whole page when a focused control is under 16px. Everything a finger
     types into is bumped to 16px here — the label/hint scale is left alone. */
  .field input, .field select, .field textarea,
  .E-bar .search input, .E-bar .filterbar select, .E-bar .filterbar input,
  .rb-filterrow select, .rb-filterrow input, .fld input,
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=search], input[type=month], input[type=date], select, textarea {
    font-size: 16px; min-height: var(--tap);
  }
  .field input[type=checkbox], .field input[type=color] { min-height: 0; }
  .field input[type=checkbox] { width: 20px; height: 20px; }

  /* --- grids collapse --- */
  .form-grid, .two-col, .three-col, .diff-grid, .recovery-codes, .rb-fields { grid-template-columns: 1fr; }
  .cardgrid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .chartbox { height: 210px; }
  .avatar-edit { flex-direction: column; }
  .img-tile img { width: 96px; height: 96px; }
  .themegrid, .rb-presets, .rb-subjects { grid-template-columns: 1fr; }

  /* --- filter bars stack; heavy pages instead hand their bar to a sheet (data-sheetify) --- */
  .E-bar { flex-direction: column; align-items: stretch; }
  .E-bar .left, .E-bar .right { width: 100%; }
  .E-bar .search, .E-bar .search input { width: 100%; }
  .E-bar .filterbar { flex-direction: column; align-items: stretch; }
  .E-bar .filterbar select, .E-bar .filterbar input[type="month"], .E-bar .filterbar input[type="date"] { max-width: none; width: 100%; }
  .E-bar .cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .E-bar .cats::-webkit-scrollbar { display: none; }

  .pager { justify-content: center; flex-wrap: wrap; }
  .placeholder { padding: 32px 16px; }

  /* --- dense tables: horizontal scroll is the no-JS fallback; mobile.js upgrades
         them to .stack cards once it has copied the headers into data-label --- */
  .E-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  table.stack, table.stack tbody, table.stack td { display: block; width: 100%; }
  table.stack thead, table.stack tfoot { display: none; }
  /* flex, not block, so a page can promote one cell to the card title with .m-first
     without disturbing the desktop column order */
  table.stack tr { display: flex; flex-direction: column; width: 100%;
      padding: 11px 14px; border-bottom: 1px solid var(--border); }
  table.stack td.m-first { order: -1; }
  table.stack tr:last-child { border-bottom: none; }
  table.stack tr:hover td { background: transparent; }
  table.stack td { border: none; padding: 3px 0; display: flex; align-items: center;
      justify-content: space-between; gap: 14px; text-align: right; }
  table.stack td::before { content: attr(data-label); flex: none; text-align: left;
      font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
      color: var(--grey2); }
  table.stack td[data-label=""]::before { display: none; }
  /* the card title: the promoted cell if the row named one, else the first cell */
  table.stack td.m-first,
  table.stack tr:not(:has(td.m-first)) td:first-child {
      font-weight: 600; color: var(--heading); font-size: 14px; padding-bottom: 6px;
      justify-content: flex-start; text-align: left;
  }
  table.stack td.m-first::before,
  table.stack tr:not(:has(td.m-first)) td:first-child::before { display: none; }
  table.stack td.num, table.stack td.ctr { text-align: right; }
  table.stack td .whpills { justify-content: flex-end; }
  table.stack td .rowactions { justify-content: flex-end; }
  table.stack tr[data-href] { cursor: pointer; }
  table.stack td.empty { display: block; text-align: center; }
  table.stack td.empty::before { display: none; }
  /* a cell the page marked as unimportant on a phone drops out of the card entirely */
  table.stack td.m-hide { display: none; }
}

/* very narrow phones: one product card per row */
@media (max-width: 400px) {
  .cardgrid { grid-template-columns: 1fr; }
}

/* ---------------- bottom tab bar (phone only) ---------------- */
.mnav { display: none; }
@media (max-width: 767px) {
  .mnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: var(--surface); border-top: 1px solid var(--border);
    padding-bottom: var(--safe-b); box-shadow: 0 -2px 14px var(--shadow-sm);
  }
  .mnav-i {
    position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px; height: var(--mnav-h); padding: 0 2px;
    color: var(--grey); font-size: 10px; font-weight: 600; background: none; border: none;
    border-top: 2px solid transparent; margin-top: -1px;
  }
  .mnav-ic { font-size: 17px; line-height: 1; }
  .mnav-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mnav-i.on { color: var(--c-primary-text); border-top-color: var(--c-primary); }
  .mnav-i .bdg { position: absolute; top: 5px; left: 50%; margin-left: 4px; background: var(--c-primary);
      color: var(--on-brand); font-size: 9px; font-weight: 700; min-width: 15px; height: 15px;
      padding: 0 3px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
}

/* ---------------- bottom sheet (phone only) ---------------- */
.sheet-wrap[hidden] { display: none; }
.sheet-wrap { position: fixed; inset: 0; z-index: 1100; display: flex; flex-direction: column; justify-content: flex-end; }
.sheet-scrim { position: absolute; inset: 0; background: var(--scrim); animation: modal-fade .12s ease-out; }
.sheet {
  position: relative; background: var(--surface); border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 40px var(--shadow-lg); max-height: 84vh; overflow-y: auto;
  padding: 8px 0 calc(12px + var(--safe-b)); animation: sheet-up .16s ease-out;
}
@keyframes sheet-up { from { transform: translateY(18px); opacity: .4; } }
.sheet-grab { width: 38px; height: 4px; border-radius: 2px; background: var(--border2); margin: 2px auto 10px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 0 18px 10px; border-bottom: 1px solid var(--border); }
.sheet-head h3 { font-size: 15px; font-weight: 600; color: var(--heading); }
.sheet-close { width: 30px; height: 30px; border-radius: 8px; color: var(--grey); font-size: 17px;
    display: inline-flex; align-items: center; justify-content: center; }
.sheet-close:hover { background: var(--cream2); color: var(--heading); }
.sheet-body { padding: 12px 18px 4px; display: flex; flex-direction: column; gap: 12px; }
.sheet-list { padding: 6px 10px; display: flex; flex-direction: column; }
.sheet-i { display: flex; align-items: center; gap: 12px; padding: 0 12px; min-height: var(--tap);
    border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--ink); background: none;
    border: none; width: 100%; text-align: left; }
.sheet-i:hover { background: var(--cream2); }
.sheet-i.on { background: var(--brand-wash); color: var(--c-primary-text); font-weight: 700; }
.sheet-i .ic { font-size: 17px; width: 22px; text-align: center; flex: none; }
.sheet-i .sub { margin-left: auto; font-size: 11.5px; color: var(--grey2); font-weight: 500; }
.sheet-i.danger { color: var(--c-primary-text); }
.sheet-sep { height: 1px; background: var(--border); margin: 7px 12px; }
.sheet-foot { padding: 10px 18px 0; display: flex; gap: 10px; }
.sheet-foot .btn { flex: 1; justify-content: center; }
/* the sheet is a phone affordance — never let one appear on a wide screen */
@media (min-width: 768px) { .sheet-wrap { display: none !important; } }
/* a filter bar relocated into a sheet lays out as a column, whatever it looked like inline */
.sheet .filterbar { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
.sheet .filterbar select, .sheet .filterbar input { width: 100%; max-width: none; }
.sheet .filterbar .chk { min-height: var(--tap); }

/* the button that opens a relocated filter bar; shows how many filters are live */
.filter-btn { display: none; }
@media (max-width: 767px) {
  .filter-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; min-height: var(--tap); border: 1px solid var(--border2); border-radius: 8px;
      background: var(--surface); color: var(--heading); font-size: 14px; font-weight: 600; }
  .filter-btn .n { background: var(--c-primary); color: var(--on-brand); font-size: 10px;
      font-weight: 700; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
      display: inline-flex; align-items: center; justify-content: center; }
}

/* ---------------- tier visibility helpers ---------------- */
.only-phone { display: none; }
@media (max-width: 767px) {
  .only-phone { display: initial; }
  .no-phone { display: none !important; }
}
@media (max-width: 1180px) { .no-tablet { display: none !important; } }

/* ---------------- phone search box lifted out of a sheetified filter bar ---------------- */
@media (max-width: 767px) {
  /* .E-bar .left is a flex row, so the injected form must claim the full line itself —
     without this it shrinks to its content width. */
  .msearch { width: 100%; flex: 1 0 100%; margin-bottom: 8px; }
  .msearch .search { position: relative; display: block; width: 100%; }
  .msearch .search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
      color: var(--grey2); font-size: 14px; font-style: normal; }
  .msearch .search input { width: 100%; padding: 0 12px 0 34px; border: 1px solid var(--border2);
      border-radius: 9px; background: var(--surface); color: var(--ink); font-family: inherit; }
}

/* ============================================================================
   REP SCREENS ON A PHONE (ADR-037, phase 2)
   The order pad is the screen a rep lives in, so it gets real work rather than a
   collapsed table: product cards with steppers and a sticky order-total bar.
   ========================================================================== */

/* --- order pad: product rows become cards --- */
.opad-list { display: none; }
@media (max-width: 767px) {
  .opad-list { display: flex; flex-direction: column; gap: 8px; }
  .opad-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
      padding: 11px 12px; display: flex; flex-direction: column; gap: 9px; }
  .opad-top { display: flex; gap: 11px; align-items: flex-start; }
  .opad-top .thumb-mini { width: 52px; height: 52px; }
  .opad-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .opad-nm b { font-size: 14px; font-weight: 600; color: var(--heading); line-height: 1.3; }
  .opad-nm .sku { font-size: 11px; font-family: ui-monospace, Consolas, monospace; color: var(--grey2); }
  .opad-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px;
      border-top: 1px dashed var(--border); padding-top: 8px; }
  .opad-price { font-size: 17px; font-weight: 700; color: var(--heading); white-space: nowrap; }
  .opad-price s { font-weight: 400; font-size: 12px; color: var(--grey2); margin-left: 5px; }
  .opad-add { display: flex; gap: 8px; align-items: stretch; }
  .opad-add .li-qty { flex: none; border-radius: 9px; }
  .opad-add .li-qty button { min-width: var(--tap); min-height: var(--tap); font-size: 18px; color: var(--heading); }
  .opad-add .li-qty input { width: 46px; font-size: 16px; background: transparent; color: var(--ink); }
  .opad-addform { flex: 1; display: flex; }
  .opad-add .li-add { flex: 1; justify-content: center; display: inline-flex; align-items: center;
      min-height: var(--tap); border-radius: 9px; font-size: 14px; }
}

/* --- sticky order summary: always visible while adding lines --- */
.opad-bar { display: none; }
@media (max-width: 767px) {
  .opad-bar {
    display: flex; align-items: center; gap: 12px; position: sticky; z-index: 60;
    bottom: calc(var(--mnav-h) + var(--safe-b)); margin: 14px calc(var(--gutter) * -1) 0;
    padding: 11px var(--gutter) calc(11px); background: var(--surface);
    border-top: 1px solid var(--border); box-shadow: 0 -3px 14px var(--shadow-sm);
  }
  .opad-bar .sum { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .opad-bar .sum .k { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .5px; color: var(--grey2); }
  .opad-bar .sum .v { font-size: 17px; font-weight: 700; color: var(--heading); }
  .opad-bar .btn { flex: none; }
}

/* --- a two-column key/value block reads better as rows on a phone --- */
@media (max-width: 767px) {
  .status-row { gap: 14px; }
  .status-row .k { flex: none; }
  .status-row .v { text-align: right; min-width: 0; }
}

/* --- rep dashboard: KPI tiles stay two-across, charts get a snap rail --- */
@media (max-width: 767px) {
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 14px; }
  /* the period picker on Reps → Performance is a filter bar like any other */
  .rb-daterange { flex-direction: column; align-items: stretch; }
}

/* --- report list: each report becomes a full-width tappable card --- */
@media (max-width: 767px) {
  .rpt-grid { grid-template-columns: 1fr !important; }
}
