/* =========================================================================
   LIGHT THEME LAYER

   The app was authored dark-first: ~330 hardcoded dark hex values live in
   the component CSS and in inline style attributes. Rewriting every one of
   them into variables would risk the (well-tuned) dark theme, so instead
   this file re-skins those same surfaces for light mode only.

   Every rule is scoped to `html.theme-light`, so dark mode is byte-for-byte
   unchanged. `!important` appears only where an inline style attribute has
   to be beaten — there is no other way to reach those.

   DELIBERATELY LEFT DARK (they are focus surfaces, not bugs):
     • the running test UI (body.test-taking-mode / #test-view)
     • the video player (.quantum-video-*)
     • the smartboard drawing canvas (.self-note-pen-canvas)
   ========================================================================= */

html.theme-light {
    /* Extra tokens the dark palette never needed. */
    --lt-card: #ffffff;
    --lt-sunken: #f1f4f9;
    --lt-chip: #eef2f8;
    --lt-chip-hover: #e3e9f3;
    --lt-border: rgba(24, 32, 51, 0.12);
    --lt-border-strong: rgba(24, 32, 51, 0.2);
    --lt-shadow: 0 6px 18px rgba(24, 32, 51, 0.08);
}

/* ── Generic panels & cards ─────────────────────────────────────────────── */

html.theme-light body:not(.test-taking-mode) .rev-dashboard-card,
html.theme-light body:not(.test-taking-mode) .result-header-panel,
html.theme-light body:not(.test-taking-mode) #result-view .stat-card,
html.theme-light body:not(.test-taking-mode) .segment-card,
html.theme-light body:not(.test-taking-mode) .metric-box,
html.theme-light body:not(.test-taking-mode) .vault-card,
html.theme-light body:not(.test-taking-mode) .res-q-item,
html.theme-light body:not(.test-taking-mode) .flashcard-container,
html.theme-light body:not(.test-taking-mode) .card-face,
html.theme-light body:not(.test-taking-mode) .vd-header,
html.theme-light body:not(.test-taking-mode) .chart-container-box {
    background: var(--lt-card);
    border-color: var(--lt-border);
    color: var(--text-main);
    box-shadow: var(--lt-shadow);
}

html.theme-light body:not(.test-taking-mode) .res-q-detail,
html.theme-light body:not(.test-taking-mode) .fc-controls,
html.theme-light body:not(.test-taking-mode) .mini-progress {
    background: var(--lt-sunken);
    border-color: var(--lt-border);
}

/* #result-view carries an inline `color:#fff`, which would leave every
   unstyled string invisible on a white page. */
html.theme-light #result-view {
    color: var(--text-main) !important;
}

html.theme-light #result-view .stat-value,
html.theme-light #result-view .res-q-text,
html.theme-light .rev-dashboard-card h4,
html.theme-light .rev-dashboard-card h5,
html.theme-light .vault-body h4,
html.theme-light .metric-val {
    color: var(--text-main) !important;
}

html.theme-light #result-view .stat-label,
html.theme-light .res-kpi-sub,
html.theme-light .drill-sub,
html.theme-light .vault-body p,
html.theme-light .rev-hub-intro,
html.theme-light #full-res-date,
html.theme-light #chart-sub-period {
    color: var(--text-muted) !important;
}

/* The hero score ring sits on a teal/violet wash that only reads on black. */
html.theme-light #result-view .stat-card.hero-score-card {
    background: linear-gradient(135deg, rgba(11, 87, 208, 0.1) 0%, rgba(15, 143, 110, 0.12) 100%) !important;
    border: 2px solid var(--brand) !important;
    box-shadow: 0 8px 26px rgba(11, 87, 208, 0.16) !important;
}

html.theme-light #full-res-score,
html.theme-light #full-res-accuracy,
html.theme-light #full-res-time-taken,
html.theme-light #full-res-attempt-rate {
    color: var(--text-main) !important;
    text-shadow: none !important;
}

html.theme-light #result-view .stat-card.hero-score-card .stat-label,
html.theme-light #full-res-title {
    color: var(--brand) !important;
    text-shadow: none !important;
}

html.theme-light #lbl-res-score-status {
    color: #fff !important;
}

/* The result page's chart panels, segment shell and their inner tiles are all
   inline `background:#1e1e1e / #151515 / #141414 / #222`. Attribute selectors
   are the only handle on them without rewriting the markup. */
html.theme-light .res-chart-panel,
html.theme-light .res-segments-card-container {
    background: var(--lt-card) !important;
    border-color: var(--lt-border) !important;
    box-shadow: var(--lt-shadow) !important;
}

html.theme-light #result-view div[style*="#141414"],
html.theme-light #result-view div[style*="#151515"],
html.theme-light #result-view span[style*="rgba(255, 255, 255, 0.05)"] {
    background: var(--lt-sunken) !important;
}

html.theme-light #result-view button[style*="#222"],
html.theme-light #result-view button[style*="background: transparent"] {
    background: var(--lt-chip) !important;
    border-color: var(--lt-border) !important;
    color: var(--text-main) !important;
}

html.theme-light .res-chart-panel h4,
html.theme-light .res-segments-card-container span[style*="color: #fff"],
html.theme-light #lbl-res-pos-marks,
html.theme-light #lbl-res-neg-marks,
html.theme-light #lbl-res-total-times-text {
    color: var(--text-main) !important;
}

html.theme-light .res-segments-card-container > h3 {
    color: var(--brand) !important;
}

/* ── Buttons & chips ────────────────────────────────────────────────────── */

/* .mock-btn is inline-styled `background:#333;border:1px solid #555;color:white`.
   The AI-mentor button keeps its gradient — it is an accent, not chrome. */
html.theme-light body:not(.test-taking-mode) .mock-btn:not(.ai-mentor-btn),
html.theme-light body:not(.test-taking-mode) .sb-btn,
html.theme-light body:not(.test-taking-mode) .rf-btn,
html.theme-light body:not(.test-taking-mode) .lang-btn,
html.theme-light body:not(.test-taking-mode) .quantum-mini-icon-btn {
    background: var(--lt-chip) !important;
    border: 1px solid var(--lt-border) !important;
    color: var(--text-main) !important;
}

html.theme-light body:not(.test-taking-mode) .mock-btn:not(.ai-mentor-btn):hover,
html.theme-light body:not(.test-taking-mode) .sb-btn:hover,
html.theme-light body:not(.test-taking-mode) .rf-btn:hover {
    background: var(--lt-chip-hover) !important;
    border-color: var(--lt-border-strong) !important;
}

html.theme-light body:not(.test-taking-mode) .adv-vault-chip {
    background: var(--lt-chip);
    border-color: var(--lt-border);
    color: var(--text-main);
}

html.theme-light body:not(.test-taking-mode) .adv-vault-chip.active {
    background: var(--brand-soft);
    border-color: var(--brand);
}

html.theme-light .vault-badge {
    background: var(--lt-chip);
    border-color: var(--lt-border);
    color: var(--text-main);
}

/* ── Form controls ──────────────────────────────────────────────────────── */

html.theme-light body:not(.test-taking-mode) input,
html.theme-light body:not(.test-taking-mode) textarea,
html.theme-light body:not(.test-taking-mode) select,
html.theme-light body:not(.test-taking-mode) .premium-select,
html.theme-light body:not(.test-taking-mode) .chat-input {
    background: var(--lt-card) !important;
    border: 1px solid var(--lt-border) !important;
    color: var(--text-main) !important;
}

html.theme-light body:not(.test-taking-mode) option {
    background: var(--lt-card);
    color: var(--text-main);
}

html.theme-light body:not(.test-taking-mode) input::placeholder,
html.theme-light body:not(.test-taking-mode) textarea::placeholder {
    color: var(--text-muted) !important;
}

/* ── Overlays, modals & drawers ─────────────────────────────────────────── */

html.theme-light .modal-overlay,
html.theme-light .ct-modal-overlay,
html.theme-light .premium-auth-overlay,
html.theme-light .ai-session-modal-backdrop,
html.theme-light #grid-overlay-back {
    background: rgba(24, 32, 51, 0.34) !important;
}

html.theme-light .modal,
html.theme-light .ct-modal-box,
html.theme-light .auth-card,
html.theme-light .modal-content,
html.theme-light .mm-container,
html.theme-light .self-note-modal-content {
    background: var(--lt-card) !important;
    border-color: var(--lt-border) !important;
    color: var(--text-main) !important;
    box-shadow: 0 24px 60px rgba(24, 32, 51, 0.18) !important;
}

html.theme-light .mm-header,
html.theme-light .self-note-content-summary-panel {
    background: var(--lt-sunken) !important;
    border-color: var(--lt-border) !important;
    color: var(--text-main) !important;
}

/* ── Custom Test action bar ─────────────────────────────────────────────── */

html.theme-light .ct-float-bar {
    background: color-mix(in srgb, var(--lt-card) 92%, transparent);
    border-top: 1px solid var(--lt-border);
    box-shadow: 0 -6px 24px rgba(24, 32, 51, 0.1);
}

html.theme-light .ct-float-summary {
    color: var(--text-muted);
}

html.theme-light .ct-float-summary strong,
html.theme-light .ct-avail-val {
    color: var(--brand);
}

html.theme-light .ct-float-start-btn {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff;
}

/* ── AI teacher chat ────────────────────────────────────────────────────── */

html.theme-light .ai-chat-window,
html.theme-light .global-ai-container {
    background: var(--lt-card) !important;
    border-color: var(--lt-border) !important;
    color: var(--text-main) !important;
}

html.theme-light .chat-body {
    background: var(--lt-sunken) !important;
}

html.theme-light .chat-header,
html.theme-light .chat-footer,
html.theme-light .chat-lang-bar {
    background: var(--lt-card) !important;
    border-color: var(--lt-border) !important;
    color: var(--text-main) !important;
}

/* Local answer card (the shipped hint/solution shown before any API call). */
html.theme-light .ai-local-head {
    border-bottom-color: var(--lt-border) !important;
}

html.theme-light .ai-local-row {
    background: var(--lt-sunken) !important;
}

html.theme-light .ai-local-row-body {
    color: var(--text-main) !important;
}

html.theme-light .ai-local-row-label,
html.theme-light .ai-local-free {
    color: var(--text-muted) !important;
}

html.theme-light .ai-local-btn {
    background: var(--lt-chip) !important;
    border-color: var(--lt-border) !important;
    color: var(--text-main) !important;
}

html.theme-light .ai-local-btn.is-primary {
    background: #03dac6 !important;
    border-color: #03dac6 !important;
    color: #06221d !important;
}

/* ── Remaining inline-styled panels, addressed by id ────────────────────── */

html.theme-light #inline-ai-mentor-content,
html.theme-light #analytics-modal > div,
html.theme-light #analytics-modal div[style*="#1e1e1e"],
html.theme-light #pre-test-instruction-modal,
html.theme-light #image-crop-modal,
html.theme-light #crop-workspace {
    background: var(--lt-card) !important;
    border-color: var(--lt-border) !important;
    color: var(--text-main) !important;
}

html.theme-light #pre-test-instruction-modal span[style*="#333"],
html.theme-light #crop-direct-btn,
html.theme-light #weakest-link-modal button {
    background: var(--lt-chip) !important;
    border-color: var(--lt-border) !important;
    color: var(--text-main) !important;
}

/* Left dark on purpose: #overlay is the sidebar scrim, #mindmap-canvas is the
   galaxy view's night sky, and #res-video-playlist-bar sits over video. */

/* ── Sidebar & shell details base.css hardcodes ─────────────────────────── */

/* Muted at rest, full strength on hover — the portal's nav rows read the same
   way in both themes, and a rail of full-contrast rows fights the content. */
html.theme-light .set-btn,
html.theme-light .sub-btn {
    color: var(--text-muted);
}

html.theme-light .set-btn:hover,
html.theme-light .sub-btn:hover {
    color: var(--text-main);
}

/* The developer's name is the content of that block; "Developed by" is the
   label. Muting both left the name greyed out in light mode. */
html.theme-light .section-title,
html.theme-light .dev-label {
    color: var(--text-muted);
}

/* The one dark chip that is intentional in light mode is the hero exam card,
   which premium-ui.css pins to the same dark gradient the portal uses in both
   themes — leave it alone. */