/* =================================================================
 * Light theme — extension layer
 * =================================================================
 *
 * Status & architecture
 * ---------------------
 * This file is the LIGHT-MODE THEME EXTENSION, not a patch layer.
 * Light mode genuinely needs different visual choices for some
 * surfaces (button contrast, table chrome, badge tinting, brand
 * tile inversion). Those choices live here, scoped behind
 * `html[data-theme="light"]`.
 *
 * Most of the dark-mode literals that used to need overrides have
 * been migrated to theme-aware tokens at the source:
 *   - `rgba(255,255,255,A)`  → `rgba(var(--ink-rgb), A)`
 *   - `rgba(0,0,0,A)`        → `rgba(var(--ink-rgb), A*0.2)`
 *   - `rgba(170,252,46,A)`   → `rgba(var(--hm-accent-rgb), A)`
 *   - `var(--text-primary)`  → `var(--text)`
 *   - `var(--accent-color)`  → `var(--hm-accent)`
 *
 * That migration is enforced by `apps/web-ui/src/lib/theme-tokens.test.ts`
 * (re-run on CI). New code MUST use tokens; this file MUST shrink
 * over time, never grow with new "patch a dark hardcode" entries.
 *
 * Cascade strategy
 * ----------------
 *   1. Selectors stay scoped under `html[data-theme="light"]`.
 *   2. `!important` is used ONLY where a Svelte-scoped CSS hash
 *      would otherwise win specificity (unavoidable in some cases).
 *   3. Terminal / code blocks are EXPLICITLY locked dark in both
 *      modes — semantic "code surface" identity, not a leak.
 *
 * Token reference (light theme — full list in x0ne-theme.css):
 *   --bg #f6f4fb · --bg-elevated #ede9f4 · --bg-card 6% accent
 *   --text #1a1c2a · --text-secondary #3a3f5c · --text-muted #5d6178
 *   --border 16% accent · --accent #3d5e93 · --hm-accent #356f10
 *   --ink-rgb 26,28,42  (dark ink for translucent washes)
 * ================================================================= */


/* -------------------------------------------------------------
 * 1. Form controls (UA stylesheet override)
 * Browsers force white bg / dark text on <input>/<textarea>/<select>
 * regardless of our styling. Explicit re-binding keeps consistency.
 * ------------------------------------------------------------- */

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(--placeholder);
  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, 1);
}


/* -------------------------------------------------------------
 * 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. 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;
}




/* -------------------------------------------------------------
 * 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 p,
html[data-theme="light"] .chat-thread .md-content li,
html[data-theme="light"] .chat-thread .md-content strong,
html[data-theme="light"] .chat-thread .md-content 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 code,
html[data-theme="light"] .chat-thread .md-content 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 in light mode — lumineux, category-tinted, brand-coherent.
   The face is a near-white surface gently washed with the category
   color so the hex reads as a "lit" tile on the cream page bg. The
   saturated border keeps each category visually distinct without the
   dark-terminal contrast trick. */
html[data-theme="light"] .hex-face {
  background: color-mix(in srgb, #ffffff 92%, rgb(var(--hc)));
}
html[data-theme="light"] .hex-card:hover .hex-face,
html[data-theme="light"] .hex-card.hex-hovered .hex-face {
  background: color-mix(in srgb, #ffffff 82%, rgb(var(--hc)));
}
html[data-theme="light"] .hex-border {
  background: rgba(var(--hc), 0.45);
  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.75);
}
/* Dark text on light tile — readable, theme-coherent. */
html[data-theme="light"] .hex-name { color: var(--text); }
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);
}
html[data-theme="light"] .hex-tag {
  color: var(--text);
  background: rgba(var(--ink-rgb), 0.04);
  border-color: rgba(var(--ink-rgb), 1);
}
html[data-theme="light"] .hex-dot {
  background: rgba(var(--ink-rgb), 0.10);
}
html[data-theme="light"] .hex-dot.on {
  background: rgba(var(--hc), 0.85);
}

/* 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-"]):not(.af-tab) {
  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, 1);
}
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, 1);
}

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.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(--placeholder) !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, 1) !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. Compat token: --primary-color
 *
 * `variables.css` maps `--primary-color → --accent-light`, but
 * --accent-light in light mode is #6f93c6 (~3:1) which fails AA
 * as text colour. ~155 selectors use --primary-color as text/border.
 * Re-bind to --accent (#3d5e93, ~5.8:1 — AA on cream).
 * ------------------------------------------------------------- */

html[data-theme="light"] {
  --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(.af-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(.af-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;
}

/* ---------------------------------------------------------------------------
 * 26. /admin/users — team & class badges (row + expand)
 *
 *    Dark-theme defaults use very low alphas (0.10 bg, 0.85 text) which
 *    look ghostly on light backgrounds. Bump saturation + darken the
 *    text so the badges actually read at a glance.
 * ------------------------------------------------------------------------- */
html[data-theme="light"] .badge-team,
html[data-theme="light"] .expand-badge.team {
  background: rgba(34, 139, 78, 0.14) !important;
  color: rgba(22, 101, 52, 1) !important;
  border-color: rgba(34, 139, 78, 1) !important;
}
html[data-theme="light"] .expand-badge.team small {
  color: rgba(22, 101, 52, 1) !important;
  opacity: 0.85;
}
html[data-theme="light"] .badge-team-link:hover,
html[data-theme="light"] .expand-badge-link:hover {
  background: rgba(34, 139, 78, 0.22) !important;
  filter: none !important;
}
/* class-pill mirrors the team look but in cyan-teal so the two are
   visually distinct in the expand panel. */
html[data-theme="light"] .expand-badge.class-pill {
  background: rgba(14, 116, 110, 0.12) !important;
  color: rgba(14, 90, 90, 1) !important;
  border: 1px solid rgba(14, 116, 110, 0.30) !important;
}