: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);
  --yellow:       #f0c419;
  --yellow-bg:    rgba(240,196,25,0.08);
  --yellow-border: rgba(240,196,25,0.25);
  --indigo:       #6c5ce7;
  --indigo-bg:    rgba(108,92,231,0.1);
  --indigo-border: rgba(108,92,231,0.25);
  --grey:         #7e7260;
  --grey-bg:      rgba(126,114,96,0.08);
  --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); }


/* ── Form primitives (moved from account_app inline styles) ───────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
  max-width: 420px;
}
.form-label {
  font-size: var(--fs-label);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text3);
  font-weight: 600;
}
.form-input, .form-select {
  background: var(--slate);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 9px 11px;
  color: var(--text);
  font-size: var(--fs-md);
  font-family: var(--font);
  transition: border-color 0.15s;
}
.form-input:focus, .form-select:focus {
  outline: none;
  border-color: var(--amber-border);
}
.form-hint {
  font-size: var(--fs-label);
  color: var(--text3);
}
.form-footnote {
  font-size: var(--fs-sm);
  color: var(--text3);
  margin-top: 4px;
}
.submit-row {
  margin-top: 22px;
}
.flash {
  padding: 10px 14px;
  border-radius: 3px;
  font-size: var(--fs-sm);
  margin-bottom: 16px;
  border: 1px solid;
  max-width: 420px;
}
.flash-success {
  background: var(--green-bg);
  border-color: rgba(46,204,113,0.25);
  color: var(--green);
}
.flash-error {
  background: var(--red-bg);
  border-color: var(--red-border);
  color: var(--red);
}

/* ── App sidebar layout (generalized from finance_app's fn-* pattern) ─────── */
/* Overrides base.html's .shell{height:100vh;overflow:hidden} — without this,
   any page using .app-layout is trapped at viewport height with no scroll,
   since base.html assumes every app manages its own internal scroll region
   (.dash-scroll) rather than needing the whole page to grow. finance_app's
   own fn-* styles carry this same override; missed copying it over when
   generalizing to .app-layout for qc_app. */
.shell { overflow:visible !important; height:auto !important; }
.app-layout { display:flex; align-items:flex-start; min-height:calc(100vh - 48px); overflow:visible; }
.app-sidebar { width:220px; flex-shrink:0; min-height:100vh; overflow-y:auto; background:var(--navy2); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:16px 0; }
.app-sidebar .sidebar-title { font-size:var(--fs-base); font-weight:600; color:var(--text); padding:0 14px; margin-bottom:20px; line-height:1.3; }
.app-sidebar .sidebar-title span { color:var(--text3); }
.app-sidebar .sidebar-divider { height:1px; background:var(--border); margin:0 14px 22px; }
.app-sidebar .sidebar-tabs { display:flex; flex-direction:column; gap:2px; padding:0 14px; margin-bottom:20px; }
.app-sidebar .sidebar-tab { font-size:var(--fs-base); padding:7px 10px; border-radius:3px; cursor:pointer; border:1px solid transparent; color:var(--text3); text-decoration:none; transition:all 0.15s; }
.app-sidebar .sidebar-tab:hover { color:var(--text); background:rgba(255,255,255,0.04); }
.app-sidebar .sidebar-tab.active { color:var(--amber); background:var(--amber-bg); border-color:var(--amber-border); }
.app-sidebar .sidebar-tab.disabled { color:var(--text3); opacity:0.4; cursor:default; pointer-events:none; }
.app-content { flex:1; min-width:0; display:flex; flex-direction:column; padding:20px 24px; gap:20px; }

/* Native date-input calendar icon renders black by default — invisible on
   dark theme. Applies wherever .form-input is used on a date field. */
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }