/* ========================================
   DARK MODE SUPPORT FOR QUIZ
   ======================================== */

/* Manual dark mode override - controlled by JavaScript toggle */
html.dark-mode,
body.dark-mode {
  /* Quiz components inherit dark mode from body.dark-mode class */
  /* Variables already set on body.dark-mode in styles.css */
}

body.dark-mode .quiz-header,
html.dark-mode .quiz-header {
  background-color: #1f2937;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

body.dark-mode .progress-bar,
html.dark-mode .progress-bar {
  background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-400));
}

body.dark-mode .question-content,
html.dark-mode .question-content {
  background-color: #1f2937;
  border-color: #374151;
}

body.dark-mode .vignette,
html.dark-mode .vignette {
  background-color: #0f1419;
  border-left-color: var(--color-primary-500);
  color: #d1d5db;
}

body.dark-mode .question-text,
html.dark-mode .question-text {
  color: #e5e7eb;
}

body.dark-mode .question-meta,
html.dark-mode .question-meta {
  border-bottom-color: #374151;
}

body.dark-mode .meta-text,
html.dark-mode .meta-text {
  color: #9ca3af;
}

body.dark-mode .answer-choice,
html.dark-mode .answer-choice {
  background-color: #0f1419;
  border-color: #374151;
  color: #e5e7eb;
}

body.dark-mode .answer-choice:hover,
html.dark-mode .answer-choice:hover {
  background-color: #1f2937;
  border-color: #4b5563;
}

body.dark-mode .answer-choice.answer-selected,
html.dark-mode .answer-choice.answer-selected {
  background-color: #1e40af;
  border-color: var(--color-primary-400);
}

body.dark-mode .answer-choice.answer-correct,
html.dark-mode .answer-choice.answer-correct {
  background-color: #15803d;
  border-color: var(--color-success-500);
}

body.dark-mode .answer-choice.answer-incorrect,
html.dark-mode .answer-choice.answer-incorrect {
  background-color: #b91c1c;
  border-color: var(--color-error-500);
}

body.dark-mode .answer-choice.eliminated,
html.dark-mode .answer-choice.eliminated {
  background-color: #1f2937;
  border-color: #374151;
  opacity: 0.5;
}

body.dark-mode .nav-btn,
body.dark-mode .submit-btn {
  background-color: var(--color-primary-600);
  color: white;
  border-color: var(--color-primary-500);
}

body.dark-mode .nav-btn:hover:not(:disabled),
body.dark-mode .submit-btn:hover:not(:disabled) {
  background-color: var(--color-primary-500);
  box-shadow: 0 4px 8px rgba(56, 189, 248, 0.4);
}

body.dark-mode .nav-btn:disabled,
body.dark-mode .submit-btn:disabled {
  background-color: #374151;
  color: #9ca3af;
  border-color: #4b5563;
}

/* Dark mode for Skip Button (Issue #23) */
body.dark-mode .skip-btn {
  background: #374151;
  color: #e5e7eb;
  border-color: #4b5563;
}

body.dark-mode .skip-btn:hover {
  background: #4b5563;
  border-color: #6b7280;
  color: #f9fafb;
}

body.dark-mode .flag-btn {
  background-color: #1f2937;
  border-color: #374151;
  color: #d1d5db;
}

body.dark-mode .flag-btn:hover {
  background-color: #374151;
  border-color: #4b5563;
}

body.dark-mode .flag-btn.flagged {
  background-color: #dc2626;
  border-color: var(--color-error-500);
  color: white;
}

body.dark-mode .modal {
  background: rgba(0, 0, 0, 0.8);
}

body.dark-mode .modal-content {
  background-color: #1f2937;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

body.dark-mode .modal-header {
  border-bottom-color: #374151;
}

body.dark-mode .modal-header h2 {
  color: #e5e7eb;
}

body.dark-mode .modal-body {
  color: #d1d5db;
}

body.dark-mode .modal-footer {
  border-top-color: #374151;
}

body.dark-mode .question-menu {
  background-color: #1f2937;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.5);
}

body.dark-mode .question-menu-header {
  background-color: var(--color-primary-700);
  border-bottom-color: var(--color-primary-600);
}

body.dark-mode .question-menu-stats {
  background-color: #0f1419;
  border-bottom-color: #374151;
}

body.dark-mode .question-menu-stats span {
  background: #1f2937;
  color: #d1d5db;
}

body.dark-mode .grid-question-btn {
  background-color: #1f2937;
  border-color: #374151;
  color: #d1d5db;
}

body.dark-mode .grid-question-btn:hover {
  background-color: #374151;
  border-color: #4b5563;
}

body.dark-mode .grid-question-btn.current {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-500);
  color: white;
}

body.dark-mode .grid-question-btn.correct {
  background-color: #15803d;
  border-color: var(--color-success-500);
}

body.dark-mode .grid-question-btn.incorrect {
  background-color: #b91c1c;
  border-color: var(--color-error-500);
}

body.dark-mode .explanation-section {
  background-color: #0f1419;
  border-left-color: var(--color-primary-400);
}

body.dark-mode .explanation-section h3 {
  color: #e5e7eb;
}

body.dark-mode .explanation-text {
  color: #d1d5db;
}

/* Dark mode for Issue #4: TL;DR Section */
body.dark-mode .tldr-section {
  background: #78350f;
  border-color: #f59e0b;
}

body.dark-mode .tldr-header {
  color: #fef3c7;
}

body.dark-mode .tldr-content {
  color: #fde68a;
}

/* Dark mode for Issue #1: Explanation Boxes */
body.dark-mode .explanation-correct {
  background: #064e3b;
  border-color: var(--color-success-500);
}

body.dark-mode .explanation-correct .explanation-heading {
  color: #a7f3d0;
}

body.dark-mode .explanation-incorrect {
  background: #7f1d1d;
  border-color: var(--color-error-500);
}

body.dark-mode .explanation-incorrect .explanation-heading {
  color: #fca5a5;
}

body.dark-mode .explanation-content {
  color: #e5e7eb;
}

/* Dark mode for Issue #4: Toggle Details Button */
body.dark-mode .toggle-details-btn {
  background: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}

body.dark-mode .toggle-details-btn:hover {
  background: #4b5563;
  border-color: #6b7280;
}

/* Dark mode for Issue #24: Report Error Button */
body.dark-mode .report-error-btn {
  background: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}

body.dark-mode .report-error-btn:hover {
  background: #4b5563;
  border-color: #6b7280;
  color: #f9fafb;
}

/* Dark mode for Issue #5: Vignette and question visual hierarchy */
body.dark-mode .vignette {
  background: #0f1419;
  border-left-color: var(--color-primary-400);
  color: #e5e7eb;
}

body.dark-mode .question-text {
  color: #f9fafb;
  border-top-color: #374151;
  border-bottom-color: #374151;
}

body.dark-mode .feedback-banner.correct {
  background-color: #15803d;
  border-left-color: var(--color-success-500);
  color: white;
}

body.dark-mode .feedback-banner.incorrect {
  background-color: #b91c1c;
  border-left-color: var(--color-error-500);
  color: white;
}

body.dark-mode .toast {
  background-color: #1f2937;
  color: #e5e7eb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

body.dark-mode .toast-success {
  background-color: #15803d;
  color: white;
}

body.dark-mode .toast-error {
  background-color: #b91c1c;
  color: white;
}

body.dark-mode .toast-warning {
  background-color: #dc2626;
  color: white;
}

body.dark-mode .install-prompt {
  background-color: #1f2937;
  border-top-color: var(--color-primary-500);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.5);
}

body.dark-mode .install-prompt-text strong {
  color: #e5e7eb;
}

body.dark-mode .install-prompt-text p {
  color: #d1d5db;
}

body.dark-mode .install-btn-secondary {
  background-color: #374151;
  color: #d1d5db;
}

body.dark-mode .install-btn-secondary:hover {
  background-color: #4b5563;
}

body.dark-mode input[type="number"],
body.dark-mode input[type="text"],
body.dark-mode select {
  background-color: #0f1419;
  border-color: #374151;
  color: #e5e7eb;
}

body.dark-mode input[type="number"]:focus,
body.dark-mode input[type="text"]:focus,
body.dark-mode select:focus {
  border-color: var(--color-primary-400);
}

body.dark-mode input[type="checkbox"] {
  border-color: #374151;
}

body.dark-mode input[type="radio"] {
  border-color: #374151;
}

body.dark-mode .topic-item {
  background-color: #0f1419;
  border-color: #374151;
}

body.dark-mode .topic-name {
  color: #e5e7eb;
}

body.dark-mode .topic-stats {
  color: #d1d5db;
}

body.dark-mode .milestone-overlay {
  background: rgba(0, 0, 0, 0.9);
}

body.dark-mode .milestone-card {
  background-color: #1f2937;
  color: #e5e7eb;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
}

body.dark-mode .milestone-stats {
  color: #d1d5db;
}

body.dark-mode .highlight-toolbar {
  background-color: #1f2937;
  border-color: #374151;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

body.dark-mode .highlight-toolbar button {
  border-color: #374151;
}

body.dark-mode .timer-display {
  background-color: #1f2937;
  border-color: #374151;
  color: #e5e7eb;
}

/* Issue #8: Dark mode for timer caution state */
body.dark-mode .timer-display.timer-caution {
  background-color: #78350f;
  border-color: #f59e0b;
  color: #fde68a;
}

body.dark-mode .timer-display.timer-warning {
  background-color: #dc2626;
  border-color: #b91c1c;
  color: white;
}

body.dark-mode .welcome-screen {
  background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.15), rgba(44, 82, 130, 0.05));
}

body.dark-mode .welcome-content {
  color: #e5e7eb;
}

body.dark-mode .welcome-subtitle {
  color: #d1d5db;
}

body.dark-mode .stat-label {
  color: #9ca3af;
}

body.dark-mode .keyboard-shortcuts {
  background-color: #1f2937;
  border-color: #374151;
  color: #d1d5db;
}

body.dark-mode .mobile-gestures {
  background-color: #1f2937;
  border-color: #374151;
  color: #d1d5db;
}

/* Quick Navigation Menu - Dark Mode */
body.dark-mode .quick-nav-menu > div {
  background: #1f2937;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

body.dark-mode .quick-nav-header {
  border-bottom-color: #374151;
}

body.dark-mode .quick-nav-header span {
  color: #e5e7eb;
}

body.dark-mode .quick-nav-close {
  color: #9ca3af;
}

body.dark-mode .quick-nav-close:hover {
  background: #374151;
  color: #e5e7eb;
}

body.dark-mode .quick-nav-option {
  background: #1e3a5f;
  border-color: #2c5282;
  color: #bae6fd;
}

body.dark-mode .quick-nav-option:hover,
body.dark-mode .quick-nav-option:focus {
  background: #2c5282;
  border-color: #3182ce;
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.25);
}

/* Pull-to-Refresh Indicator - Dark Mode */
body.dark-mode .pull-indicator {
  background: linear-gradient(to bottom, rgba(56, 189, 248, 0.15), transparent);
}

body.dark-mode .pull-indicator.triggered {
  background: linear-gradient(to bottom, rgba(56, 161, 105, 0.15), transparent);
}

body.dark-mode .pull-icon {
  color: var(--color-primary-300);
}

body.dark-mode .pull-indicator.ready .pull-icon {
  color: var(--color-success-500);
}

body.dark-mode .pull-text {
  color: var(--color-primary-300);
}

body.dark-mode .pull-indicator.ready .pull-text {
  color: var(--color-success-500);
}

/* Tour System - Dark Mode */
body.dark-mode .tour-modal {
  background: #1f2937;
}

body.dark-mode .tour-header {
  background: #1e3a5f;
  border-bottom-color: #374151;
}

body.dark-mode .tour-step-indicator {
  color: var(--color-primary-300);
}

body.dark-mode .tour-close {
  color: #9ca3af;
}

body.dark-mode .tour-close:hover {
  background: #374151;
  color: #e5e7eb;
}

body.dark-mode .tour-content h2 {
  color: #e5e7eb;
}

body.dark-mode .tour-description {
  color: #d1d5db;
}

body.dark-mode .tour-description strong {
  color: #e5e7eb;
}

body.dark-mode .tour-footer {
  background: #0f1419;
  border-top-color: #374151;
}

body.dark-mode .tour-btn-secondary {
  background: #374151;
  color: #e5e7eb;
}

body.dark-mode .tour-btn-secondary:hover {
  background: #4b5563;
}

body.dark-mode .welcome-tour-btn {
  background: #374151;
  color: #e5e7eb;
  border-color: #4b5563;
}

body.dark-mode .welcome-tour-btn:hover {
  background: #4b5563;
  border-color: #9ca3af;
}

/* Dark mode for Issue #26: Previous Explanation Button */
body.dark-mode .prev-explanation-btn {
  background: #374151;
  border-color: #4b5563;
  color: var(--color-primary-300);
}

body.dark-mode .prev-explanation-btn:hover {
  background: #4b5563;
  border-color: #6b7280;
  color: var(--color-primary-200);
}

/* Dark mode for Issue #28: Reset Question Button */
body.dark-mode .reset-question-btn {
  background: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}

body.dark-mode .reset-question-btn:hover {
  background: #4b5563;
  border-color: var(--color-primary-400);
  color: var(--color-primary-200);
}

/* Dark mode for Issue #29: Show Answer Section */
body.dark-mode .show-answer-section {
  background: #78350f;
  border-color: #f59e0b;
}

body.dark-mode .show-answer-btn {
  background: #1f2937;
  border-color: #f59e0b;
  color: #fde68a;
}

body.dark-mode .show-answer-btn:hover {
  background: #78350f;
  border-color: #d97706;
  color: #fef3c7;
}

body.dark-mode .show-answer-hint {
  color: #fde68a;
}

/* Dark mode for answer peek animation */
body.dark-mode .answer-choice.answer-peek {
  background: #1e3a5f;
  border-color: var(--color-primary-400);
}

body.dark-mode .answer-choice.answer-peek .choice-letter {
  background: var(--color-primary-500);
  border-color: var(--color-primary-400);
}

/* ===========================================================================
   Dark mode for Issue #11: Keyboard Shortcuts Modal
   =========================================================================== */

body.dark-mode .shortcuts-section h3 {
  color: var(--color-primary-300);
  border-bottom-color: #374151;
}

body.dark-mode .shortcut-item {
  background: #1f2937;
}

body.dark-mode .shortcut-item:hover {
  background: #374151;
}

body.dark-mode .shortcut-item kbd {
  background: linear-gradient(180deg, #374151 0%, #1f2937 100%);
  border-color: #4b5563;
  color: #e5e7eb;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

body.dark-mode .shortcut-item span {
  color: #d1d5db;
}

/* Dark mode focus indicators */
body.dark-mode button:focus-visible,
body.dark-mode .nav-btn:focus-visible,
body.dark-mode .submit-btn:focus-visible,
body.dark-mode .skip-btn:focus-visible,
body.dark-mode .flag-btn:focus-visible,
body.dark-mode .settings-btn:focus-visible,
body.dark-mode .menu-btn:focus-visible,
body.dark-mode a:focus-visible {
  outline-color: var(--color-primary-400);
}

body.dark-mode .answer-choice:focus-within {
  outline-color: var(--color-primary-400);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15);
}

body.dark-mode input[type="radio"]:focus-visible {
  outline-color: var(--color-primary-400);
}

body.dark-mode .filter-btn:focus-visible,
body.dark-mode .grid-question-btn:focus-visible {
  outline-color: var(--color-primary-400);
}

body.dark-mode .grid-question-btn:focus-visible {
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2);
}

body.dark-mode *:focus-visible {
  outline-color: var(--color-primary-400);
}

/* ===========================================================================
   Dark mode for Issue #7: Search Functionality
   =========================================================================== */

body.dark-mode .search-container {
  background: #1f2937;
  border-bottom-color: #374151;
}

body.dark-mode .search-icon {
  color: #9ca3af;
}

body.dark-mode .search-input {
  background: #111827;
  border-color: #374151;
  color: #e5e7eb;
}

body.dark-mode .search-input:focus {
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

body.dark-mode .search-input::placeholder {
  color: #6b7280;
}

body.dark-mode .clear-search-btn {
  color: #9ca3af;
}

body.dark-mode .clear-search-btn:hover {
  background: #374151;
  color: #e5e7eb;
}

body.dark-mode .search-results-count {
  background: #1e3a5f;
  border-left-color: var(--color-primary-400);
  color: var(--color-primary-200);
}

body.dark-mode .search-results-count.no-results {
  background: #7f1d1d;
  border-left-color: var(--color-error-400);
  color: #fca5a5;
}

body.dark-mode .search-highlight {
  background: #78350f;
  color: #fde68a;
}

/* Issue #9: Enhanced session summary - dark mode */

/* Performance comparison */
body.dark-mode .summary-comparison {
  background: linear-gradient(135deg, #1e3a5f 0%, #1e3354 100%);
  border-left-color: var(--color-primary-400);
}

body.dark-mode .summary-comparison h3 {
  color: var(--color-primary-300);
}

body.dark-mode .comparison-item {
  background: #1f2937;
  border-left-width: 3px;
}

body.dark-mode .comparison-item.comparison-positive {
  border-left-color: var(--color-success-400);
}

body.dark-mode .comparison-item.comparison-negative {
  border-left-color: var(--color-error-400);
}

body.dark-mode .comparison-item.comparison-neutral {
  border-left-color: #6b7280;
}

body.dark-mode .comparison-text {
  color: #e5e7eb;
}

body.dark-mode .comparison-detail {
  color: #9ca3af;
}

/* Recommendations */
body.dark-mode .summary-recommendations {
  background: linear-gradient(135deg, #78350f 0%, #713f12 100%);
  border-left-color: #fbbf24;
}

body.dark-mode .summary-recommendations h3 {
  color: #fde68a;
}

body.dark-mode .recommendations-list li {
  color: #e5e7eb;
}

body.dark-mode .recommendations-list li::before {
  color: #fbbf24;
}

/* Slow questions */
body.dark-mode .summary-slow-questions {
  background: linear-gradient(135deg, #7f1d1d 0%, #771d1d 100%);
  border-left-color: var(--color-error-400);
}

body.dark-mode .summary-slow-questions h3 {
  color: #fca5a5;
}

body.dark-mode .slow-questions-intro {
  color: #d1d5db;
}

body.dark-mode .slow-question-item {
  background: #1f2937;
}

body.dark-mode .slow-question-number {
  background: #7f1d1d;
  color: #fca5a5;
}

body.dark-mode .slow-question-topic {
  color: #d1d5db;
}

body.dark-mode .slow-question-time {
  color: #f87171;
}

body.dark-mode .slow-questions-more {
  color: #9ca3af;
}

/* Issue #6: Notes feature - dark mode */

body.dark-mode .notes-section {
  background: linear-gradient(135deg, #78350f 0%, #713f12 100%);
  border-left-color: #fbbf24;
}

body.dark-mode .notes-header h4 {
  color: #fde68a;
}

body.dark-mode .note-date {
  color: #fcd34d;
}

body.dark-mode .note-textarea {
  background: #1f2937;
  border-color: #92400e;
  color: #e5e7eb;
}

body.dark-mode .note-textarea:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}

body.dark-mode .note-textarea::placeholder {
  color: #d97706;
  opacity: 0.7;
}

body.dark-mode .notes-char-count {
  color: #fcd34d;
}

body.dark-mode .notes-char-count span {
  color: #fde68a;
}

body.dark-mode .note-save-btn {
  background: #fbbf24;
  color: #78350f;
}

body.dark-mode .note-save-btn:hover {
  background: #fcd34d;
}

body.dark-mode .note-delete-btn {
  background: #7f1d1d;
  color: #fca5a5;
}

body.dark-mode .note-delete-btn:hover {
  background: #991b1b;
}

body.dark-mode .notes-formatting-hint {
  color: #fcd34d;
}

body.dark-mode .notes-formatting-hint strong {
  color: #fde68a;
}