/* ========================================
   DARK MODE READABILITY FIXES
   ========================================
   Fixes invisible text caused by:
   1. Mofi theme table contextual rows set color: #131c2e (= same as card background)
   2. Bootstrap .bg-white class lacking dark mode text color
   3. thead.table-light needing dark background + white text
   4. Various elements using var(--white) for text (poisoned in dark mode)
   5. Form borders and list items in dark mode
   Created: 2026-02-20
   ======================================== */

/* ----------------------------------------
   1. TABLE CONTEXTUAL ROWS
   style.css:42930 sets color: #131c2e on ALL contextual rows in dark mode
   = identical to card bg = completely invisible text.
   Override with !important to beat the theme's non-!important rule.
   ---------------------------------------- */
body.dark-only .table .table-primary,
body.dark-only .table .table-primary th,
body.dark-only .table .table-primary td,
body.dark-only .table .table-secondary,
body.dark-only .table .table-secondary th,
body.dark-only .table .table-secondary td,
body.dark-only .table .table-success,
body.dark-only .table .table-success th,
body.dark-only .table .table-success td,
body.dark-only .table .table-info,
body.dark-only .table .table-info th,
body.dark-only .table .table-info td,
body.dark-only .table .table-warning,
body.dark-only .table .table-warning th,
body.dark-only .table .table-warning td,
body.dark-only .table .table-danger,
body.dark-only .table .table-danger th,
body.dark-only .table .table-danger td {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* table-light gets BOTH text + background fix */
body.dark-only .table .table-light,
body.dark-only .table .table-light th,
body.dark-only .table .table-light td,
body.dark-only thead.table-light,
body.dark-only thead.table-light th,
body.dark-only thead.table-light td,
body.dark-only tr.table-light,
body.dark-only tr.table-light th,
body.dark-only tr.table-light td {
  background-color: #1a2637 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Contextual row backgrounds in dark mode — muted versions */
body.dark-only .table .table-primary,
body.dark-only .table .table-primary th,
body.dark-only .table .table-primary td,
body.dark-only tr.table-primary,
body.dark-only tr.table-primary th,
body.dark-only tr.table-primary td {
  background-color: rgba(86, 64, 159, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-only .table .table-secondary,
body.dark-only .table .table-secondary th,
body.dark-only .table .table-secondary td,
body.dark-only tr.table-secondary,
body.dark-only tr.table-secondary th,
body.dark-only tr.table-secondary td {
  background-color: rgba(108, 117, 125, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-only .table .table-success,
body.dark-only .table .table-success th,
body.dark-only .table .table-success td,
body.dark-only tr.table-success,
body.dark-only tr.table-success th,
body.dark-only tr.table-success td {
  background-color: rgba(25, 135, 84, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-only .table .table-info,
body.dark-only .table .table-info th,
body.dark-only .table .table-info td,
body.dark-only tr.table-info,
body.dark-only tr.table-info th,
body.dark-only tr.table-info td {
  background-color: rgba(13, 202, 240, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-only .table .table-warning,
body.dark-only .table .table-warning th,
body.dark-only .table .table-warning td,
body.dark-only tr.table-warning,
body.dark-only tr.table-warning th,
body.dark-only tr.table-warning td {
  background-color: rgba(255, 193, 7, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-only .table .table-danger,
body.dark-only .table .table-danger th,
body.dark-only .table .table-danger td,
body.dark-only tr.table-danger,
body.dark-only tr.table-danger th,
body.dark-only tr.table-danger td {
  background-color: rgba(220, 53, 69, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ----------------------------------------
   2. .bg-white CLASS IN DARK MODE
   Container bg-white stays white while children get dark text = invisible.
   Override to dark background + light text, matching other card backgrounds.
   ---------------------------------------- */
body.dark-only .bg-white {
  background-color: #131c2e !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-only .bg-white p,
body.dark-only .bg-white span:not(.badge),
body.dark-only .bg-white label,
body.dark-only .bg-white small,
body.dark-only .bg-white a:not(.btn),
body.dark-only .bg-white h1,
body.dark-only .bg-white h2,
body.dark-only .bg-white h3,
body.dark-only .bg-white h4,
body.dark-only .bg-white h5,
body.dark-only .bg-white h6 {
  color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-only .bg-white .form-control,
body.dark-only .bg-white .form-select {
  color: #F5F5F4 !important;
  background-color: #111827 !important;
  border-color: #1a2637 !important;
}

body.dark-only .bg-white .border {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ----------------------------------------
   3. var(--white) TEXT POISONING SAFETY NET
   In dark mode, --white = #0b1120 (dark). Elements using color: var(--white)
   for text become invisible on dark backgrounds.
   ---------------------------------------- */
body.dark-only .page-wrapper .page-body-wrapper .page-body .card .card-header .card-title,
body.dark-only .page-wrapper .page-body-wrapper .page-body .card .card-header h4,
body.dark-only .page-wrapper .page-body-wrapper .page-body .card .card-header h5,
body.dark-only .page-wrapper .page-body-wrapper .page-body .card .card-header h6 {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ----------------------------------------
   4. BUTTON TEXT VISIBILITY
   Some btn-light and btn-outline-light have invisible text in dark mode.
   ---------------------------------------- */
body.dark-only .btn-dark {
  color: #fff !important;
}

/* ----------------------------------------
   5. FORM BORDERS IN DARK MODE
   Override the light-mode border for dark-mode containers.
   ---------------------------------------- */
body.dark-only .page-body .form-control,
body.dark-only .page-body .form-select,
body.dark-only .page-body .input-group-text {
  border-color: #1a2637 !important;
  background-color: #111827 !important;
  color: #F5F5F4 !important;
}

/* ----------------------------------------
   6. LEGEND ELEMENT DARK MODE
   style.php sets black bg + white text. Keep readable but less jarring.
   ---------------------------------------- */
body.dark-only legend {
  background-color: #1a2637 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.1);
}

/* ----------------------------------------
   7. CARD BORDERS IN DARK MODE
   ---------------------------------------- */
body.dark-only .page-body .card {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-only .page-body .card-wrapper.border {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ----------------------------------------
   8. GENERIC CONTAINER/SECTION TEXT
   Catch containers with --white-based or hardcoded light text
   ---------------------------------------- */
body.dark-only .border {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-only .border-top {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-only .border-bottom {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* ----------------------------------------
   9. STAT CARDS / DASHBOARD WIDGETS
   Elements with text-dark on stat values becoming invisible.
   ---------------------------------------- */
body.dark-only .d-flex h6,
body.dark-only .d-flex .h6 {
  color: rgba(255, 255, 255, 0.8);
}

body.dark-only .fw-bold,
body.dark-only .fw-semibold,
body.dark-only .fw-medium {
  color: rgba(255, 255, 255, 0.85);
}

/* ----------------------------------------
   10. STATUS INDICATOR ICONS
   Icons using inline style="color: black" become invisible.
   These are usually status indicators (overdue, black-status).
   Using a dark grey instead to remain visible on both themes.
   ---------------------------------------- */
body.dark-only [style*="color: black"],
body.dark-only [style*="color:black"] {
  color: #9ca3af !important;
}

body.dark-only [style*="color: black !important"],
body.dark-only [style*="color:black !important"] {
  color: #9ca3af !important;
}

/* ----------------------------------------
   11. DATACARD / TABLE COLUMN VISIBILITY
   Entire columns invisible when header th color matches card bg.
   Ensure all th elements inside dark-mode tables are visible.
   ---------------------------------------- */
body.dark-only .card-body th,
body.dark-only .card-body .table th {
  color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-only .card-body td,
body.dark-only .card-body .table td {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ----------------------------------------
   12. CODE ELEMENTS
   code.text-dark becomes invisible in dark mode.
   ---------------------------------------- */
body.dark-only code {
  color: #e06c75 !important;
  background-color: rgba(255, 255, 255, 0.06);
  padding: 2px 4px;
  border-radius: 3px;
}

body.dark-only code.text-dark {
  color: #e06c75 !important;
}

/* ----------------------------------------
   13. EMPTY STATE / INFO MESSAGES
   Text in empty states or info areas using dark text on dark bg.
   ---------------------------------------- */
body.dark-only .text-center p,
body.dark-only .text-center h5,
body.dark-only .text-center h6 {
  color: rgba(255, 255, 255, 0.7);
}

/* ----------------------------------------
   14. TABLE HEADER (th) ADDITIONAL SPECIFICITY
   Extra specificity to ensure th is always visible in dark mode,
   beating any card-body > table > th inherit chains.
   ---------------------------------------- */
body.dark-only .page-wrapper .page-body-wrapper .page-body .card-body .table thead th,
body.dark-only .page-wrapper .page-body-wrapper .page-body .card-body .dataTables_wrapper thead th {
  color: rgba(255, 255, 255, 0.9) !important;
  background-color: #131c2e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ----------------------------------------
   15. CHOSEN / SELECT DROPDOWNS IN DARK MODE
   Chosen single/multi containers need dark treatment.
   ---------------------------------------- */
body.dark-only .chosen-container-single .chosen-single {
  background-color: #111827 !important;
  color: #F5F5F4 !important;
  border-color: #1a2637 !important;
}

body.dark-only .chosen-container-single .chosen-single span {
  color: #F5F5F4 !important;
}

body.dark-only .chosen-container-active .chosen-single {
  border-color: var(--theme-default) !important;
}

/* ----------------------------------------
   16. FLATPICKR / DATE PICKER DARK MODE
   ---------------------------------------- */
body.dark-only .flatpickr-calendar {
  background-color: #131c2e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

body.dark-only .flatpickr-day {
  color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-only .flatpickr-day:hover {
  background-color: #1a2637 !important;
  border-color: #1a2637 !important;
}

body.dark-only .flatpickr-day.selected {
  background-color: var(--theme-default) !important;
  border-color: var(--theme-default) !important;
  color: #fff !important;
}

body.dark-only .flatpickr-months .flatpickr-month,
body.dark-only .flatpickr-current-month .flatpickr-monthDropdown-months {
  background-color: #131c2e !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-only .flatpickr-current-month input.cur-year {
  color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-only .flatpickr-weekdays,
body.dark-only .flatpickr-weekday {
  background-color: #131c2e !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-only .flatpickr-day.flatpickr-disabled {
  color: rgba(255, 255, 255, 0.25) !important;
}

/* ----------------------------------------
   17. TOOLTIP / POPOVER ARROW FIXES
   ---------------------------------------- */
body.dark-only .bs-popover-start > .popover-arrow::after,
body.dark-only .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after {
  border-left-color: #131c2e;
}

body.dark-only .bs-popover-end > .popover-arrow::after,
body.dark-only .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after {
  border-right-color: #131c2e;
}

/* ========================================
   COMPREHENSIVE VISIBILITY FIXES - PHASE 2
   Created: 2026-02-20
   Fixes for badges, buttons, columns, modals, and var(--white) poisoning
   ======================================== */

/* ----------------------------------------
   18. BADGE VISIBILITY FIXES
   Badge-light has #f4f4f4 background (invisible on dark)
   Badge-dark has #2c323f which is similar to card bg
   ---------------------------------------- */
body.dark-only .badge,
body.dark-only .badge-primary,
body.dark-only .badge-secondary,
body.dark-only .badge-success,
body.dark-only .badge-danger,
body.dark-only .badge-warning,
body.dark-only .badge-info,
body.dark-only .badge-dark,
body.dark-only .badge-light,
body.dark-only .badge-tertiary {
  color: #fff !important;
}

/* Badge-light background becomes dark in dark mode */
body.dark-only .badge-light {
  background-color: #1a2637 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Badge-dark needs lighter text in dark mode */
body.dark-only .badge-dark {
  background-color: #111827 !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Light badge variants need dark background */
body.dark-only .badge-light-primary,
body.dark-only .badge-light-secondary,
body.dark-only .badge-light-success,
body.dark-only .badge-light-danger,
body.dark-only .badge-light-warning,
body.dark-only .badge-light-info,
body.dark-only .badge-light-tertiary,
body.dark-only .badge-light-light,
body.dark-only .badge-light-dark {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Outline badges need visible borders */
body.dark-only .badge-b-primary,
body.dark-only .badge-b-secondary,
body.dark-only .badge-b-success,
body.dark-only .badge-b-danger,
body.dark-only .badge-b-warning,
body.dark-only .badge-b-info,
body.dark-only .badge-b-dark,
body.dark-only .badge-b-light,
body.dark-only .badge-b-tertiary {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* ----------------------------------------
   19. BUTTON TEXT VISIBILITY - COMPREHENSIVE
   Fix all button variants with light backgrounds/text
   ---------------------------------------- */
body.dark-only .btn-light,
body.dark-only .btn-outline-light,
body.dark-only .btn-white,
body.dark-only .btn-default {
  background-color: #1a2637 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-only .btn-light:hover,
body.dark-only .btn-outline-light:hover,
body.dark-only .btn-white:hover {
  background-color: #263330 !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}

body.dark-only .btn-outline-light {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Button text on colored backgrounds */
body.dark-only .btn-primary,
body.dark-only .btn-secondary,
body.dark-only .btn-success,
body.dark-only .btn-danger,
body.dark-only .btn-warning,
body.dark-only .btn-info,
body.dark-only .btn-dark {
  color: #fff !important;
}

/* bg-light-* button backgrounds */
body.dark-only .btn.bg-light-primary,
body.dark-only .btn.bg-light-secondary,
body.dark-only .btn.bg-light-success,
body.dark-only .btn.bg-light-danger,
body.dark-only .btn.bg-light-warning,
body.dark-only .btn.bg-light-info,
body.dark-only .btn.bg-light-tertiary,
body.dark-only .btn.bg-light-light,
body.dark-only .btn.bg-light-dark {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ----------------------------------------
   20. TABLE COLUMN & DATA TABLE FIXES
   Ensure all table columns are visible
   ---------------------------------------- */
body.dark-only .table > thead,
body.dark-only .table thead {
  background-color: #131c2e;
  color: rgba(255, 255, 255, 0.95);
}

body.dark-only .table > thead > tr > th,
body.dark-only .table thead > tr > th,
body.dark-only .dataTable thead > tr > th {
  background-color: #131c2e !important;
  color: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-only .table > tbody > tr > td,
body.dark-only .table tbody > tr > td,
body.dark-only .dataTable tbody > tr > td {
  color: rgba(255, 255, 255, 0.85);
  background-color: transparent;
}

body.dark-only .table-striped > tbody > tr:nth-of-type(odd),
body.dark-only .table-striped tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.03);
}

body.dark-only .table-hover > tbody > tr:hover,
body.dark-only .table-hover tbody > tr:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* DataTables specific */
body.dark-only .dataTables_wrapper .dataTables_filter input,
body.dark-only .dataTables_wrapper .dataTables_length select,
body.dark-only .dataTables_wrapper .dataTables_info {
  color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-only .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-only .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #131c2e !important;
  color: #fff !important;
}

/* ----------------------------------------
   21. CARD & CONTAINER VISIBILITY
   Fix cards, columns, and containers
   ---------------------------------------- */
body.dark-only .card,
body.dark-only .card-body,
body.dark-only .card-header,
body.dark-only .card-footer {
  background-color: #131c2e;
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-only .card .card-header .card-title,
body.dark-only .card .card-header h4,
body.dark-only .card .card-header h5,
body.dark-only .card .card-header h6 {
  color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-only .card-body {
  color: rgba(255, 255, 255, 0.85);
}

body.dark-only .card-body h1,
body.dark-only .card-body h2,
body.dark-only .card-body h3,
body.dark-only .card-body h4,
body.dark-only .card-body h5,
body.dark-only .card-body h6,
body.dark-only .card-body p,
body.dark-only .card-body span,
body.dark-only .card-body label {
  color: rgba(255, 255, 255, 0.85);
}

/* Column visibility fix */
body.dark-only .col,
body.dark-only .col-1,
body.dark-only .col-2,
body.dark-only .col-3,
body.dark-only .col-4,
body.dark-only .col-5,
body.dark-only .col-6,
body.dark-only .col-7,
body.dark-only .col-8,
body.dark-only .col-9,
body.dark-only .col-10,
body.dark-only .col-11,
body.dark-only .col-12 {
  color: rgba(255, 255, 255, 0.85);
}

/* ----------------------------------------
   22. MODAL & POPUP VISIBILITY
   Fix modals, dialogs, popups
   ---------------------------------------- */
body.dark-only .modal-content,
body.dark-only .modal-header,
body.dark-only .modal-body,
body.dark-only .modal-footer {
  background-color: #131c2e;
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

body.dark-only .modal-header h1,
body.dark-only .modal-header h2,
body.dark-only .modal-header h3,
body.dark-only .modal-header h4,
body.dark-only .modal-header h5,
body.dark-only .modal-header h6,
body.dark-only .modal-title {
  color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-only .modal-body {
  color: rgba(255, 255, 255, 0.85);
}

body.dark-only .close,
body.dark-only .modal-close {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Popover and tooltip dark mode */
body.dark-only .popover {
  background-color: #131c2e;
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-only .popover-header,
body.dark-only .popover-body {
  background-color: #131c2e;
  color: rgba(255, 255, 255, 0.9);
}

/* ----------------------------------------
   23. DROPDOWN & MENU VISIBILITY
   Fix dropdown menus
   ---------------------------------------- */
body.dark-only .dropdown-menu,
body.dark-only .dropdown-content,
body.dark-only .menu-dropdown {
  background-color: #131c2e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-only .dropdown-menu li a,
body.dark-only .dropdown-menu li span,
body.dark-only .dropdown-item {
  color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-only .dropdown-menu li a:hover,
body.dark-only .dropdown-menu li a:focus,
body.dark-only .dropdown-item:hover,
body.dark-only .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

/* ----------------------------------------
   24. FORM ELEMENTS VISIBILITY
   Fix all form elements
   ---------------------------------------- */
body.dark-only .form-control,
body.dark-only .form-select,
body.dark-only input.form-control,
body.dark-only select.form-select,
body.dark-only textarea.form-control {
  background-color: #111827 !important;
  border-color: #1a2637 !important;
  color: #F5F5F4 !important;
}

body.dark-only .form-control::placeholder,
body.dark-only textarea.form-control::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

body.dark-only label {
  color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-only .form-text,
body.dark-only .text-muted {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Checkbox and radio */
body.dark-only .form-check-label,
body.dark-only .form-check-input {
  color: rgba(255, 255, 255, 0.85);
}

/* ----------------------------------------
   25. TEXT COLOR INVERSE FIXES
   Fix text-dark and text-muted that become invisible
   ---------------------------------------- */
body.dark-only .text-dark {
  color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-only .text-muted {
  color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-only .text-secondary {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-only .text-primary {
  color: #60a5fa !important;
}

body.dark-only .text-success {
  color: #86efac !important;
}

body.dark-only .text-danger {
  color: #fca5a5 !important;
}

body.dark-only .text-warning {
  color: #fcd34d !important;
}

body.dark-only .text-info {
  color: #7dd3fc !important;
}

/* ----------------------------------------
   26. ULTIMATE SAFETY NET - var(--white) FIX
   This catches ANY element using var(--white) for text
   that might have been missed above
   ---------------------------------------- */
body.dark-only [class*="card"] .card-title,
body.dark-only [class*="card"] .card-text,
body.dark-only [class*="card"] p,
body.dark-only [class*="card"] span:not(.badge):not(.btn),
body.dark-only [class*="card"] label,
body.dark-only [class*="card"] th,
body.dark-only [class*="card"] td {
  color: rgba(255, 255, 255, 0.85);
}

/* Row and column containers */
body.dark-only .row > [class*="col"],
body.dark-only .row > div,
body.dark-only .row-fluid > [class*="span"] {
  color: rgba(255, 255, 255, 0.85);
}

/* List items */
body.dark-only ul li,
body.dark-only ol li {
  color: rgba(255, 255, 255, 0.8);
}

/* Navigation items */
body.dark-only .nav-link,
body.dark-only .nav-item a {
  color: rgba(255, 255, 255, 0.8);
}

body.dark-only .nav-link:hover,
body.dark-only .nav-item a:hover {
  color: #fff !important;
}

/* Alert boxes */
body.dark-only .alert {
  border-color: rgba(255, 255, 255, 0.15);
}

body.dark-only .alert-success {
  background-color: rgba(25, 135, 84, 0.2);
  color: #86efac;
}

body.dark-only .alert-danger {
  background-color: rgba(220, 53, 69, 0.2);
  color: #fca5a5;
}

body.dark-only .alert-warning {
  background-color: rgba(255, 193, 7, 0.2);
  color: #fcd34d;
}

body.dark-only .alert-info {
  background-color: rgba(13, 202, 240, 0.2);
  color: #7dd3fc;
}

body.dark-only .alert-light {
  background-color: rgba(244, 244, 244, 0.1);
  color: rgba(255, 255, 255, 0.85);
}

body.dark-only .alert-dark {
  background-color: rgba(44, 50, 63, 0.8);
  color: rgba(255, 255, 255, 0.85);
}

/* Progress bars */
body.dark-only .progress {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Tabs */
body.dark-only .nav-tabs .nav-link,
body.dark-only .nav-pills .nav-link {
  color: rgba(255, 255, 255, 0.7);
}

body.dark-only .nav-tabs .nav-link.active,
body.dark-only .nav-pills .nav-link.active {
  background-color: #131c2e;
  color: #fff;
}

body.dark-only .tab-content {
  background-color: #131c2e;
  color: rgba(255, 255, 255, 0.85);
}

/* Pagination */
body.dark-only .pagination .page-link {
  background-color: #131c2e;
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

body.dark-only .pagination .page-item.active .page-link {
  background-color: var(--theme-default);
  border-color: var(--theme-default);
  color: #fff;
}

/* ----------------------------------------
   27. CUSTOM TABLE CLASS FIXES
   Fix table-modern and custom tables
   ---------------------------------------- */
body.dark-only .table-modern,
body.dark-only .table-custom {
  background-color: #131c2e;
}

body.dark-only .table-modern thead,
body.dark-only .table-custom thead {
  background-color: #111827 !important;
  color: #fff !important;
}

body.dark-only .table-modern thead th,
body.dark-only .table-custom thead th {
  background-color: #111827 !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-only .table-modern tbody td,
body.dark-only .table-custom tbody td {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.05);
  background-color: transparent;
}

body.dark-only .table-modern tbody tr:hover,
body.dark-only .table-custom tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* ----------------------------------------
   28. BG-LIGHT CLASSES FIX
   Fix .bg-light and .bg-light-* which become invisible
   ---------------------------------------- */
body.dark-only .bg-light,
body.dark-only .bg-light-primary,
body.dark-only .bg-light-secondary,
body.dark-only .bg-light-success,
body.dark-only .bg-light-danger,
body.dark-only .bg-light-warning,
body.dark-only .bg-light-info,
body.dark-only .bg-light-tertiary,
body.dark-only .bg-light-light,
body.dark-only .bg-light-dark {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ----------------------------------------
   29. JSGRID & ADVANCED TABLE FIXES
   Fix jsgrid and other advanced table components
   ---------------------------------------- */
body.dark-only .jsgrid-grid-header,
body.dark-only .jsgrid-grid-body {
  background-color: #131c2e;
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-only .jsgrid-header-row > .jsgrid-header-cell {
  background-color: #111827 !important;
  color: #fff !important;
}

body.dark-only .jsgrid-row > .jsgrid-cell,
body.dark-only .jsgrid-alt-row > .jsgrid-cell {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.05);
}

body.dark-only .jsgrid-alt-row > .jsgrid-cell {
  background-color: rgba(255, 255, 255, 0.02);
}

/* ----------------------------------------
   30. SIDEBAR & NAVIGATION FIX
   Ensure sidebar elements are visible
   ---------------------------------------- */
body.dark-only .sidebar-wrapper,
body.dark-only .sidebar-main {
  background-color: #0b1120;
}

body.dark-only .sidebar-wrapper .nav-link,
body.dark-only .sidebar-main .nav-link {
  color: rgba(255, 255, 255, 0.7);
}

body.dark-only .sidebar-wrapper .nav-link:hover,
body.dark-only .sidebar-main .nav-link:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.05);
}