/* LiveTrack colour tokens — single source for light and dark.
   Light lives on :root; dark overrides on html[data-theme="dark"], which
   theme.js stamps before first paint (stored choice, else system preference).
   Rules: components read tokens, never literal hex. Add a token here when a
   new colour role appears rather than inlining a value. */

:root {
  color-scheme: light;

  /* Neutrals */
  --bg:#f8f9fb; --surface:#ffffff; --surface2:#f1f3f5; --border:#e5e7eb;
  --text:#111827; --muted:#6b7280; --faint:#9ca3af;
  /* "Ink" = the near-black used for solid chips/buttons on light UI.
     In dark mode it flips to a light chip with dark text so it stays visible. */
  --ink:#1a1a1a; --on-ink:#ffffff;
  --header-glass:rgba(255,255,255,.85);
  --overlay:rgba(0,0,0,.5);
  --shadow-sm:0 2px 8px rgba(0,0,0,.04);
  --shadow-md:0 8px 24px rgba(0,0,0,.10);
  --shadow-lg:0 24px 48px rgba(0,0,0,.12);
  --row-hover:rgba(254,44,85,.04);

  /* Brand */
  --accent:#7400e7; --accent2:#5b00b8; --accent-light:#f3e8ff;
  --live:#3cffff; --live-dark:#00b8b8;
  --mc:#7400e7; --admin:#555550;

  /* Solid status colours (dots, bars, borders-left, solid buttons) */
  --present:#059669; --late:#d97706; --absent:#dc2626;

  /* Tinted status families: pale background + dark text + soft border */
  --danger-bg:#fef2f2; --danger-fg:#b91c1c; --danger-bd:#fecaca;
  --warn-bg:#fffbeb;   --warn-fg:#b45309;   --warn-bd:#fcd34d;
  --ok-bg:#ecfdf5;     --ok-fg:#047857;     --ok-bd:#a7f3d0;
  --info-bg:#eff6ff;   --info-fg:#1d4ed8;   --info-bd:#bfdbfe;
  --brand-bg:#f5f3ff;  --brand-fg:#6d28d9;  --brand-bd:#ddd6fe;
  --pink-bg:#fbe8f0;   --pink-fg:#8a1e4c;   --pink-bd:#f9a8d4;

  /* Platforms */
  --shopee:#ee4d2d; --lazada:#2b3990; --tiktok:#1a1a1a;
  --facebook:#1877f2; --instagram:#c13584;
  /* TikTok pill: solid black/white on light; a translucent cyan tint in dark so it
     sits with the other tinted chips instead of glaring as a white block. */
  --tiktok-pill-bg:#1a1a1a; --tiktok-pill-fg:#ffffff;
  /* Aliases used by older modules (billing, casting, payroll status). */
  --card:var(--surface); --danger:var(--absent); --teal:var(--live-dark); --accent-soft:var(--accent-light);

  /* Charts */
  --chart-grid:#e2ddd6; --chart-tick:#999890; --chart-label:#374151;
  --chart-tooltip-bg:#1a1a1a; --chart-tooltip-fg:#ffffff; --chart-ring:#ffffff;
}

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

  /* Soft charcoal-navy, not pure black: lower contrast fatigue, matches the
     existing login screen palette (#0a0a14 / #16162a / #2a2a45). */
  --bg:#0f0f1a; --surface:#16162a; --surface2:#1e1e33; --border:#2a2a45;
  --text:#e5e7eb; --muted:#9ca3af; --faint:#6b7280;
  --ink:#e5e7eb; --on-ink:#111827;
  --header-glass:rgba(22,22,42,.85);
  --overlay:rgba(0,0,0,.65);
  --shadow-sm:0 2px 8px rgba(0,0,0,.35);
  --shadow-md:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 24px 48px rgba(0,0,0,.55);
  --row-hover:rgba(255,255,255,.035);

  --accent:#9d4dff; --accent2:#b57bff; --accent-light:rgba(157,77,255,.18);
  --live:#3cffff; --live-dark:#22d3d3;
  --mc:#9d4dff; --admin:#a3a39c;

  --present:#34d399; --late:#fbbf24; --absent:#f87171;

  --danger-bg:rgba(248,113,113,.14); --danger-fg:#fca5a5; --danger-bd:rgba(248,113,113,.4);
  --warn-bg:rgba(251,191,36,.14);    --warn-fg:#fcd34d;   --warn-bd:rgba(251,191,36,.4);
  --ok-bg:rgba(52,211,153,.14);      --ok-fg:#6ee7b7;     --ok-bd:rgba(52,211,153,.4);
  --info-bg:rgba(96,165,250,.14);    --info-fg:#93c5fd;   --info-bd:rgba(96,165,250,.4);
  --brand-bg:rgba(157,77,255,.16);   --brand-fg:#c4b5fd;  --brand-bd:rgba(157,77,255,.45);
  --pink-bg:rgba(244,114,182,.16);   --pink-fg:#f9a8d4;   --pink-bd:rgba(244,114,182,.45);

  /* TikTok's black has no dark-mode twin; brand cyan keeps the series distinct. */
  --shopee:#ff6a4d; --lazada:#7b8be0; --tiktok:#69c9d0;
  --tiktok-pill-bg:rgba(105,201,208,.16); --tiktok-pill-fg:#8ee3e9;
  --facebook:#60a5fa; --instagram:#e879a9;

  --chart-grid:#2a2a45; --chart-tick:#8b8fa3; --chart-label:#d1d5db;
  --chart-tooltip-bg:#e5e7eb; --chart-tooltip-fg:#111827; --chart-ring:#16162a;
}

/* All Sessions table (light values are set on #tab-allsessions inline). */
html[data-theme="dark"] #tab-allsessions{ --as-zebra:rgba(255,255,255,.02); --as-hover:rgba(157,77,255,.10); --as-sel:rgba(251,191,36,.16); --as-head:#1a1a2e; }

/* Bitmap logo is dark ink on transparent; lift it on dark surfaces. */
html[data-theme="dark"] .logo img { filter: invert(1) hue-rotate(180deg) brightness(1.1); }

/* Theme toggle button (lives in the header toolbar) */
.theme-toggle{background:none;border:1px solid var(--border);border-radius:6px;padding:5px 9px;font-size:15px;line-height:1;cursor:pointer;color:var(--text);transition:border-color .15s,background .15s}
.theme-toggle:hover{border-color:var(--accent);background:var(--surface2)}