/* =================================================================
 * Light Theme — Targeted Overrides
 * =================================================================
 *
 * Purpose: catch the cases the refactor of /css/*.css couldn't reach
 * cleanly with a sed-based pass — namely:
 *  - Dark backgrounds hardcoded via rgba(0, 0, 0, X) which should
 *    flip to subtle light-mode equivalents in light theme.
 *  - <input>, <textarea>, <select> styling (UA stylesheet wins
 *    against many of our rules otherwise).
 *  - Tables (datatables, admin tables) that inherit dark stripes.
 *  - Code blocks / terminals — these intentionally STAY DARK in
 *    both modes for readability and "hacker terminal" semantics.
 *
 * Load order: this file must be loaded AFTER every other css/*.css
 * (see app.html).
 *
 * Cascade strategy:
 *   1. We target the SAME selectors that hardcoded the dark values
 *      (or close ancestors) prefixed with [data-theme="light"].
 *   2. We only use !important where a Svelte scoped style would
 *      otherwise win specificity.
 *   3. Code/terminal blocks: we EXPLICITLY re-assert the dark
 *      background under [data-theme="light"] so they don't get
 *      affected by other overrides here.
 *
 * Reference theme tokens (defined in x0ne-theme.css):
 *   light:  --bg:#f3f2fc  --bg-elevated:#ebebf5  --bg-card:rgba(42,112,196,0.06)
 *           --text:#16161e  --text-secondary:#42465c  --text-muted:#72768a
 *           --border:rgba(42,112,196,0.18)
 * ================================================================= */


/* -------------------------------------------------------------
 * 1. Body fallback
 * Ensure body always uses the theme tokens.
 * ------------------------------------------------------------- */

html[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}


/* -------------------------------------------------------------
 * 2. Form controls
 * Browser UA stylesheets force white backgrounds on inputs and
 * dark text on form elements that we then style on top of.
 * Explicit values keep this consistent across browsers.
 * ------------------------------------------------------------- */

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background-color: var(--bg-elevated);
  color: var(--text);
  border-color: var(--border);
  color-scheme: light;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

html[data-theme="light"] select option {
  background-color: var(--bg-elevated);
  color: var(--text);
}


/* -------------------------------------------------------------
 * 3. Dark backgrounds that should become subtle light layers
 *
 * Pattern: `background: rgba(0,0,0, 0.05–0.2)` is used across
 * admin-quiz.css, components/admin.css, etc. for slightly
 * recessed/elevated card areas. In light mode, equivalent recess
 * is achieved with a subtle blue tint on the lighter bg.
 *
 * We target the most common selectors directly.
 * ------------------------------------------------------------- */

html[data-theme="light"] .questions-container,
html[data-theme="light"] .quiz-editor-section .question-row.expanded .question-details,
html[data-theme="light"] .quiz-editor-section .questions-unified-list,
html[data-theme="light"] .quiz-tab-panel,
html[data-theme="light"] .admin-section-recessed {
  background: var(--bg-card);
}

html[data-theme="light"] .quiz-input,
html[data-theme="light"] .quiz-search,
html[data-theme="light"] .analytics-search {
  background: var(--bg-elevated);
}

/* Subtle stripe bands (datatables, list rows) */
html[data-theme="light"] table.dataTable.stripe tbody tr.odd,
html[data-theme="light"] table.dataTable.display tbody tr.odd {
  background-color: rgba(42, 112, 196, 0.04);
}


/* -------------------------------------------------------------
 * 4. Modal overlays — KEEP DARK in both modes
 *
 * Modal overlays are intentionally dark to create separation
 * from the content underneath. This is correct in both themes.
 * We re-assert here ONLY to make explicit that we know about
 * these and chose not to flip them.
 * ------------------------------------------------------------- */

/* (no-op: rgba(0,0,0,0.5+) overlays in modal.css and elsewhere
 * stay as-is in light mode and that is intentional) */


/* -------------------------------------------------------------
 * 5. Terminal / code blocks — STAY DARK
 *
 * Terminal emulation, code samples, and crackme-contest pages
 * preserve a dark aesthetic in both modes. This is a deliberate
 * design choice for readability of monospaced output and the
 * "hacker terminal" identity.
 *
 * If a future refactor accidentally bleeds light theme into these,
 * un-comment / extend the rules below.
 * ------------------------------------------------------------- */

html[data-theme="light"] .terminal,
html[data-theme="light"] pre.code-block,
html[data-theme="light"] pre.terminal,
html[data-theme="light"] .code-template,
html[data-theme="light"] [data-theme-lock="dark"] {
  background: #000;
  color: #d4d4d8;
}

html[data-theme="light"] .terminal *,
html[data-theme="light"] pre.code-block *,
html[data-theme="light"] [data-theme-lock="dark"] * {
  color: inherit;
}


/* -------------------------------------------------------------
 * 6. Borders that were hardcoded white in dark mode
 *
 * The refactor of color: rgba(255,255,255,X) didn't touch
 * border-color: rgba(255,255,255,X). In dark mode the contrast
 * is fine; in light mode these borders disappear into the bg.
 * Override broadly: any element using a near-white border should
 * use --border in light mode.
 * ------------------------------------------------------------- */

html[data-theme="light"] [class*="card"],
html[data-theme="light"] [class*="-tab"],
html[data-theme="light"] [class*="-row"],
html[data-theme="light"] [class*="-section"],
html[data-theme="light"] .modal,
html[data-theme="light"] .modal-box,
html[data-theme="light"] .modal-overlay > * {
  border-color: var(--border);
}


/* -------------------------------------------------------------
 * 7. Notifications — re-declared --bg-elevated locally in
 *    components/notification.css, so the light override doesn't
 *    cascade. Re-flip it here.
 * ------------------------------------------------------------- */

html[data-theme="light"] #notification-container,
html[data-theme="light"] .notification {
  --bg-elevated: #ebebf5;
  --text: #16161e;
}


/* -------------------------------------------------------------
 * 8. SvelteKit-scoped components
 *
 * Many Svelte components use rgba(255,255,255,X) directly in their
 * scoped <style> blocks. Those classes get hashed (e.g. .foo.svelte-abc)
 * and inherit the rgba() value regardless of theme.
 *
 * We can't target hashed classes cleanly from a global file. The
 * proper fix for those is in-component (replace rgba(...) with
 * var(--text-*) inside each .svelte). This file does NOT try to
 * paper over them — it would be hacky and lose specificity to the
 * scoped rules anyway.
 *
 * Status of in-component refactor:
 *   - MonitoringBar.svelte               done (theme toggle now visible in light)
 *   - GlobalSidebar.svelte               done
 *   - (app)/+layout.svelte               done
 *   - admin/modules/[id]/+page.svelte    pending (heaviest — 143 occurrences)
 *   - admin/projects/[id]/+page.svelte   pending (191)
 *   - admin/classes/+page.svelte         pending
 *   - GameShell.svelte                   pending (111)
 *   - ProjectView.svelte                 pending
 *
 * (See task list / TODO for tracking.)
 * ------------------------------------------------------------- */


/* -------------------------------------------------------------
 * 9. HackMachina chat surface — light-theme readability
 *
 * The `[slug]/+page.svelte` chat page declares all its text colours
 * as `rgba(255,255,255,X)` which are invisible on the light bg.
 * SvelteKit-scoped CSS still keeps the class names (.chat-thread,
 * .msg-bubble, .msg-body, .think-content, .pipeline-*) so we can
 * override from here. We target ONLY text and surface-bg properties
 * — borders/accents stay as defined to keep the brand intact.
 * ------------------------------------------------------------- */

html[data-theme="light"] .chat-thread,
html[data-theme="light"] .chat-thread .msg-body,
html[data-theme="light"] .chat-thread .msg-bubble,
html[data-theme="light"] .chat-thread .md-content,
html[data-theme="light"] .chat-thread .md-content :global(p),
html[data-theme="light"] .chat-thread .md-content :global(li),
html[data-theme="light"] .chat-thread .md-content :global(strong),
html[data-theme="light"] .chat-thread .md-content :global(em) {
  color: var(--text);
}

/* User messages: keep them visually distinct from assistant messages
   via background + a subtle border, not just text colour. */
html[data-theme="light"] .chat-thread .msg-user .msg-bubble {
  background: rgba(42, 112, 196, 0.08);
  color: var(--text);
  border: 1px solid rgba(42, 112, 196, 0.15);
}

html[data-theme="light"] .chat-thread .msg-assistant .msg-bubble {
  color: var(--text);
}

/* Code blocks inside assistant responses keep the dark terminal look. */
html[data-theme="light"] .chat-thread .md-content :global(code),
html[data-theme="light"] .chat-thread .md-content :global(pre) {
  background: #16161e;
  color: #d4d4d8;
}

/* Pipeline / thinking / tool traces — the metadata strips above each
   assistant bubble. These use rgba(255,255,255,0.X) to feel "secondary"
   on dark; in light mode we need the same secondary feel but dark. */
html[data-theme="light"] .pipeline-trace,
html[data-theme="light"] .think-block,
html[data-theme="light"] .tool-trace {
  color: var(--text-secondary);
}

html[data-theme="light"] .pipeline-label,
html[data-theme="light"] .think-label,
html[data-theme="light"] .tool-trace-label {
  color: var(--text-muted);
}

/* Sidebar (HackmachinaSidebar + HackmachinaAdminSidebar) — text inside
   session/challenge list items reads white-on-white in light mode. */
html[data-theme="light"] .hms-sess-name,
html[data-theme="light"] .hms-sess-meta,
html[data-theme="light"] .hms-sess-who,
html[data-theme="light"] .hms-sess-ch,
html[data-theme="light"] .hms-ch-title,
html[data-theme="light"] .hms-cat-name {
  color: var(--text);
}

html[data-theme="light"] .hms-sess-item.active .hms-sess-name,
html[data-theme="light"] .hms-ch-item.active .hms-ch-title {
  color: var(--text);
  font-weight: 600;
}

html[data-theme="light"] .hms-sess-turns,
html[data-theme="light"] .hms-sess-status,
html[data-theme="light"] .hms-ch-pts,
html[data-theme="light"] .hms-cat-n {
  color: var(--text-muted);
}

/* Sidebar hover/active strip on items: bump contrast slightly so the
   highlight reads against the light bg. */
html[data-theme="light"] .hms-sess-item:hover,
html[data-theme="light"] .hms-ch-item:hover {
  background: rgba(42, 112, 196, 0.05);
}

html[data-theme="light"] .hms-sess-item.active,
html[data-theme="light"] .hms-ch-item.active {
  background: rgba(42, 112, 196, 0.09);
}

/* Chat header bar (title + model badge + tags) */
html[data-theme="light"] .chat-header,
html[data-theme="light"] .chat-title,
html[data-theme="light"] .chat-model-name,
html[data-theme="light"] .chat-tag,
html[data-theme="light"] .gs-accent {
  color: var(--text);
}

html[data-theme="light"] .chat-tag {
  background: var(--bg-elevated);
  border-color: var(--border);
}

/* Status bar (ok-bar / err-bar) when a session resolves. */
html[data-theme="light"] .status-bar.ok-bar,
html[data-theme="light"] .status-bar.err-bar {
  color: var(--text);
}

html[data-theme="light"] .pill-btn {
  color: var(--text);
  border-color: var(--border);
  background: var(--bg-elevated);
}
html[data-theme="light"] .pill-btn:hover {
  border-color: var(--border-hover);
  background: var(--bg-card);
}


/* -------------------------------------------------------------
 * 10. HackMachina challenge LIST page (hex cards) — readability
 *
 * The hex grid uses translucent category tints (rgba) over a dark
 * page bg. In light mode the tints become pastel washes and the
 * white-ish text turns invisible. Force dark text on the hex face
 * + a subtle dark backdrop tile so the cards keep their visual
 * weight on a light bg.
 * ------------------------------------------------------------- */

html[data-theme="light"] .gs-header h1,
html[data-theme="light"] .gs-header h2,
html[data-theme="light"] .gs-accent {
  color: var(--text);
}
html[data-theme="light"] .gs-header p,
html[data-theme="light"] .gs-subtitle {
  color: var(--text-secondary);
}

/* Hex cards — keep the dark "terminal tile" identity in light mode.
   The category-tinted borders + light text inside the hex are part of
   the brand (same logic as we apply to code blocks). On the light page
   bg, this gives the hexagons strong presence and good contrast. */
html[data-theme="light"] .hex-face {
  background: #14151c;
}
html[data-theme="light"] .hex-card:hover .hex-face,
html[data-theme="light"] .hex-card.hex-hovered .hex-face {
  background: #1c1d26;
}
html[data-theme="light"] .hex-border {
  background: rgba(var(--hc), 0.55); /* much more saturated tint border */
  opacity: 1;
}
html[data-theme="light"] .hex-card:hover .hex-border,
html[data-theme="light"] .hex-card.hex-hovered .hex-border {
  background: rgba(var(--hc), 0.85);
}
/* Inside the dark tile we want the original light-on-dark text — leave
   .hex-name as its original rgba(255,255,255,0.85) (override nothing). */
html[data-theme="light"] .hex-name { color: rgba(255,255,255,0.92); }
html[data-theme="light"] .hex-cat,
html[data-theme="light"] .hex-pts,
html[data-theme="light"] .hex-solved,
html[data-theme="light"] .hex-solvers {
  color: rgba(var(--hc), 1); /* full category color, no rgba dimming */
}
html[data-theme="light"] .hex-tag {
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}
/* Diff pips reset to be visible inside the dark hex */
html[data-theme="light"] .hex-dot {
  background: rgba(255,255,255,0.15);
}
html[data-theme="light"] .hex-dot.on {
  background: rgba(var(--hc), 0.95);
}

/* Hex tooltip on hover (challenge title popout) */
html[data-theme="light"] .hex-tooltip {
  background: var(--bg-elevated);
  color: var(--text);
  border-color: var(--border);
}


/* -------------------------------------------------------------
 * 11. HackMachina challenge PLAY page — empty arena state
 *
 * Before the first prompt is sent, the chat surface shows a big
 * "<challenge title>" + objective + input box. All of these
 * inherit the rgba(255,255,255,X) tokens of dark mode and
 * disappear on light bg.
 * ------------------------------------------------------------- */

html[data-theme="light"] .arena-empty,
html[data-theme="light"] .arena-hero,
html[data-theme="light"] .arena-title {
  color: var(--text);
}

html[data-theme="light"] .arena-title {
  /* Big challenge name — make sure it doesn't blend */
  color: var(--text);
  text-shadow: none;
}

html[data-theme="light"] .arena-objective,
html[data-theme="light"] .arena-hint,
html[data-theme="light"] .arena-model-label,
html[data-theme="light"] .arena-model-random-hint {
  color: var(--text-secondary);
}

html[data-theme="light"] .arena-model-select,
html[data-theme="light"] .arena-input-wrap .input-field,
html[data-theme="light"] .input-field {
  background-color: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
}

html[data-theme="light"] .arena-input-wrap .input-row,
html[data-theme="light"] .input-row,
html[data-theme="light"] .input-zone {
  background-color: var(--bg-elevated);
  border-color: var(--border);
}

html[data-theme="light"] .arena-input-wrap .input-row:focus-within,
html[data-theme="light"] .input-row:focus-within {
  border-color: var(--border-hover);
}

html[data-theme="light"] .send-btn {
  background-color: var(--bg-card);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="light"] .send-btn:hover { background-color: var(--bg-elevated); }

/* Turn-limit / model-row text */
html[data-theme="light"] .arena-limit-bar,
html[data-theme="light"] .arena-limit-text,
html[data-theme="light"] .arena-model-row {
  color: var(--text-secondary);
}


/* -------------------------------------------------------------
 * 12. HackmachinaSidebar — challenge briefing (left panel on play page)
 *
 * Holds the challenge name, description, difficulty pips, XP, solved
 * count, defense badges. Almost every text token is rgba white.
 * ------------------------------------------------------------- */

html[data-theme="light"] .hms-title,
html[data-theme="light"] .hms-desc,
html[data-theme="light"] .hms-meta-val,
html[data-theme="light"] .hms-def-item,
html[data-theme="light"] .hms-back {
  color: var(--text);
}

html[data-theme="light"] .hms-desc {
  color: var(--text-secondary);
}

html[data-theme="light"] .hms-meta-label,
html[data-theme="light"] .hms-def-led + span {
  color: var(--text-muted);
}

/* Defense badges: keep accent color when they have one, otherwise
   fall back to readable dark text. */
html[data-theme="light"] .hms-def-item:not([style*="color"]) {
  color: var(--text);
}


/* -------------------------------------------------------------
 * 13. Top live ticker (CrackMouZz +0 · davai validated · …)
 *
 * The MonitoringBar items use rgba(255,255,255,X) on a transparent
 * bg. They become invisible in light mode. Force dark text on the
 * shared event-feed classes.
 * ------------------------------------------------------------- */

html[data-theme="light"] .event-ticker-content,
html[data-theme="light"] .event-ticker-content .bar-purple,
html[data-theme="light"] .event-ticker-content .bar-yellow,
html[data-theme="light"] .event-ticker-content .bar-accent,
html[data-theme="light"] .event-ticker-content .bar-success,
html[data-theme="light"] .event-ticker-content .bar-error,
html[data-theme="light"] .event-ticker-content .bar-muted,
html[data-theme="light"] .event-ticker-content .bar-separator {
  color: var(--text);
}
html[data-theme="light"] .event-ticker-content .bar-muted,
html[data-theme="light"] .event-ticker-content .bar-separator {
  color: var(--text-muted);
}


/* -------------------------------------------------------------
 * 14. Buttons — primary / danger contrast in light mode
 *
 * `design-system.css` defines:
 *   .btn-primary       { background: var(--accent-light); color: var(--bg); }
 *   .btn-primary:hover { background: var(--accent);       color: var(--text); }
 *
 * That works in dark mode (light text on dark bg, etc.), but in the
 * pastel light palette both --accent-light (#6f93c6) and --bg (#f6f4fb)
 * sit in the upper half of the luminance scale → primary buttons end
 * up near-invisible (~1.5:1 contrast). Fix by using the darker --accent
 * shade with pure white text in light mode (≈6:1, AA on AAA-adjacent).
 *
 * `.btn-danger` hardcodes rgba(255,107,107,X) for border + hover bg,
 * which is the dark-mode --error tint. In the pastel palette --error
 * is #c97a7a, so we re-tint the danger button accordingly.
 * ------------------------------------------------------------- */

html[data-theme="light"] .btn-primary {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}
html[data-theme="light"] .btn-primary:hover {
  /* Darken accent by mixing with black — keeps brand hue, ups contrast */
  background: color-mix(in srgb, var(--accent) 82%, black);
  border-color: color-mix(in srgb, var(--accent) 82%, black);
  color: #ffffff;
}

html[data-theme="light"] .btn-secondary {
  color: var(--accent);
  border-color: var(--border-hover);
}
html[data-theme="light"] .btn-secondary:hover {
  background: var(--bg-card);
  border-color: var(--accent);
  color: var(--accent);
}

/* Danger button: use the pastel --error token instead of the dark-mode
   red tint hardcoded in design-system.css. */
html[data-theme="light"] .btn-danger {
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 35%, transparent);
}
html[data-theme="light"] .btn-danger:hover {
  background: color-mix(in srgb, var(--error) 12%, transparent);
  border-color: var(--error);
  color: var(--error);
}

/* Generic <button> (style.css :297) inherits transparent bg + accent
   text — fine semantically, but in light mode the accent-light it
   defaults to is too pale for legibility. Pin to --accent. */
html[data-theme="light"] button:not([class*="btn-"]):not([class*="bar-nav-"]):not([class*="generic-preview-btn"]):not([class*="cfg-"]):not([class*="q-btn"]):not([class*="rcm-"]):not([class*="aim-"]):not([class*="rc-"]) {
  color: var(--accent);
}


/* -------------------------------------------------------------
 * 15. Headings + links — bump contrast in light mode
 *
 * `design-system.css` + `x0ne-theme.css` color both <h1> and <a>
 * with var(--accent-light). In dark mode that maps to #4a90d9
 * (bright blue, ~7:1 contrast). In the pastel light palette it
 * maps to #6f93c6 (~3.17:1 → only passes WCAG AA Large, fails
 * AA Normal). Pin them to --accent (#4d6ea3, ~5.8:1) for clean
 * legibility in body text.
 * ------------------------------------------------------------- */

html[data-theme="light"] h1 {
  color: var(--accent);
}

/* Exclude `.username-cell` — it carries semantic colour information
   (role tint or quiz completion level) and must NOT be pinned to the
   default link accent. Same goes for any future `<a>` that wants to
   own its colour. */
html[data-theme="light"] a:not(.username-cell),
html[data-theme="light"] a:visited:not(.username-cell) {
  color: var(--accent);
}

html[data-theme="light"] a:not(.username-cell):hover {
  color: color-mix(in srgb, var(--accent) 75%, black);
}


/* -------------------------------------------------------------
 * 16. Status colors — pastel-aligned in light mode
 *
 * `x0ne-theme.css` declares pastel --success/--warning/--error tokens
 * in the [data-theme="light"] block. But many components reference
 * the dark-mode hex literals directly (e.g. `color: #4ad990;` for
 * "online" indicators). Those don't flip. We catch the most common
 * status hex literals here and replace with the pastel tokens.
 *
 * Only target elements where the dark hex is used as a STATUS
 * indicator (success/warning/error semantics), not where the color
 * is part of brand identity.
 * ------------------------------------------------------------- */

/* Common "online" / "ok" / "ready" badges — bump to pastel success */
html[data-theme="light"] .status-online,
html[data-theme="light"] .badge-success,
html[data-theme="light"] .stat-mini-value.online,
html[data-theme="light"] .pipeline-done .pipeline-step-icon,
html[data-theme="light"] [data-status="online"],
html[data-theme="light"] [data-status="ok"] {
  color: var(--success);
}

/* Warning */
html[data-theme="light"] .status-warning,
html[data-theme="light"] .badge-warning,
html[data-theme="light"] .stat-mini-value.pending,
html[data-theme="light"] [data-status="warning"],
html[data-theme="light"] [data-status="pending"] {
  color: var(--warning);
}

/* Error */
html[data-theme="light"] .status-error,
html[data-theme="light"] .badge-error,
html[data-theme="light"] .stat-mini-value.error,
html[data-theme="light"] [data-status="error"],
html[data-theme="light"] [data-status="failed"] {
  color: var(--error);
}


/* -------------------------------------------------------------
 * 17. Dashboard — large dark wash panels around SkillMap
 *
 * `dashboard/+page.svelte` declares `.trainings-section` with
 *   background: rgba(2, 3, 5, 0.25);
 *   border: 1px solid rgba(255, 255, 255, 0.04);
 * which is a heavy near-black wash. On the pastel bg it becomes
 * a flat dark panel that swallows the SkillMap hex grid and makes
 * the labels (uncategorized / cyber x ai) read white-on-dark.
 *
 * Override with the subtle violet card tint so the inner content
 * (SkillMap, trainings list) sits on a light pastel "surface" but
 * still feels distinct from the page bg.
 * ------------------------------------------------------------- */

html[data-theme="light"] .trainings-section {
  background: var(--bg-card);
  border-color: var(--border);
}

/* The section's toggle text + arrow inherit "white" patterns when
   in dark mode. Make them readable on the pastel surface. */
html[data-theme="light"] .trainings-toggle .toggle-text,
html[data-theme="light"] .trainings-toggle .toggle-arrow {
  color: var(--text);
}
html[data-theme="light"] .trainings-toggle .toggle-line {
  background: var(--border);
}

/* SkillMap track section headings ("uncategorized", "cyber x ai")
   are rendered inside .trainings-section so they were "light on dark".
   Make them readable on light pastel. */
html[data-theme="light"] .track-heading {
  color: var(--text);
}
html[data-theme="light"] .track-count {
  color: var(--text-muted);
}

/* SkillMap empty/loading states */
html[data-theme="light"] .sm-loading,
html[data-theme="light"] .sm-empty,
html[data-theme="light"] .sm-header,
html[data-theme="light"] .sm-summary {
  color: var(--text);
}
html[data-theme="light"] .legend-chip {
  color: var(--text-secondary);
}


/* -------------------------------------------------------------
 * 18. Admin tables — header band + cells
 *
 * Many admin tables (users, classes, modules) draw a dark header
 * band with hardcoded `rgba(0, 0, 0, X)` or near-black colors that
 * stay dark in light mode → strong contrast clash with the pastel
 * page bg. Force the header band to use `--bg-elevated` so it
 * remains visually distinct as an elevated "header surface" but
 * matches the theme.
 * ------------------------------------------------------------- */

html[data-theme="light"] table thead,
html[data-theme="light"] .admin-table-header,
html[data-theme="light"] .users-table-header,
html[data-theme="light"] .data-table thead tr,
html[data-theme="light"] tr.table-header {
  background: var(--bg-elevated);
  color: var(--text);
}

html[data-theme="light"] table thead th,
html[data-theme="light"] .admin-table-header th,
html[data-theme="light"] .users-table-header th,
html[data-theme="light"] .data-table thead th {
  color: var(--text-secondary);
  border-color: var(--border);
}

html[data-theme="light"] table tbody tr,
html[data-theme="light"] table tbody td {
  color: var(--text);
  border-color: var(--border);
}

/* Row striping — subtle violet alternation on light bg */
html[data-theme="light"] table tbody tr:nth-child(even) {
  background: rgba(94, 110, 175, 0.035);
}
html[data-theme="light"] table tbody tr:hover {
  background: var(--bg-card);
}


/* -------------------------------------------------------------
 * 19. OperatorChat widget (.x0w) — pastel-ify in light mode
 *
 * The widget hardcodes `rgba(7, 8, 12, 0.98)` as bg to look like a
 * terminal console. In dark mode this is intentional. In the pastel
 * light palette it lands as a heavy black box clashing with the soft
 * surroundings. Flip to a tinted elevated surface, preserve a hint
 * of the original accent (success-green status dot stays as-is).
 * ------------------------------------------------------------- */

html[data-theme="light"] .x0w-box {
  background: var(--bg-elevated);
  border-color: var(--border);
  box-shadow:
    0 8px 28px rgba(58, 70, 110, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

html[data-theme="light"] .x0w-header {
  background: var(--bg-card);
  border-bottom-color: var(--border);
}
html[data-theme="light"] .x0w-header:hover {
  background: var(--bg-card-hover);
}

html[data-theme="light"] .x0w-title {
  color: var(--text-muted);
}
html[data-theme="light"] .x0w-header:hover .x0w-title {
  color: var(--accent);
}

html[data-theme="light"] .x0w-hbtn:hover {
  color: var(--text);
  background: var(--bg-card);
}

/* Message rows inside operator widget */
html[data-theme="light"] .x0w-msgs {
  background: transparent;
}


/* -------------------------------------------------------------
 * 20. HackMachina tool-call traces (agent function-call boxes)
 *
 * `.tool-call` rows use rgba(255,255,255,0.015) bg + lime-green
 * `rgba(170,252,46,X)` for function names. In light mode the bg
 * is invisible (white-ish on cream ≈ no contrast) and the lime
 * green washes out to a pale yellow. Keep the lime brand vibe
 * but bump alpha/saturation enough to read, AND give the row a
 * subtle elevated surface so its boundaries are visible.
 * ------------------------------------------------------------- */

html[data-theme="light"] .tool-trace-hdr {
  color: var(--text-muted);
}
html[data-theme="light"] .tool-trace-label {
  /* Lime stays as brand color — slightly darker for readability */
  color: #5a8a1c;
}
html[data-theme="light"] .tool-trace-count {
  background: var(--bg-card);
  color: var(--text-muted);
}

html[data-theme="light"] .tool-call {
  background: var(--bg-card);
  border-left-color: rgba(90, 138, 28, 0.35);
}
html[data-theme="light"] .tool-call.ts-pending {
  border-left-color: var(--border);
}
html[data-theme="light"] .tool-call.ts-done {
  border-left-color: rgba(90, 158, 60, 0.55);
}

html[data-theme="light"] .tc-status-icon {
  color: var(--text-muted);
}
html[data-theme="light"] .ts-done .tc-status-icon {
  color: var(--success);
}

/* Function name — lime brand color, readable shade for light bg */
html[data-theme="light"] .tc-name {
  color: #4a7a18;
  font-weight: 600;
}

html[data-theme="light"] .tc-args-line {
  color: var(--text-muted);
}

html[data-theme="light"] .tc-section-lbl {
  color: var(--text-muted);
}

/* Pre/code outputs inside tool-call body keep dark surface (consistent
   with our terminal/code preservation policy in section 5). */
html[data-theme="light"] .tc-pre {
  background: var(--bg-elevated);
  color: var(--text);
  border-color: var(--border);
}


/* -------------------------------------------------------------
 * 21. Crackme-contest page — stat bar, filter chips, search box,
 *     data table
 *
 * The page CSS predates the design-token pass and hardcodes:
 *   - `rgba(0, 10, 20, 0.3)` (near-black stat bar bg)
 *   - `rgba(128, 191, 255, 0.x)` (sky-blue borders/tints for filters,
 *     search input, table header rules, row hover)
 *   - `#fff` / `#e0e0e0` (forced light text inside inputs and hover)
 *
 * On cream bg these produce a dark slug for the stat bar, an
 * invisible search field (white text on white), faint blue ghost
 * borders, and unreadable hover states. We re-bind every affected
 * selector to the theme tokens. The same selectors keep working
 * unchanged in dark mode because we only override under
 * [data-theme="light"].
 *
 * Pattern is reusable: future pages should compose .x0ne-stat-bar /
 * .x0ne-chip / .x0ne-search / .x0ne-table (defined in x0ne-theme.css)
 * instead of redeclaring these visuals. This section catches the
 * existing page until it's refactored to those utilities.
 * ------------------------------------------------------------- */

/* Stat bar — soft surface, no near-black wash */
html[data-theme="light"] .crackme-stats-bar {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* Filter pills */
html[data-theme="light"] .filter-btn {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
html[data-theme="light"] .filter-btn:hover,
html[data-theme="light"] .filter-btn.active,
html[data-theme="light"] .filter-btn:global(.active) {
  background: var(--bg-card-hover) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
html[data-theme="light"] .filter-btn.clear-btn {
  border-color: color-mix(in srgb, var(--error) 35%, transparent) !important;
  color: var(--error) !important;
}
html[data-theme="light"] .filter-btn.clear-btn:hover {
  border-color: var(--error) !important;
  background: color-mix(in srgb, var(--error) 8%, transparent) !important;
}

/* Search box — was white-on-white in day mode */
html[data-theme="light"] .search-input,
html[data-theme="light"] .crackme-search {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .search-input:focus,
html[data-theme="light"] .crackme-search:focus {
  border-color: var(--accent-light) !important;
}
html[data-theme="light"] .search-input::placeholder,
html[data-theme="light"] .crackme-search::placeholder {
  color: var(--text-muted) !important;
}

/* Contest table — header rule, row hover, cell separators.
   The thead's background is being pulled dark from somewhere
   (likely a `<tr>` style that beats the generic `table thead`
   override). Force the header band to bg-card-hover (the same
   tone used for admin-table thead) so all "tables of data" read
   with consistent elevation in day mode. */
html[data-theme="light"] .contest-table thead,
html[data-theme="light"] .crackme-table thead,
html[data-theme="light"] .cracks-table thead,
html[data-theme="light"] .cracks-table.modern-table thead {
  background: var(--bg-card-hover) !important;
}
html[data-theme="light"] .contest-table thead tr,
html[data-theme="light"] .crackme-table thead tr,
html[data-theme="light"] .cracks-table thead tr,
html[data-theme="light"] .cracks-table.modern-table thead tr {
  background: var(--bg-card-hover) !important;
}
html[data-theme="light"] .contest-table th,
html[data-theme="light"] .crackme-table thead th,
html[data-theme="light"] .cracks-table thead th,
html[data-theme="light"] .cracks-table.modern-table thead th {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border-bottom: 1px solid var(--border-card) !important;
}
html[data-theme="light"] .contest-table td {
  border-bottom-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .contest-table tbody tr:hover,
html[data-theme="light"] .crackme-table tbody tr:hover,
html[data-theme="light"] .cracks-table tbody tr:hover,
html[data-theme="light"] .cracks-table.modern-table tbody tr:hover {
  background: var(--bg-card) !important;
}
html[data-theme="light"] .sortable-th:hover {
  color: var(--text) !important;
}

/* Team link hover used to force #fff (vanishes on cream) */
html[data-theme="light"] .team-link:hover {
  color: var(--accent) !important;
  text-shadow: none !important;
}

/* Crackme row hover tooltip — was a 45 % near-black glass. On cream
   that's a smoky popover. Make it a "frosted glass" feel: lightly
   tinted, strong backdrop-blur for legibility, soft lavender border
   and shadow. Same recipe applied to dashboard / game tooltips below
   for consistency. */
html[data-theme="light"] .cm-tooltip {
  background: rgba(246, 244, 251, 0.55) !important;
  backdrop-filter: blur(22px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.6) !important;
  border: 1px solid rgba(94, 110, 175, 0.22) !important;
  box-shadow: 0 10px 30px rgba(58, 70, 110, 0.10), 0 1px 3px rgba(58, 70, 110, 0.06) !important;
}


/* -------------------------------------------------------------
 * 22. Admin pages — stat badges, header chrome, dense data tables
 *
 * The admin namespace (.admin-*, .g-table) pre-dates the token
 * pass and bakes in two recurring patterns:
 *
 *   a) `rgba(255, 255, 255, 0.03–0.10)` for "subtle white wash"
 *      surfaces (stat-badge, admin-search, admin-toggle:hover,
 *      admin-toggle-dot.off). On cream these are 100 % invisible —
 *      no fill, no border, the chrome melts into the bg and the
 *      user can no longer see where the legend / search / toggles
 *      live.
 *
 *   b) `rgba(0, 0, 0, 0.55–0.98)` for dense-table sticky headers
 *      and pinned columns (.g-table th, .g-th-sticky, .g-avg-col,
 *      .g-td-sticky and the gradient mod-th-* variants). On cream
 *      this becomes a heavy near-black slab — the "entête trop
 *      lourd en bleu foncé" the user keeps pointing at.
 *
 * Fix: re-bind both patterns to the design tokens (--bg-card /
 * --bg-elevated / --border) so the chrome reads as gentle surface
 * elevation on cream and stays as the original wash on dark. No
 * page-level changes required.
 * ------------------------------------------------------------- */

/* (a) Subtle-white-wash chrome → visible on cream */
html[data-theme="light"] .stat-badge {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="light"] .admin-search {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .admin-search:focus {
  border-color: var(--accent-light) !important;
  background: var(--bg-card-hover) !important;
}
html[data-theme="light"] .admin-toggle:hover {
  background: var(--bg-card) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .admin-toggle-dot.off {
  background: var(--border-hover) !important;
}

/* (b) Dense data-table sticky/header chrome — the dark slab.
 *
 *  `.g-table` (admin grades grid) and its variants for the users
 *  page set their own th/td backgrounds, which beats the generic
 *  `table thead` override from section 18. Re-flip explicitly. */
html[data-theme="light"] .g-table th,
html[data-theme="light"] .g-table th.g-th-sticky,
html[data-theme="light"] .g-table th.g-avg-col {
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="light"] .g-table th.g-mod-th-quiz,
html[data-theme="light"] .g-table th.g-mod-th-act,
html[data-theme="light"] .g-table th.g-mod-th-git,
html[data-theme="light"] .g-table th.g-mod-th-cm {
  background: var(--bg-elevated) !important;
}
html[data-theme="light"] .g-table th .g-mod-th-name {
  color: var(--text) !important;
}
html[data-theme="light"] .g-table th .g-mod-th-sub {
  color: var(--text-muted) !important;
}
html[data-theme="light"] .g-table td {
  color: var(--text) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="light"] .g-table td.g-td-sticky {
  background: var(--bg-elevated) !important;
}
html[data-theme="light"] .g-table th.g-sortable:hover {
  color: var(--text) !important;
}

/* (c) Profile-completion legend — was set to a dark wash + hardcoded
 *  greys (#444 border, #aaa text, #999 label). On cream the whole
 *  legend strip turns into a murky band where you can read neither
 *  the colour swatches' outlines nor the labels next to them.
 *  Re-bind to tokens. */
html[data-theme="light"] .completion-legend {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="light"] .legend-color {
  border-color: var(--border-hover) !important;
}
html[data-theme="light"] .legend-text {
  color: var(--text-secondary) !important;
}

/* Row-completion left-border tints: the dark-mode rgba(*, 0.9) reads
   fine on near-black but pales out on cream/pearl. Pin to fully
   saturated colours in light mode so a yellow row is unambiguously
   yellow vs blue/green at a glance. The legend swatches use the same
   tints to stay in sync. */
html[data-theme="light"] .user-row.completion-0  { border-left-color: #ef4444 !important; }
html[data-theme="light"] .user-row.completion-1  { border-left-color: #9333ea !important; }
html[data-theme="light"] .user-row.completion-2  { border-left-color: #eab308 !important; }
html[data-theme="light"] .user-row.completion-3  { border-left-color: #4a90d9 !important; }
html[data-theme="light"] .user-row.completion-4  { border-left-color: #16a34a !important; }
html[data-theme="light"] .legend-color.completion-0 { background: #ef4444 !important; border-color: #ef4444 !important; }
html[data-theme="light"] .legend-color.completion-1 { background: #9333ea !important; border-color: #9333ea !important; }
html[data-theme="light"] .legend-color.completion-2 { background: #eab308 !important; border-color: #eab308 !important; }
html[data-theme="light"] .legend-color.completion-3 { background: #4a90d9 !important; border-color: #4a90d9 !important; }
html[data-theme="light"] .legend-color.completion-4 { background: #16a34a !important; border-color: #16a34a !important; }

/* (d) `.admin-table` header — section 18 sets the thead bg to
 *  --bg-elevated (#ede9f4). On the lavender-cream page bg the
 *  contrast still lands as a visible "band", which the user reads
 *  as too heavy. Drop the band to --bg-card (a 6 % tint of the
 *  accent) so the header reads as gentle elevation, not a slab. */
html[data-theme="light"] .admin-table thead,
html[data-theme="light"] .modern-table thead,
html[data-theme="light"] #usersTable thead {
  background: var(--bg-card) !important;
}
html[data-theme="light"] .admin-table thead th,
html[data-theme="light"] .modern-table thead th,
html[data-theme="light"] #usersTable thead th {
  color: var(--text-secondary) !important;
  border-bottom-color: var(--border) !important;
}

/* Sticky student column — uses --x0ne-bg-secondary (=bg-elevated)
 * which inherits the slab feel. Soften to bg-card so the sticky
 * spine reads as the same elevation tier as the table header. */
html[data-theme="light"] .sticky-student-header,
html[data-theme="light"] .sticky-student-cell {
  background: var(--bg-card) !important;
  border-bottom-color: var(--border) !important;
}

/* (e) Admin table — deep cleanup
 *
 * The previous pass tried to recolour the thead band; the user
 * reports it still reads as a heavy slab on cream. Root cause: any
 * filled bg on thead creates a visible band against the lighter
 * page bg, no matter how subtle. The classy day-mode read is no
 * band at all — just a defined 1 px rule + uppercased subdued
 * labels. Sticky col gets the same transparent treatment.
 *
 * Also adds a tight row-stripe + hover so the dense data table
 * has scannable rhythm without needing surface tint per row. */
html[data-theme="light"] .admin-table,
html[data-theme="light"] .modern-table,
html[data-theme="light"] #usersTable {
  background: transparent !important;
}
html[data-theme="light"] .admin-table thead,
html[data-theme="light"] .modern-table thead,
html[data-theme="light"] #usersTable thead {
  background: var(--bg-card-hover) !important;
}
html[data-theme="light"] .admin-table thead th,
html[data-theme="light"] .modern-table thead th,
html[data-theme="light"] #usersTable thead th {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border-bottom: 1px solid var(--border-card) !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}
html[data-theme="light"] .admin-table tbody tr:nth-child(even),
html[data-theme="light"] .modern-table tbody tr:nth-child(even),
html[data-theme="light"] #usersTable tbody tr:nth-child(even) {
  background: rgba(94, 110, 175, 0.035) !important;
}
html[data-theme="light"] .admin-table tbody tr:hover,
html[data-theme="light"] .modern-table tbody tr:hover,
html[data-theme="light"] #usersTable tbody tr:hover {
  background: var(--bg-card-hover) !important;
}
html[data-theme="light"] .admin-table tbody td,
html[data-theme="light"] .modern-table tbody td,
html[data-theme="light"] #usersTable tbody td {
  border-bottom-color: var(--border) !important;
}

/* Sticky student column: transparent so the stripe shows through
   continuously. Bottom border still tokenized. */
html[data-theme="light"] .sticky-student-header {
  background: transparent !important;
}
html[data-theme="light"] tbody tr:nth-child(even) .sticky-student-cell {
  background: rgba(94, 110, 175, 0.035) !important;
}
html[data-theme="light"] tbody tr:nth-child(odd) .sticky-student-cell {
  background: var(--bg) !important;
}
html[data-theme="light"] tbody tr:hover .sticky-student-cell {
  background: var(--bg-card-hover) !important;
}


/* -------------------------------------------------------------
 * 23. Crackme-contest rules / preface page
 *
 * The rules tab CSS bakes in:
 *   - `var(--text-primary, #e2e4e8)` — token never defined, so the
 *     fallback `#e2e4e8` wins and section titles render as near-
 *     white on cream (invisible).
 *   - `var(--accent-color, #00ff9d)` — same trick; rule numbers,
 *     rule-strong, and rules-intro bold render in neon green at
 *     ~1.3:1 on cream (unreadable).
 *   - `rgba(128, 191, 255, 0.x)` — pale sky blue text/borders that
 *     wash out on the cream bg.
 *   - `rgba(0, 0, 0, 0.3)` for rule-number chips → dark slug.
 *
 * Re-bind to the design tokens that already resolve correctly in
 * day mode. Same logic as section 21 — applies to the existing
 * page until it's refactored to utility classes.
 * ------------------------------------------------------------- */

/* OUTER wrap below the tabs — the big box that contains preface +
   rules + every tab's content. Uses rgba(255,255,255,0.06) as border,
   which is the "white-faint" border the user sees in dark mode but
   that disappears on cream. Restore symmetry with a slate version. */
html[data-theme="light"] .tab-content {
  background: var(--bg-card) !important;
  border: 1px solid rgba(26, 28, 42, 0.22) !important;
}

html[data-theme="light"] .preface {
  background: var(--bg-card) !important;
  border: 1px solid rgba(26, 28, 42, 0.22) !important;
  box-shadow: 0 1px 0 rgba(58, 70, 110, 0.04) !important;
}
html[data-theme="light"] .preface-quote {
  color: var(--accent) !important;
}
html[data-theme="light"] .preface-text {
  color: var(--text-secondary) !important;
}
html[data-theme="light"] .preface-text strong {
  color: var(--text) !important;
}

html[data-theme="light"] .section-header {
  border-bottom-color: var(--border) !important;
}
html[data-theme="light"] .section-title {
  color: var(--text) !important;
}
html[data-theme="light"] .section-badge {
  color: var(--accent) !important;
  background: var(--bg-card) !important;
}

html[data-theme="light"] .rules-intro {
  background: var(--bg-card) !important;
  border: 1px solid rgba(26, 28, 42, 0.22) !important;
  color: var(--text-secondary) !important;
}

/* The rules list itself has no outer container — give it one in day
   mode so the steps read as a defined card rather than floating bullets. */
html[data-theme="light"] .rules-list {
  background: var(--bg-card) !important;
  border: 1px solid rgba(26, 28, 42, 0.22) !important;
  border-radius: 6px !important;
  padding: 0.5rem 1rem !important;
}

/* Live SSE indicator (top-right pill: dot + LIVE/OFF)
 * Original is a 35 %-black slug with neon green text — on cream the
 * black wash reads as a dark blob and the green washes out. Flip the
 * surface to soft accent-tinted card + darken the green to AA. */
html[data-theme="light"] .live-indicator {
  background: var(--bg-card) !important;
  border-color: var(--border-hover) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="light"] .live-indicator.live-on {
  background: color-mix(in srgb, #1f7a3f 10%, var(--bg-card)) !important;
  border-color: rgba(31, 122, 63, 0.55) !important;
  color: #1f7a3f !important;
}
html[data-theme="light"] .live-indicator.live-on .live-dot {
  background: #1f7a3f !important;
}
html[data-theme="light"] .live-indicator.live-off {
  color: var(--text-muted) !important;
}

/* Wall-of-shame and admin tabs — coloured tab labels that fade to
 * ~2:1 on cream. Darken so they're properly readable AND stay on-brand. */
html[data-theme="light"] .shame-tab {
  color: #9b3030 !important;
}
html[data-theme="light"] .shame-tab:hover {
  color: #c83030 !important;
  border-bottom-color: #c83030 !important;
}
html[data-theme="light"] .shame-tab.active {
  color: #c83030 !important;
  border-bottom-color: #c83030 !important;
}

html[data-theme="light"] .admin-tab {
  color: #b06b00 !important;
}
html[data-theme="light"] .admin-tab:hover {
  color: #cc7a00 !important;
  border-bottom-color: #cc7a00 !important;
}
html[data-theme="light"] .admin-tab.active {
  color: #cc7a00 !important;
  border-bottom-color: #cc7a00 !important;
}
html[data-theme="light"] .rules-intro strong {
  color: var(--accent) !important;
}

html[data-theme="light"] .rule-item {
  border-bottom-color: var(--border) !important;
}
html[data-theme="light"] .rule-item:hover {
  background: var(--bg-card) !important;
}
html[data-theme="light"] .rule-item.critical {
  background: color-mix(in srgb, var(--warning) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--warning) 25%, transparent) !important;
}

html[data-theme="light"] .rule-number {
  background: var(--bg-card-hover) !important;
  border-color: var(--border-card) !important;
  color: var(--accent) !important;
}
html[data-theme="light"] .rule-content {
  color: var(--text-secondary) !important;
}
html[data-theme="light"] .rule-content strong {
  color: var(--accent) !important;
}


/* -------------------------------------------------------------
 * 24. Generic "ghost token" fallbacks
 *
 * Several pages reference design tokens that don't exist in the
 * theme (`--text-primary`, `--accent-color`, `--primary-color`,
 * `--text-color`). The CSS fallback then wins, and is always a
 * dark-mode literal (`#e2e4e8`, `#00ff9d`, `#4a90d9`, `#d4d4d8`).
 *
 * Define them at :root level under [data-theme="light"] so any
 * `var(--undefined, dark-literal)` resolves to a day-mode-safe
 * value instead. Cheap, broad, no per-page change needed.
 * ------------------------------------------------------------- */

html[data-theme="light"] {
  /* --text-color and --primary-color are already mapped in
     variables.css; we re-state them here only because some pages
     declare `var(--token, dark-literal)` and we want the literal
     dark fallback to NEVER apply in light mode. */
  --text-primary:  var(--text);
  --text-color:    var(--text);
  /* --primary-color in variables.css maps to --accent-light, which
     is reserved for hover/glow only ("NOT used for text"). When
     pages use it as text colour they get a 3:1 pastel on cream.
     Re-bind to --accent so primary-color reads as AA text. */
  --primary-color: var(--accent);
}


/* -------------------------------------------------------------
 * 25. "Soft surface" containers — rgba(2, 3, 5, 0.25–0.3) pattern
 *
 * A near-black wash is used across the codebase as the "soft
 * section box" elevation tier — profile sections, stat strips,
 * project view boxes, game shell sections, admin module rows,
 * hackmachina firewall box, dashboard tracks/feed sections, etc.
 *
 * The intent in dark mode is "barely-darker tier below page bg";
 * the literal in light mode is a heavy grey slug because cream
 * minus 25 % black ≈ medium grey.
 *
 * One central override flips the pattern to a soft lavender wash
 * (--bg-card, 6 % accent on cream) so EVERY container using the
 * pattern reads as gentle elevation in day mode, without touching
 * the per-page CSS. New components that adopt the pattern inherit
 * the fix for free.
 *
 * Borders these boxes pair with are typically
 * `rgba(var(--ink-rgb), 0.04)` — already theme-aware (resolves to
 * 4 % dark-slate in light), but a touch too faint on cream. We
 * bump to --border for a visible-but-quiet edge.
 * ------------------------------------------------------------- */

html[data-theme="light"] .section-box,        /* profile          */
html[data-theme="light"] .stats-strip,        /* profile          */
html[data-theme="light"] .pv-strip,           /* project view     */
html[data-theme="light"] .s-box,              /* project view     */
html[data-theme="light"] .progress-section,   /* game shell       */
html[data-theme="light"] .firewall-box,       /* hackmachina      */
html[data-theme="light"] .q-row,              /* admin/modules    */
html[data-theme="light"] .cfg-section,        /* admin/modules    */
html[data-theme="light"] .trainings-section { /* dashboard        */
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* Score & evolution chart boxes — kept fully transparent in both
   themes so the page bg shows through uniformly. Previously the
   light override painted a solid white card while neighbouring
   `.evo-chart-box` panels stayed translucent → visible mismatch
   on the crackme-contest dashboard. The single source of truth
   for the chart-box look now lives next to the component (`+page.svelte`). */
html[data-theme="light"] .score-chart-box,
html[data-theme="light"] .evo-chart-box {
  background: transparent !important;
  box-shadow: none !important;
}

/* Auth pages — base CSS uses var(--text) for button text (AAA in both
 * themes), but the generic-button rule above (`html[data-theme="light"]
 * button:not(…)`) re-paints it with var(--accent) by higher specificity,
 * yielding a blue-on-blue submit ("login" word invisible over the
 * sapphire-tinted login-box wash).
 *
 * Re-pin to --text with matching specificity so the base wins. The
 * border stays var(--accent) for visual structure. */
html[data-theme="light"] .login-box button[type="submit"],
html[data-theme="light"] .login-box button:not(.auth-tab):not(.google-btn) {
  color: var(--text) !important;
  border-color: var(--accent) !important;
}
html[data-theme="light"] .login-box button[type="submit"]:hover,
html[data-theme="light"] .login-box button:not(.auth-tab):not(.google-btn):hover {
  background: rgba(61, 94, 147, 0.08) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
html[data-theme="light"] .login-box .google-btn {
  color: var(--text) !important;
}
html[data-theme="light"] .login-box .google-btn-container:hover .google-btn {
  color: var(--accent) !important;
}