/**
 * Dugsimaal Theme Compatibility
 * Makes custom-styled pages (reports, menus, settings, transactions, etc.)
 * render correctly in BOTH light and dark mode using Bootstrap classes /
 * semantic color tokens. Loaded via mydata/head.php and the standalone heads.
 *
 * Works with the existing `html.dark-theme` scheme (dark-theme.css) and also
 * with Bootstrap's [data-bs-theme="dark"] for the report-style pages that
 * already use that attribute.
 */
/* ========================================================================
   1. Table-based pages (report tables, data tables)
   ======================================================================== */
html.dark-theme .table,
html.dark-theme .table-hover > tbody > tr:hover > * {
    --bs-table-color: #e4e5e6;
    --bs-table-border-color: rgb(255 255 255 / 12%);
    color: #e4e5e6;
}
html.dark-theme .table-light {
    --bs-table-bg: rgb(255 255 255 / 12%);
    --bs-table-color: #e9ecef;
}
html.dark-theme .table thead th,
html.dark-theme .report-table th,
html.dark-theme .dataTables_wrapper .dataTables_info,
html.dark-theme .dataTables_wrapper .dataTables_paginate {
    color: #c6ccd2;
}

/* ========================================================================
   2. Custom card containers used by most pages
   ======================================================================== */
html.dark-theme .report-card,
html.dark-theme .filter-section,
html.dark-theme .stats-card,
html.dark-theme .settings-card,
html.dark-theme .menu-item,
html.dark-theme .submenu-item,
html.dark-theme .user-card {
    background-color: #12181a;
    border-color: rgb(255 255 255 / 14%);
    box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
}
html.dark-theme .report-header,
html.dark-theme .card-header-custom,
html.dark-theme .menu-content,
html.dark-theme .card-header {
    background-color: #12181a;
    border-bottom-color: rgb(255 255 255 / 13%);
}
html.dark-theme .card-footer {
    background-color: #12181a;
    border-top-color: rgb(255 255 255 / 13%);
}

/* ========================================================================
   3. Text colors in cards / headers
   ======================================================================== */
html.dark-theme .settings-card .card-header-custom h5,
html.dark-theme .settings-card .form-group label,
html.dark-theme .menu-item h6,
html.dark-theme .submenu-item span,
html.dark-theme .user-card .user-header h5 {
    color: #e4e5e6;
}
html.dark-theme .settings-card .card-header-custom small,
html.dark-theme .settings-card .form-group .help-text,
html.dark-theme .stats-label,
html.dark-theme .menu-item small,
html.dark-theme .text-muted {
    color: #a8adb0 !important;
}

/* ========================================================================
   4. Report tables with background headers
   ======================================================================== */
html.dark-theme .report-table-container {
    border-color: rgb(255 255 255 / 14%);
}
html.dark-theme .report-table th,
html.dark-theme .report-table td {
    background-color: transparent;
    border-color: rgb(255 255 255 / 12%);
    color: #d5d9de;
}
html.dark-theme .report-table th {
    background-color: rgb(255 255 255 / 8%);
}

/* ========================================================================
   5. Badges / status pills
   ======================================================================== */
html.dark-theme .status-active {
    background: #0f5132;
    color: #d1e7dd;
}
html.dark-theme .status-inactive {
    background: #842029;
    color: #f8d7da;
}
html.dark-theme .status-badge.Full-Paid {
    background: #198754;
    color: #fff;
}
html.dark-theme .status-badge.Partial {
    background: #ffc107;
    color: #000;
}
html.dark-theme .status-badge.Scholarship {
    background: #0dcaf0;
    color: #fff;
}

/* ========================================================================
   6. Buttons / light pseudo-buttons
   ======================================================================== */
html.dark-theme .btn-light {
    color: #fff;
    background-color: rgb(255 255 255 / 15%);
    border-color: rgb(255 255 255 / 22%);
}
html.dark-theme .btn-light:hover {
    background-color: rgb(255 255 255 / 25%);
}
html.dark-theme .btn-white {
    color: #e4e5e6;
    background-color: #12181a;
    border-color: rgb(206 212 218 / 45%);
}

/* ========================================================================
   7. Forms / inputs on custom pages
   ======================================================================== */
html.dark-theme .form-control,
html.dark-theme .form-select,
html.dark-theme .input-group-text {
    color: #c0c8d1;
    background-color: #12181a;
    border-color: rgb(255 255 255 / 34%);
}
html.dark-theme .form-control:focus,
html.dark-theme .form-select:focus {
    box-shadow: 0 0 0 .25rem rgb(255 255 255 / 25%);
}
html.dark-theme .form-check-input {
    background-color: #12181a;
    border-color: rgb(255 255 255 / 34%);
}
html.dark-theme .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}
html.dark-theme .form-check-input:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgb(255 255 255 / 25%);
}
html.dark-theme .form-check-input:disabled {
    background-color: rgb(255 255 255 / 8%);
    border-color: rgb(255 255 255 / 16%);
}
html.dark-theme label {
    color: #e4e5e6;
}
html.dark-theme .form-label {
    color: #e4e5e6;
}
html.dark-theme .form-check-label {
    color: #e4e5e6;
}

/* ========================================================================
   8. Nav tabs (used by settings.php and report pages)
   ======================================================================== */
html.dark-theme .nav-tabs .nav-link {
    color: #bdc3c9;
    border-color: transparent;
}
html.dark-theme .nav-tabs .nav-link:hover,
html.dark-theme .nav-tabs .nav-link:focus {
    color: #fff;
    border-color: rgb(255 255 255 / 12%) rgb(255 255 255 / 12%) transparent;
}
html.dark-theme .nav-tabs .nav-item.show .nav-link,
html.dark-theme .nav-tabs .nav-link.active {
    color: #ffffff;
    background-color: #12181a;
    border-color: rgb(255 255 255 / 20%) rgb(255 255 255 / 20%) #12181a;
}

/* ========================================================================
   9. Drag-sort pages (menu_sort.php)
   ======================================================================== */
html.dark-theme .menu-item {
    background: #12181a;
    border-color: rgb(255 255 255 / 14%);
}
html.dark-theme .menu-content {
    background: rgb(255 255 255 / 5%);
    border-top-color: rgb(255 255 255 / 12%);
}
html.dark-theme .submenu-item {
    background: #12181a;
    border-color: rgb(255 255 255 / 12%);
}
html.dark-theme .drag-handle {
    background: #252a2c;
    border-color: rgb(255 255 255 / 16%);
    color: #c6ccd2;
}

/* ========================================================================
   10. Image previews (settings.php)
   ======================================================================== */
html.dark-theme .image-preview-wrapper,
html.dark-theme [style*="border:2px dashed"] {
    background-color: #252a2c !important;
    border-color: rgb(255 255 255 / 25%) !important;
}
html.dark-theme .image-preview-wrapper .no-image,
html.dark-theme .upload-btn {
    color: #a8adb0;
    background: #252a2c;
}
html.dark-theme .upload-btn:hover {
    background: #30353a;
}

/* ========================================================================
   11. Alerts and misc helpers
   ======================================================================== */
html.dark-theme .alert {
    background-color: #161515;
    border-color: rgb(255 255 255 / 14%);
}
html.dark-theme .breadcrumb-item,
html.dark-theme .breadcrumb-item a {
    color: #b8bec4;
}
html.dark-theme .breadcrumb-item.active {
    color: #8b969f;
}

/* ========================================================================
   12. Borders (keeps layouts consistent in dark mode)
   ======================================================================== */
html.dark-theme .border,
html.dark-theme .border-top,
html.dark-theme .border-end,
html.dark-theme .border-bottom,
html.dark-theme .border-start,
html.dark-theme .border-top-* {
    border-color: rgb(255 255 255 / 12%) !important;
}

/* ========================================================================
   13. Pages using Bootstrap [data-bs-theme="dark"] (report pages)
   ======================================================================== */
[data-bs-theme="dark"] .report-card,
[data-bs-theme="dark"] .filter-section,
[data-bs-theme="dark"] .stats-card {
    background-color: var(--bs-dark) !important;
    border-color: var(--bs-gray-700) !important;
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .report-table th,
[data-bs-theme="dark"] .report-table td {
    background-color: transparent;
    border-color: var(--bs-gray-700);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .report-table th {
    background-color: var(--bs-gray-800);
}
[data-bs-theme="dark"] .stats-label,
[data-bs-theme="dark"] .text-muted {
    color: var(--bs-secondary-color) !important;
}

/* ========================================================================
   14. Topbar brand logo / school name
   ======================================================================== */
.brand-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 0.5rem;
}
html.dark-theme .topbar .navbar h5,
html.dark-theme .sidebar-header .logo-text {
    color: #e4e5e6;
}
.sidebar-header .logo-text {
    font-size: 1.1rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}


/* ------------------------------------------------------------------------
   16. Bootstrap toasts (top-right) — theme aware
   ------------------------------------------------------------------------ */
html.dark-theme .toast {
    color-scheme: dark;
    background-color: #12181a;
    border-color: rgb(255 255 255 / 14%);
    box-shadow: 0 .5rem 1rem rgb(0 0 0 / .5);
}
html.dark-theme .toast-header {
    color: #e4e5e6;
    background-color: #12181a;
    border-bottom-color: rgb(255 255 255 / 13%);
}
html.dark-theme .toast .toast-body {
    color: #e4e5e6;
}
html.dark-theme .toast.text-bg-success .toast-body,
html.dark-theme .toast.text-bg-danger .toast-body,
html.dark-theme .toast.text-bg-warning .toast-body,
html.dark-theme .toast.text-bg-info .toast-body {
    color: #fff;
}

/* ========================================================================
   17. Select2 (bootstrap-5 theme) — dark mode support
   ======================================================================== */
html.dark-theme .select2-container--bootstrap-5 .select2-selection {
    background-color: #12181a;
    border-color: rgb(255 255 255 / 34%);
    color: #c0c8d1;
}
html.dark-theme .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
html.dark-theme .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    color: #c0c8d1;
}
html.dark-theme .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
    color: #8b969f;
}
html.dark-theme .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b {
    border-color: #c0c8d1 transparent transparent;
}
html.dark-theme .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: #252a2c;
    border-color: rgb(255 255 255 / 16%);
    color: #e4e5e6;
}
html.dark-theme .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    color: #e4e5e6;
}
html.dark-theme .select2-container--bootstrap-5 .select2-dropdown {
    background-color: #12181a;
    border-color: rgb(255 255 255 / 34%);
}
html.dark-theme .select2-container--bootstrap-5 .select2-search__field {
    background-color: #12181a;
    color: #c0c8d1;
    border-color: rgb(255 255 255 / 34%);
}
html.dark-theme .select2-container--bootstrap-5 .select2-results__option {
    color: #c0c8d1;
}
html.dark-theme .select2-container--bootstrap-5 .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #0d6efd;
    color: #fff;
}
html.dark-theme .select2-container--bootstrap-5.select2-container--disabled .select2-selection {
    background-color: rgb(255 255 255 / 8%);
    color: #8b969f;
}
html.dark-theme .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear,
html.dark-theme .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
    color: #c0c8d1;
}

/* ========================================================================
   18. Locked subject pills (teacher assignments) — dark mode support
   ======================================================================== */
html.dark-theme .subject-locked {
    background-color: rgb(255 255 255 / 12%);
    border-color: rgb(255 255 255 / 22%) !important;
    color: #c6ccd2;
}
html.dark-theme .subject-locked .bx-lock-alt {
    color: #a8adb0;
}
html.dark-theme .subject-locked small {
    color: #a8adb0;
}
html.dark-theme .subject-locked small.fst-italic {
    color: #8b969f;
}

/* ========================================================================
   19. Curriculum subject badges — dark mode support
   ======================================================================== */
html.dark-theme .subject-badge.btn-outline-secondary {
    background-color: rgb(255 255 255 / 12%) !important;
    border-color: rgb(255 255 255 / 22%) !important;
    color: #c6ccd2 !important;
}
html.dark-theme .subject-badge.btn-outline-secondary .bx {
    color: #a8adb0;
}
html.dark-theme .subject-badge.btn-primary {
    background-color: #008cff !important;
    border-color: #008cff !important;
    color: #fff !important;
}
html.dark-theme .subject-badge.btn-primary .bx {
    color: #fff !important;
}

/* ========================================================================
   19b. Teacher assignment subject boxes — dark mode support
   ======================================================================== */
html.dark-theme .subject-box.btn-outline-secondary {
    background-color: rgb(255 255 255 / 12%) !important;
    border-color: rgb(255 255 255 / 22%) !important;
    color: #c6ccd2 !important;
}
html.dark-theme .subject-box.btn-outline-secondary .subject-icon {
    color: #008cff;
}
html.dark-theme .subject-box.btn-primary {
    background-color: #008cff !important;
    border-color: #008cff !important;
    color: #fff !important;
}
html.dark-theme .subject-box.btn-primary .subject-icon {
    color: #fff !important;
}

/* ========================================================================
   20. Bootstrap alerts — dark mode support (text must stay readable)
   ======================================================================== */
html.dark-theme .alert {
    background-color: #161515;
    border-color: rgb(255 255 255 / 14%);
}
html.dark-theme .alert-info {
    background-color: rgb(13 202 240 / 12%);
    border-color: rgb(13 202 240 / 25%);
    color: #6edff6;
}
html.dark-theme .alert-warning {
    background-color: rgb(255 193 7 / 12%);
    border-color: rgb(255 193 7 / 25%);
    color: #ffda6a;
}
html.dark-theme .alert-danger {
    background-color: rgb(220 53 69 / 12%);
    border-color: rgb(220 53 69 / 25%);
    color: #ea868f;
}
html.dark-theme .alert-success {
    background-color: rgb(25 135 84 / 12%);
    border-color: rgb(25 135 84 / 25%);
    color: #75b798;
}

/* ========================================================================
   21. Form switches (toggle switches) — dark mode support
       Unchecked/inactive switches must remain clearly visible.
   ======================================================================== */
html.dark-theme .form-switch .form-check-input:not(:checked):not(:focus) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.45%29'/%3e%3c/svg%3e");
    background-color: rgb(255 255 255 / 15%);
    border-color: rgb(255 255 255 / 40%);
}
html.dark-theme .form-switch .form-check-input:not(:checked) {
    background-color: rgb(255 255 255 / 15%);
    border-color: rgb(255 255 255 / 40%);
}
html.dark-theme .form-switch .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* ========================================================================
   22. Disabled / readonly elements — dark mode support
   ======================================================================== */
html.dark-theme .form-control:disabled,
html.dark-theme .form-control[readonly],
html.dark-theme .form-select:disabled,
html.dark-theme .form-select[readonly] {
    background-color: rgb(255 255 255 / 8%);
    border-color: rgb(255 255 255 / 16%);
    color: #a8adb0;
}
html.dark-theme .bg-info {
    background-color: rgb(13 202 240 / 18%) !important;
    color: #6edff6;
}
html.dark-theme .bg-warning {
    background-color: rgb(255 193 7 / 18%) !important;
    color: #ffda6a;
}

/* ========================================================================
   23. SweetAlert2 - dark theme support
   ======================================================================== */
html.dark-theme .swal2-popup { background: #12181a; color: #e4e5e6; }
html.dark-theme .swal2-title { color: #e4e5e6; }
html.dark-theme .swal2-html-container { color: #c6ccd2; }
html.dark-theme .swal2-html-container small,
html.dark-theme .swal2-html-container .text-muted { color: #a8adb0 !important; }
html.dark-theme .swal2-icon.swal2-warning { border-color: #ffc107; color: #ffc107; }
html.dark-theme .swal2-icon.swal2-error { border-color: #dc3545; color: #dc3545; }
html.dark-theme .swal2-icon.swal2-question { border-color: #0d6efd; color: #0d6efd; }
html.dark-theme .swal2-cancel { color: #c6ccd2; background-color: rgb(255 255 255 / 12%); border-color: rgb(255 255 255 / 22%); box-shadow: none; }
html.dark-theme .swal2-cancel:hover { background-color: rgb(255 255 255 / 20%); }

/* ========================================================================
   24. Student promotion action toggles (Promote/Repeat) - both themes
   ======================================================================== */
.action-toggle .toggle-option {
    background-color: transparent;
    border: 1px solid transparent;
    color: #6c757d;
}
html.dark-theme .action-toggle .toggle-option {
    color: #a8adb0;
}
html.dark-theme .action-toggle .toggle-option.bg-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #000 !important;
}
html.dark-theme .action-toggle .toggle-option.bg-primary {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
}

.action-toggle .toggle-option:not(.bg-primary):not(.bg-warning) {
    background-color: rgb(108 117 125 / 12%);
    border-color: rgb(108 117 125 / 25%) !important;
}
html.dark-theme .action-toggle .toggle-option:not(.bg-primary):not(.bg-warning) {
    background-color: rgb(255 255 255 / 15%);
    border-color: rgb(255 255 255 / 25%) !important;
    color: #c6ccd2 !important;
}

html.dark-theme .badge.bg-primary-subtle {
    background-color: rgb(13 110 253 / 15%) !important;
    color: #9ec5fe !important;
    border-color: rgb(13 110 253 / 30%) !important;
}
html.dark-theme .badge.bg-success-subtle {
    background-color: rgb(25 135 84 / 15%) !important;
    color: #75b798 !important;
    border-color: rgb(25 135 84 / 30%) !important;
}
html.dark-theme .dataTables_wrapper .dataTables_length select,
html.dark-theme .dataTables_wrapper .dataTables_filter input {
    background-color: #12181a;
    color: #c0c8d1;
    border-color: rgb(255 255 255 / 34%);
}