:root {
  --font:          Arial, sans-serif;
  --navy:         #0a0a0a;
  --navy2:        #111111;
  --slate:        #1a1a1a;
  --slate2:       #222222;
  --border:       #2a2a2a;
  --border2:      rgba(42,42,42,0.6);
  --text:         #f0f0f0;
  --text2:        #b3a98e;
  --text3:        #7e7260;
  --text4:        #9a8f78;
  --amber:        #f5a623;
  --amber2:       #f7b84a;
  --amber-bg:     rgba(245,166,35,0.08);
  --amber-border: rgba(245,166,35,0.25);
  --green:        #2ecc71;
  --green-bg:     rgba(46,204,113,0.08);
  --red:          #e74c3c;
  --red-bg:       rgba(231,76,60,0.08);
  --red-border:   rgba(231,76,60,0.25);
  --blue:         #4a9eda;
  --blue-bg:      rgba(74,158,218,0.1);
  --blue-border:  rgba(74,158,218,0.25);
  --muted:        #444444;
  --topnav-h:     44px;
  --pos:          #4caf7d;
  --neg:          #e05c5c;

  /* ── Font size scale ───────────────────────────────────────────────────── */
  --fs-label:  11px;   /* chrome labels: sidebar sections, kpi labels, col headers  */
  --fs-sm:     12px;   /* sidebar nav inputs, search, sub-row metadata              */
  --fs-base:   13px;   /* primary body text, metric buttons, nav links              */
  --fs-md:     14px;   /* table data cells, amount-cell                             */
  --fs-lg:     16px;   /* landing titles, prominent UI labels                       */
  --fs-2lg:    18px;   /* mid-size display values, mobile hero overrides            */
  --fs-xl:     20px;   /* entity names, region card values                          */
  --fs-2xl:    22px;   /* kpi tile values, summary bar values                       */
  --fs-3xl:    24px;   /* trends hero tile values                                   */
  --fs-4xl:    28px;   /* top nav / large display elements                          */
  --fs-hero:   26px;   /* overview hero tile primary values                         */
}
*, *::before, *::after { font-family: inherit; }
.unit-cell { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--blue); }
/* ── Platform primitives ─────────────────────────────────────────────────── */
.r             { text-align:right; }
.num-cell      { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.null-cell     { color:var(--text3); font-size:var(--fs-sm); }
.var-pos       { color:var(--pos); font-weight:600; }
.var-neg       { color:var(--neg); font-weight:600; }
.var-zero      { color:var(--text3); }
.sku-no        { font-size:var(--fs-sm); color:var(--text4); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rpo-cell      { font-size:var(--fs-md); color:var(--amber); font-variant-numeric:tabular-nums; white-space:nowrap; }
.date-cell     { font-size:var(--fs-md); white-space:nowrap; }
.date-mismatch { color:var(--amber); cursor:help; }
.date-match    { color:var(--text2); }
.cost-cell     { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cost-actual   { color:var(--text2); }
.cost-expected { color:var(--text3); font-style:italic; }
.cost-zero     { color:var(--text3); }
.empty-state   { text-align:center; padding:48px 20px; color:var(--text3); font-size:var(--fs-base); }
.table-footer  { padding:6px 13px; font-size:var(--fs-label); color:var(--text3); border-top:1px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:space-between; }
/* ── Sales primitives ────────────────────────────────────────────────────── */
.amount-cell  { text-align:right; font-size:var(--fs-md); color:var(--text); white-space:nowrap; }
.empty        { text-align:center; padding:32px 20px; }
.empty-icon   { font-size:24px; margin-bottom:8px; }
.empty-msg    { font-size:var(--fs-base); color:var(--text3); }