/* ==========================================================================
   welns admin — the dark theme, for BOTH admin pages: the Vue app (index.html)
   and the legacy dashboards (console.html). One file in public/, linked by
   both, so there is exactly one dark palette and it belongs to the admin
   console. The provider console stays light-only; nothing here reaches it.

   Applied by theme.js as `<html data-theme="light|dark">`, or no attribute for
   "follow the system". The doubled `:root:root` is specificity, not a typo:
   the Vue app's base.css sets the light tokens on `:root.theme-slate` and
   loads AFTER this file, so a plain `:root[data-theme]` would lose to it.
   ========================================================================== */

:root:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0E131B;
  --bg-alt: #151C26;
  --surface: #161D28;
  --surface-2: #1B2330;
  --border: #2A3442;
  --border-strong: #3D4959;
  --text: #E6E9EE;
  --text-soft: #CBD1DA;
  --muted: #9AA3B0;
  --muted-2: #7A8594;

  --primary: #2E3D52;
  --primary-deep: #1A2433;
  --primary-soft: #263244;
  --accent: #E08A1E;
  --accent-soft: #3A2A14;
  --accent-deep: #F5B35C;

  --hero-bg: linear-gradient(135deg, #1A2433 0%, #2E3D52 100%);
  --hero-text: #E6E9EE;
  --hero-muted: rgba(230, 233, 238, 0.62);

  --status-pending:   #F59E0B;
  --status-confirmed: #22C55E;
  --status-checkin:   #60A5FA;
  --status-completed: #9CA3AF;
  --status-cancelled: #F87171;
  --status-noshow:    #E05252;
  --status-expired:   #D98A32;

  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 6px 18px rgba(0,0,0,0.35);
  --shadow-hi:   0 20px 60px rgba(0,0,0,0.55);

  /* The amber ramp, lifted one step: the original dark end (#7C2D12) all but
     disappears on a dark surface. Still light→dark, so funnel order reads the
     same way in both themes. */
  --seq-1: #FCD34D;
  --seq-2: #FBBF24;
  --seq-3: #F59E0B;
  --seq-4: #D97706;
  --seq-5: #B45309;
  --grid: #232C39;
  --viz-surface: #161D28;
}
@media (prefers-color-scheme: dark) {
  :root:root:not([data-theme="light"]) {
  color-scheme: dark;

  --bg: #0E131B;
  --bg-alt: #151C26;
  --surface: #161D28;
  --surface-2: #1B2330;
  --border: #2A3442;
  --border-strong: #3D4959;
  --text: #E6E9EE;
  --text-soft: #CBD1DA;
  --muted: #9AA3B0;
  --muted-2: #7A8594;

  --primary: #2E3D52;
  --primary-deep: #1A2433;
  --primary-soft: #263244;
  --accent: #E08A1E;
  --accent-soft: #3A2A14;
  --accent-deep: #F5B35C;

  --hero-bg: linear-gradient(135deg, #1A2433 0%, #2E3D52 100%);
  --hero-text: #E6E9EE;
  --hero-muted: rgba(230, 233, 238, 0.62);

  --status-pending:   #F59E0B;
  --status-confirmed: #22C55E;
  --status-checkin:   #60A5FA;
  --status-completed: #9CA3AF;
  --status-cancelled: #F87171;
  --status-noshow:    #E05252;
  --status-expired:   #D98A32;

  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 6px 18px rgba(0,0,0,0.35);
  --shadow-hi:   0 20px 60px rgba(0,0,0,0.55);

  /* The amber ramp, lifted one step: the original dark end (#7C2D12) all but
     disappears on a dark surface. Still light→dark, so funnel order reads the
     same way in both themes. */
  --seq-1: #FCD34D;
  --seq-2: #FBBF24;
  --seq-3: #F59E0B;
  --seq-4: #D97706;
  --seq-5: #B45309;
  --grid: #232C39;
  --viz-surface: #161D28;
  }
}

/* Component overrides, under the same two conditions. */
/* Pills that hard-code their light-theme colours. */
:root[data-theme="dark"] .chip--live, :root[data-theme="dark"] .st--live, :root[data-theme="dark"] .chip--confirmed, :root[data-theme="dark"] .st--confirmed, :root[data-theme="dark"] .st--active { color: #86EFAC; background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); }
:root[data-theme="dark"] .chip--nolink, :root[data-theme="dark"] .st--nolink { color: #FCD9A8; background: rgba(217,119,6,.14); border-color: rgba(217,119,6,.35); }
:root[data-theme="dark"] .chip--nosvc, :root[data-theme="dark"] .st--nosvc, :root[data-theme="dark"] .chip--cancelled, :root[data-theme="dark"] .st--cancelled { color: #FCA5A5; background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); }
:root[data-theme="dark"] .chip--pending, :root[data-theme="dark"] .st--pending, :root[data-theme="dark"] .st--soft_held { color: #FCD34D; background: rgba(245,158,11,.13); border-color: rgba(245,158,11,.32); }
:root[data-theme="dark"] .chip--checked_in, :root[data-theme="dark"] .st--checked_in, :root[data-theme="dark"] .st--in_session, :root[data-theme="dark"] .st--in_progress { color: #93C5FD; background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.3); }
:root[data-theme="dark"] .chip--completed, :root[data-theme="dark"] .st--completed { color: #D1D5DB; background: rgba(156,163,175,.12); border-color: rgba(156,163,175,.28); }
:root[data-theme="dark"] .chip--expired, :root[data-theme="dark"] .st--expired { color: #FBD9A8; background: rgba(217,138,50,.13); border-color: rgba(217,138,50,.32); }
:root[data-theme="dark"] .chip--no_show, :root[data-theme="dark"] .st--no_show { color: #FCA5A5; background: rgba(224,82,82,.14); border-color: rgba(224,82,82,.36); }

/* console.html surfaces painted with literal light colours. */
:root[data-theme="dark"] .topbar { background: rgba(14,19,27,0.9); }
:root[data-theme="dark"] .flag--warn { background: rgba(217,119,6,.08); }
:root[data-theme="dark"] .flag--bad { background: rgba(220,38,38,.08); }

/* base.css: text set in --primary-deep, which is a background colour here. */
:root[data-theme="dark"] .btn.soft { color: var(--text); }
@media (prefers-color-scheme: dark) {
  /* Pills that hard-code their light-theme colours. */
  :root:not([data-theme="light"]) .chip--live, :root:not([data-theme="light"]) .st--live, :root:not([data-theme="light"]) .chip--confirmed, :root:not([data-theme="light"]) .st--confirmed, :root:not([data-theme="light"]) .st--active { color: #86EFAC; background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); }
  :root:not([data-theme="light"]) .chip--nolink, :root:not([data-theme="light"]) .st--nolink { color: #FCD9A8; background: rgba(217,119,6,.14); border-color: rgba(217,119,6,.35); }
  :root:not([data-theme="light"]) .chip--nosvc, :root:not([data-theme="light"]) .st--nosvc, :root:not([data-theme="light"]) .chip--cancelled, :root:not([data-theme="light"]) .st--cancelled { color: #FCA5A5; background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); }
  :root:not([data-theme="light"]) .chip--pending, :root:not([data-theme="light"]) .st--pending, :root:not([data-theme="light"]) .st--soft_held { color: #FCD34D; background: rgba(245,158,11,.13); border-color: rgba(245,158,11,.32); }
  :root:not([data-theme="light"]) .chip--checked_in, :root:not([data-theme="light"]) .st--checked_in, :root:not([data-theme="light"]) .st--in_session, :root:not([data-theme="light"]) .st--in_progress { color: #93C5FD; background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.3); }
  :root:not([data-theme="light"]) .chip--completed, :root:not([data-theme="light"]) .st--completed { color: #D1D5DB; background: rgba(156,163,175,.12); border-color: rgba(156,163,175,.28); }
  :root:not([data-theme="light"]) .chip--expired, :root:not([data-theme="light"]) .st--expired { color: #FBD9A8; background: rgba(217,138,50,.13); border-color: rgba(217,138,50,.32); }
  :root:not([data-theme="light"]) .chip--no_show, :root:not([data-theme="light"]) .st--no_show { color: #FCA5A5; background: rgba(224,82,82,.14); border-color: rgba(224,82,82,.36); }

  /* console.html surfaces painted with literal light colours. */
  :root:not([data-theme="light"]) .topbar { background: rgba(14,19,27,0.9); }
  :root:not([data-theme="light"]) .flag--warn { background: rgba(217,119,6,.08); }
  :root:not([data-theme="light"]) .flag--bad { background: rgba(220,38,38,.08); }

  /* base.css: text set in --primary-deep, which is a background colour here. */
  :root:not([data-theme="light"]) .btn.soft { color: var(--text); }
}