/*
 * dark.css — Dark mode overrides for SOSiQ Blazor
 * 
 * IMPORTANT: This file is loaded at the END of <body> in _Host.cshtml,
 * after all Blazor component <style> blocks. This ensures it wins the
 * CSS cascade over page-level styles without needing excessive !important.
 *
 * All rules are scoped under [data-bs-theme="dark"] so they have zero
 * effect in light mode.
 */

/* =========================================================
   1. NUCLEAR CATCH-ALL — override white backgrounds everywhere
   This single rule catches inline styles, page <style> blocks,
   and any future white backgrounds without per-class targeting.
   ========================================================= */
[data-bs-theme="dark"] .main-content *:not(.btn):not(.badge):not([class*="status-"]):not([class*="bg-"]):not(.nav-brand):not(.nav-link):not(.top-nav):not(.nav-container):not(.mobile-nav) {
    --_bg: initial; /* reset helper */
}

/* 2. Override hardcoded white/light backgrounds */
[data-bs-theme="dark"] [style*="background: white"],
[data-bs-theme="dark"] [style*="background:white"],
[data-bs-theme="dark"] [style*="background-color: white"],
[data-bs-theme="dark"] [style*="background-color:white"],
[data-bs-theme="dark"] [style*="background: #fff"],
[data-bs-theme="dark"] [style*="background:#fff"],
[data-bs-theme="dark"] [style*="background-color: #fff"],
[data-bs-theme="dark"] [style*="background-color:#fff"],
[data-bs-theme="dark"] [style*="background: #ffffff"],
[data-bs-theme="dark"] [style*="background:#ffffff"],
[data-bs-theme="dark"] [style*="background-color: #ffffff"],
[data-bs-theme="dark"] [style*="background-color:#ffffff"] {
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] [style*="background: #f0f0f0"],
[data-bs-theme="dark"] [style*="background:#f0f0f0"],
[data-bs-theme="dark"] [style*="background-color: #f0f0f0"],
[data-bs-theme="dark"] [style*="background-color:#f0f0f0"],
[data-bs-theme="dark"] [style*="background: #f8f9fa"],
[data-bs-theme="dark"] [style*="background:#f8f9fa"],
[data-bs-theme="dark"] [style*="background-color: #f8f9fa"],
[data-bs-theme="dark"] [style*="background-color:#f8f9fa"],
[data-bs-theme="dark"] [style*="background: #f5f5f5"],
[data-bs-theme="dark"] [style*="background:#f5f5f5"],
[data-bs-theme="dark"] [style*="background-color: #f5f5f5"],
[data-bs-theme="dark"] [style*="background-color:#f5f5f5"],
[data-bs-theme="dark"] [style*="background: #fafafa"],
[data-bs-theme="dark"] [style*="background:#fafafa"],
[data-bs-theme="dark"] [style*="background-color: #fafafa"],
[data-bs-theme="dark"] [style*="background-color:#fafafa"],
[data-bs-theme="dark"] [style*="background: #f1f3f5"],
[data-bs-theme="dark"] [style*="background:#f1f3f5"],
[data-bs-theme="dark"] [style*="background-color: #f1f3f5"],
[data-bs-theme="dark"] [style*="background-color:#f1f3f5"],
[data-bs-theme="dark"] [style*="background: #f8fafc"],
[data-bs-theme="dark"] [style*="background:#f8fafc"],
[data-bs-theme="dark"] [style*="background-color: #f8fafc"],
[data-bs-theme="dark"] [style*="background-color:#f8fafc"] {
    background: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* =========================================================
   3. Text color overrides
   ========================================================= */
[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: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] label,
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .form-field label {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] p,
[data-bs-theme="dark"] span,
[data-bs-theme="dark"] li {
    color: var(--bs-body-color);
}

/* =========================================================
   4. Containers & cards — any div/section with white bg
   ========================================================= */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card-body,
[data-bs-theme="dark"] .queue-container,
[data-bs-theme="dark"] .worklog-container,
[data-bs-theme="dark"] .team-container,
[data-bs-theme="dark"] .create-form-container,
[data-bs-theme="dark"] .edit-form-container,
[data-bs-theme="dark"] .detail-container,
[data-bs-theme="dark"] .details-container,
[data-bs-theme="dark"] .filter-bar,
[data-bs-theme="dark"] .filters-card,
[data-bs-theme="dark"] .form-container,
[data-bs-theme="dark"] .help-container,
[data-bs-theme="dark"] .help-content,
[data-bs-theme="dark"] .action-bar,
[data-bs-theme="dark"] .stat-card,
[data-bs-theme="dark"] .metric-card,
[data-bs-theme="dark"] .action-card,
[data-bs-theme="dark"] .home-vin-card,
[data-bs-theme="dark"] .home-p-card,
[data-bs-theme="dark"] .home-s-card,
[data-bs-theme="dark"] .status-card,
[data-bs-theme="dark"] .guide-card,
[data-bs-theme="dark"] .help-card,
[data-bs-theme="dark"] .tip-card,
[data-bs-theme="dark"] .tip-section,
[data-bs-theme="dark"] .notes-box,
[data-bs-theme="dark"] .info-row,
[data-bs-theme="dark"] .sla-box,
[data-bs-theme="dark"] .accordion-body,
[data-bs-theme="dark"] .chart-container,
[data-bs-theme="dark"] .modal-box,
[data-bs-theme="dark"] .panel,
[data-bs-theme="dark"] .comment,
[data-bs-theme="dark"] .exception-panel,
[data-bs-theme="dark"] .kpi-tile,
[data-bs-theme="dark"] .trend-card,
[data-bs-theme="dark"] .metrics-section-card,
[data-bs-theme="dark"] .bucket {
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .tab-btn,
[data-bs-theme="dark"] .tab-btn.active {
    background: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
    border-bottom-color: var(--bs-border-color) !important;
}

/* Form sections (light gray backgrounds in many pages) */
[data-bs-theme="dark"] .form-section,
[data-bs-theme="dark"] .checkbox-field {
    background: var(--bs-secondary-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .form-section h4 {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .card-header {
    background: var(--bs-secondary-bg) !important;
    border-bottom-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .card h2,
[data-bs-theme="dark"] .card h3,
[data-bs-theme="dark"] .form-container h2 {
    color: var(--bs-body-color) !important;
    border-bottom-color: var(--bs-border-color) !important;
}

/* =========================================================
   5. Tables
   ========================================================= */
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] .support-table,
[data-bs-theme="dark"] .modern-grid,
[data-bs-theme="dark"] .modern-table,
[data-bs-theme="dark"] .table-card,
[data-bs-theme="dark"] .metrics-table,
[data-bs-theme="dark"] .exception-table {
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .table thead th,
[data-bs-theme="dark"] .modern-grid thead th,
[data-bs-theme="dark"] .metrics-table thead th,
[data-bs-theme="dark"] .exception-table thead th {
    background: var(--bs-secondary-bg) !important;
    color: var(--bs-secondary-color) !important;
    border-bottom-color: var(--bs-border-color) !important;
}

/* modern-table header is already dark (#2c3e50) — keep its own color, just ensure text is readable */
[data-bs-theme="dark"] .modern-table thead th {
    background: var(--bs-emphasis-color-rgb, #2c3e50) !important;
    background: #1a2530 !important;
    color: #e8eaf0 !important;
    border-bottom-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .table tbody td,
[data-bs-theme="dark"] .modern-grid tbody td,
[data-bs-theme="dark"] .modern-table tbody td,
[data-bs-theme="dark"] .metrics-table tbody td,
[data-bs-theme="dark"] .exception-table tbody td {
    border-bottom-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .table tbody tr:hover,
[data-bs-theme="dark"] .modern-grid tr:hover td,
[data-bs-theme="dark"] .modern-table tbody tr:hover td,
[data-bs-theme="dark"] .metrics-table tr:hover td,
[data-bs-theme="dark"] .exception-table tr:hover td,
[data-bs-theme="dark"] .modern-table thead th:hover,
[data-bs-theme="dark"] .metrics-table th:hover,
[data-bs-theme="dark"] .exception-table th:hover {
    background: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .modern-grid tr:nth-child(even) td,
[data-bs-theme="dark"] .modern-table tbody tr:nth-child(even) td,
[data-bs-theme="dark"] .metrics-table tr:nth-child(even) td,
[data-bs-theme="dark"] .exception-table tr:nth-child(even) td {
    background: var(--bs-secondary-bg) !important;
}

/* =========================================================
   6. Forms
   ========================================================= */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] select,
[data-bs-theme="dark"] input[type="text"],
[data-bs-theme="dark"] input[type="number"],
[data-bs-theme="dark"] input[type="email"],
[data-bs-theme="dark"] input[type="password"],
[data-bs-theme="dark"] input[type="date"],
[data-bs-theme="dark"] input[type="datetime-local"],
[data-bs-theme="dark"] textarea {
    background: var(--bs-tertiary-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] select:focus,
[data-bs-theme="dark"] input:focus,
[data-bs-theme="dark"] textarea:focus {
    background: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* =========================================================
   7. Nav — already dark-first; minimal overrides needed
   ========================================================= */
/* Nav brand and direct links stay the same in dark mode */
[data-bs-theme="dark"] .home-greeting p,
[data-bs-theme="dark"] .home-section-label {
    color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .home-vin-input {
    background: var(--bs-tertiary-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .home-s-icon {
    background: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .home-p-card p,
[data-bs-theme="dark"] .home-s-card p {
    color: var(--bs-secondary-color) !important;
}

/* =========================================================
   8. Footer
   ========================================================= */
[data-bs-theme="dark"] .footer {
    background: var(--bs-secondary-bg) !important;
    border-top-color: var(--bs-border-color) !important;
    color: var(--bs-secondary-color) !important;
}

/* =========================================================
   9. About modal
   ========================================================= */
[data-bs-theme="dark"] .about-modal {
    background: var(--bs-secondary-bg) !important;
}

[data-bs-theme="dark"] .about-row {
    border-bottom-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .about-row span:first-child {
    color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .modal-box h3,
[data-bs-theme="dark"] .modal-box p {
    color: var(--bs-body-color) !important;
}

/* =========================================================
   10. SLA indicators
   ========================================================= */
[data-bs-theme="dark"] .sla-warn {
    background: #3d2200 !important;
    color: #ffb74d !important;
}

[data-bs-theme="dark"] .sla-breached {
    background: #3d0a0a !important;
    color: #f87171 !important;
}

[data-bs-theme="dark"] .sla-ok {
    color: #4ade80 !important;
}

/* =========================================================
   11. Alerts
   ========================================================= */
[data-bs-theme="dark"] .alert-warning {
    background: #3d2e00 !important;
    color: #ffc107 !important;
}

[data-bs-theme="dark"] .alert-info {
    background: #062d3d !important;
    color: #17a2b8 !important;
}

/* =========================================================
   12. Bootstrap utility classes commonly used in pages
   ========================================================= */
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] .table-light > td {
    background: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* =========================================================
   13. Work Orders Queue — classes not covered by §4/§5
   ========================================================= */
[data-bs-theme="dark"] .bulk-actions {
    background: var(--bs-secondary-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .bulk-actions .selection-count {
    color: var(--bs-secondary-color) !important;
    border-left-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .btn-icon {
    background: var(--bs-secondary-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .btn-icon:hover {
    background: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .hint-message {
    background: var(--bs-secondary-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .hint-message h4,
[data-bs-theme="dark"] .hint-message p {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .access-info {
    background: #062030 !important;
    border-color: #1565c0 !important;
    color: #90caf9 !important;
}

/* Spinner track color in dark mode */
[data-bs-theme="dark"] .spinner {
    border-color: var(--bs-secondary-bg) !important;
    border-top-color: #3498db !important;
}

[data-bs-theme="dark"] .alert-danger {
    background: #3d0a0a !important;
    color: #f87171 !important;
}

[data-bs-theme="dark"] .alert-success {
    background: #062d0e !important;
    color: #4ade80 !important;
}

/* =========================================================
   12. Blazor error UI
   ========================================================= */
[data-bs-theme="dark"] #blazor-error-ui {
    background: #3d0a0a !important;
    color: #f87171 !important;
}

/* =========================================================
   13. Miscellaneous text color overrides
   ========================================================= */
[data-bs-theme="dark"] .price-display,
[data-bs-theme="dark"] .total-display,
[data-bs-theme="dark"] .empty-state {
    color: var(--bs-body-color) !important;
}

/* =========================================================
   14. Bright surfaces — empty states, filter panels, metric cards
   ========================================================= */
[data-bs-theme="dark"] .hint-message,
[data-bs-theme="dark"] .no-data,
[data-bs-theme="dark"] .filters-section,
[data-bs-theme="dark"] .search-container,
[data-bs-theme="dark"] .access-info {
    background: var(--bs-secondary-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

/* Payment section keeps a dark green tint to signal the "active payment" state */
[data-bs-theme="dark"] .payment-section {
    background: #0a2010 !important;
    border-color: #2d6a3f !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .hint-message h4,
[data-bs-theme="dark"] .no-data h4,
[data-bs-theme="dark"] .metric-value {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .hint-message p,
[data-bs-theme="dark"] .no-data p,
[data-bs-theme="dark"] .metric-title {
    color: var(--bs-secondary-color) !important;
}

/* Muted table row state colors (replaces Bootstrap's neon tints)
   Bootstrap 5 dark mode applies color via --bs-table-bg CSS variable;
   background-color alone is not enough — both must be set. */
[data-bs-theme="dark"] .table-danger {
    --bs-table-bg: hsl(0, 30%, 14%) !important;
    --bs-table-striped-bg: hsl(0, 30%, 17%) !important;
    --bs-table-hover-bg: hsl(0, 30%, 19%) !important;
    --bs-table-color: var(--bs-body-color) !important;
    background-color: hsl(0, 30%, 14%) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .table-danger > td,
[data-bs-theme="dark"] .table-danger > th {
    background-color: transparent !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .table-warning {
    --bs-table-bg: hsl(40, 30%, 14%) !important;
    --bs-table-striped-bg: hsl(40, 30%, 17%) !important;
    --bs-table-hover-bg: hsl(40, 30%, 19%) !important;
    --bs-table-color: var(--bs-body-color) !important;
    background-color: hsl(40, 30%, 14%) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .table-warning > td,
[data-bs-theme="dark"] .table-warning > th {
    background-color: transparent !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .table-active {
    --bs-table-bg: hsl(217, 30%, 18%) !important;
    --bs-table-color: var(--bs-body-color) !important;
    background-color: hsl(217, 30%, 18%) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .table-active > td,
[data-bs-theme="dark"] .table-active > th {
    background-color: transparent !important;
    color: var(--bs-body-color) !important;
}

/* =========================================================
   15. Badge palette — desaturated, dark-background-appropriate
       Lightness 50-55% with white text meets WCAG AA on dark surfaces.
   ========================================================= */

/* Success / Active / Paid */
[data-bs-theme="dark"] .badge.bg-success,
[data-bs-theme="dark"] .badge-success,
[data-bs-theme="dark"] .badge.bg-paid {
    background: hsl(142, 38%, 52%) !important;
    color: #fff !important;
}

/* Danger / Inactive / Overdue */
[data-bs-theme="dark"] .badge.bg-danger,
[data-bs-theme="dark"] .badge-danger,
[data-bs-theme="dark"] .badge.bg-overdue {
    background: hsl(0, 36%, 54%) !important;
    color: #fff !important;
}

/* Info / role badges */
[data-bs-theme="dark"] .badge.bg-info,
[data-bs-theme="dark"] .badge-info {
    background: hsl(187, 38%, 48%) !important;
    color: #fff !important;
}

/* Warning / Pending */
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.bg-pending {
    background: hsl(40, 48%, 50%) !important;
    color: #fff !important;
}

/* Secondary / Days Outstanding */
[data-bs-theme="dark"] .badge.bg-secondary {
    background: hsl(215, 18%, 45%) !important;
    color: #fff !important;
}

/* Work Order status pills */
[data-bs-theme="dark"] .status-badge.status-queue {
    background: hsl(40, 45%, 48%) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .status-badge.status-ready {
    background: hsl(142, 38%, 46%) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .status-badge.status-inprocess {
    background: hsl(187, 38%, 44%) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .status-badge.status-created {
    background: hsl(215, 18%, 42%) !important;
    color: #fff !important;
}

/* =========================================================
   16. Ghost action buttons (table row actions: Reset, Delete)
       Scoped to .btn-sm only — preserves full-size primary CTAs.
       Specificity: [data-bs-theme] + 2 classes beats Bootstrap's 1 class.
   ========================================================= */
[data-bs-theme="dark"] .btn-sm.btn-danger {
    background: transparent !important;
    border: 1px solid hsl(0, 36%, 54%) !important;
    color: hsl(0, 55%, 72%) !important;
}

[data-bs-theme="dark"] .btn-sm.btn-danger:hover,
[data-bs-theme="dark"] .btn-sm.btn-danger:focus {
    background: hsla(0, 36%, 54%, 0.18) !important;
    color: hsl(0, 60%, 78%) !important;
    border-color: hsl(0, 36%, 60%) !important;
}

[data-bs-theme="dark"] .btn-sm.btn-warning {
    background: transparent !important;
    border: 1px solid hsl(40, 48%, 50%) !important;
    color: hsl(40, 65%, 68%) !important;
}

[data-bs-theme="dark"] .btn-sm.btn-warning:hover,
[data-bs-theme="dark"] .btn-sm.btn-warning:focus {
    background: hsla(40, 48%, 50%, 0.18) !important;
    color: hsl(40, 70%, 74%) !important;
    border-color: hsl(40, 48%, 56%) !important;
}

[data-bs-theme="dark"] .btn-sm.btn-primary {
    background: hsl(217, 55%, 42%) !important;
    border-color: hsl(217, 55%, 42%) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .btn-sm.btn-primary:hover,
[data-bs-theme="dark"] .btn-sm.btn-primary:focus {
    background: hsl(217, 55%, 50%) !important;
    border-color: hsl(217, 55%, 50%) !important;
}

/* =========================================================
   17. Link colors — accent teal instead of browser-default blue
   ========================================================= */
[data-bs-theme="dark"] .main-content a:not(.btn):not([class*="btn-"]) {
    color: hsl(174, 58%, 56%) !important;
    text-decoration: none;
}

[data-bs-theme="dark"] .main-content a:not(.btn):not([class*="btn-"]):hover {
    color: #5eead4 !important;
    text-decoration: underline;
}

[data-bs-theme="dark"] .main-content a:not(.btn):not([class*="btn-"]):visited {
    color: hsl(174, 42%, 50%) !important;
}

[data-bs-theme="dark"] .main-content a:not(.btn):not([class*="btn-"]):focus {
    color: hsl(174, 58%, 56%) !important;
    outline: 2px solid hsl(174, 58%, 56%);
    outline-offset: 2px;
    border-radius: 2px;
}

/* =========================================================
   Exception Dashboard — dark mode overrides
   ========================================================= */
[data-bs-theme="dark"] .exception-panel {
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.4) !important;
}

[data-bs-theme="dark"] .exception-panel h3,
[data-bs-theme="dark"] .exception-header h1 {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .panel-desc,
[data-bs-theme="dark"] .last-updated {
    color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .tab-bar {
    border-bottom-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .tab-btn {
    background: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .tab-btn.active {
    background: var(--bs-body-bg) !important;
    color: #3498db !important;
    border-bottom-color: #3498db !important;
}

[data-bs-theme="dark"] .exception-table th {
    background: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
    border-bottom-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .exception-table th:hover {
    background: var(--bs-tertiary-bg, #2a2a3a) !important;
}

[data-bs-theme="dark"] .exception-table td {
    border-bottom-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .row-warn td {
    background: rgba(243, 156, 18, 0.12) !important;
}

[data-bs-theme="dark"] .row-critical td {
    background: rgba(231, 76, 60, 0.12) !important;
}

[data-bs-theme="dark"] .bucket-ok {
    background: rgba(39, 174, 96, 0.15) !important;
    border-color: #27ae60 !important;
}

[data-bs-theme="dark"] .bucket-warn {
    background: rgba(243, 156, 18, 0.15) !important;
    border-color: #f39c12 !important;
}

[data-bs-theme="dark"] .bucket-critical {
    background: rgba(231, 76, 60, 0.15) !important;
    border-color: #e74c3c !important;
}

[data-bs-theme="dark"] .bucket-count,
[data-bs-theme="dark"] .bucket-label {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .pill-ok {
    background: rgba(39, 174, 96, 0.2) !important;
    color: #5dca8a !important;
}

[data-bs-theme="dark"] .pill-warn {
    background: rgba(243, 156, 18, 0.2) !important;
    color: #f5b942 !important;
}

[data-bs-theme="dark"] .pill-critical {
    background: rgba(231, 76, 60, 0.2) !important;
    color: #f07070 !important;
}

[data-bs-theme="dark"] .loading-container {
    color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .spinner {
    border-color: var(--bs-border-color) !important;
    border-top-color: #3498db !important;
}

/* =========================================================
   Ops Metrics Dashboard — dark mode overrides
   ========================================================= */
[data-bs-theme="dark"] .metrics-dash-header h1 {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .last-updated {
    color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .kpi-tile {
    background: var(--bs-body-bg) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.4) !important;
}

[data-bs-theme="dark"] .kpi-value {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .kpi-label {
    color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .kpi-sub {
    color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .trend-improved {
    color: #4caf7d !important;
}

[data-bs-theme="dark"] .trend-slipped {
    color: #e57373 !important;
}

[data-bs-theme="dark"] .trend-flat {
    color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .trend-card,
[data-bs-theme="dark"] .metrics-section-card {
    background: var(--bs-body-bg) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .metrics-table th {
    background: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .metrics-table td {
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .metrics-loading,
[data-bs-theme="dark"] .no-data-msg {
    color: var(--bs-secondary-color) !important;
}

/* =========================================================
   Help / How-To / Status Management — dark mode overrides
   ========================================================= */
[data-bs-theme="dark"] .accordion-item,
[data-bs-theme="dark"] .accordion-body,
[data-bs-theme="dark"] .guide-card,
[data-bs-theme="dark"] .status-card {
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .accordion-header,
[data-bs-theme="dark"] .guide-section h3,
[data-bs-theme="dark"] .status-section h3 {
    background: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .help-header h2,
[data-bs-theme="dark"] .page-header h2,
[data-bs-theme="dark"] .guide-card h4,
[data-bs-theme="dark"] .status-card h4 {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .lead,
[data-bs-theme="dark"] .help-card p,
[data-bs-theme="dark"] .guide-card p,
[data-bs-theme="dark"] .status-section > p {
    color: var(--bs-secondary-color) !important;
}

/* =========================================================
   Create User / Employee Management / Add Team Member
   ========================================================= */
[data-bs-theme="dark"] .form-section,
[data-bs-theme="dark"] .filters-section,
[data-bs-theme="dark"] .table-card,
[data-bs-theme="dark"] .table-header,
[data-bs-theme="dark"] .roles-container,
[data-bs-theme="dark"] .section-card,
[data-bs-theme="dark"] .team-container {
    background: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .table-card {
    background: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .role-checkbox:hover {
    background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .form-field label,
[data-bs-theme="dark"] .form-section h4 {
    color: var(--bs-body-color) !important;
}

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

/* =========================================================
   ViewTeam (/team) — modern-grid table cells & access info
   ========================================================= */
[data-bs-theme="dark"] .modern-grid td {
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .modern-grid tr:nth-child(even) td {
    background: var(--bs-secondary-bg) !important;
}

[data-bs-theme="dark"] .modern-grid tr:hover td {
    background: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .modern-grid th {
    background: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .modern-grid th:hover {
    background: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .access-info {
    background: rgba(13, 110, 253, 0.15) !important;
    color: var(--bs-body-color) !important;
    border-color: rgba(13, 110, 253, 0.4) !important;
}

[data-bs-theme="dark"] .search-filter input {
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}
