/* ===== Dark Mode v3.1 - EnglishMaster ===== */
/* FIXED: contrast issues — all text now clearly readable */

[data-theme="dark"] {
    --primary: #E8573A;
    --primary-dark: #C9422A;
    --primary-light: #F0845C;
    --primary-pale: rgba(232,87,58,0.15);
    --gold: #F0C75E;
    --gold-light: rgba(240,199,94,0.18);
    --bg: #0F0E0D;
    --surface: #1A1918;
    --cream: #1A1918;
    --card-bg: #221F1E;
    --border: #2C2A28;
    --border-light: #221F1E;
    --text-main: #E7E5E4;
    --text-heading: #F5F5F4;
    --text-light: #A8A29E;
    --text-muted: #78716C;
    --secondary: #A8A29E;
    --dark: #F5F5F4;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
    --shadow: 0 4px 12px rgba(0,0,0,0.45);
    --shadow-md: 0 8px 30px rgba(0,0,0,0.5);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.6);
    --success: #4ADE80;
    --success-bg: rgba(74,222,128,0.15);
    --error: #FB7185;
    --error-bg: rgba(251,113,133,0.15);
}

/* ===== Global ===== */
[data-theme="dark"] body { background: var(--bg); color: var(--text-main); }

/* ===== Sidebar ===== */
[data-theme="dark"] .sidebar { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .sidebar li,
[data-theme="dark"] .sidebar span,
[data-theme="dark"] .sidebar a { color: var(--text-main) !important; }
[data-theme="dark"] .sidebar li:hover { background: var(--card-bg) !important; }
[data-theme="dark"] .sidebar li[style*="border-left:3px solid var(--primary)"] span,
[data-theme="dark"] .sidebar li[style*="font-weight:600"] span { color: var(--primary) !important; }

/* ===== Main Content ===== */
[data-theme="dark"] .main-content { background: var(--bg); }
[data-theme="dark"] .theory-panel { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .practice-panel { background: var(--bg); }

/* ===== Web Interface (Grammar Page) ===== */
[data-theme="dark"] .web-interface { background: var(--surface); }
[data-theme="dark"] .web-nav { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .web-title-section { 
    background: rgba(232,87,58,0.08); 
    border-color: var(--primary); 
}
[data-theme="dark"] .web-title { color: var(--primary) !important; }
[data-theme="dark"] .web-section-title { color: var(--primary) !important; }
[data-theme="dark"] .web-content { color: var(--text-main); }
[data-theme="dark"] .web-text,
[data-theme="dark"] .web-content p,
[data-theme="dark"] .theory-content p,
[data-theme="dark"] .theory-section p { color: var(--text-main) !important; }

/* ===== Example Boxes — high contrast ===== */
[data-theme="dark"] .web-example { 
    background: rgba(232,87,58,0.1) !important; 
    border-left-color: var(--primary) !important; 
    color: #FDCFC6 !important;
}
[data-theme="dark"] .web-example span { color: #FDCFC6 !important; }
[data-theme="dark"] .example-box {
    background: rgba(232,87,58,0.1);
    border-color: var(--primary);
    color: #FDCFC6;
}

/* ===== Section Tabs ===== */
[data-theme="dark"] .section-tab { 
    background: var(--card-bg) !important; 
    border-color: var(--primary) !important; 
    color: var(--primary) !important; 
}
[data-theme="dark"] .section-tab.poster-active { 
    background: var(--primary) !important; 
    color: #0F0E0D !important; 
}

/* ===== Exercise Cards ===== */
[data-theme="dark"] .exercise-card { 
    background: var(--card-bg) !important; 
    border-color: var(--border) !important; 
}
[data-theme="dark"] .exercise-card:hover { border-color: var(--primary) !important; }
[data-theme="dark"] .question-text { color: var(--text-heading) !important; }

/* ===== Option Buttons — clearly readable ===== */
[data-theme="dark"] .option-btn { 
    background: var(--surface) !important; 
    border-color: var(--border) !important; 
    color: var(--text-main) !important; 
}
[data-theme="dark"] .option-btn:hover:not(:disabled) { 
    border-color: var(--primary) !important; 
    background: var(--primary-pale) !important; 
    color: var(--primary) !important; 
}
[data-theme="dark"] .option-btn.selected { 
    border-color: var(--primary) !important; 
    background: var(--primary-pale) !important; 
    color: var(--primary-light) !important; 
}
[data-theme="dark"] .option-btn.correct { 
    border-color: var(--success) !important; 
    background: var(--success-bg) !important; 
    color: var(--success) !important; 
}
[data-theme="dark"] .option-btn.incorrect { 
    border-color: var(--error) !important; 
    background: var(--error-bg) !important; 
    color: var(--error) !important; 
}

/* ===== Explanation Box ===== */
[data-theme="dark"] .explanation-box { 
    background: rgba(232,87,58,0.1) !important; 
    border-color: var(--primary) !important; 
    color: var(--text-main) !important;
}
[data-theme="dark"] .explanation-box strong { color: var(--primary) !important; }

/* ===== Settings Bar ===== */
[data-theme="dark"] .settings-bar,
[data-theme="dark"] div[style*="background:#F8F9FA"],
[data-theme="dark"] div[style*="background: #F8F9FA"] { 
    background: var(--card-bg) !important; 
    border-color: var(--border) !important; 
}
[data-theme="dark"] .toggle-label,
[data-theme="dark"] .toggle-switch span { color: var(--text-main) !important; }

/* ===== Progress Indicator ===== */
[data-theme="dark"] .progress-indicator,
[data-theme="dark"] div[style*="background:#F0F8FA"],
[data-theme="dark"] div[style*="background:var(--primary-pale)"] {
    background: var(--primary-pale) !important;
    color: var(--primary) !important;
}

/* ===== Hint & Feedback ===== */
[data-theme="dark"] div[id^="hint-"] { 
    background: var(--card-bg) !important; 
    color: var(--text-main) !important; 
}
[data-theme="dark"] div[id^="feedback-"] { color: var(--text-heading) !important; }

/* ===== Search Modal ===== */
[data-theme="dark"] .search-modal { background: var(--surface); }
[data-theme="dark"] .search-input { color: var(--text-heading); }
[data-theme="dark"] .search-result-item:hover { background: var(--card-bg); }
[data-theme="dark"] .search-result-item div { color: var(--text-main); }

/* ===== Auth Modal ===== */
[data-theme="dark"] .modal { background: var(--surface); }
[data-theme="dark"] .modal h2 { color: var(--primary); }
[data-theme="dark"] .modal-close { background: var(--card-bg); color: var(--text-light); }
[data-theme="dark"] .form-group label { color: var(--text-heading) !important; }
[data-theme="dark"] .form-group input { 
    background: var(--bg) !important; 
    border-color: var(--border) !important; 
    color: var(--text-heading) !important; 
}
[data-theme="dark"] .form-group input:focus { 
    border-color: var(--primary) !important; 
    background: var(--surface) !important; 
}

/* ===== Tool Icons ===== */
[data-theme="dark"] .tool-icon { 
    background: var(--card-bg) !important; 
    border-color: var(--border) !important; 
    color: var(--primary) !important; 
}
[data-theme="dark"] .tool-icon:hover { 
    background: var(--surface) !important; 
    border-color: var(--primary) !important; 
}

/* ===== Audio Button ===== */
[data-theme="dark"] .audio-btn { background: var(--primary) !important; color: #0F0E0D !important; }

/* ===== Breadcrumb ===== */
[data-theme="dark"] .breadcrumb { color: var(--text-light) !important; }
[data-theme="dark"] .breadcrumb span { color: var(--text-light) !important; }

/* ===== Try It Button ===== */
[data-theme="dark"] .try-btn { 
    background: var(--primary-pale) !important; 
    color: var(--primary) !important; 
}

/* ===== Buttons ===== */
[data-theme="dark"] .btn-primary { background: var(--primary); color: #0F0E0D; }
[data-theme="dark"] .btn-primary:hover { background: var(--primary-light); }
[data-theme="dark"] .btn-outline { 
    background: var(--surface); 
    border-color: var(--border); 
    color: var(--text-main); 
}
[data-theme="dark"] .btn-outline:hover { 
    border-color: var(--primary); 
    color: var(--primary); 
}

/* ===== Navigation buttons (prev/next unit) ===== */
[data-theme="dark"] button[onclick*="changeUnit"] {
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}
[data-theme="dark"] button[onclick*="changeUnit"]:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}
[data-theme="dark"] button[onclick*="changeUnit"] span { color: inherit !important; }

/* ===== Inline styles override — catch stray hardcoded colors ===== */
[data-theme="dark"] [style*="color:#444"],
[data-theme="dark"] [style*="color: #444"],
[data-theme="dark"] [style*="color:#2C2C2C"],
[data-theme="dark"] [style*="color: #2C2C2C"] { color: var(--text-main) !important; }

[data-theme="dark"] [style*="background:#F8F9FA"],
[data-theme="dark"] [style*="background: #F8F9FA"],
[data-theme="dark"] [style*="background:#FAFAFA"],
[data-theme="dark"] [style*="background: #FAFAFA"],
[data-theme="dark"] [style*="background: #E8F0F2"],
[data-theme="dark"] [style*="background:#E8F0F2"] { background: var(--card-bg) !important; }

[data-theme="dark"] [style*="border-bottom:1px solid #E8F0F2"],
[data-theme="dark"] [style*="border-top:1px solid #E8F0F2"],
[data-theme="dark"] [style*="border: 1px solid #E8F0F2"] { border-color: var(--border) !important; }

[data-theme="dark"] hr { border-color: var(--border) !important; }

/* ===== Scrollbar ===== */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3A3835; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4A4845; }

/* ===== Dark mode toggle button ===== */
.dark-mode-toggle {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--border, #E8E2D8);
    background: var(--surface, white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.25s;
}
.dark-mode-toggle:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
[data-theme="dark"] .dark-mode-toggle { 
    background: var(--card-bg); 
    border-color: var(--border); 
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: inline; }

/* ===== Dashboard dark overrides ===== */
[data-theme="dark"] .dashboard-header { background: linear-gradient(135deg, #7C2D12, #C9422A); }
[data-theme="dark"] .glass-card { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .stat-card h3 { color: var(--text-light) !important; }
[data-theme="dark"] .stat-value { color: var(--primary) !important; }
[data-theme="dark"] .action-card { background: var(--card-bg) !important; border-color: var(--border) !important; }
[data-theme="dark"] .action-card h2,
[data-theme="dark"] .action-card h3 { color: var(--text-heading) !important; }
[data-theme="dark"] .action-card p { color: var(--text-main) !important; }
[data-theme="dark"] .leaderboard-table th { color: var(--text-light); }
[data-theme="dark"] .leaderboard-table td { border-color: var(--border); color: var(--text-main); }
[data-theme="dark"] .portal-nav-item { color: var(--text-main) !important; }
[data-theme="dark"] .portal-nav-item:hover { background: var(--card-bg) !important; color: var(--primary) !important; }
[data-theme="dark"] .portal-nav-item.active { background: var(--primary-pale) !important; color: var(--primary) !important; }
[data-theme="dark"] .welcome-text { color: var(--text-light) !important; }
[data-theme="dark"] .roadmap-item { color: var(--text-main) !important; }
[data-theme="dark"] .roadmap-item:hover { background: var(--card-bg) !important; }

/* ===== Landing page dark ===== */
[data-theme="dark"] .nav.scrolled { background: rgba(15,17,23,0.92); border-color: var(--border); }
[data-theme="dark"] .hero-badge { background: rgba(240,199,94,0.15); color: var(--gold); }
[data-theme="dark"] .hero-title { color: var(--text-heading); }
[data-theme="dark"] .hero-title em { color: var(--primary); }
[data-theme="dark"] .hero-title em::after { background: rgba(232,87,58,0.15); }
[data-theme="dark"] .hero-sub { color: var(--text-light); }
[data-theme="dark"] .hero-stat-num { color: var(--primary); }
[data-theme="dark"] .hero-stat-label { color: var(--text-muted); }
[data-theme="dark"] .hero-stats { border-color: var(--border); }
[data-theme="dark"] .feature-card { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .feature-card h3 { color: var(--text-heading); }
[data-theme="dark"] .feature-card p { color: var(--text-light); }
[data-theme="dark"] .section-title { color: var(--text-heading); }
[data-theme="dark"] .section-sub { color: var(--text-light); }
[data-theme="dark"] .about-card { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .about-text h3 { color: var(--text-heading); }
[data-theme="dark"] .about-text p { color: var(--text-light); }
[data-theme="dark"] .about-text strong { color: var(--primary); }
[data-theme="dark"] .btn-ghost { border-color: var(--border); color: var(--primary); }
[data-theme="dark"] .btn-ghost:hover { border-color: var(--primary); background: var(--primary-pale); }
[data-theme="dark"] .step-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .footer { background: #080A0D; }
[data-theme="dark"] .lang-toggle { background: rgba(232,87,58,0.1); }
[data-theme="dark"] .lang-btn { color: var(--text-light); }

/* ===== Keyboard help modal ===== */
[data-theme="dark"] #keyboard-help-modal > div { background: var(--surface) !important; }
[data-theme="dark"] #keyboard-help-modal kbd { background: var(--card-bg) !important; border-color: var(--border) !important; color: var(--text-light) !important; }

/* ===== Guest banner ===== */
[data-theme="dark"] #guest-banner { background: linear-gradient(135deg, #7C2D12, #C9422A) !important; }

/* ===== Grammar page: inline style overrides ===== */
[data-theme="dark"] .app-container { background: var(--bg) !important; }
[data-theme="dark"] .main-content { background: var(--bg) !important; }
[data-theme="dark"] [style*="background: #FAFAFA"],
[data-theme="dark"] [style*="background:#FAFAFA"] { background: var(--bg) !important; }
[data-theme="dark"] [style*="background: #E8F0F2"],
[data-theme="dark"] [style*="background:#E8F0F2"],
[data-theme="dark"] [style*="background: #F8F9FA"],
[data-theme="dark"] [style*="background:#F8F9FA"] { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color: #64748b"],
[data-theme="dark"] [style*="color:#94a3b8"] { color: var(--text-light) !important; }
[data-theme="dark"] [style*="background:#f0fdfa"],
[data-theme="dark"] [style*="background:var(--bg, #f0fdfa)"] { background: var(--surface) !important; }
[data-theme="dark"] [style*="border:1px solid #E8F0F2"],
[data-theme="dark"] [style*="border:1px solid var(--border, #e2e8f0)"] { border-color: var(--border) !important; }

/* ===== Dashboard: additional dark mode fixes ===== */
[data-theme="dark"] .about-section { background: rgba(232,87,58,0.06) !important; }
[data-theme="dark"] .continue-learning-card { background: rgba(217,119,6,0.08) !important; border-color: rgba(217,119,6,0.2) !important; }
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.6) !important; }

/* ===== Landing page overrides via darkmode.css ===== */
[data-theme="dark"] .hero { background: linear-gradient(135deg, #1A1918 0%, #221F1E 100%) !important; }
[data-theme="dark"] .feature-card { background: #1A1918 !important; border-color: #2C2A28 !important; }
[data-theme="dark"] .cta-section { background: #1A1918 !important; }
[data-theme="dark"] footer { background: #0C0A09 !important; }

/* ===== Vocab page: Tailwind class dark mode overrides ===== */
[data-theme="dark"] .bg-\[#FDFAF5\],
[data-theme="dark"] [class*="bg-[#FDFAF5]"] { background: #0F0E0D !important; }
[data-theme="dark"] .border-\[#E8E2D8\],
[data-theme="dark"] [class*="border-[#E8E2D8]"] { border-color: #2C2A28 !important; }
[data-theme="dark"] .border-r { border-color: #2C2A28 !important; }
[data-theme="dark"] .border-green-100 { border-color: #2C2A28 !important; }
[data-theme="dark"] .border-gray-100 { border-color: #2C2A28 !important; }
[data-theme="dark"] .bg-gray-200 { background: #2C2A28 !important; }
[data-theme="dark"] .text-gray-500 { color: #A8A29E !important; }
[data-theme="dark"] .text-gray-700 { color: #D6D3D1 !important; }
[data-theme="dark"] .text-gray-800 { color: #E7E5E4 !important; }

/* ===== Vocab page: progress chart dark mode ===== */
[data-theme="dark"] .chart-wrapper { filter: brightness(0.85) contrast(1.1); }

/* ===== ALL PAGES: form inputs dark mode ===== */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--bg, #0F0E0D) !important;
  border-color: var(--border, #2C2A28) !important;
  color: var(--text-main, #E7E5E4) !important;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--primary, #E8573A) !important;
}
[data-theme="dark"] input::placeholder { color: #78716C !important; }

/* ===== ALL PAGES: modal dark mode ===== */
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-overlay .modal { 
  background: var(--surface, #1A1918) !important;
  color: var(--text-main, #E7E5E4) !important;
}
[data-theme="dark"] .modal h2,
[data-theme="dark"] .modal h3 { color: #F5F5F4 !important; }
[data-theme="dark"] .modal label { color: #D6D3D1 !important; }
[data-theme="dark"] .modal-close { 
  background: #221F1E !important;
  color: #78716C !important;
}

/* ===== Scrollbar dark mode ===== */
[data-theme="dark"] ::-webkit-scrollbar { width: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: #0F0E0D; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2C2A28; border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3A3835; }