/* ═══════════════════════════════════════════════════════════
   DARK MODE - Automatic + Manual Toggle
   ═══════════════════════════════════════════════════════════ */

/* ─── System preference dark mode ─── */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary:        #0F172A;
        --bg-secondary:      #1E293B;
        --bg-tertiary:       #334155;
        --bg-elevated:       #1E293B;

        --text-primary:      #F1F5F9;
        --text-secondary:    #94A3B8;
        --text-tertiary:     #64748B;

        --border-color:      #334155;
        --border-light:      #1E293B;

        --card-bg:           #1E293B;
        --card-border:       #334155;

        --input-bg:          #0F172A;
        --input-border:      #334155;
        --input-focus:       #475569;

        --header-bg:         #0F172A;
        --header-border:     #1E293B;

        --modal-overlay:     rgba(0, 0, 0, 0.7);

        --success-bg:        #10B98115;
        --success-border:    #10B98130;
        --success-text:      #34D399;

        --warning-bg:        #F59E0B15;
        --warning-border:    #F59E0B30;
        --warning-text:      #FBBF24;

        --error-bg:          #EF444415;
        --error-border:      #EF444430;
        --error-text:        #F87171;

        --info-bg:           #3B82F615;
        --info-border:       #3B82F630;
        --info-text:         #60A5FA;

        --shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md:         0 4px 6px rgba(0, 0, 0, 0.4);
        --shadow-lg:         0 10px 15px rgba(0, 0, 0, 0.5);

        --gray-50:           #1E293B;
        --gray-100:          #1E293B;
        --gray-200:          #334155;
        --gray-300:          #475569;
    }

    /* Global element overrides */
    body { background: var(--bg-primary); color: var(--text-primary); }

    img { filter: brightness(0.85); }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track { background: var(--bg-secondary); }
    ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
}

/* ─── Manual dark mode toggle ─── */
[data-theme="dark"] {
    --bg-primary:        #0F172A;
    --bg-secondary:      #1E293B;
    --bg-tertiary:       #334155;
    --bg-elevated:       #1E293B;

    --text-primary:      #F1F5F9;
    --text-secondary:    #94A3B8;
    --text-tertiary:     #64748B;

    --border-color:      #334155;
    --border-light:      #1E293B;

    --card-bg:           #1E293B;
    --card-border:       #334155;

    --input-bg:          #0F172A;
    --input-border:      #334155;
    --input-focus:       #475569;

    --header-bg:         #0F172A;
    --header-border:     #1E293B;

    --modal-overlay:     rgba(0, 0, 0, 0.7);

    --success-bg:        #10B98115;
    --success-border:    #10B98130;
    --success-text:      #34D399;

    --warning-bg:        #F59E0B15;
    --warning-border:    #F59E0B30;
    --warning-text:      #FBBF24;

    --error-bg:          #EF444415;
    --error-border:      #EF444430;
    --error-text:        #F87171;

    --info-bg:           #3B82F615;
    --info-border:       #3B82F630;
    --info-text:         #60A5FA;

    --shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:         0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg:         0 10px 15px rgba(0, 0, 0, 0.5);

    --gray-50:           #1E293B;
    --gray-100:          #1E293B;
    --gray-200:          #334155;
    --gray-300:          #475569;
}

[data-theme="light"] {
    --bg-primary:        #FFFFFF;
    --bg-secondary:      #F7FAFC;
    --bg-tertiary:       #EDF2F7;
    --bg-elevated:       #FFFFFF;

    --text-primary:      #1A202C;
    --text-secondary:    #4A5568;
    --text-tertiary:     #718096;

    --border-color:      #E2E8F0;
    --border-light:      #EDF2F7;

    --shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:         0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg:         0 10px 15px rgba(0, 0, 0, 0.15);
}

/* ═══════════════════════════════════════════════════════════
   Dark Mode Component Overrides
   Applied via @media AND [data-theme="dark"]
   ═══════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
    .auth-visual { background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%); }

    .dashboard-card, .stat-card, .course-card, .badge-card,
    .track-card, .project-card, .exercise-card, .notification-item {
        background: var(--card-bg);
        border-color: var(--card-border);
    }

    /* Buttons */
    .btn-secondary { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); }
    .btn-secondary:hover { background: var(--bg-tertiary); border-color: var(--text-tertiary); }
    .btn-ghost { color: var(--text-secondary); }
    .btn-ghost:hover { background: var(--bg-tertiary); color: var(--text-primary); }

    /* Forms */
    .form-input, .form-select, .form-textarea,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="url"], input[type="date"],
    input[type="datetime-local"], input[type="search"],
    select, textarea {
        background: var(--input-bg);
        border-color: var(--input-border);
        color: var(--text-primary);
    }

    .form-input:focus, .form-select:focus, .form-textarea:focus,
    input:focus, select:focus, textarea:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(0, 194, 168, 0.2);
    }

    /* Tables */
    table { background: var(--card-bg); }
    thead tr { background: var(--bg-tertiary); }
    tbody tr { border-color: var(--border-color); }
    tbody tr:hover { background: var(--bg-secondary); }

    /* Modals */
    .modal-overlay { background: var(--modal-overlay); }
    .modal, .modal-content { background: var(--card-bg); border-color: var(--card-border); }

    /* Dropdowns */
    .dropdown-menu { background: var(--card-bg); border-color: var(--border-color); }

    /* Toasts */
    .toast { background: var(--card-bg); border-color: var(--border-color); color: var(--text-primary); }
    .toast-container { background: transparent; }

    /* Alerts */
    .alert-success { background: var(--success-bg); color: var(--success-text); }
    .alert-warning { background: var(--warning-bg); color: var(--warning-text); }
    .alert-danger { background: var(--error-bg); color: var(--error-text); }
    .alert-info { background: var(--info-bg); color: var(--info-text); }

    /* Badges */
    .badge-success { background: var(--success-bg); color: var(--success-text); }
    .badge-warning { background: var(--warning-bg); color: var(--warning-text); }
    .badge-danger { background: var(--error-bg); color: var(--error-text); }
    .badge-info { background: var(--info-bg); color: var(--info-text); }
    .badge-neutral { background: var(--bg-tertiary); color: var(--text-secondary); }
    .badge-primary { background: rgba(0,194,168,0.15); color: var(--brand-secondary); }

    /* Pagination */
    .page-btn { background: var(--bg-secondary); color: var(--text-secondary); border-color: var(--border-color); }
    .page-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

    /* Cards */
    .card { background: var(--card-bg); border-color: var(--card-border); }

    /* Progress bar */
    .progress-bar { background: var(--bg-tertiary); }

    /* Empty state */
    .empty-state-title { color: var(--text-primary); }

    /* Tags */
    .tag { background: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border-color); }

    /* Code blocks */
    pre, code, .code-editor { background: #0D1117; border-color: #30363D; color: #C9D1D9; }

    /* Breadcrumb */
    .breadcrumb { color: var(--text-tertiary); }
    .breadcrumb a { color: var(--text-tertiary); }
    .breadcrumb .current { color: var(--text-primary); }

    /* Search results */
    .search-results { background: var(--card-bg); border-color: var(--border-color); }

    /* Sidebar */
    .sidebar { background: var(--sidebar-bg); }

    /* Header */
    .dashboard-header, .header { background: var(--header-bg); border-color: var(--header-border); }

    /* Sidebar links */
    .sidebar-link { color: var(--text-secondary); }
    .sidebar-link:hover { background: var(--sidebar-hover); color: var(--text-primary); }
    .sidebar-link.active { background: var(--sidebar-active); color: var(--brand-secondary); }

    /* Avatar background */
    .avatar { background: var(--bg-tertiary); }

    /* Spinner */
    .spinner { border-color: var(--bg-tertiary); border-top-color: var(--color-primary); }

    /* Filter tags */
    .filter-tag { background: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border-color); }

    /* Dropdown */
    .dropdown { background: var(--card-bg); border-color: var(--border-color); }

    /* Activity items */
    .activity-item { background: var(--card-bg); border-color: var(--border-color); }

    /* Enrolled course card */
    .enrolled-course-card { background: var(--card-bg); border-color: var(--border-color); }

    /* Streak, daily goal, xp level cards */
    .streak-card, .daily-goal-card, .xp-level-card {
        background: var(--card-bg);
        border-color: var(--card-border);
    }

    /* Profile */
    .profile-header { background: var(--card-bg); }

    /* Chapter / lesson items */
    .chapter-item, .lesson-item { background: var(--card-bg); border-color: var(--border-color); }

    /* MCQ options */
    .mcq-option { background: var(--bg-secondary); border-color: var(--border-color); }
    .mcq-option:hover { border-color: var(--color-primary); }
    .mcq-option.selected { background: rgba(0,194,168,0.1); border-color: var(--color-primary); }

    /* Tabs */
    .tab { color: var(--text-tertiary); }
    .tab:hover { color: var(--text-primary); }
    .tab.active { color: var(--color-primary); border-color: var(--color-primary); }
}

[data-theme="dark"] {
    .dashboard-card, .stat-card, .course-card, .badge-card,
    .track-card, .project-card, .exercise-card, .notification-item {
        background: var(--card-bg);
        border-color: var(--card-border);
    }

    .btn-secondary { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); }
    .btn-ghost { color: var(--text-secondary); }
    .btn-ghost:hover { background: var(--bg-tertiary); color: var(--text-primary); }

    .form-input, .form-select, .form-textarea,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="url"], input[type="date"],
    input[type="datetime-local"], input[type="search"],
    select, textarea {
        background: var(--input-bg);
        border-color: var(--input-border);
        color: var(--text-primary);
    }

    table { background: var(--card-bg); }
    thead tr { background: var(--bg-tertiary); }
    tbody tr:hover { background: var(--bg-secondary); }

    .modal, .modal-content { background: var(--card-bg); }
    .dropdown-menu { background: var(--card-bg); border-color: var(--border-color); }
    .toast { background: var(--card-bg); color: var(--text-primary); }
    .card { background: var(--card-bg); border-color: var(--card-border); }
    .progress-bar { background: var(--bg-tertiary); }
    .tag { background: var(--bg-tertiary); color: var(--text-secondary); }
    pre, code, .code-editor { background: #0D1117; color: #C9D1D9; }
    .sidebar-link { color: var(--text-secondary); }
    .sidebar-link:hover { background: var(--sidebar-hover); color: var(--text-primary); }
    .sidebar-link.active { background: var(--sidebar-active); color: var(--brand-secondary); }
    .spinner { border-color: var(--bg-tertiary); border-top-color: var(--color-primary); }
}

/* ─── Theme Toggle Button ─── */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 1000;
    transition: all 0.3s ease;
}
.theme-toggle:hover { transform: scale(1.1); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ─── High Contrast ─── */
@media (prefers-contrast: high) {
    :root { --border-color: #000; --text-primary: #000; --bg-primary: #FFF; }
    @media (prefers-color-scheme: dark) {
        :root { --border-color: #FFF; --text-primary: #FFF; --bg-primary: #000; }
    }
}