/* static/css/theme-dark-overrides.css

   Surgical dark-mode overrides for elements not reached by per-file edits:
   Bootstrap utility classes that hardcode light values, components used
   via class only (cards, alerts, list-groups), and templates with embedded
   <style> blocks we can target by class.

   This file fires only under [data-bs-theme="dark"]. Light mode is unaffected.
   Long-tail per-template cleanup tracked in DARK_MODE_AUDIT.md. */

/* ------- Bootstrap utility surfaces hardcoded as light ------- */
[data-bs-theme="dark"] .bg-white {
  background-color: var(--bg-surface) !important;
  color: var(--fg-default);
}

/* `.bg-light` doesn't react to data-bs-theme in BS5 5.3 — we flip it
   manually for non-navbar uses. Navbar-scoped rule lives below. */
[data-bs-theme="dark"] .bg-light:not(.navbar):not(nav) {
  background-color: var(--bg-surface-2) !important;
  color: var(--fg-default);
}

[data-bs-theme="dark"] .text-dark {
  color: var(--fg-default) !important;
}

/* ------- Navbar (base.html: <nav class="navbar navbar-light bg-light">) ------- */
[data-bs-theme="dark"] .navbar.bg-light {
  background-color: var(--navbar-bg) !important;
}
[data-bs-theme="dark"] .navbar.navbar-light .navbar-brand,
[data-bs-theme="dark"] .navbar.navbar-light .nav-link,
[data-bs-theme="dark"] .navbar.navbar-light .navbar-text {
  color: var(--navbar-fg) !important;
}
[data-bs-theme="dark"] .navbar.navbar-light .nav-link:hover {
  color: var(--link-hover) !important;
}
[data-bs-theme="dark"] .navbar.navbar-light .navbar-toggler {
  border-color: var(--border-default);
}
[data-bs-theme="dark"] .navbar.navbar-light .navbar-toggler-icon {
  filter: invert(1) opacity(.85);
}

/* ------- Cards (used throughout) -------
   Give every .card a stronger frame + lift in dark mode so dashboard
   grids (dossiers, audits, etc.) read as discrete blocks instead of
   blending into the page surface. */
[data-bs-theme="dark"] .card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--fg-default);
  border-radius: 0.75rem;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.35);
}
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
  background-color: var(--bg-surface-2);
  border-color: var(--card-border);
  color: var(--fg-default);
}

/* ------- Alerts (semantic colors retuned for dark) ------- */
[data-bs-theme="dark"] .alert-success {
  background-color: #1b3a26; border-color: #2c5d3a; color: #a8d5b5;
}
[data-bs-theme="dark"] .alert-danger {
  background-color: #4a1f23; border-color: #6b2c33; color: #f5b7bd;
}
[data-bs-theme="dark"] .alert-info {
  background-color: #1c3a47; border-color: #2c5a6e; color: #a8d5e3;
}
[data-bs-theme="dark"] .alert-warning {
  background-color: #4a3a1a; border-color: #6b552c; color: #f5d68a;
}

/* ------- List groups ------- */
[data-bs-theme="dark"] .list-group-item {
  background-color: var(--bg-surface);
  color: var(--fg-default);
  border-color: var(--border-default);
}
[data-bs-theme="dark"] .list-group-item-action:hover,
[data-bs-theme="dark"] .list-group-item-action:focus {
  background-color: var(--bg-surface-2);
  color: var(--fg-default);
}

/* ------- Modals ------- */
[data-bs-theme="dark"] .modal-content {
  background-color: var(--bg-surface);
  color: var(--fg-default);
  border-color: var(--border-default);
}
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
  border-color: var(--border-default);
}

/* ------- Dropdowns ------- */
[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .dropdown-item {
  color: var(--fg-default);
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: var(--bg-surface-2);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .dropdown-divider {
  border-top-color: var(--border-default);
}

/* ------- Form controls (Bootstrap 5.3 handles most, but be explicit) ------- */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--input-bg);
  color: var(--input-fg);
  border-color: var(--input-border);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--input-bg);
  color: var(--input-fg);
}
[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--fg-muted);
}

/* BS5 input-group prefix/suffix box (used on send_circular, login,
   signup, wacc dashboard). Default uses `--bs-tertiary-bg` which can
   render as a slightly off-dark band. Bind to bg-surface-2 / fg-default
   for consistency with the input it sits next to. */
[data-bs-theme="dark"] .input-group-text {
  background-color: var(--bg-surface-2);
  color: var(--fg-default);
  border-color: var(--input-border);
}

/* ------- base_manual.html: top toolbar uses bg-white directly ------- */
[data-bs-theme="dark"] .manual-top-nav.bg-white {
  background-color: var(--navbar-bg) !important;
  border-bottom-color: var(--border-default) !important;
  color: var(--fg-default);
}

/* ------- Headings inherit by default; do not override colored headings. ------- */
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6 {
  color: inherit;
}

/* ------- Links ------- */
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand) {
  color: var(--link);
}
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):hover {
  color: var(--link-hover);
}

/* ------- Pre-formatted text / code blocks (page-level) ------- */
[data-bs-theme="dark"] pre,
[data-bs-theme="dark"] code:not(td code):not(th code) {
  background-color: var(--bg-surface-2);
  color: var(--code-fg);
}

/* ------- Tables (Bootstrap 5.3 ships --bs-table-* in dark theme, but
   custom.css applies !important rules that win regardless. Re-assert here.) ------- */
[data-bs-theme="dark"] .table {
  --bs-table-color: var(--fg-default);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border-default);
}

/* ------- HR ------- */
[data-bs-theme="dark"] hr {
  border-top-color: var(--border-default);
  color: var(--border-default);
  opacity: .5;
}

/* ------- Muted text contrast in dark mode -------
   BS5's `.text-muted` resolves to `--bs-secondary-color` (≈#6c757d),
   which is fine on light surfaces but too dim on dark. Re-route to
   our `--fg-muted` (#adb5bd in dark), and bump the BS5 secondary
   variables themselves so any class using them gets lifted. */
[data-bs-theme="dark"] {
  --bs-secondary-color: var(--fg-muted);
  --bs-tertiary-color: var(--fg-muted);
  --bs-body-secondary-color: var(--fg-muted);
}
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-body-secondary,
[data-bs-theme="dark"] small.text-muted,
[data-bs-theme="dark"] .small.text-muted {
  color: var(--fg-muted) !important;
}
/* `.text-secondary` is also commonly used for timestamps / metadata */
[data-bs-theme="dark"] .text-secondary {
  color: var(--fg-muted) !important;
}
/* BS5 nav-tabs inactive link color — defaults to `--bs-nav-link-color`
   which is brand-primary, but it can render as a dim blue on dark.
   Bump to a slightly brighter blue so inactive tabs aren't ghostly. */
[data-bs-theme="dark"] .nav-tabs .nav-link:not(.active) {
  color: var(--link);
}
[data-bs-theme="dark"] .nav-tabs .nav-link:not(.active):hover {
  color: var(--link-hover);
  border-color: var(--border-default) var(--border-default) transparent;
}

/* ------- Bootstrap tooltips ------- */
[data-bs-theme="dark"] .tooltip {
  --bs-tooltip-bg: var(--bg-surface-2);
  --bs-tooltip-color: var(--fg-default);
}
[data-bs-theme="dark"] .tooltip .tooltip-inner {
  background-color: var(--bg-surface-2);
  color: var(--fg-default);
  border: 1px solid var(--border-default);
}
[data-bs-theme="dark"] .tooltip .tooltip-arrow::before {
  border-top-color: var(--bg-surface-2);
  border-bottom-color: var(--bg-surface-2);
  border-left-color: var(--bg-surface-2);
  border-right-color: var(--bg-surface-2);
}

/* ------- Bootstrap popovers ------- */
[data-bs-theme="dark"] .popover {
  --bs-popover-bg: var(--card-bg);
  --bs-popover-header-bg: var(--bg-surface-2);
  --bs-popover-header-color: var(--fg-default);
  --bs-popover-body-color: var(--fg-default);
  --bs-popover-border-color: var(--card-border);
  background-color: var(--card-bg);
  border-color: var(--card-border);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .popover-header {
  background-color: var(--bg-surface-2);
  color: var(--fg-default);
  border-bottom-color: var(--card-border);
}
[data-bs-theme="dark"] .popover-body {
  color: var(--fg-default);
}

/* ------- Form validation feedback ------- */
[data-bs-theme="dark"] .invalid-feedback,
[data-bs-theme="dark"] .form-text.text-danger {
  color: #f5b7bd;
}
[data-bs-theme="dark"] .valid-feedback,
[data-bs-theme="dark"] .form-text.text-success {
  color: #6fdc8c;
}
[data-bs-theme="dark"] .form-control.is-invalid,
[data-bs-theme="dark"] .form-select.is-invalid {
  border-color: rgba(220, 53, 69, 0.6);
}
[data-bs-theme="dark"] .form-control.is-valid,
[data-bs-theme="dark"] .form-select.is-valid {
  border-color: rgba(25, 135, 84, 0.6);
}

/* ------- Toasts ------- */
[data-bs-theme="dark"] .toast {
  background-color: var(--card-bg);
  border-color: var(--card-border);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .toast-header {
  background-color: var(--bg-surface-2);
  color: var(--fg-default);
  border-bottom-color: var(--card-border);
}

/* ------- Flatpickr (vendored CDN datepicker, ships as light theme) ------- */
[data-bs-theme="dark"] .flatpickr-calendar {
  background: var(--card-bg);
  color: var(--fg-default);
  border: 1px solid var(--card-border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
[data-bs-theme="dark"] .flatpickr-calendar.arrowTop:before,
[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:before {
  border-bottom-color: var(--card-border);
  border-top-color: var(--card-border);
}
[data-bs-theme="dark"] .flatpickr-calendar.arrowTop:after {
  border-bottom-color: var(--card-bg);
}
[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:after {
  border-top-color: var(--card-bg);
}
[data-bs-theme="dark"] .flatpickr-months .flatpickr-month,
[data-bs-theme="dark"] .flatpickr-current-month,
[data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-bs-theme="dark"] .flatpickr-current-month input.cur-year,
[data-bs-theme="dark"] .flatpickr-weekday {
  color: var(--fg-default);
  background: transparent;
  fill: var(--fg-default);
}
[data-bs-theme="dark"] .flatpickr-months .flatpickr-prev-month,
[data-bs-theme="dark"] .flatpickr-months .flatpickr-next-month {
  color: var(--fg-default);
  fill: var(--fg-default);
}
[data-bs-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
[data-bs-theme="dark"] .flatpickr-months .flatpickr-next-month svg {
  fill: var(--fg-default);
}
[data-bs-theme="dark"] .flatpickr-day {
  color: var(--fg-default);
  background: transparent;
  border-color: transparent;
}
[data-bs-theme="dark"] .flatpickr-day:hover,
[data-bs-theme="dark"] .flatpickr-day:focus {
  background: var(--bg-surface-2);
  border-color: var(--bg-surface-2);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .flatpickr-day.prevMonthDay,
[data-bs-theme="dark"] .flatpickr-day.nextMonthDay,
[data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled {
  color: var(--fg-muted);
}
[data-bs-theme="dark"] .flatpickr-day.today {
  border-color: var(--fg-muted);
}
[data-bs-theme="dark"] .flatpickr-day.today:hover {
  background: var(--bg-muted);
  color: var(--fg-default);
  border-color: var(--fg-muted);
}
[data-bs-theme="dark"] .flatpickr-day.selected,
[data-bs-theme="dark"] .flatpickr-day.selected:hover,
[data-bs-theme="dark"] .flatpickr-day.selected.startRange,
[data-bs-theme="dark"] .flatpickr-day.selected.endRange,
[data-bs-theme="dark"] .flatpickr-day.startRange,
[data-bs-theme="dark"] .flatpickr-day.endRange {
  background: var(--link);
  border-color: var(--link);
  color: var(--fg-inverse);
}
[data-bs-theme="dark"] .flatpickr-time input,
[data-bs-theme="dark"] .flatpickr-time .flatpickr-am-pm {
  color: var(--fg-default);
  background: transparent;
}
[data-bs-theme="dark"] .flatpickr-time input:hover,
[data-bs-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover {
  background: var(--bg-surface-2);
}

/* ------- Select2 v4 (`.select2-container--default`) ------- */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-fg);
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  color: var(--input-fg);
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--fg-muted);
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-top-color: var(--fg-muted);
}
[data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-bottom-color: var(--fg-muted);
}
[data-bs-theme="dark"] .select2-dropdown {
  background-color: var(--card-bg);
  border-color: var(--card-border);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .select2-container--default .select2-results__option {
  color: var(--fg-default);
  background-color: transparent;
}
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--bg-surface-2);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--input-bg);
  color: var(--input-fg);
  border-color: var(--input-border);
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--bg-muted);
  border-color: var(--border-default);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--fg-muted);
}

/* ------- Select2 v3 (legacy — used by Flask-Admin) ------- */
[data-bs-theme="dark"] .select2-choice,
[data-bs-theme="dark"] .select2-choices,
[data-bs-theme="dark"] .select2-container .select2-choice {
  background-color: var(--input-bg) !important;
  background-image: none !important;
  border-color: var(--input-border) !important;
  color: var(--input-fg) !important;
}
[data-bs-theme="dark"] .select2-chosen {
  color: var(--input-fg) !important;
}
[data-bs-theme="dark"] .select2-drop,
[data-bs-theme="dark"] .select2-drop-active {
  background-color: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--fg-default) !important;
}
[data-bs-theme="dark"] .select2-results .select2-result-label {
  color: var(--fg-default);
}
[data-bs-theme="dark"] .select2-results .select2-highlighted {
  background-color: var(--bg-surface-2) !important;
  color: var(--fg-default) !important;
}
[data-bs-theme="dark"] .select2-search input {
  background-color: var(--input-bg);
  color: var(--input-fg);
  border-color: var(--input-border);
}
[data-bs-theme="dark"] .select2-search-choice {
  background-color: var(--bg-muted) !important;
  background-image: none !important;
  border-color: var(--border-default) !important;
  color: var(--fg-default) !important;
}

/* ------- SweetAlert (swal2 modal) ------- */
[data-bs-theme="dark"] .swal2-popup {
  background: var(--card-bg) !important;
  color: var(--fg-default) !important;
}
[data-bs-theme="dark"] .swal2-title,
[data-bs-theme="dark"] .swal2-html-container,
[data-bs-theme="dark"] .swal2-content {
  color: var(--fg-default) !important;
}
[data-bs-theme="dark"] .swal2-input,
[data-bs-theme="dark"] .swal2-textarea,
[data-bs-theme="dark"] .swal2-select {
  background-color: var(--input-bg) !important;
  color: var(--input-fg) !important;
  border-color: var(--input-border) !important;
}
[data-bs-theme="dark"] .swal2-footer {
  color: var(--fg-muted);
  border-top-color: var(--border-default);
}
/* SweetAlert v1 (older `.swal-*` API) */
[data-bs-theme="dark"] .swal-modal {
  background-color: var(--card-bg);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .swal-title,
[data-bs-theme="dark"] .swal-text {
  color: var(--fg-default);
}

/* ------- DataTables (Flask-Admin's `admin/model/datatables_list.html`
   uses it, plus legacy `restful*.html` views) ------- */
[data-bs-theme="dark"] .dataTables_wrapper,
[data-bs-theme="dark"] .dataTables_wrapper label,
[data-bs-theme="dark"] .dataTables_info,
[data-bs-theme="dark"] .dataTables_length,
[data-bs-theme="dark"] .dataTables_filter {
  color: var(--fg-default);
}
[data-bs-theme="dark"] .dataTables_filter input,
[data-bs-theme="dark"] .dataTables_length select {
  background-color: var(--input-bg);
  color: var(--input-fg);
  border-color: var(--input-border);
}
[data-bs-theme="dark"] table.dataTable,
[data-bs-theme="dark"] table.dataTable thead th,
[data-bs-theme="dark"] table.dataTable tbody td,
[data-bs-theme="dark"] table.dataTable tbody th {
  color: var(--fg-default);
  border-color: var(--border-default);
}
[data-bs-theme="dark"] table.dataTable thead th {
  background-color: var(--bg-surface-2);
  border-bottom-color: var(--border-default);
}
[data-bs-theme="dark"] table.dataTable tbody tr {
  background-color: transparent;
}
[data-bs-theme="dark"] table.dataTable.stripe tbody tr.odd,
[data-bs-theme="dark"] table.dataTable.display tbody tr.odd {
  background-color: var(--bg-surface-2);
}
[data-bs-theme="dark"] table.dataTable.hover tbody tr:hover,
[data-bs-theme="dark"] table.dataTable.display tbody tr:hover {
  background-color: var(--bg-muted);
}
[data-bs-theme="dark"] .dataTables_paginate .paginate_button {
  color: var(--link) !important;
  background: transparent;
  border-color: var(--card-border);
}
[data-bs-theme="dark"] .dataTables_paginate .paginate_button.current,
[data-bs-theme="dark"] .dataTables_paginate .paginate_button.current:hover {
  background: var(--link) !important;
  border-color: var(--link) !important;
  color: var(--fg-inverse) !important;
}
[data-bs-theme="dark"] .dataTables_paginate .paginate_button:hover {
  background: var(--bg-surface-2) !important;
  border-color: var(--card-border) !important;
  color: var(--link) !important;
}
[data-bs-theme="dark"] .dataTables_paginate .paginate_button.disabled,
[data-bs-theme="dark"] .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--fg-muted) !important;
  background: transparent !important;
  border-color: var(--card-border) !important;
}
/* DataTables sort indicators on column headers — keep visible on dark */
[data-bs-theme="dark"] table.dataTable thead .sorting:after,
[data-bs-theme="dark"] table.dataTable thead .sorting_asc:after,
[data-bs-theme="dark"] table.dataTable thead .sorting_desc:after,
[data-bs-theme="dark"] table.dataTable thead .sorting:before,
[data-bs-theme="dark"] table.dataTable thead .sorting_asc:before,
[data-bs-theme="dark"] table.dataTable thead .sorting_desc:before {
  color: var(--fg-default);
  opacity: .6;
}

/* ------- compliance_audit landing pages (shared chrome) -------
   Every *_landing.html in compliance_audit/ uses the argon-dashboard
   light palette via shared class names (`.landing-header`,
   `.selection-card`, `.status-table`, `.status-badge`, `.quick-link`,
   `.info-card`) wrapped in a per-file `*-landing-container`. Flip
   the chrome surfaces globally instead of repeating the same block
   in every file. Semantic status palette (badges, brand-purple
   buttons) intentionally stays literal. */
[data-bs-theme="dark"] [class*="-landing-container"] {
  background: var(--bg-app);
}
[data-bs-theme="dark"] .landing-header,
[data-bs-theme="dark"] .selection-card {
  background: var(--card-bg) !important;
  border-color: var(--card-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
[data-bs-theme="dark"] .landing-header h1,
[data-bs-theme="dark"] .selection-card h4 {
  color: var(--fg-default);
}
[data-bs-theme="dark"] .selection-card h4 {
  border-color: var(--border-default);
}
[data-bs-theme="dark"] .landing-header p {
  color: var(--fg-muted);
}
[data-bs-theme="dark"] .status-table th {
  background: var(--bg-surface-2);
  color: var(--fg-muted);
}
[data-bs-theme="dark"] .quick-link {
  background: var(--bg-surface-2);
  color: var(--link);
}
[data-bs-theme="dark"] .quick-link:hover {
  background: var(--bg-muted);
  color: var(--link-hover);
}
[data-bs-theme="dark"] .info-card {
  background: rgba(255, 193, 7, 0.14) !important;
  border-left-color: #ffc107;
}
[data-bs-theme="dark"] .info-card p {
  color: #ffdb6a;
}
/* Scope the form-control flip to landing pages so we don't fight
   BS5's own dark theme handling elsewhere. */
[data-bs-theme="dark"] [class*="-landing-container"] .form-label {
  color: var(--fg-default);
}
[data-bs-theme="dark"] [class*="-landing-container"] .form-control,
[data-bs-theme="dark"] [class*="-landing-container"] .form-select {
  background-color: var(--input-bg);
  color: var(--input-fg);
  border-color: var(--input-border);
}
[data-bs-theme="dark"] [class*="-landing-container"] .form-control:focus,
[data-bs-theme="dark"] [class*="-landing-container"] .form-select:focus {
  background-color: var(--input-bg);
  color: var(--input-fg);
}

/* ------- compliance_audit main pages (shared chrome) -------
   raepsa.html, rama.html, tiuf.html, startup_assessment.html,
   infostato.html each use the same `.page-header`, `.section-card`,
   `.section-header`, `.selector-label` chrome classes (with a per-
   file `*-container`). Pattern matches the landing-pages block above
   — flip the surfaces globally. */
[data-bs-theme="dark"] .infostato-container,
[data-bs-theme="dark"] .raepsa-container,
[data-bs-theme="dark"] .rama-container,
[data-bs-theme="dark"] .tiuf-container,
[data-bs-theme="dark"] .startup-assessment-container,
[data-bs-theme="dark"] .check-s2-container {
  background: var(--bg-app);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .page-header,
[data-bs-theme="dark"] .section-card {
  background: var(--card-bg) !important;
  border-color: var(--card-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
[data-bs-theme="dark"] .page-header h1,
[data-bs-theme="dark"] .section-header h3 {
  color: var(--fg-default);
}
[data-bs-theme="dark"] .selector-label {
  color: var(--fg-muted);
}
[data-bs-theme="dark"] .section-header {
  background: var(--bg-surface-2) !important;
  border-color: var(--card-border);
}
[data-bs-theme="dark"] .section-header:hover {
  background: var(--bg-muted) !important;
}
[data-bs-theme="dark"] .section-header .toggle-icon,
[data-bs-theme="dark"] .group-header .toggle-icon,
[data-bs-theme="dark"] .group-header .code {
  color: var(--fg-muted);
}
[data-bs-theme="dark"] .group-card {
  background: var(--bg-surface-2);
  border-color: var(--card-border);
}
[data-bs-theme="dark"] .group-header {
  background: var(--bg-muted);
}
[data-bs-theme="dark"] .group-header h4 {
  color: var(--fg-default);
}
[data-bs-theme="dark"] .question-card {
  background: var(--card-bg);
  border-color: var(--card-border);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .question-title {
  color: var(--fg-default);
}
[data-bs-theme="dark"] .evo-field label {
  color: var(--fg-default);
}
[data-bs-theme="dark"] .file-upload-area {
  background: var(--bg-surface-2);
  border-color: var(--border-default);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .file-upload-area i {
  color: var(--fg-muted);
}
[data-bs-theme="dark"] .uploaded-file {
  background: var(--bg-surface-2);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .docs-required {
  background: rgba(255, 193, 7, 0.14);
  border-color: rgba(255, 193, 7, 0.30);
  color: #ffdb6a;
}
[data-bs-theme="dark"] .survey-notes-panel {
  background: var(--card-bg);
  border-color: var(--card-border);
}
[data-bs-theme="dark"] .survey-notes-panel .card-header {
  background: var(--bg-surface-2);
  border-color: var(--card-border);
}
[data-bs-theme="dark"] .survey-notes-panel .card-header h6,
[data-bs-theme="dark"] .survey-notes-panel .note-label {
  color: var(--fg-default);
}
[data-bs-theme="dark"] .survey-notes-panel .notes-toggle-icon {
  color: var(--fg-muted);
}
[data-bs-theme="dark"] .survey-notes-panel .note-section {
  background: var(--bg-surface-2);
}
[data-bs-theme="dark"] .survey-notes-panel .survey-note-field {
  background: var(--input-bg);
  color: var(--input-fg);
  border-color: var(--input-border);
}
[data-bs-theme="dark"] .survey-notes-panel .survey-note-field:disabled {
  background: var(--bg-muted);
}

/* check1_sf_analytics.html — analytics dashboard chrome. Same
   argon-dashboard palette + a few extra classes. */
[data-bs-theme="dark"] .analytics-container {
  background: var(--bg-app);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .analytics-header,
[data-bs-theme="dark"] .filter-bar,
[data-bs-theme="dark"] .survey-card {
  background: var(--card-bg) !important;
  border-color: var(--card-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
[data-bs-theme="dark"] .analytics-header h1,
[data-bs-theme="dark"] .survey-card-title {
  color: var(--fg-default);
}
[data-bs-theme="dark"] .analytics-header p {
  color: var(--fg-muted);
}
[data-bs-theme="dark"] .filter-bar label {
  color: var(--fg-muted);
}
[data-bs-theme="dark"] .filter-bar select {
  background-color: var(--input-bg);
  color: var(--input-fg);
  border-color: var(--input-border);
}
[data-bs-theme="dark"] .survey-card-header,
[data-bs-theme="dark"] .survey-card-footer {
  background: var(--bg-surface-2) !important;
  border-color: var(--card-border);
}

/* raepsa_placeholder.html — under-construction page */
[data-bs-theme="dark"] .placeholder-card {
  background: var(--card-bg);
  border-color: var(--card-border);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .placeholder-card h2 {
  color: var(--fg-default);
}

/* context_hub/* — base_hub.html, audit/report/surveys_workspace.html.
   Same argon-light palette wrapped in `.context-hub-container` /
   `.context-header` / `.workspace-card` / `.context-breadcrumb`. */
[data-bs-theme="dark"] .context-hub-container {
  background: var(--bg-app);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .context-header,
[data-bs-theme="dark"] .workspace-card {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
[data-bs-theme="dark"] .context-header h1 {
  color: var(--fg-default);
}
[data-bs-theme="dark"] .context-header .context-breadcrumb,
[data-bs-theme="dark"] .context-header .context-breadcrumb span {
  color: var(--fg-muted);
}
[data-bs-theme="dark"] .context-item-title {
  color: var(--fg-default);
}
/* audit_workspace.html */
[data-bs-theme="dark"] .audit-header h4 {
  color: var(--fg-default);
}
[data-bs-theme="dark"] .audit-tabs {
  border-color: var(--card-border);
}
[data-bs-theme="dark"] .audit-tabs .nav-link {
  color: var(--fg-muted);
}
[data-bs-theme="dark"] .audit-stat {
  background: var(--bg-surface-2);
  color: var(--fg-default);
}
/* report_workspace.html, surveys_workspace.html — module-card pattern */
[data-bs-theme="dark"] .module-sidebar {
  background: var(--bg-surface-2);
  border-color: var(--card-border);
}
[data-bs-theme="dark"] .module-sidebar h5 {
  color: var(--fg-muted);
  border-color: var(--border-default);
}
[data-bs-theme="dark"] .module-card {
  background: var(--card-bg);
  border-color: var(--card-border);
}
[data-bs-theme="dark"] .module-card .module-title {
  color: var(--fg-default);
}
[data-bs-theme="dark"] .module-card .module-description {
  color: var(--fg-muted);
}

/* rama_matrix/* — actions, audit_placeholder, index, reportistica_
   placeholder share `.rama-matrix-container`, `.matrix-header`,
   `.filter-panel`, `.matrix-wrapper`, `.matrix-table` classes with
   the argon-light palette. */
[data-bs-theme="dark"] .rama-matrix-container {
  background: var(--bg-app);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .matrix-header,
[data-bs-theme="dark"] .filter-panel,
[data-bs-theme="dark"] .matrix-wrapper {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
[data-bs-theme="dark"] .matrix-header h1 {
  color: var(--fg-default);
}
[data-bs-theme="dark"] .matrix-header p {
  color: var(--fg-muted);
}
[data-bs-theme="dark"] .filter-panel .form-label {
  color: var(--fg-muted);
}
[data-bs-theme="dark"] .matrix-table th,
[data-bs-theme="dark"] .matrix-table td {
  border-color: var(--border-default);
}

/* templates/dashboard/* — area_1, area_2, area_3, company dashboards
   share the same `.submenu`, `.left-menu`, `.navbar.shrink` chrome
   (light grey/white surfaces) defined as inline `<style>` blocks per
   file. Flip them globally instead of touching each file. */
[data-bs-theme="dark"] .left-menu {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border-default) !important;
  color: var(--fg-default);
}
[data-bs-theme="dark"] .left-menu h3,
[data-bs-theme="dark"] .left-menu li,
[data-bs-theme="dark"] .left-menu a {
  color: var(--fg-default);
}
[data-bs-theme="dark"] .navbar.shrink {
  background-color: var(--navbar-bg) !important;
  color: var(--navbar-fg);
}
[data-bs-theme="dark"] .submenu {
  background-color: var(--bg-surface-2) !important;
  border: 1px solid var(--border-default);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .submenu a,
[data-bs-theme="dark"] .submenu li {
  color: var(--fg-default);
}

/* BS5 .btn-close uses an inline SVG with `fill='%23000'` as a
   background-image — invisible on dark surfaces. Invert it. */
[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Inline-style "consultation banner" colors used across compliance_audit
   templates (rama, raepsa, check1_sf, …). These are inline
   `style="background: #fffbeb; ..."` blocks — too many to tokenize per
   file. Match the inline string and flip the warning-subtle pair. */
[data-bs-theme="dark"] [style*="background: #fffbeb"],
[data-bs-theme="dark"] [style*="background:#fffbeb"],
[data-bs-theme="dark"] [style*="background-color: #fffbeb"],
[data-bs-theme="dark"] [style*="background-color:#fffbeb"] {
  background: var(--bg-warning-subtle) !important;
  color: var(--fg-default) !important;
}
[data-bs-theme="dark"] [style*="background: #fff3cd"],
[data-bs-theme="dark"] [style*="background:#fff3cd"],
[data-bs-theme="dark"] [style*="background-color: #fff3cd"],
[data-bs-theme="dark"] [style*="background-color:#fff3cd"] {
  background: var(--bg-table-warning) !important;
  color: var(--fg-default) !important;
}

/* WebKit/Blink scrollbars — default light-gray on dark looks foreign.
   Subtle dark theme that matches surface tokens. */
[data-bs-theme="dark"] ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg-app);
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #3a414d;
  border: 3px solid var(--bg-app);
  border-radius: 6px;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #4f5764;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-corner {
  background: var(--bg-app);
}
/* Firefox */
[data-bs-theme="dark"] {
  scrollbar-color: #3a414d var(--bg-app);
  scrollbar-width: thin;
}

/* Text-selection highlight. Default OS-level blue clashes with the dark
   palette on most surfaces; use a tinted variant of --link. */
[data-bs-theme="dark"] ::selection {
  background: rgba(110, 168, 254, 0.35);
  color: var(--fg-default);
}

/* BS5 form-check (checkbox + radio) — the unchecked state has a white
   bg with a near-black border that disappears on dark surfaces. BS5 5.3
   reacts to data-bs-theme via `--bs-form-check-bg`, but only inside
   data-bs-theme="dark" scope on the root. Bind it explicitly so the
   unchecked control is visible. */
[data-bs-theme="dark"] .form-check-input {
  background-color: var(--input-bg);
  border-color: var(--input-border);
}
[data-bs-theme="dark"] .form-check-input:checked {
  background-color: var(--link);
  border-color: var(--link);
}
[data-bs-theme="dark"] .form-check-input:focus {
  border-color: var(--link);
  box-shadow: 0 0 0 0.25rem rgba(110, 168, 254, 0.25);
}

/* Chart modal (style.css) — hardcoded #fff content + #f8f9fa header
   and a fullscreen button with white bg. Used by chart fullscreen
   overlays. */
[data-bs-theme="dark"] .chart-modal-content {
  background: var(--card-bg);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .chart-modal-header {
  background: var(--bg-surface-2);
  border-bottom-color: var(--border-default);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .chart-fullscreen-btn {
  background: rgba(26, 29, 35, 0.9);
  border-color: var(--border-default);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .chart-fullscreen-btn:hover {
  background: var(--bg-surface-2);
  border-color: var(--link);
}

/* BS5 accordion. main.css has a global
   `.accordion-button:not(.collapsed) { color: darkblue; background-color: #fff; }`
   that forces dark-blue-on-white for every expanded accordion site-wide.
   Override to keep expanded accordions on the dark surface. */
[data-bs-theme="dark"] .accordion-item {
  background-color: var(--card-bg);
  border-color: var(--border-default);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .accordion-button {
  background-color: var(--card-bg);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--bg-surface-2) !important;
  color: var(--fg-default) !important;
  box-shadow: inset 0 -1px 0 var(--border-default);
}
[data-bs-theme="dark"] .accordion-button::after {
  filter: invert(1) grayscale(1) brightness(1.5);
}
[data-bs-theme="dark"] .accordion-button:focus {
  border-color: var(--link);
  box-shadow: 0 0 0 0.2rem rgba(110, 168, 254, 0.25);
}
[data-bs-theme="dark"] .accordion-body {
  background-color: var(--card-bg);
  color: var(--fg-default);
}

/* FullCalendar v5/6. Used on /calendar. The bundled CSS paints grid,
   day cells, weekday headers and buttons with light surfaces. */
[data-bs-theme="dark"] .fc,
[data-bs-theme="dark"] .fc .fc-toolbar-title,
[data-bs-theme="dark"] .fc .fc-col-header-cell-cushion,
[data-bs-theme="dark"] .fc .fc-daygrid-day-number,
[data-bs-theme="dark"] .fc .fc-list-day-text,
[data-bs-theme="dark"] .fc .fc-list-day-side-text {
  color: var(--fg-default);
}
[data-bs-theme="dark"] .fc-theme-standard td,
[data-bs-theme="dark"] .fc-theme-standard th,
[data-bs-theme="dark"] .fc-theme-standard .fc-scrollgrid {
  border-color: var(--border-default);
}
[data-bs-theme="dark"] .fc .fc-daygrid-day,
[data-bs-theme="dark"] .fc .fc-timegrid-slot,
[data-bs-theme="dark"] .fc .fc-list,
[data-bs-theme="dark"] .fc .fc-scrollgrid {
  background-color: var(--card-bg);
}
[data-bs-theme="dark"] .fc .fc-col-header-cell {
  background-color: var(--bg-surface-2);
}
[data-bs-theme="dark"] .fc .fc-day-today,
[data-bs-theme="dark"] .fc .fc-daygrid-day.fc-day-today {
  background-color: rgba(110, 168, 254, 0.14) !important;
}
[data-bs-theme="dark"] .fc .fc-day-other .fc-daygrid-day-number {
  color: var(--fg-muted);
}
[data-bs-theme="dark"] .fc .fc-button-primary {
  background-color: var(--bg-surface-2);
  border-color: var(--border-default);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .fc .fc-button-primary:hover,
[data-bs-theme="dark"] .fc .fc-button-primary:not(:disabled):active,
[data-bs-theme="dark"] .fc .fc-button-primary:not(:disabled).fc-button-active {
  background-color: var(--bg-muted);
  border-color: var(--border-default);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .fc-list-event:hover td {
  background-color: var(--bg-surface-2) !important;
}
[data-bs-theme="dark"] .fc-popover {
  background-color: var(--card-bg) !important;
  border-color: var(--border-default) !important;
  color: var(--fg-default);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
[data-bs-theme="dark"] .fc-popover .fc-popover-header {
  background-color: var(--bg-surface-2) !important;
  color: var(--fg-default);
}

/* jstree (jquery tree viewer). Used on company_tree, workflow_tree,
   and elsewhere. The `default` theme paints anchors with hover/active
   states that read as light-on-light. */
[data-bs-theme="dark"] .jstree-default,
[data-bs-theme="dark"] .jstree-default .jstree-anchor {
  color: var(--fg-default);
}
[data-bs-theme="dark"] .jstree-default .jstree-hovered {
  background: var(--bg-surface-2);
  color: var(--fg-default);
  box-shadow: none;
  border-radius: 3px;
}
[data-bs-theme="dark"] .jstree-default .jstree-clicked {
  background: var(--bg-muted);
  color: var(--fg-default);
  box-shadow: none;
  border-radius: 3px;
}
[data-bs-theme="dark"] .jstree-default .jstree-wholerow-hovered {
  background: var(--bg-surface-2);
}
[data-bs-theme="dark"] .jstree-default .jstree-wholerow-clicked {
  background: var(--bg-muted);
}
[data-bs-theme="dark"] .jstree-default .jstree-search {
  color: var(--link);
}

/* bootstrap-datepicker dropdown (jquery plugin, NOT the BS5 native
   date input). Used on add_event, edit_event, etc. The bundled CSS
   paints the popover white. */
[data-bs-theme="dark"] .datepicker.datepicker-dropdown,
[data-bs-theme="dark"] .datepicker-dropdown {
  background-color: var(--card-bg);
  border-color: var(--border-default);
  color: var(--fg-default);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
[data-bs-theme="dark"] .datepicker-dropdown::before,
[data-bs-theme="dark"] .datepicker-dropdown::after {
  border-bottom-color: var(--border-default);
}
[data-bs-theme="dark"] .datepicker table tr td,
[data-bs-theme="dark"] .datepicker table tr th {
  background-color: transparent;
  color: var(--fg-default);
}
[data-bs-theme="dark"] .datepicker table tr td.day:hover,
[data-bs-theme="dark"] .datepicker table tr td.focused {
  background-color: var(--bg-muted);
}
[data-bs-theme="dark"] .datepicker table tr td.active,
[data-bs-theme="dark"] .datepicker table tr td.active:hover,
[data-bs-theme="dark"] .datepicker table tr td.active.active {
  background-color: var(--link);
  color: var(--fg-inverse);
}
[data-bs-theme="dark"] .datepicker table tr td.disabled,
[data-bs-theme="dark"] .datepicker table tr td.disabled:hover,
[data-bs-theme="dark"] .datepicker table tr td.old,
[data-bs-theme="dark"] .datepicker table tr td.new {
  color: var(--fg-muted);
  background: transparent;
}
[data-bs-theme="dark"] .datepicker table tr td.today {
  background-color: rgba(110, 168, 254, 0.18);
  color: var(--fg-default);
}

/* Quill rich-text editor (quill.snow.css). Used on blog/admin_form. The
   bundled CSS paints toolbar, container and editor surface white. */
[data-bs-theme="dark"] .ql-toolbar.ql-snow,
[data-bs-theme="dark"] .ql-container.ql-snow {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-fg) !important;
}
[data-bs-theme="dark"] .ql-editor {
  background-color: var(--input-bg);
  color: var(--input-fg);
}
[data-bs-theme="dark"] .ql-editor.ql-blank::before {
  color: var(--fg-muted);
}
[data-bs-theme="dark"] .ql-snow .ql-stroke {
  stroke: var(--fg-default);
}
[data-bs-theme="dark"] .ql-snow .ql-fill,
[data-bs-theme="dark"] .ql-snow .ql-stroke.ql-fill {
  fill: var(--fg-default);
}
[data-bs-theme="dark"] .ql-snow .ql-picker {
  color: var(--fg-default);
}
[data-bs-theme="dark"] .ql-snow .ql-picker-options {
  background-color: var(--card-bg) !important;
  border-color: var(--border-default) !important;
  color: var(--fg-default);
}
[data-bs-theme="dark"] .ql-snow .ql-tooltip {
  background-color: var(--card-bg) !important;
  border-color: var(--border-default) !important;
  color: var(--fg-default);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
[data-bs-theme="dark"] .ql-snow .ql-tooltip input[type="text"] {
  background-color: var(--input-bg);
  color: var(--input-fg);
  border-color: var(--input-border);
}

/* Frappe Gantt. Used on workflow_timeline. The bundled CSS paints the
   grid background and tick lines with light surfaces. */
[data-bs-theme="dark"] .gantt-container {
  background-color: var(--card-bg);
  color: var(--fg-default);
}
[data-bs-theme="dark"] .gantt .grid-background {
  fill: var(--card-bg);
}
[data-bs-theme="dark"] .gantt .grid-row {
  fill: var(--card-bg);
}
[data-bs-theme="dark"] .gantt .grid-row:nth-child(even) {
  fill: var(--bg-surface-2);
}
[data-bs-theme="dark"] .gantt .grid-header {
  fill: var(--bg-surface-2);
  stroke: var(--border-default);
}
[data-bs-theme="dark"] .gantt .row-line,
[data-bs-theme="dark"] .gantt .tick {
  stroke: var(--border-default);
}
[data-bs-theme="dark"] .gantt .today-highlight {
  fill: rgba(110, 168, 254, 0.16);
}
[data-bs-theme="dark"] .gantt .lower-text,
[data-bs-theme="dark"] .gantt .upper-text {
  fill: var(--fg-default);
}
[data-bs-theme="dark"] .gantt .bar-label,
[data-bs-theme="dark"] .gantt .bar-label.big {
  fill: var(--fg-inverse);
}
[data-bs-theme="dark"] .gantt-container .popup-wrapper {
  background-color: var(--card-bg) !important;
  color: var(--fg-default) !important;
  border: 1px solid var(--border-default);
}

/* vis-timeline (vis-timeline-graph2d). Used by aux timeline + deadlines
   page. The bundled stylesheet paints the axis, label set, group bands
   and tooltip with light surfaces. Re-route to dark tokens. */
[data-bs-theme="dark"] .vis-timeline {
  border-color: var(--border-default) !important;
  color: var(--fg-default);
}
[data-bs-theme="dark"] .vis-panel.vis-center,
[data-bs-theme="dark"] .vis-panel.vis-left,
[data-bs-theme="dark"] .vis-panel.vis-right,
[data-bs-theme="dark"] .vis-panel.vis-top,
[data-bs-theme="dark"] .vis-panel.vis-bottom,
[data-bs-theme="dark"] .vis-labelset .vis-label,
[data-bs-theme="dark"] .vis-foreground .vis-group,
[data-bs-theme="dark"] .vis-background,
[data-bs-theme="dark"] .vis-time-axis .vis-text {
  background-color: var(--card-bg) !important;
  color: var(--fg-default) !important;
  border-color: var(--border-default) !important;
}
[data-bs-theme="dark"] .vis-time-axis .vis-grid.vis-minor {
  border-color: var(--border-muted) !important;
}
[data-bs-theme="dark"] .vis-time-axis .vis-grid.vis-major {
  border-color: var(--border-default) !important;
}
[data-bs-theme="dark"] .vis-tooltip {
  background-color: var(--card-bg) !important;
  color: var(--fg-default) !important;
  border-color: var(--border-default) !important;
}

/* BS5 5.3 / Argon paint .table-striped via per-cell CSS vars:
   .table-striped > tbody > tr:nth-of-type(odd) > * {
     --bs-table-accent-bg: var(--bs-table-striped-bg);
     color: var(--bs-table-striped-color);
   }
   In dark mode `--bs-table-striped-color` can resolve to a light value
   → light text on a light-tint stripe = invisible (image #34/#35).
   Bind the BS5 striped vars at the .table-striped scope so cells
   inherit dark-readable bg + color, with !important on the cell color
   to beat Argon's selector. (Lives in theme-dark-overrides.css — not
   theme-admin-bs3.css — because /charts/ doesn't load that file.) */
[data-bs-theme="dark"] .table-striped {
  --bs-table-bg: transparent;
  --bs-table-color: var(--fg-default);
  --bs-table-striped-bg: var(--bg-surface-2);
  --bs-table-striped-color: var(--fg-default);
  --bs-table-accent-bg: transparent;
  --bs-table-hover-bg: var(--bg-muted);
  --bs-table-hover-color: var(--fg-default);
}
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--bs-table-striped-bg);
  color: var(--bs-table-striped-color) !important;
}
/* Brute-force fallback: Argon paints cells via
   `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)` rather
   than a real background. Belt-and-braces — also force a solid
   background-color on each cell so the row is painted even if the
   CSS-var chain breaks. Odd row = darker stripe, even = card bg. */
[data-bs-theme="dark"] .table.table-striped > tbody > tr > td,
[data-bs-theme="dark"] .table.table-striped > tbody > tr > th {
  background-color: var(--card-bg) !important;
  color: var(--fg-default) !important;
}
[data-bs-theme="dark"] .table.table-striped > tbody > tr:nth-of-type(odd) > td,
[data-bs-theme="dark"] .table.table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: var(--bg-surface-2) !important;
  color: var(--fg-default) !important;
}
[data-bs-theme="dark"] .table.table-striped > thead > tr > th {
  background-color: var(--bg-surface-2) !important;
  color: var(--fg-default) !important;
}

/* Bootstrap table color modifiers — `.table-light` thead is the most common
   light/light offender. In dark mode, re-route the BS5 table color CSS vars
   so the thead reads as a darker surface, not pale gray on dark bg. */
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] .table-light > td,
[data-bs-theme="dark"] .table-light > tr,
[data-bs-theme="dark"] .table > :not(caption) > * > .table-light,
[data-bs-theme="dark"] thead.table-light,
[data-bs-theme="dark"] thead.table-light th,
[data-bs-theme="dark"] tbody.table-light,
[data-bs-theme="dark"] tbody.table-light th,
[data-bs-theme="dark"] tbody.table-light td {
  --bs-table-color: var(--fg-default);
  --bs-table-bg: var(--bg-surface-2);
  --bs-table-border-color: var(--border-default);
  --bs-table-striped-bg: var(--table-stripe);
  --bs-table-striped-color: var(--fg-default);
  --bs-table-hover-bg: var(--table-hover);
  --bs-table-hover-color: var(--fg-default);
  background-color: var(--bg-surface-2) !important;
  color: var(--fg-default) !important;
  border-color: var(--border-default) !important;
}
[data-bs-theme="dark"] .table-secondary,
[data-bs-theme="dark"] .table-secondary > th,
[data-bs-theme="dark"] .table-secondary > td,
[data-bs-theme="dark"] thead.table-secondary,
[data-bs-theme="dark"] thead.table-secondary th {
  --bs-table-color: var(--fg-default);
  --bs-table-bg: var(--bg-muted);
  --bs-table-border-color: var(--border-default);
  background-color: var(--bg-muted) !important;
  color: var(--fg-default) !important;
  border-color: var(--border-default) !important;
}
/* Ensure plain <thead> with no modifier still picks up dark colors. */
[data-bs-theme="dark"] .table > thead {
  color: var(--fg-default);
}