/* ============================================================
   StudyBloom -- Dark Mode
   Strategy: override :root vars when body has .dark-mode
   CSS custom properties DO cascade from body to children,
   so body.dark-mode { --var: value } works correctly.
   The real fix is ensuring main.css uses var() everywhere.
   ============================================================ */

/* ?? 1. Override all CSS variables at :root level via body ?? */
body.dark-mode {
  --pink:          #d4607a;
  --pink-dark:     #f087a0;
  --pink-soft:     #3a1525;
  --peach:         #a06040;
  --peach-soft:    #2a1a0e;
  --yellow:        #c8a830;
  --yellow-soft:   #2a200a;
  --mint:          #3a8a68;
  --mint-dark:     #5ecfa0;
  --mint-soft:     #0a2018;
  --lavender:      #9b8fd4;
  --lavender-dark: #b49bfa;
  --lavender-soft: #1e1a3a;
  --sky:           #4a7a9b;
  --sky-soft:      #0e1e2a;
  --white:         #1a1528;
  --card-bg:       #1e1830;
  --sidebar-bg:    #120d1e;
  --border:        rgba(150, 90, 130, 0.3);
  --shadow:        0 4px 24px rgba(0,0,0,0.5);
  --text:          #ecddf5;
  --text-soft:     #a890b8;
  --text-dark:     #f5eeff;
  --text-muted:    #8a7a9a;

  /* ?? Page background ?? */
  background: linear-gradient(135deg, #0d0a18 0%, #080f0d 50%, #0d0c0a 100%) !important;
  color: #ecddf5;
}

/* ?? 2. Elements that use hard-coded colours in main.css ?? */

/* Body */
body.dark-mode { color: var(--text); }

/* Sidebar */
body.dark-mode .sidebar {
  background: #120d1e !important;
  border-right-color: rgba(150,90,130,0.25) !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.6) !important;
}
body.dark-mode .sidebar-logo {
  border-bottom-color: rgba(150,90,130,0.2) !important;
  color: #f087a0 !important;
}
body.dark-mode .sidebar-footer {
  border-top-color: rgba(150,90,130,0.2) !important;
}
body.dark-mode .nav-link { color: #b09ac0 !important; }
body.dark-mode .nav-link:hover,
body.dark-mode .nav-link.active {
  background: linear-gradient(135deg,#3a1525,#1a1535) !important;
  color: #f087a0 !important;
}

/* Topbar */
body.dark-mode .topbar {
  background: rgba(18,13,30,0.95) !important;
  border-bottom-color: rgba(150,90,130,0.2) !important;
}
body.dark-mode .topbar-title { color: #f087a0 !important; }
body.dark-mode .topbar-stat {
  background: #2a1e35 !important;
  color: #e0c0d8 !important;
}

/* Cards */
body.dark-mode .card {
  background: #1e1830 !important;
  border-color: rgba(150,90,130,0.2) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}
body.dark-mode .card-title { color: #ecddf5 !important; }

/* Stat cards */
body.dark-mode .stat-card {
  background: #1a1428 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
}
body.dark-mode .stat-value { color: #f5eeff !important; }
body.dark-mode .stat-label { color: #8a7a9a !important; }
body.dark-mode .stat-sub   { color: #6a5a7a !important; }

/* Dashboard */
body.dark-mode .greeting-text  { color: #f087a0 !important; }
body.dark-mode .greeting-date  { color: #8a7a9a !important; }
body.dark-mode .streak-badge-big {
  background: linear-gradient(135deg,#2a1a08,#221800) !important;
  color: #f0c060 !important;
}
body.dark-mode .garden-card-overlay {
  background: linear-gradient(transparent, rgba(12,8,22,0.9)) !important;
}
body.dark-mode .garden-level-label { color: #5ecfa0 !important; }
body.dark-mode .garden-minutes     { color: #6a5a7a !important; }
body.dark-mode .week-bar { background: #2a1e35 !important; }
body.dark-mode .week-bar-label { color: #6a5a7a !important; }

/* Quick actions */
body.dark-mode .qa-btn.pink     { background: #3a1525 !important; color: #f087a0 !important; }
body.dark-mode .qa-btn.yellow   { background: #221808 !important; color: #d4aa30 !important; }
body.dark-mode .qa-btn.mint     { background: #0a2018 !important; color: #5ecfa0 !important; }
body.dark-mode .qa-btn.lavender { background: #181230 !important; color: #b49bfa !important; }

/* Inputs */
body.dark-mode .input-field {
  background: #16102a !important;
  border-color: rgba(150,90,130,0.35) !important;
  color: #ecddf5 !important;
}
body.dark-mode .input-field::placeholder { color: #5a4a6a !important; }
body.dark-mode .input-field:focus { border-color: #f087a0 !important; }
body.dark-mode select.input-field option { background: #16102a; color: #ecddf5; }
body.dark-mode .form-group label { color: #8a7a9a !important; }

/* Buttons */
body.dark-mode .btn-primary {
  background: linear-gradient(135deg,#c0506a,#7030d0) !important;
}
body.dark-mode .btn-mint {
  background: #0a2018 !important;
  color: #5ecfa0 !important;
}
body.dark-mode .btn-mint:hover { background: #5ecfa0 !important; color: #0a2018 !important; }
body.dark-mode .btn-danger-sm {
  background: #280a0a !important;
  color: #f87171 !important;
  border-color: #7f1d1d !important;
}

/* Tabs */
body.dark-mode .tab-btn {
  background: #16102a !important;
  border-color: rgba(150,90,130,0.25) !important;
  color: #8a7a9a !important;
}
body.dark-mode .tab-btn.active,
body.dark-mode .tab-btn:hover {
  background: #3a1525 !important;
  color: #f087a0 !important;
  border-color: #d4607a !important;
}

/* Progress bars */
body.dark-mode .progress-bar-bg  { background: #2a1e35 !important; }

/* Toasts */
body.dark-mode .toast {
  background: #1e1830 !important;
  color: #ecddf5 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6) !important;
}
body.dark-mode .toast-success { border-left-color: #5ecfa0 !important; }
body.dark-mode .toast-error   { border-left-color: #f87171 !important; }
body.dark-mode .toast-info    { border-left-color: #b49bfa !important; }
body.dark-mode .toast-warning { border-left-color: #d4aa30 !important; }

/* Modals */
body.dark-mode .modal-overlay { background: rgba(0,0,0,0.8) !important; }
body.dark-mode .modal-box {
  background: #1e1830 !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7) !important;
}
body.dark-mode .reward-modal-title { color: #f087a0 !important; }
body.dark-mode .reward-modal-name  { color: #ecddf5 !important; }
body.dark-mode .reward-modal-goal  { color: #8a7a9a !important; }
body.dark-mode .reward-modal-diff  { color: #b49bfa !important; }

/* Page headers */
body.dark-mode .page-title    { color: #f087a0 !important; }
body.dark-mode .page-subtitle { color: #8a7a9a !important; }
body.dark-mode .empty-state   { color: #6a5a7a !important; }

/* Reward cards */
body.dark-mode .reward-card {
  background: #1a1428 !important;
  border-color: rgba(150,90,130,0.2) !important;
}
body.dark-mode .reward-card.earned {
  background: linear-gradient(135deg,#1e1030,#1a1428) !important;
  border-color: #3a1525 !important;
}
body.dark-mode .reward-name    { color: #ecddf5 !important; }
body.dark-mode .reward-date    { color: #6a5a7a !important; }
body.dark-mode .reward-for     { color: #6a5a7a !important; }
body.dark-mode .reward-name-sm { color: #ecddf5 !important; }
body.dark-mode .reward-category { background: #2a1e35 !important; color: #a890b8 !important; }
body.dark-mode .manage-reward-item { border-bottom-color: #2a1e35 !important; }

/* Difficulty badges */
body.dark-mode .diff-easy   { background: #0a2018 !important; color: #5ecfa0 !important; }
body.dark-mode .diff-medium { background: #221808 !important; color: #d4aa30 !important; }
body.dark-mode .diff-hard   { background: #280a18 !important; color: #f087a0 !important; }

/* Exam cards */
body.dark-mode .exam-card {
  background: #1a1428 !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.4) !important;
}
body.dark-mode .exam-card.urgency-ok       { border-left-color: #5ecfa0 !important; }
body.dark-mode .exam-card.urgency-soon     { border-left-color: #d4aa30 !important; }
body.dark-mode .exam-card.urgency-critical { border-left-color: #f87171 !important; }
body.dark-mode .exam-name       { color: #ecddf5 !important; }
body.dark-mode .exam-date-label { color: #6a5a7a !important; }
body.dark-mode .exam-desc       { color: #8a7a9a !important; }
body.dark-mode .exam-category   { background: #181230 !important; color: #b49bfa !important; }
body.dark-mode .exam-subject-item { color: #b09ac0 !important; }
body.dark-mode .status-days           { background: #2a1e35 !important; color: #a890b8 !important; }
body.dark-mode .status-days.urgency-soon     { background: #221808 !important; color: #d4aa30 !important; }
body.dark-mode .status-days.urgency-critical { background: #280a0a !important; color: #f87171 !important; }
body.dark-mode .status-past  { background: #0a2018 !important; color: #5ecfa0 !important; }
body.dark-mode .status-today { background: #280a0a !important; color: #f87171 !important; }

/* Garden scene */
body.dark-mode .garden-scene  { filter: brightness(0.8) saturate(0.85) !important; }
body.dark-mode .garden-sky    { background: linear-gradient(180deg,#06040f 0%,#100828 60%,#081008 100%) !important; }
body.dark-mode .garden-sun    { background: radial-gradient(circle,#ffe066 0%,#ffaa00 60%,transparent 100%) !important; box-shadow: 0 0 40px 10px rgba(255,200,0,0.2) !important; }
body.dark-mode .garden-ground { background: linear-gradient(180deg,#182210 0%,#0c1408 100%) !important; }
body.dark-mode .garden-dirt-strip { background: linear-gradient(90deg,#181008,#221408,#181008) !important; }
body.dark-mode .garden-meter  { background: rgba(12,8,22,0.9) !important; color: #a890b8 !important; }
body.dark-mode .garden-level-badge { background: rgba(12,8,22,0.85) !important; color: #f087a0 !important; }
body.dark-mode .garden-meter-fill { background: linear-gradient(90deg,#5ecfa0,#b49bfa) !important; }

/* Scrollbars */
body.dark-mode ::-webkit-scrollbar       { width:6px; height:6px; }
body.dark-mode ::-webkit-scrollbar-track { background: #0d0a18; }
body.dark-mode ::-webkit-scrollbar-thumb { background: #3a1525; border-radius:4px; }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #d4607a; }

/* Mobile sidebar overlay */
body.dark-mode .sidebar-overlay { background: rgba(0,0,0,0.75) !important; }

/* Next exam box */
body.dark-mode .next-exam-box { color: #b09ac0 !important; }

/* Timer */
body.dark-mode .timer-mode-btn {
  background: #16102a !important;
  color: #8a7a9a !important;
  border-color: rgba(150,90,130,0.25) !important;
}
body.dark-mode .timer-mode-btn.active {
  background: #3a1525 !important;
  color: #f087a0 !important;
}

/* Schedule */
body.dark-mode .day-tab         { background: #16102a !important; color: #8a7a9a !important; }
body.dark-mode .day-tab.active  { background: #3a1525 !important; color: #f087a0 !important; }

/* Checklist */
body.dark-mode .checklist-item  { background: #1a1428 !important; border-color: rgba(150,90,130,0.15) !important; }
body.dark-mode .task-text       { color: #b09ac0 !important; }

/* Goals */
body.dark-mode .goal-item       { background: #1a1428 !important; border-color: rgba(150,90,130,0.15) !important; }
body.dark-mode .goal-title      { color: #ecddf5 !important; }

/* Storage */
body.dark-mode .file-item       { background: #1a1428 !important; border-color: rgba(150,90,130,0.15) !important; color: #b09ac0 !important; }

/* Tests */
body.dark-mode .test-option     { background: #16102a !important; border-color: rgba(150,90,130,0.2) !important; color: #b09ac0 !important; }
body.dark-mode .test-option:hover,
body.dark-mode .test-option.selected { background: #3a1525 !important; border-color: #d4607a !important; color: #f087a0 !important; }
body.dark-mode .test-question   { color: #ecddf5 !important; }

/* Together / AI chat */
body.dark-mode .ai-bubble       { background: #2a1e35 !important; color: #ecddf5 !important; }

/* Games */
body.dark-mode .game-card,
body.dark-mode .game-area       { background: #1a1428 !important; color: #ecddf5 !important; border-color: rgba(150,90,130,0.2) !important; }

/* ?? Dark toggle button base styles (used in both modes) ?? */
.dark-toggle-btn {
  background: none;
  border: 2px solid rgba(255,180,210,0.4);
  border-radius: 50px;
  padding: .3rem .9rem;
  cursor: pointer;
  font-size: .88rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  color: #6b7280;
  transition: background .2s, color .2s, border-color .2s;
  white-space: nowrap;
  user-select: none;
}
.dark-toggle-btn:hover {
  background: #ffe4ed;
  border-color: #FF85A1;
  color: #FF85A1;
}
body.dark-mode .dark-toggle-btn {
  border-color: rgba(150,90,130,0.4) !important;
  color: #8a7a9a !important;
  background: none !important;
}
body.dark-mode .dark-toggle-btn:hover {
  background: #3a1525 !important;
  border-color: #d4607a !important;
  color: #f087a0 !important;
}

/* ?? Smooth transitions when toggling ?? */
body, .sidebar, .card, .topbar, .stat-card, .nav-link,
.input-field, .tab-btn, .toast, .modal-box,
.reward-card, .exam-card, .btn-primary, .btn-mint,
.progress-bar-bg, .qa-btn, .topbar-stat {
  transition: background-color .25s ease, color .25s ease,
              border-color .25s ease, box-shadow .25s ease !important;
}