/* ============================================================================
   Akunding Store — Admin control panel
   ----------------------------------------------------------------------------
   Style:  "Quiet Instrument". A money console for an owner who opens it twenty
           times a day to answer one question: is the shop still working.

           Neutral near-black — no blue cast, because a blue-tinted dark theme
           is the house style of every generated dashboard. Exactly ONE accent
           (warm gold), spent only on things you can act on: links, focus, the
           active tab. Everything else earns emphasis through size, weight and
           space, never through hue.

           Large figures are set LIGHT (weight 300) and tightly tracked. Heavy
           neon numerals read urgent; light numerals at size read expensive,
           and nothing here is urgent except the things that actually are.

           Hairlines instead of glows. Status colour is desaturated and means
           one thing each: green settled, amber needs you, red went wrong.

   Tokens: 3 layers — primitive scale -> semantic aliases -> component vars.
           Legacy names (--green/--red/--yellow/--orange/--sky/--accent/--fs-xs)
           are preserved verbatim: templates carry inline `var(--fs-xs)` and
           statistics.js reads --sky/--yellow/--red for chart series.

   Stack:  Pure CSS, no build step. Fonts: IBM Plex Sans + IBM Plex Mono,
           loaded in base.html. Plex over Inter deliberately: Inter is the
           default face of generated UI, Plex was drawn for engineering data.
   ========================================================================== */

/* ============================================================================
   1. TOKENS — primitive palette
   ========================================================================== */
:root {
  /* --- ink / surface scale (true neutral, a whisper warm) --- */
  --ink-1000: #060607;   /* page void */
  --ink-950:  #0b0b0c;   /* app background */
  --ink-900:  #0f0f11;   /* base surface */
  --ink-850:  #121214;   /* card / panel */
  --ink-800:  #17171a;   /* raised panel */
  --ink-750:  #1d1d21;   /* control / chip */
  --ink-700:  #26262b;   /* hover control */
  --ink-650:  #303036;   /* hairline strong */
  --ink-600:  #3d3d45;   /* divider on hover */
  --ink-500:  #55555f;   /* faint text */
  --ink-400:  #71717a;   /* placeholder — 4.6:1 on --ink-950 */
  --ink-300:  #8e8e99;   /* muted text */
  --ink-200:  #b4b4bd;   /* secondary text */
  --ink-100:  #d9d9de;   /* body text */
  --ink-050:  #f2f2f4;   /* figures / max contrast */

  /* --- the one accent: warm gold. Currency, not brand decoration. --- */
  --gold-600: #b98a45;
  --gold-500: #cfa15f;
  --gold-400: #e0b87e;
  --gold-300: #f0d3a6;

  /* --- status: desaturated, semantic, never decorative --- */
  --green:     #74ab86;   /* settled / delivered */
  --green-400: #5d9971;
  --red:       #c9797c;   /* failed / cancelled */
  --red-500:   #b9666a;
  --yellow:    #c9a75e;   /* needs attention */
  --amber-300: #dcbe7d;
  --orange:    #c58f62;
  --sky:       #7f97b3;   /* neutral informational */
  --slate-pill: #85858f;

  /* money keeps its own restrained voice */
  --money-500: var(--green);
  --money-400: var(--green);
  --money-300: var(--green);

  /* tinted status backgrounds (alpha, so they layer on any surface) */
  --t-green:     rgba(116, 171, 134, .12);
  --t-green-bd:  rgba(116, 171, 134, .30);
  --t-red:       rgba(201, 121, 124, .12);
  --t-red-bd:    rgba(201, 121, 124, .32);
  --t-amber:     rgba(201, 167, 94, .12);
  --t-amber-bd:  rgba(201, 167, 94, .32);
  --t-brand:     rgba(207, 161, 95, .12);
  --t-brand-bd:  rgba(207, 161, 95, .34);
  --t-sky:       rgba(127, 151, 179, .12);
  --t-sky-bd:    rgba(127, 151, 179, .30);
  --t-slate:     rgba(133, 133, 143, .10);
  --t-slate-bd:  rgba(133, 133, 143, .24);

/* ============================================================================
   2. TOKENS — semantic aliases (legacy names preserved)
   ========================================================================== */
  --bg:             var(--ink-950);
  --panel:          var(--ink-850);
  --panel-2:        var(--ink-800);
  --surface-raised: var(--ink-800);
  --border:         rgba(255, 255, 255, .07);
  --border-strong:  rgba(255, 255, 255, .12);
  --border-input:   rgba(255, 255, 255, .11);
  --text:           var(--ink-100);
  --text-strong:    var(--ink-050);
  --muted:          var(--ink-300);
  --muted-2:        var(--ink-400);
  --accent:         var(--gold-400);
  --accent-strong:  var(--gold-500);

  --ring:       rgba(224, 184, 126, .55);
  --ring-money: rgba(116, 171, 134, .45);

  /* Kept as tokens because older markup references them. Deliberately flat —
     gradients were the loudest part of the look this replaced. */
  --grad-brand:      var(--gold-500);
  --grad-brand-soft: var(--gold-500);
  --grad-money:      var(--green);
  --grad-warn:       var(--yellow);
  --grad-surface:    none;
  --grad-text:       none;

/* ============================================================================
   3. TOKENS — elevation, shape, spacing, motion, type
   ========================================================================== */
  /* Every shadow carries a real offset and a soft blur. No zero-offset halos. */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, .45);
  --shadow-md: 0 12px 28px -14px rgba(0, 0, 0, .75), 0 3px 8px -4px rgba(0, 0, 0, .5);
  --shadow-lg: 0 34px 74px -28px rgba(0, 0, 0, .85), 0 10px 24px -14px rgba(0, 0, 0, .6);
  --shadow-glow: 0 10px 28px -14px rgba(0, 0, 0, .8);

  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 7px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-pill: 999px;

  --s-0: 2px;   --s-1: 4px;   --s-2: 8px;   --s-3: 12px;
  --s-4: 16px;  --s-5: 22px;  --s-6: 30px;  --s-7: 42px;  --s-8: 60px;

  /* Exponential ease-out from an already-visible default. */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 110ms var(--ease);
  --t-mid:  190ms var(--ease);
  --t-slow: 340ms var(--ease);

  --fs-xs:  11px;   /* referenced inline from templates — do not rename */
  --fs-sm:  12.5px;
  --fs-md:  13.5px;
  --fs-base: 14.5px;
  --fs-lg:  17px;
  --fs-xl:  21px;
  --fs-2xl: 28px;
  --fs-3xl: 40px;
  --fs-4xl: 56px;

  --font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw: 1360px;
}

/* ============================================================================
   4. BASE / RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--ink-700) transparent;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums slashed-zero;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--gold-300); }

b, strong { font-weight: 600; color: var(--ink-050); }

p { margin: 0 0 var(--s-3); }

small { font-size: var(--fs-sm); }

code {
  font-family: var(--font-mono);
  font-size: .92em;
  color: var(--ink-200);
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 1px 5px;
}

img { max-width: 100%; }

::selection { background: rgba(207, 161, 95, .28); color: var(--ink-050); }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--ink-700);
  border: 3px solid var(--bg);
  border-radius: var(--r-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-600); }

/* ============================================================================
   5. TOPBAR + NAV
   ========================================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: 0 var(--s-5);
  height: 56px;
  background: rgba(11, 11, 12, .88);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--ink-050);
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--gold-400);
}
.brand-mark svg { display: block; width: 100%; height: 100%; }
.brand-name { font-weight: 600; }
.brand-tag {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-400);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
  padding: 2px 6px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav a {
  position: relative;
  padding: 7px 11px;
  border-radius: var(--r-sm);
  color: var(--ink-300);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav a:hover { color: var(--ink-050); background: rgba(255, 255, 255, .045); }

.nav a.active { color: var(--ink-050); }
.nav a.active::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: -1px;
  height: 1.5px;
  background: var(--gold-400);
  border-radius: var(--r-pill);
}

.nav a.logout { margin-left: auto; color: var(--ink-400); }
.nav a.logout:hover { color: var(--red); background: var(--t-red); }

.nav-toggle {
  display: none;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.nav-toggle:hover { background: rgba(255, 255, 255, .05); }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 15px;
  height: 1.5px;
  background: var(--ink-200);
  border-radius: var(--r-pill);
  margin: 0 auto;
  transition: transform var(--t-mid);
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before { content: ""; position: absolute; top: -5px; }
.nav-toggle-bars::after  { content: ""; position: absolute; top:  5px; }

/* ============================================================================
   6. LAYOUT + TYPOGRAPHY
   ========================================================================== */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s-6) var(--s-5) var(--s-8);
}

/* More space above a heading than below it. */
h1 {
  margin: 0 0 var(--s-5);
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: -0.028em;
  color: var(--ink-050);
  line-height: 1.15;
}
h1 + p.muted { margin-top: calc(var(--s-4) * -1); max-width: 72ch; }

h2 {
  margin: var(--s-7) 0 var(--s-3);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-050);
}

h3 {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-050);
}

.muted  { color: var(--muted); }
.ok     { color: var(--green); }
.err, .error { color: var(--red); font-weight: 500; }
.success { color: var(--green); font-weight: 500; }
.err::before { content: ""; }

.empty-state {
  padding: var(--s-7) var(--s-4);
  text-align: center;
  color: var(--muted-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  font-size: var(--fs-md);
}
.empty-state::before { content: ""; }

/* ============================================================================
   7. FIGURES  (was: stat cards)
   ----------------------------------------------------------------------------
   Not nine equal boxes. A lead rank for money, a quieter rank for counts, and
   a hairline between them instead of a border on every side. Cards as page
   structure flatten hierarchy: the owner needs revenue and "1 pending order"
   to look nothing alike.
   ========================================================================== */
/* One row = one equal-column rail. A shared 12-col span left a ragged gap on
   Statistics (3 leads + 5 secondaries = 10/12) and made hairlines look
   staggered against the row above. Each .stats-row fills edge-to-edge with
   equal 1fr tracks; cross-row divider alignment is not forced (3≠5). */
.stats-grid {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--s-6);
  background: var(--panel);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(var(--stats-cols, 3), minmax(0, 1fr));
}
.stats-row--3 { --stats-cols: 3; }
.stats-row--4 { --stats-cols: 4; }
.stats-row--5 { --stats-cols: 5; }
.stats-row--6 { --stats-cols: 6; }

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: var(--s-4);
  background: var(--panel);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  transition: background var(--t-fast);
  animation: figure-in var(--t-slow) var(--ease) both;
}
.stats-row > .stat:last-child { border-right: 0; }
.stat::before, .stat::after { content: none; }
.stat:hover { background: var(--panel-2); }
.stat:hover::after { content: none; }

/* The single authored motion moment: figures rise once, in sequence, on load. */
@keyframes figure-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
.stat:nth-child(1) { animation-delay: 0ms; }
.stat:nth-child(2) { animation-delay: 26ms; }
.stat:nth-child(3) { animation-delay: 52ms; }
.stat:nth-child(4) { animation-delay: 78ms; }
.stat:nth-child(5) { animation-delay: 104ms; }
.stat:nth-child(6) { animation-delay: 130ms; }
.stat:nth-child(7) { animation-delay: 156ms; }
.stat:nth-child(8) { animation-delay: 182ms; }
.stat:nth-child(9) { animation-delay: 208ms; }

.stat-label {
  order: 1;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-400);
  /* Tracked uppercase does not shrink; "CONFIRMED PAYMENTS" is 165px wide and
     was forcing the whole page past the viewport on a phone, which pushed the
     nav toggle off-screen and left no way to navigate. */
  overflow-wrap: anywhere;
}

.stat-num {
  order: 2;
  font-size: var(--fs-xl);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink-050);
  font-variant-numeric: tabular-nums slashed-zero;
  min-width: 0;
}

/* Money leads. Larger, lighter, still white — colour is reserved for meaning.
   clamped, because $36,266.73 and $0.00 share this slot and the wide one must
   not spill into the cell beside it. Span is owned by .stats-row now. */
.stat--lead { padding: var(--s-4) var(--s-4) var(--s-5); }
.stat--lead .stat-num {
  font-size: clamp(22px, 2.5vw, 34px);
  letter-spacing: -0.038em;
}
.stat--money .stat-num { color: var(--ink-050); }

/* Attention states tint the LABEL, not the whole box. */
.stat.warn .stat-num { color: var(--yellow); }
.stat.warn .stat-label { color: var(--yellow); }
/* A loss is the one figure that "went wrong": red, like a failed order. */
.stat.loss .stat-num { color: var(--red); }
/* A quiet fourth line under the delta: what a figure is made of. */
.stat-sub {
  order: 4;
  font-size: var(--fs-xs);
  color: var(--ink-400);
  overflow-wrap: anywhere;
}

/* Icons are gone from the markup; kept so any stray node stays invisible. */
.stat-icon,
.stat--info .stat-icon,
.stat--money .stat-icon,
.stat.warn .stat-icon { display: none; }

/* Deltas: a quiet third line, never louder than the figure it annotates. */
.delta {
  order: 3;
  margin-top: var(--s-1);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}
.delta.up   { color: var(--green); }
.delta.down { color: var(--red); }
.delta.flat { color: var(--ink-500); }
.delta-sub  { color: var(--ink-500); font-weight: 400; }

.stats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.stats-head h1 { margin-bottom: var(--s-4); }

/* ============================================================================
   8. CARDS + DISCLOSURE
   ========================================================================== */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
  transition: border-color var(--t-fast);
}
.card:hover { border-color: var(--border-strong); }

.card details { margin: 0; }
.card summary,
.card details > summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--ink-100);
  padding: var(--s-1) 0;
  transition: color var(--t-fast);
}
.card summary::-webkit-details-marker { display: none; }
.card details > summary:hover { color: var(--ink-050); }

.card summary::before,
.card details > summary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--ink-400);
  border-bottom: 1.5px solid var(--ink-400);
  transform: rotate(-45deg);
  transition: transform var(--t-mid);
}
.card details[open] > summary::before,
.card[open] > summary::before { transform: rotate(45deg); }

.advanced-fields { margin-top: var(--s-3); }
.advanced-fields summary {
  font-size: var(--fs-sm);
  color: var(--muted);
  cursor: pointer;
}

/* ============================================================================
   9. FORMS + INPUTS
   ========================================================================== */
label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-200);
  margin-bottom: var(--s-1);
}
label small { display: block; font-weight: 400; color: var(--muted-2); margin-top: 2px; }

input, textarea, select {
  width: 100%;
  padding: 8px 11px;
  background: var(--ink-900);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-md);
  border: 1px solid var(--border-input);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast), background var(--t-fast);
}
input:hover, textarea:hover, select:hover { border-color: var(--border-strong); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--gold-600);
  background: var(--ink-850);
  box-shadow: 0 0 0 3px rgba(207, 161, 95, .14);
}
input::placeholder, textarea::placeholder { color: var(--ink-400); }

textarea { min-height: 96px; resize: vertical; line-height: 1.5; font-family: var(--font-mono); font-size: var(--fs-sm); }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-400) 50%),
                    linear-gradient(135deg, var(--ink-400) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}

input[type="checkbox"], input[type="radio"] {
  width: 15px;
  height: 15px;
  accent-color: var(--gold-500);
  cursor: pointer;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s-3) var(--s-4);
  align-items: end;
  margin-top: var(--s-4);
}
.form-grid .wide { grid-column: 1 / -1; }

/* ============================================================================
   10. BUTTONS
   ========================================================================== */
button {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-1000);
  background: var(--gold-400);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 8px 15px;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}
button:hover { background: var(--gold-300); }
button:active { transform: translateY(1px); }
button:disabled {
  opacity: .45;
  cursor: not-allowed;
  background: var(--ink-700);
  color: var(--ink-400);
}

.btn-secondary {
  background: transparent;
  color: var(--ink-200);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: rgba(255, 255, 255, .06); color: var(--ink-050); }

.btn-danger {
  background: transparent;
  color: var(--red);
  border-color: var(--t-red-bd);
}
.btn-danger:hover { background: var(--t-red); color: var(--red); }

.btn-sm { padding: 5px 10px; font-size: var(--fs-xs); }

/* ============================================================================
   11. TOOLBARS (search / filter rows) + inline search hooks
   ========================================================================== */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.toolbar input, .toolbar select { width: auto; min-width: 190px; }
.toolbar-count { font-size: var(--fs-sm); color: var(--muted); }
.toolbar-clear { font-size: var(--fs-sm); color: var(--muted); }
.toolbar-search { flex: 1; min-width: 190px; }

.user-search input { min-width: 230px; }
.product-search button { white-space: nowrap; }
.product-search-empty { color: var(--muted); font-size: var(--fs-md); }

.period-toggle {
  display: inline-flex;
  gap: 1px;
  padding: 2px;
  background: var(--ink-900);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.period-toggle a {
  padding: 5px 15px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-300);
  transition: background var(--t-fast), color var(--t-fast);
}
.period-toggle a:hover { color: var(--ink-050); background: rgba(255, 255, 255, .05); }
.period-toggle a.active { background: var(--ink-750); color: var(--ink-050); }

/* ============================================================================
   12. BALANCE-ADJUST FORM (users page)
   ========================================================================== */
.balance-form {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  /* wrap, not nowrap: this form sits inside a table cell, and forcing it onto
     one line pushed the users table 119px past its scroll container. */
  flex-wrap: wrap;
}
.balance-form input[type="number"] { width: 82px; text-align: right; }
.balance-form input[type="text"] { flex: 1; min-width: 110px; }
.balance-form select { width: auto; }
.balance-form button { white-space: nowrap; }

/* ============================================================================
   13. TABLES
   ----------------------------------------------------------------------------
   Hairline rows, no zebra, no coloured left rails. A table of 200 orders should
   read as one calm surface; the row that needs you is the only one that differs.
   ========================================================================== */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--panel);
}
.table-wrap + .table-wrap { margin-top: var(--s-4); }
.table-wrap > .data { border: 0; border-radius: 0; }

.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}

.data thead th {
  /* Sticks to the top of .table-wrap, which is the scroll container here
     (overflow-x:auto makes it one on both axes). Offsetting by the topbar
     height instead pushed the header down over the first row. */
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ink-900);
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-400);
  padding: 10px var(--s-3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data th, .data td {
  padding: 10px var(--s-3);
  vertical-align: middle;
}

.data tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
}
.data tbody tr:nth-child(even) { background: transparent; }
.data tbody tr:hover { background: rgba(255, 255, 255, .028); }
.data tbody tr:last-child td { border-bottom: 0; }

.data td:first-child { font-family: var(--font-mono); font-size: var(--fs-sm); }
.data tbody tr.row-delivered td:first-child,
.data tbody tr.row-awaiting_payment td:first-child { border-left: 0; }

/* Order codes are links on every row. Left gold, a 200-row table becomes a gold
   column that outshouts the figures. Accent is for what you are choosing NOW,
   so it arrives on hover instead. */
.data tbody a { color: var(--ink-200); }
.data tbody a:hover { color: var(--gold-400); }

/* Specificity must beat `.data thead th { text-align: left }` or money
   headers sit left while the figures under them sit right. */
.data th.cell-money,
.data td.cell-money,
.cell-money {
  text-align: right;
  font-variant-numeric: tabular-nums slashed-zero;
}
.data td.cell-money { color: var(--ink-050); }

.data th.cell-num,
.data td.cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums slashed-zero;
}

/* Rows that no longer matter recede rather than shouting in red. */
.row-cancelled, .row-expired, .row-failed { color: var(--ink-500); }
.row-cancelled a, .row-expired a, .row-failed a { color: var(--ink-500); }
.data tbody tr.row-failed:hover { background: rgba(255, 255, 255, .028); }

/* ============================================================================
   14. STATUS PILLS + row states
   ========================================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--t-slate);
  border: 1px solid var(--t-slate-bd);
  color: var(--slate-pill);
}
.pill::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: var(--r-pill);
  background: currentColor;
  flex: none;
}

.pill-delivered, .pill-confirmed, .pill-paid {
  background: var(--t-green); border-color: var(--t-green-bd); color: var(--green);
}
.pill-pending, .pill-awaiting_payment {
  background: var(--t-amber); border-color: var(--t-amber-bd); color: var(--yellow);
}
.pill-expired, .pill-cancelled, .pill-failed {
  background: var(--t-red); border-color: var(--t-red-bd); color: var(--red);
}
.pill-open     { background: var(--t-amber); border-color: var(--t-amber-bd); color: var(--yellow); }
.pill-answered { background: var(--t-sky);   border-color: var(--t-sky-bd);   color: var(--sky); }
.pill-closed   { background: var(--t-slate); border-color: var(--t-slate-bd); color: var(--slate-pill); }
.pill-draft    { background: var(--t-slate); border-color: var(--t-slate-bd); color: var(--slate-pill); }

/* ============================================================================
   15. DELIVERED ITEMS (disclosure in tables)
   ========================================================================== */
.col-delivered { min-width: 140px; }

.delivered-items summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-sm);
  color: var(--accent);
}
.delivered-items summary::-webkit-details-marker { display: none; }
.delivered-items summary::before {
  content: "";
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--t-mid);
}
.delivered-items[open] summary::before { transform: rotate(45deg); }

.delivered-list {
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.delivered-code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-200);
  background: var(--ink-900);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 3px 7px;
  word-break: break-all;
}

/* ============================================================================
   16. PRODUCT CARDS
   ========================================================================== */
.product-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-3);
  transition: border-color var(--t-fast);
}
.product-card:hover { border-color: var(--border-strong); }
.product-card.is-search-hidden { display: none; }

.product-card .prod-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.product-card .prod-head h3 { margin: 0; font-size: var(--fs-base); }
.product-card .prod-head h3 small {
  font-weight: 400;
  color: var(--muted);
  margin-left: var(--s-1);
}
.product-card .prod-meta {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-top: var(--s-1);
}

.prod-logo-badge {
  width: 24px; height: 24px;
  border-radius: var(--r-xs);
  object-fit: contain;
  background: var(--ink-900);
  border: 1px solid var(--border);
  padding: 2px;
}

.row-actions { display: flex; gap: var(--s-1); flex-wrap: wrap; align-items: center; }
.row-actions form { display: inline; }

.tiers { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.tiers li { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); }
.tiers li b { color: var(--ink-100); font-weight: 500; }
.tiers li form { display: inline; }
/* Inline tier editor: the numbers are the controls, so they stay compact and
   sit on the baseline of the sentence they read as. */
.tier-edit { display: inline-flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.tier-edit input { width: 74px; text-align: right; padding: 4px 7px; font-size: var(--fs-sm); }
.tier-sep { color: var(--muted-2); white-space: nowrap; }

/* Inline special-price editor, same idea: the value IS the control. */
.sp-edit { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.sp-edit input[name="unit_price"] { width: 84px; text-align: right; padding: 4px 7px; }
.sp-edit .sp-note { flex: 1; min-width: 130px; padding: 4px 8px; font-size: var(--fs-sm); }
.sp-currency { color: var(--muted-2); }
.sp-discount { margin-top: 3px; font-size: var(--fs-xs); }

/* ============================================================================
   17. STOCK MANAGER
   ========================================================================== */
.stock-panel { margin-top: var(--s-3); }
.stock-add-form { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.stock-actions { width: 92px; text-align: right; }   /* a <td> — keep it one */
.stock-bulk-form { margin-top: var(--s-2); }
.stock-bulk-actions { display: flex; gap: var(--s-2); align-items: center; margin-top: var(--s-2); flex-wrap: wrap; }

.stock-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.stock-table .col-check { width: 30px; }
.stock-select-all, .stock-cb { cursor: pointer; }
.stock-content code { display: block; max-width: 420px; word-break: break-all; }
.stock-cost { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }

.supplier-panel { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); }
.supplier-panel h4 { margin: 0 0 var(--s-2); font-size: var(--fs-sm); color: var(--ink-200); }

/* ============================================================================
   18. LOGO PICKER  (class names + JS hooks preserved exactly)
   ========================================================================== */
.logo-picker { margin-top: var(--s-1); }
.logo-picker-value { display: none; }

.logo-picker-fold {
  border: 1px solid var(--border-input);
  border-radius: var(--r-sm);
  background: var(--ink-900);
  overflow: hidden;
}
.logo-picker-fold > summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px 11px;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-md);
}
.logo-picker-fold > summary::-webkit-details-marker { display: none; }
.logo-picker-fold[open] { border-color: var(--border-strong); }

.logo-picker-summary-icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: var(--r-xs);
  background: var(--ink-850);
  border: 1px solid var(--border);
  flex: none;
}
.logo-picker-summary-preview { width: 16px; height: 16px; object-fit: contain; }
.logo-picker-summary-placeholder { color: var(--ink-500); font-size: var(--fs-xs); }
.logo-picker-summary-text { flex: 1; color: var(--ink-100); }
.logo-picker-summary-text.muted { color: var(--muted-2); }
.logo-picker-summary-chevron {
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--ink-400);
  border-bottom: 1.5px solid var(--ink-400);
  transform: rotate(45deg);
  flex: none;
}

.logo-picker-body { padding: var(--s-3); border-top: 1px solid var(--border); }
.logo-picker-toolbar { display: flex; gap: var(--s-2); margin-bottom: var(--s-3); }
.logo-picker-search { flex: 1; }
.logo-picker-clear { white-space: nowrap; }
.logo-picker-clear:hover { color: var(--ink-050); }
.logo-picker-hint { font-size: var(--fs-xs); color: var(--muted-2); margin-top: var(--s-2); }
.logo-picker-empty { font-size: var(--fs-sm); color: var(--muted-2); padding: var(--s-3) 0; }

.logo-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: var(--s-2);
  max-height: 260px;
  overflow-y: auto;
}

.logo-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-1);
  background: var(--ink-850);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.logo-option:hover { background: var(--ink-800); border-color: var(--border-strong); }
.logo-option img { width: 24px; height: 24px; object-fit: contain; }
.logo-option span {
  font-size: 9.5px;
  color: var(--muted-2);
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
}
.logo-option.is-selected {
  border-color: var(--gold-600);
  background: var(--t-brand);
}

/* ============================================================================
   19. BANNERS  (broadcast success / error)
   ========================================================================== */
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  margin-bottom: var(--s-4);
  font-size: var(--fs-md);
}
.banner-icon { flex: none; margin-top: 1px; }
.banner-success { background: var(--t-green); border-color: var(--t-green-bd); color: var(--green); }
.banner-success b { color: var(--green); }
.banner-error   { background: var(--t-red);   border-color: var(--t-red-bd);   color: var(--red); }
.banner-error b { color: var(--red); }
.banner-warn    { background: var(--t-amber); border-color: var(--t-amber-bd); color: var(--yellow); }
.banner-warn b { color: var(--yellow); }

/* ============================================================================
   20. CHARTS + FUNNEL + RETENTION
   ========================================================================== */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.chart-card { padding: var(--s-4) var(--s-5) var(--s-5); }
.chart-card h3 { display: flex; align-items: baseline; gap: var(--s-2); }
.chart-card h3 .muted { font-weight: 400; font-size: var(--fs-sm); }
.chart-wide { grid-column: 1 / -1; }
.chart-box { position: relative; height: 260px; }

.funnel { display: flex; flex-direction: column; gap: var(--s-2); }
.funnel-row { display: grid; grid-template-columns: 150px 1fr 62px; align-items: center; gap: var(--s-3); }
.funnel-label { font-size: var(--fs-sm); color: var(--muted); }
.funnel-bar {
  height: 7px;
  background: var(--ink-800);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.funnel-bar.funnel-pending { opacity: .5; }
.funnel-fill {
  height: 100%;
  background: var(--gold-500);
  border-radius: var(--r-pill);
  /* Deliberately not animated: the bar is server-rendered at its final size
     and never changes, so easing it only bought layout thrash. */
}
.funnel-val {
  text-align: right;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-100);
}

.retention { display: flex; gap: var(--s-6); flex-wrap: wrap; }
.retention > div { display: flex; flex-direction: column; gap: 2px; }
.retention .big {
  font-size: var(--fs-xl);
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--ink-050);
}
.retention .muted { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; }

/* Statistics: the needs-attention card, reconciliation lines, loss figures.
   Amber marks only what needs the owner now; a quiet line says what was
   checked when nothing does. */
.attention { margin-bottom: var(--s-5); }
.attention h3.warn { color: var(--yellow); }
.attention-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.attention-list li {
  position: relative;
  padding-left: var(--s-4);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.attention-list li.is-warn { color: var(--ink-100); }
.attention-list li.is-warn::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--yellow);
}
.attention-list li a { margin-left: var(--s-1); }
.attention-clear { margin: 0; font-size: var(--fs-sm); }
.attention-list + .attention-clear { margin-top: var(--s-3); }
.section-card { margin-bottom: var(--s-4); }
.section-card h4 { margin: var(--s-5) 0 var(--s-2); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-100); }
.chart-note { margin: var(--s-2) 0 0; font-size: var(--fs-xs); }
.recon {
  margin: var(--s-3) 0 0;
  padding-left: var(--s-4);
  font-size: var(--fs-xs);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.recon strong { color: var(--ink-100); font-weight: 500; }
.data td.loss, .recon .loss { color: var(--red); }
/* The global `b, strong` rule colours <strong> itself; a loss total inside a
   red cell must stay red. */
.data td.loss strong { color: inherit; }
.data tr.is-warn td:first-child { color: var(--yellow); }
.data tr.muted td, .data tr.muted td.cell-money { color: var(--muted); }
.exceptions { margin-top: var(--s-3); }
.stats-tabs { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.warn-heading { color: var(--yellow); }
.data.cohorts td, .data.cohorts th { white-space: nowrap; }

/* ============================================================================
   21. TICKETS + BROADCAST
   ========================================================================== */
/* Both of these are <td> elements. They must stay table cells — giving the
   message cell no max-width let it grow to the longest ticket and shove the
   Status and Actions columns past the right edge of the scroll container, so
   the reply box existed but could not be reached. */
.ticket-message {
  max-width: 380px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.5;
}
.ticket-reply { margin-top: var(--s-1); font-size: var(--fs-xs); color: var(--muted); }
/* Did the buyer get the reply DM? (batch 51) */
.reply-state { margin-top: 2px; font-size: var(--fs-xs); }
.reply-sent   { color: var(--green); }
.reply-failed { color: var(--red); }
.reply-wait   { color: var(--yellow); }
.ticket-actions { min-width: 250px; }
.ticket-actions form { display: flex; gap: var(--s-1); margin: 0 0 var(--s-1); flex-wrap: wrap; }
.ticket-actions form:last-child { margin-bottom: 0; }
.ticket-actions input[name="reply"] { flex: 1 1 130px; min-width: 110px; }
.ticket-actions select { width: auto; flex: 1 1 96px; }

.broadcast-card h2 { margin-top: 0; }
.broadcast-product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.broadcast-product-option {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--s-2) var(--s-3);
  background: var(--ink-900);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.broadcast-product-option:hover { border-color: var(--border-strong); }
.broadcast-product-option span { font-size: var(--fs-md); color: var(--ink-100); }
.broadcast-product-option small { font-size: var(--fs-xs); color: var(--muted-2); }
.broadcast-product-option.is-disabled { opacity: .45; cursor: not-allowed; }

/* ============================================================================
   22. LOGIN
   ========================================================================== */
.login-body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--s-4);
  background: var(--bg);
}
.login-card {
  position: relative;
  width: 100%;
  max-width: 350px;
  padding: var(--s-6);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.login-card::before { content: none; }
.login-logo {
  width: 30px; height: 30px;
  margin-bottom: var(--s-4);
  color: var(--gold-400);
}
.login-card h1 { font-size: var(--fs-xl); margin-bottom: var(--s-1); }
.login-sub { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s-5); }
.login-card label { margin-bottom: var(--s-2); }
.login-card input { margin-bottom: var(--s-4); }
.login-card button { width: 100%; padding: 10px; }
.login-foot { margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--ink-500); text-align: center; }

/* ============================================================================
   23. RESPONSIVE
   ========================================================================== */
@media (max-width: 760px) {
  .topbar {
    flex-wrap: wrap;
    height: auto;
    padding: var(--s-2) var(--s-3);
    gap: var(--s-2);
  }
  .nav-toggle { display: block; margin-left: auto; }
  .nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 1px;
    padding-bottom: var(--s-2);
    overflow: visible;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 9px var(--s-2); }
  .nav a.active::after { left: var(--s-2); right: auto; width: 14px; bottom: 4px; }
  .nav a.logout { margin-left: 0; }

  .container { padding: var(--s-4) var(--s-3) var(--s-7); }
  h1 { font-size: var(--fs-xl); }

  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: var(--s-3); }
  .stats-row > .stat--lead { grid-column: 1 / -1; padding: var(--s-3); }
  .stat--lead .stat-num { font-size: var(--fs-2xl); }
  /* Full-width lead is alone on its row; restore the side hairline the
     last-child rule removed so it still meets the panel edge cleanly. */
  .stats-row > .stat--lead:last-child { border-right: 0; }

  .data thead th { top: 0; }
  .funnel-row { grid-template-columns: 96px 1fr 52px; gap: var(--s-2); }
  .ticket-actions form { min-width: 0; }
  .balance-form { flex-wrap: wrap; }
}

@media (max-width: 420px) {
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: var(--s-3) var(--s-2); }
  .stats-row > .stat--lead { grid-column: 1 / -1; padding: var(--s-3); }
  .stat-label { font-size: 9.5px; letter-spacing: .06em; }
  .stat-num { font-size: var(--fs-lg); }
  .brand-tag { display: none; }
}

@media (max-width: 360px) {
  .stats-row { grid-template-columns: 1fr; }
  .stats-row > .stat,
  .stats-row > .stat--lead { grid-column: 1 / -1; }
  .container { padding-left: var(--s-2); padding-right: var(--s-2); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .stat { animation: none; opacity: 1; transform: none; }
}