/* ═══════════════════════════════════════════════
   Theme System — Light / Dark Mode
   ═══════════════════════════════════════════════ */

/* ── Light Theme (Default) ── */
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-card: #ffffff;
    --bg-alt: #f4f7fb;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-heading: var(--color-navy, #0a1628);
    --border-color: #dee2e6;
    --border-light: #e3e8ef;
    --navbar-bg: var(--color-navy, #0a1628);
    --sidebar-bg-theme: #f8f9fa;
    --shadow-theme: 0 2px 10px rgba(0,0,0,0.08);
    --shadow-md-theme: 0 4px 16px rgba(0,0,0,0.12);
    --input-bg: #ffffff;
    --table-bg: #ffffff;
    --table-hover: #f8f9fa;
    --table-header: #f8f9fa;
    --breadcrumb-bg: #f4f7fb;
    --footer-bg: var(--color-navy, #0a1628);
    --code-bg: #f4f4f4;
    --overlay-bg: rgba(0,0,0,0.5);
    --img-filter: none;
}

/* ── Dark Theme ── */
[data-theme="dark"] {
    --bg-primary: #0f0f1a;
    --bg-secondary: #1a1a2e;
    --bg-card: #1e1e30;
    --bg-alt: #16162b;
    --text-primary: #e8e8f0;
    --text-secondary: #9999bb;
    --text-heading: #e0e0f0;
    --border-color: #2a2a40;
    --border-light: #252540;
    --navbar-bg: #0a0a15;
    --sidebar-bg-theme: #1a1a2e;
    --shadow-theme: 0 2px 10px rgba(0,0,0,0.4);
    --shadow-md-theme: 0 4px 16px rgba(0,0,0,0.5);
    --input-bg: #1a1a2e;
    --table-bg: #1e1e30;
    --table-hover: #252540;
    --table-header: #16162b;
    --breadcrumb-bg: #1a1a2e;
    --footer-bg: #0a0a15;
    --code-bg: #1a1a2e;
    --overlay-bg: rgba(0,0,0,0.7);
    --img-filter: brightness(0.9);
}

/* ── Global Overrides ── */
body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    transition: background 0.3s ease, color 0.3s ease;
}
h1, h2, h3, h4, h5, h6 { color: var(--text-heading); }

/* Links keep their teal color in both modes */
[data-theme="dark"] a { color: var(--color-teal, #00a99d); }
[data-theme="dark"] a:hover { color: var(--color-teal-dark, #008f85); }

/* ── Navbar ── */
.top-bar { background: var(--navbar-bg) !important; }
.secondary-bar { background: var(--color-navy-light, #006b78) !important; border-color: var(--border-color) !important; }
[data-theme="dark"] .secondary-bar a { color: var(--text-secondary); }
[data-theme="dark"] .secondary-bar a:hover { color: var(--color-teal); }
.main-navbar { background: var(--navbar-bg) !important; }

/* ── Cards ── */
.card,
.news-card,
.staff-card,
.course-card,
.stat-dept-card,
.exam-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-theme) !important;
    color: var(--text-primary) !important;
}
.card-header { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; }
.card-body { color: var(--text-primary) !important; }

/* ── Tables ── */
table, .table { background: var(--table-bg) !important; color: var(--text-primary) !important; }
.table thead th { background: var(--table-header) !important; color: var(--text-secondary) !important; border-color: var(--border-color) !important; }
.table tbody td { border-color: var(--border-color) !important; }
.table-hover tbody tr:hover { background: var(--table-hover) !important; }
.table-light { background: var(--table-header) !important; }

/* ── Forms ── */
.form-control,
.form-select {
    background: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.form-control:focus,
.form-select:focus {
    background: var(--input-bg) !important;
    color: var(--text-primary) !important;
}
.form-control::placeholder { color: var(--text-secondary) !important; }
textarea.form-control { background: var(--input-bg) !important; color: var(--text-primary) !important; }
.form-label { color: var(--text-primary) !important; }
.form-text { color: var(--text-secondary) !important; }
.form-check-label { color: var(--text-primary) !important; }
.input-group-text { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; }

/* ── Breadcrumb ── */
.breadcrumb-section { background: var(--breadcrumb-bg) !important; }
[data-theme="dark"] .breadcrumb-item { color: var(--text-secondary); }
[data-theme="dark"] .breadcrumb-item.active { color: var(--text-primary); }
[data-theme="dark"] .breadcrumb-item a { color: var(--color-teal); }

/* ── Sidebar ── */
.dept-sidebar { background: var(--sidebar-bg-theme) !important; border-color: var(--border-color) !important; }
.dept-sidebar .list-group-item {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.dept-sidebar .list-group-item:hover { background: var(--bg-alt) !important; }
.dept-sidebar .list-group-item.active { background: var(--color-teal) !important; color: #fff !important; }

/* ── Footer ── */
.site-footer { background: var(--footer-bg) !important; }
.copyright-bar { background: rgba(0,0,0,0.2) !important; }

/* ── Page Content ── */
.page-content { background: var(--bg-primary); }
.content-body { color: var(--text-primary); }

/* ── Stats Section ── */
[data-theme="dark"] .stats-section { background: var(--bg-secondary) !important; }
[data-theme="dark"] .stat-item { color: #fff; }

/* ── Alerts ── */
[data-theme="dark"] .alert-info { background: rgba(13,202,240,0.15); color: #6edff6; border-color: rgba(13,202,240,0.25); }

/* ── Pagination ── */
[data-theme="dark"] .page-link { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); }
[data-theme="dark"] .page-item.active .page-link { background: var(--color-teal); border-color: var(--color-teal); color: #fff; }

/* ── Modal ── */
[data-theme="dark"] .modal-content { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); }
[data-theme="dark"] .modal-header { border-color: var(--border-color); }
[data-theme="dark"] .modal-footer { border-color: var(--border-color); }
[data-theme="dark"] .btn-close { filter: invert(1); }

/* ── Dropdown ── */
[data-theme="dark"] .dropdown-menu { background: var(--bg-card); border-color: var(--border-color); }
[data-theme="dark"] .dropdown-item { color: var(--text-primary); }
[data-theme="dark"] .dropdown-item:hover { background: var(--bg-secondary); }
[data-theme="dark"] .dropdown-divider { border-color: var(--border-color); }

/* ── Offcanvas ── */
[data-theme="dark"] .offcanvas { background: var(--bg-card); color: var(--text-primary); }
[data-theme="dark"] .offcanvas-header { border-color: var(--border-color); }

/* ── Badges ── */
[data-theme="dark"] .badge.bg-light { background: var(--bg-secondary) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .text-muted { color: var(--text-secondary) !important; }

/* ── Misc ── */
[data-theme="dark"] hr { border-color: var(--border-color); }
[data-theme="dark"] .shadow-sm { box-shadow: var(--shadow-theme) !important; }
[data-theme="dark"] .shadow { box-shadow: var(--shadow-md-theme) !important; }
[data-theme="dark"] .bg-white { background: var(--bg-card) !important; }
[data-theme="dark"] .bg-light { background: var(--bg-secondary) !important; }
[data-theme="dark"] .border { border-color: var(--border-color) !important; }
[data-theme="dark"] .border-bottom { border-color: var(--border-color) !important; }
[data-theme="dark"] img:not([src*="logo"]) { filter: var(--img-filter); }
[data-theme="dark"] .list-group-item { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); }
[data-theme="dark"] .accordion-item { background: var(--bg-card); border-color: var(--border-color); }
[data-theme="dark"] .accordion-button { background: var(--bg-secondary); color: var(--text-primary); }
[data-theme="dark"] .accordion-button:not(.collapsed) { background: var(--bg-alt); color: var(--color-teal); }
[data-theme="dark"] .nav-tabs .nav-link { color: var(--text-secondary); }
[data-theme="dark"] .nav-tabs .nav-link.active { color: var(--text-primary); background: var(--bg-card); border-color: var(--border-color) var(--border-color) var(--bg-card); }

/* ═══ Theme Toggle Button ═══ */
.theme-toggle-btn {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.3);
    color: white;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 1rem;
    padding: 0;
    line-height: 1;
}
.theme-toggle-btn:hover {
    background: var(--color-teal, #00a99d);
    border-color: var(--color-teal, #00a99d);
    transform: rotate(20deg);
}
[data-theme="dark"] .theme-toggle-btn {
    border-color: rgba(255,255,255,0.2);
}

/* ═══ Admin Dark Mode ═══ */
[data-theme="dark"] .admin-body { background: #0f0f1a !important; }
[data-theme="dark"] .admin-topbar { background: #1a1a2e !important; }
[data-theme="dark"] .admin-topbar .page-title { color: #e0e0f0 !important; }
[data-theme="dark"] .admin-main { background: #0f0f1a; }
[data-theme="dark"] .admin-content { background: #0f0f1a; }
[data-theme="dark"] .stat-card-admin { background: #1e1e30 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important; }
[data-theme="dark"] .stat-card-admin .stat-value { color: #e0e0f0 !important; }
[data-theme="dark"] .stat-card-admin .stat-label { color: #9999bb !important; }
[data-theme="dark"] .admin-card { background: #1e1e30 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important; }
[data-theme="dark"] .admin-card .card-header { border-color: #2a2a40 !important; }
[data-theme="dark"] .admin-table thead th { background: #16162b !important; color: #9999bb !important; border-color: #2a2a40 !important; }
[data-theme="dark"] .admin-table tbody td { border-color: #252540 !important; color: #e0e0f0 !important; }
[data-theme="dark"] .admin-table tbody tr:hover { background: #252540 !important; }
[data-theme="dark"] .upload-zone { background: #1a1a2e; border-color: #3a3a55; }
[data-theme="dark"] .upload-zone:hover { border-color: var(--primary); background: rgba(108,63,197,0.1); }

/* Login page stays unchanged (always dark gradient) */
.login-page { color-scheme: light; }