/* =====================================================================
   Dark Mode — Global Readability Overrides
   ---------------------------------------------------------------------
   This file ensures every text element is readable when the app is in
   dark mode. It overrides Bootstrap utility classes, form controls,
   tables, cards, modals, dropdowns, alerts and common component styles
   that would otherwise render dark-on-dark or light-on-light.

   The site already exposes CSS variables in site.css under
   :root[data-theme="dark"]. This file references those variables and
   forces sane fallback colors for any element that hard-codes color
   via Bootstrap or inline styles.
   ===================================================================== */

html[data-theme="dark"] {
    color-scheme: dark;
}

/* ---------- Base text ---------- */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] li,
html[data-theme="dark"] dd,
html[data-theme="dark"] dt,
html[data-theme="dark"] label,
html[data-theme="dark"] small,
html[data-theme="dark"] strong,
html[data-theme="dark"] em,
html[data-theme="dark"] th,
html[data-theme="dark"] td,
html[data-theme="dark"] caption,
html[data-theme="dark"] figcaption,
html[data-theme="dark"] blockquote {
    color: var(--text-primary);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .h1,
html[data-theme="dark"] .h2,
html[data-theme="dark"] .h3,
html[data-theme="dark"] .h4,
html[data-theme="dark"] .h5,
html[data-theme="dark"] .h6 {
    color: var(--text-primary);
}

/* ---------- Links ---------- */
html[data-theme="dark"] a {
    color: var(--accent-info, #38bdf8);
}
html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus {
    color: var(--accent-hover, #2ae099);
}
html[data-theme="dark"] a.text-dark,
html[data-theme="dark"] a.text-body,
html[data-theme="dark"] a.text-reset {
    color: var(--text-primary) !important;
}

/* ---------- Bootstrap text utility overrides ---------- */
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-black-50 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .text-white-50 {
    color: var(--text-tertiary) !important;
}

html[data-theme="dark"] .form-text,
html[data-theme="dark"] .help-block,
html[data-theme="dark"] .small {
    color: var(--text-secondary) !important;
}

/* Keep semantic colors but brighten them for dark backgrounds */
html[data-theme="dark"] .text-primary   { color: var(--accent-info, #38bdf8) !important; }
html[data-theme="dark"] .text-success   { color: var(--accent-success, #22c55e) !important; }
html[data-theme="dark"] .text-info      { color: var(--accent-info, #38bdf8) !important; }
html[data-theme="dark"] .text-warning   { color: var(--accent-warning, #fbbf24) !important; }
html[data-theme="dark"] .text-danger    { color: var(--accent-danger, #fb7185) !important; }

/* ---------- Bootstrap background utility overrides ---------- */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .bg-body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .bg-body-tertiary,
html[data-theme="dark"] .bg-body-secondary {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* ---------- Cards ---------- */
html[data-theme="dark"] .card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-primary);
}
html[data-theme="dark"] .card .card-header,
html[data-theme="dark"] .card .card-footer {
    background-color: var(--bg-secondary);
    border-color: var(--card-border);
    color: var(--text-primary);
}
html[data-theme="dark"] .card.bg-light,
html[data-theme="dark"] .card-body.bg-light {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .card-subtitle,
html[data-theme="dark"] .card-text {
    color: var(--text-primary);
}

/* ---------- Forms ---------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="file"] {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-focus);
    box-shadow: 0 0 0 0.2rem rgba(30, 216, 141, 0.25);
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--input-placeholder);
    opacity: 1;
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-select:disabled {
    background-color: var(--bg-tertiary);
    color: var(--text-tertiary);
}
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .col-form-label,
html[data-theme="dark"] .form-check-label {
    color: var(--text-primary);
}
html[data-theme="dark"] .form-check-input {
    background-color: var(--input-bg);
    border-color: var(--input-border);
}
html[data-theme="dark"] .form-check-input:checked {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}
html[data-theme="dark"] .input-group-text {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--input-border);
}

/* File input button area */
html[data-theme="dark"] input[type="file"]::file-selector-button {
    background-color: var(--btn-secondary-bg);
    color: var(--text-primary);
    border: 0;
    padding: 0.375rem 0.75rem;
    margin-right: 0.75rem;
}

/* ---------- Buttons ---------- */
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-light {
    background-color: var(--btn-secondary-bg);
    color: var(--text-primary);
    border-color: var(--border-primary);
}
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-outline-light:hover {
    background-color: var(--btn-secondary-hover);
    color: var(--text-primary);
    border-color: var(--border-hover);
}
html[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-primary);
    border-color: var(--border-secondary);
}
html[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}
html[data-theme="dark"] .btn-link {
    color: var(--accent-info);
}
html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ---------- Solid Bootstrap buttons — remap to theme accents ----------
   Bootstrap's bright palette looks jarring on dark backgrounds.
   Remap each variant to the corresponding CSS-variable accent.        */

html[data-theme="dark"] .btn-primary {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #0a0a0a;
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus,
html[data-theme="dark"] .btn-primary:active,
html[data-theme="dark"] .btn-primary.active {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #0a0a0a;
}

html[data-theme="dark"] .btn-success {
    background-color: var(--accent-success);
    border-color: var(--accent-success);
    color: #0a0a0a;
}
html[data-theme="dark"] .btn-success:hover,
html[data-theme="dark"] .btn-success:focus,
html[data-theme="dark"] .btn-success:active {
    background-color: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

html[data-theme="dark"] .btn-danger {
    background-color: var(--accent-danger);
    border-color: var(--accent-danger);
    color: #fff;
}
html[data-theme="dark"] .btn-danger:hover,
html[data-theme="dark"] .btn-danger:focus,
html[data-theme="dark"] .btn-danger:active {
    background-color: #f43f5e;
    border-color: #f43f5e;
    color: #fff;
}

html[data-theme="dark"] .btn-warning {
    background-color: var(--accent-warning);
    border-color: var(--accent-warning);
    color: #0a0a0a;
}
html[data-theme="dark"] .btn-warning:hover,
html[data-theme="dark"] .btn-warning:focus,
html[data-theme="dark"] .btn-warning:active {
    background-color: #f59e0b;
    border-color: #f59e0b;
    color: #0a0a0a;
}

html[data-theme="dark"] .btn-info {
    background-color: var(--accent-info);
    border-color: var(--accent-info);
    color: #0a0a0a;
}
html[data-theme="dark"] .btn-info:hover,
html[data-theme="dark"] .btn-info:focus,
html[data-theme="dark"] .btn-info:active {
    background-color: #0ea5e9;
    border-color: #0ea5e9;
    color: #0a0a0a;
}

html[data-theme="dark"] .btn-secondary {
    background-color: var(--bg-active);
    border-color: var(--border-secondary);
    color: var(--text-primary);
}
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-secondary:focus,
html[data-theme="dark"] .btn-secondary:active {
    background-color: var(--btn-secondary-hover);
    border-color: var(--border-hover);
    color: var(--text-primary);
}

/* ---------- Outline variants ---------- */

html[data-theme="dark"] .btn-outline-primary {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}
html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-primary:active {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #0a0a0a;
}

html[data-theme="dark"] .btn-outline-success {
    color: var(--accent-success);
    border-color: var(--accent-success);
}
html[data-theme="dark"] .btn-outline-success:hover,
html[data-theme="dark"] .btn-outline-success:active {
    background-color: var(--accent-success);
    border-color: var(--accent-success);
    color: #0a0a0a;
}

html[data-theme="dark"] .btn-outline-danger {
    color: var(--accent-danger);
    border-color: var(--accent-danger);
}
html[data-theme="dark"] .btn-outline-danger:hover,
html[data-theme="dark"] .btn-outline-danger:active {
    background-color: var(--accent-danger);
    border-color: var(--accent-danger);
    color: #fff;
}

html[data-theme="dark"] .btn-outline-warning {
    color: var(--accent-warning);
    border-color: var(--accent-warning);
}
html[data-theme="dark"] .btn-outline-warning:hover,
html[data-theme="dark"] .btn-outline-warning:active {
    background-color: var(--accent-warning);
    border-color: var(--accent-warning);
    color: #0a0a0a;
}

html[data-theme="dark"] .btn-outline-info {
    color: var(--accent-info);
    border-color: var(--accent-info);
}
html[data-theme="dark"] .btn-outline-info:hover,
html[data-theme="dark"] .btn-outline-info:active {
    background-color: var(--accent-info);
    border-color: var(--accent-info);
    color: #0a0a0a;
}

/* ---------- Tables ---------- */
html[data-theme="dark"] .table {
    --bs-table-bg: var(--table-bg);
    --bs-table-color: var(--text-primary);
    --bs-table-striped-bg: var(--table-stripe);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: var(--table-hover);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-border-color: var(--table-border);
    color: var(--text-primary);
    border-color: var(--table-border);
}
html[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: var(--table-bg);
    color: var(--text-primary);
    border-bottom-color: var(--table-border);
}
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table > thead {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
    border-color: var(--table-border);
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--table-stripe);
    color: var(--text-primary);
}
html[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: var(--table-hover);
    color: var(--text-primary);
}
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light > th,
html[data-theme="dark"] .table-light > td {
    background-color: var(--table-header-bg) !important;
    color: var(--text-primary) !important;
}

/* ---------- Modals ---------- */
html[data-theme="dark"] .modal-content {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--card-border);
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--card-border);
}
html[data-theme="dark"] .modal-title {
    color: var(--text-primary);
}
html[data-theme="dark"] .modal-backdrop.show {
    opacity: 0.7;
}

/* ---------- Dropdowns ---------- */
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-primary);
}
html[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}
html[data-theme="dark"] .dropdown-item.active,
html[data-theme="dark"] .dropdown-item:active {
    background-color: var(--accent-primary);
    color: var(--text-inverse);
}
html[data-theme="dark"] .dropdown-divider {
    border-top-color: var(--border-primary);
}
html[data-theme="dark"] .dropdown-header {
    color: var(--text-secondary);
}

/* ---------- Navbar / Nav ---------- */
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .navbar.bg-light,
html[data-theme="dark"] .navbar.bg-white {
    background-color: var(--navbar-bg) !important;
    border-color: var(--navbar-border) !important;
}
html[data-theme="dark"] .navbar .navbar-brand,
html[data-theme="dark"] .navbar .nav-link {
    color: var(--navbar-text);
}
html[data-theme="dark"] .navbar .nav-link:hover,
html[data-theme="dark"] .navbar .nav-link:focus {
    color: var(--accent-primary);
}
html[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--border-primary);
}
html[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary);
    background-color: transparent;
    border-color: transparent;
}
html[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--border-primary);
    color: var(--text-primary);
}
html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-primary) var(--border-primary) var(--card-bg);
}
html[data-theme="dark"] .nav-pills .nav-link {
    color: var(--text-secondary);
}
html[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--accent-primary);
    color: var(--text-inverse);
}

/* ---------- Breadcrumb / Pagination ---------- */
html[data-theme="dark"] .breadcrumb {
    background-color: transparent;
}
html[data-theme="dark"] .breadcrumb-item,
html[data-theme="dark"] .breadcrumb-item a {
    color: var(--text-secondary);
}
html[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text-primary);
}
html[data-theme="dark"] .page-link {
    background-color: var(--card-bg);
    border-color: var(--border-primary);
    color: var(--text-primary);
}
html[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-inverse);
}
html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--bg-secondary);
    color: var(--text-tertiary);
    border-color: var(--border-primary);
}

/* ---------- List groups ---------- */
html[data-theme="dark"] .list-group-item {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--card-border);
}
html[data-theme="dark"] .list-group-item.active {
    background-color: var(--accent-primary);
    color: var(--text-inverse);
    border-color: var(--accent-primary);
}
html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

/* ---------- Alerts ---------- */
html[data-theme="dark"] .alert {
    border-width: 1px;
    border-style: solid;
}
html[data-theme="dark"] .alert-primary {
    background-color: rgba(56, 189, 248, 0.12);
    color: var(--accent-info);
    border-color: rgba(56, 189, 248, 0.4);
}
html[data-theme="dark"] .alert-secondary {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}
html[data-theme="dark"] .alert-success {
    background-color: rgba(34, 197, 94, 0.12);
    color: var(--accent-success);
    border-color: rgba(34, 197, 94, 0.4);
}
html[data-theme="dark"] .alert-danger {
    background-color: rgba(251, 113, 133, 0.12);
    color: var(--accent-danger);
    border-color: rgba(251, 113, 133, 0.4);
}
html[data-theme="dark"] .alert-warning {
    background-color: rgba(251, 191, 36, 0.12);
    color: var(--accent-warning);
    border-color: rgba(251, 191, 36, 0.4);
}
html[data-theme="dark"] .alert-info {
    background-color: rgba(56, 189, 248, 0.12);
    color: var(--accent-info);
    border-color: rgba(56, 189, 248, 0.4);
}
html[data-theme="dark"] .alert-light {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}
html[data-theme="dark"] .alert-dark {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

/* ---------- Badges ---------- */
html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge.text-bg-light {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .badge.bg-secondary,
html[data-theme="dark"] .badge.text-bg-secondary {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* ---------- Code, pre, kbd ---------- */
html[data-theme="dark"] code,
html[data-theme="dark"] pre,
html[data-theme="dark"] kbd,
html[data-theme="dark"] samp {
    background-color: var(--code-bg);
    color: var(--code-text);
    border-color: var(--code-border);
}
html[data-theme="dark"] pre {
    border: 1px solid var(--code-border);
}

/* ---------- Borders ---------- */
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-end,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start {
    border-color: var(--border-primary) !important;
}
html[data-theme="dark"] hr {
    border-color: var(--border-primary);
    opacity: 1;
}

/* ---------- Tooltips / Popovers ---------- */
html[data-theme="dark"] .tooltip-inner {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}
html[data-theme="dark"] .popover {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-primary);
}
html[data-theme="dark"] .popover-header {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom-color: var(--card-border);
}
html[data-theme="dark"] .popover-body {
    color: var(--text-primary);
}

/* ---------- Progress ---------- */
html[data-theme="dark"] .progress {
    background-color: var(--bg-tertiary);
}

/* ---------- Accordion ---------- */
html[data-theme="dark"] .accordion-item {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--card-border);
}
html[data-theme="dark"] .accordion-button {
    background-color: var(--card-bg);
    color: var(--text-primary);
}
html[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: inset 0 -1px 0 var(--card-border);
}
html[data-theme="dark"] .accordion-button::after {
    filter: invert(1) brightness(2);
}
html[data-theme="dark"] .accordion-body {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

/* ---------- Toast ---------- */
html[data-theme="dark"] .toast {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--card-border);
}
html[data-theme="dark"] .toast-header {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom-color: var(--card-border);
}

/* ---------- Offcanvas ---------- */
html[data-theme="dark"] .offcanvas {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--card-border);
}

/* ---------- Inline style guards ----------
   Catches common inline color="#000"/black/white situations on
   structural elements. Keep narrow to avoid breaking iconography. */
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: white"] {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Selection */
html[data-theme="dark"] ::selection {
    background-color: var(--accent-primary);
    color: var(--text-inverse);
}

/* Scrollbars (WebKit / Chromium) */
html[data-theme="dark"] ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: 6px;
    border: 2px solid var(--bg-secondary);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--bg-active);
}

/* =====================================================================
   Admin Panel — Semantic color card-header overrides
   Bootstrap bg-primary/success/danger/warning/info card headers retain
   their Bootstrap colors in dark mode. Override them to use the dark
   theme CSS variables instead so text and backgrounds are consistent.
   ===================================================================== */

/* Primary (blue) */
html[data-theme="dark"] .card-header.bg-primary {
    background-color: var(--bg-secondary) !important;
    color: var(--accent-info) !important;
    border-bottom: 2px solid var(--accent-info) !important;
}
html[data-theme="dark"] .card-header.bg-primary *,
html[data-theme="dark"] .card-header.bg-primary small,
html[data-theme="dark"] .card-header.bg-primary .text-white {
    color: var(--text-secondary) !important;
}

/* Success (green) */
html[data-theme="dark"] .card-header.bg-success {
    background-color: var(--bg-secondary) !important;
    color: var(--accent-success) !important;
    border-bottom: 2px solid var(--accent-success) !important;
}
html[data-theme="dark"] .card-header.bg-success *,
html[data-theme="dark"] .card-header.bg-success small {
    color: var(--text-secondary) !important;
}

/* Danger (red) */
html[data-theme="dark"] .card-header.bg-danger {
    background-color: var(--bg-secondary) !important;
    color: var(--accent-danger) !important;
    border-bottom: 2px solid var(--accent-danger) !important;
}
html[data-theme="dark"] .card-header.bg-danger *,
html[data-theme="dark"] .card-header.bg-danger small {
    color: var(--text-secondary) !important;
}

/* Warning (yellow) */
html[data-theme="dark"] .card-header.bg-warning {
    background-color: var(--bg-secondary) !important;
    color: var(--accent-warning) !important;
    border-bottom: 2px solid var(--accent-warning) !important;
}
html[data-theme="dark"] .card-header.bg-warning *,
html[data-theme="dark"] .card-header.bg-warning small {
    color: var(--text-secondary) !important;
}

/* Info (cyan) */
html[data-theme="dark"] .card-header.bg-info {
    background-color: var(--bg-secondary) !important;
    color: var(--accent-info) !important;
    border-bottom: 2px solid var(--accent-info) !important;
}
html[data-theme="dark"] .card-header.bg-info *,
html[data-theme="dark"] .card-header.bg-info small {
    color: var(--text-secondary) !important;
}

/* Secondary */
html[data-theme="dark"] .card-header.bg-secondary {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

/* bg-opacity-10 cards (subtle tinted cards in admin) */
html[data-theme="dark"] .card.border-success > .card-header.bg-success.bg-opacity-10 {
    background-color: rgba(34, 197, 94, 0.08) !important;
    color: var(--accent-success) !important;
    border-bottom-color: var(--accent-success) !important;
}
html[data-theme="dark"] .card.border-info > .card-header.bg-info.bg-opacity-10 {
    background-color: rgba(56, 189, 248, 0.08) !important;
    color: var(--accent-info) !important;
    border-bottom-color: var(--accent-info) !important;
}

/* Hardcoded gradient card headers (Warehouse page) - replaced by class */
.card-header-gradient {
    background: linear-gradient(135deg, #1a3a5c, #2d6a9f);
    color: white;
}
html[data-theme="dark"] .card-header-gradient {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--accent-primary) !important;
}
html[data-theme="dark"] .card-header-gradient *,
html[data-theme="dark"] .card-header-gradient small {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .card-header-gradient h3,
html[data-theme="dark"] .card-header-gradient h4,
html[data-theme="dark"] .card-header-gradient h5 {
    color: var(--text-primary) !important;
}

/* Hardcoded gradient card headers (Warehouse page) */
html[data-theme="dark"] .card-header[style*="linear-gradient"] {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--accent-primary) !important;
}
html[data-theme="dark"] .card-header[style*="linear-gradient"] * {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .card-header[style*="linear-gradient"] h3,
html[data-theme="dark"] .card-header[style*="linear-gradient"] h4,
html[data-theme="dark"] .card-header[style*="linear-gradient"] h5 {
    color: var(--text-primary) !important;
}

/* AllChats user-group-header (hardcoded purple gradient) */
html[data-theme="dark"] .user-group-header {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary) !important;
}
html[data-theme="dark"] .user-group-header * {
    color: var(--text-primary) !important;
}

/* ViewChat message card headers (user/AI role colors) */
html[data-theme="dark"] .card.border-primary > .card-header.bg-primary,
html[data-theme="dark"] .card.border-success > .card-header.bg-success {
    background-color: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

/* btn-dark in dark mode should invert to remain visible */
html[data-theme="dark"] .btn-dark {
    background-color: var(--bg-active);
    border-color: var(--border-primary);
    color: var(--text-primary);
}
html[data-theme="dark"] .btn-dark:hover {
    background-color: var(--btn-secondary-hover);
    color: var(--text-primary);
}

/* ModelTester result card response area */
html[data-theme="dark"] [style*="rgba(108, 117, 125, 0.1)"] {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

/* Admin table thead.table-light already handled globally;
   extra specificity for admin-tables.css overrides */
html[data-theme="dark"] .table thead.table-light th,
html[data-theme="dark"] thead.table-light tr th {
    background-color: var(--table-header-bg) !important;
    color: var(--table-header-text) !important;
    border-color: var(--table-border) !important;
}

/* Progress bar container in dark mode */
html[data-theme="dark"] .progress-bar {
    color: var(--text-inverse);
}

/* Inline style white backgrounds on cards/panels */
html[data-theme="dark"] .card-body [style*="background-color: rgba(0, 0, 0, 0.3)"] {
    background-color: var(--input-bg) !important;
}