/* ============================================================
   darkMode.css — All dark theme overrides for MathsMastery
   Triggered by html[data-theme="dark"] set by darkMode.js
   ============================================================ */

/* ----------------------------------------------------------
   CSS variable overrides (app pages use these via common.css)
   ---------------------------------------------------------- */
html[data-theme="dark"] {
    --color-primary: #60a5fa;
    --color-primary-hover: #93c5fd;
    --color-success: #34d399;
    --color-error: #f87171;
    --color-bg: #111827;
    --color-surface: #1f2937;
    --color-text: #f9fafb;
    --color-text-muted: #9ca3af;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.5);
    /* Chalk tokens align with color tokens in dark mode */
    --chalk-bg: #111827;
    --chalk-surface: #1f2937;
    --chalk-heading: #e8e4da;
    --chalk-body: #9ca3af;
}

/* ----------------------------------------------------------
   Base elements
   ---------------------------------------------------------- */
html[data-theme="dark"] body {
    background-color: var(--chalk-bg);
    color: var(--color-text);
}

/* ----------------------------------------------------------
   Tailwind utility class overrides (landing page + app pages)
   ---------------------------------------------------------- */
html[data-theme="dark"] .bg-gray-100 { background-color: #111827; }
html[data-theme="dark"] .bg-white    { background-color: #1f2937; }
html[data-theme="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.15); }

html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-700 { color: #f9fafb; }
html[data-theme="dark"] .text-gray-600 { color: #d1d5db; }
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .text-gray-300 { color: #9ca3af; }

html[data-theme="dark"] .text-blue-800,
html[data-theme="dark"] .text-blue-700 { color: #93c5fd; }
html[data-theme="dark"] .text-blue-600 { color: #60a5fa; }

html[data-theme="dark"] .text-yellow-500 { color: #fcd34d; }
html[data-theme="dark"] .text-green-500  { color: #34d399; }
html[data-theme="dark"] .text-orange-600 { color: #fb923c; }

html[data-theme="dark"] .border-gray-200 { border-color: #374151; }

/* Landing page card hover shadow */
html[data-theme="dark"] .app-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* Canvas element in trigfacts (quadrant diagram) */
html[data-theme="dark"] canvas.bg-white {
    background-color: #1f2937 !important;
}
html[data-theme="dark"] .border-gray-200 {
    border-color: #374151;
}

/* ----------------------------------------------------------
   Site header
   ---------------------------------------------------------- */
html[data-theme="dark"] .site-header {
    background: #1f2937;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .site-header-brand {
    color: #f9fafb;
}

html[data-theme="dark"] .site-header-brand:hover {
    color: #ffffff;
}

html[data-theme="dark"] .site-nav-link.active {
    box-shadow: 0 0 0 2px #1f2937, 0 0 0 4px rgba(255, 255, 255, 0.3);
}

/* ----------------------------------------------------------
   common.css component overrides
   ---------------------------------------------------------- */
html[data-theme="dark"] .card {
    background-color: var(--chalk-surface);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* common.css hardcoded color overrides */
html[data-theme="dark"] .question-text {
    color: var(--chalk-heading);
}

html[data-theme="dark"] .level-section-title {
    color: var(--chalk-heading);
}

html[data-theme="dark"] .btn-secondary {
    color: #d1d5db;
    background: #374151;
    border-color: #4b5563;
}

html[data-theme="dark"] .btn-secondary:hover {
    background: #4b5563;
}

html[data-theme="dark"] .level-btn {
    color: #d1d5db;
    background: #1f2937;
    border-color: #374151;
}

html[data-theme="dark"] .level-btn:hover {
    background: #263548;
    border-color: #60a5fa;
}

/* Quit / secondary text buttons in game screen */
html[data-theme="dark"] #quit-btn,
html[data-theme="dark"] #play-again-btn {
    color: #9ca3af;
}
html[data-theme="dark"] #quit-btn:hover,
html[data-theme="dark"] #play-again-btn:hover {
    color: #d1d5db;
}

/* ----------------------------------------------------------
   Rating gradient overrides
   ---------------------------------------------------------- */
html[data-theme="dark"] .rating-none {
    background: #1f2937;
    color: #6b7280;
    border-color: #374151;
}

html[data-theme="dark"] .rating-beginner {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: #cbd5e1;
    border-color: #475569;
}

html[data-theme="dark"] .rating-developing {
    background: linear-gradient(135deg, #052e16, #14532d);
    color: #86efac;
    border-color: #166534;
}

html[data-theme="dark"] .rating-expert {
    background: linear-gradient(135deg, #022c22, #064e3b);
    color: #6ee7b7;
    border-color: #065f46;
}

html[data-theme="dark"] .rating-mastery {
    background: linear-gradient(135deg, #1c1500, #3b2800);
    color: #fcd34d;
    border-color: #92400e;
}

html[data-theme="dark"] .rating-queen,
html[data-theme="dark"] .rating-true-mastery {
    background: linear-gradient(135deg, #2d0a1e, #4c0d2e);
    color: #f9a8d4;
    border-color: #9d174d;
}

/* ----------------------------------------------------------
   Trigfacts: diagram container + MathQuill input
   ---------------------------------------------------------- */
html[data-theme="dark"] .diagram-container {
    background: linear-gradient(145deg, #1f2937, #111827);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .mathquill-input,
html[data-theme="dark"] .mathquill-editable {
    background-color: #374151;
    color: #f9fafb;
}

/* MathQuill inner elements */
html[data-theme="dark"] .mq-editable-field {
    background-color: #374151;
    color: #f9fafb;
}

/* ----------------------------------------------------------
   Mathsfacts: inline input, fraction, FDP table
   ---------------------------------------------------------- */
html[data-theme="dark"] .inline-input {
    border-bottom-color: #60a5fa;
    color: #f9fafb;
    background: transparent;
}

html[data-theme="dark"] .fraction-numerator {
    border-bottom-color: #9ca3af;
}

html[data-theme="dark"] .fdp-table th {
    color: #f9fafb;
    background-color: #374151;
}

html[data-theme="dark"] .fdp-table td {
    border-color: #374151;
}

/* ----------------------------------------------------------
   Progress modal (progressStyles.css overrides)
   ---------------------------------------------------------- */
html[data-theme="dark"] .progress-modal-content {
    background: #1f2937;
    color: #f9fafb;
}

html[data-theme="dark"] .progress-tabs {
    background: #111827;
    border-bottom-color: #374151;
}

html[data-theme="dark"] .tab-btn {
    color: #9ca3af;
}

html[data-theme="dark"] .tab-btn.active {
    color: #60a5fa;
    border-bottom-color: #60a5fa;
}

html[data-theme="dark"] .tab-btn:hover {
    color: #d1d5db;
}

html[data-theme="dark"] .summary-card {
    background: linear-gradient(135deg, #1f2937, #111827);
    border-color: #374151;
}

html[data-theme="dark"] .card-label { color: #9ca3af; }
html[data-theme="dark"] .card-value { color: #f9fafb; }

html[data-theme="dark"] .recent-activity {
    background: #111827;
}

html[data-theme="dark"] .session-item {
    background: #1f2937;
    border-color: #374151;
}

html[data-theme="dark"] .session-date { color: #9ca3af; }

html[data-theme="dark"] .chart-container {
    background: #1f2937;
}

html[data-theme="dark"] .drill-sidebar {
    background: #111827;
    border-color: #374151;
}

html[data-theme="dark"] .drill-card {
    background: #1f2937;
    border-color: #374151;
    color: #f9fafb;
}

html[data-theme="dark"] .drill-card:hover {
    border-color: #60a5fa;
    background: #263548;
}

html[data-theme="dark"] .drill-card h4 { color: #f9fafb; }
html[data-theme="dark"] .drill-card p  { color: #9ca3af; }

html[data-theme="dark"] .drill-selector-search input {
    background: #1f2937;
    border-color: #374151;
    color: #f9fafb;
}

html[data-theme="dark"] .filter-btn {
    background: #1f2937;
    border-color: #374151;
    color: #9ca3af;
}

html[data-theme="dark"] .filter-btn.active {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: white;
}

html[data-theme="dark"] .stat-item {
    background: linear-gradient(135deg, #1f2937, #111827);
}

html[data-theme="dark"] .stat-label { color: #9ca3af; }
html[data-theme="dark"] .stat-value { color: #f9fafb; }

html[data-theme="dark"] .history-table {
    background: #1f2937;
}

html[data-theme="dark"] #history-table thead {
    background: #111827;
}

html[data-theme="dark"] #history-table th {
    color: #9ca3af;
    border-bottom-color: #374151;
}

html[data-theme="dark"] #history-table td {
    color: #d1d5db;
    border-bottom-color: #374151;
}

html[data-theme="dark"] #history-table tbody tr:hover {
    background: #263548;
}

html[data-theme="dark"] .btn-secondary {
    background: #374151;
    color: #d1d5db;
    border-color: #4b5563;
}

html[data-theme="dark"] .btn-secondary:hover {
    background: #4b5563;
    color: #f9fafb;
}

html[data-theme="dark"] .btn-danger {
    background: #450a0a;
    color: #fca5a5;
    border-color: #7f1d1d;
}

html[data-theme="dark"] .btn-danger:hover {
    background: #7f1d1d;
    color: #fecaca;
}

html[data-theme="dark"] .share-dialog-content {
    background: #1f2937;
}

html[data-theme="dark"] .share-url-container {
    background: #111827;
    border-color: #374151;
}

html[data-theme="dark"] .share-url-container input {
    background: transparent;
    color: #d1d5db;
}

html[data-theme="dark"] .copy-url-btn {
    background: #374151;
    color: #d1d5db;
}

/* Mistakes table */
html[data-theme="dark"] .mistakes-table {
    background: #1f2937;
}

html[data-theme="dark"] .mistakes-table thead {
    background: #111827;
}

html[data-theme="dark"] .mistakes-table th {
    color: #9ca3af;
    border-bottom-color: #374151;
}

html[data-theme="dark"] .mistakes-table td {
    color: #d1d5db;
    border-bottom-color: #374151;
}

html[data-theme="dark"] .mistakes-table tbody tr:hover {
    background: #263548;
}

html[data-theme="dark"] .delete-mistake-btn {
    background: #450a0a;
    color: #fca5a5;
}

html[data-theme="dark"] .delete-mistake-btn:hover {
    background: #7f1d1d;
    color: #fecaca;
}

html[data-theme="dark"] #clear-mistakes {
    background: #450a0a;
    color: #fca5a5;
}

html[data-theme="dark"] #clear-mistakes:hover {
    background: #7f1d1d;
}

/* Tooltip */
html[data-theme="dark"] .tooltip-content {
    background-color: #374151;
    color: white;
}

html[data-theme="dark"] .tooltip-content::after {
    border-color: #374151 transparent transparent transparent;
}

/* Progress section label text */
html[data-theme="dark"] .section-label,
html[data-theme="dark"] .mastery-level-label,
html[data-theme="dark"] .drill-name { color: #f9fafb; }

html[data-theme="dark"] .close-btn {
    color: rgba(255, 255, 255, 0.8);
}

html[data-theme="dark"] .close-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

/* Rating info box on success screen (bg-blue-100 text-blue-800) already covered above */

/* ----------------------------------------------------------
   Progress modal: missing structural overrides
   ---------------------------------------------------------- */

/* Progress actions footer bar */
html[data-theme="dark"] .progress-actions {
    background: #111827;
    border-top-color: #374151;
}

/* Search bar in Improvement tab (#drill-search is inside .search-filter, not .drill-selector-search) */
html[data-theme="dark"] #drill-search {
    background: #1f2937;
    border-color: #374151;
    color: #f9fafb;
}
html[data-theme="dark"] #drill-search::placeholder {
    color: #6b7280;
}

/* Drill stats panel (background: white in progressStyles.css) */
html[data-theme="dark"] .drill-stats {
    background: #1f2937;
    border-color: #374151;
}
html[data-theme="dark"] .stats-header {
    border-bottom-color: #374151;
}
html[data-theme="dark"] .stats-header h4 {
    color: #f9fafb;
}

/* Progress modal section headings (hardcoded dark colours in progressStyles.css) */
html[data-theme="dark"] .sidebar-header h3,
html[data-theme="dark"] .selector-header h3,
html[data-theme="dark"] .recent-activity h3 {
    color: #f9fafb;
}
html[data-theme="dark"] .sidebar-header {
    border-bottom-color: #374151;
}
html[data-theme="dark"] .session-drill {
    color: #f9fafb;
}

/* ----------------------------------------------------------
   Mistakes table: complete overrides
   ---------------------------------------------------------- */

/* Table outer border */
html[data-theme="dark"] .mistakes-table {
    border-color: #374151;
}

/* th has its own gradient background in progressStyles.css — override it */
html[data-theme="dark"] .mistakes-table th {
    background: #111827;
}

/* Math display containers rendered by MathQuill in the mistakes tab */
html[data-theme="dark"] .math-display {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}
html[data-theme="dark"] .math-display .mq-math-mode,
html[data-theme="dark"] .math-display .mq-root-block {
    color: #f9fafb;
}

/* ----------------------------------------------------------
   Settings screen: level section titles, skill path, mastery bars
   ---------------------------------------------------------- */

/* Level section titles (hardcoded color: #374151 in common.css) */
html[data-theme="dark"] .level-section-title {
    color: #f9fafb;
    border-bottom-color: #374151;
}

/* Skill path section title pill (background: white in common.css) */
html[data-theme="dark"] .skill-path-section-title {
    background: #1f2937;
    color: #d1d5db;
    border-color: #374151;
}

/* Unrated skill path nodes & level buttons inherit color: #6b7280 from .rating-none,
   making level names appear as hard-to-read grey — restore a readable colour. */
html[data-theme="dark"] .level-btn.rating-none,
html[data-theme="dark"] .skill-path-node.rating-none {
    color: #d1d5db;
}

/* "Not attempted" / best time subtext in skill path nodes */
html[data-theme="dark"] .skill-path-time {
    color: #9ca3af;
}

/* Mastery progress bar track (light grey in light mode) */
html[data-theme="dark"] .mastery-progress-bar {
    background-color: #374151;
}

/* Mastery progress stats counter text */
html[data-theme="dark"] .mastery-progress-stats {
    color: #9ca3af;
}

/* === Success screen redesign — dark mode === */
html[data-theme="dark"] .success-rating-name { color: #f9fafb; }
html[data-theme="dark"] .success-level-name { color: #9ca3af; }
html[data-theme="dark"] .success-time-card { background: rgba(16,185,129,0.08); }
html[data-theme="dark"] .success-new-best { background: var(--color-surface); border-color: rgba(255,255,255,0.1); color: #d1d5db; }
html[data-theme="dark"] .success-prev-time { color: #9ca3af; }
html[data-theme="dark"] .success-timeline-node { background: #374151; border-color: #4b5563; }
html[data-theme="dark"] .success-timeline-item.achieved .success-timeline-node { background: var(--color-surface); border-color: #10b981; }
html[data-theme="dark"] .success-timeline-item.current .success-timeline-node { background: var(--color-surface); border-color: #10b981; }
html[data-theme="dark"] .success-timeline-connector { background: #4b5563; }
html[data-theme="dark"] .success-timeline-connector.achieved { background: #10b981; }
html[data-theme="dark"] .success-timeline-label { color: #6b7280; }
html[data-theme="dark"] .success-timeline-item.achieved .success-timeline-label,
html[data-theme="dark"] .success-timeline-item.current .success-timeline-label { color: #9ca3af; }
html[data-theme="dark"] .success-timeline-item.current .success-timeline-label { color: #f9fafb; }
html[data-theme="dark"] .success-rating-hint { background: rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.2); color: #d1d5db; }
html[data-theme="dark"] .success-back-btn { color: #9ca3af; }
html[data-theme="dark"] .success-back-btn:hover { color: #d1d5db; }
html[data-theme="dark"] .success-icon-circle.rating-beginner   { background: rgba(148,163,184,0.15); }
html[data-theme="dark"] .success-icon-circle.rating-developing { background: rgba(96,165,250,0.15); }
html[data-theme="dark"] .success-icon-circle.rating-expert     { background: rgba(16,185,129,0.15); }
html[data-theme="dark"] .success-icon-circle.rating-mastery    { background: rgba(245,158,11,0.15); }
html[data-theme="dark"] .success-icon-circle.rating-queen      { background: rgba(236,72,153,0.15); }