/* 
 * MarketPawns Starter - dark theme layer
 *
 * This stylesheet is loaded last on purpose. The starter project still carries
 * several generations of light-first CSS, including duplicated rules in
 * `public/app.css`, so the dark theme is implemented as a dedicated override
 * layer that can safely sit on top of the existing cascade.
 *
 * Visual direction:
 * - keeps the main MarketPawns brand language (deep indigo + gold accents)
 * - uses Roboto like the main platform
 * - increases contrast for cards, forms and data-heavy learning screens
 */

:root {
    --starter-theme-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --starter-bg-body: #0f1218;
    --starter-bg-body-alt: #131722;
    --starter-bg-surface: #171c27;
    --starter-bg-surface-strong: #1d2431;
    --starter-bg-muted: #242d3d;
    --starter-bg-overlay: rgba(15, 18, 24, 0.82);
    --starter-text-primary: #eef2ff;
    --starter-text-secondary: #b8c1d9;
    --starter-text-muted: #8c96ad;
    --starter-border: #2f394b;
    --starter-border-strong: #455169;
    --starter-brand: #9aa3ff;
    --starter-brand-strong: #717cff;
    --starter-brand-shadow: rgba(113, 124, 255, 0.24);
    --starter-gold: #d6b56c;
    --starter-gold-soft: rgba(214, 181, 108, 0.18);
    --starter-success: #55c784;
    --starter-danger: #ff7c7c;
    --starter-warning: #f7c866;
    --starter-info: #4bc2de;
    --starter-shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.22);
    --starter-shadow-md: 0 18px 40px rgba(0, 0, 0, 0.28);
}

/* Base page chrome */
html[data-theme="dark"] body {
    font-family: var(--starter-theme-font);
    color: var(--starter-text-primary);
    background:
        radial-gradient(circle at top, rgba(113, 124, 255, 0.12), transparent 32%),
        linear-gradient(180deg, var(--starter-bg-body-alt) 0%, var(--starter-bg-body) 100%);
}

html[data-theme="dark"] .main-content {
    color: inherit;
}

html[data-theme="dark"] a {
    color: var(--starter-brand);
}

html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus {
    color: var(--starter-gold);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .brand-name {
    color: var(--starter-text-primary) !important;
}

html[data-theme="dark"] .text-dark {
    color: var(--starter-text-primary) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .stat-label.text-muted,
html[data-theme="dark"] .progress-hint .text-muted {
    color: var(--starter-text-muted) !important;
}

html[data-theme="dark"] .text-primary {
    color: var(--starter-brand) !important;
}

html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-white {
    background-color: var(--starter-bg-surface) !important;
}

html[data-theme="dark"] hr {
    border-color: var(--starter-border);
    opacity: 1;
}

/* Header, footer and global actions */
html[data-theme="dark"] .header {
    background: rgba(15, 18, 24, 0.9);
    border-bottom: 1px solid rgba(214, 181, 108, 0.14);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
}

html[data-theme="dark"] .footer {
    background: linear-gradient(180deg, rgba(23, 28, 39, 0.95), rgba(15, 18, 24, 0.98));
    color: var(--starter-text-secondary);
    border-top: 1px solid var(--starter-border);
}

html[data-theme="dark"] .footer h5,
html[data-theme="dark"] .footer p,
html[data-theme="dark"] .footer-links a {
    color: var(--starter-text-secondary);
}

html[data-theme="dark"] .footer-links a:hover {
    color: var(--starter-gold);
}

html[data-theme="dark"] .social-links .social-link {
    background: linear-gradient(135deg, rgba(113, 124, 255, 0.22), rgba(214, 181, 108, 0.18));
    border: 1px solid rgba(214, 181, 108, 0.24);
    color: var(--starter-text-primary);
}

html[data-theme="dark"] .social-links .social-link:hover {
    background: linear-gradient(135deg, var(--starter-brand-strong), var(--starter-gold));
    color: #10131a;
}

html[data-theme="dark"] #preloader {
    background: var(--starter-bg-body);
}

html[data-theme="dark"] .back-to-top {
    background: linear-gradient(135deg, var(--starter-bg-muted), var(--starter-bg-surface-strong));
    border-color: rgba(214, 181, 108, 0.45);
    color: var(--starter-text-primary);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .back-to-top:hover {
    background: linear-gradient(135deg, var(--starter-brand-strong), var(--starter-gold));
    color: #10131a;
}

/* Theme toggle */
html[data-theme="dark"] .theme-toggle-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 6rem;
    justify-content: center;
}

html[data-theme="dark"] .theme-toggle-label {
    font-size: 0.85rem;
    font-weight: 600;
}

/* Bootstrap buttons */
html[data-theme="dark"] .btn {
    border-radius: 0.5rem;
    box-shadow: none;
}

html[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, var(--starter-brand-strong), #535fd6);
    border-color: rgba(154, 163, 255, 0.55);
    box-shadow: 0 10px 24px var(--starter-brand-shadow);
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus {
    background: linear-gradient(135deg, #a6adff, var(--starter-brand-strong));
    border-color: #b2b8ff;
    color: #0f1218;
}

html[data-theme="dark"] .btn-outline-primary {
    color: var(--starter-brand);
    border-color: rgba(154, 163, 255, 0.45);
    background-color: rgba(113, 124, 255, 0.08);
}

html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-primary:focus {
    background: linear-gradient(135deg, var(--starter-brand-strong), var(--starter-brand));
    border-color: var(--starter-brand);
    color: #0f1218;
}

html[data-theme="dark"] .btn-outline-secondary {
    color: var(--starter-text-secondary);
    border-color: rgba(184, 193, 217, 0.24);
    background-color: rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:focus {
    color: var(--starter-text-primary);
    background-color: rgba(214, 181, 108, 0.12);
    border-color: rgba(214, 181, 108, 0.4);
}

html[data-theme="dark"] .btn-secondary {
    background: linear-gradient(135deg, #c99436, var(--starter-gold));
    border-color: rgba(214, 181, 108, 0.7);
    color: #11141b;
}

html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-secondary:focus {
    background: linear-gradient(135deg, #e0c079, #f1d598);
    color: #0f1218;
}

/* Forms, overlays and popups */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select {
    background-color: var(--starter-bg-surface-strong);
    border-color: var(--starter-border);
    color: var(--starter-text-primary);
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--starter-text-muted);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus {
    background-color: var(--starter-bg-surface-strong);
    border-color: rgba(214, 181, 108, 0.65);
    color: var(--starter-text-primary);
    box-shadow: 0 0 0 0.22rem rgba(214, 181, 108, 0.18);
}

html[data-theme="dark"] .form-check-input {
    background-color: var(--starter-bg-surface-strong);
    border-color: var(--starter-border-strong);
}

html[data-theme="dark"] .form-check-input:checked {
    background-color: var(--starter-brand-strong);
    border-color: var(--starter-brand-strong);
}

html[data-theme="dark"] .form-label,
html[data-theme="dark"] .form-check-label,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] legend {
    color: var(--starter-text-secondary);
}

html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .toast-header {
    background-color: var(--starter-bg-surface);
    color: var(--starter-text-primary);
    border-color: var(--starter-border);
    box-shadow: var(--starter-shadow-md);
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .toast-header {
    border-color: var(--starter-border);
}

html[data-theme="dark"] .dropdown-item {
    color: var(--starter-text-secondary);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .dropdown-item.active {
    color: var(--starter-text-primary);
    background-color: rgba(113, 124, 255, 0.16);
}

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1);
}

html[data-theme="dark"] .alert {
    border-color: transparent;
}

html[data-theme="dark"] .alert-success {
    background-color: rgba(85, 199, 132, 0.14);
    color: #c6f1d7;
}

html[data-theme="dark"] .alert-danger {
    background-color: rgba(255, 124, 124, 0.14);
    color: #ffd3d3;
}

html[data-theme="dark"] .alert-warning {
    background-color: rgba(247, 200, 102, 0.14);
    color: #ffe8b6;
}

html[data-theme="dark"] .alert-info {
    background-color: rgba(75, 194, 222, 0.14);
    color: #d0f5ff;
}

html[data-theme="dark"] .breadcrumb {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--starter-border);
}

html[data-theme="dark"] .breadcrumb-item,
html[data-theme="dark"] .breadcrumb-item.active,
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--starter-text-muted);
}

/* Shared content containers */
html[data-theme="dark"] .card,
html[data-theme="dark"] .signals-table,
html[data-theme="dark"] .progress-section,
html[data-theme="dark"] .module-stats,
html[data-theme="dark"] .recommendation-card,
html[data-theme="dark"] .onboarding-container,
html[data-theme="dark"] .testimonials-section .card,
html[data-theme="dark"] .article-table,
html[data-theme="dark"] .editor-header,
html[data-theme="dark"] .log-header {
    background-color: var(--starter-bg-surface);
    color: var(--starter-text-primary);
    border: 1px solid var(--starter-border);
    box-shadow: var(--starter-shadow-sm);
}

html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .recommendation-card:hover,
html[data-theme="dark"] .mode-card:hover .card {
    box-shadow: var(--starter-shadow-md);
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .onboarding-header,
html[data-theme="dark"] .onboarding-footer {
    background-color: rgba(255, 255, 255, 0.02);
    border-color: var(--starter-border);
    color: var(--starter-text-primary);
}

html[data-theme="dark"] .card-title,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .section-description,
html[data-theme="dark"] .enhanced-readability,
html[data-theme="dark"] .enhanced-readability-large,
html[data-theme="dark"] .enhanced-readability-lead {
    color: var(--starter-text-primary);
    text-shadow: none;
}

html[data-theme="dark"] .card-text,
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] small {
    color: var(--starter-text-secondary);
}

html[data-theme="dark"] .progress {
    background-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .progress-bar {
    box-shadow: 0 0 20px rgba(113, 124, 255, 0.26);
}

html[data-theme="dark"] table,
html[data-theme="dark"] .table {
    color: var(--starter-text-primary);
}

html[data-theme="dark"] table td,
html[data-theme="dark"] table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .signals-table td,
html[data-theme="dark"] .signals-table th {
    border-color: var(--starter-border);
}

/* Hero + landing sections */
html[data-theme="dark"] .hero-section,
html[data-theme="dark"] .hero-section-corporate,
html[data-theme="dark"] .learning-modes-section,
html[data-theme="dark"] .learning-navigation-section,
html[data-theme="dark"] .hero-section .card,
html[data-theme="dark"] .cta-section {
    background:
        linear-gradient(180deg, rgba(23, 28, 39, 0.96), rgba(15, 18, 24, 0.96));
    color: var(--starter-text-primary);
}

html[data-theme="dark"] .hero-section-corporate {
    border-bottom-color: var(--starter-border);
}

html[data-theme="dark"] .hero-title-corporate,
html[data-theme="dark"] .hero-description,
html[data-theme="dark"] .section-description {
    color: var(--starter-text-primary);
}

html[data-theme="dark"] .hero-logo-large {
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
}

html[data-theme="dark"] .stat-card-corporate {
    background:
        linear-gradient(135deg, rgba(29, 36, 49, 0.98), rgba(23, 28, 39, 0.98));
    border-color: rgba(154, 163, 255, 0.18);
    box-shadow: var(--starter-shadow-md);
}

html[data-theme="dark"] .stat-card-corporate::before {
    background: linear-gradient(90deg, var(--starter-brand-strong) 0%, var(--starter-gold) 50%, var(--starter-brand-strong) 100%);
}

html[data-theme="dark"] .stat-card-corporate::after {
    background: radial-gradient(circle, rgba(113, 124, 255, 0.14) 0%, transparent 72%);
}

html[data-theme="dark"] .stat-card-corporate .stat-value {
    text-shadow: none;
}

html[data-theme="dark"] .stat-card-corporate .stat-value.text-primary {
    background: linear-gradient(135deg, #bec4ff 0%, var(--starter-brand) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

html[data-theme="dark"] .stat-card-corporate .stat-value.text-success {
    background: linear-gradient(135deg, #88e1ab 0%, var(--starter-success) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

html[data-theme="dark"] .stat-card-corporate .stat-label {
    color: var(--starter-text-muted);
}

html[data-theme="dark"] .step-number {
    background: linear-gradient(135deg, var(--starter-brand-strong), var(--starter-gold));
    color: #11141b;
}

html[data-theme="dark"] .feature-icon,
html[data-theme="dark"] .module-stats {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Learning system details */
html[data-theme="dark"] .bg-light-alpha {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .navigation-title,
html[data-theme="dark"] .guided-navigation .module-title,
html[data-theme="dark"] .guided-navigation .section-title,
html[data-theme="dark"] .progress-label,
html[data-theme="dark"] .recommendations-section h4,
html[data-theme="dark"] .module-stats strong {
    color: var(--starter-text-primary);
}

html[data-theme="dark"] .guided-navigation .module-title {
    border-bottom-color: rgba(214, 181, 108, 0.22);
}

html[data-theme="dark"] .guided-navigation .section-title,
html[data-theme="dark"] .progress-value {
    color: var(--starter-text-secondary);
}

html[data-theme="dark"] .guided-navigation .lesson-link {
    color: #aeb7ff;
}

html[data-theme="dark"] .guided-navigation .lesson-link:hover {
    color: var(--starter-gold);
}

/* Guided Learning needs a deeper interior surface than the outer card.
   Without these overrides the light legacy backgrounds from
   `learning-system.css` remain visible inside "Learning Path". */
html[data-theme="dark"] .guided-navigation .learning-module {
    border: 1px solid rgba(154, 163, 255, 0.14);
    border-radius: 0.9rem;
    overflow: hidden;
    background: rgba(17, 21, 30, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

html[data-theme="dark"] .guided-navigation .accordion-collapse,
html[data-theme="dark"] .guided-navigation .module-content {
    background:
        linear-gradient(180deg, rgba(22, 27, 38, 0.98), rgba(15, 19, 27, 0.98));
}

html[data-theme="dark"] .guided-navigation .module-content {
    padding: 1.25rem;
}

html[data-theme="dark"] .guided-navigation .module-toggle-btn {
    background: linear-gradient(135deg, #323a7e 0%, #40499b 100%);
    border-bottom: 1px solid rgba(214, 181, 108, 0.14);
}

html[data-theme="dark"] .guided-navigation .module-toggle-btn:hover {
    background: linear-gradient(135deg, #3c4694 0%, #4c56ac 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .guided-navigation .module-toggle-btn:focus {
    box-shadow: 0 0 0 3px rgba(214, 181, 108, 0.22);
}

html[data-theme="dark"] .guided-navigation .section-title {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .guided-navigation .lesson-list {
    padding-left: 0;
    margin-bottom: 0;
}

html[data-theme="dark"] .guided-navigation .lesson-item {
    padding: 0.75rem 0.875rem;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.02);
}

html[data-theme="dark"] .guided-navigation .lesson-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .guided-navigation .lesson-item:hover {
    background: rgba(113, 124, 255, 0.12);
    border-color: rgba(154, 163, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] .guided-navigation .lesson-item.completed {
    background: rgba(85, 199, 132, 0.09);
    border-color: rgba(85, 199, 132, 0.24);
}

html[data-theme="dark"] .guided-navigation .lesson-item.completed:hover {
    background: rgba(85, 199, 132, 0.14);
    border-color: rgba(85, 199, 132, 0.34);
}

html[data-theme="dark"] .guided-navigation .lesson-meta,
html[data-theme="dark"] .guided-navigation .lesson-meta small,
html[data-theme="dark"] .guided-navigation .lesson-meta .text-muted {
    color: var(--starter-text-muted) !important;
}

html[data-theme="dark"] .guided-navigation .lesson-meta .fas.fa-clock,
html[data-theme="dark"] .guided-navigation .lesson-meta .far.fa-clock {
    color: var(--starter-gold);
}

/* Tests inherit a tinted background so they remain visually grouped but no longer
   flash white/yellow blocks inside the dark Learning Path panel. */
html[data-theme="dark"] .guided-navigation .section-tests {
    background: linear-gradient(135deg, rgba(214, 181, 108, 0.12), rgba(214, 181, 108, 0.06));
    border: 1px solid rgba(214, 181, 108, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

html[data-theme="dark"] .guided-navigation .section-tests .tests-header {
    color: #f2dca1;
}

html[data-theme="dark"] .guided-navigation .section-tests .test-item {
    background: rgba(20, 25, 35, 0.58);
    border-color: rgba(214, 181, 108, 0.18);
}

html[data-theme="dark"] .guided-navigation .section-tests .test-item:hover {
    background: rgba(214, 181, 108, 0.12);
    border-color: rgba(214, 181, 108, 0.34);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .guided-navigation .module-tests {
    background: linear-gradient(135deg, rgba(85, 199, 132, 0.11), rgba(85, 199, 132, 0.05));
    border: 1px solid rgba(85, 199, 132, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

html[data-theme="dark"] .guided-navigation .module-tests .tests-header {
    color: #c8f0d7;
    border-bottom-color: rgba(85, 199, 132, 0.18);
}

html[data-theme="dark"] .guided-navigation .module-tests .test-item {
    background: rgba(20, 25, 35, 0.62);
    border-color: rgba(85, 199, 132, 0.18);
}

html[data-theme="dark"] .guided-navigation .module-tests .test-item:hover {
    background: rgba(85, 199, 132, 0.12);
    border-color: rgba(85, 199, 132, 0.34);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .guided-navigation .test-content .test-link {
    color: var(--starter-text-primary);
}

html[data-theme="dark"] .guided-navigation .test-content .test-link:hover {
    color: var(--starter-gold);
}

html[data-theme="dark"] .guided-navigation .test-meta small,
html[data-theme="dark"] .guided-navigation .test-meta .text-muted {
    color: var(--starter-text-muted) !important;
}

html[data-theme="dark"] .explore-navigation .section-item,
html[data-theme="dark"] .reference-navigation .reference-item {
    border-bottom-color: var(--starter-border);
}

html[data-theme="dark"] .reference-navigation .reference-item:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] .reference-navigation .search-box input {
    border-color: var(--starter-border);
}

html[data-theme="dark"] .reference-navigation .search-box input:focus {
    border-color: rgba(214, 181, 108, 0.65);
    box-shadow: 0 0 0 3px rgba(214, 181, 108, 0.12);
}

html[data-theme="dark"] .mode-card.active .card {
    border-color: rgba(214, 181, 108, 0.38);
    box-shadow: 0 0 0 3px rgba(214, 181, 108, 0.12), var(--starter-shadow-md);
}

html[data-theme="dark"] .recommendation-card {
    border-left-color: var(--starter-gold);
}

/* Onboarding */
html[data-theme="dark"] .onboarding-overlay {
    background-color: rgba(5, 7, 11, 0.78);
}

html[data-theme="dark"] .onboarding-progress span {
    background-color: rgba(255, 255, 255, 0.16);
}

html[data-theme="dark"] .onboarding-progress span.active {
    background-color: var(--starter-gold);
}

/* Small utility alignment for existing inline admin pages */
html[data-theme="dark"] .logs-container,
html[data-theme="dark"] .article-management,
html[data-theme="dark"] .editor-container {
    color: var(--starter-text-primary);
}

html[data-theme="dark"] .filters,
html[data-theme="dark"] .users-table,
html[data-theme="dark"] .recent-changes,
html[data-theme="dark"] .recovery-card,
html[data-theme="dark"] .article-preview,
html[data-theme="dark"] .setup-card,
html[data-theme="dark"] .output-box,
html[data-theme="dark"] .version-item,
html[data-theme="dark"] .history-item,
html[data-theme="dark"] .image-item,
html[data-theme="dark"] .image-upload-section,
html[data-theme="dark"] .tabs,
html[data-theme="dark"] .modal-content {
    background-color: var(--starter-bg-surface);
    color: var(--starter-text-primary);
    border-color: var(--starter-border);
}

html[data-theme="dark"] .article-row,
html[data-theme="dark"] .user-row,
html[data-theme="dark"] .change-entry,
html[data-theme="dark"] .reference-navigation .reference-item,
html[data-theme="dark"] .version-item,
html[data-theme="dark"] .history-item {
    border-bottom-color: var(--starter-border);
}

html[data-theme="dark"] .article-info .meta,
html[data-theme="dark"] .article-info .description,
html[data-theme="dark"] .user-info .email,
html[data-theme="dark"] .change-meta,
html[data-theme="dark"] .recovery-info,
html[data-theme="dark"] .history-meta,
html[data-theme="dark"] .version-meta,
html[data-theme="dark"] .log-info {
    color: var(--starter-text-muted);
}

html[data-theme="dark"] .affected-article,
html[data-theme="dark"] .warning-box {
    background-color: rgba(255, 124, 124, 0.08);
    border-color: rgba(255, 124, 124, 0.34);
    color: var(--starter-text-primary);
}

html[data-theme="dark"] .no-issues,
html[data-theme="dark"] .alert-success,
html[data-theme="dark"] .role-student,
html[data-theme="dark"] .status-published {
    color: #d9f7e5;
}

html[data-theme="dark"] .status-draft,
html[data-theme="dark"] .difficulty-beginner {
    background-color: rgba(247, 200, 102, 0.16);
    color: #ffe0a3;
}

html[data-theme="dark"] .status-archived {
    background-color: rgba(255, 124, 124, 0.16);
    color: #ffd2d2;
}

html[data-theme="dark"] .difficulty-intermediate,
html[data-theme="dark"] .role-editor {
    background-color: rgba(75, 194, 222, 0.16);
    color: #cef3ff;
}

html[data-theme="dark"] .difficulty-advanced,
html[data-theme="dark"] .role-admin {
    background-color: rgba(154, 163, 255, 0.16);
    color: #d7dcff;
}

html[data-theme="dark"] .tab {
    color: var(--starter-text-secondary);
    border-bottom-color: transparent;
}

html[data-theme="dark"] .tab.active {
    background-color: rgba(113, 124, 255, 0.16);
    color: var(--starter-text-primary);
    border-bottom-color: var(--starter-gold);
}

html[data-theme="dark"] .image-action-btn.copy,
html[data-theme="dark"] .change-role-btn,
html[data-theme="dark"] .btn-secondary {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: var(--starter-border);
    color: var(--starter-text-primary);
}

html[data-theme="dark"] .image-action-btn.delete,
html[data-theme="dark"] .btn-danger {
    background-color: rgba(255, 124, 124, 0.18);
    border-color: rgba(255, 124, 124, 0.28);
}

html[data-theme="dark"] .log-viewer {
    background: #0c0f15;
    color: #d9e2ff;
    border: 1px solid var(--starter-border);
}

html[data-theme="dark"] .table-header {
    background: linear-gradient(135deg, var(--starter-brand-strong), #4b56c7);
}

html[data-theme="dark"] .editor-header h1,
html[data-theme="dark"] .article-meta,
html[data-theme="dark"] .stat-label {
    color: var(--starter-text-secondary);
}

/* Lesson page refinement: `lesson.php` still ships with light inline gradients for
   the article header, completion callout and placeholder blocks. These overrides
   re-skin those blocks so opened articles match the rest of the dark theme. */
html[data-theme="dark"] .lesson-container,
html[data-theme="dark"] .lesson-sidebar {
    color: var(--starter-text-primary);
}

html[data-theme="dark"] .lesson-header {
    background:
        linear-gradient(135deg, rgba(24, 29, 40, 0.98), rgba(18, 22, 31, 0.98)) !important;
    border: 1px solid var(--starter-border) !important;
    border-left: 4px solid var(--starter-brand-strong) !important;
    box-shadow: var(--starter-shadow-md) !important;
}

html[data-theme="dark"] .lesson-header .card-body,
html[data-theme="dark"] .lesson-content .card-body,
html[data-theme="dark"] .lesson-completion .card-body {
    color: var(--starter-text-primary);
}

html[data-theme="dark"] .lesson-title,
html[data-theme="dark"] .lesson-header .h2 {
    color: var(--starter-text-primary) !important;
    text-shadow: none;
}

html[data-theme="dark"] .lesson-header .lesson-meta,
html[data-theme="dark"] .lesson-header .lesson-meta.text-secondary,
html[data-theme="dark"] .lesson-header .lesson-meta span,
html[data-theme="dark"] .lesson-header .lesson-meta i {
    color: var(--starter-text-secondary) !important;
}

html[data-theme="dark"] .lesson-header .lesson-meta .text-primary {
    color: var(--starter-brand) !important;
}

html[data-theme="dark"] .lesson-header .lesson-meta .text-info {
    color: var(--starter-info) !important;
}

html[data-theme="dark"] .lesson-header .lesson-meta .text-success {
    color: var(--starter-success) !important;
}

html[data-theme="dark"] .lesson-content {
    background:
        linear-gradient(180deg, rgba(20, 25, 35, 0.98), rgba(16, 20, 29, 0.98));
    border: 1px solid rgba(154, 163, 255, 0.12) !important;
    box-shadow: var(--starter-shadow-md) !important;
}

html[data-theme="dark"] .lesson-body,
html[data-theme="dark"] .lesson-body p,
html[data-theme="dark"] .lesson-body li,
html[data-theme="dark"] .lesson-body strong,
html[data-theme="dark"] .lesson-body em {
    color: var(--starter-text-primary);
}

html[data-theme="dark"] .lesson-body a {
    color: var(--starter-brand);
}

html[data-theme="dark"] .lesson-body a:hover {
    color: var(--starter-gold);
}

html[data-theme="dark"] .coming-soon-content {
    background:
        linear-gradient(135deg, rgba(20, 25, 35, 0.98), rgba(15, 19, 27, 0.98)) !important;
    border: 1px dashed rgba(214, 181, 108, 0.22);
    border-radius: 1rem;
}

html[data-theme="dark"] .lesson-preview {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(214, 181, 108, 0.16);
    border-left: 4px solid var(--starter-gold);
}

html[data-theme="dark"] .lesson-preview h5,
html[data-theme="dark"] .lesson-preview .text-dark,
html[data-theme="dark"] .coming-soon-content .lead,
html[data-theme="dark"] .coming-soon-content p,
html[data-theme="dark"] .coming-soon-content li {
    color: var(--starter-text-primary) !important;
}

html[data-theme="dark"] .encouragement-box {
    background: linear-gradient(135deg, rgba(113, 124, 255, 0.18), rgba(113, 124, 255, 0.1)) !important;
    border: 1px solid rgba(154, 163, 255, 0.22);
    border-left: 4px solid var(--starter-brand);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] .encouragement-box,
html[data-theme="dark"] .encouragement-box p,
html[data-theme="dark"] .encouragement-box .text-white {
    color: var(--starter-text-primary) !important;
}

html[data-theme="dark"] .lesson-completion {
    background:
        linear-gradient(135deg, rgba(24, 29, 40, 0.98), rgba(18, 22, 31, 0.98)) !important;
    border: 1px solid rgba(214, 181, 108, 0.2) !important;
    box-shadow: var(--starter-shadow-md) !important;
}

html[data-theme="dark"] .lesson-completion:hover {
    border-color: rgba(214, 181, 108, 0.42) !important;
    transform: translateY(-2px);
}

html[data-theme="dark"] .lesson-completion h5,
html[data-theme="dark"] .lesson-completion p,
html[data-theme="dark"] .lesson-completion small {
    color: var(--starter-text-primary) !important;
}

html[data-theme="dark"] .lesson-completion .text-muted,
html[data-theme="dark"] .lesson-completion .text-success {
    color: var(--starter-text-secondary) !important;
}

html[data-theme="dark"] .lesson-completion .btn-outline-secondary {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(184, 193, 217, 0.24);
}

html[data-theme="dark"] .lesson-sidebar .card {
    background:
        linear-gradient(180deg, rgba(20, 25, 35, 0.96), rgba(15, 19, 27, 0.96));
    border: 1px solid rgba(154, 163, 255, 0.12) !important;
}

html[data-theme="dark"] .lesson-sidebar .card:hover {
    box-shadow: var(--starter-shadow-md) !important;
}

html[data-theme="dark"] .lesson-sidebar .card-header.bg-light {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--starter-border);
}

html[data-theme="dark"] .lesson-sidebar .card-title,
html[data-theme="dark"] .lesson-sidebar h6,
html[data-theme="dark"] .lesson-sidebar .text-dark,
html[data-theme="dark"] .lesson-sidebar li,
html[data-theme="dark"] .lesson-sidebar .small {
    color: var(--starter-text-primary) !important;
}

html[data-theme="dark"] .lesson-sidebar .text-secondary,
html[data-theme="dark"] .lesson-sidebar .text-muted,
html[data-theme="dark"] .progress-display small {
    color: var(--starter-text-secondary) !important;
}

html[data-theme="dark"] .progress-display .progress {
    background-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .progress-display .progress-bar {
    background: linear-gradient(90deg, var(--starter-success), #84e0a7);
}

/* Learning page top hero uses local inline styles, so dark mode needs its own
   override to keep the header readable without becoming brighter than the page. */
html[data-theme="dark"] .hero-education-section.bg-gradient {
    background:
        linear-gradient(135deg, #202a59 0%, #2d3473 46%, #4a327a 100%) !important;
    border: 1px solid rgba(154, 163, 255, 0.14);
    border-left: 4px solid var(--starter-gold);
    box-shadow: var(--starter-shadow-lg);
}

html[data-theme="dark"] .hero-education-section::before {
    display: none;
}

html[data-theme="dark"] .hero-education-section h1,
html[data-theme="dark"] .hero-education-section .lead,
html[data-theme="dark"] .hero-education-section p,
html[data-theme="dark"] .hero-education-section small,
html[data-theme="dark"] .hero-education-section .text-white {
    color: #f6f8ff !important;
}

html[data-theme="dark"] .hero-education-section .lead {
    color: rgba(246, 248, 255, 0.88) !important;
}

html[data-theme="dark"] .hero-copy-panel {
    background: transparent;
    border: 0;
    box-shadow: none;
}

html[data-theme="dark"] .hero-progress-panel {
    background: rgba(7, 12, 24, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .progress-circle {
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .progress-circle::before {
    background: linear-gradient(180deg, #121a2f 0%, #0d1323 100%);
}

html[data-theme="dark"] .welcome-badge {
    background: rgba(8, 14, 28, 0.22);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Learning page quiz hero needs separate contrast tuning because the source file
   defines a vivid cyan gradient with light typography for both themes. */
html[data-theme="dark"] .bg-gradient-quiz {
    background:
        radial-gradient(circle at top left, rgba(214, 181, 108, 0.16), transparent 30%),
        linear-gradient(135deg, #23315f 0%, #1c4f88 48%, #0d6f8f 100%) !important;
    border: 1px solid rgba(154, 163, 255, 0.14);
    box-shadow: var(--starter-shadow-md);
}

html[data-theme="dark"] .bg-gradient-quiz h4,
html[data-theme="dark"] .bg-gradient-quiz p,
html[data-theme="dark"] .bg-gradient-quiz small,
html[data-theme="dark"] .bg-gradient-quiz .text-white {
    color: #f6f8ff !important;
}

html[data-theme="dark"] .bg-gradient-quiz p {
    color: rgba(246, 248, 255, 0.9) !important;
}

html[data-theme="dark"] .bg-gradient-quiz .stat-item {
    background: rgba(8, 14, 28, 0.24);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .bg-gradient-quiz .stat-item small {
    color: rgba(246, 248, 255, 0.8) !important;
}

html[data-theme="dark"] .bg-gradient-quiz .quiz-actions .btn-outline-light {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.34);
}

html[data-theme="dark"] .bg-gradient-quiz .quiz-actions .btn-outline-light:hover,
html[data-theme="dark"] .bg-gradient-quiz .quiz-actions .btn-outline-light:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.56);
}

@media (max-width: 767.98px) {
    html[data-theme="dark"] .theme-toggle-label {
        display: none;
    }

    html[data-theme="dark"] .theme-toggle-button {
        min-width: 2.5rem;
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }
}