/**
 * Dark mode — site-wide component polish
 * Tokens live in theme.css; this file handles page-specific surfaces.
 */

/* ── Global utilities ────────────────────────────────── */
html.-dark-mode .bg-white {
    background-color: var(--eman-bg) !important;
}

html.-dark-mode .bg-light-1,
html.-dark-mode .bg-light-3 {
    background-color: var(--eman-bg-subtle) !important;
}

html.-dark-mode .text-dark-1 {
    color: var(--eman-text-dark) !important;
}

html.-dark-mode .text-light-1 {
    color: var(--eman-text-muted) !important;
}

html.-dark-mode .border-bottom-light,
html.-dark-mode .border-light {
    border-color: var(--eman-border-light) !important;
}

html.-dark-mode .shadow-2,
html.-dark-mode .shadow-4 {
    box-shadow: var(--shadow-card) !important;
}

/* ── Site header ─────────────────────────────────────── */
html.-dark-mode .header.-type-4.bg-white {
    background-color: var(--eman-bg) !important;
    border-bottom-color: var(--eman-border-light) !important;
}

html.-dark-mode .header.-type-4 .header-search-field input {
    background: var(--eman-bg-subtle);
    border-color: var(--eman-border-light);
    color: var(--eman-text-dark);
}

html.-dark-mode .header.-type-4 .eman-header-btn.-purple-3 {
    background: var(--eman-bg-subtle);
    color: var(--eman-purple-light) !important;
}

html.-dark-mode .header.-type-4 .button.eman-header-btn.-purple-1 {
    background-color: var(--eman-purple) !important;
    border-color: var(--eman-purple) !important;
    color: #fff !important;
}

html.-dark-mode .header.-type-4 .button.eman-header-btn.-purple-1:hover {
    background-color: var(--eman-purple-light) !important;
    border-color: var(--eman-purple-light) !important;
    color: #fff !important;
}

html.-dark-mode .header.-type-4 .button.eman-header-btn-login {
    color: var(--eman-text-light) !important;
}

html.-dark-mode .header.-type-4 .button.eman-header-btn-login:hover {
    color: var(--eman-purple-light) !important;
}

html.-dark-mode .header .menu__nav li > a {
    color: var(--eman-text-light) !important;
}

html.-dark-mode .header .menu__nav li.is-active > a,
html.-dark-mode .header .menu__nav li > a:hover {
    color: var(--eman-purple-light) !important;
}

html.-dark-mode .profile-pill {
    background-color: var(--eman-bg-subtle);
    border-color: var(--eman-border-light);
}

html.-dark-mode .profile-pill .name {
    color: var(--eman-text-dark);
}

html.-dark-mode .custom-profile-menu {
    background-color: var(--eman-bg);
    border-color: var(--eman-border-light);
    box-shadow: var(--shadow-elevated);
}

html.-dark-mode .custom-menu-header {
    border-bottom-color: var(--eman-border-light);
}

html.-dark-mode .custom-menu-item {
    color: var(--eman-text-light);
}

html.-dark-mode .custom-menu-item:hover {
    background-color: var(--eman-bg-subtle);
    color: var(--eman-purple-light);
}

html.-dark-mode .header.-type-4 .header-menu .header-menu__content {
    background: var(--eman-bg);
}

html.-dark-mode .header.-type-4 .header-menu .menu__nav li > a {
    color: var(--eman-text-light) !important;
}

html.-dark-mode .header.-type-4 .header-menu .menu__nav li.is-active > a {
    color: var(--eman-purple-light) !important;
}

html.-dark-mode .header.-type-4 .mobile-user-links {
    border-color: var(--eman-border-light);
}

html.-dark-mode .header.-type-4 .mobile-user-links a {
    color: var(--eman-text-light);
}

/* ── Site footer ─────────────────────────────────────── */
html.-dark-mode .eman-site-footer {
    background: linear-gradient(180deg, var(--eman-bg-light) 0%, var(--eman-bg) 52%);
    border-top-color: var(--eman-border-light);
}

html.-dark-mode .eman-site-footer__bar,
html.-dark-mode .eman-site-footer__bottom {
    border-color: var(--eman-border-light);
}

html.-dark-mode .eman-site-footer__bio,
html.-dark-mode .eman-site-footer__list a,
html.-dark-mode .eman-site-footer__list li,
html.-dark-mode .eman-site-footer__legal a {
    color: var(--eman-text-light);
}

html.-dark-mode .eman-site-footer__copyright {
    color: var(--eman-text-dark);
}

html.-dark-mode .eman-site-footer__social a {
    background: var(--eman-bg-subtle);
    border-color: var(--eman-border-light);
    color: var(--eman-text-light);
}

html.-dark-mode .eman-site-footer__social a:hover {
    color: var(--eman-purple-light);
    border-color: rgba(212, 165, 224, 0.4);
}

/* ── Homepage ────────────────────────────────────────── */
html.-dark-mode .eman-home h1,
html.-dark-mode .eman-home h2,
html.-dark-mode .eman-home h3,
html.-dark-mode .eman-home h4 {
    color: var(--eman-purple-light);
}

html.-dark-mode .eman-home p {
    color: var(--eman-text-light);
}

html.-dark-mode .hero-section {
    background-color: var(--eman-bg-light);
}

html.-dark-mode .hero-section::before {
    opacity: 0.12;
}

html.-dark-mode .hero-title {
    color: var(--eman-purple-light);
}

html.-dark-mode .level-card,
html.-dark-mode .feature-card,
html.-dark-mode .testimonial-card,
html.-dark-mode .latest-lessons-section .lesson-card {
    background: var(--eman-bg);
    border-color: var(--eman-border-light);
    box-shadow: var(--shadow-card);
}

html.-dark-mode .level-card:hover,
html.-dark-mode .feature-card:hover {
    border-color: rgba(212, 165, 224, 0.35);
}

html.-dark-mode .stats-section,
html.-dark-mode .features-section,
html.-dark-mode .levels-section {
    background-color: var(--eman-bg-light);
}

html.-dark-mode .cta-section {
    background: linear-gradient(135deg, rgba(106, 27, 154, 0.35), rgba(15, 19, 25, 0.95));
}

html.-dark-mode .latest-lessons-section {
    background-color: var(--eman-purple);
}

html.-dark-mode .latest-lessons-section .lesson-card {
    background-color: var(--eman-bg);
}

html.-dark-mode .latest-lessons-section .lesson-card .lesson-title {
    color: var(--eman-text-dark);
}

/* ── Auth / enroll ───────────────────────────────────── */
html.-dark-mode .auth-recovery-wrapper,
html.-dark-mode .auth-enroll-wrapper,
html.-dark-mode .enroll-wrapper {
    background: var(--eman-bg-light);
}

html.-dark-mode .auth-recovery-card,
html.-dark-mode .auth-enroll-card {
    background: var(--eman-bg);
    border: 1px solid var(--eman-border-light);
    box-shadow: var(--shadow-elevated);
}

html.-dark-mode .auth-recovery-card__header {
    background: linear-gradient(135deg, rgba(106, 27, 154, 0.2), var(--eman-bg-subtle));
}

html.-dark-mode .auth-recovery-card h1,
html.-dark-mode .auth-enroll-card h1 {
    color: var(--eman-purple-light);
}

html.-dark-mode .auth-recovery-card label,
html.-dark-mode .auth-enroll-card label {
    color: var(--eman-text-dark);
}

html.-dark-mode .auth-recovery-card input,
html.-dark-mode .auth-enroll-card input,
html.-dark-mode .auth-recovery-card select,
html.-dark-mode .auth-enroll-card select {
    background: var(--eman-bg-subtle);
    border-color: var(--eman-border-light);
    color: var(--eman-text-dark);
}

html.-dark-mode .auth-recovery-card input:focus,
html.-dark-mode .auth-enroll-card input:focus {
    border-color: var(--eman-purple-light);
    background: var(--eman-bg);
}

html.-dark-mode .enroll-step-card {
    background: var(--eman-bg);
    border-color: var(--eman-border-light);
}

html.-dark-mode .enroll-progress-bar {
    background: var(--eman-bg-subtle);
}

/* ── Catalog / lessons ───────────────────────────────── */
html.-dark-mode .catalog-filter-bar,
html.-dark-mode .catalog-lesson-card,
html.-dark-mode .lesson-card-public {
    background: var(--eman-bg);
    border-color: var(--eman-border-light);
}

html.-dark-mode .catalog-filter-bar__search input,
html.-dark-mode .catalog-filter-bar__sort select {
    background: var(--eman-bg-subtle);
    border-color: var(--eman-border-light);
    color: var(--eman-text-dark);
}

html.-dark-mode .catalog-page-header__title {
    color: var(--eman-purple-light);
}

/* ── Lesson detail ───────────────────────────────────── */
/* Lesson detail — see lesson-detail-dark.css */


/* ── Info / legal pages ──────────────────────────────── */
html.-dark-mode .legal-hero {
    background: linear-gradient(135deg, rgba(106, 27, 154, 0.2) 0%, var(--eman-bg) 100%);
}

html.-dark-mode .legal-content-section .accordion.-type-3 .accordion__item,
html.-dark-mode .legal-content-section .accordion.-type-3 .accordion__button,
html.-dark-mode .legal-content-section .accordion.-type-3 .accordion__content,
html.-dark-mode .legal-content-section .info-page-toc,
html.-dark-mode .legal-content-section .info-page-toc-mobile {
    background: var(--eman-bg);
    border-color: var(--eman-border-light);
    color: var(--eman-text-dark);
}

html.-dark-mode .legal-content-section .privacy-summary-box {
    background: linear-gradient(135deg, rgba(106, 27, 154, 0.18), rgba(77, 208, 225, 0.08));
    border-color: var(--eman-border-light);
}

html.-dark-mode .legal-content-section .privacy-summary-box p,
html.-dark-mode .legal-content-section .accordion.-type-3 .accordion__content p,
html.-dark-mode .legal-content-section .accordion.-type-3 .accordion__content li {
    color: var(--eman-text-light);
}

html.-dark-mode .info-page-hero {
    background: linear-gradient(180deg, rgba(106, 27, 154, 0.15), var(--eman-bg-light));
}

/* ── Dashboard polish ────────────────────────────────── */
html.-dark-mode .eman-dash-header {
    background: var(--eman-bg) !important;
    border-bottom-color: var(--eman-border-light) !important;
}

html.-dark-mode .eman-dash-sidebar {
    background: var(--eman-bg-light) !important;
    border-color: var(--eman-border-light) !important;
}

html.-dark-mode .eman-dash-sidebar__profile {
    background: var(--eman-bg-subtle);
    border-color: var(--eman-border-light);
}

html.-dark-mode .eman-dash-sidebar__link {
    color: var(--eman-text-light);
}

html.-dark-mode .eman-dash-sidebar__item.-is-active .eman-dash-sidebar__link {
    background: rgba(106, 27, 154, 0.2);
    color: var(--eman-purple-light);
}

html.-dark-mode .stat-card,
html.-dark-mode .dash-lesson-card,
html.-dark-mode .wallet-card {
    background: var(--eman-bg);
    border-color: var(--eman-border-light);
}

html.-dark-mode .tabs__controls {
    border-color: var(--eman-border-light);
}

html.-dark-mode .tabs__button {
    color: var(--eman-text-muted);
}

html.-dark-mode .tabs__button.is-active {
    color: var(--eman-purple-light);
    border-color: var(--eman-purple-light);
}

/* ── Watch page ──────────────────────────────────────── */
html.-dark-mode.eman-watch .content-wrapper {
    background: var(--eman-bg-light);
}

html.-dark-mode.eman-watch .watch-content-card,
html.-dark-mode.eman-watch .watch-sidebar,
html.-dark-mode.eman-watch .watch-local-nav,
html.-dark-mode.eman-watch .eman-watch-stat,
html.-dark-mode.eman-watch .custom-alert-box {
    background: var(--eman-bg);
    border-color: var(--eman-border-light);
    color: var(--eman-text-dark);
}

html.-dark-mode.eman-watch .watch-section-header {
    background: var(--eman-bg-subtle);
    color: var(--eman-text-light);
}

html.-dark-mode.eman-watch .watch-content-details h1 {
    color: var(--eman-purple-light);
}

html.-dark-mode.eman-watch .watch-content-item-btn:hover {
    background: rgba(106, 27, 154, 0.14);
}

html.-dark-mode.eman-watch .watch-content-item-btn.active {
    background: rgba(106, 27, 154, 0.22);
    border-color: rgba(212, 165, 224, 0.35);
}

html.-dark-mode.eman-watch .eman-quiz-header {
    background: var(--eman-bg);
    border-color: var(--eman-border-light);
}

html.-dark-mode.eman-watch .eman-quiz-form .quiz-question-item {
    background: var(--eman-bg-subtle);
    border-color: var(--eman-border-light);
}

html.-dark-mode.eman-watch .eman-quiz-submit-bar {
    background: rgba(24, 31, 44, 0.96);
    border-color: var(--eman-border-light);
}

html.-dark-mode.eman-watch .eman-watch-stats-toggle {
    background: var(--eman-bg);
    border-color: var(--eman-border-light);
    color: var(--eman-purple-light);
}

/* ── Preloader ───────────────────────────────────────── */
html.-dark-mode .preloader.js-preloader .preloader__bg {
    background-color: var(--eman-purple);
}

/* ── Meta theme color (PWA / browser chrome) ─────────── */
html.-dark-mode {
    --eman-meta-theme-color: #0f1319;
}