/**
 * Course Design System - Dark Mode
 * =================================
 * Dark theme styles for all courses
 */

/* ═══════════════════════════════════════════════════
   DARK MODE VARIABLES
   ═══════════════════════════════════════════════════ */
html[data-theme="dark"] body[data-course-shell] {
    /* Page Background */
    --bg-page: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    --bg-card: rgba(30, 41, 59, 0.8);
    --bg-card-hover: rgba(51, 65, 85, 0.8);

    /* Borders */
    --border-card: rgba(71, 85, 105, 0.5);
    --border-input: rgba(71, 85, 105, 0.6);

    /* Text Colors */
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-light: #64748b;

    /* Grayscale adjustments */
    --gray-50: #1e293b;
    --gray-100: #334155;
    --gray-200: #475569;
    --gray-300: #64748b;
    --gray-400: #94a3b8;
    --gray-500: #cbd5e1;
    --gray-600: #e2e8f0;
    --gray-700: #f1f5f9;
    --gray-800: #f8fafc;
}

/* ═══════════════════════════════════════════════════
   CONTAINER OVERRIDES
   ═══════════════════════════════════════════════════ */
html[data-theme="dark"] body[data-course-shell] .container {
    background: var(--bg-card);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--border-card);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(71, 85, 105, 0.3);
}

/* ═══════════════════════════════════════════════════
   HEADER OVERRIDES
   ═══════════════════════════════════════════════════ */
html[data-theme="dark"] body[data-course-shell] .header {
    background: linear-gradient(135deg,
            var(--primary-dark) 0%,
            var(--secondary-dark) 50%,
            var(--accent-dark) 100%);
}

html[data-theme="dark"] body[data-course-shell] .header h1,
html[data-theme="dark"] body[data-course-shell] .header p {
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════
   SECTION TITLE OVERRIDES
   ═══════════════════════════════════════════════════ */
html[data-theme="dark"] body[data-course-shell] .section-title {
    color: var(--text-primary);
}

html[data-theme="dark"] body[data-course-shell] .section-title::before {
    background: linear-gradient(180deg, var(--primary-light), var(--secondary-light));
}

html[data-theme="dark"] body[data-course-shell] .section-title--line::after {
    background: linear-gradient(to right, rgba(var(--primary-rgb), 0.5), transparent);
}

/* ═══════════════════════════════════════════════════
   CARD OVERRIDES
   ═══════════════════════════════════════════════════ */
html[data-theme="dark"] body[data-course-shell] .card,
html[data-theme="dark"] body[data-course-shell] .icon-card {
    background: var(--bg-card);
    border-color: var(--border-card);
}

html[data-theme="dark"] body[data-course-shell] .card:hover,
html[data-theme="dark"] body[data-course-shell] .icon-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--primary-light);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(var(--primary-rgb), 0.2);
}

html[data-theme="dark"] body[data-course-shell] .icon-card h3 {
    color: var(--text-primary);
}

html[data-theme="dark"] body[data-course-shell] .icon-card p {
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════
   BUTTON OVERRIDES
   ═══════════════════════════════════════════════════ */
html[data-theme="dark"] body[data-course-shell] .btn-secondary {
    background: rgba(51, 65, 85, 0.8);
    border-color: var(--border-card);
    color: var(--text-secondary);
}

html[data-theme="dark"] body[data-course-shell] .btn-secondary:hover {
    background: rgba(71, 85, 105, 0.8);
    border-color: var(--primary-light);
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════
   HIGHLIGHT BOX OVERRIDES
   ═══════════════════════════════════════════════════ */
html[data-theme="dark"] body[data-course-shell] .highlight-box {
    background: linear-gradient(135deg,
            rgba(30, 58, 138, 0.3) 0%,
            rgba(30, 41, 59, 0.5) 100%);
}

html[data-theme="dark"] body[data-course-shell] .highlight-box.warning {
    background: linear-gradient(135deg,
            rgba(180, 83, 9, 0.2) 0%,
            rgba(30, 41, 59, 0.5) 100%);
}

html[data-theme="dark"] body[data-course-shell] .highlight-box.success {
    background: linear-gradient(135deg,
            rgba(22, 101, 52, 0.2) 0%,
            rgba(30, 41, 59, 0.5) 100%);
}

html[data-theme="dark"] body[data-course-shell] .highlight-box.danger {
    background: linear-gradient(135deg,
            rgba(153, 27, 27, 0.2) 0%,
            rgba(30, 41, 59, 0.5) 100%);
}

html[data-theme="dark"] body[data-course-shell] .highlight-box.info {
    background: linear-gradient(135deg,
            rgba(14, 116, 144, 0.2) 0%,
            rgba(30, 41, 59, 0.5) 100%);
}

/* ═══════════════════════════════════════════════════
   QUIZ OVERRIDES
   ═══════════════════════════════════════════════════ */
html[data-theme="dark"] body[data-course-shell] .quiz-option {
    background: rgba(51, 65, 85, 0.5);
    border-color: var(--border-card);
}

html[data-theme="dark"] body[data-course-shell] .quiz-option:hover:not(.disabled) {
    background: rgba(71, 85, 105, 0.6);
    border-color: var(--primary-light);
}

html[data-theme="dark"] body[data-course-shell] .quiz-option .option-letter {
    background: rgba(71, 85, 105, 0.8);
    color: var(--text-muted);
}

html[data-theme="dark"] body[data-course-shell] .quiz-option:hover:not(.disabled) .option-letter {
    background: var(--primary);
    color: var(--text-inverse);
}

html[data-theme="dark"] body[data-course-shell] .quiz-option.selected.correct {
    background: linear-gradient(135deg,
            rgba(22, 101, 52, 0.3) 0%,
            rgba(34, 197, 94, 0.1) 100%);
    border-color: var(--success);
    color: var(--success-light);
}

html[data-theme="dark"] body[data-course-shell] .quiz-option.selected.incorrect {
    background: linear-gradient(135deg,
            rgba(153, 27, 27, 0.3) 0%,
            rgba(239, 68, 68, 0.1) 100%);
    border-color: var(--danger);
    color: var(--danger-light);
}

html[data-theme="dark"] body[data-course-shell] .quiz-explanation {
    background: linear-gradient(135deg,
            rgba(30, 58, 138, 0.3) 0%,
            rgba(30, 41, 59, 0.5) 100%);
}

html[data-theme="dark"] body[data-course-shell] .quiz-explanation h4 {
    color: var(--primary-light);
}

/* ═══════════════════════════════════════════════════
   TABLE OVERRIDES
   ═══════════════════════════════════════════════════ */
html[data-theme="dark"] body[data-course-shell] table {
    background: var(--bg-card);
}

html[data-theme="dark"] body[data-course-shell] th {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
}

html[data-theme="dark"] body[data-course-shell] td {
    border-color: var(--border-card);
    color: var(--text-secondary);
}

html[data-theme="dark"] body[data-course-shell] tr:hover {
    background: var(--bg-card-hover);
}

/* ═══════════════════════════════════════════════════
   FLOATING BUTTONS OVERRIDES
   ═══════════════════════════════════════════════════ */
html[data-theme="dark"] body[data-course-shell] .theme-toggle-btn {
    background: rgba(51, 65, 85, 0.9);
    border-color: var(--border-card);
    color: var(--text-secondary);
}

html[data-theme="dark"] body[data-course-shell] .theme-toggle-btn:hover {
    background: rgba(71, 85, 105, 0.9);
}

html[data-theme="dark"] body[data-course-shell] .author-box {
    background: rgba(30, 41, 59, 0.95);
    color: var(--text-secondary);
    border: 1px solid var(--border-card);
}

html[data-theme="dark"] body[data-course-shell] .author-box a {
    color: var(--primary-light);
}

/* ═══════════════════════════════════════════════════
   PROGRESS BAR OVERRIDES
   ═══════════════════════════════════════════════════ */
html[data-theme="dark"] body[data-course-shell] .progress-bar {
    background: rgba(51, 65, 85, 0.8);
}

/* ═══════════════════════════════════════════════════
   NAV BUTTONS OVERRIDES
   ═══════════════════════════════════════════════════ */
html[data-theme="dark"] body[data-course-shell] .nav-buttons {
    border-top-color: var(--border-card);
}

/* ═══════════════════════════════════════════════════
   TEXT SELECTIONS
   ═══════════════════════════════════════════════════ */
html[data-theme="dark"] body[data-course-shell] ::selection {
    background: var(--primary);
    color: var(--text-inverse);
}

html[data-theme="dark"] body[data-course-shell] ::-moz-selection {
    background: var(--primary);
    color: var(--text-inverse);
}

/* ═══════════════════════════════════════════════════
   LISTS
   ═══════════════════════════════════════════════════ */
html[data-theme="dark"] body[data-course-shell] .list-styled li::marker {
    color: var(--primary-light);
}

/* ═══════════════════════════════════════════════════
   SKELETON LOADING
   ═══════════════════════════════════════════════════ */
html[data-theme="dark"] body[data-course-shell] .skeleton {
    background: linear-gradient(90deg,
            rgba(51, 65, 85, 0.8) 0%,
            rgba(71, 85, 105, 0.8) 50%,
            rgba(51, 65, 85, 0.8) 100%);
}
/* ═══════════════════════════════════════════════════
   DUAL-MODE READABILITY PASS (2026-07)
   Make tokens + content blocks readable in night mode
   ═══════════════════════════════════════════════════ */

/* Remap "*-dark" brand tokens to lighter values on dark backgrounds
   so inline styles like color: var(--primary-dark) stay legible. */
html[data-theme="dark"] body[data-course-shell],
html.dark-mode body[data-course-shell],
body.dark-mode[data-course-shell] {
    --primary-dark: #93c5fd;
    --secondary-dark: #67e8f9;
    --accent-dark: #c4b5fd;
    --success-dark: #6ee7b7;
    --warning-dark: #fcd34d;
    --danger-dark: #fca5a5;
    --info-dark: #67e8f9;

    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-main: #f1f5f9;
    --border-color: rgba(148, 163, 184, 0.28);
}

/* Base body + prose */
html[data-theme="dark"] body[data-course-shell],
body.dark-mode[data-course-shell] {
    color: var(--text-primary);
    background: var(--bg-page);
}

html[data-theme="dark"] body[data-course-shell] p,
html[data-theme="dark"] body[data-course-shell] li,
html[data-theme="dark"] body[data-course-shell] td,
html[data-theme="dark"] body[data-course-shell] label,
html[data-theme="dark"] body[data-course-shell] span:not([class*="fa-"]):not(.option-letter),
body.dark-mode[data-course-shell] p,
body.dark-mode[data-course-shell] li,
body.dark-mode[data-course-shell] td {
    color: inherit;
}

html[data-theme="dark"] body[data-course-shell] h1,
html[data-theme="dark"] body[data-course-shell] h2,
html[data-theme="dark"] body[data-course-shell] h3,
html[data-theme="dark"] body[data-course-shell] h4,
html[data-theme="dark"] body[data-course-shell] h5,
body.dark-mode[data-course-shell] h1,
body.dark-mode[data-course-shell] h2,
body.dark-mode[data-course-shell] h3,
body.dark-mode[data-course-shell] h4 {
    color: var(--text-primary);
}

/* Content containers commonly used in shell + hybrid */
html[data-theme="dark"] body[data-course-shell] .content,
html[data-theme="dark"] body[data-course-shell] .slide,
html[data-theme="dark"] body[data-course-shell] .prose,
html[data-theme="dark"] body[data-course-shell] .course-content,
body.dark-mode[data-course-shell] .content,
body.dark-mode[data-course-shell] .slide,
body.dark-mode[data-course-shell] .prose {
    color: var(--text-secondary);
}

/* Interactive labs (Diarrhea / PE / Hypertension / NRP style) */
html[data-theme="dark"] body[data-course-shell] .bp-choice,
html[data-theme="dark"] body[data-course-shell] .bp-detail,
html[data-theme="dark"] body[data-course-shell] .nrx-chip,
html[data-theme="dark"] body[data-course-shell] .nrx-panel,
html[data-theme="dark"] body[data-course-shell] .nrx-panel__fact,
html[data-theme="dark"] body[data-course-shell] .nrx-lab__intro,
body.dark-mode[data-course-shell] .bp-choice,
body.dark-mode[data-course-shell] .bp-detail,
body.dark-mode[data-course-shell] .nrx-chip,
body.dark-mode[data-course-shell] .nrx-panel {
    background: rgba(30, 41, 59, 0.92) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
    color: var(--text-primary) !important;
    box-shadow: none;
}

html[data-theme="dark"] body[data-course-shell] .bp-choice-body,
html[data-theme="dark"] body[data-course-shell] .bp-choice-body span,
html[data-theme="dark"] body[data-course-shell] .nrx-chip__meta,
html[data-theme="dark"] body[data-course-shell] .bp-detail p,
html[data-theme="dark"] body[data-course-shell] .nrx-panel p,
body.dark-mode[data-course-shell] .bp-choice-body,
body.dark-mode[data-course-shell] .nrx-chip__meta {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] body[data-course-shell] .bp-choice-body strong,
html[data-theme="dark"] body[data-course-shell] .nrx-chip__title,
html[data-theme="dark"] body[data-course-shell] .bp-detail h3,
html[data-theme="dark"] body[data-course-shell] .nrx-panel h3,
body.dark-mode[data-course-shell] .bp-choice-body strong,
body.dark-mode[data-course-shell] .nrx-chip__title {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] body[data-course-shell] .bp-choice.is-active,
html[data-theme="dark"] body[data-course-shell] .nrx-chip.is-active,
body.dark-mode[data-course-shell] .bp-choice.is-active,
body.dark-mode[data-course-shell] .nrx-chip.is-active {
    border-color: var(--primary-light) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22) !important;
    background: rgba(30, 58, 138, 0.35) !important;
}

html[data-theme="dark"] body[data-course-shell] .bp-choice-icon,
body.dark-mode[data-course-shell] .bp-choice-icon {
    background: rgba(59, 130, 246, 0.2) !important;
    color: var(--primary-light) !important;
}

/* Flashcards */
html[data-theme="dark"] body[data-course-shell] .course-shell-flashcard,
html[data-theme="dark"] body[data-course-shell] .course-shell-flashcard__face,
body.dark-mode[data-course-shell] .course-shell-flashcard,
body.dark-mode[data-course-shell] .course-shell-flashcard__face {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(148, 163, 184, 0.28);
    color: var(--text-primary);
}

html[data-theme="dark"] body[data-course-shell] .course-shell-flashcard__title,
html[data-theme="dark"] body[data-course-shell] .course-shell-flashcard__body,
html[data-theme="dark"] body[data-course-shell] .course-shell-flashcard__eyebrow,
body.dark-mode[data-course-shell] .course-shell-flashcard__title,
body.dark-mode[data-course-shell] .course-shell-flashcard__body {
    color: var(--text-primary);
}

/* Micro-check options */
html[data-theme="dark"] body[data-course-shell] .course-shell-microcheck__option,
body.dark-mode[data-course-shell] .course-shell-microcheck__option {
    background: rgba(51, 65, 85, 0.55);
    border-color: rgba(148, 163, 184, 0.28);
    color: var(--text-primary);
}

/* Evidence footer */
html[data-theme="dark"] body[data-course-shell] .edu-evidence-footer,
body.dark-mode[data-course-shell] .edu-evidence-footer,
html[data-theme="dark"] .edu-evidence-footer,
body.dark-mode .edu-evidence-footer {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.98)) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
    color: var(--text-secondary, #cbd5e1) !important;
}

html[data-theme="dark"] .edu-evidence-footer h2,
body.dark-mode .edu-evidence-footer h2 {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .edu-evidence-footer a,
body.dark-mode .edu-evidence-footer a {
    color: #93c5fd !important;
}

/* Inline hard-coded light text/backgrounds used in generated HTML */
html[data-theme="dark"] body[data-course-shell] [style*="color:#0f172a"],
html[data-theme="dark"] body[data-course-shell] [style*="color: #0f172a"],
html[data-theme="dark"] body[data-course-shell] [style*="color:#1e293b"],
html[data-theme="dark"] body[data-course-shell] [style*="color: #1e293b"],
html[data-theme="dark"] body[data-course-shell] [style*="color:#111827"],
body.dark-mode[data-course-shell] [style*="color:#0f172a"],
body.dark-mode[data-course-shell] [style*="color: #0f172a"],
body.dark-mode[data-course-shell] [style*="color:#1e293b"] {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] body[data-course-shell] [style*="background:#fff"],
html[data-theme="dark"] body[data-course-shell] [style*="background: #fff"],
html[data-theme="dark"] body[data-course-shell] [style*="background:#ffffff"],
html[data-theme="dark"] body[data-course-shell] [style*="background: #ffffff"],
html[data-theme="dark"] body[data-course-shell] [style*="background:white"],
body.dark-mode[data-course-shell] [style*="background:#fff"],
body.dark-mode[data-course-shell] [style*="background: #fff"],
body.dark-mode[data-course-shell] [style*="background:#ffffff"] {
    background: rgba(30, 41, 59, 0.92) !important;
}

html[data-theme="dark"] body[data-course-shell] [style*="border:1px solid #e5e7eb"],
html[data-theme="dark"] body[data-course-shell] [style*="border: 1px solid #e5e7eb"],
html[data-theme="dark"] body[data-course-shell] [style*="#d1d5db"],
body.dark-mode[data-course-shell] [style*="#e5e7eb"],
body.dark-mode[data-course-shell] [style*="#d1d5db"] {
    border-color: rgba(148, 163, 184, 0.28) !important;
}

/* Pearl / callout text */
html[data-theme="dark"] body[data-course-shell] .pearl,
html[data-theme="dark"] body[data-course-shell] .clinical-pearl,
html[data-theme="dark"] body[data-course-shell] .key-point,
body.dark-mode[data-course-shell] .pearl {
    color: var(--text-primary);
}

/* Lists and strong text inside cards */
html[data-theme="dark"] body[data-course-shell] .card strong,
html[data-theme="dark"] body[data-course-shell] .icon-card strong,
html[data-theme="dark"] body[data-course-shell] .content strong,
body.dark-mode[data-course-shell] .card strong,
body.dark-mode[data-course-shell] .content strong {
    color: var(--text-primary);
}

/* Light mode safety: ensure body text never disappears */
html[data-theme="light"] body[data-course-shell],
html:not([data-theme="dark"]) body[data-course-shell]:not(.dark-mode) {
    color: var(--text-primary, #111827);
}

html[data-theme="light"] body[data-course-shell] .card,
html[data-theme="light"] body[data-course-shell] .icon-card,
html:not([data-theme="dark"]) body[data-course-shell]:not(.dark-mode) .card,
html:not([data-theme="dark"]) body[data-course-shell]:not(.dark-mode) .icon-card {
    color: var(--text-secondary, #374151);
}

/* Ensure theme toggle remains visible in both modes */
html[data-theme="light"] body[data-course-shell] .course-shell-theme-btn,
html[data-theme="light"] body[data-course-shell] .theme-toggle-btn {
    color: var(--text-secondary, #334155);
}