/* ═══════════════════════════════════════════════════════════════════════
   Epocra dark theme — DARKMODE-2026-07-11
   Single theming authority for the portal + desktop renderer. Scoped under
   html.dark (applied pre-paint by theme.js). Strategy: override the Tailwind
   utility classes actually used across the portal pages (inventory of 138
   color tokens, 2026-07-11) — class-scoped selectors out-specify the plain
   utilities, no !important, so dynamic inline styles keep working.
   Palette: slate-dark surfaces, preserved purple brand, accent tints as
   low-alpha washes of their 500 tones.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Settings-page variable system (option-a-settings.html :root tokens) ── */
html.dark {
  --purple: #8b5cf6;
  --purple-faint: rgba(124, 58, 237, 0.14);
  --purple-glow: rgba(124, 58, 237, 0.16);
  --ink: #e6eaf3;
  --body: #b6bfd2;
  --muted: #8b96ad;
  --border: #262f43;
  --surface: #10141d;
  --white: #161b26;
  --green: #34d399;
  --green-bg: rgba(16, 185, 129, 0.15);
  --red: #f87171;
  --red-bg: rgba(239, 68, 68, 0.12);
  --amber: #fbbf24;
  --amber-bg: rgba(245, 158, 11, 0.15);
}

/* ── Surfaces ── */
html.dark body { background-color: #0e1118; color: #e6eaf3; }
html.dark .bg-\[\#f6f7f9\] { background-color: #0e1118; }
html.dark .bg-white { background-color: #161b26; }
html.dark .hover\:bg-white:hover { background-color: #161b26; }
html.dark .focus\:bg-white:focus { background-color: #10141d; }
html.dark .focus-within\:bg-white:focus-within { background-color: #10141d; }
html.dark .bg-slate-50 { background-color: #1b2130; }
html.dark .bg-slate-50\/60 { background-color: rgba(27, 33, 48, 0.6); }
html.dark .bg-slate-100 { background-color: #212939; }
html.dark .bg-slate-300 { background-color: #2e3850; }
html.dark .bg-slate-400 { background-color: #3a4560; }
html.dark .hover\:bg-slate-50:hover { background-color: #1b2130; }
html.dark .hover\:bg-slate-50\/60:hover { background-color: rgba(27, 33, 48, 0.6); }
html.dark .hover\:bg-slate-100:hover { background-color: #212939; }
html.dark .hover\:bg-slate-200:hover { background-color: #283147; }
html.dark .hover\:bg-slate-400:hover { background-color: #3a4560; }
html.dark .disabled\:bg-slate-300:disabled { background-color: #232b3d; }
/* bg-slate-900 blocks were dark in light mode — lift slightly so they still read as "dark chip" */
html.dark .bg-slate-900 { background-color: #060810; }
html.dark .hover\:bg-slate-800:hover { background-color: #111624; }

/* ── Text ── */
html.dark .text-slate-900 { color: #e6eaf3; }
html.dark .text-slate-800 { color: #dbe2ef; }
html.dark .text-slate-700 { color: #c4cddf; }
html.dark .hover\:text-slate-700:hover { color: #dbe2ef; }
html.dark .text-slate-600 { color: #a9b4ca; }
html.dark .text-slate-500 { color: #8b96ad; }
html.dark .text-slate-400 { color: #6d7890; }
html.dark .text-slate-300 { color: #55607a; }
html.dark .hover\:text-slate-900:hover { color: #ffffff; }
html.dark .placeholder-slate-400::placeholder { color: #566079; }

/* ── Borders / dividers / rings ── */
html.dark .border-slate-100 { border-color: #1f2636; }
html.dark .border-slate-200 { border-color: #262f43; }
html.dark .border-slate-300 { border-color: #303b54; }
html.dark .hover\:border-slate-200:hover { border-color: #262f43; }
html.dark .hover\:border-slate-300:hover { border-color: #303b54; }
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1f2636; }
html.dark .hover\:ring-slate-200:hover { --tw-ring-color: #262f43; }

/* ── Purple / violet brand ── */
html.dark .text-purple-600 { color: #b795ff; }
html.dark .text-purple-700 { color: #c4a8ff; }
html.dark .text-purple-700\/70 { color: rgba(196, 168, 255, 0.7); }
html.dark .text-purple-800 { color: #d1bbff; }
html.dark .hover\:text-purple-600:hover { color: #c4a8ff; }
html.dark .hover\:text-purple-700:hover { color: #d1bbff; }
html.dark .hover\:text-purple-800:hover { color: #dccbff; }
html.dark .text-purple-900 { color: #ddceff; }
html.dark .hover\:text-purple-900:hover { color: #e8ddff; }
html.dark .text-purple-100 { color: #3b2b63; }
html.dark .text-violet-600 { color: #b795ff; }
html.dark .text-violet-700 { color: #c4a8ff; }
html.dark .bg-purple-50 { background-color: rgba(124, 58, 237, 0.14); }
html.dark .bg-purple-50\/40 { background-color: rgba(124, 58, 237, 0.08); }
html.dark .bg-purple-50\/70 { background-color: rgba(124, 58, 237, 0.11); }
html.dark .hover\:bg-purple-50:hover { background-color: rgba(124, 58, 237, 0.14); }
html.dark .bg-purple-100 { background-color: rgba(124, 58, 237, 0.22); }
html.dark .hover\:bg-purple-100:hover { background-color: rgba(124, 58, 237, 0.22); }
html.dark .hover\:bg-purple-200:hover { background-color: rgba(124, 58, 237, 0.3); }
html.dark .bg-violet-50 { background-color: rgba(124, 58, 237, 0.14); }
html.dark .hover\:bg-violet-50:hover { background-color: rgba(124, 58, 237, 0.14); }
html.dark .bg-violet-100 { background-color: rgba(124, 58, 237, 0.22); }
html.dark .border-purple-100 { border-color: rgba(124, 58, 237, 0.28); }
html.dark .border-purple-200 { border-color: rgba(124, 58, 237, 0.4); }
html.dark .hover\:border-purple-300:hover { border-color: rgba(139, 92, 246, 0.55); }
html.dark .hover\:border-violet-300:hover { border-color: rgba(139, 92, 246, 0.55); }
html.dark .focus\:border-purple-400:focus { border-color: #8b5cf6; }
html.dark .focus-within\:border-purple-400:focus-within { border-color: #8b5cf6; }
html.dark .focus\:ring-purple-200:focus { --tw-ring-color: rgba(139, 92, 246, 0.35); }
html.dark .focus\:ring-purple-300:focus { --tw-ring-color: rgba(139, 92, 246, 0.45); }
/* solid purple buttons / chips keep brand color — no override needed for
   bg-purple-500/600, hover:bg-purple-700, bg-violet-600, focus:border-purple-500 */

/* ── Rose / red ── */
html.dark .text-rose-400 { color: #f8a3b3; }
html.dark .text-rose-500 { color: #fb7185; }
html.dark .hover\:text-rose-500:hover { color: #fb7185; }
html.dark .text-rose-600 { color: #fb7185; }
html.dark .text-rose-700 { color: #fda4af; }
html.dark .text-red-600 { color: #f87171; }
html.dark .bg-rose-50 { background-color: rgba(244, 63, 94, 0.12); }
html.dark .hover\:bg-rose-50:hover { background-color: rgba(244, 63, 94, 0.12); }
html.dark .bg-rose-100 { background-color: rgba(244, 63, 94, 0.2); }
html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.12); }
html.dark .border-rose-100 { border-color: rgba(244, 63, 94, 0.25); }
html.dark .border-rose-200 { border-color: rgba(244, 63, 94, 0.35); }

/* ── Amber / orange ── */
html.dark .text-amber-500 { color: #fbbf24; }
html.dark .text-amber-600 { color: #fbbf24; }
html.dark .text-amber-700 { color: #fcd34d; }
html.dark .text-amber-800 { color: #fde68a; }
html.dark .text-orange-500 { color: #fb923c; }
html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.12); }
html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.2); }
html.dark .bg-amber-200 { background-color: rgba(245, 158, 11, 0.28); }
html.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.12); }
html.dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.35); }

/* ── Emerald / green ── */
html.dark .text-emerald-500 { color: #34d399; }
html.dark .text-emerald-600 { color: #34d399; }
html.dark .text-emerald-700 { color: #6ee7b7; }
html.dark .text-green-700 { color: #6ee7b7; }
html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.12); }
html.dark .bg-emerald-50\/40 { background-color: rgba(16, 185, 129, 0.07); }
html.dark .border-emerald-200 { border-color: rgba(16, 185, 129, 0.35); }

/* ── Indigo / blue ── */
html.dark .text-indigo-600 { color: #a5b4fc; }
html.dark .text-blue-600 { color: #93c5fd; }
html.dark .hover\:text-blue-700:hover { color: #bfdbfe; }
html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.12); }
html.dark .focus\:ring-indigo-200:focus { --tw-ring-color: rgba(129, 140, 248, 0.35); }

/* ── Gradients (from-/to- stay brand-dark; slate gradient darkens) ── */
html.dark .from-slate-700 { --tw-gradient-from: #1b2130; --tw-gradient-to: rgb(27 33 48 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html.dark .to-slate-900 { --tw-gradient-to: #0e1118; }
html.dark .from-purple-50\/40 { --tw-gradient-from: rgba(124, 58, 237, 0.08); --tw-gradient-to: rgb(124 58 237 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }

/* ── Shadows: flatten to borders on dark ── */
html.dark .card { box-shadow: 0 0 0 1px #232b3d; }
html.dark .shadow-sm, html.dark .shadow, html.dark .shadow-md,
html.dark .shadow-lg, html.dark .shadow-xl, html.dark .shadow-2xl {
  --tw-shadow: 0 0 0 1px rgba(35, 43, 61, 0.9);
  --tw-shadow-colored: 0 0 0 1px rgba(35, 43, 61, 0.9);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* ── Form controls / misc ── */
html.dark input, html.dark textarea, html.dark select {
  color-scheme: dark;
}
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: #10141d; }
html.dark ::-webkit-scrollbar-thumb { background: #2a3348; border-radius: 6px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #364260; }
html.dark { color-scheme: dark; }

/* ═══════════════════════════════════════════════════════════════════════
   Page-local components (hardcoded light colors in each page's <style>).
   Round 2 — James's 3.0.74 feedback: KPI cards / scope banner / day headers /
   pager / analytics pickers / voicemail panes stayed white.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Calls page (mockup-9 components) ── */
html.dark .scope-banner { background: linear-gradient(90deg, #191527 0%, #161b26 70%); border-color: rgba(124, 58, 237, 0.28); }
html.dark .scope-banner .picker { background: #10141d; border-color: #262f43; color: #e6eaf3; }
html.dark .m9-stat { background: #161b26; border-color: #262f43; box-shadow: none; }
html.dark .m9-s-delta.up { background: rgba(16, 185, 129, 0.15); color: #34d399; }
html.dark .m9-s-delta.down { background: rgba(244, 63, 94, 0.15); color: #fb7185; }
html.dark .m9-s-delta.flat { background: #232b3d; color: #a9b4ca; }
html.dark .m9-day { background: #131824; border-color: #1f2636; }
html.dark .m9-day .m9-day-label { color: #c4cddf; }
html.dark .m9-day .m9-day-meta { color: #6d7890; }
html.dark .m9-pager { background: #161b26; border-color: #1f2636; }
html.dark .m9-pager .m9-info { color: #8b96ad; }
html.dark .m9-pager .m9-info b { color: #e6eaf3; }
html.dark .m9-pager .m9-info select { background: #10141d; border-color: #262f43; color: #c4cddf; }
html.dark .m9-pg { background: #10141d; border-color: #262f43; color: #a9b4ca; }
html.dark .m9-pg:hover:not(.m9-active):not(.m9-dots):not(.m9-disabled) { background: #232b3d; }
html.dark .m9-pg.m9-active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
html.dark .m9-pg.m9-dots, html.dark .m9-pg.m9-disabled { color: #3a4560; }
html.dark .m9-usage-badge { background: #232b3d; color: #a9b4ca; }
html.dark .m9-usage-badge.warn { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
html.dark .m9-usage-badge.crit { background: rgba(244, 63, 94, 0.15); color: #fb7185; }

/* ── Calls page round 3: hardcoded dark text inside the stat cards
      (usage ring, sentiment gauge, tasks donut, total-calls chart) ── */
html.dark .m9-s-val { color: #e6eaf3; }
html.dark .m9-s-val.green { color: #34d399; }
html.dark .m9-gauge-cell .right .num { color: #e6eaf3; }
html.dark .m9-donut-text .num { color: #e6eaf3; }
html.dark .m9-items-legend .num { color: #e6eaf3; }
html.dark .m9-face-side .val, html.dark .m9-face-side .val.green { color: #34d399; }
html.dark .m9-face-axis .ax.active { color: #34d399; }
html.dark .m9-tc-text .num, html.dark .m9-tc-legend .num, html.dark .m9-tc-side .num { color: #e6eaf3; }
html.dark .m9-tc-chart .bars .bar:hover::after { background: #161b26; color: #e6eaf3; }
html.dark .m9-usage-center .num { color: #e6eaf3; }
html.dark .m9-usage-numbers .used { color: #e6eaf3; }
/* usage ring: the track is a direct-child <circle stroke="#eef0f3"> — the
   JS-injected colored arcs live inside <g> and are untouched */
html.dark .m9-usage-ring svg > circle { stroke: #262f43; }

/* ── Analytics chart slot + voicemail row titles + settings nav ── */
html.dark .chart-slot-body .csb-title { color: #e6eaf3; }
html.dark .chart-slot-body .csb-stat-big { color: #e6eaf3; }
html.dark .vm-who { color: #e6eaf3; }
html.dark .snav a:hover, html.dark .snav .snav-link:hover { color: #e6eaf3; }
html.dark .back-link:hover { color: #e6eaf3; }
html.dark .settings-title { color: #e6eaf3; }

/* ── Shared sidebar user menu (all pages) ── */
html.dark .m9-user-menu { background: #161b26; border-color: #262f43; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
html.dark .m9-user-menu-head .nm { color: #e6eaf3; }
html.dark .m9-user-menu-head .em { color: #8b96ad; }
html.dark .m9-user-menu-div { background: #1f2636; }
html.dark .m9-user-menu-item { color: #e6eaf3; }
html.dark .m9-user-menu-item svg { color: #8b96ad; }
html.dark .m9-user-menu-item:hover { background: #1b2130; }
html.dark .m9-user-menu-item.danger, html.dark .m9-user-menu-item.danger svg { color: #fb7185; }

/* ── Shared modals ── */
html.dark #heldCallsIntroModal .modal-card, html.dark #heldCallsModal .modal-card { background: #161b26; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }

/* ── Analytics page (KPI + chart pickers) ── */
html.dark .kpi-preview { background: #161b26; border-color: #262f43; }
html.dark .kpi-preview:hover { border-color: #8b5cf6; background: #1b1830; }
html.dark .kpi-preview.active { border-color: #8b5cf6; background: #221c3a; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25); }
html.dark .kpi-preview .kp-label, html.dark .kpi-preview .kp-sub { color: #8b96ad; }
html.dark .kpi-preview .kp-val { color: #e6eaf3; }
html.dark .kpi-preview .kp-foot { color: #6d7890; border-color: #1f2636; }
html.dark .kpi-preview .cat-mini { color: #a9b4ca; }
html.dark .kpi-preview .pbar2 { background: #232b3d; }
html.dark .chart-preview { background: #161b26; border-color: #262f43; }
html.dark .chart-preview.active { background: #1d1733; }
html.dark .chart-preview .cp-title { color: #e6eaf3; }
html.dark .chart-preview .cp-num { color: #6d7890; }
html.dark .chart-preview .cp-sub { color: #8b96ad; }

/* ── Voicemails page (two-pane) ── */
html.dark .vm-shell { background: #161b26; border-color: #262f43; }
html.dark .vm-row { border-color: #1f2636; }
html.dark .vm-row:hover { background: #1b2130; }
html.dark .vm-row.unread { background: #191527; }
html.dark .vm-row.unread .vm-pv { color: #c4cddf; }
html.dark .vm-row.selected { background: #221c3a; }
html.dark .vm-day-hdr { background: #131824; border-color: #1f2636; color: #c4cddf; }
html.dark .vm-day-hdr .meta { color: #6d7890; }
html.dark .vm-player { background: #10141d; }
html.dark .vm-player .bar { background: #262f43; }
html.dark .vm-player .t { color: #8b96ad; }
html.dark .vm-trans { background: #10141d; border-color: #1f2636; color: #c4cddf; }
html.dark .vm-actions button { background: #10141d; border-color: #262f43; color: #a9b4ca; }
html.dark .vm-actions button:hover { background: #1b2130; border-color: #303b54; }
html.dark .vm-actions button.danger { border-color: rgba(244, 63, 94, 0.35); }
html.dark .vm-actions button.danger:hover { background: rgba(244, 63, 94, 0.12); }
html.dark .vm-actions button.primary { background: #7c3aed; border-color: #7c3aed; color: #fff; }

/* ── Inline light backgrounds (style="background:#fff...") — inline styles
      can only be beaten with !important; scoped tightly to exact-value
      matches so dynamic JS styling stays untouched. ── */
html.dark [style*="background:#fff;"], html.dark [style*="background: #fff;"],
html.dark [style*="background:#ffffff"] {
  background-color: #10141d !important;
  color: #a9b4ca !important;
  border-color: #262f43 !important;
}

/* ── Theme quick-toggle button (injected by theme.js) ── */
.epocra-theme-toggle {
  position: fixed; bottom: 14px; left: 14px; z-index: 9999;
  width: 34px; height: 34px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff; border: 1px solid #e2e8f0; color: #64748b;
  cursor: pointer; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  transition: transform 0.12s ease;
}
.epocra-theme-toggle:hover { transform: scale(1.08); }
html.dark .epocra-theme-toggle { background: #1b2130; border-color: #2a3348; color: #a9b4ca; }