/* ============================================
   Comprehensive Dark Mode Support for SkolSyn
   ============================================ */

/* ========== Base Elements ========== */
body[data-theme="dark"] {
    background-color: #1a1d23 !important;
    color: #e0e0e0 !important;
}

/* ========== Cards ========== */
body[data-theme="dark"] .card {
    background-color: #212529 !important;
    border-color: #495057 !important;
    color: #e0e0e0 !important;
}

body[data-theme="dark"] .card-header {
    background-color: #2c3038 !important;
    border-bottom-color: #495057 !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .card-header h4,
body[data-theme="dark"] .card-header h5,
body[data-theme="dark"] .card-header .card-title {
    color: #ffffff !important;
}

body[data-theme="dark"] .card-footer {
    background-color: #2c3038 !important;
    border-top-color: #495057 !important;
    color: #ffffff !important;
}

/* Section headings within cards */
body[data-theme="dark"] .card-body h1,
body[data-theme="dark"] .card-body h2,
body[data-theme="dark"] .card-body h3,
body[data-theme="dark"] .card-body h4,
body[data-theme="dark"] .card-body h5,
body[data-theme="dark"] .card-body h6 {
    color: #ffffff !important;
}

/* ========== Tables ========== */
body[data-theme="dark"] .table {
    color: #e0e0e0 !important;
    border-color: #495057 !important;
}

body[data-theme="dark"] .table thead th {
    background-color: #2c3038 !important;
    border-color: #495057 !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #2c3038 !important;
}

body[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: #383d47 !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .table-bordered > :not(caption) > * {
    border-color: #495057 !important;
}

/* Fix for highlighted table rows (e.g., manually added students) */
body[data-theme="dark"] table.table tr.table-success,
body[data-theme="dark"] table.table tr.table-success > td,
body[data-theme="dark"] table.table tr.table-success > th,
body[data-theme="dark"] table.table tbody tr.table-success,
body[data-theme="dark"] table.table tbody tr.table-success > td,
body[data-theme="dark"] table.table tbody tr.table-success > th {
    background-color: #d1e7dd !important;
    color: #0f5132 !important;
}

body[data-theme="dark"] table.table tr.table-success td,
body[data-theme="dark"] table.table tr.table-success th,
body[data-theme="dark"] table.table tr.table-success td *:not(.badge):not(.badge *),
body[data-theme="dark"] table.table tr.table-success th *:not(.badge):not(.badge *),
body[data-theme="dark"] table.table tbody tr.table-success td,
body[data-theme="dark"] table.table tbody tr.table-success th,
body[data-theme="dark"] table.table tbody tr.table-success td *:not(.badge):not(.badge *),
body[data-theme="dark"] table.table tbody tr.table-success th *:not(.badge):not(.badge *),
body[data-theme="dark"] .table-success small,
body[data-theme="dark"] .table-success span:not(.badge) {
    color: #0f5132 !important;
}

body[data-theme="dark"] table.table tr.table-success a:not(.badge):not(.badge a),
body[data-theme="dark"] table.table tbody tr.table-success a:not(.badge):not(.badge a) {
    color: #0a3622 !important;
    text-decoration: underline;
}

/* Keep badges with their original colors */
body[data-theme="dark"] table.table tr.table-success .badge.bg-primary,
body[data-theme="dark"] table.table tbody tr.table-success .badge.bg-primary,
body[data-theme="dark"] table.table tr.table-success .badge.text-white,
body[data-theme="dark"] table.table tbody tr.table-success .badge.text-white {
    color: #ffffff !important;
}

body[data-theme="dark"] table.table tr.table-success .badge.bg-purple-soft,
body[data-theme="dark"] table.table tbody tr.table-success .badge.bg-purple-soft {
    color: #6f42c1 !important;
}

/* Code elements in success rows: remove dark code bg so row bg shows through */
body[data-theme="dark"] table.table tr.table-success td code,
body[data-theme="dark"] table.table tbody tr.table-success td code {
    background-color: transparent !important;
}

body[data-theme="dark"] .table-warning {
    background-color: #fff3cd !important;
    color: #212529 !important;
}

body[data-theme="dark"] table.table tr.table-danger,
body[data-theme="dark"] table.table tr.table-danger > td,
body[data-theme="dark"] table.table tr.table-danger > th,
body[data-theme="dark"] table.table tbody tr.table-danger,
body[data-theme="dark"] table.table tbody tr.table-danger > td,
body[data-theme="dark"] table.table tbody tr.table-danger > th {
    background-color: #f8d7da !important;
    color: #842029 !important;
}

body[data-theme="dark"] table.table tr.table-danger td,
body[data-theme="dark"] table.table tr.table-danger th,
body[data-theme="dark"] table.table tr.table-danger td *:not(.badge):not(.badge *),
body[data-theme="dark"] table.table tr.table-danger th *:not(.badge):not(.badge *),
body[data-theme="dark"] table.table tbody tr.table-danger td,
body[data-theme="dark"] table.table tbody tr.table-danger th,
body[data-theme="dark"] table.table tbody tr.table-danger td *:not(.badge):not(.badge *),
body[data-theme="dark"] table.table tbody tr.table-danger th *:not(.badge):not(.badge *),
body[data-theme="dark"] .table-danger small,
body[data-theme="dark"] .table-danger span:not(.badge) {
    color: #842029 !important;
}

body[data-theme="dark"] table.table tr.table-danger a:not(.badge):not(.badge a),
body[data-theme="dark"] table.table tbody tr.table-danger a:not(.badge):not(.badge a) {
    color: #58151c !important;
    text-decoration: underline;
}

/* Keep badges with their original colors */
body[data-theme="dark"] table.table tr.table-danger .badge.bg-primary,
body[data-theme="dark"] table.table tbody tr.table-danger .badge.bg-primary,
body[data-theme="dark"] table.table tr.table-danger .badge.text-white,
body[data-theme="dark"] table.table tbody tr.table-danger .badge.text-white {
    color: #ffffff !important;
}

body[data-theme="dark"] table.table tr.table-danger .badge.bg-purple-soft,
body[data-theme="dark"] table.table tbody tr.table-danger .badge.bg-purple-soft {
    color: #6f42c1 !important;
}

body[data-theme="dark"] .table-info {
    background-color: #cfe2ff !important;
    color: #212529 !important;
}

/* ========== Forms ========== */
body[data-theme="dark"] .form-control,
body[data-theme="dark"] .form-select {
    background-color: #2c3038 !important;
    border-color: #495057 !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .form-control:focus,
body[data-theme="dark"] .form-select:focus {
    background-color: #383d47 !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .form-control:disabled,
body[data-theme="dark"] .form-select:disabled {
    background-color: #1a1d23 !important;
    opacity: 0.6;
}

body[data-theme="dark"] .form-label {
    color: #e0e0e0 !important;
}

body[data-theme="dark"] .form-text {
    color: #9ca3af !important;
}

body[data-theme="dark"] .form-check-input {
    background-color: #2c3038 !important;
    border-color: #495057 !important;
}

body[data-theme="dark"] .form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

/* Fix date picker calendar icon in dark mode */
body[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* ========== Input Groups ========== */
body[data-theme="dark"] .input-group-text {
    background-color: #383d47 !important;
    border-color: #495057 !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .input-group-solid .input-group-text {
    background-color: #383d47 !important;
    color: #ffffff !important;
}

/* ========== Buttons ========== */
body[data-theme="dark"] .btn-light {
    background-color: #383d47 !important;
    border-color: #495057 !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .btn-light:hover {
    background-color: #495057 !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .btn-outline-light {
    color: #ffffff !important;
    border-color: #495057 !important;
}

body[data-theme="dark"] .btn-outline-light:hover {
    background-color: #383d47 !important;
    border-color: #495057 !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .btn-outline-secondary {
    color: #9ca3af !important;
    border-color: #495057 !important;
}

body[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: #383d47 !important;
    border-color: #495057 !important;
    color: #ffffff !important;
}

/* ========== Dropdowns ========== */
body[data-theme="dark"] .dropdown-menu {
    background-color: #2c3038 !important;
    border-color: #495057 !important;
}

body[data-theme="dark"] .dropdown-item {
    color: #e0e0e0 !important;
}

body[data-theme="dark"] .dropdown-item:hover {
    background-color: #383d47 !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .dropdown-divider {
    border-color: #495057 !important;
}

/* ========== Modals ========== */
body[data-theme="dark"] .modal-content {
    background-color: #212529 !important;
    border-color: #495057 !important;
}

body[data-theme="dark"] .modal-header {
    background-color: #2c3038 !important;
    border-bottom-color: #495057 !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .modal-footer {
    background-color: #2c3038 !important;
    border-top-color: #495057 !important;
}

body[data-theme="dark"] .modal-body {
    color: #e0e0e0 !important;
}

body[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ========== Alerts ========== */
body[data-theme="dark"] .alert-light {
    background-color: #2c3038 !important;
    border-color: #495057 !important;
    color: #e0e0e0 !important;
}

body[data-theme="dark"] .alert-secondary {
    background-color: #383d47 !important;
    border-color: #495057 !important;
    color: #e0e0e0 !important;
}

/* ========== Badges ========== */
body[data-theme="dark"] .badge.bg-light {
    background-color: #383d47 !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .badge.bg-secondary {
    background-color: #495057 !important;
}

/* Force dark text on warning/success badges for readability */
body[data-theme="dark"] .badge.bg-warning,
body[data-theme="dark"] .badge.bg-success {
    color: #212529 !important;
}

/* Badge links: override default link color on colored backgrounds */
body[data-theme="dark"] a.badge.bg-danger,
body[data-theme="dark"] a.badge.bg-info,
body[data-theme="dark"] a.badge.bg-primary,
body[data-theme="dark"] a.badge.bg-secondary,
body[data-theme="dark"] a.badge.bg-success,
body[data-theme="dark"] a.badge.bg-dark,
body[data-theme="dark"] a.badge {
    color: #ffffff !important;
}
body[data-theme="dark"] a.badge.bg-warning {
    color: #212529 !important;
}

/* System theme fallback: apply badge link colors before JS sets data-theme */
@media (prefers-color-scheme: dark) {
    body[data-theme="system"] a.badge,
    body:not([data-theme]) a.badge {
        color: #ffffff !important;
    }
    body[data-theme="system"] a.badge.bg-warning,
    body:not([data-theme]) a.badge.bg-warning {
        color: #212529 !important;
    }
}

/* Soft badges */
body[data-theme="dark"] .bg-info-soft {
    background-color: rgba(13, 110, 253, 0.2) !important;
}

body[data-theme="dark"] .text-info {
    color: #6ea8fe !important;
}

body[data-theme="dark"] .bg-purple-soft {
    background-color: rgba(111, 66, 193, 0.2) !important;
}

body[data-theme="dark"] .text-purple {
    color: #a370f7 !important;
}

/* ========== Pagination ========== */
body[data-theme="dark"] .page-link {
    background-color: #2c3038 !important;
    border-color: #495057 !important;
    color: #e0e0e0 !important;
}

body[data-theme="dark"] .page-link:hover {
    background-color: #383d47 !important;
    border-color: #495057 !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .page-item.active .page-link {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .page-item.disabled .page-link {
    background-color: #1a1d23 !important;
    border-color: #495057 !important;
    color: #6c757d !important;
}

/* ========== List Groups ========== */
body[data-theme="dark"] .list-group-item {
    background-color: #2c3038 !important;
    border-color: #495057 !important;
    color: #e0e0e0 !important;
}

body[data-theme="dark"] .list-group-item:hover {
    background-color: #383d47 !important;
}

body[data-theme="dark"] .list-group-item.active {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

/* ========== Breadcrumbs ========== */
body[data-theme="dark"] .breadcrumb {
    background-color: #2c3038 !important;
}

body[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: #9ca3af !important;
}

body[data-theme="dark"] .breadcrumb-item a {
    color: #6ea8fe !important;
}

/* ========== Progress Bars ========== */
body[data-theme="dark"] .progress {
    background-color: #2c3038 !important;
}

/* ========== Tooltips ========== */
body[data-theme="dark"] .tooltip-inner {
    background-color: #383d47 !important;
    color: #ffffff !important;
}

/* ========== Borders and Dividers ========== */
body[data-theme="dark"] hr {
    border-color: #495057 !important;
    opacity: 1;
}

body[data-theme="dark"] .border {
    border-color: #495057 !important;
}

body[data-theme="dark"] .border-bottom {
    border-bottom-color: #495057 !important;
}

body[data-theme="dark"] .border-top {
    border-top-color: #495057 !important;
}

/* ========== Text Colors ========== */
body[data-theme="dark"] .text-muted {
    color: #9ca3af !important;
}

body[data-theme="dark"] .text-dark {
    color: #e0e0e0 !important;
}

body[data-theme="dark"] .text-body {
    color: #e0e0e0 !important;
}

/* ========== Paper Tab Navigation (Shared Style) ========== */
body[data-theme="dark"] .nav-borders .nav-link {
    background: #2c3038 !important;
    border-color: #495057 !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .nav-borders .nav-link:hover {
    background: #383d47 !important;
    color: #ffffff !important;
    border-color: #495057 !important;
}

body[data-theme="dark"] .nav-borders .nav-link.active {
    background: #212529 !important;
    color: #0d6efd !important;
    border-color: #495057 !important;
    border-bottom: 1px solid #212529 !important;
}

/* ========== Sidenav ========== */
body[data-theme="dark"] .sidenav-dark {
    background-color: #1a1d23 !important;
}

body[data-theme="dark"] .sidenav-dark .sidenav-footer {
    background-color: #141619 !important;
}

/* ========== Header Search ========== */
body[data-theme="dark"] #global-search-input {
    background-color: #212529 !important;
    border-color: #495057 !important;
    color: #ffffff !important;
}

body[data-theme="dark"] #global-search-input::placeholder {
    color: #9ca3af !important;
}

body[data-theme="dark"] #global-search-input:focus {
    background-color: #2c3038 !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
}

/* Search button fix */
body[data-theme="dark"] #global-search-form .input-group-solid .input-group-text {
    background-color: #383d47 !important;
    border-color: #495057 !important;
    color: #ffffff !important;
}

/* ========== Code and Pre blocks ========== */
body[data-theme="dark"] pre,
body[data-theme="dark"] code {
    background-color: #2c3038 !important;
    color: #f8f9fa !important;
}

/* ========== Avatar Circles ========== */
body[data-theme="dark"] .avatar-title {
    background-color: #0061f2 !important;
    color: #ffffff !important;
}

/* ========== File Upload Areas ========== */
body[data-theme="dark"] .dz-message {
    background-color: #2c3038 !important;
    border-color: #495057 !important;
}

/* ========== Switches ========== */
body[data-theme="dark"] .form-switch .form-check-input {
    background-color: #495057 !important;
    border-color: #495057 !important;
}

body[data-theme="dark"] .form-switch .form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

/* ========== Selection ========== */
body[data-theme="dark"] ::selection {
    background-color: #0d6efd;
    color: #ffffff;
}

body[data-theme="dark"] ::-moz-selection {
    background-color: #0d6efd;
    color: #ffffff;
}

/* ========== Scrollbars (Webkit browsers) ========== */
body[data-theme="dark"] ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #1a1d23;
}

body[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #495057;
    border-radius: 6px;
}

body[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #6c757d;
}

/* ========== Loading Spinners ========== */
body[data-theme="dark"] .spinner-border {
    color: #0d6efd !important;
}

/* ========== Custom Classes ========== */
body[data-theme="dark"] .bg-gradient-primary-to-secondary {
    /* Keep gradient for headers unless image is present */
}

/* ========== Specific Component Fixes ========== */

/* Incident form template selector */
body[data-theme="dark"] .template-selector {
    background-color: #2c3038 !important;
}

body[data-theme="dark"] .template-selector:hover {
    background-color: #383d47 !important;
}

body[data-theme="dark"] .template-selector.active {
    background-color: #0d6efd !important;
    color: white !important;
}

/* Student involvement items */
body[data-theme="dark"] .student-involvement-item {
    background-color: #2c3038 !important;
}

/* ========== Toast Notifications ========== */

/* Base toast styling */
body[data-theme="dark"] .toast {
    background-color: #212529 !important;
    border-color: #495057 !important;
}

body[data-theme="dark"] .toast-body {
    background-color: #212529 !important;
    color: #e0e0e0 !important;
}

/* Success Toast (Green) - Keep light backgrounds visible in dark mode */
body[data-theme="dark"] .toast-header.bg-success {
    background-color: #198754 !important;
    color: #ffffff !important;
    border-bottom-color: #146c43 !important;
}

/* Error Toast (Red) - Keep light backgrounds visible in dark mode */
body[data-theme="dark"] .toast-header.bg-danger {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    border-bottom-color: #b02a37 !important;
}

/* Warning Toast (Yellow) - Adjust for better dark mode contrast */
body[data-theme="dark"] .toast-header.bg-warning {
    background-color: #ffc107 !important;
    color: #000000 !important;
    border-bottom-color: #cc9a06 !important;
}

/* Info Toast (Blue) - Keep light backgrounds visible in dark mode */
body[data-theme="dark"] .toast-header.bg-info {
    background-color: #0dcaf0 !important;
    color: #000000 !important;
    border-bottom-color: #0aa2c0 !important;
}

/* Close button styling for colored headers */
body[data-theme="dark"] .toast-header .btn-close-white {
    filter: brightness(1) !important;
}

body[data-theme="dark"] .toast-header.bg-warning .btn-close,
body[data-theme="dark"] .toast-header.bg-info .btn-close {
    filter: brightness(0) !important;
}

/* Accordion */
body[data-theme="dark"] .accordion-item {
    background-color: #212529 !important;
    border-color: #495057 !important;
}

body[data-theme="dark"] .accordion-button {
    background-color: #2c3038 !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: #383d47 !important;
    color: #0d6efd !important;
}

body[data-theme="dark"] .accordion-body {
    background-color: #212529 !important;
    color: #e0e0e0 !important;
}

/* ========== Header Icons (Hamburger & Notifications) ========== */
body[data-theme="dark"] .btn-transparent-dark {
    --bs-btn-color: rgba(255, 255, 255, 0.7) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

body[data-theme="dark"] .btn-transparent-dark:hover {
    --bs-btn-hover-color: rgba(255, 255, 255, 0.9) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body[data-theme="dark"] .btn-transparent-dark:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25) !important;
}

/* ========== Modal Background Utilities ========== */
/* Only apply to modals to avoid breaking page headers */
body[data-theme="dark"] .modal .bg-light,
body[data-theme="dark"] .modal-content .bg-light {
    background-color: #2c3038 !important;
    color: #e0e0e0 !important;
}

body[data-theme="dark"] .modal .bg-white,
body[data-theme="dark"] .modal-content .bg-white {
    background-color: #212529 !important;
    color: #e0e0e0 !important;
}

/* ========== Table Light Headers ========== */
body[data-theme="dark"] .table-light,
body[data-theme="dark"] thead.table-light th,
body[data-theme="dark"] .table-light > th,
body[data-theme="dark"] .table-light > td {
    background-color: #2c3038 !important;
    color: #ffffff !important;
    border-color: #495057 !important;
}

/* ========== Modal Title Fix ========== */
body[data-theme="dark"] .modal-title {
    color: #ffffff !important;
}

/* ========== Table Row Highlighting (Locked/Admin rows) ========== */
body[data-theme="dark"] .table-secondary,
body[data-theme="dark"] .table-secondary > th,
body[data-theme="dark"] .table-secondary > td,
body[data-theme="dark"] tr.table-secondary {
    background-color: rgba(108, 117, 125, 0.3) !important;
    color: #e0e0e0 !important;
    border-color: #495057 !important;
}