/* Gudra Skola — Theme system (dark default, light optional) */

:root {
  color-scheme: dark;
  --bg-base: #0f0f17;
  --bg-card: #16161f;
  --bg-card2: #1a1a28;
  --bg-elev: rgba(255,255,255,.02);
  --bg-elev-2: rgba(255,255,255,.04);
  --border-soft: rgba(255,255,255,.07);
  --border-softer: rgba(255,255,255,.05);
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --text-dimmer: #475569;
  --glow-1: rgba(99,102,241,.15);
  --glow-2: rgba(139,92,246,.10);
  --scroll-thumb: #334155;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg-base: #f8fafc;
  --bg-card: #ffffff;
  --bg-card2: #f1f5f9;
  --bg-elev: rgba(15,23,42,.02);
  --bg-elev-2: rgba(15,23,42,.04);
  --border-soft: rgba(15,23,42,.08);
  --border-softer: rgba(15,23,42,.05);
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #475569;
  --text-dim: #64748b;
  --text-dimmer: #94a3b8;
  --glow-1: rgba(99,102,241,.10);
  --glow-2: rgba(139,92,246,.07);
  --scroll-thumb: #cbd5e1;
}

/* Apply to body + common containers — hits even inline styles via smart overrides */
html[data-theme="light"] body {
  background: var(--bg-base) !important;
  color: var(--text-primary);
}

/* Radial glow backgrounds look heavy in light mode — soften them */
html[data-theme="light"] .bg-base {
  background: var(--bg-base) !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 15% -5%, var(--glow-1) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 85% 105%, var(--glow-2) 0%, transparent 55%) !important;
}

/* Tailwind utility overrides — only when data-theme=light */
html[data-theme="light"] .bg-card { background-color: var(--bg-card) !important; }
html[data-theme="light"] .bg-card2 { background-color: var(--bg-card2) !important; }

/* Semi-transparent white layers — flip to dark on light bg */
html[data-theme="light"] .bg-white\/\[\.02\] { background-color: var(--bg-elev) !important; }
html[data-theme="light"] .bg-white\/\[\.04\] { background-color: var(--bg-elev-2) !important; }
html[data-theme="light"] .bg-white\/\[\.05\] { background-color: var(--bg-elev-2) !important; }
html[data-theme="light"] .bg-white\/\[\.06\] { background-color: var(--bg-elev-2) !important; }

html[data-theme="light"] .border-white\/\[\.05\] { border-color: var(--border-softer) !important; }
html[data-theme="light"] .border-white\/\[\.07\] { border-color: var(--border-soft) !important; }
html[data-theme="light"] .border-white\/10 { border-color: var(--border-soft) !important; }
html[data-theme="light"] .divide-white\/\[\.05\] > * + * { border-color: var(--border-softer) !important; }

/* Text colors — slate variants get remapped */
html[data-theme="light"] .text-white { color: var(--text-primary) !important; }
html[data-theme="light"] .text-slate-200 { color: var(--text-primary) !important; }
html[data-theme="light"] .text-slate-300 { color: var(--text-secondary) !important; }
html[data-theme="light"] .text-slate-400 { color: var(--text-muted) !important; }
html[data-theme="light"] .text-slate-500 { color: var(--text-dim) !important; }
html[data-theme="light"] .text-slate-600 { color: var(--text-dimmer) !important; }
html[data-theme="light"] .text-slate-700 { color: var(--text-dimmer) !important; }

/* Scrollbar */
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--scroll-thumb) !important; }

/* Inline bg: #0f0f17 / #16161f override via background-image hack won't work for inline style,
   so we force key containers by common IDs + tag patterns used across our app */
html[data-theme="light"] nav[style*="background: rgba(15,15,23,.85)"],
html[data-theme="light"] nav[style*="rgba(15,15,23"] {
  background: rgba(248,250,252,.85) !important;
  border-bottom-color: var(--border-soft) !important;
}

/* Hover states that use white/[.02] */
html[data-theme="light"] .hover\:bg-white\/\[\.02\]:hover { background-color: rgba(15,23,42,.03) !important; }
html[data-theme="light"] .hover\:text-white:hover { color: var(--text-primary) !important; }

/* The grad-text gradient stays as-is (works on both themes) */

/* Cookie consent banner (overrides in dark/light) */
html[data-theme="light"] #skolaai-cc {
  background: #ffffff !important;
  color: var(--text-primary) !important;
  border-color: rgba(99,102,241,.25) !important;
  box-shadow: 0 20px 60px rgba(15,23,42,.15) !important;
}
html[data-theme="light"] #skolaai-cc h3 { color: var(--text-primary) !important; }
html[data-theme="light"] #skolaai-cc p { color: var(--text-muted) !important; }
html[data-theme="light"] #skolaai-cc .reject {
  background: rgba(15,23,42,.05) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-soft) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   INLINE-STYLE OVERRIDES (attribute selectors)
   Many pages use inline style="color:#..." which overrides class-based CSS.
   We target those specific hex values and remap them for the light theme.
   Covers the most common hardcoded colors across the codebase.
   ───────────────────────────────────────────────────────────────────────── */

/* Primary text (white-ish) — flip to dark */
html[data-theme="light"] [style*="color:#f1f5f9"],
html[data-theme="light"] [style*="color: #f1f5f9"],
html[data-theme="light"] [style*="color:#e2e8f0"],
html[data-theme="light"] [style*="color: #e2e8f0"],
html[data-theme="light"] [style*="color:white"],
html[data-theme="light"] [style*="color: white"],
html[data-theme="light"] [style*="color:#fff"],
html[data-theme="light"] [style*="color: #fff"],
html[data-theme="light"] [style*="color:#ffffff"],
html[data-theme="light"] [style*="color: #ffffff"] { color: var(--text-primary) !important; }

/* Secondary/muted text */
html[data-theme="light"] [style*="color:#cbd5e1"],
html[data-theme="light"] [style*="color: #cbd5e1"] { color: var(--text-secondary) !important; }
html[data-theme="light"] [style*="color:#94a3b8"],
html[data-theme="light"] [style*="color: #94a3b8"] { color: var(--text-muted) !important; }
html[data-theme="light"] [style*="color:#64748b"],
html[data-theme="light"] [style*="color: #64748b"] { color: var(--text-dim) !important; }
html[data-theme="light"] [style*="color:#475569"],
html[data-theme="light"] [style*="color: #475569"] { color: var(--text-dimmer) !important; }
html[data-theme="light"] [style*="color:#334155"],
html[data-theme="light"] [style*="color: #334155"],
html[data-theme="light"] [style*="color:#1e293b"],
html[data-theme="light"] [style*="color: #1e293b"] { color: var(--text-dimmer) !important; }

/* Dark backgrounds — flip to light surfaces */
html[data-theme="light"] [style*="background:#0f0f17"],
html[data-theme="light"] [style*="background: #0f0f17"],
html[data-theme="light"] [style*="background-color:#0f0f17"],
html[data-theme="light"] [style*="background-color: #0f0f17"] {
  background: var(--bg-base) !important;
}
html[data-theme="light"] [style*="background:#16161f"],
html[data-theme="light"] [style*="background: #16161f"],
html[data-theme="light"] [style*="background-color:#16161f"],
html[data-theme="light"] [style*="background-color: #16161f"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-soft);
}
html[data-theme="light"] [style*="background:#1a1a28"],
html[data-theme="light"] [style*="background: #1a1a28"] {
  background: var(--bg-card2) !important;
}

/* Indigo-tinted background surfaces (rgba(99,102,241,.06/.08/.12)) — keep light tint */
html[data-theme="light"] [style*="rgba(99,102,241,.06)"],
html[data-theme="light"] [style*="rgba(99,102,241,0.06)"] {
  background: rgba(99,102,241,.06) !important;
  border-color: rgba(99,102,241,.15) !important;
}

/* White-alpha backgrounds/borders (semi-transparent) — flip to dark-alpha */
html[data-theme="light"] [style*="rgba(255,255,255,.02)"] { background: rgba(15,23,42,.03) !important; }
html[data-theme="light"] [style*="rgba(255,255,255,.03)"] { background: rgba(15,23,42,.03) !important; }
html[data-theme="light"] [style*="rgba(255,255,255,.04)"] { background: rgba(15,23,42,.04) !important; }
html[data-theme="light"] [style*="rgba(255,255,255,.05)"] { background: rgba(15,23,42,.05) !important; }
html[data-theme="light"] [style*="rgba(255,255,255,.06)"] { background: rgba(15,23,42,.06) !important; }
html[data-theme="light"] [style*="rgba(255,255,255,.07)"] { border-color: rgba(15,23,42,.08) !important; }
html[data-theme="light"] [style*="rgba(255,255,255,.08)"] { border-color: rgba(15,23,42,.10) !important; }
html[data-theme="light"] [style*="rgba(255,255,255,.10)"] { border-color: rgba(15,23,42,.12) !important; }

/* Black-alpha overlays (modals) — lighten to neutral gray overlay */
html[data-theme="light"] [style*="rgba(0,0,0,.7)"] { background: rgba(15,23,42,.4) !important; }
html[data-theme="light"] [style*="rgba(0,0,0,.8)"] { background: rgba(15,23,42,.5) !important; }

/* #334155 as bg (scroll thumbs, dim surfaces) — lighten */
html[data-theme="light"] [style*="background:#334155"],
html[data-theme="light"] [style*="background: #334155"],
html[data-theme="light"] [style*="background-color:#334155"],
html[data-theme="light"] [style*="background-color: #334155"] { background: #cbd5e1 !important; }

/* Tailwind arbitrary classes using #0f172a (dark slate) - common for bg-slate-900 */
html[data-theme="light"] .bg-slate-900, html[data-theme="light"] .bg-slate-800 { background-color: var(--bg-card) !important; }

/* Ensure form inputs are legible */
html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-soft) !important;
}
html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder {
  color: var(--text-dim) !important;
}

/* Scroll thumb on elements */
html[data-theme="light"] [style*="background: #334155"]:where(*::-webkit-scrollbar-thumb),
html[data-theme="light"] [style*="background:#334155"]:where(*::-webkit-scrollbar-thumb) {
  background: var(--scroll-thumb) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   DASHBOARD-SPECIFIC (index, account, results, constructor, admin)
   ───────────────────────────────────────────────────────────────────────── */

/* Glass headers — blur over light bg */
html[data-theme="light"] .glass,
html[data-theme="light"] header.glass,
html[data-theme="light"] header[class*="glass"] {
  background: rgba(248,250,252,.85) !important;
  border-bottom-color: var(--border-soft) !important;
  backdrop-filter: blur(20px);
}

/* Common dark backgrounds used on dashboards */
html[data-theme="light"] .bg-black\/30,
html[data-theme="light"] .bg-black\/40,
html[data-theme="light"] .bg-black\/50 {
  background: rgba(248,250,252,.85) !important;
}

/* Admin sidebar */
html[data-theme="light"] nav.sidebar-nav,
html[data-theme="light"] .sidebar-nav,
html[data-theme="light"] aside[class*="sidebar"] {
  background: var(--bg-card) !important;
  border-right: 1px solid var(--border-soft) !important;
  color: var(--text-primary);
}

/* Cards: wide catch-all for .card / .card-sm common patterns */
html[data-theme="light"] .card,
html[data-theme="light"] .card-sm,
html[data-theme="light"] .content-card {
  background: var(--bg-card) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary);
}

/* Any element with inline background:rgba(15,15,23,*) or #0f0f17 — force to light bg */
html[data-theme="light"] [style*="rgba(15,15,23"] {
  background: rgba(248,250,252,.9) !important;
}
html[data-theme="light"] [style*="rgba(22,22,31"] {
  background: var(--bg-card) !important;
}
html[data-theme="light"] [style*="rgba(26,26,40"] {
  background: var(--bg-card2) !important;
}

/* Gradient backgrounds (linear-gradient with dark colors) */
html[data-theme="light"] [style*="linear-gradient(135deg, #16161f 0%, #1a1a28"] {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
}

/* Tailwind color utilities that don't start with bg-white */
html[data-theme="light"] .bg-slate-950,
html[data-theme="light"] .bg-slate-900,
html[data-theme="light"] .bg-slate-800,
html[data-theme="light"] .bg-neutral-900,
html[data-theme="light"] .bg-neutral-800,
html[data-theme="light"] .bg-zinc-900,
html[data-theme="light"] .bg-zinc-800 {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

/* Input / textarea background — explicit light */
html[data-theme="light"] .inp,
html[data-theme="light"] input.inp,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-soft) !important;
}

/* Buttons that were dark-glassy */
html[data-theme="light"] .btn-ghost {
  background: var(--bg-elev) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-soft) !important;
}
html[data-theme="light"] .btn-ghost:hover {
  background: var(--bg-elev-2) !important;
}

/* Any generic "card-like" divs with inline dark bg — best-effort catch */
html[data-theme="light"] div[style*="background:#0f0f17"],
html[data-theme="light"] div[style*="background: #0f0f17"] {
  background: var(--bg-base) !important;
  color: var(--text-primary);
}

/* Ensure ALL text inside a light-theme card is readable */
html[data-theme="light"] .card *,
html[data-theme="light"] .card-sm *,
html[data-theme="light"] .content-card * {
  /* don't override if it already has a specific color class */
}

/* ═════════════════════════════════════════════════════════════════════════
   COMPREHENSIVE LIGHT-THEME AUDIT (phase 2)
   Covers:
     • Additional inline dark bg hex values used in pages
     • Custom per-page classes (tabs, badges, cards, etc.)
     • Tailwind gray/slate/neutral utility coverage gaps
     • Semi-transparent nav bar + modal overlays
     • Gradient dark cards (post-card, results cards)
     • Heading tags (h1/h2/h3) with page-level color overrides
     • Footer, links, legal-page pills, auth form
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Inline dark hex backgrounds (catch-all for page-specific shades) ── */
html[data-theme="light"] [style*="background:#0d0d12"],
html[data-theme="light"] [style*="background: #0d0d12"],
html[data-theme="light"] [style*="background-color:#0d0d12"],
html[data-theme="light"] [style*="background:#0e0e18"],
html[data-theme="light"] [style*="background: #0e0e18"],
html[data-theme="light"] [style*="background:#12121c"],
html[data-theme="light"] [style*="background: #12121c"],
html[data-theme="light"] [style*="background:#141420"],
html[data-theme="light"] [style*="background: #141420"],
html[data-theme="light"] [style*="background:#1a1a27"],
html[data-theme="light"] [style*="background: #1a1a27"],
html[data-theme="light"] [style*="background:#1a1a2e"],
html[data-theme="light"] [style*="background: #1a1a2e"],
html[data-theme="light"] [style*="background:#1a1930"],
html[data-theme="light"] [style*="background: #1a1930"],
html[data-theme="light"] [style*="background:#1c1a12"],
html[data-theme="light"] [style*="background: #1c1a12"],
html[data-theme="light"] [style*="background:#1a0f0f"],
html[data-theme="light"] [style*="background:#0f1a14"],
html[data-theme="light"] [style*="background:#1e1e2e"],
html[data-theme="light"] [style*="background: #1e1e2e"],
html[data-theme="light"] [style*="background:#2a2a38"],
html[data-theme="light"] [style*="background:#1e293b"],
html[data-theme="light"] [style*="background: #1e293b"] {
  background: var(--bg-card) !important;
  color: var(--text-primary);
}

/* ── Arbitrary Tailwind dark hex brackets ── */
html[data-theme="light"] .bg-\[\#0d0d12\],
html[data-theme="light"] .bg-\[\#0e0e18\],
html[data-theme="light"] .bg-\[\#0f0f17\],
html[data-theme="light"] .bg-\[\#12121c\],
html[data-theme="light"] .bg-\[\#141420\],
html[data-theme="light"] .bg-\[\#16161f\],
html[data-theme="light"] .bg-\[\#1a1a27\],
html[data-theme="light"] .bg-\[\#1a1a28\],
html[data-theme="light"] .bg-\[\#1a1a2e\],
html[data-theme="light"] .bg-\[\#1e1e2e\] {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

/* ── Inline gradient dark cards (results.html & forum.html) ── */
html[data-theme="light"] [style*="linear-gradient(135deg, #16161f 0%, #0f1a14"],
html[data-theme="light"] [style*="linear-gradient(135deg,#16161f 0%,#0f1a14"] {
  background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%) !important;
}
html[data-theme="light"] [style*="linear-gradient(135deg, #16161f 0%, #1a0f0f"],
html[data-theme="light"] [style*="linear-gradient(135deg,#16161f 0%,#1a0f0f"] {
  background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%) !important;
}
html[data-theme="light"] [style*="linear-gradient(135deg, #16161f 0%, #1a1930"],
html[data-theme="light"] [style*="linear-gradient(135deg,#16161f 0%,#1a1930"] {
  background: linear-gradient(135deg, #ffffff 0%, #eef2ff 100%) !important;
}
html[data-theme="light"] [style*="linear-gradient(135deg, #16161f 0%, #1c1a12"],
html[data-theme="light"] [style*="linear-gradient(135deg,#16161f 0%,#1c1a12"] {
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%) !important;
}

/* ── Class-based gradient cards (results/forum card modifiers) ── */
html[data-theme="light"] .card-done {
  background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%) !important;
  border-color: rgba(16,185,129,.25) !important;
}
html[data-theme="light"] .card-error {
  background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%) !important;
  border-color: rgba(239,68,68,.25) !important;
}
html[data-theme="light"] .card-processing {
  border-color: rgba(99,102,241,.3) !important;
}
html[data-theme="light"] .post-card,
html[data-theme="light"] .gen-card,
html[data-theme="light"] .plan-card,
html[data-theme="light"] .section-card,
html[data-theme="light"] .modal-box,
html[data-theme="light"] .preview-box,
html[data-theme="light"] .reply-card {
  background: var(--bg-card) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary);
}
html[data-theme="light"] .reply-card {
  background: var(--bg-card2) !important;
}
html[data-theme="light"] .post-card.is-pinned {
  background: linear-gradient(135deg, #ffffff 0%, #eef2ff 100%) !important;
  border-color: rgba(99,102,241,.35) !important;
}
html[data-theme="light"] .post-card.is-news {
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%) !important;
  border-color: rgba(245,158,11,.3) !important;
}

/* ── Stat cards (admin, account) ── */
html[data-theme="light"] .stat-card,
html[data-theme="light"] .subj-card,
html[data-theme="light"] .s-card,
html[data-theme="light"] .m-card,
html[data-theme="light"] .action-card {
  background: var(--bg-card) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary);
}
html[data-theme="light"] .s-card,
html[data-theme="light"] .m-card {
  background: rgba(15,23,42,.02) !important;
}

/* ── Stat number gradient text (admin has solid #f1f5f9) ── */
html[data-theme="light"] .stat-num {
  color: var(--text-primary) !important;
}
html[data-theme="light"] .stat-label {
  color: var(--text-muted) !important;
}

/* ── Admin-specific overrides ── */
html[data-theme="light"] .admin-sidebar {
  background: var(--bg-card) !important;
  border-right-color: var(--border-soft) !important;
}
html[data-theme="light"] .admin-topbar {
  background: rgba(248,250,252,.85) !important;
  border-bottom-color: var(--border-soft) !important;
}
html[data-theme="light"] .sidebar-item {
  color: var(--text-muted) !important;
}
html[data-theme="light"] .sidebar-item:hover {
  color: var(--text-primary) !important;
  background: rgba(15,23,42,.04) !important;
}
html[data-theme="light"] .sidebar-item.active {
  color: var(--text-primary) !important;
  background: rgba(99,102,241,.1) !important;
  border-color: rgba(99,102,241,.25) !important;
}
html[data-theme="light"] .sidebar-divider {
  background: var(--border-soft) !important;
}
html[data-theme="light"] .sidebar-bottom {
  border-top-color: var(--border-soft) !important;
}
html[data-theme="light"] .admin-table th,
html[data-theme="light"] table th {
  color: var(--text-dim) !important;
  border-bottom-color: var(--border-soft) !important;
}
html[data-theme="light"] .admin-table td,
html[data-theme="light"] table td {
  color: var(--text-secondary) !important;
  border-bottom-color: var(--border-softer) !important;
}
html[data-theme="light"] .admin-table tr:hover td,
html[data-theme="light"] table tr:hover td {
  background: rgba(15,23,42,.03) !important;
}

/* ── Tabs (account, auth) ── */
html[data-theme="light"] .tab-nav,
html[data-theme="light"] .tabs {
  background: rgba(15,23,42,.04) !important;
  border-color: var(--border-soft) !important;
}
html[data-theme="light"] .tab,
html[data-theme="light"] .tab-btn {
  color: var(--text-muted) !important;
}
html[data-theme="light"] .tab:hover:not(.active),
html[data-theme="light"] .tab-btn:hover {
  color: var(--text-primary) !important;
  background: rgba(15,23,42,.03) !important;
}
/* Active tab keeps indigo gradient but text stays indigo on light */
html[data-theme="light"] .tab.active,
html[data-theme="light"] .tab-btn.active {
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(139,92,246,.12)) !important;
  color: #4f46e5 !important;
}

/* ── Filter tabs (forum) ── */
html[data-theme="light"] .filter-tab {
  color: var(--text-muted) !important;
}
html[data-theme="light"] .filter-tab:hover {
  color: var(--text-primary) !important;
  background: rgba(15,23,42,.04) !important;
}
html[data-theme="light"] .filter-tab.active {
  background: rgba(99,102,241,.12) !important;
  color: #4f46e5 !important;
  border-color: rgba(99,102,241,.3) !important;
}

/* ── Buttons ── */
html[data-theme="light"] .btn-ghost {
  background: rgba(15,23,42,.04) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-soft) !important;
}
html[data-theme="light"] .btn-ghost:hover {
  background: rgba(15,23,42,.07) !important;
  color: var(--text-primary) !important;
}
html[data-theme="light"] .btn-secondary {
  background: rgba(15,23,42,.04) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="light"] .btn-secondary:hover {
  background: rgba(15,23,42,.07) !important;
  color: var(--text-primary) !important;
}
/* btn-primary / btn-green / btn-download keep purple/green gradients — they read fine on white */
/* Keep .btn-primary/.cta WHITE text — do NOT flip these */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-green,
html[data-theme="light"] .btn-download,
html[data-theme="light"] .btn-submit,
html[data-theme="light"] .submit-btn,
html[data-theme="light"] .cta {
  color: #ffffff !important;
}

/* ── Forum vote buttons ── */
html[data-theme="light"] .vote-btn {
  background: rgba(15,23,42,.04) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-muted) !important;
}
html[data-theme="light"] .vote-count {
  color: var(--text-primary) !important;
}
html[data-theme="light"] .vote-col {
  border-right-color: var(--border-softer) !important;
}

/* ── Inputs — .inp, .field input, .search-field, .text-field ── */
html[data-theme="light"] .inp,
html[data-theme="light"] .inp-sm,
html[data-theme="light"] .field input,
html[data-theme="light"] .search-field,
html[data-theme="light"] .text-field,
html[data-theme="light"] .field textarea {
  background: var(--bg-card) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary) !important;
}
html[data-theme="light"] .inp::placeholder,
html[data-theme="light"] .inp-sm::placeholder,
html[data-theme="light"] .field input::placeholder,
html[data-theme="light"] .search-field::placeholder,
html[data-theme="light"] .text-field::placeholder,
html[data-theme="light"] .field textarea::placeholder {
  color: var(--text-dim) !important;
}
html[data-theme="light"] select.inp option,
html[data-theme="light"] select.inp-sm option {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

/* ── Pills / chips that are indigo-accented (g-pill, opt-btn, sr-row, t-row) ── */
html[data-theme="light"] .g-pill,
html[data-theme="light"] .opt-btn,
html[data-theme="light"] .sr-row {
  background: rgba(15,23,42,.02) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="light"] .g-pill:hover,
html[data-theme="light"] .opt-btn:hover {
  color: #4f46e5 !important;
  background: rgba(99,102,241,.08) !important;
}
/* Active states keep indigo gradient + white text */
html[data-theme="light"] .g-pill.on,
html[data-theme="light"] .m-card.on .m-check {
  color: #ffffff !important;
}
html[data-theme="light"] .opt-btn.on {
  background: rgba(99,102,241,.12) !important;
  color: #4f46e5 !important;
}
html[data-theme="light"] .t-row:hover {
  background: rgba(15,23,42,.03) !important;
}
html[data-theme="light"] .t-row.on {
  background: rgba(99,102,241,.1) !important;
}
html[data-theme="light"] .t-dot {
  border-color: var(--text-dim) !important;
}
html[data-theme="light"] .sr-row .sr-code,
html[data-theme="light"] .sr-row .sr-desc {
  color: var(--text-muted) !important;
}
html[data-theme="light"] .s-card .lbl {
  color: var(--text-muted) !important;
}

/* ── Mat-chip / source-badge (semantic colored chips keep their tints, just readable) ── */
/* Keep their color definitions — they use rgba indigo/sky/slate which works on both */

/* ── Plan badges & plan-card ── */
html[data-theme="light"] .plan-free,
html[data-theme="light"] .status-pending,
html[data-theme="light"] .status-open,
html[data-theme="light"] .status-closed,
html[data-theme="light"] .badge-slate {
  background: rgba(100,116,139,.10) !important;
  color: #475569 !important;
  border-color: rgba(100,116,139,.25) !important;
}
html[data-theme="light"] .plan-badge-free { color: #475569 !important; }
/* plan-plus, plan-school, badge-indigo, badge-green, badge-red, badge-amber, badge-blue
   use colored rgba backgrounds — they read OK on white, leave as-is */

/* ── Price-table (terms, cookies) ── */
html[data-theme="light"] .price-table {
  border-color: var(--border-soft) !important;
}
html[data-theme="light"] .price-table th {
  background: rgba(99,102,241,.08) !important;
  color: #4f46e5 !important;
}
html[data-theme="light"] .price-table td {
  color: var(--text-secondary) !important;
  border-top-color: var(--border-softer) !important;
}
html[data-theme="light"] .price-table tr:hover td {
  background: rgba(15,23,42,.02) !important;
}

/* ── Legal pages: h1/h2, section-title, subtitle, footer ── */
html[data-theme="light"] .content-card,
html[data-theme="light"] .card.content-card {
  background: var(--bg-card) !important;
  border-color: var(--border-soft) !important;
  box-shadow: 0 10px 32px rgba(15,23,42,.06) !important;
}
html[data-theme="light"] .section-title {
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-softer) !important;
}
html[data-theme="light"] .section-block p,
html[data-theme="light"] .section-block li {
  color: var(--text-secondary) !important;
}
html[data-theme="light"] .subtitle {
  color: var(--text-muted) !important;
}
html[data-theme="light"] .footer,
html[data-theme="light"] footer.footer {
  color: var(--text-muted) !important;
}
html[data-theme="light"] .footer a,
html[data-theme="light"] footer a {
  color: var(--text-muted) !important;
}
html[data-theme="light"] .footer a:hover,
html[data-theme="light"] footer a:hover {
  color: var(--text-primary) !important;
}
html[data-theme="light"] a.link {
  color: #4f46e5 !important;
}
html[data-theme="light"] a.link:hover {
  color: #3730a3 !important;
}

/* ── Divider in auth page ── */
html[data-theme="light"] .divider {
  color: var(--text-muted) !important;
}
html[data-theme="light"] .divider::before,
html[data-theme="light"] .divider::after {
  background: var(--border-soft) !important;
}
html[data-theme="light"] .alt,
html[data-theme="light"] .back,
html[data-theme="light"] .card-sub {
  color: var(--text-muted) !important;
}
html[data-theme="light"] .back:hover {
  color: var(--text-primary) !important;
}
html[data-theme="light"] .card-title,
html[data-theme="light"] .logo-name {
  color: var(--text-primary) !important;
}

/* ── Nav bar inline styles (many pages use style="background:rgba(15,15,23,.9)" etc) ── */
html[data-theme="light"] header[style*="rgba(15,15,23,.9)"],
html[data-theme="light"] header[style*="rgba(15,15,23,.92)"],
html[data-theme="light"] header[style*="rgba(15,15,23,.88)"],
html[data-theme="light"] [style*="background:rgba(15,15,23,.9)"],
html[data-theme="light"] [style*="background: rgba(15,15,23,.9)"],
html[data-theme="light"] [style*="background:rgba(15,15,23,.92)"],
html[data-theme="light"] [style*="background:rgba(15,15,23,.88)"],
html[data-theme="light"] [style*="background:rgba(15,15,23,.96)"],
html[data-theme="light"] [style*="background:rgba(22,22,31,.85)"] {
  background: rgba(248,250,252,.9) !important;
  border-bottom-color: var(--border-soft) !important;
}
html[data-theme="light"] [style*="background:rgba(10,10,18,.85)"] {
  background: rgba(248,250,252,.85) !important;
}

/* ── Modal overlays ── */
html[data-theme="light"] .modal-overlay,
html[data-theme="light"] .preview-overlay {
  background: rgba(15,23,42,.35) !important;
}

/* ── Scrollbar thumb on inline styles ── */
html[data-theme="light"] [style*="::-webkit-scrollbar-thumb"][style*="#334155"] {
  background: var(--scroll-thumb) !important;
}

/* ── Tailwind gray/slate utilities (all variants in use) ── */
html[data-theme="light"] .text-gray-100 { color: var(--text-primary) !important; }
html[data-theme="light"] .text-gray-300 { color: var(--text-secondary) !important; }
html[data-theme="light"] .text-gray-400 { color: var(--text-muted) !important; }
html[data-theme="light"] .text-gray-500 { color: var(--text-dim) !important; }
html[data-theme="light"] .text-gray-600 { color: var(--text-dimmer) !important; }
html[data-theme="light"] .text-slate-100 { color: var(--text-primary) !important; }
html[data-theme="light"] .border-gray-400,
html[data-theme="light"] .border-gray-600,
html[data-theme="light"] .border-slate-400,
html[data-theme="light"] .border-slate-500 { border-color: var(--border-soft) !important; }
html[data-theme="light"] .bg-slate-400,
html[data-theme="light"] .bg-slate-500,
html[data-theme="light"] .bg-slate-600,
html[data-theme="light"] .bg-slate-700 { background-color: #e2e8f0 !important; }
html[data-theme="light"] .hover\:text-slate-400:hover { color: var(--text-muted) !important; }
html[data-theme="light"] .hover\:border-gray-400:hover { border-color: var(--border-softer) !important; }

/* ── Tailwind arbitrary alpha tokens bg-white/N ── */
html[data-theme="light"] .bg-white\/4 { background-color: rgba(15,23,42,.04) !important; }
html[data-theme="light"] .bg-white\/5 { background-color: rgba(15,23,42,.05) !important; }
html[data-theme="light"] .bg-white\/8 { background-color: rgba(15,23,42,.06) !important; }
html[data-theme="light"] .bg-white\/10 { background-color: rgba(15,23,42,.07) !important; }
html[data-theme="light"] .border-white\/7,
html[data-theme="light"] .border-white\/8,
html[data-theme="light"] .border-white\/15 { border-color: var(--border-soft) !important; }

/* ── Semi-transparent card layers used inline (rgba(255,255,255,.12 / .15 / .18)) ── */
html[data-theme="light"] [style*="rgba(255,255,255,.12)"] { background: rgba(15,23,42,.08) !important; }
html[data-theme="light"] [style*="rgba(255,255,255,.15)"] { background: rgba(15,23,42,.08) !important; }
html[data-theme="light"] [style*="rgba(255,255,255,.18)"] { background: rgba(15,23,42,.10) !important; }

/* ── Black-alpha overlays (additional values) ── */
html[data-theme="light"] [style*="rgba(0,0,0,.2)"] { background: rgba(15,23,42,.06) !important; }
html[data-theme="light"] [style*="rgba(0,0,0,.3)"] { background: rgba(15,23,42,.10) !important; }
html[data-theme="light"] [style*="rgba(0,0,0,.35)"] { background: rgba(15,23,42,.12) !important; }
html[data-theme="light"] [style*="rgba(0,0,0,.4)"] { background: rgba(15,23,42,.18) !important; }
html[data-theme="light"] [style*="rgba(0,0,0,.5)"] { background: rgba(15,23,42,.25) !important; }
html[data-theme="light"] [style*="rgba(0,0,0,.6)"] { background: rgba(15,23,42,.32) !important; }
html[data-theme="light"] [style*="rgba(0,0,0,.75)"] { background: rgba(15,23,42,.45) !important; }
/* Heavy shadows from rgba(0,0,0,*) in inline styles get softened via blanket shadow rule below */

/* ── Heavy box-shadows look harsh on white — soften ── */
html[data-theme="light"] [style*="box-shadow:0 24px 60px rgba(0,0,0"],
html[data-theme="light"] [style*="box-shadow: 0 24px 60px rgba(0,0,0"],
html[data-theme="light"] [style*="box-shadow:0 16px 48px rgba(0,0,0"],
html[data-theme="light"] [style*="box-shadow: 0 16px 48px rgba(0,0,0"],
html[data-theme="light"] [style*="box-shadow:0 12px 40px rgba(0,0,0"],
html[data-theme="light"] [style*="box-shadow:0 8px 32px rgba(0,0,0"] {
  box-shadow: 0 10px 28px rgba(15,23,42,.08) !important;
}

/* ── Solid hex text colors at title level ── */
html[data-theme="light"] [style*="color:#818cf8"],
html[data-theme="light"] [style*="color: #818cf8"],
html[data-theme="light"] [style*="color:#a5b4fc"],
html[data-theme="light"] [style*="color: #a5b4fc"] {
  /* Indigo-400/300 text on dark reads as indigo-500 on light for better contrast */
  color: #4f46e5 !important;
}
html[data-theme="light"] [style*="color:#c4b5fd"],
html[data-theme="light"] [style*="color:#c7d2fe"] {
  color: #6366f1 !important;
}

/* ── Reason-btn (contact page) ── */
html[data-theme="light"] .reason-btn {
  background: rgba(15,23,42,.03) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-muted) !important;
}
html[data-theme="light"] .reason-btn:hover {
  background: rgba(99,102,241,.06) !important;
  color: #4f46e5 !important;
}
html[data-theme="light"] .reason-btn.active {
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.08)) !important;
  color: #4f46e5 !important;
}

/* ── Field (contact form) ── */
html[data-theme="light"] .field {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-soft) !important;
}
html[data-theme="light"] .field::placeholder {
  color: var(--text-dim) !important;
}

/* ── Action bar (materials) ── */
html[data-theme="light"] .action-bar {
  background: rgba(248,250,252,.92) !important;
  border-top-color: var(--border-soft) !important;
}

/* ── Source panel (constructor) ── */
html[data-theme="light"] .source-panel {
  background: rgba(99,102,241,.04) !important;
}

/* ── Checkbox-custom (admin) ── */
html[data-theme="light"] .checkbox-custom {
  background: rgba(15,23,42,.03) !important;
  border-color: var(--border-soft) !important;
}

/* ── Skeleton shimmer — flip to dark-alpha for visibility on white ── */
html[data-theme="light"] .skeleton {
  background: linear-gradient(90deg,
    rgba(15,23,42,.05) 25%,
    rgba(15,23,42,.09) 50%,
    rgba(15,23,42,.05) 75%) !important;
  background-size: 400px 100%;
}

/* ── Logo name / logo badge in legal pages (inline color) ── */
html[data-theme="light"] [style*="color:#f1f5f9"][style*="font-weight:800"],
html[data-theme="light"] [style*="color: #f1f5f9"][style*="font-weight:800"] {
  color: var(--text-primary) !important;
}

/* ── Loading screens using bg-[#0f0f17] / bg-[#0d0d12] ── */
html[data-theme="light"] .fixed.inset-0.bg-\[\#0f0f17\],
html[data-theme="light"] .fixed.inset-0.bg-\[\#0d0d12\] {
  background-color: var(--bg-base) !important;
}

/* ── 404/500 pages use text-gray-* + text-white directly ── */
html[data-theme="light"] body.min-h-screen.text-white {
  color: var(--text-primary) !important;
}

/* ── Ensure all h1/h2/h3 without an override color read properly ── */
html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3 {
  color: var(--text-primary);
}

/* ── Code tag (cookies/legal) ── */
html[data-theme="light"] code {
  background: rgba(99,102,241,.08) !important;
  color: #4338ca !important;
}

/* ── Forum / post content body ── */
html[data-theme="light"] .post-content {
  color: var(--text-secondary) !important;
}

/* Theme toggle button */
#theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
  padding: 0;
}
#theme-toggle:hover {
  color: var(--text-primary);
  background: var(--bg-elev);
  border-color: var(--border-softer);
}
#theme-toggle svg { width: 16px; height: 16px; }
#theme-toggle .icon-sun { display: none; }
html[data-theme="light"] #theme-toggle .icon-moon { display: none; }
html[data-theme="light"] #theme-toggle .icon-sun { display: block; }

/* ─────────────────────────────────────────────────────────────────────────
   Toast notifications — theme-aware variants
   Used in admin.html / account.html via :class bindings.
   ───────────────────────────────────────────────────────────────────────── */
.toast-error {
  background: rgba(127, 29, 29, 0.80);
  border-color: rgba(239, 68, 68, 0.20);
  color: #fca5a5;
}
.toast-success {
  background: rgba(6, 78, 59, 0.80);
  border-color: rgba(16, 185, 129, 0.20);
  color: #6ee7b7;
}
.toast-info {
  background: rgba(15, 23, 42, 0.90);
  border-color: rgba(255, 255, 255, 0.10);
  color: #cbd5e1;
}
html[data-theme="light"] .toast-error {
  background: rgba(254, 226, 226, 0.95) !important;
  border-color: rgba(220, 38, 38, 0.30) !important;
  color: #991b1b !important;
  backdrop-filter: blur(10px);
}
html[data-theme="light"] .toast-success {
  background: rgba(220, 252, 231, 0.95) !important;
  border-color: rgba(5, 150, 105, 0.30) !important;
  color: #166534 !important;
  backdrop-filter: blur(10px);
}
html[data-theme="light"] .toast-info {
  background: rgba(241, 245, 249, 0.95) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  color: #0f172a !important;
  backdrop-filter: blur(10px);
}

/* Nav back link — theme-aware hover (was inline onmouseover before) */
.nav-back-link { color: #64748b; }
.nav-back-link:hover { color: #e2e8f0; }
html[data-theme="light"] .nav-back-link { color: #64748b; }
html[data-theme="light"] .nav-back-link:hover { color: #0f172a; }

/* Grad-text solid fallback in light mode (contrast) */
html[data-theme="light"] .grad-text {
  /* Keep gradient but increase saturation for light bg contrast */
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}