/* =========================================================================
   CRUSADER · WAREHOUSE OPS
   Industrial Mission Control · v4
   ========================================================================= */

/* ---------- design tokens (LIGHT theme) --------------------------------- */
:root {
  /* surfaces */
  --bg:          #E7E0CF;   /* page background — kept clearly darker than the white panels so they read as "on top" */
  --bg-1:        #FFFFFF;
  --bg-2:        #FAF7F0;
  --bg-3:        #EFEAE0;
  --surface:     #FFFFFF;
  --surface-2:   #FBF8F2;
  --hairline:    #E7E1D1;
  --rule:        #D6CDB9;
  --rule-strong: #BCB099;

  /* type — all body text black; only data accents (amber/cyan/prime/ok/bad) keep colour */
  --text:        #0A0C12;
  --text-2:      #0A0C12;
  --text-dim:    #0A0C12;
  --text-mute:   #0A0C12;
  --text-faint:  #6B6052;   /* kept slightly muted for decorative bg textures only */

  /* data colors — darkened where needed for readable contrast on white */
  --amber:       #C2410C;   /* darker for text + small-area accents */
  --amber-hi:    #FF9F1C;   /* bright amber for big display numbers + fill bars */
  --amber-deep:  #7C2D12;
  --amber-glow:  rgba(255,159,28,0.14);
  --cyan:        #0369A1;
  --cyan-deep:   #075985;
  --ok:          #15803D;
  --ok-deep:     #14532D;
  --warn:        #B45309;
  --bad:         #EF4444;
  --bad-deep:    #B91C1C;
  --prime:       #C2410C;   /* unified: same as --amber for a single accent system */
  --magenta:     #BE185D;

  /* metrics */
  --rail:        56px;
  --gap:         22px;
  --gutter:      22px;
  --radius:      0px;   /* sharp corners on purpose */
}

/* ---------- reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01" 1, "cv11" 1, "tnum" 1;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  min-height: 100vh;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { color: #95DEFF; }
button { font-family: inherit; }

/* ---------- atmosphere · all-light ------------------------------------- */
html { background: var(--bg); }
body { color: var(--text); background: var(--bg); }

.dash-body, .login-body {
  background:
    radial-gradient(1400px 700px at 78% -20%, rgba(255,159,28,0.06), transparent 60%),
    linear-gradient(180deg, #F8F5EE 0%, #EFEADD 100%);
  background-attachment: fixed;
  position: relative;
  color: var(--text);
}
.dash-body::before, .login-body::before { content: none; }
.dash-body::after,  .login-body::after  { content: none; }

/* page-level text */
.page .crumb h1   { color: var(--text); }
.page .crumb .sub { color: var(--text-dim); }
.page .crumb .right a { color: var(--amber); }
.page .crumb .right a:hover { color: var(--amber-hi); }

/* panels get a hairline + shadow so they lift clearly off the (darker) page background */
.panel, .tile, .stat, .hero-pri, .dock, .nav, .rail, .login-card {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 1px 3px rgba(20, 23, 31, 0.06),
    0 10px 26px -12px rgba(20, 23, 31, 0.26);
}

/* ---------- typography utilities ---------------------------------------- */
.display { font-family: "IBM Plex Sans", "IBM Plex Sans", sans-serif; font-weight: 700; letter-spacing: -0.005em; line-height: 0.86; }
.mono    { font-family: "IBM Plex Sans", sans-serif; font-feature-settings: "tnum" 1, "zero" 1, "ss02" 1; }
.eyebrow {
  font-family: "IBM Plex Sans", "IBM Plex Sans", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  color: var(--text-dim);
}
.eyebrow .code {
  color: var(--amber);
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-right: 8px;
}
.tnum { font-variant-numeric: tabular-nums; }

/* =========================================================================
   APP SHELL
   ========================================================================= */
.dash {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--gap);
  padding: var(--gutter);
  /* Aspect-adaptive design canvas: fixed 1080 HEIGHT (constant vertical budget so no
     section ever clips), WIDTH set by JS (fitDash) to match the viewport aspect — fills
     16:10 and ultrawide edge-to-edge, no letterbox. 4K renders at 2x. JS overrides width. */
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  z-index: 2;
  overflow: hidden;
}
.dash-body { overflow: hidden; }

/* ---------- top rail ----------------------------------------------------- */
.rail {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr 1fr 1fr;
  align-items: stretch;
  gap: 0;
  min-height: 110px;
  background: var(--surface);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
          backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--hairline);
  border-bottom: 1px solid var(--amber);
  position: relative;
}

.rail .seg {
  padding: 0 24px;
  display: flex; align-items: center;
  border-right: 1px solid var(--hairline);
  gap: 14px;
}
.rail .seg:last-child { border-right: 0; }

/* ops cells embedded in the rail — centered content */
.rail .seg.cell {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 0 24px;
  gap: 4px;
}
.rail .seg.cell .k {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* Sub-label that follows "Time Left" — "to open" or "to close" — quieter
   and case-cased so it reads as an aside to the main TIME LEFT title. */
.rail .seg.cell .k .time-left-sub {
  font-weight: 700; font-size: 1em; letter-spacing: 0.18em;
  text-transform: uppercase; opacity: 1; margin-left: 6px;
}
.rail .seg.cell .k.placeholder-after {
  color: var(--text-dim);
}
.rail .seg.cell .v {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 46px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: center;
}
.rail .seg.cell .v.amber     { color: var(--amber); }
.rail .seg.cell .v.tone-ok   { color: var(--ok); }
.rail .seg.cell .v.tone-warn { color: var(--warn); }
.rail .seg.cell .v.tone-bad  { color: var(--bad); }
.rail .seg.cell .v.tone-dim  { color: var(--text-mute); }

/* traffic-light backgrounds for the three rail status cells */
.rail .seg.cell.bg-ok   { background: #16A34A; }
.rail .seg.cell.bg-warn { background: #F59E0B; }
.rail .seg.cell.bg-bad  { background: #EF4444; animation: bg-pulse-bad 1.6s ease-in-out infinite; }
.rail .seg.cell.bg-dim  { background: var(--surface); }

/* call-to-action banner above the hero (warn / bad only) */
.cta-banner {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 34px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 14px 22px;
  color: #FFFFFF;
  border-radius: 0;
  border: 1px solid transparent;
  margin-bottom: var(--gap);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 6px 16px -6px rgba(20,23,31,0.32);
}
.cta-warn { background: #F59E0B; border-color: #B45309; }
.cta-bad  { background: #EF4444; border-color: #DC2626; animation: bg-pulse-bad 1.4s ease-in-out infinite; }

/* same traffic-light treatment on the hero-sub pills */
.pill .pill-ico {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: -5px;
  margin-right: 6px;
  flex-shrink: 0;
  object-fit: contain;
}
/* traffic-light pills — high-specificity selectors so they beat .pill.prime / .pill.cyan colour */
/* default pill traffic-light (e.g. packed-today) keeps the bold solid look */
.pill.bg-ok   { background: #16A34A !important; color: #FFFFFF !important; border-color: #15803D !important; }
.pill.bg-warn { background: #F59E0B !important; color: #FFFFFF !important; border-color: #B45309 !important; }
.pill.bg-bad  { background: #EF4444 !important; color: #FFFFFF !important; border-color: #DC2626 !important; animation: bg-pulse-bad 1.6s ease-in-out infinite; }
.pill.bg-dim  { /* default styling */ }

/* prime + multi: red text on white background with red border in warn/bad */
.pill.prime.bg-warn,
.pill.cyan.bg-warn,
.pill.prime.bg-bad,
.pill.cyan.bg-bad {
  background: #FFFFFF !important;
  color: #EF4444 !important;
  border-color: #EF4444 !important;
  border-width: 2px !important;
  animation: none !important;
}
.rail .seg.cell.bg-ok .k,
.rail .seg.cell.bg-ok .v,
.rail .seg.cell.bg-ok .unit-sm,
.rail .seg.cell.bg-warn .k,
.rail .seg.cell.bg-warn .v,
.rail .seg.cell.bg-warn .unit-sm,
.rail .seg.cell.bg-bad .k,
.rail .seg.cell.bg-bad .v,
.rail .seg.cell.bg-bad .unit-sm { color: #FFFFFF; text-shadow: 0 1px 1px rgba(0,0,0,0.18); }
@keyframes bg-pulse-bad {
  0%, 100% { background-color: #EF4444; }
  50%      { background-color: #DC2626; }
}
/* Inline unit that rides next to the big number, e.g. the "H" in "4.6 H" */
.rail .seg.cell .v-suffix {
  font-size: 24px;
  font-weight: 700;
  margin-left: 4px;
  letter-spacing: 0.01em;
}
.rail .seg.cell .unit-sm {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-mute);
  letter-spacing: 0.16em;
  opacity: 0.55;           /* keep the unit quiet on both dark and coloured cells */
  display: block;          /* drop the unit onto its own line, under the number */
  margin: 3px auto 0;
  text-transform: uppercase;
}
.rail .brand {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.rail .brand-mark {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--amber);
  color: #050810;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 1;
}
.rail .brand-logo-img {
  min-height: 70px;
  height: 70px;
  width: auto;
  display: block;
  object-fit: contain;
}
.rail .brand-text {
  display: flex; flex-direction: column;
  line-height: 1;
}
.rail .brand-name {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.16em;
  color: var(--text);
}
.rail .brand-sub {
  margin-top: 4px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.rail .center {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
}
.rail .live {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--amber);
  background: rgba(255,159,28,0.07);
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--amber);
  text-transform: uppercase;
  font-weight: 600;
}
.rail .live .lamp {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  animation: pulse 1.6s ease-in-out infinite;
}
.rail .clock {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--text);
}
.rail .date {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.rail .right {
  justify-content: flex-end;
  text-align: right;
  gap: 18px;
}
.rail .status-stack {
  display: flex; flex-direction: column;
  gap: 2px; line-height: 1;
}
.rail .status-row {
  display: flex; align-items: center; gap: 6px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.rail .status-row strong { color: var(--text); font-weight: 600; }
.rail .lamp.ok   { background: var(--ok);    box-shadow: 0 0 6px var(--ok); }
.rail .lamp.warn { background: var(--warn);  box-shadow: 0 0 6px var(--warn); }
.rail .lamp.bad  { background: var(--bad);   box-shadow: 0 0 6px var(--bad); }
.rail .lamp.dim  { background: var(--text-faint); }
.rail .lamp { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.rail .ref {
  display: grid; grid-template-rows: auto 4px; gap: 4px;
  align-items: center;
  min-width: 130px;
}
.rail .ref-bar {
  height: 3px; background: var(--hairline); position: relative; overflow: hidden;
}
.rail .ref-bar > i {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--amber-deep), var(--amber));
  animation: refill 30s linear infinite;
}
@keyframes refill { from { width: 0; } to { width: 100%; } }
@keyframes pulse  { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ---------- nav (drill-down pages) -------------------------------------- */
.nav {
  display: flex; align-items: stretch;
  background: var(--surface);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
          backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--hairline);
  border-top: 1px solid var(--amber);
  height: 48px;
}
.nav a {
  display: flex; align-items: center;
  padding: 0 22px;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-right: 1px solid var(--hairline);
  position: relative;
  transition: color 120ms, background 120ms;
}
.nav a::before {
  content: ""; position: absolute; inset: auto 12px 0 12px; height: 2px;
  background: var(--amber); transform: scaleX(0); transform-origin: left;
  transition: transform 160ms;
}
.nav a:hover { color: var(--text); text-decoration: none; background: rgba(255,159,28,0.04); }
.nav a:hover::before, .nav a.active::before { transform: scaleX(1); }
.nav a.active { color: var(--text); background: rgba(255,159,28,0.06); }
.nav .spacer { flex: 1; border-right: 1px solid var(--hairline); }
.nav .nav-meta {
  display: flex; align-items: center;
  padding: 0 18px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-mute);
  text-transform: uppercase;
  border-right: 1px solid var(--hairline);
}
.nav a.signout {
  color: var(--text-mute);
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
}
.nav a.signout::before { display: none; }

/* =========================================================================
   PANELS — translucent screens on the light page
   ========================================================================= */
.panel {
  background: var(--surface);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
          backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--hairline);
  position: relative;
  display: flex; flex-direction: column;
}
.panel > .corner { display: none; }  /* corner brackets retired for calm */

.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 16px 22px 12px;
  border-bottom: 1px solid var(--hairline);
}
.panel-head h2 {
  margin: 0;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
}
.panel-head .code { display: none; }   /* dropped — too noisy */
.panel-head .sub {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* =========================================================================
   LIVE DASHBOARD LAYOUT
   ========================================================================= */
.live-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  /* Explicit row budget so no section can starve another (canvas is 904px tall here):
     hero/courier (doubled height — owns the freed top-sellers row) · 3-panel bottom strip
     (Today champion · 7-day champion · Top Sellers compact) */
  grid-template-rows: 1fr 336px;
  gap: var(--gap);
  min-height: 0;
  height: 100%;
}
.live-grid > * { min-height: 0; }
.live-grid .leaders { overflow: hidden; }
.live-grid .hero-left  { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; min-height: 0; }
.live-grid .hero-left > .hero-pri { flex: 1; min-height: 0; }
.live-grid .hero-right { grid-column: 2; grid-row: 1; min-height: 0; overflow: hidden; }
.live-grid .leaders    { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr; gap: var(--gap); min-height: 0; }

/* ---------- TOP SELLERS showcase (full-width, row 3) ---------- */
.live-grid .topsellers {
  grid-column: 1 / -1; grid-row: 2;
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 12px 22px 16px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 0; overflow: hidden;
}
.topsellers-title {
  margin: 0;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700; font-size: 22px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text);
}
.topsellers-row {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px;
  flex: 1; min-height: 0;
}
.ts-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--bg-1); border: 1px solid var(--hairline); border-radius: 6px;
  padding: 10px 10px 12px; min-height: 0; overflow: hidden;
}
/* (Old .ts-card tile rank/img/title rules removed — the old full-width Top Sellers row
   was replaced by the compact list in the leaderboards row; new styles live near .ts-row.) */
.ts-count {
  font-family: "IBM Plex Sans", sans-serif; font-weight: 700; font-size: 17px;
  color: var(--text); margin-top: 4px; font-variant-numeric: tabular-nums;
}
.ts-count-lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); }

/* ---------- clickable metric hint (subtle, TV-safe) + detail modal ---------- */
.clickable { cursor: pointer; }
.hero-cell.clickable:hover { background: rgba(0,0,0,0.03); }
.hero-cell.clickable .hero-cell-label::after { content: " \24d8"; opacity: 0.4; font-size: 0.7em; vertical-align: top; }
.t-courier td.clickable { text-decoration: underline dotted rgba(0,0,0,0.35); text-underline-offset: 5px; }
.t-courier td.clickable:hover { background: rgba(0,0,0,0.05); }

/* =========================================================================
   DETAIL MODALS — "Ops Console" redesign
   Two surfaces share the shell: an order-triage panel and a product-analytics
   card. Sharp, confident, instantly scannable. Appended to <body>, unscaled.
   ========================================================================= */
.modal-ov {
  position: fixed; inset: 0;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(255,159,28,0.10), transparent 60%),
    rgba(10,12,18,0.62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 24px;
  animation: modal-ov-in 160ms ease-out;
}
@keyframes modal-ov-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  --m-pad: 26px;
  background: var(--bg-2);
  width: min(900px, 94vw); max-height: 88vh;
  display: flex; flex-direction: column;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--amber-hi);
  border-radius: 4px; overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 30px 80px -24px rgba(10,12,18,0.62),
    0 8px 22px -12px rgba(10,12,18,0.30);
  font-family: "IBM Plex Sans", sans-serif;
  animation: modal-in 200ms cubic-bezier(0.16,1,0.3,1);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* ---------- shared header (sticky, gradient) ---------- */
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--m-pad) 16px;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-2) 100%);
  border-bottom: 1px solid var(--hairline);
  position: relative; flex-shrink: 0;
}
.modal-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--amber-hi), transparent 60%);
}
/* The JS feeds "<label> · <count>" as text into .modal-head span; we render it
   as an eyebrow + big numeral entirely from that single string via the layout.
   To keep the existing JS contract intact we style the whole span block. */
.modal-head .modal-title {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.modal-head .modal-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-dim);
  display: flex; align-items: center; gap: 9px;
}
.modal-head .modal-eyebrow .m-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber-hi); box-shadow: 0 0 0 3px rgba(255,159,28,0.18);
  flex-shrink: 0;
}
.modal-head .modal-h1 {
  font-size: 26px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--text); line-height: 1.05;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal-head .modal-count {
  font-variant-numeric: tabular-nums; color: var(--amber);
  margin-left: 4px;
}
/* fallback: when JS hasn't wrapped the title yet (plain string) */
.modal-head > span {
  font-weight: 700; font-size: 22px; letter-spacing: 0.02em;
  color: var(--text); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal-x {
  border: 1px solid var(--hairline); background: var(--bg-1);
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 4px; font-size: 24px; line-height: 1; cursor: pointer;
  color: var(--text-dim); display: grid; place-items: center;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.modal-x:hover { background: var(--bad); color: #fff; border-color: var(--bad); }

.modal-body { padding: var(--m-pad); overflow-y: auto; }
.modal-body::-webkit-scrollbar { width: 10px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 999px; border: 3px solid var(--bg-2); }
.modal-empty {
  padding: 64px 24px; text-align: center; color: var(--text-mute);
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: 13px;
}

/* =========================================================================
   ORDER MODAL — dispatch triage
   ========================================================================= */
/* summary stat-rail */
.msum {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 0; margin-bottom: 0;
  background: var(--bg-1); border: 1px solid var(--hairline);
  border-radius: 6px; overflow: hidden;
}
.msum .mstat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; border-right: 1px solid var(--hairline);
  position: relative;
}
.msum .mstat:last-child { border-right: 0; }
.msum .mstat-v {
  font-size: 34px; font-weight: 700; line-height: 0.9;
  font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: -0.02em;
}
.msum .mstat-k {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim);
  display: flex; align-items: center; gap: 6px;
}
.msum .mstat.is-overdue { background: rgba(239,68,68,0.07); }
.msum .mstat.is-overdue .mstat-v { color: var(--bad-deep); }
.msum .mstat.is-overdue .mstat-k { color: var(--bad-deep); }
.msum .mstat.is-prime  .mstat-v { color: var(--prime); }
.msum .mstat.is-multi  .mstat-v { color: var(--cyan); }
.msum .mstat .mk-ico {
  width: 14px; height: 14px; display: inline-block; vertical-align: -2px;
  fill: none; stroke: currentColor; stroke-width: 2.2; flex-shrink: 0;
}
/* reused Today's-Queue PNG icons (prime/multi) — sized per context */
.q-ico { width: auto; flex-shrink: 0; }
.msum .mstat .q-ico { height: 16px; vertical-align: -3px; }
.oflag .q-ico { height: 13px; vertical-align: -2px; }
.mchip .q-ico { height: 14px; vertical-align: -2px; }

/* courier split line under the stat rail */
.msum-sub {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  margin: 14px 0 18px; padding: 0;
}
.msum-sub .msub-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-mute); margin-right: 2px;
}
.msum-sub .csplit {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg-1); border: 1px solid var(--hairline); color: var(--text-2);
}
.msum-sub .csplit b { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* section divider before the order list */
.olist-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-dim);
  margin: 0 0 12px;
}
.olist-head::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

/* order card — colored urgency rail on the left */
.ocard {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--rule);
  border-radius: 6px;
  padding: 11px 16px 12px 18px;
  margin-bottom: 9px;
  transition: box-shadow 140ms, transform 140ms;
}
.ocard:last-child { margin-bottom: 0; }
.ocard:hover { box-shadow: 0 6px 18px -10px rgba(10,12,18,0.30); }
.ocard.is-overdue { border-left-color: var(--bad); background: linear-gradient(90deg, rgba(239,68,68,0.05), var(--bg-1) 120px); }
.ocard.is-soon    { border-left-color: var(--amber-hi); background: linear-gradient(90deg, rgba(255,159,28,0.06), var(--bg-1) 120px); }
.ocard.is-ok      { border-left-color: var(--ok); }

.ocard-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ocard-head b {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 18px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.ocard-meta {
  margin-left: auto;
  font-size: 12px; font-weight: 600; color: var(--text-mute);
  letter-spacing: 0.06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.ocard-meta .om-dot { color: var(--rule-strong); }

/* deadline chip */
.dchip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 4px; white-space: nowrap;
  background: var(--bg-3); color: var(--text-dim);
  border: 1px solid var(--hairline);
}
.dchip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.dchip.overdue {
  background: var(--bad); color: #fff; border-color: var(--bad-deep);
  box-shadow: 0 2px 8px -2px rgba(239,68,68,0.5);
}
.dchip.soon { background: #FFF1DC; color: #9A3412; border-color: rgba(255,159,28,0.55); }
.dchip.ok   { background: rgba(21,128,61,0.10); color: var(--ok-deep); border-color: rgba(21,128,61,0.3); }
.dchip.none { background: var(--bg-3); color: var(--text-mute); }

/* priority flag badges */
.oflag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; line-height: 1;
}
.oflag .of-ico { width: 11px; height: 11px; display: inline-block; }
.oflag.prime { background: rgba(194,65,12,0.12); color: var(--prime); box-shadow: inset 0 0 0 1px rgba(194,65,12,0.22); }
.oflag.multi { background: rgba(3,105,161,0.12); color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(3,105,161,0.22); }

/* line-item thumbnails — flex-wrap so tiles pack left and size to content */
.ocard-items {
  display: flex; flex-wrap: wrap;
  gap: 7px 10px; margin-top: 10px;
  padding-top: 10px; border-top: 1px dashed var(--hairline);
}
.oi {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  flex: 0 1 auto; max-width: 360px;
  padding: 5px 12px 5px 5px; border-radius: 5px; background: var(--bg-2);
}
.oi img, .oi .noimg {
  width: 42px; height: 42px; object-fit: contain; flex-shrink: 0;
  background: #fff; border: 1px solid var(--hairline); border-radius: 5px;
  padding: 3px;
}
.oi .noimg { position: relative; }
.oi .noimg::after {
  content: ""; position: absolute; inset: 12px;
  border: 2px dashed var(--rule); border-radius: 3px;
}
.oi-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.oi-title {
  font-size: 12.5px; font-weight: 500; line-height: 1.25; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.oi-sku {
  font-family: "IBM Plex Sans", monospace;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text-faint);
}
/* per-line quantity badge in the bulk-orders popup */
.oi-qty { color: var(--amber); font-weight: 700; }

/* Clickable Bulk cells (dashboard leaderboard + /packers tables) open the bulk popup */
.bulk-link {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule-strong);
}
.bulk-link:hover { color: var(--amber); text-decoration-color: var(--amber); }

/* SKU filter box inside the bulk-orders popup — matches the .sf-field inputs */
.bulk-filter { margin: 0 0 12px; }
.bulk-filter-input {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  color: var(--text);
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 14px; letter-spacing: 0.02em;
}
.bulk-filter-input::placeholder { color: var(--text-faint); }
.bulk-filter-input:focus {
  outline: 0;
  border-color: var(--amber);
  box-shadow: 0 0 0 2px var(--amber-glow);
}

/* ---------- Settings drawer (hamburger button → right-side panel) ---------------- */
.settings-btn {
  /* absolute (not fixed) so it stays at the top of the page and scrolls away
     with the content on mobile — not stuck to the viewport. */
  position: absolute; top: 12px; right: 12px; z-index: 900;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--text); cursor: pointer;
  box-shadow: 0 2px 8px rgba(20,23,31,0.08);
  transition: background 0.15s;
}
.settings-btn:hover { background: var(--bg-2); }
.settings-btn svg { width: 22px; height: 22px; }
.settings-ov {
  position: fixed; inset: 0; background: rgba(10,12,18,0.5);
  display: flex; justify-content: flex-end; z-index: 1100;
  animation: fade-in 140ms ease-out;
}
.settings-drawer {
  background: var(--bg-1);
  width: min(520px, 100vw);
  height: 100%;
  display: flex; flex-direction: column;
  box-shadow: -8px 0 28px rgba(0,0,0,0.25);
  animation: slide-in-right 200ms cubic-bezier(.2,.7,.3,1);
  font-family: "IBM Plex Sans", sans-serif;
}
@keyframes slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.settings-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--hairline);
}
.settings-head h2 {
  margin: 0;
  font-size: 18px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text);
}
.settings-sub { margin-top: 2px; font-size: 11px; color: var(--text-mute); }
.settings-x { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--text-mute); }
.settings-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 22px 22px; }
.settings-empty { padding: 40px; text-align: center; color: var(--text-mute); }

/* Grouped sections ------------------------------------------------------- */
.sf-group { padding: 16px 0 4px; }
.sf-group + .sf-group { border-top: 1px solid var(--hairline); }
.sf-group h3 {
  margin: 0 0 4px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text);
}
.sf-group-desc {
  margin: 0 0 8px;
  font-size: 12px; line-height: 1.5; color: var(--text-mute);
}

/* One setting row -------------------------------------------------------- */
.sf-row { display: grid; gap: 6px; padding: 12px 0; }
.sf-row + .sf-row { border-top: 1px dashed var(--hairline); }
.sf-row-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.sf-label { font-size: 13px; font-weight: 600; color: var(--text); }
.sf-desc { font-size: 11px; color: var(--text-mute); line-height: 1.5; }

/* "Default" / "Reset to default" pill — right-aligned on the label row */
.sf-pill {
  font-family: inherit; font-size: 10px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--surface); color: var(--text-mute);
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1;
}
.sf-pill.sf-default { cursor: default; }
.sf-pill.sf-reset { cursor: pointer; color: var(--amber); border-color: var(--amber); background: transparent; }
.sf-pill.sf-reset:hover { background: var(--amber); color: #fff; }
.sf-pill.sf-reset:disabled { opacity: 0.6; cursor: wait; }

/* Field row: holds the actual widget --------------------------------------*/
.sf-field { display: flex; align-items: center; gap: 6px; }
.sf-field input[type="text"],
.sf-field input[type="number"],
.sf-field select {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--hairline); border-radius: 4px;
  background: var(--surface); color: var(--text);
  font-family: "IBM Plex Sans", sans-serif; font-size: 14px;
}
.sf-field input:focus, .sf-field select:focus { outline: 0; border-color: var(--amber); }

/* Number-with-unit widget */
.sf-num {
  display: flex; align-items: stretch; flex: 1;
  border: 1px solid var(--hairline); border-radius: 4px;
  background: var(--surface);
  overflow: hidden;
}
.sf-num input {
  flex: 1; min-width: 0; padding: 8px 10px;
  border: 0 !important; background: transparent; color: var(--text);
  font-family: "IBM Plex Sans", sans-serif; font-size: 14px;
}
.sf-num input:focus { outline: 0; }
.sf-num:focus-within { border-color: var(--amber); }
.sf-unit {
  padding: 8px 10px; background: var(--bg-2); color: var(--text-mute);
  font-size: 12px; border-left: 1px solid var(--hairline);
  display: flex; align-items: center;
}

/* Tag chips widget */
.sf-tags {
  flex: 1; display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px; min-height: 38px;
  border: 1px solid var(--hairline); border-radius: 4px;
  background: var(--surface);
}
.sf-tags:focus-within { border-color: var(--amber); }
.sf-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 8px; border-radius: 999px;
  background: var(--bg-2); color: var(--text);
  font-size: 12px; line-height: 1;
}
.sf-chip-x {
  border: 0; background: transparent; color: var(--text-mute); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 4px;
}
.sf-chip-x:hover { color: var(--text); }
.sf-tag-input {
  flex: 1; min-width: 100px;
  border: 0 !important; outline: 0; background: transparent; color: var(--text);
  font-family: "IBM Plex Sans", sans-serif; font-size: 13px;
  padding: 4px 6px;
}

/* Logo upload widget --------------------------------------------------------*/
.sf-logo {
  flex: 1; display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--hairline); border-radius: 4px;
  background: var(--surface);
}
.sf-logo-preview {
  width: 64px; height: 40px; flex: 0 0 64px;
  display: flex; align-items: center; justify-content: center;
  background: #1F2229;        /* match the dashboard's external-brand chip bg */
  border-radius: 4px;
  overflow: hidden;
}
.sf-logo-preview img {
  max-width: 100%; max-height: 100%; object-fit: contain;
}
.sf-logo-actions { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sf-logo-replace {
  align-self: flex-start;
  font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--hairline); background: var(--bg-2); color: var(--text);
}
.sf-logo-replace:hover { background: var(--bg-1); border-color: var(--amber); color: var(--amber); }
.sf-logo-replace:disabled { opacity: 0.6; cursor: wait; }
.sf-logo-name {
  font-size: 11px; color: var(--text-mute);
  font-family: "IBM Plex Sans", monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.settings-foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 22px; border-top: 1px solid var(--hairline); background: var(--bg-2);
}
.settings-foot button {
  padding: 8px 16px; border-radius: 4px;
  font-family: "IBM Plex Sans", sans-serif; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--hairline);
}
.settings-cancel { background: var(--surface); color: var(--text); }
.settings-save { background: var(--amber); color: #fff; border-color: var(--amber); }
.settings-save:hover { background: var(--amber-hi); border-color: var(--amber-hi); }
.settings-save:disabled { opacity: 0.6; cursor: wait; }

/* clickable Top Sellers tile */
.clickable-product { cursor: pointer; transition: background 0.15s; }
.clickable-product:hover { background: rgba(0,0,0,0.04); }

/* ============================================================================
   Packer insight popup
   ============================================================================
   Renders inside the existing .modal-ov / .modal-body shell. Each .pk-sect is
   one band (chart / time-of-day / mix / couriers / SKUs); the .pk-head sits
   above. Hand-rolled SVG for charts means no JS lib dependency. */

/* leaderboard name clickability */
.pk-click { cursor: pointer; }
.pk-click:hover { color: var(--amber); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.pk-card { font-family: "IBM Plex Sans", sans-serif; }

/* HEAD ----------------------------------------------------------------------*/
.pk-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 4px 0 14px; border-bottom: 1px solid var(--hairline); margin-bottom: 14px;
}
.pk-name { font-size: 24px; font-weight: 700; letter-spacing: 0.02em; }
.pk-ranks { display: flex; gap: 8px; }
.pk-rank {
  display: flex; align-items: baseline; gap: 4px;
  padding: 6px 10px; border-radius: 6px; background: var(--bg-2);
  font-family: inherit;
}
.pk-rank-num { font-size: 16px; font-weight: 700; color: var(--text); }
.pk-rank-lab { font-size: 10px; color: var(--text-mute); letter-spacing: 0.06em; text-transform: uppercase; }
.r-arr { font-size: 10px; margin-right: 2px; }
.r-arr.up   { color: var(--ok); }
.r-arr.down { color: var(--bad); }

/* HEADLINE STRIP -----------------------------------------------------------*/
.pk-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
  border: 1px solid var(--hairline); border-radius: 6px;
  margin-bottom: 18px; overflow: hidden;
}
.pk-stat {
  padding: 12px 14px; border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.pk-stat:last-child { border-right: 0; }
.pk-stat-lab { font-size: 10px; color: var(--text-mute); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.pk-stat-val { font-size: 30px; font-weight: 700; line-height: 1; color: var(--text); }
.pk-stat-sub { font-size: 11px; color: var(--text-mute); font-family: "IBM Plex Sans", monospace; }
.pk-delta { font-size: 11px; padding: 2px 6px; border-radius: 999px; background: var(--bg-2); color: var(--text-mute); }
.pk-delta.good { background: rgba(0,166,118,0.12); color: var(--ok); }
.pk-delta.bad  { background: rgba(219,68,55,0.12);  color: var(--bad); }

/* SECTION FRAME ------------------------------------------------------------*/
.pk-sect { margin-bottom: 18px; }
.pk-sect-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
}
.pk-sect-head h3 {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text);
}
.pk-sect-sub { font-size: 11px; color: var(--text-mute); }

/* PERIOD PILLS -------------------------------------------------------------*/
.pk-pills { display: flex; gap: 4px; }
.pk-pill {
  font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--hairline); background: transparent; color: var(--text-mute); cursor: pointer;
}
.pk-pill:hover { color: var(--text); }
.pk-pill.on { background: var(--text); color: #fff; border-color: var(--text); }

/* SPEED CHART --------------------------------------------------------------*/
.pk-chart-wrap {
  background: var(--bg-2); border-radius: 6px; padding: 6px; overflow: hidden;
}
.pk-chart, .pk-tod { width: 100%; height: auto; max-height: 240px; display: block; }
.pk-grid { stroke: var(--hairline); stroke-width: 1; }
.pk-line { fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pk-band { fill: rgba(255,159,28,0.10); stroke: none; }
.pk-dot  { fill: var(--amber); stroke: var(--bg-2); stroke-width: 1; cursor: pointer; }
.pk-dot:hover { r: 5; }
.pk-ref  { stroke-dasharray: 4 4; stroke-width: 1; }
.pk-ref-p { stroke: var(--text); opacity: 0.6; }
.pk-ref-t { stroke: var(--text-mute); }
.pk-ref-lab { font-size: 10px; fill: var(--text-mute); font-family: "IBM Plex Sans", sans-serif; }
.pk-ref-lab-t { fill: var(--text-mute); }
.pk-yax, .pk-xax { font-size: 10px; fill: var(--text-mute); font-family: "IBM Plex Sans", sans-serif; }
.pk-chart-empty {
  padding: 40px 0; text-align: center; color: var(--text-mute); font-size: 13px;
  background: var(--bg-2); border-radius: 6px;
}

/* TIME-OF-DAY --------------------------------------------------------------*/
.pk-tod-bar   { fill: var(--amber); }
.pk-tod-empty { fill: var(--hairline); }

/* MIX 2x2 ------------------------------------------------------------------*/
.pk-mix {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--hairline); border-radius: 6px; overflow: hidden;
}
.pk-mix-cell {
  padding: 12px 14px;
  border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 2px;
}
.pk-mix-cell:nth-child(2n) { border-right: 0; }
.pk-mix-cell:nth-child(n+3) { border-bottom: 0; }
.pk-mix-cell.pk-mix-bulk { grid-column: 1 / -1; border-right: 0; border-bottom: 0;
  border-top: 1px solid var(--hairline); }
.pk-mix-lab { font-size: 10px; color: var(--text-mute); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.pk-mix-n   { font-size: 24px; font-weight: 700; line-height: 1; color: var(--text); }
.pk-mix-avg { font-size: 11px; color: var(--text-mute); font-family: "IBM Plex Sans", monospace; }

/* COURIERS -----------------------------------------------------------------*/
.pk-cours { display: flex; flex-direction: column; gap: 6px; }
.pk-cour-row {
  display: grid; grid-template-columns: 28px 1fr 1fr 38px; align-items: center; gap: 10px;
  padding: 4px 0;
}
.pk-cour-img { width: 28px; height: 18px; object-fit: contain; background: #1F2229; border-radius: 3px; padding: 2px; }
.pk-cour-noimg {
  width: 28px; height: 18px; display: flex; align-items: center; justify-content: center;
  background: #1F2229; color: #fff; font-size: 9px; font-weight: 700; border-radius: 3px;
}
.pk-cour-name { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-cour-bar { height: 6px; background: var(--bg-2); border-radius: 3px; overflow: hidden; }
.pk-cour-bar > span { display: block; height: 100%; background: var(--amber); border-radius: 3px; }
.pk-cour-n { font-size: 13px; font-weight: 700; text-align: right; color: var(--text); }

/* SKUS ---------------------------------------------------------------------*/
.pk-skus { display: flex; flex-direction: column; gap: 8px; }
.pk-sku-row {
  display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px;
  padding: 4px 0;
}
.pk-sku-img { width: 36px; height: 36px; object-fit: contain; background: #fff; border: 1px solid var(--hairline); border-radius: 4px; }
.pk-sku-noimg { background: var(--bg-2); }
.pk-sku-title { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-sku-qty { font-size: 14px; font-weight: 700; color: var(--text); }

/* FOOTER -------------------------------------------------------------------*/
.pk-foot { margin-top: 18px; text-align: right; }
.pk-fullink { font-size: 12px; color: var(--text-mute); text-decoration: none; border-bottom: 1px solid var(--hairline); padding-bottom: 1px; }
.pk-fullink:hover { color: var(--amber); border-color: var(--amber); }

/* CHART TOOLTIP -----------------------------------------------------------*/
.pk-tip {
  position: fixed; display: none; z-index: 1200;
  background: rgba(20,23,31,0.96); color: #fff;
  padding: 6px 10px; border-radius: 4px; font-size: 12px; font-family: "IBM Plex Sans", sans-serif;
  pointer-events: none; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

/* MOBILE -------------------------------------------------------------------*/
@media (max-width: 720px) {
  .pk-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pk-ranks { flex-wrap: wrap; }
  .pk-stats { grid-template-columns: 1fr; }
  .pk-stat  { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .pk-stat:last-child { border-bottom: 0; }
  .pk-stat-val { font-size: 26px; }
  .pk-name { font-size: 20px; }
  .pk-mix { grid-template-columns: 1fr 1fr; }
}

/* legacy pill chip — still used for product status chips */
.mchip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  padding: 6px 13px; border-radius: 999px;
  background: var(--bg-1); color: var(--text-2); border: 1px solid var(--hairline);
}
.mchip b { font-variant-numeric: tabular-nums; }
.mchip .of-ico { width: 13px; height: 13px; flex-shrink: 0; }
.mchip.prime { background: rgba(194,65,12,0.10); color: var(--prime); border-color: rgba(194,65,12,0.22); }
.mchip.multi { background: rgba(3,105,161,0.10); color: var(--cyan); border-color: rgba(3,105,161,0.22); }

/* =========================================================================
   PRODUCT MODAL — analytics card
   ========================================================================= */
.pcard { display: flex; flex-direction: column; gap: 20px; }

/* hero: framed image + title + sku tag + headline today stat */
.phead {
  display: grid; grid-template-columns: auto 1fr; gap: 20px;
  align-items: center;
  padding-bottom: 20px; border-bottom: 1px solid var(--hairline);
}
.phead-img {
  width: 104px; height: 104px; flex-shrink: 0;
  background: #fff; border: 1px solid var(--hairline); border-radius: 8px;
  display: grid; place-items: center; padding: 8px;
  box-shadow: 0 6px 18px -12px rgba(10,12,18,0.35);
}
.phead-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.phead-img .noimg {
  width: 100%; height: 100%; border: 2px dashed var(--rule); border-radius: 5px;
}
.phead-t { min-width: 0; }
.ptitle {
  font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.22;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.psku {
  display: inline-block; margin-top: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cyan-deep); background: rgba(3,105,161,0.08);
  border: 1px solid rgba(3,105,161,0.20); border-radius: 4px;
  padding: 4px 9px; font-variant-numeric: tabular-nums;
}

/* sales comparison table */
.psales-wrap {
  border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden;
  background: var(--bg-1);
}
.psales { width: 100%; border-collapse: collapse; }
.psales th, .psales td { padding: 13px 18px; text-align: right; font-variant-numeric: tabular-nums; }
.psales thead th {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim); background: var(--bg-2);
  border-bottom: 1px solid var(--hairline);
}
.psales thead th:first-child { text-align: left; }
.psales tbody th {
  text-align: left; font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-2);
}
.psales tbody td { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.05; letter-spacing: -0.01em; }
.psales tbody td .pcol-lbl { display: none; }
.psales tbody td.amber { color: var(--amber); }
.psales tbody tr + tr th, .psales tbody tr + tr td { border-top: 1px solid var(--hairline); }
/* emphasise the Today row */
.psales tbody tr.is-today { background: linear-gradient(90deg, rgba(255,159,28,0.10), rgba(255,159,28,0.03)); }
.psales tbody tr.is-today th { color: var(--amber-deep); }
.psales tbody tr.is-today td { font-size: 30px; }

/* status chips + courier split footer */
.prow {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
}
.prow .prow-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-mute); margin-right: 2px;
}
.psplit {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  padding-top: 16px; border-top: 1px solid var(--hairline);
}
.psplit b {
  color: var(--text-mute); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; margin-right: 2px;
}
.psplit .csplit {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--hairline); color: var(--text-2);
}
.psplit .csplit b {
  font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums;
  margin: 0; font-size: 12px; letter-spacing: 0; text-transform: none;
}

/* ---------- narrow-width adaptation (modal renders unscaled) ---------- */
@media (max-width: 760px) {
  /* near-full-width, comfortably padded, internally scrollable */
  .modal-ov { padding: 12px; align-items: flex-start; }
  .modal {
    --m-pad: 18px;
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }
  .modal-head { padding: 14px var(--m-pad) 12px; }
  .modal-head .modal-h1 { font-size: 21px; }
  .modal-head .modal-eyebrow { font-size: 11px; letter-spacing: 0.14em; }
  .modal-x { width: 34px; height: 34px; }

  /* order summary stat-rail → 2×2 */
  .msum { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; }
  .msum .mstat { padding: 11px 12px; }
  .msum .mstat-v { font-size: 28px; }
  .msum .mstat:nth-child(2n) { border-right: 0; }
  .msum .mstat:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }

  /* order cards: let head wrap, items stack one-per-row */
  .ocard { padding: 11px 12px 12px 14px; }
  .ocard-meta { margin-left: 0; width: 100%; }
  .oi { max-width: 100%; flex: 1 1 100%; }

  /* product modal hero stacks; sales table breathes */
  .phead { grid-template-columns: auto 1fr; gap: 14px; }
  .phead-img { width: 76px; height: 76px; }
  .ptitle { font-size: 17px; }
  .psales th, .psales td { padding: 11px 12px; }
  .psales tbody td { font-size: 20px; }
  .psales tbody tr.is-today td { font-size: 24px; }
}
@media (max-width: 380px) {
  .phead { grid-template-columns: 1fr; }
}

/* ---------- HERO: NEED PICKING ------------------------------------------ */
.hero-pri {
  background: var(--surface);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
          backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--hairline);
  position: relative;
  padding: 22px 40px 20px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 14px;
  overflow: hidden;
}
.hero-pri::before { content: none; }
.hero-pri .frame {
  position: absolute; inset: 0;
  background:
    linear-gradient(var(--amber), var(--amber)) top left / 18px 1px no-repeat,
    linear-gradient(var(--amber), var(--amber)) top left / 1px 18px no-repeat,
    linear-gradient(var(--amber), var(--amber)) top right / 18px 1px no-repeat,
    linear-gradient(var(--amber), var(--amber)) top right / 1px 18px no-repeat,
    linear-gradient(var(--amber), var(--amber)) bottom left / 18px 1px no-repeat,
    linear-gradient(var(--amber), var(--amber)) bottom left / 1px 18px no-repeat,
    linear-gradient(var(--amber), var(--amber)) bottom right / 18px 1px no-repeat,
    linear-gradient(var(--amber), var(--amber)) bottom right / 1px 18px no-repeat;
  pointer-events: none;
}
.hero-pri-head {
  display: flex; align-items: baseline; justify-content: space-between;
  position: relative;
}
.hero-pri-head .eyebrow-r {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000000;
}
.hero-pri-head .eyebrow-r strong {
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.01em;
  color: #000000;
  margin-right: 6px;
  vertical-align: -2px;
}
.hero-pri-head .id {
  display: flex; align-items: center; gap: 14px;
}
.hero-pri-head .code {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--amber);
}
.hero-pri-head h1 {
  margin: 0;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.hero-pri-head .tag {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--rule);
}

/* progress block — sits just under the header */
.progress-block { display: grid; gap: 8px; }
.progress-block .pbar {
  position: relative;
  height: 12px;
  background: var(--bg-3);
  border: 1px solid var(--hairline);
}
.progress-block .pbar > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--amber-deep), var(--amber));
}
.progress-block .plabels {
  display: flex; justify-content: space-between;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.progress-block .plabels strong { color: var(--text); font-weight: 600; }

/* two-up hero grid */
.hero-two-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
  position: relative;
  min-height: 0;
  gap: 0;
}
.hero-two-grid .hero-cell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 6px 18px 8px;
  gap: 14px;
  align-items: center;
  text-align: center;
  border-right: 1px solid var(--hairline);
}
.hero-two-grid .hero-cell:last-child { border-right: 0; }
.hero-two-grid .hero-cell-label {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
.hero-two-grid .hero-cell-num {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 168px;            /* doubled hero row owns the freed top-sellers space — numbers scale to fill */
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  align-self: center;
}
/* When prime/multi pills show in ANY cell, shrink all hero numbers together AND reserve
   the same pill-row height in every cell — that way the numbers sit at the same
   vertical position across all three cells, not pushed up only in the pilled cell. */
.hero-two-grid:has(.hero-cell-sub .pill) .hero-cell-num { font-size: 132px; }
.hero-two-grid:has(.hero-cell-sub .pill) .hero-cell-sub { min-height: 50px; }
/* When the warn/bad CTA banner is present it eats ~96px of the hero-left row, so
   compress the hero (smaller numbers + tighter chrome) to keep the queue numbers
   fully visible and unclipped. :has() is supported by the Chromium TV browser. */
.hero-left:has(.cta-banner) .hero-pri { padding: 14px 32px 14px; gap: 8px; }
.hero-left:has(.cta-banner) .hero-pri-head h1 { font-size: 22px; }
.hero-left:has(.cta-banner) .progress-block { gap: 5px; }
.hero-left:has(.cta-banner) .progress-block .pbar { height: 9px; }
.hero-left:has(.cta-banner) .hero-two-grid .hero-cell { gap: 8px; padding: 4px 16px 4px; }
.hero-left:has(.cta-banner) .hero-two-grid .hero-cell-num { font-size: 72px; }
.hero-left:has(.cta-banner) .hero-two-grid .hero-cell-label { font-size: 16px; }
.hero-left:has(.cta-banner) .cta-banner { font-size: clamp(20px, 1.7vw, 26px); padding: 9px 18px; margin-bottom: 12px; }

.hero-two-grid .hero-cell-num.cyan { color: var(--cyan); }
.hero-two-grid .hero-cell-num.tone-ok   { color: var(--ok); }
.hero-two-grid .hero-cell-num.tone-warn { color: var(--warn); }
.hero-two-grid .hero-cell-num.tone-bad  { color: var(--bad); }
.hero-two-grid .hero-cell-num.tone-dim  { color: var(--text-mute); }
@keyframes pulse-bad {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.hero-pri-head .eyebrow-r.tone-ok   { color: var(--ok); }
.hero-pri-head .eyebrow-r.tone-ok strong   { color: var(--ok); }
.hero-pri-head .eyebrow-r.tone-warn { color: var(--warn); }
.hero-pri-head .eyebrow-r.tone-warn strong { color: var(--warn); }
.hero-pri-head .eyebrow-r.tone-bad  { color: var(--bad); }
.hero-pri-head .eyebrow-r.tone-bad strong  { color: var(--bad); }

/* (dropped per-cell tone tracking — only overdue & packed cells get a colour now) */
/* overdue → red, on To Pick / Prime / Packing cells (overrides the base tone) */
.t-courier td.tp.od,
.t-courier td.prime.od,
.t-courier td.od { color: var(--bad); font-weight: 800; }
.hero-two-grid .hero-cell-num.zero { color: var(--ok); }
.hero-two-grid .hero-cell-sub {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  min-height: 0; align-items: center;
}
/* prime + multi pills sized to sit comfortably under the big hero number — they can
   wrap to a second line when both are present so they never overflow/clip the cell */
.hero-two-grid .hero-cell-sub .pill {
  font-size: 24px; padding: 5px 14px; gap: 5px; letter-spacing: 0.04em;
}
.hero-two-grid .hero-cell-sub .pill .pill-ico {
  width: 34px; height: 34px; margin-right: 7px;
}

/* ---------- HERO: secondary tiles --------------------------------------- */
.tri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  min-height: 0;
}
.tile {
  position: relative;
  background: var(--surface);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
          backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--hairline);
  padding: 18px 22px 18px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}
.tile .label {
  display: flex; align-items: center; gap: 10px;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.tile .label .code {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--amber);
  font-weight: 600;
}
.tile .figure {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 6vw, 92px);
  line-height: 0.9;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
  letter-spacing: -0.02em;
}
.tile .figure .unit {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 0.32em;
  margin-left: 6px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tile .sub {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.tile.tone-prime .figure { color: var(--prime); }
.tile.tone-cyan  .figure { color: var(--cyan); }
.tile.tone-ok    .figure { color: var(--ok); }
.tile.tone-warn  .figure { color: var(--warn); }
.tile.tone-bad   .figure { color: var(--bad); }

/* ---------- HERO: courier panel ----------------------------------------- */
.courier-stack { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Courier list sits at the TOP of the panel (no vertical centering) so it lines up
   with the Today's Queue panel on the left. */
.courier-stack > .t-courier { margin-top: 0; margin-bottom: auto; }
.courier-title {
  margin: 4px 0 10px;
  padding-left: 20px;            /* align with the table's content (COURIERS / logos) */
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  text-align: left;
}
.courier-title .ul {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
/* "Dispatch Today" tracks the warn state (text + underline via currentColor) */
.courier-title .ul.tone-warn { color: var(--warn); }
.courier-title .ul.tone-bad  { color: var(--bad); }

.t-courier {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.t-courier thead th {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 8px 20px;
  border-bottom: 1.5px solid #000000;
  text-align: center;
  white-space: nowrap;
}
.t-courier thead th.l { text-align: left; width: 38%; }
.t-courier tbody td {
  padding: 8px 20px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  border-bottom: 1px solid var(--hairline);
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}
.t-courier tbody tr:last-child td { border-bottom: 0; }
.t-courier td.name {
  text-align: left;
  padding: 8px 20px;
}
.t-courier .brand-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 110px;
  width: 110px;
  height: 46px;
  padding: 0 12px;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.08em;
  border-radius: 6px;
  margin-right: 18px;
  vertical-align: middle;
  overflow: hidden;
  box-sizing: border-box;
}
.t-courier .brand-chip.is-color {
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 1px rgba(20,23,31,0.04);
}
.t-courier .brand-chip.is-mono { color: #FFFFFF; }
.t-courier .brand-chip .brand-text {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
}
.t-courier .brand-logo {
  display: block;
  max-height: 34px;
  max-width: 90px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.t-courier .is-mono .brand-logo {
  filter: brightness(0) invert(1);   /* monochrome glyphs render white on coloured chip */
  max-height: 26px;
}
.t-courier .brand-name {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  vertical-align: middle;
}
.t-courier tbody td:not(.name) { font-size: 24px; font-weight: 700; }
/* simplified palette: To Pick / Prime / Packing read in neutral text by default;
   only OVERDUE turns them red (via .od), only PACKED is green, only ZERO is muted */
.t-courier td.tp    { font-weight: 700; color: var(--text); }
.t-courier td.prime { font-weight: 700; color: var(--text); }
.t-courier td.tp.zero, .t-courier td.prime.zero { color: var(--text-mute); font-weight: 600; }

/* Busy-day density: when the list has 6+ couriers, compact every row so all of them
   (up to the warehouse's full 8 carriers + Multi splits) fit without spilling out
   the bottom of the panel (which has overflow:hidden). Quiet days (≤5) keep the
   larger, comfortable rows above. Pure CSS via row count via :has().
   Scoped to desktop (>1100px) — mobile has its own density tier under .mobile-dash
   inside the `max-width: 1100px` block below. */
@media (min-width: 1101px) {
  .hero-right:has(.t-courier tbody tr:nth-child(6)) .t-courier tbody td,
  .hero-right:has(.t-courier tbody tr:nth-child(6)) .t-courier td.name { padding: 4px 20px; }
  .hero-right:has(.t-courier tbody tr:nth-child(6)) .t-courier .brand-chip {
    height: 36px; min-width: 90px; width: 90px;
    font-size: 15px; margin-right: 14px;
  }
  .hero-right:has(.t-courier tbody tr:nth-child(6)) .t-courier .brand-logo { max-height: 26px; max-width: 72px; }
  .hero-right:has(.t-courier tbody tr:nth-child(6)) .t-courier .is-mono .brand-logo { max-height: 20px; }
  .hero-right:has(.t-courier tbody tr:nth-child(6)) .t-courier .brand-name { font-size: 18px; }
  .hero-right:has(.t-courier tbody tr:nth-child(6)) .t-courier tbody td:not(.name) { font-size: 20px; }
  .hero-right:has(.t-courier tbody tr:nth-child(6)) .t-courier thead th { padding: 6px 20px; font-size: 15px; }

  /* Extra-compact tier at 9+ rows (rare — covers RM 24/48 split + DPD/EVRi/Yodel/DHL/UPS + 2 Multi). */
  .hero-right:has(.t-courier tbody tr:nth-child(9)) .t-courier tbody td,
  .hero-right:has(.t-courier tbody tr:nth-child(9)) .t-courier td.name { padding: 2px 16px; }
  .hero-right:has(.t-courier tbody tr:nth-child(9)) .t-courier .brand-chip {
    height: 30px; min-width: 76px; width: 76px;
    font-size: 13px; margin-right: 12px;
  }
  .hero-right:has(.t-courier tbody tr:nth-child(9)) .t-courier .brand-logo { max-height: 22px; max-width: 60px; }
  .hero-right:has(.t-courier tbody tr:nth-child(9)) .t-courier .is-mono .brand-logo { max-height: 16px; }
  .hero-right:has(.t-courier tbody tr:nth-child(9)) .t-courier .brand-name { font-size: 16px; }
  .hero-right:has(.t-courier tbody tr:nth-child(9)) .t-courier tbody td:not(.name) { font-size: 18px; }
}

/* Multi rows — visually separated from the regular couriers */
.t-courier tr.multi-row td { border-top: 2px solid #0369A1; background: rgba(3,105,161,0.04); }
.t-courier tr.multi-row + tr.multi-row td { border-top: 1px solid rgba(3,105,161,0.25); }
.t-courier td.total { color: var(--text-2); }
.t-courier td.done  { color: var(--ok); font-weight: 700; }
.t-courier td.done.zero { color: var(--text-mute); font-weight: 600; }

/* =========================================================================
   LEADERBOARDS — editorial sports-desk · featured hero + chase pack
   ========================================================================= */
.leaders {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gap);
  min-height: 0;
}

.lb {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  display: grid;
  /* chase column-header · champion hero (now holds the eyebrow title) · chase rows+bulk */
  grid-template-rows: auto auto 1fr;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 1px 2px rgba(20,23,31,0.04),
    0 8px 22px -14px rgba(20,23,31,0.16);
}

/* ---------- HEAD STRIP ---------- */
.lb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px 12px;
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg, #FFFFFF, #FAF8F2);
  position: relative;
}
.lb-today .lb-head::after,
.lb-week  .lb-head::after,
.lb-month .lb-head::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
}
.lb-today .lb-head::after { background: linear-gradient(90deg, var(--amber-hi), transparent 70%); }
.lb-week  .lb-head::after { background: linear-gradient(90deg, var(--prime), transparent 70%); }
.lb-month .lb-head::after { background: linear-gradient(90deg, var(--amber-hi), transparent 70%); }

.lb-eyebrow {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0A0C12;
  display: inline-flex; align-items: center; gap: 12px;
}
.lb-pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--amber-hi);
  box-shadow: 0 0 0 4px rgba(255, 159, 28, 0.18);
  animation: lb-pulse 1.4s ease-in-out infinite;
}
@keyframes lb-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}
.lb-laurel {
  width: 10px; height: 10px;
  background: var(--prime);
  transform: rotate(45deg);
  display: inline-block;
}
.lb-meta {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0A0C12;
  opacity: 0.55;
}

/* ---------- FEATURED HERO LEADER ---------- */
.lb-hero {
  position: relative;
  display: block;              /* lb-hero-body owns the grid alignment to the column headers */
  padding: 10px 26px 12px;     /* side padding matches chase rows so columns line up exactly */
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  min-height: 0;
}
.lb-name-row {
  display: flex;
  align-items: center;
  position: relative;
  flex: 1;
  min-width: 0;
  /* indent so the champion name starts at the chase "Packer" column
     (rank col 52px + 16px gap); the crown sits in the rank-column slot */
  padding-left: 68px;
}
/* Calmer champion hero — subtle warm-white instead of a loud gold tint */
.lb-today .lb-hero,
.lb-week  .lb-hero,
.lb-month .lb-hero {
  background: linear-gradient(180deg, #FCFAF4 0%, #F7F2E5 100%);
}
.lb-hero::before { content: none; }    /* drop the diagonal stripe overlay (visual noise) */

.lb-hero-stamp {
  width: clamp(24px, 1.6vw, 30px);     /* crown sits in col 1 (the # / rank column) */
  user-select: none;
  filter: drop-shadow(0 1px 2px rgba(20,23,31,0.14));
  transform: rotate(-18deg);
  transform-origin: center;
  pointer-events: none;
  justify-self: start;
  margin-left: -6px;                   /* shift crown left so its visual centre lines up
                                          with the chase ranks (02/03/…) below */
}
.lb-hero-stamp .crown-img { width: 100%; height: auto; display: block; }
.lb-hero-stamp .crown-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Hero row uses the SAME 5-column grid as .lb-chase-head and .lb-chase-row so the
   crown / packer name / orders / gap / avg align perfectly with the column headers
   and the chase rows below. */
.lb-hero-body {
  display: grid;
  grid-template-columns: 52px 1fr 88px 68px 84px 66px;
  column-gap: 16px;
  align-items: center;
  width: 100%;
  min-width: 0;
  position: relative;
}
.lb-hero-body > .lb-stat       { text-align: right; justify-items: end; }
.lb-hero-empty { display: block; }   /* empty-state branch doesn't need the column grid */
.lb-hero-name {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #0A0C12;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.lb-hero-stats {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 22px;
  flex: 1;
}
.lb-hero-body .lb-stat { text-align: right; }
.lb-stat { display: grid; gap: 4px; justify-items: end; }
.lb-stat-val {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  color: #0A0C12;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.lb-stat-val.amber { color: var(--amber); }
.lb-stat-val.gold  { color: var(--prime); }
.lb-stat-key {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0A0C12;
  opacity: 0.6;
}
.lb-stat--lead { /* divider dropped — column grid handles separation cleanly */ }

.lb-empty {
  padding: 70px 24px;
  text-align: center;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0A0C12;
  opacity: 0.4;
}

/* ---------- CHASE PACK ---------- */
.lb-chase-head {
  display: grid;
  grid-template-columns: 52px 1fr 88px 68px 84px 66px;
  align-items: center;
  column-gap: 16px;
  padding: 0 26px;
  height: 30px;
  max-height: 30px;
  background: var(--surface);
  position: relative;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 17px;               /* shrunk ~12% with the rest of the leaderboard text */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000000;
}
/* Colored accent on BOTH the top and bottom of the column header; tone matches each
   board (amber / prime / amber), same treatment as the old .lb-head eyebrow. */
.lb-chase-head::before,
.lb-chase-head::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 3px;
}
.lb-chase-head::after  { top: 0; }
.lb-chase-head::before { bottom: -1px; }
/* top accent flows right→left (color on the right); bottom accent flows left→right (color on the left) */
.lb-today .lb-chase-head::after  { background: linear-gradient(270deg, var(--amber-hi), transparent 70%); }
.lb-today .lb-chase-head::before { background: linear-gradient(90deg,  var(--amber-hi), transparent 70%); }
.lb-week  .lb-chase-head::after  { background: linear-gradient(270deg, var(--prime),    transparent 70%); }
.lb-week  .lb-chase-head::before { background: linear-gradient(90deg,  var(--prime),    transparent 70%); }
.lb-month .lb-chase-head::after  { background: linear-gradient(270deg, var(--amber-hi), transparent 70%); }
.lb-month .lb-chase-head::before { background: linear-gradient(90deg,  var(--amber-hi), transparent 70%); }
/* Top Sellers panel — shares the .lb card chrome; cyan accent to distinguish it from the
   two champion boards next to it. Compact 5-row vertical product list. */
.lb-topsellers .lb-chase-head::after  { background: linear-gradient(270deg, var(--cyan), transparent 70%); }
.lb-topsellers .lb-chase-head::before { background: linear-gradient(90deg,  var(--cyan), transparent 70%); }
.lb-topsellers .lb-chase-head { grid-template-columns: 30px 1fr 54px 54px 76px; column-gap: 8px; padding: 3px 18px; }
.lb-topsellers { display: flex; flex-direction: column; }
.ts-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  background: var(--surface);
  flex: 1 1 auto; min-height: 0;
  /* up to 20 products fit by scrolling within the panel — first 5 visible by default */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  scrollbar-gutter: stable;     /* always reserve the scrollbar slot so row cols line up with the header cols */
}
.ts-list::-webkit-scrollbar { width: 6px; }
.ts-list::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
.ts-list::-webkit-scrollbar-track { background: transparent; }
.ts-row {
  display: grid;
  grid-template-columns: 30px 1fr 54px 54px 76px;
  column-gap: 8px; align-items: center;
  padding: 12px 18px;         /* roomier vertical padding so rows breathe like the chase rows */
  flex: 0 0 auto;             /* fixed-height rows (no stretching) so the list scrolls cleanly */
  min-height: 56px;
  border-top: 1px solid rgba(0,0,0,0.06);
  cursor: pointer;
  transition: background 0.12s;
}
.ts-row:first-child { border-top: 0; }
.ts-row:hover { background: rgba(0,0,0,0.04); }
.ts-rank {
  font-family: "IBM Plex Sans", sans-serif; font-weight: 700;
  font-size: 17px; color: var(--text-mute); letter-spacing: 0.06em;
}
.ts-prod { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ts-thumb-img {
  width: 32px; height: 32px; object-fit: contain; flex-shrink: 0;
  background: #fff; border: 1px solid var(--hairline); border-radius: 4px; padding: 2px;
}
.ts-thumb-img.noimg { background: #f3f4f6; }
.ts-title-text {
  font-size: 12px; line-height: 1.2; font-weight: 500; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-width: 0;
}
/* Sold = total demand today (incl. unpicked); Todo = remaining work; Packed = truly done.
   Math: SOLD = TODO + PACKED. */
.ts-sold {
  font-size: 17px; font-weight: 800; color: var(--amber);
  font-variant-numeric: tabular-nums; text-align: right; line-height: 1;
}
.ts-todo {
  font-size: 17px; font-weight: 700; color: var(--bad);
  font-variant-numeric: tabular-nums; text-align: right; line-height: 1;
}
.ts-todo.zero { color: var(--text-mute); font-weight: 500; }
.ts-packed {
  font-size: 17px; font-weight: 800; color: var(--ok);
  font-variant-numeric: tabular-nums; text-align: right; line-height: 1;
}
.lb-chase-head > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lb-chase-head > span:nth-child(1) { text-align: left;  }
.lb-chase-head > span:nth-child(2) { text-align: left;  }
.lb-chase-head > span:nth-child(3) { text-align: right; }
.lb-chase-head > span:nth-child(4) { text-align: right; }
.lb-chase-head > span:nth-child(5) { text-align: right; }
.lb-chase-head > span:nth-child(6) { text-align: right; }
.lb-chase-bulk { text-align: right; color: var(--text-mute); font-variant-numeric: tabular-nums; }

.lb-chase {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;     /* rows sit under the header; bulk is pinned to the bottom */
  background: var(--surface);
  min-height: 0;
}
.lb-chase-row {
  display: grid;
  grid-template-columns: 52px 1fr 88px 68px 84px 66px;
  align-items: center;
  column-gap: 16px;
  padding: 0 26px;
  position: relative;
  flex: 1;
  min-height: 0;
  max-height: 42px;                /* cap so a short chase list (e.g. 2 packers) doesn't over-stretch */
}
.lb-chase-row + .lb-chase-row { border-top: 1px solid rgba(0,0,0,0.06); }
.lb-chase-row:hover { background: rgba(255,159,28,0.05); }

.lb-chase-rank {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #000000;
}
.lb-chase-name {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #0A0C12;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-chase-bar {
  height: 8px;
  background: rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
}
.lb-chase-bar > i {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: linear-gradient(90deg, var(--amber-deep), var(--amber));
  transition: width 320ms ease-out;
}
.lb-chase--gold .lb-chase-bar > i {
  background: linear-gradient(90deg, #7C2D12, var(--prime));
}
.lb-chase-orders {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #0A0C12;
  text-align: right;
}
.lb-chase-gap {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--bad);
  text-align: right;
}
.lb-chase-time {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #000000;
  text-align: right;
  white-space: nowrap;
}

/* Bulk Printed — automated dispatches; a full-width muted row grouped at the bottom
   of the packer list, visually distinct (grey, no rank) from the competing packers. */
.lb-bulk {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 26px;
  background: rgba(0,0,0,0.05);
  border-top: 1.5px solid rgba(0,0,0,0.12);
  font-family: "IBM Plex Sans", sans-serif;
  flex-shrink: 0;
  margin-top: auto;                /* stay anchored to the bottom of the card */
}
.lb-bulk-ico { width: 24px; height: 24px; color: var(--text); flex-shrink: 0; }
.lb-bulk-name {
  font-size: 17px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text);
}
.lb-bulk-count {
  margin-left: auto;
  font-size: 17px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.lb-bulk-unit {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text);
}
/* hide the stat sub-labels (orders / lead vs #2 / avg time) — values speak for themselves */
.lb-hero-body .lb-stat-key { display: none; }

/* fastest-time flag — sized down + height-pinned so it never grows the row
   or break the right-aligned time column */
.fire {
  font-size: 0.95em;
  line-height: 1;
  vertical-align: middle;
}

/* ---------- detail strip ------------------------------------------------ */
.t {
  width: 100%;
  border-collapse: collapse;
}
.t thead th {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(194,65,12,0.35);
  text-align: right;
  background: transparent;
  white-space: nowrap;
}
.t thead th.l { text-align: left; }
.t tbody td {
  padding: 15px 20px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  border-bottom: 1px solid var(--hairline);
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}
.t tbody td.l { text-align: left; }
.t tbody tr:last-child td { border-bottom: 0; }
.t tbody tr:hover td { background: rgba(255,159,28,0.04); }

.t td.packer, .t td.courier {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.t td.packer a, .t td.courier a {
  color: var(--text);
  border-bottom: 1px dotted var(--rule);
}
.t td.packer a:hover, .t td.courier a:hover { color: var(--amber); border-bottom-color: var(--amber); }
.t .dim   { color: var(--text-dim); }
.t .mute  { color: var(--text-mute); }
.t .amber { color: var(--amber); }
.t .ok    { color: var(--ok); }
.t .warn  { color: var(--warn); }
.t .bad   { color: var(--bad); }
.t .prime { color: var(--prime); }
.t .cyan  { color: var(--cyan); }
.t .empty {
  text-align: center;
  color: var(--text-mute);
  padding: 32px 0;
  font-family: "IBM Plex Sans", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.t .num { font-weight: 600; }
.t .strong { color: var(--text); font-weight: 700; }
.t .big { font-size: 18px; }

/* Detail table on dashboard — denser */
.detail-table thead th { padding: 9px 14px 7px; }
.detail-table tbody td { padding: 7px 14px; font-size: 13px; }
.detail-table tbody td.packer { font-size: 16px; }

/* ---------- bottom dock ------------------------------------------------- */
.dock {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 76px;
  background: var(--surface);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
          backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--hairline);
  border-bottom: 1px solid var(--amber);
}
.dock .cell {
  display: grid; align-content: center;
  padding: 0 24px;
  border-right: 1px solid var(--hairline);
}
.dock .cell:last-child { border-right: 0; }
.dock .k {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.dock .v {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.dock .v.amber     { color: var(--amber); }
.dock .v.tone-ok   { color: var(--ok); }
.dock .v.tone-warn { color: var(--warn); }
.dock .v.tone-bad  { color: var(--bad); }
.dock .v.tone-dim  { color: var(--text-mute); }
.dock .unit-sm {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-mute);
  letter-spacing: 0.16em;
  margin-left: 8px;
  vertical-align: 2px;
  text-transform: uppercase;
}

/* =========================================================================
   PILLS / TAGS
   ========================================================================= */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 11px 20px;
  border: 1px solid var(--rule);
  color: var(--text-dim);
  background: var(--bg-1);
}
.pill.ok    { color: var(--ok);    border-color: rgba(34,197,94,0.35);  background: rgba(34,197,94,0.06); }
.pill.warn  { color: var(--warn);  border-color: rgba(255,176,0,0.35);  background: rgba(255,176,0,0.06); }
.pill.bad   { color: var(--bad);   border-color: rgba(239,68,68,0.35);  background: rgba(239,68,68,0.06); }
.pill.prime { color: #EF4444; border-color: #EF4444; border-width: 2px; background: #FFFFFF; font-weight: 700; }
.pill.cyan  { color: var(--cyan);  border-color: rgba(86,200,255,0.35); background: rgba(86,200,255,0.06); }
.pill.amber { color: var(--amber); border-color: rgba(255,159,28,0.4);  background: rgba(255,159,28,0.08); }

/* =========================================================================
   LOGIN
   ========================================================================= */
/* Simple, calm login — matches the dashboard's clean white-card-on-greige look */
.login-body { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.login-card {
  width: min(380px, 100%);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 4px;
}
.login-head {
  padding: 28px 28px 18px;
  text-align: center;
}
.login-logo {
  display: block;
  width: 140px;
  height: auto;
  margin: 0 auto 8px;
  object-fit: contain;
}
.login-sub {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.login-form {
  padding: 6px 28px 28px;
  display: grid;
  gap: 14px;
}
.login-form label { display: grid; gap: 5px; }
.login-form .lab {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.login-form input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-1);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  color: var(--text);
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  outline: 0;
  transition: border-color 120ms;
}
.login-form input:focus { border-color: var(--amber); }
.login-form .err {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 13px;
  color: var(--bad);
  padding: 8px 10px;
  background: rgba(239,68,68,0.06);
  border-radius: 3px;
}
.login-form button {
  margin-top: 4px;
  padding: 11px 16px;
  border: 0;
  border-radius: 4px;
  background: var(--amber);
  color: #fff;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 120ms;
}
.login-form button:hover { background: var(--amber-hi); }
.login-foot {
  padding: 14px 32px;
  border-top: 1px solid var(--hairline);
  background: var(--bg-1);
  display: flex; justify-content: space-between; align-items: center;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* =========================================================================
   DRILL-DOWN PAGES
   ========================================================================= */
.page {
  padding: var(--gutter);
  display: grid; gap: var(--gap);
  position: relative; z-index: 2;
}
.page .crumb {
  display: flex; align-items: baseline; gap: 18px;
  padding: 6px 4px 0;
}
.page .crumb .code {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--amber);
}
.page .crumb h1 {
  margin: 0;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.page .crumb .sub {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.page .crumb .right {
  margin-left: auto;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.grid-3  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap); }
.grid-2-1{ display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap); }
.grid-1-2{ display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--gap); }

.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap);
}
.stat {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 16px 20px;
}
.stat .label {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.stat .label .code {
  font-family: "IBM Plex Sans", sans-serif;
  color: var(--amber);
  font-weight: 600;
  margin-right: 8px;
}
.stat .v {
  margin-top: 6px;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 42px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat .v.amber { color: var(--amber); }
.stat .v.ok { color: var(--ok); }
.stat .v.bad { color: var(--bad); }
.stat .sub {
  margin-top: 4px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* in-cell sparkbar */
.bar-cell { position: relative; padding-right: 24px !important; }
.spark {
  display: inline-block;
  vertical-align: middle;
  height: 6px;
  background: linear-gradient(90deg, var(--amber), var(--amber-deep));
  margin-right: 8px;
}

/* form controls (orders page) */
.controls {
  display: flex; gap: 10px; align-items: center;
}
.controls select, .controls input[type=text] {
  background: var(--bg);
  border: 1px solid var(--rule);
  color: var(--text);
  padding: 8px 12px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  outline: 0;
}
.controls label {
  display: flex; align-items: center; gap: 6px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1500px) {
  .hero-pri-figure .num { font-size: 200px; }
  .tile .figure { font-size: 80px; }
  .courier-row .num { font-size: 30px; }
}

/* drill-down page helpers (orders/packers/etc) — keep these for non-dash pages */
@media (max-width: 1100px) {
  .stat-row, .grid-2, .grid-3, .grid-2-1, .grid-1-2 { grid-template-columns: 1fr; }
  .dock { grid-template-columns: 1fr 1fr; height: auto; }
  .dock .cell { padding: 10px 18px; border-bottom: 1px solid var(--hairline); border-right: 1px solid var(--hairline); }
}

/* =========================================================================
   MOBILE DASHBOARD MODE  ·  ≤1100px (phones, landscape phones, small tablets)
   The TV-first design is a JS-scaled fixed canvas (position:absolute + transform).
   fitDash() detects ≤1100px, clears its inline width/height/transform/left/top,
   and adds `.mobile-dash` to <html>. Here we unlock .dash into a normal, vertically
   -flowing, legible responsive layout: every section stacks, the rail wraps, the
   hero numbers + leaderboards + couriers + top-sellers scale to phone sizes, and
   the page scrolls naturally. Desktop/4K (>1100px) is untouched.
   ========================================================================= */
@media (max-width: 1100px) {

  /* unlock the page + canvas — let the document scroll vertically */
  html.mobile-dash,
  html.mobile-dash body.dash-body { overflow: visible; height: auto; }
  html.mobile-dash body.dash-body { -webkit-text-size-adjust: 100%; }

  /* Hamburger settings button: on desktop it sits at top/right:12 (same as the
     rail), so on mobile they overlap the rail's top-right corner. Inset it
     further so it floats cleanly inside the rail with breathing room. */
  .mobile-dash .settings-btn { top: 22px; right: 22px; width: 36px; height: 36px; }
  .mobile-dash .settings-btn svg { width: 20px; height: 20px; }

  .mobile-dash .dash {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    overflow: visible !important;
    display: block;
    padding: 14px;
    z-index: auto;
  }

  /* ---------- TOP RAIL → wrapped metric cards ---------- */
  .mobile-dash .rail {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    min-height: 0;
    gap: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    margin-bottom: 14px;
    position: relative;        /* anchors the absolute Last Refreshed pill */
  }
  /* brand spans the full top row, centered */
  .mobile-dash .rail .seg.brand {
    grid-column: 1 / -1;
    justify-content: center;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }
  .mobile-dash .rail .brand-logo-img { height: 54px; min-height: 54px; }
  .mobile-dash .rail .seg {
    border-right: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    padding: 12px 10px;
    min-height: 78px;
  }
  .mobile-dash .rail .seg.cell { gap: 3px; }
  .mobile-dash .rail .seg.cell:nth-child(2n+1) { border-right: 1px solid var(--hairline); }
  .mobile-dash .rail .seg.cell .k { font-size: 11px; letter-spacing: 0.12em; }
  .mobile-dash .rail .seg.cell .v { font-size: 34px; }
  .mobile-dash .rail .seg.cell .unit-sm { font-size: 11px; margin: 2px auto 0; }
  /* Last Refreshed → tiny floating label in the top-left of the brand/logo area.
     No colour bg, no big number — just a discreet "Last refreshed HH:MM" tag. */
  .mobile-dash .rail .seg.cell:last-child {
    position: absolute;
    top: 8px;
    left: 10px;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 5px;
    padding: 0;
    min-height: 0;
    background: transparent !important;
    border: 0 !important;
    animation: none;
  }
  .mobile-dash .rail .seg.cell:last-child .k {
    font-size: 9px; font-weight: 600; letter-spacing: 0.06em;
    color: var(--text-mute) !important;
  }
  .mobile-dash .rail .seg.cell:last-child .v {
    font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--text-mute) !important;
  }

  /* ---------- LIVE GRID → single vertical column ---------- */
  .mobile-dash .live-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: auto;
    min-height: 0;
  }
  /* logical mobile reading order: queue → couriers → top sellers → leaderboards */
  .mobile-dash .live-grid .hero-left   { order: 1; }
  .mobile-dash .live-grid .hero-right  { order: 2; }
  .mobile-dash .live-grid .topsellers  { order: 3; }
  .mobile-dash .live-grid .leaders     { order: 4; }
  .mobile-dash .live-grid > * {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 0;
    overflow: visible !important;
  }
  .mobile-dash .live-grid .hero-right,
  .mobile-dash .live-grid .leaders { overflow: visible !important; }

  /* ---------- HERO (Today's Queue) ---------- */
  .mobile-dash .cta-banner {
    font-size: 17px !important;
    padding: 11px 14px !important;
    margin-bottom: 14px !important;
    letter-spacing: 0.04em;
  }
  .mobile-dash .hero-pri {
    padding: 16px 16px 18px !important;
    gap: 14px !important;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .mobile-dash .hero-pri-head h1 { font-size: 18px !important; }
  .mobile-dash .hero-pri-head .eyebrow-r { font-size: 15px; }
  .mobile-dash .hero-pri-head .eyebrow-r strong { font-size: 22px; }
  .mobile-dash .progress-block .plabels { font-size: 12px; }

  /* 3 hero cells → wrap into a row that stacks gracefully */
  /* Mobile pack-queue layout: two cells on top (Orders To Pick + Sent Packing),
     and Packed Today spanning the full width below — gives Packed its own row
     so the numbers stay big enough to read at a glance. */
  .mobile-dash .hero-two-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: auto;
    gap: 0 !important;
  }
  .mobile-dash .hero-two-grid .hero-cell {
    padding: 6px 6px 8px !important;
    gap: 8px !important;
  }
  /* Cell 2 (Sent Packing) is now the rightmost on row 1 — drop its right border. */
  .mobile-dash .hero-two-grid > .hero-cell:nth-child(2) { border-right: 0; }
  /* Packed Today is the 3rd cell — span both columns on its own row.
     Layout stays identical to the other two (label / number / pills, all centered)
     so the row reads the same; it just gets a hairline divider above it.
     We also tighten things so this row hugs its content instead of inheriting
     the 1fr stretch + 50px sub-min-height baked into the desktop layout: */
  .mobile-dash .hero-two-grid > .hero-cell:nth-child(3) {
    grid-column: 1 / -1;
    border-right: 0;
    border-top: 1px solid var(--hairline);
    padding: 8px 6px 8px !important;
    gap: 4px !important;
    /* Hug content rows — desktop uses `auto 1fr auto` which makes the cell
       stretch to fill leftover height; we don't want that on its own row. */
    grid-template-rows: auto auto auto;
  }
  /* The desktop `:has(.pill)` rule sets `min-height: 50px` on ALL .hero-cell-sub
     inside the grid (because row 1 has pills). On mobile the Packed Today sub is
     usually empty (no packed prime/multi yet) — drop the min-height so we don't
     leave a 50px void below the 0. */
  .mobile-dash .hero-two-grid > .hero-cell:nth-child(3) .hero-cell-sub {
    min-height: 0 !important;
  }
  /* And let the whole grid hug its rows rather than stretching to fill hero-pri. */
  .mobile-dash .hero-two-grid { align-content: start; }
  /* hero-pri is flex:1 inside hero-left on desktop so it can fill the panel;
     on mobile we want it to shrink to content (no white void at the bottom). */
  .mobile-dash .live-grid .hero-left > .hero-pri { flex: 0 0 auto; }
  .mobile-dash .hero-two-grid .hero-cell-label {
    font-size: 11px !important;
    letter-spacing: 0.04em;
    white-space: normal;
    line-height: 1.15;
    min-height: 2.3em;
    display: flex; align-items: center; justify-content: center;
  }
  /* Mobile: float the ⓘ marker as an absolute badge in the top-right corner of the
     clickable cell so it doesn't affect the label/number layout. */
  .mobile-dash .hero-two-grid .hero-cell.clickable { position: relative; }
  .mobile-dash .hero-two-grid .hero-cell.clickable .hero-cell-label {
    padding-left: 14px; padding-right: 14px;   /* reserve symmetric space so the centred label doesn't reach the ⓘ */
  }
  .mobile-dash .hero-two-grid .hero-cell.clickable .hero-cell-label::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    opacity: 0.5;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2229' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
  }
  .mobile-dash .hero-two-grid .hero-cell-num { font-size: clamp(38px, 13vw, 64px) !important; }
  .mobile-dash .hero-left:has(.cta-banner) .hero-two-grid .hero-cell-num { font-size: clamp(34px, 11vw, 56px) !important; }
  .mobile-dash .hero-two-grid .hero-cell-sub { min-height: 0; flex-wrap: wrap; }
  .mobile-dash .hero-two-grid .hero-cell-sub .pill {
    font-size: 13px !important;
    padding: 4px 9px !important;
    gap: 4px !important;
  }
  .mobile-dash .hero-two-grid .hero-cell-sub .pill .pill-ico {
    width: 18px !important; height: 18px !important; margin-right: 4px !important;
  }
  /* drop the desktop :has() compression overrides that fight the mobile sizes */
  .mobile-dash .hero-left:has(.cta-banner) .hero-pri { padding: 16px 16px 18px; gap: 12px; }
  .mobile-dash .hero-left:has(.cta-banner) .hero-two-grid .hero-cell { padding: 6px 6px 8px; gap: 8px; }
  .mobile-dash .hero-left:has(.cta-banner) .hero-two-grid .hero-cell-label { font-size: 11px; }

  /* ---------- COURIERS TABLE ---------- */
  .mobile-dash .hero-right { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mobile-dash .courier-stack { padding: 14px 14px 16px; }
  .mobile-dash .courier-stack > .t-courier { margin: 0; }
  .mobile-dash .courier-title { font-size: 18px; padding-left: 4px; margin: 0 0 10px; }
  .mobile-dash .t-courier { table-layout: auto; }
  .mobile-dash .t-courier thead th { font-size: 12px; padding: 6px 4px; letter-spacing: 0.04em; }
  .mobile-dash .t-courier thead th.l { width: auto; }
  .mobile-dash .t-courier tbody td { font-size: 18px; padding: 9px 4px; }
  .mobile-dash .t-courier tbody td:not(.name) { font-size: 22px; }
  .mobile-dash .t-courier td.name { padding: 9px 4px; }
  .mobile-dash .t-courier .brand-chip {
    min-width: 80px; width: 80px; height: 36px; margin-right: 10px; padding: 0 8px;
  }
  .mobile-dash .t-courier .brand-logo { max-height: 24px; max-width: 64px; }
  .mobile-dash .t-courier .is-mono .brand-logo { max-height: 18px; }
  .mobile-dash .t-courier .brand-name { font-size: 18px; letter-spacing: 0; }
  /* neutralise the desktop busy-day :has() compression — mobile sizing wins */
  .mobile-dash .hero-right:has(.t-courier tbody tr:nth-child(6)) .brand-chip { height: 36px; min-width: 80px; width: 80px; }
  .mobile-dash .hero-right:has(.t-courier tbody tr:nth-child(6)) .brand-name { font-size: 18px; }
  .mobile-dash .hero-right:has(.t-courier tbody tr:nth-child(6)) tbody td:not(.name) { font-size: 18px; }

  /* ---------- TOP SELLERS → wrapped 3-up grid ---------- */
  .mobile-dash .topsellers { padding: 14px; gap: 12px; }
  .mobile-dash .topsellers-title { font-size: 17px; }
  .mobile-dash .topsellers-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  /* Top Products on mobile — tighter grid so the product title has room next to the
     (25%) bigger thumbnail, and header columns line up exactly with the row columns. */
  .mobile-dash .ts-thumb-img { width: 40px; height: 40px; }
  .mobile-dash .ts-row,
  .mobile-dash .lb-topsellers .lb-chase-head {
    grid-template-columns: 28px 1fr 48px 48px 52px;
    column-gap: 6px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .mobile-dash .ts-row { padding-top: 8px; padding-bottom: 8px; min-height: 56px; }
  .mobile-dash .lb-topsellers .lb-chase-head { padding-top: 3px; padding-bottom: 3px; }
  .mobile-dash .ts-rank { font-size: 15px; }
  .mobile-dash .ts-title-text { font-size: 12px; -webkit-line-clamp: 2; }
  .mobile-dash .ts-sold, .mobile-dash .ts-todo, .mobile-dash .ts-packed { font-size: 16px; }

  /* ---------- LEADERBOARDS → stacked full-width cards ---------- */
  .mobile-dash .leaders {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    height: auto;
  }
  .mobile-dash .lb {
    display: block;
    height: auto;
  }
  /* column header strip */
  .mobile-dash .lb-chase-head {
    grid-template-columns: 30px 1fr 56px 50px 64px;
    column-gap: 8px;
    padding: 0 14px;
    height: 30px; max-height: 30px;
    font-size: 12px; letter-spacing: 0.02em;
  }
  /* Mobile champion hero — single row aligned to chase columns: crown · name · 3 stats */
  .mobile-dash .lb-hero { padding: 10px 14px 12px; display: block; }
  .mobile-dash .lb-hero-body {
    display: grid;
    grid-template-columns: 30px 1fr 56px 50px 64px;
    grid-template-rows: auto;
    column-gap: 8px;
    align-items: center;
  }
  .mobile-dash .lb-hero-body .lb-hero-stamp { width: 26px; justify-self: start; }
  .mobile-dash .lb-hero-body .lb-hero-name {
    padding-left: 0;
    font-size: clamp(18px, 5.5vw, 24px);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mobile-dash .lb-hero-body .lb-stat { text-align: right; justify-items: end; }
  .mobile-dash .lb-stat { gap: 2px; }
  .mobile-dash .lb-stat-val { font-size: 18px; }
  .mobile-dash .lb-stat-key { font-size: 9px; letter-spacing: 0.1em; }
  .mobile-dash .lb-stat--lead { padding-left: 0; border-left: 0; }

  /* chase rows */
  .mobile-dash .lb-chase-row {
    grid-template-columns: 30px 1fr 56px 50px 64px;
    column-gap: 8px;
    padding: 0 14px;
    flex: none;
    min-height: 40px;
    max-height: none;
    height: 40px;
  }
  .mobile-dash .lb-chase-rank { font-size: 14px; }
  .mobile-dash .lb-chase-name { font-size: 15px; letter-spacing: 0.01em; }
  .mobile-dash .lb-chase-orders { font-size: 18px; }
  .mobile-dash .lb-chase-gap { font-size: 13px; }
  .mobile-dash .lb-chase-time { font-size: 13px; }
  .mobile-dash .lb-bulk { padding: 8px 14px; }
  .mobile-dash .lb-bulk-name { font-size: 14px; }
  .mobile-dash .lb-bulk-count { font-size: 17px; }
  .mobile-dash .lb-bulk-unit { font-size: 10px; }
  .mobile-dash .lb-empty { padding: 36px 16px; }
}

/* ---------- NARROW PHONES (≤430px): tighten further ---------- */
@media (max-width: 430px) {
  .mobile-dash .dash { padding: 12px; }
  .mobile-dash .rail .seg.cell .v { font-size: 30px; }
  .mobile-dash .hero-two-grid .hero-cell-num { font-size: clamp(30px, 12vw, 52px) !important; }
  .mobile-dash .topsellers-row { grid-template-columns: repeat(2, 1fr); }
  .mobile-dash .lb-chase-head,
  .mobile-dash .lb-chase-row,
  .mobile-dash .lb-hero-body { grid-template-columns: 22px 1fr 56px 44px 66px; column-gap: 4px; padding-left: 12px; padding-right: 12px; }
  .mobile-dash .lb-hero { padding: 8px 0 10px; }
  .mobile-dash .lb-hero-body { padding-top: 0; padding-bottom: 0; }
  .mobile-dash .lb-hero-name { font-size: clamp(20px, 7vw, 28px); }
  .mobile-dash .lb-chase-head { font-size: 11px; letter-spacing: 0; }
  .mobile-dash .lb-hero-body .lb-stat-val { font-size: 16px; white-space: nowrap; }
  .mobile-dash .lb-hero-body .fire { font-size: 0.85em; margin-right: -2px; }

  /* courier table — compress so all 5 columns fit a 320–430px card with no overflow */
  .mobile-dash .courier-stack { padding: 12px 10px 14px; }
  .mobile-dash .t-courier thead th { font-size: 11px; letter-spacing: 0; padding: 6px 2px; }
  .mobile-dash .t-courier tbody td { font-size: 16px; padding: 7px 2px; }
  .mobile-dash .t-courier tbody td:not(.name) { font-size: 20px; }
  .mobile-dash .t-courier td.name { padding: 7px 2px; }
  .mobile-dash .t-courier .brand-chip {
    min-width: 64px; width: 64px; height: 30px; margin-right: 7px; padding: 0 6px;
  }
  .mobile-dash .t-courier .brand-logo { max-height: 20px; max-width: 50px; }
  .mobile-dash .t-courier .is-mono .brand-logo { max-height: 15px; }
  .mobile-dash .t-courier .brand-name { font-size: 16px; }
  .mobile-dash .hero-right:has(.t-courier tbody tr:nth-child(6)) .brand-chip { height: 30px; min-width: 64px; width: 64px; }
  .mobile-dash .hero-right:has(.t-courier tbody tr:nth-child(6)) .brand-name { font-size: 16px; }
  .mobile-dash .hero-right:has(.t-courier tbody tr:nth-child(6)) tbody td:not(.name) { font-size: 20px; }
}

/* ---------- TINY PHONES (≤340px): final squeeze on the courier table ---------- */
@media (max-width: 340px) {
  .mobile-dash .t-courier .brand-name { font-size: 11px; letter-spacing: -0.01em; }
  .mobile-dash .t-courier td.name { white-space: normal; }
  .mobile-dash .t-courier .brand-chip { min-width: 34px; width: 34px; margin-right: 4px; }
}