/**
 * @file public/css/base.css
 * @description Lightweight CSS reset, base typography, and global utility classes.
 * @dependencies public/css/variables.css  (must load first)
 */

/* ─── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, p, ul, ol, figure {
  margin: 0;
  padding: 0;
}

html {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  background-color: var(--color-bg);
  color: var(--color-text);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* ── Explicit dark text for headings in light mode ────────────────────────────
   WHY: Some headings may inherit white from dark-gradient parent containers.
   Force them back to dark. */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-primary);
}

p  { margin-bottom: var(--space-4); color: var(--color-text); }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--color-primary-mid);
  text-decoration: underline;
}

/* ─── Base Typography ────────────────────────────────────────────────────────── */
h1 { font-size: var(--text-4xl); line-height: 1.2; margin-bottom: var(--space-4); color: var(--color-primary); }
h2 { font-size: var(--text-2xl); line-height: 1.3; margin-bottom: var(--space-4); color: var(--color-primary); }
h3 { font-size: var(--text-xl);  line-height: 1.4; margin-bottom: var(--space-2); color: var(--color-primary); }
p  { margin-bottom: var(--space-4); }

/* ─── Global keyboard focus indicator ──────────────────────────────────────────
   WHY: Keyboard and assistive-tech users need a visible focus ring on every
   interactive element. :focus-visible only fires for keyboard/programmatic
   focus, so mouse clicks don't get an outline — best of both worlds. Individual
   components may override with a tighter ring, but this is the floor. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ─── Global Utilities ───────────────────────────────────────────────────────── */
.text-center { text-align: center !important; }
.hidden      { display: none !important; }
.text-muted  { color: var(--color-text-muted); }
.text-danger { color: var(--color-danger); }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ─── Badges ─────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-xs);
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: baseline;
}

/* Type / status badge skins live in components.css (single source of truth);
   only the shared .badge base + dark-mode overrides remain in base.css. */

/* ═══════════════════════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════════════════════
   Strategy: override semantic + surface tokens on html.dark-mode so every
   component that uses a --color-* variable automatically adapts.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   THEME APPLICATION — three triggers, one token set
   ─────────────────────────────────────────────────────────────────────────────
   The dark token set below is applied when:
     1. the OS prefers dark and the user hasn't forced light  → @media block
        (NO JavaScript required — correct theme on first paint), OR
     2. an explicit root class is present: .dark-mode (back-compat, what the
        toggle sets) or .theme-dark.
   .theme-light always wins and forces the light :root defaults, even on a
   dark-preferring OS.

   Components never reference dark colours directly — they read the semantic
   --color-* tokens, which this block reassigns. Adding another theme later is
   therefore one more selector block of token values (see the
   "ADD-A-THEME TEMPLATE" note in variables.css); no component CSS changes.

   ⚠ CSS can't share one declaration block across an at-rule boundary, so the
   media-query copy and the class copy below MUST be kept in sync. They are the
   ONLY two places dark values live. */

/* (1) No-JS path: follow the operating-system preference. */
@media (prefers-color-scheme: dark) {
  html:not(.theme-light) {
    color-scheme: dark;
    background: var(--color-dark-bg);
    color: var(--color-dark-text);

    --color-text:           var(--color-dark-text);
    --color-text-muted:     var(--color-dark-text-muted);
    --color-text-subtle:    #94A3B8; /* 6.4:1 on dark surface */
    --color-primary:        #E2E8F0;
    --color-primary-mid:    #94A3B8;
    --color-primary-light:  var(--color-dark-elevated);
    --color-surface:        var(--color-dark-surface);
    --color-surface-alt:    var(--color-dark-elevated);
    --color-surface-muted:  var(--color-dark-surface);
    --color-bg:             var(--color-dark-bg);
    --color-border:         var(--color-dark-border);
    --color-muted:          #94A3B8;
    --color-accent-light:   rgba(232, 130, 10, 0.15);
    --color-accent-dark:    var(--color-orange-soft);
    --color-success-light:  rgba(22, 163, 74, 0.15);
    --color-success-strong: #4ADE80;
    --color-danger-light:   rgba(220, 38, 38, 0.15);
    --color-danger-strong:  #F87171;
    --color-warning-light:  rgba(217, 119, 6, 0.15);
    --color-warning-soft:   rgba(217, 119, 6, 0.08);
    --color-warning-strong: #FCD34D;
    --color-info-light:     rgba(2, 132, 199, 0.15);
    --color-info-pale:      rgba(2, 132, 199, 0.06);
    --color-info-strong:    #60A5FA;
    --color-divider-soft:   var(--color-dark-border);
  }
}

/* (2) Explicit class path: the toggle sets .dark-mode; .theme-dark is an alias.
   Component-level dark overrides further below attach to these classes too. */
html.dark-mode,
html.theme-dark {
  color-scheme: dark;
  background: var(--color-dark-bg);
  color: var(--color-dark-text);

  --color-text:           var(--color-dark-text);
  --color-text-muted:     var(--color-dark-text-muted);
  --color-text-subtle:    #94A3B8; /* 6.4:1 on dark surface */
  --color-primary:        #E2E8F0;
  --color-primary-mid:    #94A3B8;
  --color-primary-light:  var(--color-dark-elevated);
  --color-surface:        var(--color-dark-surface);
  --color-surface-alt:    var(--color-dark-elevated);
  --color-surface-muted:  var(--color-dark-surface);
  --color-bg:             var(--color-dark-bg);
  --color-border:         var(--color-dark-border);
  --color-muted:          #94A3B8;
  --color-accent-light:   rgba(232, 130, 10, 0.15);
  --color-accent-dark:    var(--color-orange-soft);
  --color-success-light:  rgba(22, 163, 74, 0.15);
  --color-success-strong: #4ADE80;
  --color-danger-light:   rgba(220, 38, 38, 0.15);
  --color-danger-strong:  #F87171;
  --color-warning-light:  rgba(217, 119, 6, 0.15);
  --color-warning-soft:   rgba(217, 119, 6, 0.08);
  --color-warning-strong: #FCD34D;
  --color-info-light:     rgba(2, 132, 199, 0.15);
  --color-info-pale:      rgba(2, 132, 199, 0.06);
  --color-info-strong:    #60A5FA;
  --color-divider-soft:   var(--color-dark-border);
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
html.dark-mode .app-header {
  background: var(--color-dark-surface);
  border-bottom: 1px solid var(--color-dark-border);
}

/* ── Logo: monochrome white mark in dark mode ─────────────────────────────────
   The brand logo is now MULTI-COLOUR, so the old `invert(1)` hue-rotated the
   emblem (teal/purple → orange/green — wrong brand colours). `brightness(0)
   invert(1)` instead renders the whole lockup solid white: a clean, intentional
   dark-mode treatment that keeps the otherwise near-invisible dark wordmark
   readable. Applied for BOTH the explicit class and the no-JS OS-dark path.
   For a full-colour dark logo later, swap a dedicated logo_en_dark.png via the
   #brand-logo-img hook instead of a filter. */
@media (prefers-color-scheme: dark) {
  html:not(.theme-light) .brand-logo-img { filter: brightness(0) invert(1); }
}
html.dark-mode .brand-logo-img,
html.theme-dark .brand-logo-img {
  filter: brightness(0) invert(1);
}

/* ── Cards ──────────────────────────────────────────────────────────────────── */
html.dark-mode .card,
html.dark-mode .test-card,
html.dark-mode .stat-card,
html.dark-mode .exam-card,
html.dark-mode .analytics-panel,
html.dark-mode .pricing-card,
html.dark-mode .feature-card,
html.dark-mode .auth-card,
html.dark-mode .score-summary-card,
html.dark-mode .test-detail-panel,
html.dark-mode .summary-card,
html.dark-mode .section-card,
html.dark-mode .accordion-item,
html.dark-mode .info-card,
html.dark-mode .pro-tip-card,
html.dark-mode .resume-banner,
html.dark-mode .upgrade-prompt,
html.dark-mode .h2h-result-card,
html.dark-mode .onboarding-banner {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
}

/* ── Forms ──────────────────────────────────────────────────────────────────── */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
  color: var(--color-dark-text);
}

/* ── Tables ─────────────────────────────────────────────────────────────────── */
html.dark-mode .data-table th {
  background: var(--color-dark-surface);
  color: var(--color-dark-text-muted);
  border-color: var(--color-dark-border);
}

html.dark-mode .data-table td {
  border-color: var(--color-dark-border);
  color: var(--color-dark-text);
}

html.dark-mode .data-table tbody tr:hover {
  background: var(--color-dark-elevated);
}

/* ── Links ──────────────────────────────────────────────────────────────────── */
html.dark-mode a {
  color: #60A5FA;
}

html.dark-mode a:hover {
  color: #93C5FD;
}

/* ── Headings ───────────────────────────────────────────────────────────────── */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4 {
  color: #F1F5F9;
}

/* ── Muted text ─────────────────────────────────────────────────────────────── */
html.dark-mode .text-muted {
  color: var(--color-dark-text-muted);
}

/* ── Badges ─────────────────────────────────────────────────────────────────── */
html.dark-mode .badge-type {
  background: rgba(27, 46, 75, 0.6);
  color: #93C5FD;
}

/* Type / status badges — use the dark surface hierarchy so the pale semantic
   tints don't show as jarring light blocks on dark surfaces. Text colours pull
   the dark-mode-adjusted -strong tokens for AA contrast. */
html.dark-mode .badge-free {
  background: var(--color-dark-elevated);
  color: var(--color-success-strong);
}
html.dark-mode .badge-premium {
  background: var(--color-dark-elevated);
  color: var(--color-accent-dark);
}
html.dark-mode .badge-live {
  background: var(--color-dark-elevated);
  color: var(--color-danger-strong);
}
html.dark-mode .badge-muted {
  background: var(--color-dark-surface);
  color: var(--color-dark-text-muted);
}

/* ── Dropdown / menus ───────────────────────────────────────────────────────── */
html.dark-mode .user-menu-dropdown {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
/* In dark mode --color-primary flips to near-white (#E2E8F0). The footer paints
   its background with --color-primary, so without an override it becomes a
   near-white bar with white-tinted text = invisible. The explicit-class rule
   below fixes the toggle; the @media rule fixes SYSTEM theme (no .dark-mode
   class), which was the reported "footer not visible in system theme" bug. */
html.dark-mode .app-footer {
  background: var(--color-dark-surface);
  border-top: 1px solid var(--color-dark-border);
}
@media (prefers-color-scheme: dark) {
  html:not(.theme-light) .app-footer {
    background: var(--color-dark-surface);
    border-top: 1px solid var(--color-dark-border);
  }
}

/* ── Nav mobile overlay ─────────────────────────────────────────────────────── */
html.dark-mode .nav-links.mobile-open {
  background-color: var(--color-dark-bg);
  border-top-color: var(--color-dark-border);
}

/* ── Exam workspace ─────────────────────────────────────────────────────────── */
html.dark-mode body.exam-locked-layout {
  background-color: var(--color-dark-bg);
  color: var(--color-dark-text);
}

html.dark-mode .exam-sticky-header {
  background-color: var(--color-dark-surface);
  border-bottom-color: var(--color-dark-border);
}

html.dark-mode .question-container-card {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
}

html.dark-mode .option-selection-row label {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
}

html.dark-mode .option-selection-row label:hover {
  background: var(--color-dark-elevated);
  border-color: var(--color-primary-mid);
}

html.dark-mode .option-selection-row.option-selected label {
  background: rgba(232, 130, 10, 0.12);
  border-color: var(--color-accent);
}

html.dark-mode .exam-progress-sidebar {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
}

html.dark-mode .bubble {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
}

html.dark-mode .bubble-unanswered {
  background-color: var(--color-dark-elevated);
  color: var(--color-dark-text-muted);
}

/* ── Modals ─────────────────────────────────────────────────────────────────── */
html.dark-mode .mcqplex-modal-content,
html.dark-mode .modal-card,
html.dark-mode .ui-modal-panel {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
}

html.dark-mode .mcqplex-modal-overlay,
html.dark-mode .modal-backdrop,
html.dark-mode .modal-overlay {
  background-color: rgba(7, 11, 20, 0.8);
}

/* ── Toasts ─────────────────────────────────────────────────────────────────── */
html.dark-mode .toast,
html.dark-mode .ui-toast-container .toast {
  background: var(--color-dark-surface);
  color: var(--color-dark-text);
}

/* ── Preview drawer ─────────────────────────────────────────────────────────── */
html.dark-mode .preview-drawer {
  background: var(--color-dark-surface);
  border-left-color: var(--color-dark-border);
}

html.dark-mode .drawer-section__content {
  background: var(--color-dark-elevated);
  color: var(--color-dark-text);
}

/* ── Leaderboard specific ───────────────────────────────────────────────────── */
html.dark-mode .highlight-row {
  background: rgba(232, 130, 10, 0.15) !important;
}

html.dark-mode .leaderboard-page-container {
  color: var(--color-dark-text);
}

/* ── Filter controls ────────────────────────────────────────────────────────── */
html.dark-mode .filter-controls-bar {
  color: var(--color-dark-text);
}

/* ── System status ──────────────────────────────────────────────────────────── */
html.dark-mode .system-status-card,
html.dark-mode .info-card,
html.dark-mode .info-card-info,
html.dark-mode .info-card-success,
html.dark-mode .info-card-warning {
  background: var(--color-dark-surface);
}

/* ── Lang switch button ─────────────────────────────────────────────────────── */
html.dark-mode .lang-switch-btn {
  background-color: var(--color-dark-elevated);
  border-color: var(--color-dark-border);
}

html.dark-mode .dark-mode-toggle {
  background-color: var(--color-dark-elevated);
  border-color: var(--color-dark-border);
}

html.dark-mode .dark-mode-toggle svg {
  stroke: var(--color-dark-text);
}

html.dark-mode .lang-switch-opt.is-active {
  background-color: var(--color-dark-surface);
  color: var(--color-dark-text);
}

/* ── CDC / Cognitive-level badges ──────────────────────────────────────────
   These classes use hardcoded hex values in CSS so they need explicit dark
   overrides.  Translucent tints + light text maintain semantic colour coding
   without introducing jarring light blocks in dark mode. */
html.dark-mode .badge-level-1 {
  background: rgba(29, 78, 216, 0.15);
  color: #93C5FD;
  border-color: rgba(29, 78, 216, 0.35);
}

html.dark-mode .badge-level-2 {
  background: rgba(22, 163, 74, 0.15);
  color: #4ADE80;
  border-color: rgba(22, 163, 74, 0.35);
}

html.dark-mode .badge-level-3 {
  background: rgba(196, 103, 26, 0.15);
  color: #FB923C;
  border-color: rgba(196, 103, 26, 0.35);
}

html.dark-mode .badge-level-4 {
  background: rgba(220, 38, 38, 0.15);
  color: #F87171;
  border-color: rgba(220, 38, 38, 0.35);
}

/* ── Spinner track — visible on dark surfaces ──────────────────────────────
   rgba(0,0,0,0.1) vanishes on dark backgrounds; use a dim border token. */
html.dark-mode .spinner {
  border-color: var(--color-dark-border);
  border-top-color: var(--color-accent);
}

/* ── Ad-slot container ─────────────────────────────────────────────────────
   Hardcoded #eeeeee turns blindingly bright in dark mode. */
html.dark-mode .ad-slot-container {
  background-color: var(--color-dark-elevated);
}

/* ── Comparison table (premium page) ──────────────────────────────────────
   Token overrides handle most of it; force last-column header text so
   accent-dark stays readable on the translucent accent-light bg. */
html.dark-mode .comparison-table th {
  background: var(--color-dark-surface);
  color: var(--color-dark-text-muted);
  border-color: var(--color-dark-border);
}

html.dark-mode .comparison-table td {
  border-color: var(--color-dark-border);
}

html.dark-mode .comparison-table tbody tr:hover {
  background: var(--color-dark-elevated);
}

/* ── Admin-page hero (admin shell partial) ──────────────────────────────── */
html.dark-mode .admin-page-hero {
  background:
    radial-gradient(circle at top right, rgba(2, 132, 199, 0.08), transparent 34%),
    linear-gradient(135deg, var(--color-dark-surface) 0%, var(--color-dark-bg) 100%);
}

html.dark-mode .admin-metric-card {
  background: linear-gradient(180deg, var(--color-dark-surface) 0%, var(--color-dark-bg) 100%);
}

html.dark-mode .admin-filter-card,
html.dark-mode .admin-soft-card {
  background: var(--color-dark-bg);
}

html.dark-mode .admin-table th {
  background: var(--color-dark-bg);
  color: var(--color-dark-text-muted);
  border-color: var(--color-dark-border);
}

html.dark-mode .admin-table td {
  color: var(--color-dark-text);
  border-color: var(--color-dark-border);
}

html.dark-mode .admin-table tbody tr:hover {
  background: var(--color-dark-elevated);
}

html.dark-mode .admin-table-wrap {
  border-color: var(--color-dark-border);
}

html.dark-mode .admin-empty-state {
  border-color: var(--color-dark-border);
  background: var(--color-dark-bg);
}

html.dark-mode .admin-chip {
  background: var(--color-dark-elevated);
  color: var(--color-dark-text);
}

html.dark-mode .admin-input,
html.dark-mode .admin-select,
html.dark-mode .admin-textarea {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
  color: var(--color-dark-text);
}

html.dark-mode .admin-panel {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
}

html.dark-mode .admin-modal-card {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
}

html.dark-mode .admin-page-meta-card {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
}

/* ── Exam card Start button — --color-primary flips to light silver in dark mode,
   so the button needs an explicit dark-surface style to stay intentional ─── */
html.dark-mode .exam-card__btn-start {
  background-color: var(--color-dark-elevated);
  color: var(--color-dark-text);
  border: 1px solid var(--color-dark-border);
}

html.dark-mode .exam-card__btn-start:hover {
  background-color: var(--color-accent);
  color: var(--color-surface);
  border-color: var(--color-accent);
  text-decoration: none;
}

/* ── Secondary button border — dark-border is very low contrast on dark surfaces */
html.dark-mode .btn-secondary {
  border-color: rgba(148, 163, 184, 0.35);
  color: var(--color-dark-text);
}

html.dark-mode .btn-secondary:hover {
  border-color: var(--color-accent);
  background-color: rgba(232, 130, 10, 0.08);
  color: var(--color-accent);
}

/* ── Profile lock panel (uses --color-primary which becomes light in dark) ─ */
html.dark-mode .premium-hero-panel {
  background:
    radial-gradient(circle at top right, rgba(2, 132, 199, 0.08), transparent 35%),
    linear-gradient(135deg, var(--color-dark-surface) 0%, var(--color-dark-bg) 100%);
}