/* Light-mode overrides.
 *
 * Every authenticated page has its own <style> block with hardcoded dark
 * hex values, so instead of refactoring each one we override the common
 * dark shades here when [data-theme="light"] is set on <html>.
 *
 * Strategy: broad rules for body/text/backgrounds + attribute selectors
 * to catch inline style="color:#fff" etc. without editing every page.
 */

:root[data-theme="light"] {
  color-scheme: light;
}

/* ────────────────────────────────────────────────────────────────────────────
 * BODY + ROOT TEXT
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] body {
  background: #f7f7f8 !important;
  color: #111 !important;
}

:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4 { color: #111 !important; }

:root[data-theme="light"] label { color: #555 !important; }

:root[data-theme="light"] p { color: inherit; }

/* ────────────────────────────────────────────────────────────────────────────
 * INLINE STYLE CATCHES (things set directly on elements via style="…")
 * `[style*="color:#fff"]` is substring-safe here because our codebase
 *  doesn't use #ffff00 / #ffffee etc. — only pure white variants.
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] [style*="color:#fff"]        { color: #111 !important; }
:root[data-theme="light"] [style*="color: #fff"]       { color: #111 !important; }
:root[data-theme="light"] [style*="color:#eee"]        { color: #222 !important; }
:root[data-theme="light"] [style*="color:#ddd"]        { color: #333 !important; }
:root[data-theme="light"] [style*="color:#ccc"]        { color: #333 !important; }
:root[data-theme="light"] [style*="color:#bbb"]        { color: #444 !important; }
:root[data-theme="light"] [style*="color:#aaa"]        { color: #555 !important; }
:root[data-theme="light"] [style*="color:#999"]        { color: #666 !important; }
:root[data-theme="light"] [style*="color:#888"]        { color: #777 !important; }
/* keep #666/#555/#444 — already readable on light */

/* Inline dark backgrounds → light */
:root[data-theme="light"] [style*="background:#0a0a0a"],
:root[data-theme="light"] [style*="background:#0d0d0d"],
:root[data-theme="light"] [style*="background:#111"],
:root[data-theme="light"] [style*="background:#1a1a1a"],
:root[data-theme="light"] [style*="background:#1e1e1e"] { background: #fff !important; }
:root[data-theme="light"] [style*="background:#222"]    { background: #ededef !important; }
:root[data-theme="light"] [style*="background:#2a2a2a"],
:root[data-theme="light"] [style*="background:#333"]    { background: #ededef !important; }

/* Keep brand reds / greens / accent tints alone — exclude by specifically
 * NOT overriding strings like background:#1a0000 (red tint), #0a1a0a (green
 * tint), #0d1a0d (green), #001a00 (green), #1a0a00 (dark orange). Those
 * look fine as-is in both themes. */

/* ────────────────────────────────────────────────────────────────────────────
 * NAV
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] nav {
  background: #fff !important;
  border-bottom-color: #e5e5e7 !important;
}
:root[data-theme="light"] nav a { color: inherit !important; }
:root[data-theme="light"] .logo { color: #111 !important; }

:root[data-theme="light"] .credit-pill {
  background: #f0f0f2 !important;
  border-color: #e5e5e7 !important;
  color: #555 !important;
}
:root[data-theme="light"] .credit-pill strong { color: #111 !important; }

:root[data-theme="light"] footer { color: #888 !important; border-top-color: #e5e5e7 !important; }
:root[data-theme="light"] footer a { color: #666 !important; }
:root[data-theme="light"] footer a:hover { color: #111 !important; }

/* ────────────────────────────────────────────────────────────────────────────
 * BUTTONS
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] .btn-ghost {
  color: #444 !important;
  border-color: #d5d5d8 !important;
  background: transparent !important;
}
:root[data-theme="light"] .btn-ghost:hover {
  color: #111 !important;
  border-color: #111 !important;
}
/* .btn-red keeps its red bg + white text in both themes — intentional */

:root[data-theme="light"] .save-btn,
:root[data-theme="light"] .submit-feedback,
:root[data-theme="light"] .copy-btn { color: inherit; }

/* ────────────────────────────────────────────────────────────────────────────
 * CARDS & SECTIONS (any page)
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] .card,
:root[data-theme="light"] .section,
:root[data-theme="light"] .section-card,
:root[data-theme="light"] .cats-card,
:root[data-theme="light"] .chart-card,
:root[data-theme="light"] .history-item,
:root[data-theme="light"] .grade-banner,
:root[data-theme="light"] .tour-welcome-box,
:root[data-theme="light"] .tabs,
:root[data-theme="light"] .upload-area,
:root[data-theme="light"] .badge-card,
:root[data-theme="light"] .locked-slot .history-item,
:root[data-theme="light"] #sub-card,
:root[data-theme="light"] .ref-section,
:root[data-theme="light"] .modal,
:root[data-theme="light"] .modal-step,
:root[data-theme="light"] .pkg-card,
:root[data-theme="light"] .package,
:root[data-theme="light"] .faq-item,
:root[data-theme="light"] .tier-card,
:root[data-theme="light"] .sub-info,
:root[data-theme="light"] .info-row {
  background: #fff !important;
  border-color: #e5e5e7 !important;
}

:root[data-theme="light"] .card-title,
:root[data-theme="light"] .section-title,
:root[data-theme="light"] .cats-title,
:root[data-theme="light"] .gd-section-title { color: #888 !important; }

/* Card internal text */
:root[data-theme="light"] .info-label { color: #666 !important; }
:root[data-theme="light"] .info-val   { color: #111 !important; }

/* ────────────────────────────────────────────────────────────────────────────
 * INPUTS + TEXTAREAS + SELECT
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select,
:root[data-theme="light"] .title-input,
:root[data-theme="light"] .feedback-input,
:root[data-theme="light"] .ref-input {
  background: #fff !important;
  border-color: #d5d5d8 !important;
  color: #111 !important;
}
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder { color: #aaa !important; }
:root[data-theme="light"] input:focus,
:root[data-theme="light"] textarea:focus { border-color: #ff0000 !important; }

/* ────────────────────────────────────────────────────────────────────────────
 * /grade PAGE — TABS, MODE OPTIONS, UPLOAD
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] .tab { color: #666 !important; }
:root[data-theme="light"] .tab:hover { color: #111 !important; }
:root[data-theme="light"] .tab.active {
  background: #f0f0f2 !important;
  color: #111 !important;
}

:root[data-theme="light"] .mode-opt {
  background: #fff !important;
  border-color: #d5d5d8 !important;
  color: #111 !important;
}
:root[data-theme="light"] .mode-opt .mode-name { color: #111 !important; }
:root[data-theme="light"] .mode-opt .mode-desc { color: #666 !important; }
:root[data-theme="light"] .mode-opt.selected {
  border-color: #ff0000 !important;
  background: #fff5f5 !important;
}

:root[data-theme="light"] .upload-area {
  background: #fff !important;
  border-color: #d5d5d8 !important;
}
:root[data-theme="light"] .upload-area:hover,
:root[data-theme="light"] .upload-area.drag {
  border-color: #ff0000 !important;
  background: #fff5f5 !important;
}
:root[data-theme="light"] .upload-area h2 { color: #111 !important; }
:root[data-theme="light"] .upload-area p { color: #888 !important; }
:root[data-theme="light"] .upload-formats { color: #aaa !important; }

/* ────────────────────────────────────────────────────────────────────────────
 * /grade PAGE — RESULTS
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] .grade-verdict,
:root[data-theme="light"] .gd-verdict { color: #555 !important; }
:root[data-theme="light"] .grade-meta { color: #888 !important; }
:root[data-theme="light"] .grade-meta strong { color: #111 !important; }
:root[data-theme="light"] .grade-score-big { color: #111 !important; }
:root[data-theme="light"] .cat-name { color: #444 !important; }

:root[data-theme="light"] .section-list li {
  color: #222 !important;
  border-bottom-color: #ededef !important;
}
:root[data-theme="light"] .cat-track,
:root[data-theme="light"] .gd-cat-bar { background: #ededef !important; }

:root[data-theme="light"] .fix-how { color: #1565c0 !important; }

/* ────────────────────────────────────────────────────────────────────────────
 * DASHBOARD — HISTORY
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] .h-score { color: #111 !important; }
:root[data-theme="light"] .h-date  { color: #666 !important; }
:root[data-theme="light"] .h-cat {
  background: #f0f0f2 !important;
  color: #555 !important;
  border-color: #e5e5e7 !important;
}
:root[data-theme="light"] .h-thumb-placeholder { background: #f0f0f2 !important; color: #888 !important; }
:root[data-theme="light"] .h-arrow { color: #aaa !important; }
:root[data-theme="light"] .empty-history { color: #888 !important; }
:root[data-theme="light"] .history-badge { color: #666 !important; }

/* ────────────────────────────────────────────────────────────────────────────
 * DASHBOARD — STATS / CHART
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .stat-item {
  background: #fff !important;
  border-color: #e5e5e7 !important;
}
:root[data-theme="light"] .stat-label { color: #666 !important; }
:root[data-theme="light"] .stat-val,
:root[data-theme="light"] .stat-value { color: #111 !important; }

/* ────────────────────────────────────────────────────────────────────────────
 * DASHBOARD — BADGES
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] .badge-card {
  background: #fff !important;
  border-color: #e5e5e7 !important;
}
:root[data-theme="light"] .badge-name { color: #111 !important; }
:root[data-theme="light"] .badge-desc { color: #666 !important; }
:root[data-theme="light"] .badge-card:not(.earned) .badge-icon { filter: grayscale(0.7) opacity(0.5); }

/* ────────────────────────────────────────────────────────────────────────────
 * DASHBOARD — GRADE DETAIL MODAL
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] .gd-overlay { background: rgba(247,247,248,0.85) !important; }
:root[data-theme="light"] .gd-modal {
  background: #fff !important;
  border-color: #e5e5e7 !important;
}
:root[data-theme="light"] .gd-header { border-bottom-color: #ededef !important; }
:root[data-theme="light"] .gd-close { color: #888 !important; }
:root[data-theme="light"] .gd-close:hover { color: #111 !important; }
:root[data-theme="light"] .gd-date { color: #888 !important; }
:root[data-theme="light"] .gd-score-label,
:root[data-theme="light"] .gd-cat-label { color: #666 !important; }
:root[data-theme="light"] .gd-score-big { color: #111 !important; }
:root[data-theme="light"] .gd-list-item { color: #222 !important; }
:root[data-theme="light"] .gd-fix-issue { color: #111 !important; }
:root[data-theme="light"] .gd-fix-arrow { color: #888 !important; }

/* ────────────────────────────────────────────────────────────────────────────
 * DASHBOARD — TOUR
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] #tour-welcome { background: rgba(247,247,248,0.94) !important; }
:root[data-theme="light"] #tour-tip {
  background: #fff !important;
  border-color: #e5e5e7 !important;
}
:root[data-theme="light"] #tour-tip h3 { color: #111 !important; }
:root[data-theme="light"] #tour-tip p  { color: #666 !important; }
:root[data-theme="light"] .tour-skip { color: #888 !important; }
:root[data-theme="light"] .tour-skip:hover { color: #111 !important; }
:root[data-theme="light"] .tour-step-count { color: #aaa !important; }
:root[data-theme="light"] #tour-spot { box-shadow: 0 0 0 9999px rgba(0,0,0,0.28) !important; }
:root[data-theme="light"] .tour-welcome-header { background: linear-gradient(135deg, #fff5f5, #ffebeb) !important; }
:root[data-theme="light"] .tour-credits-badge { background: #e5f7e5 !important; color: #00863a !important; border-color: #bfe5bf !important; }

/* ────────────────────────────────────────────────────────────────────────────
 * DASHBOARD — SUBSCRIPTION / CANCEL MODAL
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] .modal-overlay { background: rgba(247,247,248,0.85) !important; }
:root[data-theme="light"] .modal {
  background: #fff !important;
  border-color: #e5e5e7 !important;
}
:root[data-theme="light"] .reason-opt {
  background: #fff !important;
  border-color: #d5d5d8 !important;
  color: #222 !important;
}
:root[data-theme="light"] .reason-opt.selected { border-color: #ff0000 !important; background: #fff5f5 !important; }
:root[data-theme="light"] .btn-keep { background: #f0f0f2 !important; color: #111 !important; }
:root[data-theme="light"] .btn-confirm-cancel:disabled { background: #ededef !important; color: #aaa !important; }

/* ────────────────────────────────────────────────────────────────────────────
 * /grade — AI THINKING OVERLAY
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] #ai-overlay { background: rgba(247,247,248,0.96) !important; }
:root[data-theme="light"] .ai-status-title { color: #111 !important; }
:root[data-theme="light"] .ai-status-text  { color: #555 !important; }
:root[data-theme="light"] .ai-progress      { background: #ededef !important; }
:root[data-theme="light"] .ai-progress-pct { color: #888 !important; }
:root[data-theme="light"] .ai-hint         { color: #888 !important; }

/* ────────────────────────────────────────────────────────────────────────────
 * /grade — BADGE POPUP
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] .badge-popup {
  background: #fff !important;
  border-color: #e5e5e7 !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12) !important;
}
:root[data-theme="light"] .popup-title { color: #888 !important; }
:root[data-theme="light"] .popup-name  { color: #111 !important; }
:root[data-theme="light"] .popup-desc  { color: #666 !important; }

/* ────────────────────────────────────────────────────────────────────────────
 * /grade — FEEDBACK CARD (subtle green tint in both themes)
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] .feedback-card {
  background: #f4fbf4 !important;
  border-color: #bfe5bf !important;
}
:root[data-theme="light"] .feedback-card h3 { color: #00863a !important; }
:root[data-theme="light"] .feedback-card p  { color: #555 !important; }

/* ────────────────────────────────────────────────────────────────────────────
 * /grade — ERROR BOX (red tint in both themes)
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] .error-box {
  background: #fff5f5 !important;
  border-color: #ffb5b5 !important;
  color: #c62828 !important;
}

/* ────────────────────────────────────────────────────────────────────────────
 * /grade — TITLE COUNTER / MINOR LABELS
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] .title-count { color: #aaa !important; }

/* ────────────────────────────────────────────────────────────────────────────
 * /account — APPEARANCE TOGGLE (uses inline styles — attribute selectors
 * above handle most; a few named tweaks below)
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] #theme-toggle {
  background: #f0f0f2 !important;
  border-color: #e5e5e7 !important;
}

/* ────────────────────────────────────────────────────────────────────────────
 * /admin — TABLES
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] table { background: #fff !important; }
:root[data-theme="light"] thead { background: #f0f0f2 !important; }
:root[data-theme="light"] th { color: #666 !important; border-color: #e5e5e7 !important; }
:root[data-theme="light"] td { color: #222 !important; border-color: #ededef !important; }
:root[data-theme="light"] tr:hover td { background: #f7f7f8 !important; }

:root[data-theme="light"] .tab-nav .tab,
:root[data-theme="light"] .admin-tab { color: #666 !important; }
:root[data-theme="light"] .tab-nav .tab.active,
:root[data-theme="light"] .admin-tab.active { color: #111 !important; border-bottom-color: #ff0000 !important; }

/* ────────────────────────────────────────────────────────────────────────────
 * /add-credits and /buy-credits — PACKAGES + REFERRAL CALLOUT
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] .pkg-card,
:root[data-theme="light"] .tier-card {
  background: #fff !important;
  border-color: #e5e5e7 !important;
}
:root[data-theme="light"] .pkg-card.popular,
:root[data-theme="light"] .tier-card.popular { border-color: #ff0000 !important; }
:root[data-theme="light"] .pkg-price,
:root[data-theme="light"] .tier-price { color: #111 !important; }
:root[data-theme="light"] .pkg-name,
:root[data-theme="light"] .tier-name { color: #111 !important; }
:root[data-theme="light"] .pkg-desc,
:root[data-theme="light"] .tier-desc,
:root[data-theme="light"] .pkg-feature,
:root[data-theme="light"] .tier-feature { color: #555 !important; }
:root[data-theme="light"] .free-way { background: #f4fbf4 !important; border-color: #bfe5bf !important; }

/* ────────────────────────────────────────────────────────────────────────────
 * ANCHORS / MISC
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"] a { color: inherit; }

/* Scrollbar (WebKit) */
:root[data-theme="light"] ::-webkit-scrollbar { background: #f0f0f2; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #aaa; }
