/* 
   Dark Mode Overrides 
   Most dark mode styling is handled via CSS variables in style.css.
   This file contains specific overrides for complex components.
*/

/* Lesson Content Specifics */
/* We want to ensure that teacher-injected content looks good */

[data-theme="dark"] .lesson-content {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}

/* Force elements inside lesson content to respect the theme */
[data-theme="dark"] .lesson-content *:not([style*="color"]):not([class]):not(pre):not(code) {
    color: var(--text-main) !important;
    background-color: transparent !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .lesson-content a:not([style*="color"]):not([class]) {
    color: var(--link-color) !important;
}

/* Fix for Code Blocks and Preformatted text in Dark Mode */
[data-theme="dark"] .lesson-content pre,
[data-theme="dark"] .lesson-content code,
[data-theme="dark"] .lesson-content .card,
[data-theme="dark"] .lesson-content .box {
    background-color: #2b2b2b !important;
    color: #f8f8f2 !important;
    border-color: #404040 !important;
}

/* Specific override for .code-inline to be red with lighter gray background */
[data-theme="dark"] .code-inline,
[data-theme="dark"] .lesson-content .code-inline {
    color: #ff6b6b !important; /* Red text */
    background-color: #2d2d2d !important; /* Slightly lighter gray than site background */
    border: 1px solid #404040;
}

/* Special Boxes (Definitions, Exercises, etc.) */
/* These need specific dark mode colors to remain visible but not too bright */

[data-theme="dark"] .lesson-content .def {
    background: rgba(217, 66, 66, 0.1);
    border-left-color: #d9534f;
}

[data-theme="dark"] .lesson-content .ex {
    background: rgba(40, 167, 69, 0.1);
    border-left-color: #28a745;
}

[data-theme="dark"] .lesson-content .ques {
    background: rgba(255, 204, 0, 0.1);
    border-left-color: #ffcc00;
}

[data-theme="dark"] .lesson-content .violet {
    background: rgba(106, 13, 173, 0.1) !important;
    border-left-color: #6a0dad !important;
    color: var(--text-main) !important;
}

/* Ensure text inside these boxes is readable */
[data-theme="dark"] .lesson-content .def *,
[data-theme="dark"] .lesson-content .ex *,
[data-theme="dark"] .lesson-content .ques *,
[data-theme="dark"] .lesson-content .violet * {
    color: var(--text-main) !important;
}

/* Python Playground Container */
[data-theme="dark"] .python-playground {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

/* Images */
[data-theme="dark"] img {
    opacity: 0.9;
    transition: opacity 0.3s;
}

[data-theme="dark"] img:hover {
    opacity: 1;
}

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 12px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-body);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 6px;
    border: 3px solid var(--bg-body);
}

/* Revision Sheets - Force dark text in dark mode (to stay visible on white backgrounds) */
[data-theme="dark"] .revision-content {
    background-color: #ffffff;
    color: #2c3e50 !important;
    padding: 20px;
    border-radius: 8px;
}

[data-theme="dark"] .revision-content h1,
[data-theme="dark"] .revision-content h2,
[data-theme="dark"] .revision-content h3,
[data-theme="dark"] .revision-content h4,
[data-theme="dark"] .revision-content h5,
[data-theme="dark"] .revision-content h6 {
    color: #2c3e50 !important;
}

/* Fix for Lesson Title in Dark Mode */
[data-theme="dark"] h1 {
    color: #ffffff !important;
}

/* Fix for Sidebar Revision Sheets (Fiches) in Dark Mode */
[data-theme="dark"] .exercise-link {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .exercise-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .exercise-type {
    background: rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
}

/* Force Exercise Description to stay Light in Dark Mode (as requested) */
[data-theme="dark"] .exercise-description {
    /* Redefine variables locally so children using them adapt */
    --text-main: #000000;
    --bg-card: #ffffff;
    --border-color: #dee2e6;
    
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #dee2e6 !important;
}

/* Ensure code blocks inside the description keep their own dark styling if defined, 
   or fall back to a readable dark block if not. */
[data-theme="dark"] .exercise-description pre {
    /* Only force if it doesn't have its own background set via style block (hard to detect in CSS)
       But we can provide a default that looks good. */
    color: #f8f8f2; /* Default light text for code */
}

/* We remove the aggressive * selector to allow user styles (like blue h2) to work */