/* Dark theme component + utility overrides — load after dashboard-ui.css */

/* ── Theme switcher ── */
.theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border-color);
  background: var(--bg-muted);
}
.theme-switcher-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.55rem;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.theme-switcher-btn:hover {
  color: var(--text-primary);
  background: var(--bg-card);
}
.theme-switcher-btn.is-active {
  background: var(--bg-card);
  color: var(--brand);
  box-shadow: var(--shadow-sm);
}
.theme-switcher-btn i { font-size: 0.95rem; }

/* ── Shell surfaces via tokens (both themes) ── */
body.rtl,
body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
}

.card {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--text-primary);
}
.card-header,
.card-footer {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}
.card-body { color: var(--text-primary); }

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--border-color);
  color: var(--text-primary);
}
.table thead th {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border-bottom-color: var(--border-color) !important;
}
.table thead th i,
.table thead th svg,
.card-header i,
.card-header svg {
  color: var(--brand) !important;
}
.table > :not(caption) > * > * {
  border-bottom-color: var(--border-color);
  background-color: transparent;
}
.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: var(--bg-muted);
  color: var(--text-primary);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: var(--bg-muted);
  color: var(--text-primary);
}

.form-control,
.form-select,
textarea.form-control {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}
.form-control:focus,
.form-select:focus {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand) 25%, transparent) !important;
}
.form-control::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 1;
}
.form-control:disabled,
.form-select:disabled {
  background-color: var(--bg-secondary) !important;
  color: var(--text-muted) !important;
}
.form-label,
.col-form-label {
  color: var(--text-secondary);
}
.form-text,
.text-muted {
  color: var(--text-secondary) !important;
}
.form-check-input {
  background-color: var(--bg-card);
  border-color: var(--border-strong);
}
.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}
.input-group-text {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

.btn-primary {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
  color: #fff !important;
}
.btn-outline-secondary,
.btn-outline-primary {
  border-color: var(--border-strong);
}
.btn-outline-secondary {
  color: var(--text-secondary);
}
.btn-outline-secondary:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-light {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.modal-content {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
}
.modal-header,
.modal-footer {
  border-color: var(--border-color) !important;
  background: var(--bg-card);
}
.modal-title { color: var(--text-primary); }
.btn-close {
  filter: none;
}
html[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(1);
}
.modal-backdrop.show {
  opacity: 0.65;
}

/* Parent / student create-edit modals (hardcoded light surfaces → tokens) */
html[data-theme="dark"] #addParentModal .parent-modal,
html[data-theme="dark"] #addParentModal .modal-content.parent-modal,
html[data-theme="dark"] #parentCreatedSuccessModal .parent-success-modal {
  background: var(--bg-card) !important;
  color: var(--text-primary);
}
html[data-theme="dark"] #addParentModal .parent-modal-body {
  background: var(--bg-secondary) !important;
}
html[data-theme="dark"] #addParentModal .parent-modal-footer {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] #addParentModal .parent-section-card,
html[data-theme="dark"] #addStudentModal .parent-section-card,
html[data-theme="dark"] #addStudentModal .student-section-card {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}
html[data-theme="dark"] #addParentModal .credentials-card {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.1), var(--bg-card)) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
}
html[data-theme="dark"] #addParentModal .section-title,
html[data-theme="dark"] #addStudentModal .section-title {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] #addParentModal .student-row,
html[data-theme="dark"] #addStudentModal .student-row {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] #addParentModal .btn-add-student,
html[data-theme="dark"] #addStudentModal .btn-add-student {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: #93c5fd !important;
}
html[data-theme="dark"] #addParentModal .soft-input.bg-light,
html[data-theme="dark"] #addParentModal .bg-light.form-control {
  background-color: var(--bg-secondary) !important;
  color: var(--text-muted) !important;
}
html[data-theme="dark"] #addParentModal .parent-success-details {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] #addParentModal .parent-success-row {
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] #addParentModal .parent-success-row .value {
  color: var(--text-primary) !important;
}

.dropdown-menu {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
}
.dropdown-item {
  color: var(--text-primary);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}
.dropdown-divider {
  border-color: var(--border-color);
}

.nav-tabs {
  border-bottom-color: var(--border-color);
}
.nav-tabs .nav-link {
  color: var(--text-secondary);
}
.nav-tabs .nav-link.active {
  background-color: var(--bg-card);
  border-color: var(--border-color) var(--border-color) var(--bg-card);
  color: var(--brand);
}
.nav-link {
  color: var(--text-secondary);
}
.pagination .page-link {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}
.pagination .page-item.active .page-link {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.pagination .page-item.disabled .page-link {
  background-color: var(--bg-secondary);
  color: var(--text-muted);
}
.list-group-item {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}
.alert {
  border-color: transparent;
}
.badge.bg-light {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.dui-filter-bar {
  background: var(--bg-muted) !important;
  border-color: var(--border-color) !important;
}
.dui-filter-bar .form-label {
  color: var(--text-secondary) !important;
}

/* Sidebar */
#sidenav-main {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}
#sidenav-main .border-b,
#sidenav-main .border-t,
#sidenav-main .border-slate-200 {
  border-color: var(--border-color) !important;
}
#sidenav-main .sidebar-brand-name {
  color: var(--text-primary) !important;
}
#sidenav-main .dui-nav-main-link:hover {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}
#sidenav-main .dui-nav-section-toggle:hover {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] #sidenav-main .dui-nav-main-link,
html[data-theme="dark"] #sidenav-main .dui-nav-sub-link,
html[data-theme="dark"] #sidenav-main .dui-nav-section-toggle {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] #sidenav-main .dui-nav-main-link.is-active,
html[data-theme="dark"] #sidenav-main .dui-nav-sub-link.is-active {
  background: var(--brand) !important;
  color: #fff !important;
}
#navbarBlur {
  background: color-mix(in srgb, var(--bg-card) 88%, transparent) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}
#navbarBlur a {
  color: var(--text-primary);
}

/* Select2 — bootstrap-5 + default themes */
.select2-container--bootstrap-5 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--bg-card) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
  min-height: 40px;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary) !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--text-muted) !important;
}
.select2-container--bootstrap-5 .select2-dropdown,
.select2-container--default .select2-dropdown {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
.select2-container--bootstrap-5 .select2-results__option,
.select2-container--default .select2-results__option {
  color: var(--text-primary) !important;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--brand-soft) !important;
  color: var(--text-primary) !important;
}
.select2-container--bootstrap-5 .select2-results__option--selected,
.select2-container--default .select2-results__option--selected {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}
.select2-container--bootstrap-5 .select2-selection__choice {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* DataTables */
.dataTables_wrapper {
  color: var(--text-primary);
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  color: var(--text-secondary) !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--text-primary) !important;
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
.dataTables_wrapper .dataTables_processing {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color);
}
table.dataTable tbody tr {
  background-color: transparent !important;
}
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
  background-color: var(--bg-muted) !important;
}
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
  background-color: var(--bg-secondary) !important;
}

/* Dynamic filters / export / pager */
.dyn-filters .dyn-filter-chip,
.dyn-filter-picker {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}
.dyn-filter-picker-title { color: var(--text-secondary) !important; }
.dyn-filter-pick-row:hover { background: var(--bg-muted) !important; }
.table-pager .btn-outline-secondary {
  border-color: var(--border-strong);
  color: var(--text-secondary);
}

/* Flatpickr */
.flatpickr-calendar {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--text-primary) !important;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month input.cur-year,
.flatpickr-weekday,
.flatpickr-day {
  color: var(--text-primary) !important;
  fill: var(--text-primary) !important;
}
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.flatpickr-time input {
  color: var(--text-primary) !important;
  background: var(--bg-card) !important;
}

/* ── Tailwind utility bridge (dark) ── */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-white\/85,
html[data-theme="dark"] .bg-white\/90,
html[data-theme="dark"] .bg-white\/95 {
  background-color: var(--bg-card) !important;
}
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-slate-100,
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-gray-100 {
  background-color: var(--bg-secondary) !important;
}
html[data-theme="dark"] .bg-slate-200 {
  background-color: var(--border-color) !important;
}
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-black {
  color: var(--text-primary) !important;
}
/* Soften pure white utility text on plain surfaces (keep white on gradient KPIs / buttons) */
html[data-theme="dark"] .sp-card .text-white:not(.btn):not(.badge),
html[data-theme="dark"] .soft-card .text-white:not(.btn):not(.badge),
html[data-theme="dark"] .table .text-white:not(.btn):not(.badge) {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] [style*="linear-gradient"] .text-white,
html[data-theme="dark"] [style*="linear-gradient"] h4,
html[data-theme="dark"] [style*="linear-gradient"] p {
  color: #f8fafc !important;
}
/* Keep solid CTA / brand buttons readable */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .btn-info,
html[data-theme="dark"] .btn-warning,
html[data-theme="dark"] .badge.bg-primary,
html[data-theme="dark"] .badge.bg-success,
html[data-theme="dark"] .badge.bg-danger,
html[data-theme="dark"] .dui-nav-main-link.is-active,
html[data-theme="dark"] .dui-nav-sub-link.is-active {
  color: #f8fafc !important;
}
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,
html[data-theme="dark"] .card-header h5,
html[data-theme="dark"] .sp-card-head h5 {
  color: var(--text-primary);
}
html[data-theme="dark"] .dyn-filter-pick-row,
html[data-theme="dark"] .dyn-filter-chip-head,
html[data-theme="dark"] .form-check-label,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .dyn-filter-picker label {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .dyn-filter-picker-title,
html[data-theme="dark"] .text-muted {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600 {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-slate-400,
html[data-theme="dark"] .text-gray-500 {
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-300,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-300 {
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow-md,
html[data-theme="dark"] .shadow-lg,
html[data-theme="dark"] .shadow-xl {
  --tw-shadow-color: rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .ring-slate-200 {
  --tw-ring-color: var(--border-color);
}
html[data-theme="dark"] .bg-blue-50\/95,
html[data-theme="dark"] .bg-blue-50 {
  background-color: rgba(30, 64, 175, 0.25) !important;
}
html[data-theme="dark"] .text-blue-800,
html[data-theme="dark"] .border-blue-100 {
  color: #93c5fd !important;
  border-color: #1e3a8a !important;
}

/* Dark: DUI nav inactive icons */
html[data-theme="dark"] #sidenav-main .nav-icon.bg-slate-100 {
  background-color: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] #sidenav-main .dui-nav-main-link.is-active .nav-icon {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

/* Module: e-learning */
html[data-theme="dark"] .el-hero {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--brand-soft) 100%) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}
html[data-theme="dark"] .el-chip,
html[data-theme="dark"] .el-card,
html[data-theme="dark"] .el-item,
html[data-theme="dark"] .el-btn,
html[data-theme="dark"] .el-table-wrap,
html[data-theme="dark"] .el-page,
html[data-theme="dark"] .el-filters {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .el-card-head,
html[data-theme="dark"] .el-tabs,
html[data-theme="dark"] .el-subtabs {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .el-tab.active {
  background: var(--bg-card) !important;
  color: var(--brand) !important;
}
html[data-theme="dark"] .el-btn:hover,
html[data-theme="dark"] .el-item:hover {
  background: var(--bg-secondary) !important;
  border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .el-btn.primary {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
html[data-theme="dark"] .el-chip { color: var(--text-secondary) !important; }
html[data-theme="dark"] .el-item-meta,
html[data-theme="dark"] .el-cell-sub,
html[data-theme="dark"] .el-muted {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .el-empty { color: var(--text-secondary); }

/* Module: finance */
html[data-theme="dark"] .fin-filters,
html[data-theme="dark"] .fin-kpi,
html[data-theme="dark"] .fin-chart,
html[data-theme="dark"] .fin-card,
html[data-theme="dark"] .summary-card {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .fin-kpi .value,
html[data-theme="dark"] .summary-card .value {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .cat-sub-pill,
html[data-theme="dark"] .rpt-sub-pill {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .cat-sub-pill.active,
html[data-theme="dark"] .rpt-sub-pill.active {
  background: var(--brand) !important;
  color: #fff !important;
}

/* Module: payroll report / sheet */
html[data-theme="dark"] .rpt-sheet-card,
html[data-theme="dark"] .rpt-kpi-card,
html[data-theme="dark"] .payroll-sheet-wrap {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .rpt-sheet-head {
  background: linear-gradient(180deg, var(--bg-secondary), var(--bg-card)) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .payroll-sheet th,
html[data-theme="dark"] .payroll-sheet td {
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}
html[data-theme="dark"] .payroll-sheet thead th {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .payroll-sheet .calc-cell { background: var(--bg-muted) !important; }
html[data-theme="dark"] .payroll-sheet .inline-add-row td {
  background: var(--bg-secondary) !important;
}
html[data-theme="dark"] .rpt-filter-chip,
html[data-theme="dark"] .rpt-chip {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color);
}
html[data-theme="dark"] .rpt-empty { color: var(--text-secondary); }
html[data-theme="dark"] .rpt-money { color: var(--text-primary); }

/* Module: attendance */
html[data-theme="dark"] .soft-card {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .att-btn {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}
html[data-theme="dark"] .att-btn.is-on {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand);
}

/* Module: installments */
html[data-theme="dark"] .inst-toolbar,
html[data-theme="dark"] .inst-kpi,
html[data-theme="dark"] .inst-table,
html[data-theme="dark"] .inst-mini-table {
  background: var(--bg-card) !important;
  color: var(--text-primary);
  border-color: var(--border-color);
}
html[data-theme="dark"] .inst-table thead th,
html[data-theme="dark"] .inst-mini-table thead th,
html[data-theme="dark"] .inst-mini-table .table-light th {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

/* Page shells / misc cards */
html[data-theme="dark"] .page-shell,
html[data-theme="dark"] .tool-chip {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* Login page helpers when theme-dark linked */
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .form-panel {
  background: var(--bg-card) !important;
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* Compact switcher (mobile topbar on indigo) */
.theme-switcher--compact {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.22);
}
.theme-switcher--compact .theme-switcher-btn {
  color: rgba(255, 255, 255, 0.85);
}
.theme-switcher--compact .theme-switcher-btn.is-active {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}

/* Finance KPI / chart text */
html[data-theme="dark"] .fin-kpi .fin-kpi-val,
html[data-theme="dark"] .fin-chart-head h6 {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .fin-kpi .fin-kpi-lbl,
html[data-theme="dark"] .fin-section-title,
html[data-theme="dark"] .fin-filters .form-label {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .fin-chart-head {
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .hr-kpi {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}

/* Mobile teacher e-learning */
html[data-theme="dark"] body {
  background: var(--bg-primary);
  color: var(--text-primary);
}
html[data-theme="dark"] .el-kpi,
html[data-theme="dark"] .course-card,
html[data-theme="dark"] .el-search input {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .el-kpi .val,
html[data-theme="dark"] .course-card-title {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .el-kpi .lbl,
html[data-theme="dark"] .course-card-desc {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .course-card:active {
  background: var(--bg-secondary) !important;
  border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .el-count-chip,
html[data-theme="dark"] .el-status-pill.dft {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .course-card-icon {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .spinner-wrap {
  color: var(--text-secondary);
}

/* ========== Chats (DUI) ========== */
html[data-theme="dark"] .dui-chats-wrap,
html[data-theme="dark"] .dui-chats-thread,
html[data-theme="dark"] .dui-chats-composer,
html[data-theme="dark"] .dui-chat-search-item,
html[data-theme="dark"] .dui-chats-search,
html[data-theme="dark"] .dui-chats-search-results,
html[data-theme="dark"] .dui-chat-item,
html[data-theme="dark"] .dui-chat-context-card {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}
html[data-theme="dark"] .dui-chats-list,
html[data-theme="dark"] .dui-chats-search-wrap {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .dui-chats-messages {
  background: var(--bg-primary) !important;
  scrollbar-color: var(--text-muted) var(--bg-secondary);
}
html[data-theme="dark"] .dui-chats-messages::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
html[data-theme="dark"] .dui-chats-messages::-webkit-scrollbar-thumb {
  background: var(--text-muted);
}
html[data-theme="dark"] .dui-chats-thread-head {
  background: linear-gradient(180deg, var(--bg-card), var(--bg-secondary)) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .dui-composer {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .dui-composer:focus-within {
  background: var(--bg-card) !important;
  border-color: var(--brand) !important;
}
html[data-theme="dark"] .dui-composer-input {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .dui-composer-input::placeholder,
html[data-theme="dark"] .dui-composer-hint,
html[data-theme="dark"] .dui-composer-btn--mic,
html[data-theme="dark"] .dui-chat-no-msgs,
html[data-theme="dark"] .dui-chats-page-sub,
html[data-theme="dark"] .dui-chats-search-empty,
html[data-theme="dark"] .dui-chats-empty-pane,
html[data-theme="dark"] .dui-chats-back-link,
html[data-theme="dark"] .dui-chat-item-time,
html[data-theme="dark"] .dui-chat-item-preview,
html[data-theme="dark"] .dui-chat-search-item-sub,
html[data-theme="dark"] .dui-chat-context-label,
html[data-theme="dark"] .dui-chat-context-info small,
html[data-theme="dark"] .dui-msg-meta-name,
html[data-theme="dark"] .chat-audio-player--in .chat-wave-placeholder,
html[data-theme="dark"] .chat-audio-player--in .chat-audio-duration {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .dui-msg-bubble--in {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .dui-msg-date span {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .dui-chat-item:hover,
html[data-theme="dark"] .dui-chat-item.is-active,
html[data-theme="dark"] .dui-chat-search-item:hover {
  background: var(--bg-secondary) !important;
  border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .dui-chats-page-title,
html[data-theme="dark"] .dui-chat-item-name,
html[data-theme="dark"] .dui-chat-search-item-name,
html[data-theme="dark"] .dui-chats-empty-pane h3,
html[data-theme="dark"] .dui-chat-context-info strong,
html[data-theme="dark"] .dui-chats-search-input {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .dui-chats-page-icon {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
}
html[data-theme="dark"] .dui-chats-tabs {
  background: var(--bg-secondary) !important;
}
html[data-theme="dark"] .dui-chats-tab {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .dui-chats-tab:hover {
  color: var(--text-primary) !important;
  background: var(--bg-muted) !important;
}
html[data-theme="dark"] .dui-chats-tab.is-active,
html[data-theme="dark"] .dui-chats-tab.active {
  background: var(--bg-card) !important;
  color: var(--brand) !important;
}
html[data-theme="dark"] .dui-chats-role-btn {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .dui-chats-role-btn:hover {
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .dui-chats-role-btn.is-active {
  background: var(--brand-soft) !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}
html[data-theme="dark"] .dui-chats-search-clear {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .dui-chats-empty-icon {
  background: var(--bg-secondary) !important;
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .dui-chat-type-badge,
html[data-theme="dark"] .dui-chat-flow-chip,
html[data-theme="dark"] .dui-msg-meta-role {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color);
}
html[data-theme="dark"] .dui-msg-meta-role.dui-chat-type--admin,
html[data-theme="dark"] .dui-msg-meta-role.dui-chat-type--student,
html[data-theme="dark"] .dui-chat-search-action,
html[data-theme="dark"] .dui-chat-type-badge.dui-chat-type--admin,
html[data-theme="dark"] .dui-chat-type-badge.dui-chat-type--student,
html[data-theme="dark"] .dui-chat-flow-chip.dui-chat-type--admin,
html[data-theme="dark"] .dui-chat-flow-chip.dui-chat-type--student {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
}
html[data-theme="dark"] .dui-msg-meta-role.dui-chat-type--parent,
html[data-theme="dark"] .dui-chat-type-badge.dui-chat-type--parent,
html[data-theme="dark"] .dui-chat-flow-chip.dui-chat-type--parent {
  background: rgba(20, 184, 166, 0.15) !important;
  color: #5eead4 !important;
}
html[data-theme="dark"] .dui-msg-meta-role.dui-chat-type--teacher,
html[data-theme="dark"] .dui-chat-type-badge.dui-chat-type--teacher,
html[data-theme="dark"] .dui-chat-flow-chip.dui-chat-type--teacher {
  background: rgba(249, 115, 22, 0.15) !important;
  color: #fdba74 !important;
}
html[data-theme="dark"] .dui-chat-context-card.dui-chat-type--admin,
html[data-theme="dark"] .dui-chat-context-card.dui-chat-type--student,
html[data-theme="dark"] .dui-chat-context-card.dui-chat-type--parent,
html[data-theme="dark"] .dui-chat-context-card.dui-chat-type--teacher {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .dui-chats-monitor-badge,
html[data-theme="dark"] .dui-chats-readonly-banner {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}
html[data-theme="dark"] .dui-chat-flow > i,
html[data-theme="dark"] .dui-chat-context-divider {
  color: var(--border-strong) !important;
}

/* Legacy one-to-one chat blades */
html[data-theme="dark"] .chat-body {
  background: linear-gradient(180deg, var(--bg-card), var(--bg-primary)) !important;
}
html[data-theme="dark"] .msg.other .bubble {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .chat-footer,
html[data-theme="dark"] .ch-input {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}
html[data-theme="dark"] .ch-input:focus {
  border-color: var(--brand) !important;
}
html[data-theme="dark"] .chat-header {
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .ch-avatar {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .ch-sub {
  color: var(--text-secondary) !important;
}

/* Graduate year cards (non-print picker) */
html[data-theme="dark"] .gl-year-card {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}
html[data-theme="dark"] .gl-year-card.is-checked {
  background: var(--brand-soft) !important;
  border-color: var(--brand) !important;
}

/* ========== Shared page shells ========== */
html[data-theme="dark"] .sp-card,
html[data-theme="dark"] .tool-bar,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .empty-card,
html[data-theme="dark"] .date-banner {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}
html[data-theme="dark"] .sp-card-head {
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}
html[data-theme="dark"] .sp-card-head h5 {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .sp-card .table thead th {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .tool-bar {
  background: linear-gradient(180deg, var(--bg-secondary), var(--bg-card)) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .tab-pill {
  color: var(--text-secondary);
}
html[data-theme="dark"] .tab-pill.active,
html[data-theme="dark"] .sp-tabs .tab-pill.active {
  background: var(--bg-card) !important;
  color: var(--brand) !important;
}
/* Student profile tab bar (page background, not purple head) */
html[data-theme="dark"] .stu-tabs {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  box-shadow: none;
}
html[data-theme="dark"] .stu-tabs .tab-pill {
  background: transparent !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .stu-tabs .tab-pill:hover {
  background: rgba(99, 102, 241, 0.12) !important;
  color: #a5b4fc !important;
}
html[data-theme="dark"] .stu-tabs .tab-pill.active {
  background: var(--brand) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35) !important;
}
html[data-theme="dark"] .att-actions {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}

/* ========== Payroll / reports ========== */
html[data-theme="dark"] .tpl-kpi-card,
html[data-theme="dark"] .tpl-toolbar,
html[data-theme="dark"] .tpl-sheet-card,
html[data-theme="dark"] .tpl-sheet-footer,
html[data-theme="dark"] .rpt-view-bar,
html[data-theme="dark"] .rpt-toolbar,
html[data-theme="dark"] .rpt-filter-section {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}
html[data-theme="dark"] .tpl-sheet-head,
html[data-theme="dark"] .tpl-excel-toolbar,
html[data-theme="dark"] .tpl-calc-cell,
html[data-theme="dark"] .tpl-row-num {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary);
}
html[data-theme="dark"] .tpl-kpi-val,
html[data-theme="dark"] .rpt-kpi-val {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .rpt-view-pills,
html[data-theme="dark"] .rpt-view-pill {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color);
}
html[data-theme="dark"] .rpt-view-pill.active,
html[data-theme="dark"] .rpt-view-pill.is-active {
  background: var(--brand) !important;
  color: #fff !important;
}
html[data-theme="dark"] .rpt-table,
html[data-theme="dark"] .rpt-table thead th {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .rpt-table tbody td {
  background: var(--bg-card) !important;
  color: var(--text-primary);
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .status-draft {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
}

/* ========== Installments schedule ========== */
html[data-theme="dark"] .sch-summary-card,
html[data-theme="dark"] .sch-installment-card {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}
html[data-theme="dark"] .sch-amount-line {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .status-not_due,
html[data-theme="dark"] .sch-status-pill.status-not_due {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .status-no_plan,
html[data-theme="dark"] .sch-status-pill.status-no_plan {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inst-table tbody td {
  background: var(--bg-card) !important;
  color: var(--text-primary);
  border-color: var(--border-color) !important;
}

/* ========== Exams / schedules ========== */
html[data-theme="dark"] .day-body,
html[data-theme="dark"] .exam-item,
html[data-theme="dark"] .badge-pill,
html[data-theme="dark"] .entry-hero,
html[data-theme="dark"] .exam-banner {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}
html[data-theme="dark"] .chip-mini {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color);
}

/* Timetable board (schedules.index) */
html[data-theme="dark"] .schedule-page .day-col {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  box-shadow: none;
}
html[data-theme="dark"] .schedule-page .day-col h3 {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .schedule-page .empty-day {
  border-color: var(--border-strong) !important;
  color: var(--text-muted) !important;
  background: transparent;
}
html[data-theme="dark"] .schedule-page .soft-select {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .schedule-page .soft-select:hover {
  background: var(--bg-muted) !important;
}
html[data-theme="dark"] .schedule-page .soft-select:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}
html[data-theme="dark"] .schedule-page .day-count {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .schedule-scrollbar::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
html[data-theme="dark"] .schedule-scrollbar::-webkit-scrollbar-thumb {
  background: var(--border-strong);
}
html[data-theme="dark"] #teacherViewBanner {
  background: rgba(99, 102, 241, 0.12) !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
  color: #c7d2fe !important;
}
html[data-theme="dark"] .schedule-page .slot-card.theme-0 {
  background: rgba(99, 102, 241, 0.14) !important;
  border-color: rgba(167, 139, 250, 0.45) !important;
  box-shadow: 4px 4px 0 0 rgba(99, 102, 241, 0.28);
}
html[data-theme="dark"] .schedule-page .slot-card.theme-1 {
  background: rgba(16, 185, 129, 0.14) !important;
  border-color: rgba(110, 231, 183, 0.4) !important;
  box-shadow: 4px 4px 0 0 rgba(16, 185, 129, 0.28);
}
html[data-theme="dark"] .schedule-page .slot-card.theme-2 {
  background: rgba(245, 158, 11, 0.14) !important;
  border-color: rgba(252, 211, 77, 0.4) !important;
  box-shadow: 4px 4px 0 0 rgba(245, 158, 11, 0.28);
}
html[data-theme="dark"] .schedule-page .slot-card.theme-3 {
  background: rgba(6, 182, 212, 0.14) !important;
  border-color: rgba(103, 232, 249, 0.4) !important;
  box-shadow: 4px 4px 0 0 rgba(6, 182, 212, 0.28);
}
html[data-theme="dark"] .schedule-page .slot-card.theme-4 {
  background: rgba(168, 85, 247, 0.14) !important;
  border-color: rgba(216, 180, 254, 0.4) !important;
  box-shadow: 4px 4px 0 0 rgba(168, 85, 247, 0.28);
}
html[data-theme="dark"] .schedule-page .slot-card.theme-5 {
  background: rgba(244, 63, 94, 0.14) !important;
  border-color: rgba(253, 164, 175, 0.4) !important;
  box-shadow: 4px 4px 0 0 rgba(244, 63, 94, 0.28);
}
html[data-theme="dark"] .schedule-page .slot-card .slot-subject-title {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .schedule-page .slot-card.theme-0 .slot-subject-title { color: #c4b5fd !important; }
html[data-theme="dark"] .schedule-page .slot-card.theme-1 .slot-subject-title { color: #6ee7b7 !important; }
html[data-theme="dark"] .schedule-page .slot-card.theme-2 .slot-subject-title { color: #fcd34d !important; }
html[data-theme="dark"] .schedule-page .slot-card.theme-3 .slot-subject-title { color: #67e8f9 !important; }
html[data-theme="dark"] .schedule-page .slot-card.theme-4 .slot-subject-title { color: #d8b4fe !important; }
html[data-theme="dark"] .schedule-page .slot-card.theme-5 .slot-subject-title { color: #fda4af !important; }
html[data-theme="dark"] .schedule-page .slot-teacher,
html[data-theme="dark"] .schedule-page .slot-time,
html[data-theme="dark"] .schedule-page .slot-time-display {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] #slotModal .modal-header {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, var(--bg-card) 70%) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] #slotModal .modal-footer {
  border-color: var(--border-color) !important;
  background: var(--bg-card) !important;
}
html[data-theme="dark"] .schedule-page .shadow-indigo-100 {
  --tw-shadow-color: rgba(99, 102, 241, 0.25);
}

/* ========== Student transfer tab ========== */
html[data-theme="dark"] .transfer-mode-card {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}
html[data-theme="dark"] .transfer-mode-card:hover {
  background: var(--bg-secondary) !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
}
html[data-theme="dark"] .transfer-mode-card.active {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.2), var(--bg-card)) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}
html[data-theme="dark"] .transfer-mode-copy strong {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .transfer-mode-copy small {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .transfer-hint {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .transfer-lane,
html[data-theme="dark"] .transfer-finance {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  box-shadow: none;
}
html[data-theme="dark"] .transfer-lane-head h6,
html[data-theme="dark"] .transfer-finance-head h6,
html[data-theme="dark"] .transfer-action-count,
html[data-theme="dark"] .transfer-defer-toggle {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .transfer-lane-head p,
html[data-theme="dark"] .transfer-finance-head p,
html[data-theme="dark"] .transfer-ui .form-label {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .transfer-note {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #fbbf24 !important;
}
html[data-theme="dark"] .transfer-action-bar {
  background: color-mix(in srgb, var(--bg-card) 94%, transparent) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .transfer-empty,
html[data-theme="dark"] .transfer-empty i,
html[data-theme="dark"] .transfer-empty strong {
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .transfer-ui .form-select,
html[data-theme="dark"] .transfer-ui .form-control,
html[data-theme="dark"] .transfer-ui .select2-container--bootstrap-5 .select2-selection {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* ========== HR / schools / settings / posts ========== */
html[data-theme="dark"] .asst-kpi,
html[data-theme="dark"] .sch-kpi,
html[data-theme="dark"] .stu-kpi,
html[data-theme="dark"] .perm-toolbar,
html[data-theme="dark"] .perm-matrix,
html[data-theme="dark"] .school-picker,
html[data-theme="dark"] .school-pick,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .toggle-row,
html[data-theme="dark"] .kind-pick-btn {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .audience-option {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .audience-option .ao-text {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .audience-option .ao-icon {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .audience-option:hover {
  background: var(--bg-secondary) !important;
  border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .audience-option:has(input:checked),
html[data-theme="dark"] .audience-option.is-active,
html[data-theme="dark"] .audience-option.active {
  background: rgba(79, 70, 229, 0.18) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .audience-option:has(input:checked) .ao-icon,
html[data-theme="dark"] .audience-option.is-active .ao-icon,
html[data-theme="dark"] .audience-option.active .ao-icon {
  background: var(--brand) !important;
  color: #fff !important;
}
html[data-theme="dark"] .school-pick strong,
html[data-theme="dark"] .kind-pick-btn {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .kind-pick-btn:hover,
html[data-theme="dark"] .school-pick:hover {
  background: var(--bg-secondary) !important;
  border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .kind-pick-btn.is-active,
html[data-theme="dark"] .kind-pick-btn.active,
html[data-theme="dark"] .school-pick.is-active,
html[data-theme="dark"] .school-pick.active {
  background: var(--brand-soft) !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}

/* ========== E-learning gaps ========== */
html[data-theme="dark"] .el-type-card,
html[data-theme="dark"] .el-wizard-step,
html[data-theme="dark"] .el-tf-pill:not(.active),
html[data-theme="dark"] .el-upload-preview,
html[data-theme="dark"] .el-upload-preview-box,
html[data-theme="dark"] .el-answer-box.student:not(.is-correct):not(.is-wrong),
html[data-theme="dark"] .el-answer-box.model,
html[data-theme="dark"] .el-submissions-legend {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .el-wizard-step {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .el-wizard-step-text strong,
html[data-theme="dark"] .el-type-card-label {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .el-wizard-step:hover {
  background: var(--bg-secondary) !important;
}
html[data-theme="dark"] .el-wizard-step.active {
  background: var(--brand-soft) !important;
}
html[data-theme="dark"] .el-wizard-step.active .el-wizard-step-text strong,
html[data-theme="dark"] .el-type-card.active .el-type-card-label {
  color: var(--brand) !important;
}
html[data-theme="dark"] .el-badge.draft {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .el-modal .modal-header,
html[data-theme="dark"] .el-modal .modal-content .modal-header {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}
html[data-theme="dark"] .el-kpi-ic.slate {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .el-kpi-ic.indigo {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
}
html[data-theme="dark"] .el-type-card.is-active,
html[data-theme="dark"] .el-type-card.active {
  background: var(--brand-soft) !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}

/* Credentials / date / phone chips (parents, students, teachers) */
html[data-theme="dark"] .credential-badge.user-badge {
  background: rgba(129, 140, 248, 0.18) !important;
  color: #c7d2fe !important;
  border-color: rgba(129, 140, 248, 0.4) !important;
  box-shadow: none;
}
html[data-theme="dark"] .credential-badge.pass-badge {
  background: rgba(16, 185, 129, 0.16) !important;
  color: #6ee7b7 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  box-shadow: none;
}
html[data-theme="dark"] .credential-badge .cred-label {
  opacity: 0.85;
}
html[data-theme="dark"] .date-badge,
html[data-theme="dark"] .post-date-badge {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  box-shadow: none;
}
html[data-theme="dark"] .date-badge i,
html[data-theme="dark"] .post-date-badge i {
  color: var(--brand) !important;
}
html[data-theme="dark"] .phone-badge {
  background: rgba(20, 184, 166, 0.15) !important;
  color: #5eead4 !important;
  border-color: rgba(20, 184, 166, 0.35) !important;
}

/* Soft pastel action buttons */
html[data-theme="dark"] .dui-action-btn--edit,
html[data-theme="dark"] .btn-success.action-btn {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #6ee7b7 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}
html[data-theme="dark"] .dui-action-btn--view,
html[data-theme="dark"] .btn-primary.action-btn,
html[data-theme="dark"] .btn-info.action-btn {
  background: rgba(129, 140, 248, 0.18) !important;
  color: #c7d2fe !important;
  border-color: rgba(129, 140, 248, 0.4) !important;
}
html[data-theme="dark"] .dui-action-btn--delete,
html[data-theme="dark"] .btn-danger.action-btn {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}
html[data-theme="dark"] .dui-action-btn--chat,
html[data-theme="dark"] .btn-warning.action-btn {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fcd34d !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}
html[data-theme="dark"] .dui-action-btn--custom,
html[data-theme="dark"] .btn-outline-secondary.action-btn,
html[data-theme="dark"] .btn-secondary.action-btn {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

/* Student / status pills that still use light utilities */
html[data-theme="dark"] .student-badge.bg-light,
html[data-theme="dark"] .badge.bg-light.text-dark {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .badge.bg-primary-subtle {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
  border-color: rgba(129, 140, 248, 0.35) !important;
}
html[data-theme="dark"] .badge.bg-secondary-subtle {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .badge.bg-success-subtle {
  background: rgba(16, 185, 129, 0.16) !important;
  color: #6ee7b7 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}
html[data-theme="dark"] .badge.bg-info-subtle {
  background: rgba(14, 165, 233, 0.16) !important;
  color: #7dd3fc !important;
  border-color: rgba(14, 165, 233, 0.35) !important;
}
html[data-theme="dark"] .search-group .input-group-text {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary);
}
html[data-theme="dark"] .search-group .form-control {
  border-color: var(--border-color) !important;
}

/* Page help bar (كيفية استخدام هذه الصفحة) */
html[data-theme="dark"] .page-help-bar-btn {
  background: linear-gradient(135deg, var(--brand-soft) 0%, var(--bg-card) 100%) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .page-help-bar-btn:hover {
  background: var(--bg-secondary) !important;
}
html[data-theme="dark"] .page-help-bar-btn i {
  color: var(--brand) !important;
}
html[data-theme="dark"] .page-help-modal .modal-content {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-md) !important;
}
html[data-theme="dark"] .page-help-modal .modal-body {
  background: var(--bg-card) !important;
  color: var(--text-primary);
}

/* E-learning page head + filter card (courses index) */
html[data-theme="dark"] .el-page-head {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--brand-soft) 55%, var(--bg-card) 100%) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}
html[data-theme="dark"] .el-page-head h5 {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .el-page-head .sub {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .el-filter-card,
html[data-theme="dark"] .el-filters {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .el-table-wrap .table thead th {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .el-table-wrap .table tbody tr:hover {
  background: var(--bg-secondary) !important;
}
html[data-theme="dark"] .el-table-wrap .table td,
html[data-theme="dark"] .el-table-wrap .table th {
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}
html[data-theme="dark"] .el-cell-title,
html[data-theme="dark"] .el-cell-teacher,
html[data-theme="dark"] .el-score-val {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .el-cover-thumb,
html[data-theme="dark"] .el-cover-fallback {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .el-cover-fallback {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
}
html[data-theme="dark"] .el-status-pill.pub {
  background: rgba(16, 185, 129, 0.16) !important;
  color: #6ee7b7 !important;
}
html[data-theme="dark"] .el-page-btn {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .el-page-btn:hover:not(:disabled) {
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}
html[data-theme="dark"] .el-pagination .info {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .el-kpi-ic.green {
  background: rgba(16, 185, 129, 0.16) !important;
  color: #6ee7b7 !important;
}
html[data-theme="dark"] .el-kpi-ic.amber {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #fbbf24 !important;
}
html[data-theme="dark"] .el-kpi-ic.blue {
  background: rgba(37, 99, 235, 0.16) !important;
  color: #93c5fd !important;
}
html[data-theme="dark"] .el-info-banner {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Activity log (سجل النشاط) */
html[data-theme="dark"] .al-kpi,
html[data-theme="dark"] .al-filters,
html[data-theme="dark"] .al-card,
html[data-theme="dark"] .al-audit {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--text-primary);
}
html[data-theme="dark"] .al-kpi .fw-bold,
html[data-theme="dark"] .al-card .fw-bold {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .al-timeline::before {
  background: linear-gradient(180deg, rgba(129, 140, 248, 0.55), var(--border-color) 40%, transparent) !important;
}
html[data-theme="dark"] .al-avatar {
  box-shadow: 0 0 0 4px var(--bg-primary) !important;
}
html[data-theme="dark"] .al-card:hover {
  box-shadow: var(--shadow-md) !important;
}
html[data-theme="dark"] .al-badge.create {
  background: rgba(16, 185, 129, 0.16) !important;
  color: #6ee7b7 !important;
}
html[data-theme="dark"] .al-badge.update {
  background: rgba(59, 130, 246, 0.18) !important;
  color: #93c5fd !important;
}
html[data-theme="dark"] .al-badge.delete {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #fca5a5 !important;
}
html[data-theme="dark"] .al-badge.other {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .al-module {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
}
html[data-theme="dark"] .al-method {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .al-subject {
  background: rgba(16, 185, 129, 0.16) !important;
  color: #6ee7b7 !important;
}
html[data-theme="dark"] .al-change,
html[data-theme="dark"] .al-detail,
html[data-theme="dark"] .al-vals {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .al-change strong,
html[data-theme="dark"] .al-detail .val,
html[data-theme="dark"] .al-vals-table td,
html[data-theme="dark"] .al-audit-meta td,
html[data-theme="dark"] .al-audit-title {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .al-meta,
html[data-theme="dark"] .al-day,
html[data-theme="dark"] .al-detail .lbl,
html[data-theme="dark"] .al-vals-table th,
html[data-theme="dark"] .al-audit-meta th,
html[data-theme="dark"] .al-empty,
html[data-theme="dark"] .al-vals.empty {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .al-details {
  border-top-color: var(--border-color) !important;
}
html[data-theme="dark"] .al-audit-title,
html[data-theme="dark"] .al-audit-meta th {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="dark"] .al-audit-meta th,
html[data-theme="dark"] .al-audit-meta td {
  border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .al-vals-head {
  border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .al-vals-head.prev {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #93c5fd !important;
}
html[data-theme="dark"] .al-vals-head.next {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
}
html[data-theme="dark"] .al-vals-table th,
html[data-theme="dark"] .al-vals-table td {
  border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .al-vals-table tr:nth-child(odd) {
  background: var(--bg-muted) !important;
}
html[data-theme="dark"] .al-vals-table tr:nth-child(even) {
  background: var(--bg-card) !important;
}
html[data-theme="dark"] .al-toggle {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .al-toggle:hover {
  background: var(--bg-muted) !important;
}
html[data-theme="dark"] .al-card.is-open .al-toggle {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
}
html[data-theme="dark"] .al-load-more.btn-light {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Print / PDF: keep light */
@media print {
  html[data-theme="dark"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-card: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --border-color: #e2e8f0;
    --brand: #4f46e5;
  }
}