/* ════════════════════════════════════════════════════════════════════════════
   EVRA-S DESIGN SYSTEM — "GRAPHITE + SIGNAL v2"
   Agreed by the 4-model design panel (GPT-5.6 Sol, Grok 4.5, DeepSeek v4 Pro,
   Gemini 3.1 Pro + Claude) on 2026-07-14. Single source of visual truth.

   PHILOSOPHY
   - Cool graphite surfaces, flat depth-by-border (NO resting card shadows;
     shadows are reserved for overlays: modal/popover/dropdown/toast).
   - ONE accent: EVRA mint. Brand moved #3ECF8E -> #3ECF8E (hover #34B87E,
     active #2BA46F). Success shares the family; meaning NEVER rides on colour
     alone (status always carries a dot/icon/label).
   - Geist for UI, Geist Mono for every instrument numeral (self-hosted).
   - Text-4/disabled are DECORATIVE-ONLY: never the sole label of a control.

   LEGACY LITERAL -> TOKEN MAP (the sweep applied these; keep for audit)
     backgrounds: #161616 #0A0E10 #0a0a0a #070707 #1A1A1A #161616 -> --evra-canvas
                  #181A19 #232323 #111111                        -> --evra-surface-1
                  #171917                                         -> --evra-surface-0
                  #1E211F #171917                                 -> --evra-surface-2
                  #232624                                          -> --evra-surface-3
     accents:     #3ECF8E #00e5a0 #28C491 -> --evra-primary   #85E0BA -> --evra-primary-bright
     semantic:    #D4A62A #f59e0b #E0A82E -> --evra-warning
                  #E45B5B #ff4c51 #ef4444 #E5484D -> --evra-danger
                  #638cff -> --evra-info   #8fb0ff #7dd3fc -> --evra-info-bright
     text:        #E4E4E4 -> --evra-text-2   #7A8590 -> --evra-text-3
     rgba(62,207,142,x) -> rgba(var(--evra-primary-rgb),x)  etc.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 0. Fonts — Supabase uses Inter + Source Code Pro (+ Manrope for display).
   Loaded from Google Fonts, matching supabase.com. The self-hosted Geist
   faces below are retained only so any page still naming them directly
   does not fall back to a serif; nothing should reference them now. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;450;500;600;700;800&family=Source+Code+Pro:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&display=swap');

@font-face {
  font-family:'Geist'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/static/dashboard/fonts/geist-var.woff2') format('woff2-variations');
}
@font-face {
  font-family:'Geist Mono'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/static/dashboard/fonts/geist-mono-var.woff2') format('woff2-variations');
}

/* Smooth cross-document navigation (Chrome/Edge 126+; ignored elsewhere) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration:0.18s; }

/* Paint the canvas immediately — no white flash on navigation */
html { background:#161616; }

/* ── 1. DESIGN TOKENS ──────────────────────────────────────────────────────── */
:root,
[data-bs-theme=dark] {
  /* Surfaces — GPT-5-verified Supabase spec (2026-07-25), VERDICT: NEUTRAL.
     Only the CANVAS carries Supabase's faint hue-159 tint; every component
     tier is their pure neutral gray ramp. Tinting all tiers (a previous pass)
     made that low chroma accumulate into a green cast across the whole UI,
     which is exactly what the operator rejected. Olive is the ONLY colour
     carrier. Do not re-tint the component tiers. */
  --evra-canvas:        #161616;   /* dark charcoal == sidebar (operator 2026-07-27: "#161616 too black") */   /* the one tinted tier, as supabase.com */
  --evra-surface-0:     #161616;   /* sidebar / deepest chrome  (gray-100) */
  --evra-surface-1:     #202020;   /* cards - one touch darker than #232323 (operator 2026-07-27 evening: "too light grey") */
  --evra-surface-2:     #232323;   /* inputs, nested panels     (gray-300) */
  --evra-surface-3:     #282828;   /* popovers, hover-raised    (gray-400) */
  /* GPT returned #161616 here; that is darker than the card tier and this
     token is the active-chip FILL, which would then read as a hole. Continued
     their ramp with gray-500 instead. */
  --evra-surface-4:     #2E2E2E;   /* pressed / active chip     (gray-500) */

  /* Lines */
  /* Sampled: their card border computes to oklch(.95 … / 0.075) and their
     control/button border to oklch(.95 … / 0.135). */
  --evra-border-hair:   rgba(237,239,238,0.075);
  --evra-border-mid:    rgba(237,239,238,0.135);
  --evra-border-strong: rgba(237,239,238,0.220);
  /* Focus ring follows the ACCENT, which is olive -- not Supabase's mint. */
  --evra-border-focus:  rgba(46,158,106,0.45);

  /* Text — Supabase's exact foreground ramp (fg #EDEFEE, muted #989A99). */
  --evra-text-1:        #EDEFEE;
  --evra-text-2:        #A0A0A0;
  --evra-text-3:        #989A99;
  --evra-text-4:        #707070;
  --evra-text-disabled: #5A5F5A;
  --evra-ink:           #0d0d0d;   /* text on a filled accent button */

  /* Accent — EVRA dark olive green. DELIBERATELY *NOT* Supabase's #3ECF8E:
     the operator's instruction (2026-07-25) is "Supabase everywhere but dark
     olive", i.e. adopt Supabase's surfaces / text ramp / radii / type scale
     but keep this accent. Three exact operator-specified shades:
     #248055 darkest / #2E9E6A mid / #37B67D lightest. Never bright/lime/
     emerald/teal/cyan — see CLAUDE.md HARD RULE #9. */
  --evra-primary:        #2E9E6A;
  --evra-primary-rgb:    46,158,106;
  --evra-primary-hover:  #248055;
  --evra-primary-active: #426847;
  --evra-primary-bright: #37B67D;
  --evra-primary-tint:   rgba(46,158,106,0.12);
  --evra-primary-ring:   rgba(46,158,106,0.35);
  --evra-link:           #2E9E6A;
  --evra-link-hover:     #37B67D;

  /* Semantic */
  --evra-success:       #2E9E6A;
  --evra-warning:       #E0A82E;  --evra-warning-rgb: 224,168,46;
  --evra-danger:        #E5484D;  --evra-danger-rgb:  229,72,77;
  --evra-info:          #4E8FE8;  --evra-info-rgb:    78,143,232;
  --evra-info-bright:   #7FB2F0;
  --evra-warning-tint:  rgba(224,168,46,0.12);
  --evra-danger-tint:   rgba(229,72,77,0.12);
  --evra-info-tint:     rgba(78,143,232,0.12);

  /* Data-viz categorical (STABLE order — never reshuffle per chart) */
  --evra-dv-1: #3ECF8E;  --evra-dv-2: #4E8FE8;  --evra-dv-3: #B48EF0;
  --evra-dv-4: #E0A82E;  --evra-dv-5: #E5636A;  --evra-dv-6: #4EC3C9;
  --evra-dv-7: #F0A070;  --evra-dv-8: #9AA4B2;
  --evra-dv-violet: #B48EF0; --evra-dv-violet-rgb: 180,142,240;
  /* Sentiment scale (voice platform): positive mint / neutral slate / negative rose */
  --evra-sent-pos: #3ECF8E; --evra-sent-neu: #8A939C; --evra-sent-neg: #E5636A;

  /* Misc states */
  --evra-disabled-fill: rgba(255,255,255,0.04);
  --evra-selection-bg:  rgba(46,158,106,0.28);

  /* Geometry + type */
  /* Supabase: --borderradius-xs 2px / sm 4px / lg 8px / xl 16px, and their
     buttons compute to exactly 6px. 12px cards read noticeably rounder
     than theirs. */
  --evra-r-card: 8px;  --evra-r-input: 6px;  --evra-r-modal: 8px;
  --evra-r-xs: 2px;  --evra-r-sm: 4px;  --evra-r-lg: 8px;  --evra-r-xl: 16px;
  /* Supabase's exact stacks, sampled from their --font-sans / --font-mono /
     --font-heading. Inter + Source Code Pro are loaded from Google Fonts in
     section 0; system fallbacks mirror theirs verbatim so a blocked font
     request degrades the way supabase.com itself does. */
  --evra-font: 'Inter','Inter Fallback',system-ui,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --evra-mono: 'Source Code Pro','Source Code Pro Fallback',Menlo,ui-monospace,monospace;
  --evra-font-heading: 'Manrope','Manrope Fallback',system-ui,'Helvetica Neue',Helvetica,Arial,sans-serif;
  /* Supabase's normal body weight is 450, not 400 -- this is a real part of
     how their text reads and is easy to miss. */
  --evra-fw-normal: 450;  --evra-fw-medium: 500;
  --evra-fw-semibold: 600; --evra-fw-bold: 700;

  /* Type scale — Supabase's own steps. Note base = .9375rem (15px),
     not the usual 16px; their whole vertical rhythm follows from it. */
  --evra-fs-xs: .75rem;    --evra-fs-sm: .875rem;   --evra-fs-base: .9375rem;
  --evra-fs-lg: 1rem;      --evra-fs-xl: 1.125rem;  --evra-fs-2xl: 1.375rem;
  --evra-fs-3xl: 1.75rem;  --evra-fs-4xl: 2.125rem; --evra-fs-5xl: 2.875rem;
  --evra-lh-tight: 1.25;   --evra-lh-normal: 1.5;   --evra-lh-snug: 1.375;

  /* Spacing — Supabase's --spacing-xs..xl */
  --evra-sp-xs: 4px; --evra-sp-sm: 8px; --evra-sp-md: 16px;
  --evra-sp-lg: 32px; --evra-sp-xl: 64px;

  /* Elevation — overlays only */
  --evra-shadow-overlay: 0 8px 24px rgba(0,0,0,0.45);
  --evra-shadow-modal:   0 16px 48px rgba(0,0,0,0.55);

  /* Z-index scale (Vuexy stack-fight prevention) */
  --evra-z-dropdown:1000; --evra-z-sticky:1020; --evra-z-backdrop:1040;
  --evra-z-modal:1050; --evra-z-toast:1080; --evra-z-tooltip:1090;

  /* Motion */
  --evra-ease: cubic-bezier(0.2,0,0,1);
  --evra-t-micro:120ms; --evra-t-pop:180ms; --evra-t-panel:200ms;

  /* Sidebar */
  --evra-sidebar-w: 232px;

  /* ── Bootstrap/Vuexy bridge ── */
  --bs-primary: var(--evra-primary);
  --bs-primary-rgb: var(--evra-primary-rgb);
  --bs-primary-text-emphasis: var(--evra-primary);
  --bs-primary-bg-subtle: rgba(var(--evra-primary-rgb),0.08);
  --bs-primary-border-subtle: rgba(var(--evra-primary-rgb),0.18);
  --bs-body-bg: var(--evra-canvas);
  --bs-body-color: var(--evra-text-2);
  --bs-heading-color: var(--evra-text-1);
  --bs-card-bg: var(--evra-surface-1);
  --bs-card-border-color: var(--evra-border-hair);
  --bs-border-color: var(--evra-border-hair);
  --bs-border-color-translucent: var(--evra-border-hair);
  --vx-sidebar-bg: var(--evra-surface-0);
  --vx-sidebar-width: var(--evra-sidebar-w);

  /* ── LEGACY ALIAS TOKENS (older pages reference these — re-skinned here) ── */
  --canvas: var(--evra-canvas);
  --bg-1: var(--evra-surface-1);
  --bg-2: var(--evra-surface-2);
  --bg-3: var(--evra-surface-2);
  --bg-4: var(--evra-surface-0);
  --panel: var(--evra-surface-1);
  --input: var(--evra-surface-2);
  --sidebar-bg: var(--evra-surface-0);
  --sidebar-w: var(--evra-sidebar-w);
  --line-1: var(--evra-border-hair);
  --line-2: var(--evra-border-mid);
  --line-3: var(--evra-border-strong);
  --fg-1: var(--evra-text-1);
  --fg-2: var(--evra-text-2);
  --fg-3: var(--evra-text-3);
  --fg-4: var(--evra-text-4);
  --accent: var(--evra-primary);
  --accent-bright: var(--evra-primary-bright);
  --accent-deep: var(--evra-primary-active);
  --accent-ink: var(--evra-ink);
  --accent-tint: var(--evra-primary-tint);
  --accent-ring: var(--evra-primary-ring);
  --warn: var(--evra-warning);
  --neg: var(--evra-danger);
  --err: var(--evra-danger);
  --amb: var(--evra-warning);
  --acc: var(--evra-primary);
  --r-card: var(--evra-r-card);
  --r-input: var(--evra-r-input);
  --shadow-modal: var(--evra-shadow-modal);
  --font-body: var(--evra-font);
  --font-mono: var(--evra-mono);
  --surface-1: var(--evra-surface-1);
  --surface-2: var(--evra-surface-2);
  --text-primary: var(--evra-text-1);
  --text-secondary: var(--evra-text-3);
  /* Light skin (future): add [data-theme=light] redefining ONLY the tokens above. */
}

/* ── 2. Base ───────────────────────────────────────────────────────────────── */
html, body { background:var(--evra-canvas) !important; color:var(--evra-text-2) !important; }
body, .main-wrap, .card, .btn, button, input, select, textarea, .form-control, .form-select,
h1,h2,h3,h4,h5,h6, p, span, div, a, label {
  font-family:var(--evra-font) !important;
}
.font-monospace, code, pre, [class*="mono"], .cost-mono, .rec-mono, .svc-mono,
.comp-amount, .comp-share, .comp-usage, .comp-rate, .num-mono, .kpi .v, .fleet-val {
  font-family:var(--evra-mono) !important;
}
* { font-variant-numeric: tabular-nums; }
::selection { background:var(--evra-selection-bg); color:var(--evra-text-1); }
a { color:var(--evra-link); } a:hover { color:var(--evra-link-hover); }

h1,h2,h3,h4,h5,h6 { color:var(--evra-text-1); }
h1,.evra-h1 { font-size:22px; line-height:28px; font-weight:600; letter-spacing:-0.015em; }
h2,.evra-h2 { font-size:18px; line-height:24px; font-weight:600; letter-spacing:-0.01em; }
h3,.evra-h3 { font-size:15px; line-height:22px; font-weight:600; letter-spacing:-0.01em; }
h4,.evra-h4 { font-size:13px; line-height:18px; font-weight:600; }
.evra-display { font-size:28px; line-height:34px; font-weight:600; letter-spacing:-0.02em; }
small,.evra-small { font-size:12px; line-height:18px; }
.evra-caption { font-size:11px; line-height:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--evra-text-3); }
.evra-micro { font-size:10px; line-height:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.10em; color:var(--evra-text-4); }

/* Focus — keyboard-grade polish, never clipped, never removed */
:focus-visible { outline:2px solid var(--evra-primary-ring) !important; outline-offset:2px; border-radius:4px; }
.card, .tbl-wrap, .modal, .layout-menu { overflow:visible; }

/* Scrollbar */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.20); }

/* ── 3. Cards — FLAT (depth by border; overlays only get shadows) ──────────── */
.card {
  background:var(--evra-surface-1) !important;
  border:1px solid var(--evra-border-hair) !important;
  box-shadow:none !important;
  border-radius:var(--evra-r-card) !important;
}
.card:hover { border-color:var(--evra-border-mid) !important; }
.card-header {
  background:transparent !important;
  border-bottom:1px solid var(--evra-border-hair) !important;
  padding:13px 16px !important;
}
.card-body { padding:16px !important; }
.card-title { color:var(--evra-text-1) !important; font-weight:600 !important; letter-spacing:-0.005em !important; font-size:15px !important; margin-bottom:0 !important; }

/* ── 4. Buttons ────────────────────────────────────────────────────────────── */
.btn { border-radius:var(--evra-r-input) !important; transition:all var(--evra-t-micro) var(--evra-ease) !important; }
.btn-primary, .bg-primary {
  background-color:var(--evra-primary) !important;
  border-color:var(--evra-primary) !important;
  color:var(--evra-ink) !important;
  font-weight:600 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12) !important; /* premium inner highlight */
}
.btn-primary:hover { background-color:var(--evra-primary-hover) !important; border-color:var(--evra-primary-hover) !important; color:var(--evra-ink) !important; }
.btn-primary:active { background-color:var(--evra-primary-active) !important; box-shadow:inset 0 1px 0 rgba(0,0,0,0.15) !important; }
.btn-primary svg, .btn-primary i { color:var(--evra-ink) !important; }
.btn-outline-danger { color:var(--evra-danger) !important; border-color:rgba(var(--evra-danger-rgb),0.4) !important; }
.btn-outline-danger:hover { background:var(--evra-danger-tint) !important; color:var(--evra-danger) !important; }
.btn:disabled, .btn.disabled { background:var(--evra-disabled-fill) !important; color:var(--evra-text-disabled) !important; border-color:transparent !important; }

.btn-ev-ghost {
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  color:var(--evra-text-2) !important;
  font-size:12px !important; font-weight:500 !important;
  padding:7px 14px !important; border-radius:6px !important;
  transition:all var(--evra-t-micro) var(--evra-ease) !important;
}
.btn-ev-ghost:hover { background:rgba(255,255,255,0.06) !important; border-color:var(--evra-border-strong) !important; color:var(--evra-text-1) !important; }

/* ── 5. Badges / chips — tint + semantic text + dot; sentence case ─────────── */
.bg-label-primary, .badge.bg-primary, .id-chip.live, .status-pill.live,
.sale-badge, .cust-badge, .seg.on, .rt-tab.on .rt-count, .view-pill.on {
  background:var(--evra-primary-tint) !important; color:var(--evra-primary) !important; border-color:rgba(var(--evra-primary-rgb),0.32) !important;
}
.status-pill.live::before, .id-chip.live::before, .agent-av.live::after { background:var(--evra-primary) !important; }
.bg-label-primary { background:var(--evra-primary-tint) !important; color:var(--evra-primary) !important; }
.text-primary { color:var(--evra-primary) !important; }
.avatar-initial.rounded.bg-label-primary, .bg-label-primary.avatar-initial { background:var(--evra-primary-tint) !important; color:var(--evra-primary) !important; }
.badge.bg-label-success { background:var(--evra-primary-tint) !important; color:var(--evra-success) !important; }
.badge.bg-label-danger  { background:var(--evra-danger-tint) !important; color:var(--evra-danger) !important; }
.badge.bg-label-warning { background:var(--evra-warning-tint) !important; color:var(--evra-warning) !important; }
.badge.bg-label-info    { background:var(--evra-info-tint) !important; color:var(--evra-info-bright) !important; }
.badge.bg-label-secondary { background:rgba(255,255,255,0.05) !important; color:var(--evra-text-3) !important; }

/* ── 6. Nav tabs ───────────────────────────────────────────────────────────── */
.nav-tabs .nav-link.active { color:var(--evra-text-1) !important; border-bottom-color:var(--evra-primary) !important; }
.nav-tabs { border-bottom-color:var(--evra-border-hair) !important; }

/* ── 7. Forms ──────────────────────────────────────────────────────────────── */
.form-control, .form-select {
  background-color:var(--evra-surface-2) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  color:var(--evra-text-1) !important;
  font-size:13px !important;
  border-radius:var(--evra-r-input) !important;
  min-height:36px;
}
.form-control:focus, .form-select:focus {
  border-color:var(--evra-border-focus) !important;
  box-shadow:0 0 0 3px rgba(var(--evra-primary-rgb),0.10) !important;
  background-color:rgba(255,255,255,0.04) !important;
}
.form-control::placeholder { color:var(--evra-text-4) !important; }
.form-label {
  color:var(--evra-text-3) !important;
  font-size:11px !important; text-transform:uppercase !important;
  letter-spacing:0.08em !important; font-weight:600 !important; margin-bottom:6px !important;
}
.form-check-input:checked { background-color:var(--evra-primary) !important; border-color:var(--evra-primary) !important; }
.is-invalid, .form-control.error { border-color:var(--evra-danger) !important; background:var(--evra-danger-tint) !important; }

/* ── 8. Tables — dense ops instrument ──────────────────────────────────────── */
.table {
  --bs-table-color:var(--evra-text-2);
  --bs-table-bg:transparent;
  --bs-table-border-color:var(--evra-border-hair);
  --bs-table-striped-bg:transparent;         /* no zebra on dark */
  --bs-table-hover-bg:rgba(255,255,255,0.03);
}
.table thead th, table.tbl th, .atbl thead th {
  color:var(--evra-text-3) !important;
  font-size:11px !important; font-weight:600 !important;
  letter-spacing:0.08em !important; text-transform:uppercase !important;
  border-bottom:1px solid var(--evra-border-hair) !important;
  padding:10px 14px !important; height:36px;
}
.table tbody td {
  border-bottom:1px solid rgba(255,255,255,0.04) !important;
  vertical-align:middle !important;
  padding:11px 14px !important; font-size:13px !important;
}
.table tbody tr:hover td, table.tbl tbody tr:hover td { background:rgba(255,255,255,0.03) !important; }
tr.evra-selected td, .table tbody tr.selected td { background:var(--evra-primary-tint) !important; box-shadow:inset 3px 0 0 var(--evra-primary); }
.table-sticky thead th { position:sticky; top:0; background:var(--evra-surface-2) !important; z-index:var(--evra-z-sticky); }
.table-comfy tbody td { padding:15px 14px !important; }

/* ── 9. Layout ─────────────────────────────────────────────────────────────── */
.layout-wrapper { display:flex !important; min-height:100vh !important; }
.layout-container { display:flex !important; width:100% !important; }
.layout-menu {
  width:var(--evra-sidebar-w) !important; min-width:var(--evra-sidebar-w) !important;
  background:var(--evra-surface-0) !important;
  border-right:1px solid var(--evra-border-hair) !important;
  position:fixed !important; top:0 !important; left:0 !important; bottom:0 !important;
  z-index:var(--evra-z-dropdown) !important; overflow-y:auto !important;
  transition:width var(--evra-t-pop) var(--evra-ease);
}
.layout-content-navbar .layout-page { margin-left:var(--evra-sidebar-w) !important; flex:1 !important; min-width:0 !important; }
.container-xxl { max-width:1280px !important; padding:24px !important; margin:0 auto !important; }
.container-xxl.evra-wide { max-width:100% !important; }   /* data-heavy tables may go full width */
@media (max-width:1199px){ .container-xxl { padding:16px !important; } }

/* ── 10. Page header ───────────────────────────────────────────────────────── */
.evra-page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:24px; gap:16px; flex-wrap:wrap; }
/* h1/h4 sizing moved to section 21 (canonical page-title scale, design-critique #1) -- kept as one rule instead of two conflicting ones for the same selector. */
.evra-page-header p { color:var(--evra-text-3); margin:0; font-size:13px; }
.breadcrumb { font-size:12px !important; margin-bottom:6px !important; text-transform:none !important; }
.breadcrumb-item, .breadcrumb-item a { color:var(--evra-text-4) !important; text-decoration:none !important; }
.breadcrumb-item a:hover { color:var(--evra-text-2) !important; }
.breadcrumb-item.active { color:var(--evra-text-3) !important; }
.breadcrumb-item + .breadcrumb-item::before { color:rgba(255,255,255,0.18) !important; }

/* ── 11. SIGNATURE 1: Instrument KPIs ──────────────────────────────────────── */
/* Bumped 28->32px / 600->700 (design-critique #1, 2026-07): the page H1 and
   the hero KPI number read at too-similar weight/size platform-wide. This is
   the ONE canonical "big number" size -- see section 21 below for the
   matching canonical page-title size these numbers must now clearly dominate. */
.kpi-stat h4, .kpi .v, .fleet-val, .evra-kpi-value {
  font-family:var(--evra-mono) !important;
  font-size:32px !important; line-height:38px !important; font-weight:700 !important;
  color:var(--evra-text-1) !important; letter-spacing:-0.03em !important; margin:0;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
/* Same size discipline extended to the equivalent per-page hero-number
   classes (BI Home's .hero-val, Planner/Book-Churn's .pnum .pv) so the whole
   platform reads at ONE scale instead of 26/28/30px all doing the same job.
   Color is deliberately NOT forced here -- these carry their own mint/warn/
   crit semantic states (one even via an inline style on BI Home's "at-risk"
   tile) that must keep working untouched. */
.hero-val, .pnum .pv {
  font-family:var(--evra-mono) !important;
  font-size:32px !important; line-height:38px !important; font-weight:700 !important;
  letter-spacing:-0.03em !important;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
.hero-val .u, .pnum .pv .u { font-size:14px !important; font-weight:500 !important; font-family:var(--evra-font) !important; letter-spacing:normal !important; }
.kpi-stat .kpi-label, .kpi .l, .fleet-lbl, .evra-kpi-label {
  font-size:11px !important; text-transform:uppercase !important; letter-spacing:0.08em !important;
  color:var(--evra-text-3) !important; font-weight:600 !important;
}
.kpi-stat .kpi-sub, .fleet-sub { font-size:11px; color:var(--evra-text-4); margin-top:6px; }
.evra-kpi-delta { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; }
.evra-kpi-delta.up { background:var(--evra-primary-tint); color:var(--evra-primary); }
.evra-kpi-delta.down { background:var(--evra-danger-tint); color:var(--evra-danger); }

/* ── 12. SIGNATURE 2: Sidebar signal rail ──────────────────────────────────── */
.menu-vertical .menu-item.active > .menu-link,
.menu-vertical .menu-item.active .menu-link {
  background:rgba(var(--evra-primary-rgb),0.08) !important;
  color:var(--evra-primary) !important;
  box-shadow:inset 2px 0 0 var(--evra-primary) !important;
}
.menu-vertical .menu-link:hover { color:var(--evra-text-1) !important; }
.app-brand-text { color:var(--evra-text-1) !important; }
aside.sidebar { background:var(--evra-surface-0) !important; border-right:1px solid var(--evra-border-hair) !important; }
aside.sidebar a.active, aside.sidebar .nav-item.active > a {
  box-shadow:inset 2px 0 0 var(--evra-primary) !important;
  background:rgba(var(--evra-primary-rgb),0.08) !important;
  color:var(--evra-primary) !important;
}
aside.sidebar .cta-test-call { background:var(--evra-primary-tint) !important; color:var(--evra-primary) !important; border:1px solid rgba(var(--evra-primary-rgb),0.2) !important; }
aside.sidebar .sidebar-foot .btn-primary { background:var(--evra-primary) !important; color:var(--evra-ink) !important; }

/* ── 13. SIGNATURE 3: System Pulse (ops pages only — .page-ops) ────────────── */
.evra-pulse {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--evra-surface-2); border:1px solid var(--evra-border-mid);
  border-radius:999px; padding:5px 12px;
  font-family:var(--evra-mono) !important; font-size:12px; color:var(--evra-text-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
.evra-pulse .dot { width:6px; height:6px; border-radius:50%; background:var(--evra-primary); position:relative; }
.evra-pulse.degraded .dot { background:var(--evra-warning); }
.evra-pulse.offline .dot { background:var(--evra-danger); }
@media (prefers-reduced-motion: no-preference) {
  .evra-pulse.connecting .dot { animation:evra-pulse-ring 1.6s var(--evra-ease) 3; }
  .live, .live-dot-green, .t-dot { animation:evra-pulse-ring 2.4s ease-in-out infinite; }
}
@keyframes evra-pulse-ring {
  0% { box-shadow:0 0 0 0 rgba(var(--evra-primary-rgb),0.40); }
  70% { box-shadow:0 0 0 6px rgba(var(--evra-primary-rgb),0); }
  100% { box-shadow:0 0 0 0 rgba(var(--evra-primary-rgb),0); }
}

/* ── 14. Status dots / avatars / bars (legacy classes re-skinned) ──────────── */
.live-dot { width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:5px; }
.live-dot-green { background:var(--evra-primary); }
.live-dot-amber { background:var(--evra-warning); }
.live-dot-gray  { background:rgba(255,255,255,0.3); }
.avatar { width:38px; height:38px; border-radius:6px; display:flex; align-items:center; justify-content:center; }
.avatar-initial { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; border-radius:inherit; }
.agent-av { width:38px; height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; }
.agent-av-green, .agent-av-teal { background:var(--evra-primary-tint); color:var(--evra-primary); }
.agent-av-amber  { background:var(--evra-warning-tint); color:var(--evra-warning); }
.agent-av-red    { background:var(--evra-danger-tint); color:var(--evra-danger); }
.agent-av-blue   { background:var(--evra-info-tint); color:var(--evra-info-bright); }
.agent-av-purple { background:rgba(var(--evra-dv-violet-rgb),0.10); color:var(--evra-dv-violet); }
.conv-bar { width:80px; height:4px; background:var(--evra-border-hair); border-radius:2px; overflow:hidden; }
.conv-bar-fill { height:100%; background:var(--evra-primary); border-radius:2px; }

/* ── 15. Agent-edit tab bar (segmented) ────────────────────────────────────── */
/* Agent tab strip — SAME language as the campaign hub's tabs (operator
   2026-07-27): no background container, plain text tabs on a hairline
   baseline, active = green text + green underline. bundle-wiring relocates
   the strip to sit BELOW the agent identity header, matching the campaign
   page's layout. */
.evra-tabs {
  display:flex; flex-wrap:wrap; gap:4px; align-items:center;
  margin:0 32px 18px !important; padding:0 !important;
  box-sizing:border-box;
  background:none; border:none;
  border-bottom:1px solid var(--evra-border-hair);
  border-radius:0; box-shadow:none; overflow:visible;
}
.evra-tabs::-webkit-scrollbar { display:none; }
.evra-tabs a {
  flex:0 0 auto; text-align:center; padding:10px 14px;
  font-size:13px; font-weight:500; color:var(--evra-text-3);
  text-decoration:none; white-space:nowrap;
  border:none; border-bottom:2px solid transparent;
  border-radius:0; transition:color var(--evra-t-micro) var(--evra-ease);
  letter-spacing:-0.005em; line-height:1;
}
.evra-tabs a:hover { color:var(--evra-text-1); background:none; }
/* Active tab keeps the SAME font-weight as inactive (500) so its box width never
   changes -- a heavier active tab was widening and shifting the whole strip between
   pages ("tabs change position when I click", operator 2026-07-28). Active state is
   shown by the emerald colour + the 2px underline, not by width. */
.evra-tabs a.on { color:var(--evra-primary); background:none; border-bottom-color:var(--evra-primary); font-weight:500; }

/* ── 16. Skeleton loading (ops tool law: no raw empty flashes) ─────────────── */
.evra-skeleton { background:var(--evra-surface-2); border-radius:6px; position:relative; overflow:hidden; min-height:12px; }
@media (prefers-reduced-motion: no-preference) {
  .evra-skeleton::after {
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg,transparent,rgba(var(--evra-primary-rgb),0.05),transparent);
    animation:evra-shimmer 1.2s infinite;
  }
}
@keyframes evra-shimmer { from { transform:translateX(-100%);} to { transform:translateX(100%);} }

/* ── 17. Empty states / toasts / modals ────────────────────────────────────── */
.evra-empty { text-align:center; padding:40px 24px; max-width:360px; margin:0 auto; }
.evra-empty i { font-size:40px; color:rgba(255,255,255,0.18); }
.evra-empty p { color:var(--evra-text-3); font-size:13px; margin:10px 0 14px; }
.toast-custom { background:var(--evra-surface-3) !important; border:1px solid var(--evra-border-mid) !important; border-radius:12px !important; box-shadow:var(--evra-shadow-overlay) !important; z-index:var(--evra-z-toast) !important; }
.modal-content { background:var(--evra-surface-1) !important; border:1px solid var(--evra-border-mid) !important; border-radius:var(--evra-r-modal) !important; box-shadow:var(--evra-shadow-modal) !important; }
.modal-backdrop { background:rgba(0,0,0,0.55) !important; z-index:var(--evra-z-backdrop) !important; }
.dropdown-menu { background:var(--evra-surface-3) !important; border:1px solid var(--evra-border-mid) !important; box-shadow:var(--evra-shadow-overlay) !important; border-radius:8px !important; z-index:var(--evra-z-dropdown) !important; }

/* ── 18. Chart tooltip (used by evra-charts.js custom tooltip) ─────────────── */
.evra-chart-tooltip {
  background:var(--evra-surface-3); border:1px solid var(--evra-border-mid);
  border-radius:6px; padding:8px 12px; font-size:12px; color:var(--evra-text-2);
  font-family:var(--evra-mono) !important; pointer-events:none;
  box-shadow:var(--evra-shadow-overlay); z-index:var(--evra-z-tooltip);
}

/* ── 19. Motion — no bounce; card entrance kept subtle ─────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes evra-rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
  .card { animation:evra-rise .28s var(--evra-ease) both; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}
/* legacy float animation retired (not enterprise) */
.ev-ico-float, .kpi-ico, .metric-ico { animation:none !important; display:inline-flex; }

/* macOS traffic-light dots (kept, re-skinned neutral) */
.win-dots { display:inline-flex; gap:6px; align-items:center; }
.win-dots i { width:11px; height:11px; border-radius:50%; display:inline-block; }
.win-dots .r { background:var(--evra-danger); } .win-dots .y { background:var(--evra-warning); } .win-dots .g { background:var(--evra-primary); }

/* ── 20. Utilities ─────────────────────────────────────────────────────────── */
.text-1 { color:var(--evra-text-1) !important; } .text-2 { color:var(--evra-text-2) !important; }
.text-3 { color:var(--evra-text-3) !important; } .text-4 { color:var(--evra-text-4) !important; }
.surface-1 { background:var(--evra-surface-1) !important; } .surface-2 { background:var(--evra-surface-2) !important; } .surface-3 { background:var(--evra-surface-3) !important; }
.mono { font-family:var(--evra-mono) !important; font-variant-numeric:tabular-nums; }
.muted { color:var(--evra-text-3); }

/* ── 21. Page title (design-critique #1, cont.) ─────────────────────────────
   Canonical, restrained page-title size -- see section 11 above for the
   matching KPI-hero size these titles must now read smaller/quieter than.
   .pg-title is the informal convention several newer "Modeling" pages already
   used locally (20px/700) at a slightly different value each time; folding it
   in here + registering .evra-page-title as the forward-looking shared name
   means one canonical rule instead of N near-identical per-page copies. */
.evra-page-header h1, .evra-page-header h4, .pg-title, .evra-page-title {
  font-size:20px !important; line-height:26px !important; font-weight:700 !important;
  letter-spacing:-0.01em !important; color:var(--evra-text-1) !important; margin:0 0 4px !important;
}

/* ── 22. Table headers + metadata captions (design-critique #2) ────────────
   .table thead th / table.tbl th / .atbl thead th (section 8 above) already
   converged on one look; this extends the SAME visual spec to the other
   genuinely different per-page table-header classes found on BI Home /
   Planner / Book Churn (table.bi-tbl th / table.proj th), and adds the two
   reusable class names (.evra-th / .evra-meta) new markup should reach for
   instead of inventing another one-off. */
table.bi-tbl th, table.proj th, .evra-th {
  color:var(--evra-text-3) !important;
  font-size:11px !important; font-weight:600 !important;
  letter-spacing:0.08em !important; text-transform:uppercase !important;
}
.evra-meta {
  font-size:11px; font-weight:500; color:var(--evra-text-4); letter-spacing:0.01em;
}

/* ── 23. Muted empty-value dash (design-critique #3) ────────────────────────
   A bare "-"/"--" for not-yet-available data was, in several places, still
   rendering at the row's normal (bright) text color -- indistinguishable
   from a real zero-width bug. One shared, deliberately dim treatment. */
.evra-dash, .val-dash {
  color:var(--evra-text-4) !important; font-weight:400 !important; opacity:0.75;
}

/* ── 24. Live/actionable row accent (design-critique #6) ────────────────────
   A 2-3px inset accent on the row's leading edge for rows that represent
   something live/actionable right now (a running campaign, a critical
   alert) -- same mechanism already used by .table tbody tr.selected
   (section 8), applied here to a semantic class instead of a UI-state one. */
tr.row-live-accent td:first-child { box-shadow:inset 3px 0 0 var(--evra-primary); }
tr.row-alert-accent td:first-child { box-shadow:inset 3px 0 0 var(--evra-danger); }

/* ── 25. Status badges — ONE canonical pill (design-critique #7) ────────────
   Campaign status (draft/scheduled/live/paused/completed/archived/killed),
   agent status, and similar lifecycle states were each getting their own
   hand-rolled pill (page-campaigns-hub's .ch color modifiers, page-01-
   agents-list's separately-defined .status-pill, page-modeling-mission-
   control's always-green .type-pill regardless of actual value...). One base
   shape + semantic modifiers, reusing the exact tokens every other badge on
   the platform already uses (section 5). Base visual matches the converged
   pill look (pill shape, tinted fill, small leading dot) rather than
   inventing a new one. */
.status-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; line-height:1;
  padding:4px 10px; border-radius:999px; white-space:nowrap;
  background:rgba(255,255,255,0.05); color:var(--evra-text-3);
  border:1px solid transparent;
}
.status-badge::before { content:""; width:6px; height:6px; border-radius:50%; flex:none; background:currentColor; opacity:0.9; }
.status-badge.nodot::before { display:none; }
.status-badge--neutral { background:rgba(255,255,255,0.05); color:var(--evra-text-3); }
.status-badge--live    { background:var(--evra-primary-tint); color:var(--evra-primary); border-color:rgba(var(--evra-primary-rgb),0.30); }
.status-badge--info    { background:var(--evra-info-tint); color:var(--evra-info-bright); border-color:rgba(var(--evra-info-rgb),0.28); }
.status-badge--paused  { background:var(--evra-warning-tint); color:var(--evra-warning); border-color:rgba(var(--evra-warning-rgb),0.28); }
.status-badge--danger  { background:var(--evra-danger-tint); color:var(--evra-danger); border-color:rgba(var(--evra-danger-rgb),0.28); }

/* ── Native file/date pickers — match the dark theme (audit fix) ───────── */
input[type="file"]{background:var(--evra-surface-2,#1E211F);border:1px solid var(--evra-border,rgba(255,255,255,0.1));color:var(--evra-text-2,#C8CCD2);border-radius:6px;padding:6px 10px;font-size:12.5px;}
input[type="file"]::file-selector-button,input[type="file"]::-webkit-file-upload-button{background:rgba(var(--evra-primary-rgb,88,122,85),0.15);color:var(--evra-primary,#2E9E6A);border:1px solid rgba(var(--evra-primary-rgb,88,122,85),0.3);border-radius:5px;padding:5px 11px;margin-right:10px;cursor:pointer;font-size:12px;font-weight:600;}
input[type="date"],input[type="time"],input[type="datetime-local"]{background:var(--evra-surface-2,#1E211F)!important;border:1px solid var(--evra-border,rgba(255,255,255,0.1))!important;color:var(--evra-text-1,#E4E4E4)!important;border-radius:6px;padding:7px 10px;font-size:12.5px;color-scheme:dark;}
input[type="date"]::-webkit-calendar-picker-indicator,input[type="time"]::-webkit-calendar-picker-indicator{filter:invert(0.75);cursor:pointer;}


/* ── FIT TO PAGE — kill dead whitespace bands (sidebar-shell pages only; standalone marketing/login pages keep their centered container). ── */
.main-wrap .container,
.main-wrap .container-sm,
.main-wrap .container-md,
.main-wrap .container-lg,
.main-wrap .container-xl,
.main-wrap .container-xxl,
.main-wrap .container-fluid{ max-width:100% !important; }
.main-wrap .card{ max-width:100% !important; }


/* ══════════════ COMPACT / DENSITY — site-wide (body+!important beats per-page <style>) ══════════════ */
/* containers: trim the 24px page padding */
body .container-xxl,
body .container{ padding:14px 16px !important; }
body .main-wrap > .container-xxl,
body .main-wrap > .container{ padding:14px 18px !important; }
.avm-wrap .avm-header{ padding:14px 20px 8px !important; }

/* every card variant across the redesign -> tighter padding + smaller gap below */
body .acard, body .card, body .wiz-card, body .wz-card, body .avm-card, body .avm-widget,
body .avm-tbl-card, body .md-card, body .hub-card, body .man-card, body .ws-card,
body .action-card, body .chart-card, body .kpi-card, body .rev-card, body .rp-card,
body .bp-card, body .trig-card, body .jvm-card, body .inst-card, body .chan-card,
body .agent-card, body .rev-card, body .fleet-cell, body .setup-note, body .help-panel{
  padding:13px 15px !important; margin-bottom:12px !important;
}
body .card-body, body .md-card-body, body .man-card-body, body .hub-card-body,
body .wiz-body, body .avm-card-body{ padding:13px 15px !important; }
body .card-header, body .avm-card-header{ padding:9px 15px !important; }

/* KPI / stat tiles: kill the tall empty band under the value */
body .kpi, body .kpi-card, body .stat, body .stat-cell, body .evra-kpi{ padding:10px 14px !important; }
body .kpi .l, body .kpi-card .l{ margin-bottom:5px !important; }

/* row-style key/value lists (Identity, Automation, review rows) */
body .row-line, body .formrow, body .kv-row, body .rev-row, body .set-row{
  padding-top:7px !important; padding-bottom:7px !important;
}

/* section headers + page header vertical rhythm */
body .sec-title, body .avm-sec-title{ margin-bottom:10px !important; }
body .evra-page-header, body .avm-header{ margin-bottom:14px !important; }

/* tables: tighter rows */
body table td, body table th,
body .table-comfy tbody td, body .avm-tbl td, body .avm-tbl th{
  padding-top:7px !important; padding-bottom:7px !important;
}

/* bootstrap spacing utilities: shrink the big rhythm (moderate, not cramped) */
body .row.g-4{ --bs-gutter-x:14px !important; --bs-gutter-y:14px !important; }
body .row.g-3{ --bs-gutter-x:12px !important; --bs-gutter-y:12px !important; }
body .mb-4{ margin-bottom:14px !important; }
body .mb-3{ margin-bottom:10px !important; }
body .py-4{ padding-top:14px !important; padding-bottom:14px !important; }
body .py-3{ padding-top:10px !important; padding-bottom:10px !important; }
body .mt-4{ margin-top:14px !important; }

/* Uniform hover/focus cue for clickable surfaces platform-wide -- buttons,
   ghost buttons, table rows with a click handler, sidebar nav items, and
   generic .card links previously showed no discernible state change on
   hover against the dark canvas. Additive only (border + subtle lighten),
   never overrides an element's own explicit hover rule since those are
   more specific and win naturally. */
body .btn:not(:disabled):hover,
body .btn-ev-ghost:not(:disabled):hover,
body a.ws-card:hover,
body a.rp-card:hover,
body tr.rowlink:hover,
body tr[onclick]:hover{
  border-color: rgba(46,158,106,0.35) !important;
  background-color: rgba(255,255,255,0.03);
  transition: border-color .15s, background-color .15s;
}
body .sidebar .nav-item:hover{
  background-color: rgba(255,255,255,0.04);
  transition: background-color .15s;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SUPABASE COMPONENT LAYER  (2026-07-25)
   Derived from supabase.com + their dashboard, sampled live rather than
   guessed. This is appended LAST so it wins over the older Vuexy/Graphite
   conventions it deliberately replaces.

   The single biggest thing that made this platform not look like Supabase was
   the TITLE convention: everything here was UPPERCASE + letter-spaced + green.
   Supabase titles are sentence case, medium weight, plain white ("Columns",
   "Postgres Database", "Foreign keys"). Field labels are small, muted, and
   also sentence case ("Name", "Type", "Default Value"). Those two changes do
   more for the resemblance than any colour tweak.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Card: the core Supabase container ─────────────────────────────────────
   Own border, own fill one step above canvas, 8px radius, no resting shadow.
   Each logical block gets ITS OWN card -- Supabase never stacks unrelated
   reports inside one flat panel. */
.sb-card{
  background:var(--evra-surface-1);
  border:1px solid var(--evra-border-hair);
  border-radius:var(--evra-r-card,8px);
  padding:24px;
  margin-bottom:16px;
}
.sb-card--tight{padding:16px;}
.sb-card--flush{padding:0;overflow:hidden;}
/* Cards are grouped in a grid with a real gap, not butted together. */
.sb-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.sb-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.sb-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:1100px){.sb-grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:760px){.sb-grid--2,.sb-grid--3{grid-template-columns:1fr;}}

/* ── Titles: sentence case, medium, white. NOT uppercase, NOT green. ────── */
.sb-title{
  font-size:var(--evra-fs-lg,1rem);
  font-weight:var(--evra-fw-medium,500);
  color:var(--evra-text-1);
  letter-spacing:normal;
  text-transform:none;
  margin:0;
  display:flex;align-items:center;gap:8px;
}
.sb-title .ti{color:var(--evra-text-3);font-size:16px;}
.sb-subtitle{
  font-size:var(--evra-fs-sm,.875rem);
  color:var(--evra-text-3);
  margin-top:4px;
  font-weight:var(--evra-fw-normal,450);
}
/* Header row inside a card: title left, actions right, hairline beneath when
   the card holds a table or list. */
.sb-card-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.sb-card-hdr--ruled{border-bottom:1px solid var(--evra-border-hair);padding-bottom:16px;}

/* ── Field labels: small, muted, sentence case ──────────────────────────── */
.sb-label{
  font-size:var(--evra-fs-sm,.875rem);
  color:var(--evra-text-3);
  font-weight:var(--evra-fw-normal,450);
  letter-spacing:normal;
  text-transform:none;
  display:block;margin-bottom:6px;
}

/* ── Divider between titled sections inside one card ───────────────────── */
.sb-divider{height:1px;background:var(--evra-border-hair);margin:24px -24px;}

/* ── Dashed "add" affordance (their Add column / Add foreign key) ───────── */
.sb-dashed{
  border:1px dashed var(--evra-border-strong);
  border-radius:var(--evra-r-input,6px);
  padding:16px;display:flex;align-items:center;justify-content:center;
  background:transparent;
}

/* ── PLATFORM-WIDE TITLE CORRECTION ──────────────────────────────────────
   Retires the old uppercase + letterspaced + green heading treatment on every
   page at once. Kept as one narrow block so it is easy to find and reason
   about, rather than editing 95 pages. */
.card-title,
.sec-h,
.avm-tbl-hdr h3,
.avm-card h3,
.acard-title,
.section-lbl,
.avm-section-lbl,
.avm-widget-title,
.lcm-panel-t,
.tg-card-hdr > span:first-child,
.avm-insights-hdr2 h3,
.calllog-title{
  text-transform:none !important;
  letter-spacing:-0.01em !important;
  color:var(--evra-text-1) !important;
  font-weight:600 !important;
  font-size:1rem !important;
}
/* Small field/metric labels: GPT's recipe -- uppercase + 0.06em tracking IS
   correct at this size on Supabase; only LARGE titles must be sentence case.
   An earlier pass of mine forced everything sentence case, which was wrong. */
.avm-card .card-lbl,
.kpi-label,
.mini-label,
.tg-kpi-card .tg-lbl,
.lcm-kpi .k-lbl,
.lcm-panel-t,
.avm-tbl thead th{
  text-transform:uppercase !important;
  letter-spacing:0.06em !important;
  font-size:0.75rem !important;
  color:var(--evra-text-3) !important;
  font-weight:500 !important;
}


/* ── SB CARD RECIPE (GPT-verified) ─────────────────────────────────────────
   Flat and bordered, never shadowed at rest -- the Supabase look comes from
   1px low-alpha borders on neutral surfaces, not elevation. Applied to every
   existing card class so the whole system converges without touching 95 pages.
   Also gives each block its OWN container: the operator's note was that tab
   content "looks too flat like it is all in one container". */
.sb-card,
.card,
.acard,
.avm-card,
.avm-tbl-card,
.avm-widget,
.lcm-panel,
.tg-kpi-card,
.hero-rangebar,
.avm-toolbar.hero-toolbar{
  background:var(--evra-surface-1) !important;
  border:1px solid var(--evra-border-hair) !important;
  border-radius:var(--evra-r-card,8px) !important;
  box-shadow:none !important;
}
/* Inputs / nested panels sit one tier up from the card. */
.inp,.avm-select,.avm-input,input.inp,select.inp,textarea.inp{
  background:var(--evra-surface-2) !important;
  border:1px solid var(--evra-border-mid) !important;
  border-radius:var(--evra-r-input,6px) !important;
}
/* Hover slightly lighter, pressed darker -- per GPT's state guidance. */
.avm-tbl tbody tr:hover td{background:var(--evra-surface-2) !important;}


/* ═══════════════════════════════════════════════════════════════════════════
   AUDIT ROUND 1 — applied from the UI/UX punch-list (scripts/design-audit-prompt.txt)
   Systemic fixes only; keyed to existing class names so no page markup changes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── T1. Type scale: hierarchy was too compressed; titles didn't command ──
   their sections. Explicit ramp at desktop width. */
:root{
  --fs-h1:32px; --fs-h2:22px; --fs-h3:16px;
  --fs-body:13px; --fs-meta:11px;
  --lh-h1:38px; --lh-h2:28px; --lh-h3:22px; --lh-body:20px; --lh-meta:18px;
  /* S1/S3: strict 8pt rhythm */
  --section-gap:32px; --card-gap:24px; --control-gap:8px;
  /* A1/A3/A4: one control-height scale, so no row can be jagged */
  --ctl-h:36px; --ctl-h-sm:32px; --chip-h:28px; --table-header-h:44px;
  /* S4: exactly TWO radii */
  --r-card:8px; --r-chip:6px;
}
.avm-header h1, .evra-page-header h1, .ca-head .ca-name{
  font-size:var(--fs-h1) !important; line-height:var(--lh-h1) !important;
  font-weight:600 !important; letter-spacing:-0.02em !important;
}
.avm-live-title h2{font-size:var(--fs-h2) !important; line-height:var(--lh-h2) !important;}
.avm-tbl-hdr h3, .hub-card-hdr h5, .sb-title, .calllog-title, .avm-insights-hdr2 h3{
  font-size:var(--fs-h3) !important; line-height:var(--lh-h3) !important;
}

/* ── T2. Primary KPI values were reading at body scale ─────────────────── */
.lcm-kpi .k-val, .rk-mini .rkm-val, .tg-kpi-card .tg-val{
  font-size:28px !important; line-height:32px !important; font-weight:700 !important;
  letter-spacing:-0.01em !important;
  font-variant-numeric:tabular-nums !important; font-feature-settings:"tnum","lnum" !important;
}
.lcm-kpi .k-delta, .rk-mini .rkm-sub, .tg-kpi-card .tg-sub{
  font-size:var(--fs-meta) !important; line-height:var(--lh-meta) !important;
}

/* ── T3. Metadata was too bright and competed with primary data ────────── */
.avm-timer, .np-hint, .tg-refresh, .calllog-sub, .ih-sub, .lcm-panel-s,
.avm-recent-when, .card-sub, .hlp, .fh, .status{
  color:rgba(237,239,238,0.64) !important;
}

/* ── T6. Tabular numerals so digit columns actually align ──────────────── */
.avm-tbl td, .avm-tbl th, .num, .tnum,
.lcm-kpi .k-val, .kpi-value, .mini-value{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum","lnum";
}

/* ── T5. Chip case/weight was inconsistent (IDLE vs enabled) ───────────── */
.avm-pill, .hero-chip, .chip, .clf-chip, .tg-range-badge{
  text-transform:uppercase !important; font-size:var(--fs-meta) !important;
  font-weight:600 !important; letter-spacing:0.04em !important;
  height:var(--chip-h); display:inline-flex; align-items:center;
  border-radius:var(--r-chip) !important;
}

/* ── A1/A3/A4/A7. One control height per class, vertically centred, so no
   row can present mismatched baselines. */
.avm-btn, .btn-ghost, .btn-primary2, .pill{
  height:var(--ctl-h) !important; align-items:center !important;
  border-radius:var(--r-chip) !important;
}
.avm-select, .avm-input, .inp{
  height:var(--ctl-h) !important; border-radius:var(--r-chip) !important;
}
.hero-rangebar, .avm-toolbar, .avm-toolbar-right, .avm-live-acts, .tg-hdr-right{
  display:flex !important; align-items:center !important; gap:var(--control-gap) !important;
}

/* ── A5. Panel headers on a shared baseline via grid, not float drift ──── */
.tg-hdr, .lcm-panel-hdr, .sb-card-hdr{
  display:grid !important; grid-template-columns:1fr auto !important;
  align-items:center !important;
}

/* ── A6/A9. Rows stretch to the tallest member: no jagged bottoms ──────── */
.lcm-kpi-row, .tg-kpi-row, .ref-kpi-grid2x3, .avm-widgets-grid, .sb-grid{
  align-items:stretch !important;
}
.lcm-kpi, .tg-kpi-card, .rk-mini, .avm-widget{
  height:100% !important; display:flex !important; flex-direction:column !important;
}
.tg-split-row, .hero-split-row{align-items:stretch !important;}

/* ── A8. One table-header height everywhere ────────────────────────────── */
.avm-tbl thead th{height:var(--table-header-h); vertical-align:middle;}

/* ── S1/S2. 8pt rhythm + standardised card padding ─────────────────────── */
.avm-tbl-hdr, .hub-card-hdr, .sb-card-hdr{padding:16px 20px !important;}
.hub-card-body, .sb-card{padding:20px !important;}
.avm-tbl td{padding:12px 16px !important;}
.avm-body > * + *{margin-top:var(--section-gap);}

/* ── F2. Gradients broke the flat language: solid fills + crisp borders ── */
.target-fill, .bar-fill, .avm-btn.solid, .btn-primary2,
.avm-sparkline, .avm-live-card{
  background-image:none !important;
}
.target-fill, .bar-fill{background:var(--evra-primary) !important;}
.avm-live-card{background:var(--evra-surface-1) !important;}

/* ── F4/F7. "Alive" through sharp border/colour state, never shadow, and
   razor-quick transitions. */
.avm-tbl-card, .hub-card, .sb-card, .avm-widget, .lcm-panel, .tg-kpi-card{
  transition:border-color .14s cubic-bezier(.2,.8,.2,1);
}
.avm-tbl-card:hover, .hub-card:hover, .sb-card:hover, .avm-widget:hover{
  border-color:var(--evra-border-mid) !important;
}
.avm-btn, .btn-ghost, .pill, .chip, .clf-chip{
  transition:border-color .14s cubic-bezier(.2,.8,.2,1),
             color .14s cubic-bezier(.2,.8,.2,1),
             background-color .14s cubic-bezier(.2,.8,.2,1) !important;
}
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--evra-primary); outline-offset:1px;
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important;}
}

/* ── F8. Crisp type on a dark backdrop ─────────────────────────────────── */
html{-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}

/* ══════════════════════════════════════════════════════════════════════════
   G. PAGE LAYOUT TEMPLATE  (source of truth: page-dialer-report.html)
   The operator picked the Dialer Report's geometry as the platform template.
   Content width swung from 1140px (Bootstrap .container) to 1480px page to
   page; these tokens bind every container idiom to one set of numbers so the
   whole system reads as one product.
   ═════════════════════════════════════════════════════════════════════════ */
:root{
  --evra-page-max:        1480px;   /* .wrap-in on the Dialer Report */
  --evra-page-pad-x:      90px;   /* 3x the previous 30px, operator's call */
  --evra-page-pad-top:    26px;
  --evra-page-pad-bottom: 60px;
  --evra-card-pad:        16px 18px;
  --evra-card-gap:        16px;     /* vertical rhythm between cards */
  --evra-grid-gap:        12px;     /* between KPI tiles in a row */
}

/* All four container idioms resolve to the same box. Two-class selectors beat
   Bootstrap's single-class .container/.py-4 without needing !important. */
.main-wrap > .wrap-in,
.main-wrap > .container,
.main-wrap > .container-xxl,
.main-wrap > .container-fluid,
.main-wrap > .wrap,
body > .wrap-in{
  max-width: var(--evra-page-max);
  margin-left: auto;
  margin-right: auto;
  padding-left:   var(--evra-page-pad-x);
  padding-right:  var(--evra-page-pad-x);
  padding-top:    var(--evra-page-pad-top);
  padding-bottom: var(--evra-page-pad-bottom);
  width: 100%;
  box-sizing: border-box;
}

/* Bootstrap's py-* utilities set padding-top/bottom on a single class; the
   two-class selector above already outranks them, but a page that adds py-4
   directly on the wrapper also carries Bootstrap's own margin behaviour --
   neutralise it so vertical rhythm comes from the tokens alone. */
.main-wrap > .container.py-4,
.main-wrap > .container-xxl.py-4{
  padding-top:    var(--evra-page-pad-top);
  padding-bottom: var(--evra-page-pad-bottom);
}

/* Card rhythm, same numbers the Dialer Report uses. Scoped to the page
   container so nested/among-widget cards keep their own tuned spacing. */
.main-wrap > .wrap-in > .card,
.main-wrap > .container > .card,
.main-wrap > .container-xxl > .card{
  padding: var(--evra-card-pad);
  margin-bottom: var(--evra-card-gap);
  border-radius: var(--evra-r-card, 8px);
}

@media (max-width:900px){
  :root{ --evra-page-pad-x:24px; --evra-page-pad-top:18px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   G2. ONE GUTTER, EVERY PAGE
   The space between the sidebar and the first card -- and the matching space
   on the right -- is now a property of .main-wrap, which every page in the
   sidebar menu has. Binding it to the inner container missed every page whose
   content sits directly in .main-wrap with no wrapper (Agents, Sessions, ...).
   Applied once here, and zeroed on the inner containers so it never doubles.
   ═════════════════════════════════════════════════════════════════════════ */
.main-wrap{
  padding-left:  var(--evra-page-pad-x) !important;
  padding-right: var(--evra-page-pad-x) !important;
  box-sizing: border-box;
}

/* The gutter lives on .main-wrap now; inner containers keep only their
   max-width and vertical rhythm, otherwise the page would be inset twice. */
.main-wrap > .wrap-in,
.main-wrap > .container,
.main-wrap > .container-xxl,
.main-wrap > .container-fluid,
.main-wrap > .avm-wrap,
.main-wrap > .wrap{
  padding-left:  0 !important;
  padding-right: 0 !important;
  max-width: var(--evra-page-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width:900px){
  .main-wrap{
    padding-left:  var(--evra-page-pad-x) !important;
    padding-right: var(--evra-page-pad-x) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   G3. IDENTICAL SIDE SPACING ON EVERY PAGE
   Measured gaps were 44/44, 48/48, 42/47, 30/35, 30/30 across the sidebar
   menu. Three causes, all neutralised here: the max-width cap centred the
   content (adding a window-dependent 14px per side on pages that hit it), a
   vertical scrollbar shifted the right gap by 5px, and some top-level cards
   carried their own horizontal margin. The gutter is now exactly the
   .main-wrap padding, on every page, both sides.
   ═════════════════════════════════════════════════════════════════════════ */

/* No cap: any cap narrower than the viewport has to centre, and centring adds
   space that changes with the window -- which is precisely the inconsistency
   being fixed. Identical spacing and a fixed content width cannot both hold. */
html body .main-wrap > .wrap-in,
html body .main-wrap > .container,
html body .main-wrap > .container-xxl,
html body .main-wrap > .container-fluid,
html body .main-wrap > .avm-wrap,
html body .main-wrap > .wrap{
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* scrollbar-gutter:stable was tried here and REMOVED: it reserves the track even
   when there is no scrollbar, so .main-wrap ended 5px short of the viewport and
   the right gutter measured 95px against a 90px left on every page. Without it
   the padding box is symmetric whether or not the page scrolls. */

/* A top-level card's own horizontal margin would add to the page gutter
   (Campaigns measured 48px against Sessions' 30px for exactly this reason).
   Vertical margins are left alone -- they carry the card rhythm. */
.main-wrap > .wrap-in > .card,
.main-wrap > .container > .card,
.main-wrap > .container-xxl > .card,
.main-wrap > .wrap-in > .row,
.main-wrap > .container > .row,
.main-wrap > .container-xxl > .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   H. TEXT COLOUR ROLES  (revised: green is a CONTROL colour, not a type one)
   Card and section headers are white and larger; small field labels are grey;
   the accent is reserved for things you press and for live run state.
   ═════════════════════════════════════════════════════════════════════════ */

/* Headers: white, larger, and less tracked -- wide letter-spacing is a device
   for tiny uppercase micro-labels and reads as loose at 14px. */
html body .card-title,
html body .acard-title,
html body .hub-card-hdr h5,
html body .hub-card-hdr h4,
html body .sec-h,
html body .bc-title,
html body .rep-hd,
html body .avm-tbl-hdr h3,
html body .calllog-title{
  color:var(--evra-text-1,#EDEFEE) !important;
  font-size:14px !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
}

/* Field labels are not commands, so they lose the accent as well. Grey enough
   to sit back, light enough to still read as a label. */
html body .ch-lbl,
html body .section-lbl,
html body .lbl,
html body .kpi-label,
html body .mini-label,
html body .tg-lbl{
  color:var(--evra-text-3,#989A99) !important;
}

/* Sub-headers, names and values stay white. */
html body .agent-name,
html body .np-name,
html body .tg-card-hdr > span:first-child,
html body .hub-card h6,
html body .card-subtitle,
html body .sub-title,
html body .acard-sub{
  color:var(--evra-text-1,#EDEFEE) !important;
}

/* Meta / fine print: readable grey, not washed out. */
html body .rep-sub,
html body .hlp,
html body .kpi-sub,
html body .mini-sub,
html body .tg-sub,
html body .calllog-sub,
html body .hint,
html body .muted,
html body small.text-muted{
  color:var(--evra-text-3,#989A99) !important;
}

/* ── The accent, and only here ──────────────────────────────────────────────
   Things you press, the active segment of a control, and live run state.
   Live/success indicators keep it deliberately: they are the only thing that
   distinguishes "dialing" from "stopped", so removing their colour would make
   run state unreadable. */
html body .avm-btn.primary,
html body .rail-apply,
html body .btn-ev-primary,
html body .btn-p,
html body aside.sidebar .cta-test-call{
  background:var(--evra-primary) !important;
  color:#0B0D0F !important;
  border-color:var(--evra-primary) !important;
}
html body .tx-btn.go .ti,
html body .status-badge--live,
html body .avm-hdot.live,
html body .term-state.on{
  color:var(--evra-primary) !important;
}
html body .rail-pill.active,
/* .rep-tab dropped 2026-07-28: report outcome tabs are now FILTER CHIPS
   (tinted pill, no underline) so they read differently from the top nav tabs. */
html body .evra-tabs a.on,
html body .hub-tab.on{
  box-shadow:inset 0 -2px 0 var(--evra-primary) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   I. AUDIT ROUND 3 -- systemic fixes
   The 16 page critiques converge on the same five defects, so they are fixed
   once here rather than pasted into sixteen pages that would drift apart.
   ═════════════════════════════════════════════════════════════════════════ */
:root{
  --evra-control-h: 34px;    /* one height for every toolbar control */
  --evra-kpi-min-h: 112px;   /* floor so a wrapped label cannot shorten a card */
}

/* 1. NO JAGGED ROWS. The tallest card sets the row; everything else matches.
      Applied to the row, not to hardcoded heights -- a fixed min-height breaks
      as soon as the content count changes. */
.kpi-strip, .kpis, .hero-top3-row, .ref-kpi-grid2x3, .tg-split-row,
#tg-kpi-row, .bc-grid, .hub-grid, .card-row, .stat-row,
.main-wrap .row{
  align-items: stretch !important;
}
.kpi-strip > *, .kpis > *, .hero-top3-row > *, .ref-kpi-grid2x3 > *,
#tg-kpi-row > *, .tg-split-row > *, .card-row > *{
  height: 100%;
  box-sizing: border-box;
}
/* Equal-height tracks in card grids, so two rows of cards align across rows. */
.kpi-strip, .kpis, .hero-top3-row, .ref-kpi-grid2x3, #tg-kpi-row{
  grid-auto-rows: 1fr;
}

/* 2. KPI cards: a floor height and space-between, so a card whose label wraps
      no longer resolves shorter than its neighbours. */
.kpi, .kpi-card, .mini-card, .tg-kpi-card, .bi-kpi, .evra-kpi{
  min-height: var(--evra-kpi-min-h);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

/* 3. Tabular numerals everywhere a figure is shown, so digits line up down a
      column and between cards. Proportional digits were a named defect. */
.kpi-value, .mini-value, .tg-val, .kpi .v, .evra-kpi-value,
.rep-tbl td, table.tbl td, .avm-tbl td, .num, .tnum{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* 4. One control height and radius in any toolbar/filter row -- mixed 32/36px
      controls were producing the jagged top and bottom edges flagged on
      several pages. */
.avm-toolbar, .hero-toolbar, .filter-bar, .tbar, .toolbar{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* html body + !important: measured on the Control Room, three buttons in the
   layout toolbar (Save layout template / Reset layout / Add insight) still
   resolved to 36px against everything else's 34px, because a page-local rule
   outranks a plain two-class selector here. */
html body .avm-toolbar .avm-btn,
html body .hero-toolbar .avm-btn,
html body .avm-toolbar .avm-btn.primary,
html body .avm-toolbar .avm-btn.ghost{
  height: var(--evra-control-h) !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex;
  align-items: center;
}
.avm-toolbar .avm-btn, .hero-toolbar .avm-btn,
.filter-bar input, .filter-bar select, .filter-bar button,
.toolbar input, .toolbar select, .toolbar button,
.tbar input, .tbar select, .tbar button{
  height: var(--evra-control-h);
  box-sizing: border-box;
  border-radius: var(--evra-r-input, 6px);
}

/* 5. Card padding and radius from single tokens, so "cards" means one thing. */
.card, .hub-card, .avm-tbl-card, .bc-card, .ca-sec, .sb-card, .tg-card{
  border-radius: var(--evra-r-card, 8px);
  box-sizing: border-box;
}

/* Header rows: the action cluster centres against the title rather than
   sitting a few px low. */
.evra-page-header, .page-hd, .avm-live-head, .hub-card-hdr, .avm-tbl-hdr{
  display: flex;
  align-items: center;
  gap: 12px;
}
.evra-page-header > :last-child, .avm-tbl-hdr > :last-child{ margin-left: auto; }


/* evra-tab-prepaint-guard REMOVED 2026-07-30.
 * The visibility guard broke the tabs outright: visibility:hidden held, the
 * data-tabs-ready stamp never reached the element, and the CSS failsafe could not
 * rescue it because visibility does not animate that way. No tabs at all is far
 * worse than a brief flash.
 * The real fix hides nothing -- it makes the BAKED markup already match what the
 * script produces, so the rewrite becomes a visual no-op.
 */