/* themes.css - Centralized Theme System for All Pages */

/* ==================== LIGHT THEME (DEFAULT) ==================== */
:root,
html[data-theme="light"] {
  color-scheme: light;

  /* Backgrounds */
  --color-background: #fafbfc;
  --color-background-secondary: #f3f4f6;
  --color-surface: #ffffff;

  /* Borders */
  --color-border: #e5e7eb;
  --color-border-light: #f3f4f6;

  /* Text */
  --color-text-primary: #111827;
  --color-text-secondary: #6b7280;
  --color-text-tertiary: #9ca3af;
  /* Alias consumed by quiz.css — resolves to primary text at paint time */
  --color-text: var(--color-text-primary);

  /* Primary Colors */
  --color-primary: #6366f1;
  --color-primary-hover: #4f46e5;
  --color-primary-light: #eef2ff;
  --color-primary-dark: #4338ca;
  --color-accent: #6366f1;

  /* Semantic Colors */
  --color-success: #10b981;
  --color-success-hover: #059669;
  --color-success-light: #d1fae5;

  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-warning-light: #fef3c7;

  --color-error: #ef4444;
  --color-error-hover: #dc2626;
  --color-error-light: #fee2e2;

  /* Code text colour (consumed by markdown.css) */
  --color-code: #334155;

  /* Gradients */
  --gradient-accent: linear-gradient(
    135deg,
    #6366f1 0%,
    #8b5cf6 50%,
    #ec4899 100%
  );
  --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --gradient-warm: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  /* Secondary gradient used by result.css .nav-btn.secondary */
  --gradient-secondary: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);

  /* Shadows */
  --shadow-sm:
    0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.2);

  /* Effects */
  --blur-md: 12px;

  /* ── Glassmorphism system ──────────────────────────────────────────────────
     Centralised tokens for the semi-transparent, frosted-glass aesthetic.
     Consume with: background: var(--glass-bg); etc.
     ────────────────────────────────────────────────────────────────────── */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur: blur(12px);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  /* Light theme uses a more opaque glass surface */
  --glass-bg-light: rgba(255, 255, 255, 0.65);

  /* ── Interactive state tokens ─────────────────────────────────────────────
     Single source of truth for hover, focus-ring, and selected states.
     ────────────────────────────────────────────────────────────────────── */
  --color-focus-ring: rgba(99, 102, 241, 0.45);
  --color-hover-overlay: rgba(99, 102, 241, 0.06);
  --color-selected-bg: rgba(99, 102, 241, 0.12);

  /* ── Motion system ────────────────────────────────────────────────────────
     Replace hard-coded 0.3s ease with these tokens throughout page CSS.
     --ease-spring: bouncy confirmation feel (option selected, badge earned).
     --ease-out-expo: fast-out for reveals (card entrance, progress fill).
     ────────────────────────────────────────────────────────────────────── */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;

  /* Animation Colors (canvas particle system) */
  --anim-particle-1: rgba(99, 102, 241, 0.3);
  --anim-particle-2: rgba(139, 92, 246, 0.3);
  --anim-particle-3: rgba(236, 72, 153, 0.3);
  --anim-orb: rgba(99, 102, 241, 0.08);

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Typography */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --line-height-tight: 1.2;
  --line-height-base: 1.6;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-Index Hierarchy */
  --z-below: -1;
  --z-base: 1;
  --z-above: 10;
  --z-header: 1000;
  --z-overlay: 4000;
  --z-modal: 5000;
  --z-tooltip: 6000;
  --z-toast: 7000;
  --z-notification: 10000;
  --z-modal-top: 11000;

  /* Sidebar */
  --sidebar-collapsed-width: 64px;
  --sidebar-expanded-width: 240px;
}

/* ==================== DARK SLATE THEME ==================== */
html[data-theme="dark-slate"] {
  color-scheme: dark;

  /* Backgrounds */
  --color-background: #0f172a;
  --color-background-secondary: #1e293b;
  --color-surface: #1e293b;

  /* Borders */
  --color-border: #334155;
  --color-border-light: #334155;

  /* Text */
  --color-text-primary: #f8fafc;
  --color-text-secondary: #94a3b8;
  --color-text-tertiary: #64748b;
  --color-text: var(--color-text-primary);

  /* Primary Colors */
  --color-primary: #6366f1;
  --color-primary-hover: #4f46e5;
  --color-primary-light: rgba(99, 102, 241, 0.15);
  --color-primary-dark: #312e81;
  --color-accent: #818cf8;

  /* Semantic Colors */
  --color-success: #10b981;
  --color-success-hover: #059669;
  --color-success-light: rgba(16, 185, 129, 0.2);

  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-warning-light: rgba(245, 158, 11, 0.2);

  --color-error: #ef4444;
  --color-error-hover: #dc2626;
  --color-error-light: rgba(239, 68, 68, 0.2);

  --color-code: #e2e8f0;

  /* Gradients */
  --gradient-accent: linear-gradient(
    135deg,
    #6366f1 0%,
    #8b5cf6 50%,
    #ec4899 100%
  );
  --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --gradient-warm: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  --gradient-secondary: linear-gradient(135deg, #475569 0%, #334155 100%);

  /* Shadows — higher opacity for dark backgrounds */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.4);

  /* Effects */
  --blur-md: 12px;

  /* Glassmorphism — darker surfaces need subtler glass */
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(12px);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glass-bg-light: rgba(30, 41, 59, 0.8);

  /* Interactive state tokens */
  --color-focus-ring: rgba(99, 102, 241, 0.55);
  --color-hover-overlay: rgba(99, 102, 241, 0.09);
  --color-selected-bg: rgba(99, 102, 241, 0.18);

  /* Animation Colors */
  --anim-particle-1: rgba(99, 102, 241, 0.4);
  --anim-particle-2: rgba(139, 92, 246, 0.4);
  --anim-particle-3: rgba(236, 72, 153, 0.4);
  --anim-orb: rgba(99, 102, 241, 0.15);
}

/* ==================== DARK MODE (TRUE BLACK) ==================== */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Backgrounds */
  --color-background: #121212;
  --color-background-secondary: #1e1e1e;
  --color-surface: #1e1e1e;

  /* Borders */
  --color-border: #333333;
  --color-border-light: #333333;

  /* Text */
  --color-text-primary: #e0e0e0;
  --color-text-secondary: #a0a0a0;
  --color-text-tertiary: #707070;
  --color-text: var(--color-text-primary);

  /* Primary Colors */
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-primary-light: rgba(59, 130, 246, 0.15);
  --color-primary-dark: #1e40af;
  --color-accent: #60a5fa;

  /* Semantic Colors */
  --color-success: #22c55e;
  --color-success-hover: #16a34a;
  --color-success-light: rgba(34, 197, 94, 0.2);

  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-warning-light: rgba(245, 158, 11, 0.2);

  --color-error: #ef4444;
  --color-error-hover: #dc2626;
  --color-error-light: rgba(239, 68, 68, 0.2);

  --color-code: #e2e8f0;

  /* Gradients */
  --gradient-accent: linear-gradient(
    135deg,
    #3b82f6 0%,
    #8b5cf6 50%,
    #ec4899 100%
  );
  --gradient-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  --gradient-warm: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  --gradient-secondary: linear-gradient(135deg, #4b5563 0%, #374151 100%);

  /* Shadows */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.3);

  /* Effects */
  --blur-md: 12px;

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.07);
  --glass-blur: blur(12px);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --glass-bg-light: rgba(30, 30, 30, 0.85);

  /* Interactive state tokens */
  --color-focus-ring: rgba(59, 130, 246, 0.55);
  --color-hover-overlay: rgba(59, 130, 246, 0.08);
  --color-selected-bg: rgba(59, 130, 246, 0.16);

  /* Animation Colors */
  --anim-particle-1: rgba(59, 130, 246, 0.35);
  --anim-particle-2: rgba(139, 92, 246, 0.35);
  --anim-particle-3: rgba(236, 72, 153, 0.35);
  --anim-orb: rgba(59, 130, 246, 0.12);
}

/* ==================== COMMON ELEMENT STYLING ==================== */

/* Apply theme to body */
body {
  background-color: var(--color-background);
  color: var(--color-text-primary);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* Cards and surfaces */
.card,
.category-card,
.exam-card,
.stat-card,
.history-item,
.sidebar-card,
.question-card,
.review-card,
.level-progress-card,
.header,
#scoreHeader {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

/* Stats bar (quiz page) */
.stats-bar {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

/* Solution for showing the side bar at the right, and the rest normally rtl */
.side-menu nav {
  direction: ltr;
}

.side-menu nav > * {
  direction: rtl;
}

[data-theme="light"] .hamburger-icon {
  color: var(--color-text-primary);
}

[data-theme="dark-slate"] .hamburger-icon,
[data-theme="dark"] .hamburger-icon {
  color: var(--color-text-primary);
}

[data-theme="dark-slate"] #breadcrumb,
[data-theme="dark"] #breadcrumb {
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* Navigation buttons */
.nav-btn {
  background-color: var(--color-text-primary);
  color: white;
  border-color: var(--color-border);
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.nav-btn:hover:not(:disabled) {
  background-color: var(--color-text-secondary);
}

.nav-btn:disabled {
  background: var(--color-border);
  color: var(--color-text-tertiary);
}

/* Toggle switch */
.toggle-switch {
  background: var(--color-border);
}

.toggle-switch.active {
  background: var(--color-primary);
}

/* Hamburger button */
.hamburger-stats {
  background: var(--color-primary);
}

/* Option rows (quiz page) */
.option-row {
  background: var(--color-surface);
  border-color: var(--color-border);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

.option-row:hover {
  background: var(--color-primary-light);
}

.option-row.locked.correct {
  background: var(--color-success-light) !important;
  border-color: var(--color-success);
}

.option-row.locked.wrong {
  background: var(--color-error-light) !important;
  border-color: var(--color-error);
}

/* Essay textarea */
.essay-textarea {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.essay-textarea:focus {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

[data-theme="dark-slate"] .essay-textarea,
[data-theme="dark"] .essay-textarea {
  background: var(--color-background-secondary);
}

[data-theme="dark-slate"] .essay-textarea:focus,
[data-theme="dark"] .essay-textarea:focus {
  background: var(--color-surface);
}

/* Feedback messages */
.feedback.correct {
  background: var(--color-success-light);
  color: var(--color-success);
  border-left-color: var(--color-success);
}

.feedback.wrong {
  background: var(--color-error-light);
  color: var(--color-error);
  border-left-color: var(--color-error);
}

[data-theme="dark-slate"] .feedback.correct,
[data-theme="dark"] .feedback.correct {
  color: #6ee7b7;
}

[data-theme="dark-slate"] .feedback.wrong,
[data-theme="dark"] .feedback.wrong {
  color: #f87171;
}

/* Formal answer box */
.formal-answer {
  background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
  border-color: #0ea5e9;
}

[data-theme="dark-slate"] .formal-answer,
[data-theme="dark"] .formal-answer {
  background: linear-gradient(
    135deg,
    rgba(14, 165, 233, 0.2) 0%,
    rgba(14, 165, 233, 0.1) 100%
  );
}

[data-theme="dark-slate"] .formal-answer strong,
[data-theme="dark-slate"] .formal-answer-text,
[data-theme="dark"] .formal-answer strong,
[data-theme="dark"] .formal-answer-text {
  color: #7dd3fc;
}

/* Timer badge */
.timer-badge {
  background: linear-gradient(
    135deg,
    var(--color-primary-light) 0%,
    #fce7f3 100%
  );
  color: var(--color-primary);
  border-color: rgba(99, 102, 241, 0.1);
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

[data-theme="dark-slate"] .timer-badge,
[data-theme="dark"] .timer-badge {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border);
}

/* Answer boxes (result page) */
.your-ans {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

.correct-ans {
  background: var(--color-success-light);
  border-color: var(--color-success);
  color: var(--color-success);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

[data-theme="dark-slate"] .your-ans,
[data-theme="dark"] .your-ans {
  background: var(--color-background-secondary);
}

[data-theme="dark-slate"] .correct-ans,
[data-theme="dark"] .correct-ans {
  color: #6ee7b7;
}

/* Essay answer boxes */
.essay-answer-box {
  background: var(--color-background-secondary);
  border-color: var(--color-border);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

.essay-answer-box.user-essay {
  background: linear-gradient(
    135deg,
    #dbeafe 0%,
    var(--color-background-secondary) 100%
  );
  border-color: #3b82f6;
}

[data-theme="dark-slate"] .essay-answer-box.user-essay,
[data-theme="dark"] .essay-answer-box.user-essay {
  background: rgba(59, 130, 246, 0.15);
}

[data-theme="dark-slate"] .essay-answer-box.user-essay .essay-text,
[data-theme="dark"] .essay-answer-box.user-essay .essay-text {
  color: #93c5fd;
}

.essay-answer-box.formal-essay {
  background: linear-gradient(
    135deg,
    #d1fae5 0%,
    var(--color-background-secondary) 100%
  );
  border-color: #10b981;
}

[data-theme="dark-slate"] .essay-answer-box.formal-essay,
[data-theme="dark"] .essay-answer-box.formal-essay {
  background: rgba(16, 185, 129, 0.15);
}

[data-theme="dark-slate"] .essay-answer-box.formal-essay .essay-text,
[data-theme="dark"] .essay-answer-box.formal-essay .essay-text {
  color: #6ee7b7;
}

/* Explanation boxes */
.explanation {
  background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
  border-color: #3b82f6;
  color: #1e40af;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

[data-theme="dark-slate"] .explanation,
[data-theme="dark"] .explanation {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

[data-theme="dark-slate"] .explanation strong,
[data-theme="dark"] .explanation strong {
  color: #bfdbfe;
}

/* Review cards */
.review-card.correct {
  background: linear-gradient(
    to right,
    var(--color-success-light) 0%,
    var(--color-surface) 30%
  );
}

.review-card.wrong {
  background: linear-gradient(
    to right,
    var(--color-error-light) 0%,
    var(--color-surface) 30%
  );
}

.review-card.skipped {
  background: linear-gradient(
    to right,
    var(--color-warning-light) 0%,
    var(--color-surface) 30%
  );
}

.review-card.essay-card {
  background: linear-gradient(to right, #dbeafe 0%, var(--color-surface) 30%);
}

[data-theme="dark-slate"] .review-card.essay-card,
[data-theme="dark"] .review-card.essay-card {
  background: linear-gradient(
    to right,
    rgba(59, 130, 246, 0.15) 0%,
    var(--color-surface) 30%
  );
}

/* Badges section */
.new-badges-section {
  background: rgba(255, 255, 255, 0.5);
  border-color: var(--color-primary-light);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

[data-theme="dark-slate"] .new-badges-section,
[data-theme="dark"] .new-badges-section {
  background: rgba(99, 102, 241, 0.1);
  border-color: var(--color-border);
}

.badge-item {
  background: var(--color-surface);
  border-color: var(--color-border);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

[data-theme="dark-slate"] .badge-item,
[data-theme="dark"] .badge-item {
  background: var(--color-background-secondary);
}

/* Menu divider */
.menu-divider {
  background: var(--color-border);
}

/* Close menu button */
.close-menu {
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
}

.close-menu:hover {
  background: var(--color-error);
  color: white;
}

/* Answer comparison boxes (result page) */
.ans-comparison {
  background: var(--color-background-secondary);
  border-color: var(--color-border-light);
}

/* Question navigator items */
.menu-nav-item.current {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.menu-nav-item.answered {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

.menu-nav-item.correct {
  background: var(--color-success-light);
  border-color: var(--color-success);
  color: var(--color-success);
}

[data-theme="dark-slate"] .menu-nav-item.correct,
[data-theme="dark"] .menu-nav-item.correct {
  color: #6ee7b7;
}

.menu-nav-item.wrong {
  background: var(--color-error-light);
  border-color: var(--color-error);
  color: var(--color-error);
}

[data-theme="dark-slate"] .menu-nav-item.wrong,
[data-theme="dark"] .menu-nav-item.wrong {
  color: #f87171;
}

.menu-nav-item.unanswered {
  background: var(--color-background-secondary);
  border-color: var(--color-border);
}

/* Legend dots */
.legend-dot.current {
  background: var(--color-primary);
}

.legend-dot.answered {
  background: var(--color-text-tertiary);
}

.legend-dot.correct {
  background: var(--color-success);
}

.legend-dot.wrong {
  background: var(--color-error);
}

/* Menu scrollbar */
.menu-nav-items.list-view::-webkit-scrollbar-track {
  background: var(--color-background-secondary);
}

.menu-nav-items.list-view::-webkit-scrollbar-thumb {
  background: var(--color-border);
}

.menu-nav-items.list-view::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}

/* Side menu scrollbar */
.side-menu nav::-webkit-scrollbar {
  width: 6px;
}

.side-menu nav::-webkit-scrollbar-track {
  background: var(--color-background-secondary);
}

.side-menu nav::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

.side-menu nav::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}

/* Modal overlay and content */
.modal-overlay {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}

.modal-card {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.modal-card h2,
.modal-card h3 {
  color: var(--color-text-primary);
}

.modal-card p {
  color: var(--color-text-secondary);
}

/* Mode selection buttons */
.mode-btn {
  background: var(--color-background-secondary);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.mode-btn:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

.mode-btn .icon {
  filter: grayscale(0.2);
}

.mode-btn:hover .icon {
  filter: grayscale(0);
}

/* Close modal button */
.close-modal {
  background: none;
  border: none;
  color: var(--color-text-secondary);
}

.close-modal:hover {
  color: var(--color-text-primary);
}

/* Action buttons in menu */
.action-btn {
  color: var(--color-text-primary);
}

.action-btn.bookmarked {
  color: var(--color-warning);
}

.action-btn.flagged {
  color: var(--color-error);
}

/* Menu flag count */
.menu-flag-count {
  color: var(--color-warning);
}

/* Navigation button specific colors */
.nav-btn#prevBtn,
.nav-btn#nextBtn {
  background: var(--color-text-primary);
  color: white;
}

.nav-btn#prevBtn:hover:not(:disabled),
.nav-btn#nextBtn:hover:not(:disabled) {
  background: var(--color-text-secondary);
}

[data-theme="dark-slate"] .nav-btn#prevBtn,
[data-theme="dark-slate"] .nav-btn#nextBtn,
[data-theme="dark"] .nav-btn#prevBtn,
[data-theme="dark"] .nav-btn#nextBtn {
  background: var(--color-primary);
}

[data-theme="dark-slate"] .nav-btn#prevBtn:hover:not(:disabled),
[data-theme="dark-slate"] .nav-btn#nextBtn:hover:not(:disabled),
[data-theme="dark"] .nav-btn#prevBtn:hover:not(:disabled),
[data-theme="dark"] .nav-btn#nextBtn:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

/* Accessibility */
*:focus-visible {
  outline: 3px solid var(--color-focus-ring, var(--color-primary));
  outline-offset: 3px;
  border-radius: 8px;
}

::selection {
  background: var(--color-selected-bg, var(--color-primary-light));
  color: var(--color-primary);
}
/* Fix theme button text color for dark themes */
[data-theme="dark-slate"] .theme-btn-label,
[data-theme="dark"] .theme-btn-label {
  color: var(--color-text-primary); /* Makes the text white */
  font-weight: 600; /* Makes it look slightly 'bigger' and bolder */
  font-size: 14px; /* Adjust this to make it even bigger if needed */
}
/* Fix for Light Theme: Force all labels to be dark */
[data-theme="light"] .theme-selector-btn .theme-btn-label {
  color: var(--color-text-primary) !important; /* Dark color for light mode */
  font-weight: 600;
}

/* Fix for Dark Themes: Force all labels to be white and bigger */
[data-theme="dark-slate"] .theme-selector-btn .theme-btn-label,
[data-theme="dark"] .theme-selector-btn .theme-btn-label {
  color: var(--color-text-primary) !important; /* White color for dark modes */
  font-weight: 700;
  font-size: 14px;
}
/* ============================================================================
LIGHT THEME
============================================================================ */
[data-theme="light"] .header-badge {
  background: var(--glass-bg-light);
  color: var(--color-text-primary);
}

[data-theme="light"] .header-badge .user-name {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* For the animation */
[data-theme="light"] .header-badge::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(153, 204, 255, 0.6) 50%,
    transparent 100%
  );
}

/* ============================================================================
DARK THEME
============================================================================ */
[data-theme="dark"] .header-badge {
  background: var(--glass-bg-light);
  color: var(--color-text-primary);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .header-badge .user-name {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* ============================================================================
DARK SLATE THEME
============================================================================ */
[data-theme="dark-slate"] .header-badge {
  background: var(--glass-bg-light);
  color: var(--color-text-primary);
}

[data-theme="dark-slate"] .header-badge .user-name {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* For the animation */
[data-theme="dark-slate"] .header-badge::after {
  background: linear-gradient(
    90deg,
    transparent 0%,

    /* Pink animation */ rgba(255, 192, 203, 0.6) 50%,
    transparent 100%
  );
}

/* ============================================================================
   CREATE QUIZ PAGE - Theme-Specific Styles
   ============================================================================ */

/* ==================== CREATE QUIZ: LIGHT THEME ==================== */
[data-theme="light"] {
  /* Create Quiz specific variables */
  --quiz-creator-bg: var(--color-background);
  --quiz-card-bg: var(--color-surface);
  --quiz-card-border: var(--color-border);
  --quiz-input-bg: var(--color-background);
  --quiz-option-bg: var(--color-background);
  --quiz-option-correct-bg: var(--color-success-light);
  --quiz-option-correct-border: var(--color-success);
  --quiz-empty-icon-opacity: 0.4;
}

/* ==================== CREATE QUIZ: DARK SLATE THEME ==================== */
[data-theme="dark-slate"] {
  /* Create Quiz specific variables */
  --quiz-creator-bg: var(--color-background);
  --quiz-card-bg: var(--color-surface);
  --quiz-card-border: var(--color-border);
  --quiz-input-bg: var(--color-background);
  --quiz-option-bg: var(--color-background);
  --quiz-option-correct-bg: rgba(16, 185, 129, 0.15);
  --quiz-option-correct-border: var(--color-success);
  --quiz-empty-icon-opacity: 0.3;
}

/* ==================== CREATE QUIZ: DARK (TRUE BLACK) THEME ==================== */
[data-theme="dark"] {
  /* Create Quiz specific variables */
  --quiz-creator-bg: var(--color-background);
  --quiz-card-bg: var(--color-surface);
  --quiz-card-border: var(--color-border);
  --quiz-input-bg: var(--color-background-secondary);
  --quiz-option-bg: var(--color-background-secondary);
  --quiz-option-correct-bg: rgba(34, 197, 94, 0.15);
  --quiz-option-correct-border: var(--color-success);
  --quiz-empty-icon-opacity: 0.25;
}

/* ==================== APPLY CREATE QUIZ THEME VARIABLES ==================== */

.quiz-creator {
  background-color: var(--quiz-creator-bg);
}

.quiz-metadata,
.questions-section,
.action-bar {
  background-color: var(--quiz-card-bg);
  border-color: var(--quiz-card-border);
}

.question-card {
  background-color: var(--quiz-card-bg);
  border-color: var(--quiz-card-border);
}

.form-group input,
.form-group textarea {
  background-color: var(--quiz-input-bg);
  border-color: var(--quiz-card-border);
  color: var(--color-text-primary);
}

.option-item {
  background-color: var(--quiz-option-bg);
  border-color: var(--quiz-card-border);
}

.option-item.correct {
  background-color: var(--quiz-option-correct-bg);
  border-color: var(--quiz-option-correct-border);
}

.option-input {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
}

.empty-icon {
  opacity: var(--quiz-empty-icon-opacity);
}

.preview-question {
  background-color: var(--quiz-option-bg);
}

.preview-options li {
  background-color: var(--quiz-option-bg);
  border-color: var(--quiz-card-border);
}

.preview-options li.correct {
  background-color: var(--quiz-option-correct-bg);
  border-color: var(--quiz-option-correct-border);
}

/* ==================== MENU ITEM ACTIVE STATE ==================== */
[data-theme="dark-slate"] .menu-item.active {
  background: rgba(99, 102, 241, 0.2);
  color: #818cf8;
}

[data-theme="dark"] .menu-item.active {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

/* ============================================================================
#Subjects-text — Contextual Section Label
============================================================================ */

[data-theme="dark"] #Subjects-text,
[data-theme="dark-slate"] #Subjects-text {
  background: rgba(99, 102, 241, 0.12);
  box-shadow:
    0 4px 20px rgba(99, 102, 241, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}