: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; }
.app-sidebar .sidebar-section { padding:0 14px; margin-bottom:22px; }
.app-sidebar .sidebar-label { font-size:var(--fs-label); letter-spacing:1.2px; text-transform:uppercase; color:var(--text3); font-weight:600; margin-bottom:8px; padding-left:2px; }

/* 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); }

/* Themed scroll bars (thin, muted thumb) */
* { scrollbar-width: thin; scrollbar-color: var(--text3) transparent; }

/* Trend icon button, shared by Operations and Finance (standardized 3 Nov 2026) */
.tbtn{display:inline-flex;align-items:center;margin-left:8px;padding:2px 5px;border:1px solid var(--border);border-radius:2px;color:var(--text3);vertical-align:middle;text-decoration:none}
.tbtn:hover{border-color:var(--amber);color:var(--amber)}

/* Date and week pickers (5 Nov 2026): white popup, amber icon. The popup is drawn by the browser;
   color-scheme is the only switch for it. The icon filter is approximate; tune by eye. */
input[type="date"], input[type="week"], input[type="month"], input[type="time"] { color-scheme: light; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(72%) sepia(85%) saturate(900%) hue-rotate(350deg) brightness(1.05);
}

/* Larger date/week picker icon (5 Nov 2026). transform does not change layout, so field size is
   unchanged. Operations .dinput fields draw their own icon and are excluded. Adjust the scale by eye. */
input[type="date"]:not(.dinput)::-webkit-calendar-picker-indicator,
input[type="week"]:not(.dinput)::-webkit-calendar-picker-indicator,
input[type="month"]:not(.dinput)::-webkit-calendar-picker-indicator,
input[type="time"]:not(.dinput)::-webkit-calendar-picker-indicator {
  transform: scale(1.35);
  transform-origin: center;
}