/* ==========================================================================
   Xpeazy Console — modern finance-SaaS design layer
   --------------------------------------------------------------------------
   Loaded AFTER dashboard.html's inline <style>, and deliberately re-defines
   the same class names so all 29 panels lift at once.

   The previous console read as a wireframe: hairline boxes everywhere, one
   flat weight of grey, tables with no hierarchy, KPI numbers the same size as
   labels. A CFO judges credibility on density and typographic control, so the
   changes here are: a real neutral ramp, one accent, tabular figures, sticky
   table headers, quiet borders, and a single earned shadow on things that
   float. Console navy stays the brand anchor — this is the console, not the
   field app, so navy is correct here and green is reserved for "good".
   ========================================================================== */

:root {
  --c-navy:       #0F2A5C;
  --c-navy-700:   #16386F;
  --c-navy-050:   #EEF3FB;
  --c-accent:     #2563EB;
  --c-accent-050: #EFF5FF;

  --c-pos:        #15803D;
  --c-pos-bg:     #ECFDF3;
  --c-neg:        #B42318;
  --c-neg-bg:     #FEF3F2;
  --c-warn:       #B54708;
  --c-warn-bg:    #FFFAEB;

  /* a real neutral ramp — the old palette had three greys doing nine jobs */
  --n-0:  #FFFFFF;
  --n-25: #FCFCFD;
  --n-50: #F9FAFB;
  --n-100:#F2F4F7;
  --n-200:#EAECF0;
  --n-300:#D0D5DD;
  --n-400:#98A2B3;
  --n-500:#667085;
  --n-600:#475467;
  --n-700:#344054;
  --n-900:#101828;

  --c-r-sm: 6px; --c-r: 10px; --c-r-lg: 14px;
  --c-sh-sm: 0 1px 2px rgba(16,24,40,.06);
  --c-sh:    0 1px 3px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.06);
  --c-sh-lg: 0 12px 16px -4px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.03);

  --c-font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* remap legacy tokens so untouched panels inherit the new system */
  --white: var(--n-0);
  --surface: var(--n-50);
  --ink: var(--n-900);
  --ink-soft: var(--n-700);
  --gray: var(--n-500);
  --gray-light: var(--n-400);
  --border: var(--n-200);
  --navy: var(--c-navy);
  --navy-deep: #0A1F45;
  --navy-soft: var(--c-navy-700);
  --blue: var(--c-accent);
  --blue-pale: var(--c-accent-050);
  --green: var(--c-pos);
  --green-pale: var(--c-pos-bg);
  --red: var(--c-neg);
  --red-pale: var(--c-neg-bg);
  --amber: var(--c-warn);
  --amber-pale: var(--c-warn-bg);
}

body { font-family: var(--c-font); background: var(--n-50); color: var(--n-700); font-size: 14px; }

/* ==========================================================================
   Shell
   ========================================================================== */
.topbar, .console-top {
  background: var(--c-navy); border-bottom: none;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
  height: 56px;
}
.sidebar, .side {
  background: var(--n-0); border-right: 1px solid var(--n-200); padding: 12px 10px;
}
.sidebar button, .side button {
  border-radius: var(--c-r-sm); padding: 9px 12px; font-size: 14px; font-weight: 500;
  color: var(--n-600); border: none; background: none; width: 100%; text-align: left;
  display: flex; align-items: center; gap: 10px;
}
.sidebar button:hover, .side button:hover { background: var(--n-50); color: var(--n-900); }
.sidebar button.on, .side button.on {
  background: var(--c-accent-050); color: var(--c-accent); font-weight: 600;
}

/* ==========================================================================
   Cards, panels, section headers
   ========================================================================== */
.card, .panel-card {
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--c-r-lg);
  box-shadow: var(--c-sh-sm); padding: 20px;
}
.panel h2, .pg-title { font-size: 20px; font-weight: 600; color: var(--n-900); letter-spacing: -.01em; }
.panel > p, .pg-desc { color: var(--n-500); font-size: 14px; }
.kicker {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--n-500);
}

/* ==========================================================================
   KPI tiles — the number is the hero, the label is support
   ========================================================================== */
.kpi, .kpi-card {
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--c-r-lg);
  padding: 18px 20px; box-shadow: var(--c-sh-sm);
}
.kpi .lbl, .kpi-lbl {
  font-size: 12.5px; font-weight: 500; color: var(--n-500);
  text-transform: none; letter-spacing: 0; margin-bottom: 6px;
}
.kpi .val, .kpi-val {
  font-size: 30px; font-weight: 600; color: var(--n-900);
  letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.15;
}
.kpi .sub, .kpi-sub { font-size: 12.5px; color: var(--n-500); margin-top: 6px; }
.kpi .sub.pos { color: var(--c-pos); } .kpi .sub.neg { color: var(--c-neg); }

/* ==========================================================================
   Tables — density and alignment are the whole credibility argument
   ========================================================================== */
table.data, .data { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.5px; }
.data thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--n-50); color: var(--n-600);
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  text-align: left; padding: 10px 14px; white-space: nowrap;
  border-bottom: 1px solid var(--n-200); border-top: 1px solid var(--n-200);
}
.data thead th:first-child { border-top-left-radius: var(--c-r-sm); border-left: 1px solid var(--n-200); }
.data thead th:last-child  { border-top-right-radius: var(--c-r-sm); border-right: 1px solid var(--n-200); }
.data tbody td {
  padding: 13px 14px; border-bottom: 1px solid var(--n-100); color: var(--n-700); vertical-align: middle;
}
.data tbody tr:hover td { background: var(--n-25); }
.data td.num, .data th.num, .num, .money {
  text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  color: var(--n-900); font-weight: 500;
}
.data tbody tr:last-child td { border-bottom: none; }

/* ==========================================================================
   Badges
   ========================================================================== */
.pill, .tag, .badge {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; padding: 3px 9px;
  font-size: 12px; font-weight: 500; line-height: 18px; border: 1px solid transparent;
}
.pill.green, .tag-g { background: var(--c-pos-bg);  color: var(--c-pos);  border-color: #ABEFC6; }
.pill.red,   .tag-r { background: var(--c-neg-bg);  color: var(--c-neg);  border-color: #FECDCA; }
.pill.amber, .tag-a { background: var(--c-warn-bg); color: var(--c-warn); border-color: #FEDF89; }
.pill.blue,  .tag-b { background: var(--c-accent-050); color: var(--c-accent); border-color: #B2CCFF; }
.pill.gray,  .tag-n { background: var(--n-50); color: var(--n-600); border-color: var(--n-200); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  border-radius: var(--c-r-sm); font-weight: 600; font-size: 13.5px;
  padding: 9px 15px; border: 1px solid transparent; box-shadow: var(--c-sh-sm);
  transition: background .15s, border-color .15s;
}
.btn-primary { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.btn-primary:hover { background: var(--c-navy-700); }
.btn-secondary, .btn-outline {
  background: var(--n-0); border-color: var(--n-300); color: var(--n-700);
}
.btn-secondary:hover, .btn-outline:hover { background: var(--n-50); }
.btn-danger-outline { background: var(--n-0); border-color: #FDA29B; color: var(--c-neg); }
.btn-sm { padding: 7px 12px; font-size: 13px; }

/* ==========================================================================
   Toggles
   ========================================================================== */
.switch .sl { background: var(--n-300); }
.switch input:checked + .sl { background: var(--c-pos); }
.mcc-row { border-bottom: 1px solid var(--n-100); padding: 13px 0; }
.mcc-row b { color: var(--n-900); font-weight: 500; font-size: 14px; }

/* ==========================================================================
   Floating things get the one earned shadow
   ========================================================================== */
.modal, .drawer, .sheet, .menu, .um { box-shadow: var(--c-sh-lg); border-radius: var(--c-r-lg); border: 1px solid var(--n-200); }
.toast { background: var(--n-900); color: #fff; border-radius: var(--c-r); box-shadow: var(--c-sh-lg); }

/* monospace only for machine identifiers */
.ref, .vpa, .mcc, .rrn { font-family: var(--mono); font-size: 12.5px; color: var(--n-600); }