/* eg-board.css — BOARD OS v2 (draft): the marketing language, on the seller boards.
   LAYOUT: a VERTICAL sticky sidebar rail (main pages, stacked ■ tabs, ends after the last item) + a top-bar
   "page settings" block (SEARCH · EN · NIGHT · ALERTS · BALANCE · + NEW · account · out) as one connected
   bordered strip with ink dividers + ■ dot-and-label cells. Sharp · 1.5px ink · hard offset shadow · one violet.
   Loaded AFTER eg-theme.js (wins the cascade) + paired with eg-board.js (tags + relabels the live controls).
   Presentation only — no markup/logic rewrite. Scoped to html.eg-board-on. */

/* ══════════════════════ DESIGN-SYSTEM RULES — keep future edits coherent ══════════════════════
   Read this before adding or changing any rule below. The look is one system; stay inside it.
   • TOKEN PALETTE (values are AUTHORITATIVE — never change what they resolve to, only reference them):
       --bos-ink   = primary text / dark UI      --bos-paper  = white cards
       --bos-ground= muted page ground           --bos-cardline = card border   --bos-line = lighter divider
       --bos-grey / --bos-grey2 = muted text      --bos-violet = the ONE accent  --bos-violet-soft = active-nav tint
       --bos-grad  = blue→violet accent gradient  --bos-hover  = row/cell hover
   • RADIUS: 12px cards (--bos-radius) / 8px small (--bos-radius-sm). Nothing sharp-cornered.
   • SHADOW: soft only (--bos-shadow / --bos-shadow-hover). No hard offset shadows.
   • MOTION: ~220ms with --bos-ease; keep transitions short and subtle.
   • TYPE: Inter/SF sans everywhere — NO MONOSPACE anywhere (--bos-mono now resolves to Inter; kept only
     as a var so legacy references flip in one place).
   • CASE: normal-case for all content, nav items and headings. The ONE deliberate uppercase is the tiny
     tracked SECTION LABELS (sidebar OPERATIONS / ACCOUNT eyebrows) — nothing else.
   • ACCENT: exactly ONE accent — --bos-violet (or --bos-grad). Everything else is ink/grey/paper/ground.
   ═════════════════════════════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'DepartureMono';src:url(fonts/DepartureMono-Regular.woff2) format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Inter';src:url(fonts/Inter-Variable.woff2) format('woff2');font-weight:100 900;font-display:swap}

:root{
  --bos-ink:oklch(0.147 0.004 49.3); --bos-paper:oklch(1 0 0); --bos-ground:oklch(0.965 0.003 55); --bos-panel:oklch(0.96 0.002 17.2);  /* preset b7WjLthiq (Taupe) EXACT: --foreground / --card(white) / muted-grey ground so white cards pop / --muted. Neutral Taupe scale unchanged from prior preset. */
  --bos-violet:oklch(0.511 0.262 276.966); --bos-violet-dk:oklch(0.457 0.24 277.023); --bos-violet-soft:oklch(0.945 0.03 277); --bos-amber:#f8d264;  /* preset b7WjLthiq INDIGO: --sidebar-primary (indigo-600, the accent) + --primary (deeper indigo, hover/pressed) + soft indigo tint for active nav */
  --bos-grad:linear-gradient(135deg,oklch(0.511 0.262 276.966) 0%,oklch(0.57 0.235 292) 100%); --bos-sh-acc:0 8px 22px oklch(0.511 0.262 276.966 / .32);  /* indigo -> violet accent gradient + glow */
  --bos-line:oklch(0.948 0.003 45); --bos-grey:oklch(0.547 0.021 43.1); --bos-grey2:oklch(0.68 0.013 43);   /* preset: light divider + EXACT --muted-foreground + lighter tertiary */
  --bos-cardline:oklch(0.922 0.005 34.3);  /* preset --border EXACT. Low-hierarchy dividers even lighter via --bos-line */
  --bos-radius:12px; --bos-radius-sm:8px;
  --bos-shadow:0 1px 3px 0 rgba(0,0,0,.06),0 1px 2px -1px rgba(0,0,0,.05);
  --bos-shadow-hover:0 8px 24px -4px rgba(0,0,0,.12);
  --bos-ease:cubic-bezier(.22,.61,.36,1);
  --bos-mint:#12b886; --bos-pink:#f06595; --bos-amberp:#f2b705; --bos-blue:#4c6ef5; --bos-coral:#f6704f;
  --bos-hover:oklch(0.96 0.002 17.2);   /* preset --muted / --accent EXACT */
  --bos-mono:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;   /* mono RETIRED — all board type is Inter sans (user pref: DepartureMono was too hard to read). Kept the var name so the 18 chrome rules that reference it flip in one place; they keep their uppercase/letter-spacing, just in sans. */
  --bos-sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;  /* readable body sans — mono is kept for nav/top-bar/buttons/card eyebrows only; data-dense reading (tables, form labels, order/settings detail) uses this */
}
html.eg-board-on body{background:var(--bos-ground)!important}

/* ════ VERTICAL SIDEBAR RAIL (main pages) ════ */
@media(min-width:861px){
  html.eg-board-on aside.sidebar{
    width:240px!important;position:fixed!important;top:0!important;left:0!important;bottom:0!important;transform:none!important;
    height:100vh!important;min-height:100vh!important;max-height:100vh!important;overflow-y:auto!important;
    background:var(--bos-paper)!important;border:none!important;border-right:1px solid var(--bos-cardline)!important;box-shadow:none!important;
    border-radius:0!important;display:flex!important;flex-direction:column!important}
  html.eg-board-on [style*="margin-left:220px"]{margin-left:240px!important}
}
html.eg-board-on .sidebar-logo{height:auto!important;padding:17px 18px!important;border-bottom:1px solid var(--bos-cardline)!important}
html.eg-board-on aside.sidebar nav{flex:1 1 auto!important;padding:8px 10px!important}
/* each nav row = a bordered cell with a ■ marker (icon out) */
/* INSET light hairline separators between rows (don't reach the box edges — 16px inset, unified) */
html.eg-board-on .ni{border:none!important;position:relative!important;border-radius:8px!important;
  font-family:var(--bos-sans)!important;font-weight:500!important;text-transform:none!important;letter-spacing:-.006em!important;font-size:14px!important;
  padding:9px 12px!important;margin:1px 0!important;color:oklch(0.44 0.012 45)!important;display:flex!important;align-items:center!important;gap:11px!important}
/* the inset separator itself (16px in on each side); not on the active row or the last row */
html.eg-board-on .ni::after{display:none!important}
html.eg-board-on .ni.on::after,html.eg-board-on aside.sidebar nav a.ni:last-of-type::after,html.eg-board-on .side-foot > a.ni:last-child::after{display:none!important}
html.eg-board-on[data-theme=dark] .ni::after{background:#302e37!important}
/* nav icons return — muted grey, accent on the active row (spacing already handled by .ni gap) */
html.eg-board-on .ni svg{display:inline-flex!important;width:17px!important;height:17px!important;flex:0 0 auto!important;color:var(--bos-grey2)!important;transition:color .16s var(--bos-ease)}
html.eg-board-on .ni:not(.on):hover svg{color:var(--bos-grey)!important}
html.eg-board-on .ni.on svg{color:var(--bos-violet)!important}
/* keep intentionally-hidden nav rows hidden (e.g. Product Templates) */
html.eg-board-on .ni[style*="display:none"]{display:none!important}
/* titles alone — no ■ marker (cleaner, less cluttered) */
html.eg-board-on .ni.on{background:var(--bos-violet-soft)!important;color:var(--bos-violet)!important;font-weight:600!important}
html.eg-board-on .ni:not(.on):hover{background:var(--bos-hover)!important;color:var(--bos-ink)!important}
html.eg-board-on .ni[data-badge],html.eg-board-on .ni [data-badge]{font-family:var(--bos-mono)!important;border-radius:0!important;font-size:10px!important}
/* Profile is reachable from the account cell; hide it + the ACCOUNT section header so the rail ends at Settings */
html.eg-board-on aside.sidebar a.ni[href*="tab=profile"]{display:none!important}
/* sidebar footer (.side-foot: Profile[hidden] + Log out) — make it full-width + connected to the nav, put
   ONE full-width separator line ABOVE Log out (between Settings and Log out), and NONE below Log out */
html.eg-board-on .side-foot{margin:0!important;padding:0 0 0 15px!important;gap:0!important}
html.eg-board-on .side-foot > a.ni{border:none!important}
/* Log out (in nav OR footer): an INSET separator ABOVE it, none below; suppress the divider of the row before it */
html.eg-board-on a.ni[onclick*="signOut"]::after{display:none!important}
html.eg-board-on a.ni:has(+ a.ni[onclick*="signOut"])::after{display:none!important}
html.eg-board-on a.ni[onclick*="signOut"]::before{display:none!important}
html.eg-board-on[data-theme=dark] a.ni[onclick*="signOut"]::before{background:#302e37!important}
/* Settings is the last row in <nav>; keep it borderless so the line-above-Log-out is the only separator */
html.eg-board-on aside.sidebar nav a.ni:last-of-type{border-bottom:none!important}
/* SEARCH cell: lock to the block height so it can't float/misalign; keep its dropdown able to escape */
html.eg-board-on .bos-controls > div[style*="position:relative"]:has(#hdr-search-btn){height:44px!important;overflow:visible!important}
html.eg-board-on #hdr-search-btn{height:100%!important}
/* section label (ACCOUNT) — no border of its own; the ink row-dividers above/below do the separating */
/* section labels (OPERATIONS / ACCOUNT) — tiny uppercase tracked eyebrow, like the Plate reference.
   This is the ONE deliberate uppercase in the system (nav items + headers stay normal case). */
html.eg-board-on aside.sidebar nav > div:not(.ni){font-family:var(--bos-sans)!important;font-size:10.5px!important;letter-spacing:.07em!important;font-weight:600!important;
  text-transform:uppercase!important;color:var(--bos-grey2)!important;padding:16px 12px 7px!important;border-bottom:none!important}

/* ════ TOP BAR — connected "page settings" block. NO header band/colour — transparent, matches the ground ════ */
html.eg-board-on header{background:var(--bos-paper)!important;border-bottom:1px solid var(--bos-cardline)!important;
  height:auto!important;min-height:60px!important;padding:11px 24px!important;gap:12px!important}
/* out-specify the beige-neutraliser (which also matches the header's inline #f7f5f0) so the header stays clear */
html.eg-board-on:not([data-theme=dark]) header[style*="background"]{background:var(--bos-paper)!important}
html.eg-board-on .bos-controls{margin-left:auto!important;display:flex!important;align-items:stretch!important;gap:0!important;
  border:none!important;box-shadow:none!important;background:transparent!important;overflow:visible;flex-wrap:nowrap;border-radius:0}
/* every cell: ink divider, fixed height, mono, ■ + label layout */
html.eg-board-on .bos-controls > *{position:relative!important;border-radius:0!important;margin:0!important;
  height:42px!important;display:flex!important;align-items:center!important;gap:7px!important;padding:0 13px!important;background:transparent!important;
  font-family:var(--bos-sans)!important;font-size:14px!important;text-transform:none!important;letter-spacing:0!important;
  color:var(--bos-ink)!important;box-shadow:none!important;white-space:nowrap;cursor:pointer;transition:background .12s}
/* inset "unfinished" cell divider — a short centred rule like the sidebar's .ni::after, not a full-height border */
html.eg-board-on .bos-controls > * + *::after{display:none!important}
html.eg-board-on[data-theme=dark] .bos-controls > * + *::after{background:#403d48!important}
/* some factory headers nest an inline <script> among the controls; the display:flex on
   .bos-controls > * would otherwise reveal its source text — keep script/style hidden */
html.eg-board-on .bos-controls script,html.eg-board-on .bos-controls style{display:none!important}
html.eg-board-on .bos-controls > *:hover{background:var(--bos-hover)!important}
/* force EVERY control cell to the full block height so the ink dividers connect top-to-bottom (beats
   eg-theme's older `header .ibtn{height:32px}`, which left short, floating, misaligned dividers) */
html.eg-board-on body:has(.sidebar) header .bos-controls{height:44px!important;align-items:stretch!important}
html.eg-board-on body:has(.sidebar) header .bos-controls > *{height:44px!important;min-height:0!important;align-self:stretch!important}
/* kill the old thin grey vertical-divider spacers */
html.eg-board-on .bos-controls > div[style*="width:1px"]{display:block!important;align-self:center!important;width:1px!important;height:22px!important;background:var(--bos-cardline)!important;margin:0 8px!important}
html.eg-board-on .bos-sq{display:none!important}   /* titles alone — no ■ marker */
/* ONE uniform type for every control cell: same family, size, weight, tracking (kills the mismatched fonts) */
html.eg-board-on .bos-controls,html.eg-board-on .bos-controls *{font-family:var(--bos-mono)!important;font-size:14px!important;
  font-weight:400!important;letter-spacing:0!important;text-transform:none!important;font-variant-numeric:tabular-nums}
/* ── FIRST-PAINT header labels — pure CSS (replaces the old eg-board.js relabel(), whose post-paint
   icon→label swap WAS the header FOUC). Icons hidden, UPPERCASE lettering via pseudo-elements; the live
   values (#balance-val / #notif-dot / #hdr-lang-code) stay as real children so they still update. ── */
/* TOP-BAR v3 — real icon buttons (Search / Alerts / Theme) instead of the old text labels */
html.eg-board-on #hdr-search-btn > svg{display:inline-flex!important;width:16px!important;height:16px!important}
html.eg-board-on #hdr-search-btn::before{content:none!important}
/* language cell already shows #hdr-lang-code "EN" natively */
html.eg-board-on #hdr-theme-track{display:inline-block!important}
html.eg-board-on #pref-btn::before{content:none!important}
html.eg-board-on .bos-controls button:has(#notif-dot) > svg{display:inline-flex!important;width:17px!important;height:17px!important}
html.eg-board-on .bos-controls button:has(#notif-dot)::before{content:none!important}
html.eg-board-on .bos-controls .bal-chip::before{content:'Balance'!important;color:var(--bos-grey)!important;font-weight:500!important;margin-right:7px!important;font-size:12px!important}
/* Search + Alerts → square 36px icon buttons with hover; EN + theme keep auto width */
html.eg-board-on #hdr-search-btn,html.eg-board-on .bos-controls button:has(#notif-dot){
  width:36px!important;min-width:36px!important;height:36px!important;padding:0!important;border-radius:8px!important;justify-content:center!important;color:var(--bos-grey)!important}
html.eg-board-on #hdr-lang-btn,html.eg-board-on #pref-btn{color:var(--bos-grey)!important;border-radius:8px!important;padding:0 10px!important}
html.eg-board-on #hdr-search-btn:hover,html.eg-board-on .bos-controls button:has(#notif-dot):hover,html.eg-board-on #hdr-lang-btn:hover,html.eg-board-on #pref-btn:hover{background:var(--bos-hover)!important;color:var(--bos-ink)!important}
/* user cell: keep only the first name (drop avatar block + email line) */
html.eg-board-on .bos-controls .ibtn[onclick*="settings"] > div:first-child{display:flex!important}
html.eg-board-on .bos-controls .ibtn[onclick*="settings"] > div:nth-child(2) > div:last-child{display:none!important}
/* every pseudo label inherits the mono cell type */
html.eg-board-on .bos-controls ::before,html.eg-board-on .bos-controls ::after{font-family:var(--bos-mono)!important;font-size:14px!important;letter-spacing:0!important;text-transform:none!important}
/* alerts count sits inline after the label */
html.eg-board-on #notif-dot{position:absolute!important;top:4px!important;right:4px!important;font-family:var(--bos-sans)!important;background:var(--bos-violet)!important;color:#fff!important;
  border:2px solid var(--bos-paper)!important;border-radius:999px!important;min-width:16px!important;padding:0 3px!important;height:16px!important;font-size:9px!important;font-weight:700!important;display:flex!important;align-items:center!important;justify-content:center!important;line-height:1!important}
/* balance is a plain connected cell now — kill the .bal-chip pill's OWN border/radius/shadow/fill (from eg-theme + page CSS)
   so it stops floating a nested box on top of the continuous tab block. High specificity beats eg-theme's body:has() rule. */
html.eg-board-on body:has(.sidebar) .bos-controls .bal-chip{border:1px solid var(--bos-cardline)!important;border-radius:8px!important;box-shadow:none!important;background:var(--bos-paper)!important;height:34px!important;padding:0 12px!important;font-weight:600!important}
html.eg-board-on[data-theme=dark] body:has(.sidebar) .bos-controls .bal-chip{background:transparent!important;border:none!important;box-shadow:none!important}
/* + New = the single accent cell — the violet must BLEED to fill the whole cell (was sitting 2px short).
   Scope to the wrapper that actually holds #new-menu-btn (the SEARCH wrapper is also position:relative!) */
html.eg-board-on .bos-controls > div[style*="position:relative"]{padding:0!important;align-items:stretch!important}
/* +New: un-filled cell (the solid colour block read clunky in the connected bar) — cobalt lettering + icons instead */
html.eg-board-on .bos-controls > div[style*="position:relative"]:has(#new-menu-btn){background:transparent!important;align-items:center!important;padding:0 4px!important}
html.eg-board-on .bos-controls > div[style*="position:relative"]:has(#new-menu-btn):hover{background:var(--bos-hover)!important}
html.eg-board-on .bos-controls #new-menu-btn{background:var(--bos-violet)!important;color:#fff!important;border:none!important;box-shadow:none!important;
  border-radius:8px!important;height:36px!important;width:auto!important;font-family:var(--bos-sans)!important;text-transform:none;letter-spacing:0;font-size:13px!important;font-weight:600!important;
  transform:none!important;padding:0 14px!important;justify-content:center!important;gap:5px!important}
html.eg-board-on .bos-controls #new-menu-btn:hover{background:var(--bos-violet-dk)!important}
html.eg-board-on .bos-controls #new-menu-btn svg path{stroke:#fff!important}
/* the account cell + logout cell keep the ■ + label shape (email already dropped by the relabel) */
html.eg-board-on .bos-logout{color:var(--bos-grey)!important}
html.eg-board-on .bos-logout svg{display:none!important}

/* page title: sans (Inter) — serif (Fraunces) is reserved for marketing pages, not the app */
html.eg-board-on header > span,html.eg-board-on header #page-title,html.eg-board-on header div[style*="margin-right:auto"]:not(:has(a)){font-family:var(--bos-sans)!important;font-weight:700!important;font-size:22px!important;letter-spacing:-.025em!important}
/* Dashboards use NO serif — Fraunces is a marketing-page face. Flip any inline Fraunces (hero headings, KPI numerals) to Inter, EXCEPT the brand wordmark logo. */
html.eg-board-on [style*="Fraunces"]{font-family:var(--bos-sans)!important;letter-spacing:-.015em!important}
html.eg-board-on a[href="index.html"] [style*="Fraunces"],html.eg-board-on a[href="index.html"][style*="Fraunces"]{font-family:'Fraunces',Georgia,serif!important;letter-spacing:0!important}
/* Shared board breadcrumb — matches product-detail's .pd-crumbs. High specificity + !important + CSS :hover so loose header-link theme rules can't override the colour or the cobalt hover. */
html.eg-board-on header .eg-crumb,html.eg-board-on .eg-crumb{display:flex!important;align-items:center;gap:8px;font-family:var(--bos-sans)!important;font-size:12px!important;font-weight:500!important;text-transform:none!important;letter-spacing:-.005em!important;flex-wrap:wrap}
html.eg-board-on header .eg-crumb a,html.eg-board-on .eg-crumb a{color:#9ca3af!important;display:inline-flex!important;align-items:center;height:auto!important;text-decoration:none!important;border-bottom:1.5px solid transparent!important;transition:color .12s,border-color .12s!important}
html.eg-board-on header .eg-crumb a:hover,html.eg-board-on .eg-crumb a:hover{color:var(--bos-violet)!important;border-bottom-color:var(--bos-violet)!important}
html.eg-board-on header .eg-crumb .sep,html.eg-board-on .eg-crumb .sep{color:#9ca3af!important;opacity:.7;display:inline-flex;align-items:center}
html.eg-board-on header .eg-crumb .cur,html.eg-board-on .eg-crumb .cur{color:var(--bos-ink)!important}
/* hide the now-redundant mobile hamburger on desktop (rail is always visible) */
@media(min-width:861px){ html.eg-board-on #mob-ham{display:none!important} }

/* ════ UNIFIED CARD SYSTEM — one frame language, two fills:
   every card = thin 1px BLACK frame, NO shadow, sharp. WHITE fill = content/data panel;
   PASTEL fill (KPI tiles below) = a metric. ════ */
html.eg-board-on .card,html.eg-board-on .ccard,html.eg-board-on .stat-card{
  background:#fff!important;border:1px solid var(--bos-cardline)!important;box-shadow:var(--bos-shadow)!important;border-radius:var(--bos-radius)!important}
/* ════ KPI TILES → flat framed cards (Tavus "Sparrow" card): pastel fill, THIN BLACK FRAME, NO shadow,
   Departure-Mono header on a black divider line ════ */
html.eg-board-on .wcard{border:1px solid var(--bos-cardline)!important;box-shadow:var(--bos-shadow)!important;border-radius:var(--bos-radius)!important}
/* the card's eyebrow/label → Departure Mono; its underline → a full-width black frame line */
html.eg-board-on .wcard .eg-card-dot{background:var(--bos-ink)!important}
html.eg-board-on .wcard > div:first-child,html.eg-board-on .wcard [style*="text-transform:uppercase"]:first-child{font-family:var(--bos-mono)!important;letter-spacing:0!important}
/* KPI tiles → monotone WHITE (rainbow pastel fills retired; the metric reads from the number + a small accent dot, not the tile colour) */
html.eg-board-on .wcard{background:var(--bos-paper)!important}

/* ════ TABLES (existing .dtable) — the card frames it, so the table itself is BORDERLESS (no inner box) ════ */
html.eg-board-on .dtable{border:none!important;box-shadow:none!important;background:transparent!important}
html.eg-board-on .dtable th{background:transparent!important;border-bottom:1px solid var(--bos-cardline)!important;
  color:var(--bos-grey2)!important;font-family:var(--bos-sans)!important;font-size:11.5px!important;letter-spacing:0!important;
  text-transform:none;font-weight:600!important;padding:11px 14px!important}
html.eg-board-on .dtable td{border-bottom:1px solid var(--bos-line)!important;padding:12px 14px!important;background:transparent!important}
html.eg-board-on .dtable tr.main-row:hover td{background:#faf8f4!important}
html.eg-board-on .dtable tr:last-child td{border-bottom:none!important}
/* expand-row (the item breakdown) inside a mini-table: no stray borders, light inset only */
html.eg-board-on .dtable tr.exp-row td{border-top:none!important;background:#fbfaf8!important}

/* ════ STATUS BADGES → ONE clean pixel-pill system (covers BOTH the orders `.b-*` and the seller
   dashboard `.b-s-*` variants). The old inline coloured DOT inside each pill is hidden — the pill's
   own fill carries the stage colour now, so no stray "■" in front of the label. ════ */
html.eg-board-on .badge,html.eg-board-on [class*="b-s-"],html.eg-board-on .b-new,html.eg-board-on .b-queue,
html.eg-board-on .b-prod,html.eg-board-on .b-qc,html.eg-board-on .b-packed,html.eg-board-on .b-shipped{
  font-family:var(--bos-mono)!important;font-size:10px!important;text-transform:none;letter-spacing:0!important;
  border:1px solid transparent!important;border-radius:999px!important;padding:3px 10px!important;font-weight:600!important;gap:0!important}
/* hide the inline coloured dot some badges render before their label */
html.eg-board-on .badge>span[style*="border-radius:50%"],html.eg-board-on [class*="b-s-"]>span[style*="border-radius:50%"]{display:none!important}
/* stage colours — orders table + seller dashboard share the same fills */
/* shadcn-style soft-tinted status pills — light */
html.eg-board-on:not([data-theme=dark]) .b-new,html.eg-board-on:not([data-theme=dark]) .b-s-new{background:#e8f0fd!important;color:#2f6fe0!important;border-color:transparent!important}
html.eg-board-on:not([data-theme=dark]) .b-queue,html.eg-board-on:not([data-theme=dark]) .b-s-queue,html.eg-board-on:not([data-theme=dark]) .b-s-active{background:#f4f4f5!important;color:#52525b!important;border-color:transparent!important}
html.eg-board-on:not([data-theme=dark]) .b-prod,html.eg-board-on:not([data-theme=dark]) .b-s-prod,html.eg-board-on:not([data-theme=dark]) .b-s-printing{background:#f8efda!important;color:#b0791c!important;border-color:transparent!important}
html.eg-board-on:not([data-theme=dark]) .b-qc,html.eg-board-on:not([data-theme=dark]) .b-s-qc,html.eg-board-on:not([data-theme=dark]) .b-s-review{background:#edebfe!important;color:#6a5bf2!important;border-color:transparent!important}
html.eg-board-on:not([data-theme=dark]) .b-packed,html.eg-board-on:not([data-theme=dark]) .b-s-packed{background:#fbe9ef!important;color:#d6456f!important;border-color:transparent!important}
html.eg-board-on:not([data-theme=dark]) .b-shipped,html.eg-board-on:not([data-theme=dark]) .b-s-shipped,html.eg-board-on:not([data-theme=dark]) .b-s-fulfilled{background:#e6f5ee!important;color:#12925a!important;border-color:transparent!important}
/* dark — deep tint + bright text */
html.eg-board-on[data-theme=dark] .b-new,html.eg-board-on[data-theme=dark] .b-s-new{background:#122038!important;color:#7fb0ff!important;border-color:transparent!important}
html.eg-board-on[data-theme=dark] .b-queue,html.eg-board-on[data-theme=dark] .b-s-queue,html.eg-board-on[data-theme=dark] .b-s-active{background:#27272a!important;color:#a1a1aa!important;border-color:transparent!important}
html.eg-board-on[data-theme=dark] .b-prod,html.eg-board-on[data-theme=dark] .b-s-prod,html.eg-board-on[data-theme=dark] .b-s-printing{background:#2a2211!important;color:#e0b055!important;border-color:transparent!important}
html.eg-board-on[data-theme=dark] .b-qc,html.eg-board-on[data-theme=dark] .b-s-qc,html.eg-board-on[data-theme=dark] .b-s-review{background:#1e1b39!important;color:#a99bff!important;border-color:transparent!important}
html.eg-board-on[data-theme=dark] .b-packed,html.eg-board-on[data-theme=dark] .b-s-packed{background:#2e1420!important;color:#f090b0!important;border-color:transparent!important}
html.eg-board-on[data-theme=dark] .b-shipped,html.eg-board-on[data-theme=dark] .b-s-shipped,html.eg-board-on[data-theme=dark] .b-s-fulfilled{background:#12271c!important;color:#5fce97!important;border-color:transparent!important}

/* ════ BUTTONS ════ */
html.eg-board-on .btn-dk,html.eg-board-on .btn-gold{background:var(--bos-grad)!important;color:#fff!important;
  border:none!important;box-shadow:var(--bos-sh-acc)!important;border-radius:var(--bos-radius-sm)!important;
  font-family:var(--bos-sans)!important;text-transform:none;letter-spacing:0;font-weight:600;font-size:12.5px!important}
html.eg-board-on .btn-out{border:1px solid var(--bos-cardline)!important;box-shadow:var(--bos-shadow)!important;
  border-radius:var(--bos-radius-sm)!important;background:#fff!important;font-family:var(--bos-sans)!important;text-transform:none;letter-spacing:0;font-weight:600;font-size:12.5px!important}

/* ════ DRAG-TO-REORDER handles — sharp + unobtrusive (was a rounded grey box + soft shadow on hover) ════ */
html.eg-board-on .wcard .drag-handle,html.eg-board-on .ccard-handle,html.eg-board-on .sec-handle{
  border-radius:0!important;box-shadow:none!important;background:transparent!important;border:none!important;color:#cbcac4!important}
html.eg-board-on .wcard:hover .drag-handle,html.eg-board-on .ccard:hover .ccard-handle,html.eg-board-on .sec-block:hover .sec-handle{background:transparent!important;opacity:.55!important}
html.eg-board-on .wcard .drag-handle:hover,html.eg-board-on .ccard-handle:hover,html.eg-board-on .sec-handle:hover{color:var(--bos-ink)!important;background:transparent!important;opacity:1!important}
/* drop-target outline → sharp, not rounded */
html.eg-board-on .sec-block.sec-drag-over::before{border-radius:0!important;border-color:var(--bos-ink)!important}
html.eg-board-on .ccard.cc-drag-over{outline-color:var(--bos-ink)!important}

/* ════ + NEW dropdown → Tavus-style: an EXTENSION of the button box (connected, no gap; separated by just
   the line), mono uppercase, no icons/subtitles (redirects kept), very subtle shadow ════ */
html.eg-board-on #new-menu-dd{top:100%!important;margin-top:0!important;right:0!important;
  border:1.5px solid var(--bos-ink)!important;border-top:none!important;box-shadow:3px 3px 0 rgba(25,25,24,.14)!important;
  border-radius:0!important;padding:0!important;background:#fff!important;min-width:210px!important;overflow:hidden}
html.eg-board-on #new-menu-dd > div{border-radius:0!important;border-bottom:1px solid var(--bos-line)!important;padding:0!important;align-items:stretch!important;gap:0!important}
html.eg-board-on #new-menu-dd > div:last-child{border-bottom:none!important}
html.eg-board-on #new-menu-dd > div:hover{background:var(--bos-hover)!important}
/* hide the icon square + the subtitle line — leave the title only, in mono uppercase */
html.eg-board-on #new-menu-dd > div > div:first-child{display:none!important}
html.eg-board-on #new-menu-dd > div > div:last-child > div:last-child{display:none!important}
html.eg-board-on #new-menu-dd > div > div:last-child{padding:13px 16px!important}
html.eg-board-on #new-menu-dd > div > div:last-child > div:first-child{font-family:var(--bos-mono)!important;font-size:11.5px!important;
  text-transform:none!important;letter-spacing:0!important;font-weight:400!important;color:var(--bos-ink)!important;margin:0!important}

/* KPI card header underline → light hairline grey (cards are no longer full-ink framed) */
html.eg-board-on .wcard *:has(> .eg-card-dot){border-bottom-color:var(--bos-cardline)!important;border-bottom-width:1px!important}

/* SEARCH label — center it with the SAME 13px side padding as EN/NIGHT/ALERTS (was hugging the dividers) */
html.eg-board-on .bos-controls > div[style*="position:relative"]:has(#hdr-search-btn){justify-content:center!important;gap:0!important;padding:0 13px!important}
html.eg-board-on #hdr-search-btn{padding:0!important;margin:0!important;justify-content:center!important}
/* expanded SEARCH box — give it breathing room so it doesn't hug the cell/button */
html.eg-board-on #hdr-search-wrap > div{margin:0 8px!important}
html.eg-board-on #hdr-search{background:#faf9f7!important;border:1px solid var(--bos-cardline)!important;border-radius:var(--bos-radius-sm)!important}

/* ════ dashboard STATUS-BREAKDOWN mini-cards (In Queue/Printing/QC/Shipped) — were the old grey rails +
   sans labels; now Departure-Mono labels + Board OS stage-colour rails ════ */
html.eg-board-on [style*="border-left:3px solid"] [style*="uppercase"]{font-family:var(--bos-mono)!important;letter-spacing:0!important}
html.eg-board-on [style*="border-left:3px solid #111827"]{border-left-color:var(--bos-blue)!important}
html.eg-board-on [style*="border-left:3px solid #4b5563"]{border-left-color:var(--bos-amberp)!important}
html.eg-board-on [style*="border-left:3px solid #9ca3af"]{border-left-color:var(--bos-violet)!important}
html.eg-board-on [style*="border-left:3px solid #d1d5db"]{border-left-color:var(--bos-mint)!important}

/* ════ NEUTRALISE the old beige inner boxes (ITEMS/ORDER, RETURN RATE, etc.) — were warm/faded ════ */
html.eg-board-on:not([data-theme=dark]) [style*="background:#eeede9"],
html.eg-board-on:not([data-theme=dark]) [style*="background:#f0ede9"],
html.eg-board-on:not([data-theme=dark]) [style*="background:#f6f5f4"],
html.eg-board-on:not([data-theme=dark]) [style*="background:#f7f5f0"],
html.eg-board-on:not([data-theme=dark]) [style*="background:#f4f2ef"],
html.eg-board-on:not([data-theme=dark]) [style*="background:#f6f4f0"]{background:#f4f4f5!important}

/* ══════════════════ DARK MODE — Board OS (shared across every board) ══════════════════
   The whole board goes dark, not just the header: dark ground, dark surfaces, light frames + text. */
html.eg-board-on[data-theme=dark] body{background:#161418!important}
/* sidebar rail */
html.eg-board-on[data-theme=dark] aside.sidebar{background:#201e24!important;border-color:#403d48!important}
html.eg-board-on[data-theme=dark] aside.sidebar .sidebar-logo{border-bottom-color:#403d48!important}
html.eg-board-on[data-theme=dark] .ni{color:#d8d4cc!important;border-bottom-color:#302e37!important}
html.eg-board-on[data-theme=dark] .ni.on{background:var(--bos-violet)!important;color:#fff!important}
html.eg-board-on[data-theme=dark] .ni:not(.on):hover{background:#2c2a33!important;color:#f0ede6!important}
html.eg-board-on[data-theme=dark] aside.sidebar nav > div:not(.ni){color:#7d7885!important}
/* top controls block */
html.eg-board-on[data-theme=dark] header{background:#161418!important;border-bottom-color:#403d48!important}
html.eg-board-on[data-theme=dark] .bos-controls{background:#201e24!important;border-color:#403d48!important}
html.eg-board-on[data-theme=dark] .bos-controls > *{background:#201e24!important;color:#d8d4cc!important;border-left-color:#403d48!important}
html.eg-board-on[data-theme=dark] .bos-controls > *:hover{background:#2c2a33!important}
html.eg-board-on[data-theme=dark] .bos-controls #new-menu-btn,html.eg-board-on[data-theme=dark] .bos-controls > div[style*="position:relative"]:has(#new-menu-btn){background:transparent!important}
html.eg-board-on[data-theme=dark] #hdr-search{background:#2c2a33!important;border-color:#403d48!important;color:#e8e4dd!important}
html.eg-board-on[data-theme=dark] header > span,html.eg-board-on[data-theme=dark] header #page-title{color:#f0ede6!important}
/* content cards + KPI frames */
/* Dark mode: near-black fill + crisp light border (replaces the old dim colored tints that read "old") */
html.eg-board-on[data-theme=dark] .card,html.eg-board-on[data-theme=dark] .ccard,html.eg-board-on[data-theme=dark] .stat-card,html.eg-board-on[data-theme=dark] .wcard{
  background:#151419!important;border:1px solid #6d6a78!important;color:#e8e4dd!important;box-shadow:none!important}
/* KPI highlight → cobalt fill + light border (the "cobalt + white borderline" card); one accent per group of six, the rest stay black */
html.eg-board-on[data-theme=dark] .wcard:nth-of-type(6n+1){background:var(--bos-violet)!important;border-color:#c3ccff!important;color:#fff!important}
html.eg-board-on[data-theme=dark] .wcard .eg-card-dot{background:#e8e4dd!important}
html.eg-board-on[data-theme=dark] .wcard *:has(> .eg-card-dot){border-bottom-color:#5a5660!important}
/* tables — rows read as a subtle raise off the dark ground, hover a touch brighter (expand-row stays transparent) */
html.eg-board-on[data-theme=dark] .dtable th{border-bottom-color:#5a5660!important;color:#d8d4cc!important}
html.eg-board-on[data-theme=dark] .dtable td{border-bottom-color:#302e37!important;color:#c8c3bb!important}
html.eg-board-on[data-theme=dark] .dtable tr.main-row td{background:#232128!important}
html.eg-board-on[data-theme=dark] .dtable tr.main-row:hover td{background:#2d2a34!important}
/* the old beige inner boxes → dark surface */
html.eg-board-on[data-theme=dark] [style*="background:#eeede9"],html.eg-board-on[data-theme=dark] [style*="background:#f0ede9"],
html.eg-board-on[data-theme=dark] [style*="background:#f6f5f4"],html.eg-board-on[data-theme=dark] [style*="background:#f7f5f0"],
html.eg-board-on[data-theme=dark] [style*="background:#f4f2ef"],html.eg-board-on[data-theme=dark] [style*="background:#fafaf9"]{background:#2a2830!important}
/* generic light text/number colours that were hard-coded dark ink → light in dark mode */
html.eg-board-on[data-theme=dark] [style*="color:#191918"],html.eg-board-on[data-theme=dark] [style*="color:#111827"]{color:#e8e4dd!important}

/* ════ ORDERS / data tables — the DATA itself on-theme (was Inter / system-mono) ════ */
/* order IDs + age + money + store-source → sans (content reads sans; mono stays on nav/header) */
html.eg-board-on .dtable td[data-col="order"] > div{font-family:Inter,-apple-system,'Segoe UI',sans-serif!important}
html.eg-board-on .dtable td[data-col="total"]{font-variant-numeric:tabular-nums}
html.eg-board-on .dtable td[data-col="store"] > div:last-child{font-family:var(--bos-sans)!important;font-size:11px!important;letter-spacing:0}
/* filter-bar buttons (Stores · Source · Date range · Columns · the All/status tabs) → mono uppercase, sharp */
html.eg-board-on .fb{font-family:var(--bos-sans)!important;text-transform:none!important;letter-spacing:0!important;font-size:12px!important;border-radius:var(--bos-radius-sm)!important}
html.eg-board-on:not([data-theme=dark]) .fb:hover{background:var(--bos-hover)!important;color:var(--bos-ink)!important}
html.eg-board-on:not([data-theme=dark]) .filter-btn.active,html.eg-board-on:not([data-theme=dark]) .fb.active{border-bottom:2px solid var(--bos-ink)!important;color:var(--bos-ink)!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
/* order-search input → mono + sharp */
html.eg-board-on input[placeholder*="Search orders"]{font-family:var(--bos-sans)!important;font-size:13px!important;border-radius:0!important}
html.eg-board-on .search-box,html.eg-board-on input[placeholder*="Search orders"]{border-radius:var(--bos-radius-sm)!important}
/* the small in-row action buttons (Push, etc.) + Export → sharp mono framed */
html.eg-board-on td[data-col="actions"] button,html.eg-board-on td[data-col="tracking"] button{font-family:var(--bos-sans)!important;font-weight:600;font-size:11px!important;text-transform:none;letter-spacing:0;border-radius:var(--bos-radius-sm)!important}

/* ══════════════════════════════════════════════════════════════════════════════
   THEME AUDIT — shared off-theme fixes (board-theme-audit sweep). Shape/type rules
   apply in BOTH modes; colour/fill rules are light-scoped with dark variants below so
   nothing renders white-on-dark. (.bal-chip fill from the plan intentionally dropped —
   the balance is a plain connected cell now; #new-menu-dd left to its own rules above.)
   ══════════════════════════════════════════════════════════════════════════════ */
/* shape + type — safe in both themes */
html.eg-board-on .input,html.eg-board-on .select,html.eg-board-on .finput{border-radius:var(--bos-radius-sm)!important;font-family:Inter,-apple-system,'Segoe UI',sans-serif!important}
html.eg-board-on .badge,html.eg-board-on .cat-count,html.eg-board-on .tech-badge,html.eg-board-on .trend-up,html.eg-board-on .trend-dn{border-radius:999px!important;box-shadow:none!important;font-family:Inter,-apple-system,'Segoe UI',sans-serif!important;text-transform:none!important;letter-spacing:0!important;font-size:10.5px!important;font-weight:600!important}
html.eg-board-on .pill-btn{font-family:var(--bos-sans)!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important;font-size:12px!important}
html.eg-board-on .tab-sm,html.eg-board-on .stab,html.eg-board-on .chat-tab{border-radius:var(--bos-radius-sm)!important;box-shadow:none!important;font-family:var(--bos-sans)!important;text-transform:none!important;letter-spacing:0!important;font-weight:600!important;font-size:11.5px!important}
/* settings sub-nav a touch larger so it isn't smaller than the form labels */
html.eg-board-on .stab{font-size:12.5px!important;letter-spacing:0!important}
html.eg-board-on .ibtn,html.eg-board-on .btn,html.eg-board-on .cat-row,html.eg-board-on .prod-card,html.eg-board-on .gw-card,html.eg-board-on .dl-path-card,html.eg-board-on .chat-bubble,html.eg-board-on .dropzone,html.eg-board-on .up-item,html.eg-board-on .up-item-head,html.eg-board-on .act-btn,html.eg-board-on .copy-btn,html.eg-board-on .eg-tab-x,html.eg-board-on #mob-ham,html.eg-board-on #conv-menu,html.eg-board-on .dtpl-panel,html.eg-board-on .up-panel,html.eg-board-on aside.sidebar [style*="border-radius:10px"]{border-radius:var(--bos-radius-sm)!important}
html.eg-board-on .prod-card,html.eg-board-on .gw-card,html.eg-board-on .dl-path-card,html.eg-board-on .chat-bubble{box-shadow:none!important}
html.eg-board-on .cat-row{font-family:var(--bos-sans)!important}
/* light-mode colour + fill */
html.eg-board-on:not([data-theme=dark]) body{background:var(--bos-ground)!important}
/* factory sidebar account chip (avatar · name · email · logout arrow) -> Board OS mono + sharp */
html.eg-board-on aside.sidebar > div[onclick]{border-radius:0!important;font-family:var(--bos-mono)!important}
html.eg-board-on aside.sidebar > div[onclick] div{font-family:var(--bos-mono)!important;letter-spacing:.01em!important}
html.eg-board-on aside.sidebar > div[onclick] [style*="border-radius:8px"],html.eg-board-on aside.sidebar > div[onclick] [style*="border-radius:50%"]{border-radius:0!important}
html.eg-board-on:not([data-theme=dark]) .input,html.eg-board-on:not([data-theme=dark]) .select,html.eg-board-on:not([data-theme=dark]) .finput{background:#fff!important;border:1px solid #d0ccc4!important;color:var(--bos-ink)!important}
html.eg-board-on:not([data-theme=dark]) .pill-btn{border:1.5px solid var(--bos-ink)!important;background:#fff!important;color:var(--bos-ink)!important;padding:5px 12px!important}
html.eg-board-on:not([data-theme=dark]) .tab-sm,html.eg-board-on:not([data-theme=dark]) .stab,html.eg-board-on:not([data-theme=dark]) .chat-tab{color:var(--bos-grey)!important}
html.eg-board-on:not([data-theme=dark]) .tab-sm.on,html.eg-board-on:not([data-theme=dark]) .stab.on,html.eg-board-on:not([data-theme=dark]) .chat-tab.on{background:#fff!important;color:var(--bos-ink)!important;border:1px solid var(--bos-ink)!important;box-shadow:none!important}
html.eg-board-on:not([data-theme=dark]) .cat-row{color:var(--bos-ink)!important}
html.eg-board-on:not([data-theme=dark]) .prod-card,html.eg-board-on:not([data-theme=dark]) .gw-card,html.eg-board-on:not([data-theme=dark]) .dl-path-card{background:#fff!important;border:1px solid var(--bos-ink)!important}
html.eg-board-on:not([data-theme=dark]) .chat-bubble.them{background:#fff!important;color:var(--bos-ink)!important;border:1px solid var(--bos-ink)!important}
html.eg-board-on:not([data-theme=dark]) .chat-bubble.me{background:var(--bos-ink)!important;color:#fff!important;border:1px solid var(--bos-ink)!important}
html.eg-board-on:not([data-theme=dark]) .conv-item{border-bottom:1px solid var(--bos-line)!important}
html.eg-board-on:not([data-theme=dark]) #conv-menu,html.eg-board-on:not([data-theme=dark]) .dtpl-panel,html.eg-board-on:not([data-theme=dark]) .up-panel{box-shadow:0 12px 32px rgba(24,24,22,.14)!important;border:1px solid var(--bos-cardline)!important;background:#fff!important}
html.eg-board-on:not([data-theme=dark]) [style*="color:#9ca3af"]{color:var(--bos-grey)!important}
html.eg-board-on:not([data-theme=dark]) [style*="background:#faf9f7"],html.eg-board-on:not([data-theme=dark]) [style*="background:#fdfcfa"],html.eg-board-on:not([data-theme=dark]) [style*="background:#fafaf9"],html.eg-board-on:not([data-theme=dark]) [style*="background:#e9e6e0"],html.eg-board-on:not([data-theme=dark]) [style*="background:#e8e6e1"],html.eg-board-on:not([data-theme=dark]) [style*="background:#ece9e3"]{background:#f4f4f5!important}
html.eg-board-on:not([data-theme=dark]) [style*="border-color:#f0ede9"],html.eg-board-on:not([data-theme=dark]) [style*="border-bottom:1px solid #f0ede9"],html.eg-board-on:not([data-theme=dark]) [style*="1px solid #f3f0eb"],html.eg-board-on:not([data-theme=dark]) [style*="1px solid #f3f3f1"]{border-color:var(--bos-line)!important}
/* dark-mode variants for the new classes (don't leave them white-on-dark) */
html.eg-board-on[data-theme=dark] .input,html.eg-board-on[data-theme=dark] .select,html.eg-board-on[data-theme=dark] .finput{background:#201e24!important;border:1px solid #45424e!important;color:#e8e4dd!important}
html.eg-board-on[data-theme=dark] .prod-card,html.eg-board-on[data-theme=dark] .gw-card,html.eg-board-on[data-theme=dark] .dl-path-card{background:#201e24!important;border:1px solid #45424e!important}
html.eg-board-on[data-theme=dark] .pill-btn{background:#201e24!important;border:1.5px solid #45424e!important;color:#e8e4dd!important}
html.eg-board-on[data-theme=dark] .tab-sm.on,html.eg-board-on[data-theme=dark] .stab.on,html.eg-board-on[data-theme=dark] .chat-tab.on{background:#2c2a33!important;color:#e8e4dd!important;border:1px solid #45424e!important}
html.eg-board-on[data-theme=dark] .chat-bubble.them{background:#201e24!important;color:#e8e4dd!important;border:1px solid #45424e!important}
html.eg-board-on[data-theme=dark] .chat-bubble.me{background:var(--bos-violet)!important;color:#fff!important}
html.eg-board-on[data-theme=dark] #conv-menu,html.eg-board-on[data-theme=dark] .dtpl-panel,html.eg-board-on[data-theme=dark] .up-panel{background:#201e24!important;border:1px solid #45424e!important;box-shadow:0 12px 32px rgba(0,0,0,.4)!important}

/* tactile press — primary buttons travel 1px into their frame on click (pairs with eg-anim.js) */
html.eg-board-on .btn,html.eg-board-on .btn-dk,html.eg-board-on .btn-out,html.eg-board-on .btn-green,html.eg-board-on .btn-amber,html.eg-board-on .btn-gold,html.eg-board-on .bos-controls > div:has(#new-menu-btn){transition:transform .08s ease,box-shadow .08s ease,background .15s ease}
html.eg-board-on .btn:active,html.eg-board-on .btn-dk:active,html.eg-board-on .btn-out:active,html.eg-board-on .btn-green:active,html.eg-board-on .btn-amber:active,html.eg-board-on .btn-gold:active{transform:translateY(1px)!important}

/* ── MODALS / POP-UPS ── their fields, card frames + labels use INLINE styles that the class-based
   rules never reached, so they kept rounded grey inputs + sans fonts. Theme the native controls
   directly + sharpen/frame the modal shells. ── */
/* fields stay sharp but keep a READABLE sans face — mono was too hard to read for values/addresses/order details */
html.eg-board-on input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),html.eg-board-on select,html.eg-board-on textarea{border-radius:var(--bos-radius-sm)!important}
html.eg-board-on:not([data-theme=dark]) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),html.eg-board-on:not([data-theme=dark]) select,html.eg-board-on:not([data-theme=dark]) textarea{border:1px solid #d0ccc4!important;background:#fff!important;color:var(--bos-ink)!important}
html.eg-board-on label{font-family:var(--bos-sans)!important;letter-spacing:0!important;text-transform:none!important}
html.eg-board-on button[style*="border-radius"]{border-radius:0!important}
/* modal card shells (identified by their soft big-blur drop shadow) -> sharp, black-framed, offset shadow */
html.eg-board-on [style*="0 20px 60px"],html.eg-board-on [style*="0 20px 50px"],html.eg-board-on [style*="0 18px 50px"],html.eg-board-on [style*="0 12px 40px"],html.eg-board-on [style*="0 24px 64px"],html.eg-board-on [style*="0 24px 60px"]{border-radius:16px!important;border:1px solid var(--bos-cardline)!important;box-shadow:0 24px 60px rgba(24,24,22,.18),0 8px 24px rgba(24,24,22,.10)!important}
/* settings Billing / API-Keys inner sub-panels were still rounded grey inside the sharp outer cards — square + 1px-black-frame them */
html.eg-board-on:not([data-theme=dark]) [id^="panel-"] [style*="border:1.5px solid #e5e4e0"][style*="border-radius:10px"],html.eg-board-on:not([data-theme=dark]) [id^="panel-"] [style*="border:1.5px solid #e5e4e0"][style*="border-radius:12px"]{border:1px solid var(--bos-cardline)!important;border-radius:0!important;box-shadow:none!important}
/* order-table expanded detail row: was stark #fff (td + inner div) — now transparent so it inherits
   the theme ground in BOTH light + dark, matching its parent row; just fix the beige border colour */
html.eg-board-on .dtable tr.exp-row td{background:transparent!important;border-top-color:var(--bos-line)!important;border-bottom-color:var(--bos-line)!important}
/* ── Expanded item rows → TIMELINE / THREAD (STYLING ONLY) ──
   The item rows read like a chat-message timeline: a SINGLE continuous vertical SPINE runs
   down the left of the expanded item area and connects UP to the parent order row's bottom
   border, so the item lines visibly hang off their parent order. Each row's round status
   dot (.egdt-dot) sits ON the spine as a NODE (positioned by eg-design-tools.js at the same
   x). There are NO horizontal rung/separator lines between item rows anymore.
   Shared spine x = --egdt-spine-x (22px from the spine container's left edge). Seller items
   = [id^="item-wrap-"] inside the exp-row wrapper div; factory items = .egdt-item-row
   (EGDesignTools.itemRowLayout) directly in the detail <td>. Consistent on all boards. */
/* --egdt-spine-x = x of the spine from the spine container's BORDER-box left (where the
   ::before spine is anchored). --egdt-row-inset = the container's left padding, i.e. how far
   the item rows' own content edge sits inside that border box; the dot subtracts it so the
   round node lands EXACTLY on the spine x on screen. Seller wrapper pads 44px; the factory
   detail <td> is forced to 14px padding by the global `.dtable td` rule (its inline
   padding:0 is overridden), so the inset is 14px, NOT 0. */
html.eg-board-on .dtable tr.exp-row > td > div:has([id^="item-wrap-"]),
html.eg-board-on tr[id^="op-detail-"] > td,
html.eg-board-on tr[id^="wh-detail-"] > td{--egdt-spine-x:22px;--egdt-node-ring:#fbfaf8}
html.eg-board-on tr[id^="op-detail-"] > td,
html.eg-board-on tr[id^="wh-detail-"] > td{--egdt-node-ring:#fafaf9;--egdt-row-inset:14px}
html.eg-board-on .dtable tr.exp-row > td > div:has([id^="item-wrap-"]){--egdt-row-inset:44px}
html[data-theme=dark].eg-board-on .dtable tr.exp-row > td > div:has([id^="item-wrap-"]),
html[data-theme=dark].eg-board-on tr[id^="op-detail-"] > td,
html[data-theme=dark].eg-board-on tr[id^="wh-detail-"] > td{--egdt-node-ring:var(--bos-ground,#191817)}
/* seller (orders.html): item-wrap grids live inside the exp-row wrapper div. A hairline
   vertical spine runs at x=20px; every row's dot (8px first grid cell, padding-left 8px)
   and the Add-item dot land on it dead-straight. Ring on the dot = the row bg (#fbfaf8). */
html.eg-board-on .dtable tr.exp-row > td > div:has([id^="item-wrap-"]){position:relative;background:transparent!important;padding:2px 18px 10px 8px!important;--egdt-ring:#fbfaf8}
html.eg-board-on .dtable tr.exp-row > td > div:has([id^="item-wrap-"])::before{content:"";position:absolute;left:17.5px;top:-1px;bottom:22px;width:1px;background:var(--bos-line);z-index:0}
html[data-theme=dark].eg-board-on .dtable tr.exp-row > td > div:has([id^="item-wrap-"]){--egdt-ring:#1f1d1b}
html[data-theme=dark].eg-board-on .dtable tr.exp-row > td > div:has([id^="item-wrap-"])::before{background:#3a3631}
html.eg-board-on [id^="item-wrap-"]{position:relative;background:transparent!important;border:none!important;border-bottom:none!important;border-radius:0!important;box-shadow:none!important;margin:0!important;padding:16px 6px!important}
html.eg-board-on [id^="item-wrap-"]:hover{box-shadow:none!important}
/* seller item selection now reads from the dot turning cobalt (eg-design-tools .egdt-dot), not a row background — cleaner */
/* factory (operator/warehouse/admin): .egdt-item-row sits in the detail <td>. Same hairline spine
   as the seller — x=17.5 (the row's padding-left 14 + dot-half puts every dot's centre there), so
   the line runs dead-straight through the dots. td padding-left forced to 0 so the geometry matches. */
html.eg-board-on tr[id^="op-detail-"] > td,
html.eg-board-on tr[id^="wh-detail-"] > td{position:relative;background:transparent!important;padding-left:0!important}
/* Spine at x=17.5 through the dots. Operator puts the rows DIRECTLY in the td; warehouse + admin
   wrap them in a div (with the wrapper's own left padding zeroed so the dot still centres at 17.5),
   so match both the direct-child and the div-wrapped cases. */
html.eg-board-on tr[id^="op-detail-"] > td:has(> .egdt-item-row)::before,
html.eg-board-on tr[id^="op-detail-"] > td:has(> div > .egdt-item-row)::before,
html.eg-board-on tr[id^="wh-detail-"] > td:has(> .egdt-item-row)::before,
html.eg-board-on tr[id^="wh-detail-"] > td:has(> div > .egdt-item-row)::before{content:"";position:absolute;left:17.5px;top:-1px;bottom:16px;width:1px;background:var(--bos-line);z-index:0}
html[data-theme=dark].eg-board-on tr[id^="op-detail-"] > td:has(> .egdt-item-row)::before,
html[data-theme=dark].eg-board-on tr[id^="op-detail-"] > td:has(> div > .egdt-item-row)::before,
html[data-theme=dark].eg-board-on tr[id^="wh-detail-"] > td:has(> .egdt-item-row)::before,
html[data-theme=dark].eg-board-on tr[id^="wh-detail-"] > td:has(> div > .egdt-item-row)::before{background:#3a3631}
html.eg-board-on .egdt-item-row{position:relative;background:transparent!important;border:none!important;border-radius:0!important;box-shadow:none!important;margin:0!important}
html.eg-board-on .egdt-item-row:hover{box-shadow:none!important}
html.eg-board-on .egdt-item-row:has(> input[type=checkbox]:checked){background:rgba(47,75,240,.06)!important}
/* dark — checked-row faint light tint (spine removed) */
html[data-theme=dark].eg-board-on .egdt-item-row:has(> input[type=checkbox]:checked){background:rgba(201,195,186,.06)!important}
/* NB: modal bold text is intentionally left in the readable sans face — mono values/amounts
   inside fields were hard to read. Mono stays as the accent on labels/eyebrows/nav/chrome. */
/* content-card headings (Order Pipeline, Recent Orders, Last 6 Months, etc.) -> sans (Inter). Tavus-style: headings read in sans, mono is reserved for tiny technical bits. */
html.eg-board-on .card [style*="font-weight:700"],html.eg-board-on .ccard [style*="font-weight:700"]{font-family:var(--bos-sans)!important;letter-spacing:-.01em!important}
/* SpyDeck (#superspy-mount / #admin-spy-mount): mono the card text + sharpen corners so it matches the
   theme. SCOPED to the mount so nothing else is affected; layout, colours + logic left untouched. */
html.eg-board-on #superspy-mount [style*="border-radius"],html.eg-board-on #admin-spy-mount [style*="border-radius"]{border-radius:0!important}
html.eg-board-on #superspy-mount [style*="font-weight:7"],html.eg-board-on #superspy-mount [style*="font-weight:6"],html.eg-board-on #admin-spy-mount [style*="font-weight:7"],html.eg-board-on #admin-spy-mount [style*="font-weight:6"]{font-family:var(--bos-sans)!important}
/* the item variant strip (Product · Colour · Size · Method) is meant to be borderless selects
   separated by · dots; the broad select{border} rule above re-boxed them — strip it back */
html.eg-board-on .egdt-varstrip select{border:none!important;background:transparent!important;padding:2px 2px!important}
/* LEFT-ALIGN the content so it hugs the sidebar (centring left a big gap next to the nav on wide
   monitors) + a moderate cap so the right side doesn't stretch. Whitespace collects on the far right. */
html.eg-board-on [style*="max-width:1600px"],html.eg-board-on [style*="max-width:1400px"]{max-width:1520px!important;margin-left:0!important;margin-right:0!important}

/* ── Dashboard stat cards → TAVUS PRESS (replaces the old top:-1px lift) ──
   Each card rests on a dark offset shadow; hover sinks it toward the shadow; mousedown
   presses it fully in. No lingering state. Overrides the per-file .wcard/.stat-card hovers. */
html.eg-board-on .wcard,html.eg-board-on .stat-card{position:relative;top:0!important;box-shadow:var(--bos-shadow)!important;transition:transform .16s var(--bos-ease),box-shadow .16s var(--bos-ease)!important}
html.eg-board-on .wcard:hover,html.eg-board-on .stat-card:hover{top:0!important;transform:translateY(-3px)!important;box-shadow:var(--bos-shadow-hover)!important}
html.eg-board-on .wcard:active,html.eg-board-on .stat-card:active{top:0!important;transform:translateY(0)!important;box-shadow:var(--bos-shadow)!important}
html[data-theme=dark].eg-board-on .wcard,html[data-theme=dark].eg-board-on .stat-card{box-shadow:0 1px 3px rgba(0,0,0,.35)!important}
html[data-theme=dark].eg-board-on .wcard:hover,html[data-theme=dark].eg-board-on .stat-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.42)!important}
html[data-theme=dark].eg-board-on .wcard:active,html[data-theme=dark].eg-board-on .stat-card:active{box-shadow:0 1px 3px rgba(0,0,0,.35)!important}
/* KPI card delta + caption: were a faded rounded grey pill (#eeede9/#374151) + light-grey
   (#9ca3af) caption from the pre-board theme — retheme to Board OS: mono, sharp, readable. */
html.eg-board-on .trend-up,html.eg-board-on .trend-dn,html.eg-board-on .trend-down,html.eg-board-on .trend-flat{
  font-family:var(--bos-sans)!important;border-radius:999px!important;background:rgba(25,25,24,.06)!important;color:var(--bos-ink)!important;
  font-size:11px!important;font-weight:400!important;padding:2px 7px!important;letter-spacing:.02em!important;border:none!important}
html[data-theme=dark].eg-board-on .trend-up,html[data-theme=dark].eg-board-on .trend-dn,html[data-theme=dark].eg-board-on .trend-down,html[data-theme=dark].eg-board-on .trend-flat{
  background:rgba(216,212,204,.14)!important;color:#e8e4dd!important}
html.eg-board-on .wcard span[style*="color:#9ca3af"],html.eg-board-on .stat-card span[style*="color:#9ca3af"],html.eg-board-on .ccard span[style*="color:#9ca3af"]{color:var(--bos-grey)!important;font-family:Inter,-apple-system,'Segoe UI',sans-serif!important;font-size:11px!important;letter-spacing:.02em!important}

/* ── RETRO-WINDOW "title bar" chrome on the stat cards ──────────────────────────
   Each card's mono eyebrow label reads like an old window title bar: a small cobalt
   accent square, the label, then a strip of repeating ink hairlines filling the rest
   of the row, all sitting on a thin bottom rule. Each overview card carries EXACTLY
   ONE `text-transform:uppercase` element (the eyebrow) at a varying nesting depth, so
   we target it as the sole such descendant of the card — no direct-child assumption,
   no markup depth assumed. Both `:uppercase` and `: uppercase` (the value the browser
   re-serialises the inline style attribute to) are matched. Presentation only. */
html.eg-board-on .wcard [style*="text-transform:uppercase"],
html.eg-board-on .wcard [style*="text-transform: uppercase"],
html.eg-board-on .stat-card [style*="text-transform:uppercase"],
html.eg-board-on .stat-card [style*="text-transform: uppercase"]{
  display:flex!important;align-items:center!important;gap:8px!important;
  padding-bottom:0!important;margin-bottom:10px!important;
  border-bottom:none!important;
  color:var(--bos-grey)!important;font-family:var(--bos-sans)!important;letter-spacing:.01em!important;
  text-transform:none!important;font-size:13px!important;font-weight:600!important;
  white-space:nowrap!important;overflow:hidden!important}
/* the hairline strip runs FULL WIDTH to the content edge (matches the value line below) — no
   vertical end-cap. Base rule below already sets flex:1;align-self:stretch so it fills the row;
   the card's own padding keeps it clear of the corner drag-handle without a padding-right hack. */
/* small cobalt accent square — the "window" dot. Many cards already ship a leading
   ■ marker (span.eg-card-dot), which line ~148 forces to ink; recolour THAT to cobalt
   + fix its size so it reads as the title-bar accent (no doubled square). */
html.eg-board-on .wcard [style*="text-transform:uppercase"] > .eg-card-dot,
html.eg-board-on .wcard [style*="text-transform: uppercase"] > .eg-card-dot,
html.eg-board-on .stat-card [style*="text-transform:uppercase"] > .eg-card-dot,
html.eg-board-on .stat-card [style*="text-transform: uppercase"] > .eg-card-dot{
  background:var(--bos-violet)!important;flex:0 0 auto!important;width:7px!important;height:7px!important;
  border-radius:50%!important;margin:0!important;display:block!important}
/* cards WITHOUT a built-in ■ marker get a cobalt accent square from ::before instead;
   cards that already have .eg-card-dot suppress it via the :has() guard so it never doubles */
html.eg-board-on .wcard [style*="text-transform:uppercase"]:not(:has(> .eg-card-dot))::before,
html.eg-board-on .wcard [style*="text-transform: uppercase"]:not(:has(> .eg-card-dot))::before,
html.eg-board-on .stat-card [style*="text-transform:uppercase"]:not(:has(> .eg-card-dot))::before,
html.eg-board-on .stat-card [style*="text-transform: uppercase"]:not(:has(> .eg-card-dot))::before{
  content:""!important;flex:0 0 auto!important;width:7px!important;height:7px!important;border-radius:50%!important;
  background:var(--bos-violet)!important;display:block!important}
/* strip of repeating horizontal ink hairlines filling the row next to the label */
html.eg-board-on .wcard [style*="text-transform:uppercase"]::after,
html.eg-board-on .wcard [style*="text-transform: uppercase"]::after,
html.eg-board-on .stat-card [style*="text-transform:uppercase"]::after,
html.eg-board-on .stat-card [style*="text-transform: uppercase"]::after{
  display:none!important}
/* dark mode — light ink hairlines + rule, keep the cobalt dot */
html[data-theme=dark].eg-board-on .wcard [style*="text-transform:uppercase"],
html[data-theme=dark].eg-board-on .wcard [style*="text-transform: uppercase"],
html[data-theme=dark].eg-board-on .stat-card [style*="text-transform:uppercase"],
html[data-theme=dark].eg-board-on .stat-card [style*="text-transform: uppercase"]{
  border-bottom-color:#5a5660!important;color:#d8d4cc!important}
html[data-theme=dark].eg-board-on .wcard [style*="text-transform:uppercase"]::after,
html[data-theme=dark].eg-board-on .wcard [style*="text-transform: uppercase"]::after,
html[data-theme=dark].eg-board-on .stat-card [style*="text-transform:uppercase"]::after,
html[data-theme=dark].eg-board-on .stat-card [style*="text-transform: uppercase"]::after{
  background:repeating-linear-gradient(#5a5660 0 1px,transparent 1px 3px)!important}
/* keep the accent square COBALT in dark mode (line ~270 forces .eg-card-dot to light ink) */
html[data-theme=dark].eg-board-on .wcard [style*="text-transform:uppercase"] > .eg-card-dot,
html[data-theme=dark].eg-board-on .wcard [style*="text-transform: uppercase"] > .eg-card-dot,
html[data-theme=dark].eg-board-on .stat-card [style*="text-transform:uppercase"] > .eg-card-dot,
html[data-theme=dark].eg-board-on .stat-card [style*="text-transform: uppercase"] > .eg-card-dot{
  background:var(--bos-violet)!important}

/* ── MONOTONE de-cap of inline content eyebrows/labels (chart "This month · All platforms",
   KPI mini-labels, etc. use inline text-transform:uppercase). The redesign is normal-case, so
   flip them inside card content. Scoped to cards so the brand wordmark + chrome stay intact. ── */
html.eg-board-on .card [style*="text-transform:uppercase"],html.eg-board-on .card [style*="text-transform: uppercase"],
html.eg-board-on .ccard [style*="text-transform:uppercase"],html.eg-board-on .ccard [style*="text-transform: uppercase"],
html.eg-board-on .wcard [style*="text-transform:uppercase"],html.eg-board-on .wcard [style*="text-transform: uppercase"],
html.eg-board-on .stat-card [style*="text-transform:uppercase"],html.eg-board-on .stat-card [style*="text-transform: uppercase"],
html.eg-board-on #trend-subtitle{text-transform:none!important;letter-spacing:.01em!important}

/* ── NO MONO on the boards (user pref). Any element still hard-coded to a monospace family
   (inline DepartureMono / ui-monospace / monospace) flips to the board sans. Numerals keep
   tabular alignment via font-variant-numeric, which is unaffected. ── */
html.eg-board-on [style*="DepartureMono"],html.eg-board-on [style*="ui-monospace"],html.eg-board-on [style*="monospace"]{font-family:var(--bos-sans)!important}
/* dashboard period/filter selects + their spread tracking */
html.eg-board-on .fb,html.eg-board-on .stab,html.eg-board-on .tab-sm,html.eg-board-on .tab-btn,html.eg-board-on .filter-btn{letter-spacing:0!important;font-family:var(--bos-sans)!important}
/* Unify inline near-black PRIMARY buttons/CTAs (button OR a) to the cobalt accent (one primary colour) */
html.eg-board-on button[style*="background:#191918"],html.eg-board-on button[style*="background:#111827"],html.eg-board-on a[style*="background:#191918"],html.eg-board-on a[style*="background:#111827"]{background:var(--bos-violet)!important;border-color:var(--bos-violet)!important;color:#fff!important}

/* ══════════════ UNIFIED FILTER CONTROL — borderless: just the name + its arrow, no box.
   Change values HERE to restyle every filter / period / dropdown on every board at once. ══════════════ */
html.eg-board-on .fb,html.eg-board-on .filter-btn,html.eg-board-on select[data-eg-select],
html.eg-board-on #trend-period,html.eg-board-on #dash-platform,html.eg-board-on #dash-period,
html.eg-board-on select[id*=platform],html.eg-board-on select[id*=period],html.eg-board-on select[id*=dash],
html.eg-board-on select[id*=bank],html.eg-board-on .period-btn{
  border:none!important;background-color:transparent!important;box-shadow:none!important;border-radius:0!important;
  font-family:var(--bos-sans)!important;font-size:13px!important;font-weight:500!important;letter-spacing:0!important;
  color:var(--bos-grey)!important;padding:6px 6px!important;cursor:pointer;transition:color .12s}
html.eg-board-on .fb:hover,html.eg-board-on .filter-btn:hover,html.eg-board-on select[data-eg-select]:hover,
html.eg-board-on #trend-period:hover,html.eg-board-on #dash-platform:hover,html.eg-board-on #dash-period:hover{color:var(--bos-ink)!important}
html.eg-board-on .fb.active,html.eg-board-on .filter-btn.active{color:var(--bos-violet)!important;font-weight:600!important}

/* ══ ALL CARDS ROUNDED + LIGHT HAIRLINE — catch stragglers (settings/modal cards) on a dark or sharp border ══ */
html.eg-board-on [style*="border:1.5px solid #191918"],html.eg-board-on [style*="border:1px solid #191918"],
html.eg-board-on [style*="border:1.5px solid #111827"],html.eg-board-on [style*="border:1px solid #111827"],
html.eg-board-on [style*="border:1.5px solid #1f2937"],html.eg-board-on [style*="border:1.5px solid #374151"]{
  border-color:var(--bos-cardline)!important;border-width:1px!important;border-radius:var(--bos-radius)!important}
/* settings/billing light sub-panels still square -> rounded hairline */
html.eg-board-on [id^="panel-"] [style*="border:1.5px solid #e5e4e0"]{border-color:var(--bos-cardline)!important;border-radius:var(--bos-radius-sm)!important}

/* page titles + section headings always sans (never mono) */
html.eg-board-on h1,html.eg-board-on h2,html.eg-board-on h3{font-family:var(--bos-sans)!important}