/* SAMBOX PLAYER — design tokens (mirrors /docs/03-design-tokens.json)
   Stack: vanilla JS + SCSS + Vite 8. Backend /api/v1 FROZEN — no new fields. */
:root {
  --brand: "SAMBOX PLAYER";
  --terms-version: "v1.0";

  /* admin dark (Gentelella v4) */
  --admin-bg: #111417;
  --admin-surface: #1a1e24;
  --admin-sidebar: #171b21;
  --admin-sidebar-active: #1abb9c;
  --admin-border: #2a3139;
  --admin-text: #e8edf2;
  --admin-muted: #9aa7b4;
  --admin-link: #9ecbff;

  /* reseller dark (Gentelella v4) */
  --reseller-bg: #14161a;
  --reseller-surface: #1b1e24;

  /* client light (Netflix/Disney+ neutral) */
  --client-bg: #f6f7f9;
  --client-surface: #ffffff;
  --client-hero-bg: #000000;
  --client-hero-text: #ffffff;
  --client-border: #e2e6ea;
  --client-text: #111418;
  --client-muted: #5b6570;

  /* accent + semantic */
  --accent: #1abb9c;
  --accent-hover: #17a78a;
  --accent-2: #3498db;
  --success: #1abb9c;
  --warning: #f39c12;
  --danger: #e74c3c;
  --info: #3498db;
  --focus-ring: #9ecbff;

  /* type / space / radius */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lh: 1.5;
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px;
  --sp-xl: 20px; --sp-xxl: 24px; --sp-xxxl: 32px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px;

  /* layout */
  --sidebar-w: 250px;
  --topnav-h: 57px;

  /* motion */
  --motion-fast: 150ms; --motion-base: 250ms; --motion-slow: 350ms;
}

/* ---- theme system (dark default, light override) ----
   Pages keep their authored (dark) inline styles; the light layer below
   restyles every shared component via variables + attribute selectors,
   so one toggle repaints all panels with no per-page rewrites. */
:root,
[data-theme="dark"] {
  --bg-primary: #0f1115;
  --bg-secondary: #1a1d24;
  --bg-card: #1e2229;
  --bg-topnav: #000000;
  --bg-sidebar: #171b21;
  --text-primary: #e6e8ec;
  --text-muted: #8a9099;
  --border: #2a2f38;
  --accent: #2dd4a7;
  --danger: #ef4444;
  --warning: #f59e0b;
  --success: #10b981;
}

[data-theme="light"] {
  --bg-primary: #f5f6f8;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-topnav: #ffffff;
  --bg-sidebar: #ffffff;
  --text-primary: #1a1d24;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --accent: #14b8a6;
  --danger: #dc2626;
  --warning: #d97706;
  --success: #059669;
}

/* Base page paint: variables win over per-page hardcoded body colors,
   in BOTH themes, including main/content wrappers. */
html, body {
  background: var(--bg-primary);
  color: var(--text-primary);
}
[data-theme="dark"] body,
[data-theme="dark"] html,
[data-theme="dark"] main,
[data-theme="dark"] .main-content,
[data-theme="dark"] .content-wrapper,
[data-theme="dark"] .gx-body,
[data-theme="dark"] .cx-wrap {
  background: var(--bg-primary);
  color: var(--text-primary);
}
[data-theme="light"] body,
[data-theme="light"] html,
[data-theme="light"] main,
[data-theme="light"] .main-content,
[data-theme="light"] .content-wrapper,
[data-theme="light"] .gx-body,
[data-theme="light"] .cx-wrap {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* Light-theme restyle of the dark-authored components (all panels). */
[data-theme="light"] body { background: var(--bg-primary); color: var(--text-primary); }
[data-theme="light"] .gx-topnav,
[data-theme="light"] .cx-topnav { background: var(--bg-topnav); color: var(--text-primary); border-bottom: 1px solid var(--border); }
[data-theme="light"] .gx-side { background: var(--bg-sidebar); border-right: 1px solid var(--border); }
[data-theme="light"] .gx-side a { color: #0f766e; }
[data-theme="light"] .gx-side a:hover { background: #f0fdfa; }
[data-theme="light"] .gx-side a[aria-current="page"] { background: #f0fdfa; border-left-color: var(--accent); color: var(--text-primary); }
[data-theme="light"] .gx-menu-title,
[data-theme="light"] .gx-profile div div:last-child { color: var(--text-muted); }
[data-theme="light"] .x_panel,
[data-theme="light"] .gx-tile,
[data-theme="light"] .gx-credit,
[data-theme="light"] .cx-card,
[data-theme="light"] .cx-tile,
[data-theme="light"] table.table { background: var(--bg-card); border-color: var(--border); color: var(--text-primary); }
[data-theme="light"] .gx-table td, [data-theme="light"] .gx-table th,
[data-theme="light"] .table td, [data-theme="light"] .table th { border-color: var(--border); }
[data-theme="light"] .gx-table th, [data-theme="light"] .table th { color: var(--text-muted); }
[data-theme="light"] .x_title { border-color: var(--border); }
[data-theme="light"] .gx-tile .k,
[data-theme="light"] label,
[data-theme="light"] .cx-card p { color: var(--text-muted); }
[data-theme="light"] .gx-tile .v { color: var(--text-primary); }
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea,
[data-theme="light"] .gx-input { background: #fff; color: var(--text-primary); border-color: var(--border); }
[data-theme="light"] .gx-badge { color: var(--text-muted); border-color: var(--border); }
[data-theme="light"] code { background: #eef2f7; color: var(--text-primary); }
[data-theme="light"] .modal > div { background: var(--bg-card); border-color: var(--border); color: var(--text-primary); }
[data-theme="light"] nav.cx-nav { background: var(--bg-secondary); border-color: var(--border); }
[data-theme="light"] nav.cx-nav a { color: var(--text-primary); }
[data-theme="light"] nav.cx-nav a:hover { background: #eef2f7; }
[data-theme="light"] .status.trial { color: var(--warning); }
[data-theme="light"] .status.active { color: var(--success); }
[data-theme="light"] .status.expired, [data-theme="light"] .status.blocked { color: var(--danger); }

/* Admin shell sidebar island: gentelella-v4.css declares every --sidebar-*
   token as dark-only in :root and never re-declares them for light, so the
   .sidebar/.brand-name/.nav-label block stayed a dark island in Light mode.
   html[data-theme="light"] (0,1,1) beats :root (0,1,0) regardless of the
   later stylesheet's source order. */
html[data-theme="light"] {
  --sidebar-bg: #ffffff;
  --sidebar-border: #e6e7eb;
  --sidebar-hover: rgba(4, 32, 69, 0.05);
  --sidebar-active: rgba(26, 187, 156, 0.1);
  --sidebar-text: #626d7d;
  --sidebar-text-hover: #1e2633;
  --sidebar-text-active: #0f766e;
}
html[data-theme="light"] .sidebar {
  border-right: 1px solid var(--sidebar-border);
}
html[data-theme="light"] .brand-name,
html[data-theme="light"] .sidebar-user-info .name {
  color: var(--text-primary);
}
html[data-theme="light"] .nav-label {
  color: var(--text-muted);
}
html[data-theme="light"] .sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(4, 32, 69, 0.18);
}
html[data-theme="light"] .nav-tree.open .nav-sub > .nav-sub-inner::before {
  background: var(--sidebar-border);
}
html[data-theme="light"] .nav-sublink:hover::before {
  background: rgba(4, 32, 69, 0.35);
}