/* =========================
   CORE BRAND VARIABLES
   ========================= */
:root {
  --brand-primary: #1E3A8A;   /* Academic navy */
  --brand-secondary: #3B82F6;
  --brand-bg: #EEF4FF;
  --brand-card: #FFFFFF;
  --brand-border: #E5E7EB;
  --brand-text: #1F2937;
  --tile-bg: #F9FAFB;
  --nav-bg: #ffffff;
}

/* =========================
   DARK MODE SELECTORS
   ========================= */
body.theme-dark {
  --brand-bg: #0f172a;      /* Deep Slate */
  --brand-card: #1e293b;    /* Dark Slate Card */
  --brand-text: #f1f5f9;    /* Off-white text */
  --brand-border: #334155;
  --tile-bg: #1e293b;
  --nav-bg: #1e293b;
  --brand-primary: #60A5FA; /* Lighter blue for dark bg */
}

/* =========================
   GLOBAL
   ========================= */
body {
  background: var(--brand-bg) !important;
  font-family: 'Inter', Arial, sans-serif;
  color: var(--brand-text);
  transition: background-color 0.3s ease;
}

/* =========================
   NAVBAR (Parent-safe)
   ========================= */
.kid-nav {
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--brand-border);
}

/* =========================
   CARDS
   ========================= */
.kid-card,
.card {
  background: var(--brand-card) !important;
  color: var(--brand-text) !important;
  border-radius: 10px;
  border: 1px solid var(--brand-border);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* =========================
   BUTTONS
   ========================= */
.kid-btn,
.btn {
  border-radius: 8px;
  font-weight: 500;
}

.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-primary:hover {
  background-color: #162E6F;
  border-color: #162E6F;
}

.btn-outline-secondary {
  color: var(--brand-text);
  border-color: var(--brand-border);
}

.btn-outline-secondary:hover {
  background-color: rgba(255,255,255,0.1);
}

/* =========================
   OPTIONS
   ========================= */
.option-card {
  padding: 12px;
  border-radius: 10px;
  border: 2px solid var(--brand-border);
  background-color: var(--brand-card);
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.15s ease-in-out;
}

.option-card:hover {
  background: var(--brand-bg);
  border-color: var(--brand-secondary);
}

/* =========================
   SELECTION TILES
   ========================= */
.selection-tile {
  transition: border-color 0.15s ease-in-out;
  border: 2px solid var(--brand-border);
  background-color: var(--tile-bg) !important;
  border-radius: 10px;
}

.selection-tile:hover {
  background-color: var(--brand-bg) !important;
}

.btn-check:checked + .selection-tile {
  border-color: var(--brand-primary);
  background-color: rgba(30, 58, 138, 0.15) !important;
  box-shadow: 0 3px 10px rgba(30, 58, 138, 0.15) !important;
}

.btn-check:checked + .selection-tile i {
  color: var(--brand-primary);
}
/* =========================
   DARK MODE FIXES
   ========================= */

/* Fix 1: Keep Working button text visible in dark mode */
body.theme-dark .btn-outline-secondary {
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

body.theme-dark .btn-outline-secondary:hover {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

/* Fix 2: student_result review card text visible in dark mode */
body.theme-dark .review-card .lead,
body.theme-dark .review-card p,
body.theme-dark .review-card h5 {
    color: #f1f5f9 !important;
}

/* Fix 3: student_test page — prevent body dark bg bleeding into test wrapper */
body.theme-dark .theme-wrapper.theme-light,
body.theme-light .theme-wrapper.theme-light {
    background-color: #f4faff !important;
}