/* ════════════════════════════════════════════════════════════════════════════
   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
                  #1e1e1e #232323 #111111                        -> --evra-surface-1
                  #1c1c1c                                         -> --evra-surface-0
                  #242424 #1c1c1c                                 -> --evra-surface-2
                  #2a2a2a                                          -> --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 — SELF-HOSTED (Geist is not on Google Fonts) ─────────────────── */
@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 */
  --evra-canvas:        #161616;
  --evra-surface-0:     #1c1c1c;   /* sidebar / deepest chrome */
  --evra-surface-1:     #1e1e1e;   /* cards */
  --evra-surface-2:     #242424;   /* inputs, nested panels, table-header wash */
  --evra-surface-3:     #2a2a2a;   /* popovers, hover-raised */
  --evra-surface-4:     #323232;   /* pressed / active chip fill */

  /* Lines */
  --evra-border-hair:   rgba(255,255,255,0.06);
  --evra-border-mid:    rgba(255,255,255,0.10);
  --evra-border-strong: rgba(255,255,255,0.14);
  --evra-border-focus:  rgba(62,207,142,0.45);

  /* Text (text-4 + disabled = decorative/disabled ONLY, never sole labels) */
  --evra-text-1:        #ededed;
  --evra-text-2:        #c4c4c4;
  --evra-text-3:        #999999;
  --evra-text-4:        #707070;
  --evra-text-disabled: #5A626B;
  --evra-ink:           #0d0d0d;   /* text on filled mint */

  /* Accent — EVRA mint (brand #3ECF8E -> #3ECF8E) */
  --evra-primary:        #3ECF8E;
  --evra-primary-rgb:    62,207,142;
  --evra-primary-hover:  #34B87E;
  --evra-primary-active: #2BA46F;
  --evra-primary-bright: #85E0BA;
  --evra-primary-tint:   rgba(62,207,142,0.12);
  --evra-primary-ring:   rgba(62,207,142,0.35);
  --evra-link:           #3ECF8E;
  --evra-link-hover:     #6BDAA5;

  /* Semantic */
  --evra-success:       #3ECF8E;
  --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(62,207,142,0.22);

  /* Geometry + type */
  --evra-r-card: 12px;  --evra-r-input: 8px;  --evra-r-modal: 12px;
  --evra-font: 'Geist','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --evra-mono: 'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* 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; }
.evra-page-header h4, .evra-page-header h1 { color:var(--evra-text-1); margin:0; font-weight:600; font-size:22px; letter-spacing:-0.015em; }
.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 ──────────────────────────────────────── */
.kpi-stat h4, .kpi .v, .fleet-val, .evra-kpi-value {
  font-family:var(--evra-mono) !important;
  font-size:28px !important; line-height:34px !important; font-weight:600 !important;
  color:var(--evra-text-1) !important; letter-spacing:-0.03em !important; margin:0;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
.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) ────────────────────────────────────── */
.evra-tabs {
  display:flex; flex-wrap:wrap; gap:0; align-items:center;
  margin:28px 32px 26px !important; padding:4px !important;
  min-height:50px; box-sizing:border-box;
  background:var(--evra-surface-1);
  border:1px solid var(--evra-border-hair);
  border-radius:12px; box-shadow:none; overflow:hidden;
}
.evra-tabs::-webkit-scrollbar { display:none; }
.evra-tabs a {
  flex:1 1 auto; text-align:center; padding:12px 16px;
  font-size:13px; font-weight:600; color:var(--evra-text-3);
  text-decoration:none; white-space:nowrap;
  border:1px solid transparent; border-right:1px solid var(--evra-border-hair);
  border-radius:8px; transition:all var(--evra-t-micro) var(--evra-ease);
  letter-spacing:-0.005em; line-height:1;
}
.evra-tabs a:last-child { border-right:1px solid transparent; }
.evra-tabs a:hover { color:var(--evra-text-1); background:rgba(255,255,255,0.05); }
.evra-tabs a.on { color:var(--evra-primary); background:var(--evra-primary-tint); border-color:rgba(var(--evra-primary-rgb),0.32); border-right-color:rgba(var(--evra-primary-rgb),0.32); }

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

/* ── Native file/date pickers — match the dark theme (audit fix) ───────── */
input[type="file"]{background:var(--evra-surface-2,#242424);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,62,207,142),0.15);color:var(--evra-primary,#3ECF8E);border:1px solid rgba(var(--evra-primary-rgb,62,207,142),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,#242424)!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; }