/* ============================================================================
 * theme-enhance.css — Project-wide LINEAR theme (rose accent, refined neutrals)
 * ----------------------------------------------------------------------------
 * Loaded AFTER all.css so it overrides base styles. Design language: "Linear /
 * Vercel" — near-monochrome, hairline borders, Space Grotesk display type, and
 * the accent (rose) RESERVED for active state / focus / data-viz only. No
 * decorative accent edges, no shadows, no gradients, no hover-lift.
 * Token-driven; works light + dark.
 * ========================================================================== */

/* ---- Refined neutral tokens + display font (override the app's tokens) ---- */
:root{
  --bg-primary:#FFFFFF;--bg-secondary:#F4F4F4;--bg-card:#FFFFFF;--bg-card-hover:#F4F4F4;
  --bg-elevated:#FFFFFF;--bg-input:#FFFFFF;--bg-hover:#E0E0E0;
  --text-primary:#171717;--text-secondary:#525252;--text-muted:#6F6F6F;--text-heading:#161616;
  --text-disabled:#A8A8A8;
  --border:#E0E0E0;--border-subtle:#F4F4F4;
  --radius:12px;--radius-sm:8px;--radius-lg:16px;--radius-pill:24px;--radius-chip:999px;
  --stroke-control:#A8A8A8;--scrim:rgba(22,22,22,.48);
  --accent:#CC0000;--accent-hover:#B30000;--accent-ink:#CC0000;
  --accent-soft:rgba(204,0,0,.07);--accent-dim:rgba(204,0,0,.14);
  --surface:var(--bg-card);--surface-dim:var(--bg-secondary);
  --font-display:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-data:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;
}
.dark{
  --bg-primary:#161616;--bg-secondary:#0B0B0B;--bg-card:#262626;--bg-card-hover:#393939;
  --bg-elevated:#393939;--bg-input:#262626;--bg-hover:#393939;
  --text-primary:#E0E0E0;--text-secondary:#C6C6C6;--text-muted:#8D8D8D;--text-heading:#F4F4F4;
  --text-disabled:#6F6F6F;
  --border:#393939;--border-subtle:#262626;
  --stroke-control:#6F6F6F;--scrim:rgba(0,0,0,.66);
  --accent:#CC0000;--accent-hover:#E01111;--accent-ink:#FF5C5C;
  --accent-soft:rgba(255,92,92,.12);--accent-dim:rgba(255,92,92,.18);
}

/* Global touches ------------------------------------------------------------ */
* { scrollbar-width: thin; scrollbar-color: var(--bg-hover) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 0; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }
::selection { background: var(--accent-dim); color: var(--text-heading); }

/* Flat enforcement (kept) — no shadows, no gradient fills */
[class*="shadow"] { box-shadow: none !important; }
[class*="drop-shadow"] { filter: none !important; }
[class*="bg-gradient-to"] { background-image: none !important; background-color: var(--accent) !important; }

/* Display type + tabular numerals on titles & figures */
.card-title, .page-title, .stat-value, .font-display { font-family: var(--font-display); letter-spacing: -.02em; }
.stat-value, .num, .tabular { font-variant-numeric: tabular-nums; font-feature-settings:'tnum' 1,'lnum' 1; }

/* ---------------------------------------------------------------------------
 * CARDS — hairline, NO accent edge stripe, neutral hover, flat
 * ------------------------------------------------------------------------- */
.stat-card, .card, .card-static, .settings-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
    transition: border-color .15s ease, background .15s ease;
}
.stat-card:hover, .card:hover {
    transform: none; box-shadow: none;
    border-color: color-mix(in srgb, var(--text-primary) 18%, var(--border));
}
/* Kill the decorative accent stripe (the "AI-generated" tell) */
.stat-card::before { display: none !important; }
.stat-label { color: var(--text-muted); letter-spacing: .01em; text-transform: none; }

/* ---------------------------------------------------------------------------
 * HEADERS
 * ------------------------------------------------------------------------- */
.card-header, .page-header { border-bottom: 1px solid var(--border); }
.card-title, .page-title { color: var(--text-heading); font-weight: 600; }

/* ---------------------------------------------------------------------------
 * BUTTONS — Linear: primary = inverted ink → rose on hover; secondary = hairline
 * ------------------------------------------------------------------------- */
.btn { border-radius: 0; font-weight: 500; box-shadow: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease; }
.btn:hover, .btn:active { transform: none; box-shadow: none; }

.btn-primary { background: var(--text-heading); border: 1px solid var(--text-heading); color: var(--bg-primary); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.btn-secondary, .btn-ghost { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); }
.btn-secondary:hover, .btn-ghost:hover {
    border-color: color-mix(in srgb, var(--text-primary) 22%, var(--border));
    background: var(--bg-card); color: var(--text-heading);
}
.btn-danger  { background: var(--danger);  border-color: var(--danger);  color:#fff; }
.btn-success { background: var(--success); border-color: var(--success); color:#fff; }
.btn-warning { background: var(--warning); border-color: var(--warning); color:#fff; }
.btn-danger:hover, .btn-success:hover, .btn-warning:hover { filter: brightness(.96); }

/* ---------------------------------------------------------------------------
 * INPUTS — flat hairline, accent focus outline
 * ------------------------------------------------------------------------- */
.t-form-input, .form-input, .filter-select,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"],
input[type="url"], select, textarea {
    border-radius: 0;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    box-shadow: none;
    transition: border-color .15s ease, background .15s ease;
}
.t-form-input:focus, .form-input:focus, .filter-select:focus,
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 0;
    border-color: var(--accent);
    box-shadow: none;
    background: var(--bg-card);
}
.form-label, label.form-label { color: var(--text-secondary); font-weight: 500; }

/* ---------------------------------------------------------------------------
 * TABLES — hairline, neutral hover (scoped to .data-table)
 * ------------------------------------------------------------------------- */
.data-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.data-table thead th {
    text-transform: uppercase; font-size: 11px; letter-spacing: .05em; font-weight: 600;
    color: var(--text-muted); background: transparent; border-bottom: 1px solid var(--border);
}
.data-table tbody td { border-bottom: 1px solid var(--border-subtle); }
.data-table tbody tr { transition: background .12s ease; }
.data-table tbody tr:hover { background: var(--bg-secondary); }
.data-table tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------------------
 * TABS — active = accent underline indicator (accent only on active)
 * ------------------------------------------------------------------------- */
.view-tab {
    border-radius: 0; font-weight: 500; color: var(--text-muted); box-shadow: none;
    transition: color .12s ease, box-shadow .12s ease;
}
.view-tab:hover { color: var(--text-heading); background: transparent; }
.view-tab.active {
    color: var(--text-heading); background: transparent;
    box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0;
}

/* ---------------------------------------------------------------------------
 * Monochrome leftover bento icon colour (hardcoded stroke hex / inline-tinted
 * chips the CSS-only pass couldn't reach) → Linear neutral. CSS 'stroke' wins
 * over the SVG presentation attribute.
 * ------------------------------------------------------------------------- */
.mon-chip svg { stroke: var(--text-secondary) !important; }
.cnt-tile.cnt-act:not(.cnt-cta) .cnt-aic { background: var(--bg-hover) !important; color: var(--text-secondary) !important; }
.cnt-tile.cnt-act:not(.cnt-cta) .cnt-aic svg { stroke: currentColor !important; }

/* ---------------------------------------------------------------------------
 * EMPTY STATES + CHIPS
 * ------------------------------------------------------------------------- */
.empty-state { color: var(--text-muted); border: 1px dashed var(--border); border-radius: var(--radius); background: var(--bg-secondary); }
.badge, .chip, .pill, .tag { border-radius: var(--radius-chip); font-weight: 600; box-shadow: none; }

/* ---------------------------------------------------------------------------
 * Entrance — opacity fade only
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .stagger-children > * { animation: teFade .3s ease backwards; }
    .stagger-children > *:nth-child(1){animation-delay:.02s}
    .stagger-children > *:nth-child(2){animation-delay:.06s}
    .stagger-children > *:nth-child(3){animation-delay:.10s}
    .stagger-children > *:nth-child(4){animation-delay:.14s}
    .stagger-children > *:nth-child(5){animation-delay:.18s}
    .stagger-children > *:nth-child(6){animation-delay:.22s}
    .stagger-children > *:nth-child(7){animation-delay:.26s}
    .stagger-children > *:nth-child(8){animation-delay:.30s}
    @keyframes teFade { from { opacity:0; } to { opacity:1; } }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM SHELL v3 (2026-07-24) — DELIBERATELY VISIBLE.
   v2 was a refinement pass and was imperceptible (active-nav went from 10% to
   11% accent tint, padding 8→9px). This replaces it with changes you can see
   at a glance: solid gradient active nav, elevated sidebar, real card depth,
   bigger type scale. Still derived from theme vars => light + dark both adapt.
   Loaded last, so bespoke bento pages keep their own tiles by design.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- SIDEBAR ---------------------------------------------------------- */
.sidebar-wrapper {
    background: var(--bg-secondary) !important;
    border-right: 1px solid var(--border);
    box-shadow: inset -1px 0 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
}
#sidebar-nav { padding: 10px 10px 16px; }

.nav-link {
    padding: 9px 12px;
    margin-bottom: 2px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight:500;
    color: var(--text-secondary);
    transition: background .16s ease, color .16s ease, transform .16s ease;
}
.nav-link svg { opacity: .65; transition: opacity .16s ease, transform .16s ease; }
.nav-link:hover {
    background: var(--accent-soft);
    color: var(--text-heading);
    transform: none;
}
.nav-link:hover svg { opacity: 1; }

/* Active item: SOLID accent gradient + white text (was a 10% tint) */
.nav-link.active,
.nav-link.active:hover {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    border-radius: 0;
    transform: none;
    /* rim keeps the fill >=3:1 against the rail in dark mode (1.4.11) */
    box-shadow: inset 0 0 0 1px var(--accent-hover);
}
.dark .nav-link.active, .dark .nav-link.active:hover {
    box-shadow: inset 0 0 0 1px var(--accent-ink);
}
.nav-link.active:hover { background: var(--accent-hover); }
.dark .nav-link.active:hover { background: var(--accent-hover); }
.nav-link.active svg { opacity: 1; color: #fff; stroke: #fff; }
.nav-link.active::before { display: none; }  /* left bar redundant with solid fill */

/* Group captions */
#sidebar-nav > div[class*="uppercase"] {
    font-size: 9.5px !important;
    font-weight:700 !important;
    letter-spacing: .12em !important;
    color: var(--text-muted) !important;
    margin: 20px 0 7px !important;
    padding-inline: 12px !important;
}

/* ---- TOPBAR ----------------------------------------------------------- */
header.sticky {
    background: color-mix(in srgb, var(--bg-secondary) 85%, transparent) !important;
    backdrop-filter: saturate(1.6) blur(10px);
    border-bottom: 1px solid var(--border);
}

/* ---- CARDS: real depth ------------------------------------------------ */
/* FLAT cards (owner brief: "cards flat style"). No elevation shadows anywhere —
   a card is separated from the page by a crisp 1px border plus a background delta,
   and reacts on hover with colour only, never with lift or shadow. */
.stat-card, .card, .card-static, .settings-card {
    border-radius: var(--radius);
    box-shadow: none;
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: border-color .16s ease, background .16s ease;
}
.stat-card:hover, .card:hover {
    box-shadow: none;
    transform: none;
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
    background: var(--bg-card-hover, var(--bg-card));
}

/* ---- TYPOGRAPHY ------------------------------------------------------- */
h1, .page-title { font-family: var(--font-display); font-weight:700; letter-spacing: -.025em; color: var(--text-heading); }
h1 { font-size: clamp(20px, 2.2vw, 26px); }
h2, .card-title, .section-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; color: var(--text-heading); }
.stat-value, .num, .tabular, .font-mono { font-variant-numeric: tabular-nums; }
.stat-value { font-family: var(--font-display); font-weight:700; letter-spacing: -.03em; }

/* ---- TABLES ----------------------------------------------------------- */
.data-table thead th, table thead th {
    font-size: 10.5px; font-weight:700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
}
.data-table tbody tr, table tbody tr { transition: background .12s ease; }
.data-table tbody tr:hover, table tbody tr:hover { background: var(--bg-hover); }

/* ---- INPUTS + BUTTONS ------------------------------------------------- */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=tel], select, textarea,
.t-form-input, .form-input, .filter-select { border-radius: var(--radius-sm); transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, select:focus, textarea:focus,
.t-form-input:focus, .form-input:focus, .filter-select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
}
.btn, button.btn { border-radius: var(--radius-pill); font-weight: 600; padding-inline: 20px; }
.btn:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
    outline-offset: 2px; border-radius: 0;
}

/* ---- SCROLLBARS + SELECTION ------------------------------------------ */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-muted) 42%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-muted) 34%, transparent);
    border-radius: 0; border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 60%, transparent); background-clip: content-box; }
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--text-heading); }


/* ---- Data numerals: Chivo Mono for figures read aloud or compared in columns ---- */
.stat-value, .num, .tabular, .font-mono, .metric, .kpi,
td.font-mono, .call-duration, #call-duration, .ring-pct, .b-stat .val {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    letter-spacing: -.01em;
}
table, .data-table { font-variant-numeric: tabular-nums; }

/* Accent as TEXT must use --accent-ink (dark --accent is only 3.06:1 as type) */
a, .link, .text-accent { color: var(--accent-ink); }

/* ---- Legacy rose utilities remapped to the Encre Outremer ink ----------------
   all.css still compiles Tailwind rose-* classes used across ~150 markup sites.
   Rather than edit every view, the compiled utilities are re-pointed at the accent
   tokens here (theme-enhance loads after all.css, so these win). red-* is left alone
   on purpose: those are semantic danger, not brand. ------------------------------ */
.bg-rose-500{background-color:var(--accent)}
.bg-rose-500\/10{background-color:var(--accent-soft)}
.bg-rose-500\/20{background-color:var(--accent-dim)}
.border-rose-500{border-color:var(--accent)}
.border-rose-500\/30{border-color:var(--accent-dim)}
.focus\:border-rose-500:focus{border-color:var(--accent)}
.focus\:ring-rose-500:focus{--tw-ring-color:var(--accent)}
.from-rose-700{--tw-gradient-from:var(--accent) var(--tw-gradient-from-position)}
.hover\:bg-rose-500:hover{background-color:var(--accent-hover)}
.hover\:bg-rose-500\/10:hover{background-color:var(--accent-soft)}
.hover\:bg-rose-500\/20:hover{background-color:var(--accent-dim)}
.hover\:bg-rose-700:hover{background-color:var(--accent-hover)}
.hover\:text-rose-300:hover{color:var(--accent-ink)}
.text-rose-300{color:var(--accent-ink)}
.text-rose-400{color:var(--accent-ink)}
.to-rose-500{--tw-gradient-to:var(--accent-hover) var(--tw-gradient-to-position)}
.to-rose-700{--tw-gradient-to:var(--accent-hover) var(--tw-gradient-to-position)}
/* Compiled accent-*/rose-* utilities that baked the OLD rose rgba into all.css.
   Re-pointed at the ink tokens (this file loads after all.css, so these win). */
.border-accent-dim{border-color:var(--accent-dim)}
.bg-accent-dim{background-color:var(--accent-dim)}
.text-accent-dim{color:var(--accent-dim)}
.bg-accent\/20{background-color:var(--accent-dim)}
.hover\:border-accent\/30:hover{border-color:var(--accent-dim)}
.hover\:bg-accent\/30:hover{background-color:var(--accent-dim)}
.border-rose-500\/30{border-color:var(--accent-dim)}
.bg-rose-500\/10{background-color:var(--accent-soft)}
.bg-rose-500\/20{background-color:var(--accent-dim)}
.hover\:bg-rose-500\/10:hover{background-color:var(--accent-soft)}
.hover\:bg-rose-500\/20:hover{background-color:var(--accent-dim)}


/* ---- Mobile: tables that have no scroll wrapper -----------------------------
   8 views render <table> without an .overflow-x-auto parent. Because <body> is
   overflow-x:hidden, their extra columns were CLIPPED (unreadable) instead of
   scrollable. Give exactly those tables their own horizontal scroll; tables that
   already sit in a wrapper are untouched, so the mobile card-layout rules in
   dashboard-mobile.css keep working. -------------------------------------- */
@media (max-width: 640px){
  :not(.overflow-x-auto) > table{
    display:block;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* keep the header row aligned with the body when the table becomes a block */
  :not(.overflow-x-auto) > table > thead,
  :not(.overflow-x-auto) > table > tbody{ width:max-content; min-width:100% }
}
/* Never let a long unbroken string (SIP URIs, tokens, emails) push the page wide */
@media (max-width: 640px){
  td, th, .break-anywhere{ overflow-wrap:anywhere }
}

/* ---- --t-* token aliases (SYSTEMIC FIX) -------------------------------------
   227 inline declarations across ~30 views use var(--t-text-muted),
   var(--t-border), var(--t-text-heading), var(--t-bg-card), var(--t-bg-input)…
   but those custom properties were DEFINED NOWHERE. Each was therefore invalid:
   colours fell back to inherited values and `border-color:var(--t-border)`
   resolved to currentColor, so borders took the text colour. Aliasing them onto
   the real tokens repairs every one of those declarations at once, in both
   themes, without touching the views. -------------------------------------- */
:root,
.dark {
  --t-bg-primary:   var(--bg-primary);
  --t-bg-secondary: var(--bg-secondary);
  --t-bg-card:      var(--bg-card);
  --t-bg-elevated:  var(--bg-elevated);
  --t-bg-input:     var(--bg-input);
  --t-bg-hover:     var(--bg-hover);
  --t-border:       var(--border);
  --t-border-subtle:var(--border-subtle);
  --t-text-heading: var(--text-heading);
  --t-text-primary: var(--text-primary);
  --t-text-secondary:var(--text-secondary);
  --t-text-muted:   var(--text-muted);
  --t-accent:       var(--accent);
  --t-accent-hover: var(--accent-hover);
}

/* ---- Missing Tailwind utilities, mapped to theme tokens (SYSTEMIC FIX) -------
   all.css is a HAND-ASSEMBLED Tailwind bundle that was never regenerated as views
   added classes, so these were used in markup but defined NOWHERE — .bg-rose-600
   (19 uses) made primary CTAs render as white text on no background (invisible),
   and .bg-emerald-500/.bg-green-500/.bg-yellow-500 made status dots colourless.
   Defining them against the semantic tokens repairs every usage AND makes them
   correct in dark mode, which raw Tailwind hexes never were.
   rose->accent, red->danger, green/emerald->success, amber/yellow->warning,
   blue/indigo/purple->info, gray/slate->neutral. -------------------------- */
.bg-amber-100{background-color:var(--warning-dim)}
.bg-amber-500{background-color:var(--warning)}
.bg-blue-100{background-color:var(--info-dim)}
.bg-blue-500{background-color:var(--info)}
.bg-emerald-100{background-color:var(--success-dim)}
.bg-emerald-500{background-color:var(--success)}
.bg-gray-100{background-color:var(--bg-hover)}
.bg-gray-200{background-color:var(--bg-hover)}
.bg-gray-300{background-color:var(--bg-secondary)}
.bg-gray-400{background-color:var(--bg-secondary)}
.bg-gray-50{background-color:var(--bg-hover)}
.bg-green-100{background-color:var(--success-dim)}
.bg-green-500{background-color:var(--success)}
.bg-orange-500{background-color:var(--warning)}
.bg-purple-100{background-color:var(--info-dim)}
.bg-purple-500{background-color:var(--info)}
.bg-red-100{background-color:var(--danger-dim)}
.bg-red-50{background-color:var(--danger-dim)}
.bg-rose-100{background-color:var(--accent-dim)}
.bg-rose-50{background-color:var(--accent-dim)}
.bg-rose-600{background-color:var(--accent)}
.bg-rose-700{background-color:var(--accent-hover)}
.bg-yellow-100{background-color:var(--warning-dim)}
.bg-yellow-500{background-color:var(--warning)}
.border-rose-300{border-color:var(--accent)}
.border-rose-600{border-color:var(--accent)}
.from-rose-500{--tw-gradient-from:var(--accent)}
.from-rose-600{--tw-gradient-from:var(--accent)}
.ring-rose-500{--tw-ring-color:var(--accent)}
.ring-rose-600{--tw-ring-color:var(--accent)}
.text-amber-500{color:var(--warning)}
.text-amber-600{color:var(--warning)}
.text-amber-700{color:var(--warning)}
.text-blue-600{color:var(--info)}
.text-blue-700{color:var(--info)}
.text-blue-800{color:var(--info)}
.text-emerald-500{color:var(--success)}
.text-emerald-600{color:var(--success)}
.text-emerald-700{color:var(--success)}
.text-emerald-800{color:var(--success)}
.text-gray-600{color:var(--text-secondary)}
.text-gray-700{color:var(--text-secondary)}
.text-green-700{color:var(--success)}
.text-purple-700{color:var(--info)}
.text-red-600{color:var(--danger)}
.text-red-700{color:var(--danger)}
.text-rose-500{color:var(--accent)}
.text-rose-600{color:var(--accent)}
.text-rose-700{color:var(--accent-hover)}
.text-yellow-700{color:var(--warning)}
.to-red-600{--tw-gradient-to:var(--danger)}

/* ===== Data-table legibility (2026-07-25) =====
   Body text is Inter (self-hosted VARIABLE font, wght 100-900 — verified with fontTools —
   so 500 is a real interpolated cut, not a faux-bold). Paired with removing the global
   -webkit-font-smoothing:antialiased, this is what stops the tables reading thin.
   .data-table carries `font-size:...!important` in all.css, so this needs !important to land. */
.data-table { font-size: 13px !important; font-weight: 500; }
.data-table td { font-size: 13px; font-weight: 500; }
.table-wrapper td { font-weight: 500; }

/* ===== Modals that could never open (2026-07-25) =====
   all.css has `.modal-overlay{display:none!important}` with `.modal-overlay.show{display:flex!important}`.
   manager.php follows that convention, but queues/, voicemail/ and dashboard/ open their modals the
   older way — `el.style.display='flex'` — and an inline style carries NO !important flag, so the base
   rule won and those modals NEVER became visible: create/edit queue, queue members, agent skills,
   voicemail-drop create/edit, and the call-notes dialog were all unreachable.
   Honour an explicit inline flex. `[style*=...]` is (0,2,0) vs the base rule's (0,1,0), so this wins
   while both carry !important. Matching "display:flex" (not bare "flex") so an inline
   align-items:flex-start can never trigger it by accident. */
.modal-overlay[style*="display:flex"],
.modal-overlay[style*="display: flex"] { display: flex !important; }

/* ═══════════════════════════════════════════════════════════════════════
   JETONS GRAPHIQUES — ajoutés 2026-07-25 (restyle « bento »)
   ───────────────────────────────────────────────────────────────────────
   ADDITIF UNIQUEMENT : --accent / --accent-ink / --info ne sont PAS touchés,
   donc l'accent de l'interface (boutons, liens, logo) reste identique.
   Ces jetons ne servent qu'aux MARQUES de graphique (courbes, arcs, barres),
   où le rouge marque brut échoue sur fond sombre :
       #CC0000 sur --bg-card sombre (#262626) = 2,57:1  → sous le plancher 3:1
   En clair, --chart-accent EST le rouge marque, inchangé.
   Palette vérifiée (daltonisme, OKLab ΔE ×100, seuil 8) :
       clair  #CC0000 ↔ #2A78D6 : protan 28,4 · deutan 27,9 · tritan 33,0
       sombre #FA4B4B ↔ #3987E5 : protan 22,8 · deutan 27,9 · tritan 36,1
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --chart-accent:#CC0000;      /* rouge marque — identique à --accent */
  --chart-accent-soft:rgba(204,0,0,.16);
  --chart-series2:#2A78D6;     /* 4,42:1 sur blanc */
  --chart-good:#0F8A46;        /* 4,43:1 */
  --chart-warn:#B45309;        /* 5,02:1 */
  --chart-crit:#CC0000;        /* 5,89:1 */
  --chart-neutral:#6B7280;
  --chart-grid:#E9EBEF;
  --chart-track:#F1F2F4;
}
.dark{
  --chart-accent:#FA4B4B;      /* même teinte, remontée pour le fond sombre — 4,90:1 */
  --chart-accent-soft:rgba(250,75,75,.22);
  --chart-series2:#3987E5;     /* 4,58:1 sur #262626 */
  --chart-good:#3DD68C;        /* 8,89:1 */
  --chart-warn:#F0B429;        /* 8,94:1 */
  --chart-crit:#FA4B4B;        /* 4,90:1 */
  --chart-neutral:#8E8E8E;
  --chart-grid:#3A3A3A;
  --chart-track:#333333;
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPOSANTS BENTO PARTAGÉS — ajoutés 2026-07-25
   ───────────────────────────────────────────────────────────────────────
   Définis ici (et non dans chaque vue) pour que le tableau de bord, la
   supervision et le mur d'affichage restent identiques : une seule source.
   Utilisent les jetons --chart-* définis plus haut.
   ═══════════════════════════════════════════════════════════════════════ */

/* — en-tête de carte — */
.bx-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.bx-title{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.bx-hint{font-size:11px;font-weight:500;color:var(--text-muted)}

/* — graphique SVG (rendu côté serveur) — */
.dchart{position:relative}
.dchart svg{display:block;width:100%;height:auto}
.dchart .axl{font-size:11px;fill:var(--text-muted);font-weight:500}
.dchart .pklab{font-size:12px;font-weight:700;fill:var(--text-primary)}
.dtip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-120%);transition:opacity .12s;
      background:var(--bg-elevated);border:1px solid var(--border);border-radius:9px;padding:6px 10px;
      box-shadow:0 6px 18px rgba(0,0,0,.28);font-size:11.5px;white-space:nowrap;z-index:5}
.dtip b{font-size:14px;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.dtip i{font-style:normal;color:var(--text-muted);display:block}

/* — barres horizontales classées — */
.drows{display:flex;flex-direction:column;justify-content:space-around;gap:10px;flex:1}
.drow{display:grid;grid-template-columns:minmax(88px,1fr) 1.4fr auto;align-items:center;gap:10px}
.drow .lb{font-size:12.5px;font-weight:500;color:var(--text-secondary);display:flex;align-items:center;gap:7px;min-width:0}
.drow .lb .sq{width:8px;height:8px;border-radius:2px;flex:none}
.drow .lb .tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* display:block obligatoire — ce sont des <span>, et un span inline ignore width/height. */
.dtrack{display:block;height:9px;border-radius:5px;background:var(--chart-track);overflow:hidden}
.dfill{display:block;height:100%;border-radius:5px}
.drow .nb{font-size:12.5px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.drow .nb small{display:block;margin-top:1px;font-size:10.5px;font-weight:500;color:var(--text-muted)}

/* — liste de présence — */
.dag{display:flex;flex-direction:column;gap:2px}
.dagr{display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:9px}
.dagr:hover{background:var(--bg-card-hover)}
.dav{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;font-size:10.5px;font-weight:700;
     background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-secondary);flex:none}
.dagr .nm{font-size:13px;font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dst{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--text-muted);flex:none}
.dst .sq{width:7px;height:7px;border-radius:50%;background:var(--chart-neutral)}

/* — barre empilée + légende — */
.dstack{display:flex;gap:2px;height:10px;border-radius:6px;overflow:hidden;margin-bottom:13px;background:var(--chart-track)}
.dstack i{display:block;height:100%}
.dleg{display:flex;flex-direction:column;gap:8px}
.dleg .l{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary);font-weight:500}
.dleg .l .sq{width:8px;height:8px;border-radius:2px;flex:none}
.dleg .l b{margin-left:auto;color:var(--text-primary);font-weight:700;font-variant-numeric:tabular-nums}

.dempty{font-size:12.5px;color:var(--text-muted);padding:10px 0}