/* v4.1 portal themes: accent colour (data-accent) and light/dark mode (data-theme) on <html>.
   Set by includes/theme.php from cookies; changed live by assets/js/theme.js. Loaded last. */

/* ---------- Accent colours ---------- */
html[data-accent="indigo"] { --primary: #4f46e5; --primary-hover: #4338ca; --primary-soft: #eef2ff; --bs-primary-rgb: 79, 70, 229; }
html[data-accent="blue"] { --primary: #2563eb; --primary-hover: #1d4ed8; --primary-soft: #eff6ff; --bs-primary-rgb: 37, 99, 235; }
html[data-accent="emerald"] { --primary: #059669; --primary-hover: #047857; --primary-soft: #ecfdf5; --bs-primary-rgb: 5, 150, 105; }
html[data-accent="rose"] { --primary: #e11d48; --primary-hover: #be123c; --primary-soft: #fff1f2; --bs-primary-rgb: 225, 29, 72; }
html[data-accent="orange"] { --primary: #ea580c; --primary-hover: #c2410c; --primary-soft: #fff7ed; --bs-primary-rgb: 234, 88, 12; }

html[data-accent] {
    --bs-primary: var(--primary);
    --bs-link-color: var(--primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color: var(--primary-hover);
}
html[data-accent] .btn-primary {
    --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover);
    --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary);
}
html[data-accent] .btn-outline-primary {
    --bs-btn-color: var(--primary); --bs-btn-border-color: rgba(var(--bs-primary-rgb), .35);
    --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover);
}
html[data-accent] .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
html[data-accent] .page-item.active .page-link { background: var(--primary); border-color: var(--primary); }
html[data-accent] .form-control:focus,
html[data-accent] .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .14); }

/* ---------- Dark mode ---------- */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1220;
    --bg-soft: #131d33;
    --panel: #111a2e;
    --panel-2: #0f172a;
    --line: #24324d;
    --line-soft: #1c2740;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --muted-2: #6b7a92;
    --primary-soft: rgba(var(--bs-primary-rgb), .16);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .25);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .3);
    --shadow-lg: 0 14px 38px rgba(0, 0, 0, .35);
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-border-color: var(--line);
    --bs-secondary-color: var(--muted);
    --bs-tertiary-bg: var(--bg-soft);
}
html[data-theme="dark"][data-accent] { --bs-link-color: color-mix(in srgb, var(--primary) 70%, #fff); }

html[data-theme="dark"] body { background: var(--bg) !important; color: var(--text); }

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .window-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .mini-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .suggest-box,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] dialog {
    background: var(--panel);
    border-color: var(--line);
    color: var(--text);
}

html[data-theme="dark"] .page-title,
html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .stat-value,
html[data-theme="dark"] .mini-card .mc-value,
html[data-theme="dark"] .table-title,
html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .info-name,
html[data-theme="dark"] .empty-title,
html[data-theme="dark"] .user-name,
html[data-theme="dark"] .suggest-title,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--text); }
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-body-secondary { color: var(--muted) !important; }
html[data-theme="dark"] .text-dark:not(.badge) { color: var(--text) !important; }
html[data-theme="dark"] .text-body { color: var(--text) !important; }

/* Controls */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .limit-form select,
html[data-theme="dark"] .table-limit .form-select,
html[data-theme="dark"] .topbar-student-search,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .user-chip,
html[data-theme="dark"] .action-btn,
html[data-theme="dark"] .pagination .page-link {
    background-color: var(--bg-soft);
    border-color: var(--line);
    color: var(--text);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--muted-2); }
html[data-theme="dark"] .topbar-student-search:focus-within { background: var(--panel); }
html[data-theme="dark"] .btn-light {
    --bs-btn-bg: var(--bg-soft); --bs-btn-border-color: var(--line); --bs-btn-color: var(--text);
    --bs-btn-hover-bg: var(--line-soft); --bs-btn-hover-border-color: var(--line); --bs-btn-hover-color: var(--text);
}
html[data-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--muted); --bs-btn-border-color: var(--line); background: transparent; }
html[data-theme="dark"] .btn-outline-secondary:hover { background: var(--line-soft); color: var(--text); }
html[data-theme="dark"] .btn-outline-danger { background: transparent; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
html[data-theme="dark"] .dropdown-item { color: var(--text); }
html[data-theme="dark"] .dropdown-item:hover { background: var(--bg-soft); color: var(--text); }
html[data-theme="dark"] .edit-btn,
html[data-theme="dark"] .view-btn { background: rgba(var(--bs-primary-rgb), .16); color: color-mix(in srgb, var(--primary) 70%, #fff); }

/* Tables */
html[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--line); color: var(--text); }
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table-darkx thead th,
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light > * > * { background: #16213a; color: var(--muted); border-color: var(--line); }
html[data-theme="dark"] .table-darkx tbody td { background: transparent; color: var(--text); border-color: var(--line-soft); }
html[data-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: var(--line-soft); }
html[data-theme="dark"] .table > tbody > tr:hover > *,
html[data-theme="dark"] .table-darkx tbody tr:hover td { background: rgba(255, 255, 255, .03); }

/* Surfaces that were hard-coded light */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light { background-color: var(--panel) !important; color: var(--text); }
html[data-theme="dark"] .workspace-hero { background: linear-gradient(120deg, var(--panel), rgba(var(--bs-primary-rgb), .14)); border-color: var(--line); }
html[data-theme="dark"] .major-card { background: linear-gradient(135deg, var(--panel) 30%, var(--bg-soft)); border-color: var(--line); border-top-color: var(--card-accent); color: var(--text); }
html[data-theme="dark"] .major-card:hover { color: var(--text); }
html[data-theme="dark"] .alert-primary,
html[data-theme="dark"] .alert-info { background: rgba(var(--bs-primary-rgb), .12); border-color: rgba(var(--bs-primary-rgb), .3); color: var(--text); }
html[data-theme="dark"] .alert-success { background: rgba(22, 163, 74, .12); border-color: rgba(22, 163, 74, .35); color: #bbf7d0; }
html[data-theme="dark"] .alert-danger { background: rgba(220, 38, 38, .12); border-color: rgba(220, 38, 38, .35); color: #fecaca; }
html[data-theme="dark"] .alert-warning { background: rgba(217, 119, 6, .12); border-color: rgba(217, 119, 6, .35); color: #fde68a; }
html[data-theme="dark"] .alert-light { background: var(--bg-soft); border-color: var(--line); color: var(--text); }
html[data-theme="dark"] .bg-primary-subtle { background: rgba(var(--bs-primary-rgb), .18) !important; }
html[data-theme="dark"] .bg-success-subtle { background: rgba(22, 163, 74, .18) !important; }
html[data-theme="dark"] .bg-warning-subtle { background: rgba(217, 119, 6, .2) !important; }
html[data-theme="dark"] .bg-warning-subtle.text-dark { color: #fde68a !important; }
html[data-theme="dark"] #loader { background: var(--bg); }
html[data-theme="dark"] ::selection { background: rgba(var(--bs-primary-rgb), .4); color: #fff; }

/* ---------- Overrides for style.css rules that use !important ---------- */
html[data-accent] .btn-primary {
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 72%, #fff)) !important;
    box-shadow: 0 10px 18px rgba(var(--bs-primary-rgb), .2) !important;
}
html[data-accent] .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), var(--primary)) !important; }
html[data-accent] .btn-outline-primary { color: var(--primary) !important; border-color: rgba(var(--bs-primary-rgb), .35) !important; background: var(--panel, #fff) !important; }
html[data-accent] .btn-outline-primary:hover { background: var(--primary-soft) !important; border-color: var(--primary) !important; color: var(--primary-hover) !important; }
html[data-accent] .form-control:focus,
html[data-accent] .form-select:focus { border-color: rgba(var(--bs-primary-rgb), .55) !important; box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .12) !important; }

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select { background-color: var(--bg-soft) !important; border-color: var(--line) !important; color: var(--text) !important; }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus { background-color: var(--panel) !important; }
html[data-theme="dark"] .form-control::placeholder { color: var(--muted-2) !important; }
html[data-theme="dark"] .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
html[data-theme="dark"] .input-group-text { background: var(--line-soft) !important; border-color: var(--line) !important; color: var(--muted) !important; }
html[data-theme="dark"] .btn-outline-secondary { color: var(--muted) !important; border-color: var(--line) !important; background: transparent !important; }
html[data-theme="dark"] .btn-outline-secondary:hover { background: var(--line-soft) !important; color: var(--text) !important; }
html[data-theme="dark"] .btn-outline-danger { border-color: rgba(220, 38, 38, .45) !important; background: transparent !important; color: #f87171 !important; }
html[data-theme="dark"] .btn-outline-danger:hover { background: rgba(220, 38, 38, .12) !important; }
html[data-theme="dark"] .btn-outline-warning,
html[data-theme="dark"] .btn-outline-info,
html[data-theme="dark"] .btn-outline-success { background: transparent !important; }
html[data-theme="dark"] .modal-content { background: var(--panel) !important; color: var(--text) !important; border-color: var(--line) !important; }
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--line) !important; }
html[data-theme="dark"] .dropdown-item:hover { background: var(--bg-soft) !important; color: var(--primary) !important; }
html[data-accent] .dropdown-item:hover { color: var(--primary) !important; }
html[data-theme="dark"] .alert-primary,
html[data-theme="dark"] .alert-info { background: rgba(var(--bs-primary-rgb), .12) !important; color: var(--text) !important; }
html[data-theme="dark"] .alert-success { background: rgba(22, 163, 74, .14) !important; color: #bbf7d0 !important; }
html[data-theme="dark"] .alert-danger { background: rgba(220, 38, 38, .14) !important; color: #fecaca !important; }
html[data-theme="dark"] .alert-warning { background: rgba(217, 119, 6, .14) !important; color: #fde68a !important; }

/* ---------- Page-specific inline styles ---------- */
html[data-theme="dark"] .quick-link { background: var(--panel); border-color: var(--line); }
html[data-theme="dark"] .quick-link:hover { background: var(--primary-soft); border-color: rgba(var(--bs-primary-rgb), .4); }
html[data-theme="dark"] .subject-card { background: linear-gradient(145deg, var(--panel) 40%, var(--bg-soft)); border-color: var(--line); color: var(--text); }
html[data-theme="dark"] .subject-card .teacher-code { background: var(--bg-soft); color: var(--muted); }
html[data-theme="dark"] .subject-card .class-detail,
html[data-theme="dark"] .subject-card .subject-meta { color: var(--muted); }
html[data-theme="dark"] .subject-card .subject-stats strong { color: var(--text); }
html[data-theme="dark"] .empty-card { background: var(--panel); border-color: var(--line); }
html[data-theme="dark"] .student-photo { border-color: var(--line); }
html[data-theme="dark"] #addScheduleModal .modal-header,
html[data-theme="dark"] #addScheduleModal .modal-footer { background: var(--panel); border-color: var(--line); }
html[data-theme="dark"] #addScheduleModal .modal-body { background: var(--bg); }
html[data-theme="dark"] #addScheduleModal .schedule-setup,
html[data-theme="dark"] #addScheduleModal .weekly-session { background: var(--panel); border-color: var(--line); }
html[data-theme="dark"] #addScheduleModal .form-label { color: var(--muted); }
html[data-theme="dark"] #addScheduleModal .schedule-heading-icon { background: var(--primary-soft); color: var(--primary); }
html[data-theme="dark"] #addScheduleModal .schedule-mode-switch .btn { background: var(--panel) !important; border-color: var(--line) !important; color: var(--muted) !important; }
html[data-theme="dark"] #addScheduleModal .schedule-mode-switch .btn-check:checked + .btn { background: var(--primary-soft) !important; border-color: var(--primary) !important; color: var(--text) !important; box-shadow: inset 0 0 0 1px var(--primary) !important; }
html[data-theme="dark"] #addScheduleModal #weekendPresetControls { background: var(--primary-soft); }
html[data-accent] #addScheduleModal .schedule-heading-icon { color: var(--primary); background: var(--primary-soft); }
html[data-accent] #addScheduleModal .schedule-mode-switch .btn-check:checked + .btn { border-color: var(--primary) !important; box-shadow: inset 0 0 0 1px var(--primary) !important; }