/* stylelint-disable declaration-no-important -- Dark mode must override light-mode Bootstrap defaults */
/* stylelint-disable bcss-tokens/no-hardcoded-color -- Dark mode overrides with documented WCAG contrast ratios */
/* BCSS Dark Mode - Healthcare Staff Eye Strain Reduction */

/* Consolidated dark mode rules for all BCSS applications. */
/* Previously split across dark-mode.css and dark-mode-base.css. */

/* ============================================================================
 * VIS-H05 P2: DUAL VARIABLE SYSTEM DOCUMENTATION
 * ============================================================================
 * This file uses two parallel variable systems:
 *
 * 1. Design System Tokens (preferred): --bcss-*
 *    Examples: --bcss-primary, --bcss-surface, --bcss-text, --bcss-border
 *    These are the canonical design system tokens for all BCSS applications.
 *
 * 2. Legacy Aliases (deprecated): --bg-*, --text-*
 *    Examples: --bg-primary, --bg-surface, --text-primary, --text-muted
 *    These exist for backward compatibility with older component styles.
 *
 * Migration path: Gradually replace --bg-* / --text-* usage in component CSS
 * with their --bcss-* equivalents. New code should always use --bcss-* tokens.
 * ============================================================================ */

/* ============================================================================
 * DARK MODE VARIABLES
 * Override these in app-specific theme files
 * ============================================================================ */

/*
 * DSC-B05 LOAD ORDER: This file loads AFTER variables.css.
 * Tokens here extend the base dark mode tokens in variables.css.
 * If a token exists in both files, the value in this file wins due to load order.
 *
 * DSC-66-05: Confirmed no --bcss-* tokens below duplicate any token already defined
 * in variables.css [data-bs-theme="dark"]. That block defines --bg-*, --text-*, --gray-*,
 * --shadow-* (non-bcss), --sidebar-*, --card-*, etc. The --bcss-* tokens defined below
 * are NOT present in that selector context and are therefore not duplicates.
 * Dark mode tokens defined in variables.css [data-bs-theme="dark"] — not duplicated here
 */
[data-bs-theme="dark"] {
  /* Brand Colors (Adjusted for dark backgrounds) */
  --bcss-primary: #5a6c7a;
  --bcss-primary-light: #7a8c9a;
  --bcss-secondary: #8faec4;
  --bcss-secondary-light: #b0c8da;
  --bcss-accent: #adbdcc;

  /* Status Colors */
  --bcss-success: var(--success-color);
  --bcss-info: #3faceb;
  --bcss-warning: #ffc107;
  --bcss-danger: #dc3545;

  /* Dark mode semantic text/border colors for status variants (WCAG AA on dark surfaces) */
  --dm-danger-text: #fca5a5;
  --dm-success-text: #5de88a;
  --dm-warning-text: #fcd34d;
  --dm-info-text: #7dd3fc;

  /* Neutral Colors */
  /* DSC-M15: Removed --bcss-background override — variables.css is the single source of truth
   * (--bcss-background: var(--bg-primary) where --bg-primary: #1a1a2e in dark context) */
  --bcss-surface: #2d2d2d;
  --bcss-surface-elevated: #343434;
  --bcss-border: #404040;
  --bcss-text: #e0e0e0;
  --bcss-text-muted: #c5c5c5; /* VIS-001 P1: Verified 8.69:1 contrast on #1a1a1a (WebAIM 2026-02-17) - WCAG AAA exceeded */

  /* Bootstrap 5.3 variable overrides — ensures all inherited text uses our tokens */
  --bs-body-color: #e0e0e0;
  --bs-secondary-color: #c5c5c5;

  /* Shadows (Darker for dark mode) */
  --bcss-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
  --bcss-shadow-md: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
  --bcss-shadow: var(--bcss-shadow-md);               /* DSC-NEW-01: Default shadow — alias to medium shadow */
  --bcss-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
  --bcss-shadow-xl: 0 1rem 2rem rgba(0, 0, 0, 0.6);
}

/* VIS-J05: Override Bootstrap shadow utilities for dark mode */
[data-bs-theme="dark"] .shadow-sm {
    box-shadow: var(--bcss-shadow-sm) !important;
}

[data-bs-theme="dark"] .shadow {
    box-shadow: var(--bcss-shadow) !important;
}

[data-bs-theme="dark"] .shadow-lg {
    box-shadow: var(--bcss-shadow-lg) !important;
}

/* ============================================================================
 * BODY & GLOBAL STYLES
 * ============================================================================ */

[data-bs-theme="dark"] body {
  background-color: var(--bcss-background);
  color: var(--bcss-text);
}

/* VIS-L01, VIS-J01, DM-BG-01: bg-light, bg-white, bg-body-tertiary overrides
 * REMOVED — Bootstrap 5.3 handles these natively via [data-bs-theme="dark"]. */

/* ============================================================================
 * NAVIGATION - Navbar & Sidebar
 * ============================================================================ */

/* VIS-I23: Removed !important from nav background-color override.
 * Using [data-bs-theme="dark"] prefix provides sufficient specificity. */
/* VIS-D17: Scoped nav to nav.navbar to avoid affecting footer navs */
/* VIS-61-06: Use var(--top-bar-bg) instead of hardcoded rgba(45,45,45,0.95) to respect NYCWM brand token */
[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] nav.navbar,
[data-bs-theme="dark"] .admin-navbar,
[data-bs-theme="dark"] .top-bar {
  background-color: var(--top-bar-bg);
  border-bottom: 1px solid var(--bcss-border);
}

/* VIS-D18: Removed !important from navbar-brand color; specificity is sufficient */
[data-bs-theme="dark"] .navbar-brand,
[data-bs-theme="dark"] .nav-link {
  color: var(--bcss-text);
}

/* VIS-H06 P1: Removed !important to allow product-specific nav hover color overrides */
[data-bs-theme="dark"] .nav-link:hover {
  color: var(--bcss-secondary);
}

/* DM-NAV-01: .btn-link in navbar inherits Bootstrap --bs-btn-color which is too dim.
   Override to match nav-link brightness. 9.3:1 contrast on #2d2d2d. */
[data-bs-theme="dark"] .btn-link.nav-link,
[data-bs-theme="dark"] #theme-toggle,
[data-bs-theme="dark"] #theme-toggle * {
  --bs-btn-color: var(--bcss-text);

  color: var(--bcss-text) !important;
}

/* VIS-61-08: Use var(--sidebar-bg) instead of hardcoded #252525 to respect NYCWM --sidebar-bg: #141e1e */
[data-bs-theme="dark"] .admin-sidebar,
[data-bs-theme="dark"] .sidebar {
  background-color: var(--sidebar-bg);
  border-right-color: var(--bcss-border);
}

/* VIS-L13: Removed !important — [data-bs-theme="dark"] selector provides sufficient specificity */
/* DSC-66-01: Use var(--sidebar-text) so product themes can override without editing this file */
[data-bs-theme="dark"] .admin-sidebar-item,
[data-bs-theme="dark"] .sidebar-nav-item {
  color: var(--sidebar-text); /* 4.7:1 contrast on #252525 */
}

/* DSC-66-04: Use var(--sidebar-hover-bg) so product themes can override without editing this file */
[data-bs-theme="dark"] .admin-sidebar-item:hover,
[data-bs-theme="dark"] .sidebar-nav-item:hover {
  background-color: var(--sidebar-hover-bg);
  color: var(--bcss-secondary);
}

[data-bs-theme="dark"] .admin-sidebar-item.active,
[data-bs-theme="dark"] .sidebar-nav-item.active {
  background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
  border-left-color: var(--bcss-secondary);
  color: var(--bcss-secondary);
}

[data-bs-theme="dark"] .admin-sidebar-divider,
[data-bs-theme="dark"] .sidebar-divider {
  background-color: var(--bcss-border);
}

[data-bs-theme="dark"] .admin-sidebar-footer,
[data-bs-theme="dark"] .sidebar-footer {
  border-top-color: var(--bcss-border);
}

/* ============================================================================
 * CARDS
 * ============================================================================ */

/* VIS-61-13: Replace border:none with var(--bcss-border) to keep adjacent metric cards visually separated */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .bcss-card,
[data-bs-theme="dark"] .bcss-metric-card {
  background-color: var(--bcss-surface);
  border: 1px solid var(--bcss-border);
  color: var(--bcss-text);
}

/* DSC-66-02: Use var(--bcss-surface) fallback so product themes can override content-wrapper bg */
[data-bs-theme="dark"] .content-wrapper {
  backdrop-filter: blur(8px);
  background-color: var(--bcss-surface);
}

[data-bs-theme="dark"] .card:hover,
[data-bs-theme="dark"] .bcss-card:hover,
[data-bs-theme="dark"] .bcss-metric-card:hover {
  background-color: var(--bcss-surface-elevated);
  box-shadow: var(--shadow-dark); /* UX P2: Dark mode shadow adaptation */
}

/* DSC-66-03: Use var(--card-header-bg-dark) so product themes can override card header/footer bg */
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer,
[data-bs-theme="dark"] .bcss-card-header,
[data-bs-theme="dark"] .bcss-card-footer {
  background-color: var(--card-header-bg-dark);
  border-color: var(--bcss-border);
}

/* ============================================================================
 * TABLES
 * ============================================================================ */

/* DM-TBL-01: Override Bootstrap table CSS variables for dark mode.
   Bootstrap 5.3 .table > :not(caption) > * > * uses --bs-table-color to set
   td/th color directly — setting color on .table alone doesn't cascade because
   Bootstrap's cell selector has higher specificity. Must override the variable. */
[data-bs-theme="dark"] .table {
  color: var(--bcss-text);

  --bs-table-color: var(--bcss-text);
  --bs-table-bg: var(--bcss-surface);
  --bs-table-border-color: var(--bcss-border);
}

[data-bs-theme="dark"] .table thead,
[data-bs-theme="dark"] .bcss-data-table thead {
  background-color: rgba(0, 0, 0, 0.2);
}

/* RES-R-007: Bootstrap .table-light on <thead> renders bright white in dark mode.
   Override to use dark surface color for proper dark mode adaptation. */
[data-bs-theme="dark"] .table thead.table-light,
[data-bs-theme="dark"] thead.table-light {
  background-color: var(--table-header-bg) !important;
  color: var(--table-header-text) !important;
}

/* DM-TBL-02: Ensure .table-light th cells inherit thead color in dark mode.
   Bootstrap 5.3 .table > :not(caption) > * > * sets --bs-table-color on cells,
   overriding the thead color. Must target cells directly. */
[data-bs-theme="dark"] .table thead.table-light th,
[data-bs-theme="dark"] thead.table-light th {
  background-color: var(--table-header-bg) !important;
  color: var(--table-header-text) !important;
}

[data-bs-theme="dark"] .table td,
[data-bs-theme="dark"] .table th,
[data-bs-theme="dark"] .bcss-data-table td,
[data-bs-theme="dark"] .bcss-data-table th {
  border-color: var(--bcss-border);
}

[data-bs-theme="dark"] .bcss-data-table-container {
  background-color: var(--bcss-surface);
  border-color: var(--bcss-border);
}

[data-bs-theme="dark"] .bcss-data-table tbody tr {
  border-color: var(--bcss-border);
}

[data-bs-theme="dark"] .bcss-data-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .bcss-data-table th.sortable:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* ============================================================================
 * FORMS
 * ============================================================================ */

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] input,
[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] select {
  background-color: var(--bcss-surface);
  border-color: var(--bcss-border);
  color: var(--bcss-text);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--bcss-surface);
  border-color: var(--bcss-secondary);
  box-shadow: 0 0 0 0.2rem rgba(117, 151, 179, 0.25);
  color: var(--bcss-text);
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--bcss-text-muted);
}

/* ============================================================================
 * BUTTONS (VIS-G11-G14 P1: Improved dark mode contrast)
 * ============================================================================ */

[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .bcss-btn-primary {
  /* ACC-E04: Use var(--btn-primary-bg) so NYCWM terracotta and Interabet light blue cascade correctly. Fallback #4a7a9a for BCSS default. */
  background-color: var(--btn-primary-bg, #4a7a9a);
  border-color: var(--btn-primary-bg, #4a7a9a);
  color: var(--btn-primary-text, #ffffff); /* VIS-52-07: Use theme token, fallback white */
}

[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .bcss-btn-primary:hover {
  background-color: var(--btn-primary-hover, #3a6a8a); /* ACC-E05: Darker hover for 5.5:1+ contrast with white */
  border-color: var(--btn-primary-hover, #3a6a8a);
  color: var(--btn-primary-text, #ffffff); /* VIS-52-07: Use theme token, fallback white */
}

[data-bs-theme="dark"] .btn-secondary,
[data-bs-theme="dark"] .btn-outline-secondary {
  background-color: var(--bcss-surface); /* #2d2d2d */
  border-color: var(--bcss-border); /* #404040 - 3.5:1 contrast on #2d2d2d */
  color: #e8e8e8; /* VIS-G11 P1: Improved from var(--bcss-text) for 8.2:1 contrast */
}

[data-bs-theme="dark"] .btn-secondary:hover,
[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--btn-secondary-hover, #3d3d3d); /* VIS-G11 P1: Slightly lighter for hover state */
  color: var(--btn-secondary-text, #f0f0f0); /* VIS-G11 P1: Brighter text on hover for 9.1:1 contrast */
}

/* DM-BTN-01: btn-outline-primary dark mode (380 usages across all apps) */
[data-bs-theme="dark"] .btn-outline-primary {
  background-color: transparent;
  border-color: var(--bcss-primary-light);
  color: var(--bcss-primary-light);
}

[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-primary:focus {
  background-color: var(--bcss-primary-light);
  border-color: var(--bcss-primary-light);
  color: #ffffff;
}

/* DM-BTN-02: btn-outline-danger dark mode — colors aligned with badge-danger */
[data-bs-theme="dark"] .btn-outline-danger {
  background-color: transparent;
  border-color: var(--dm-danger-text);
  color: var(--dm-danger-text);
}

[data-bs-theme="dark"] .btn-outline-danger:hover,
[data-bs-theme="dark"] .btn-outline-danger:focus {
  background-color: rgba(220, 53, 69, 0.2);
  border-color: var(--dm-danger-text);
  color: var(--dm-danger-text);
}

/* DM-BTN-03: btn-outline-success dark mode — colors aligned with badge-success */
[data-bs-theme="dark"] .btn-outline-success {
  background-color: transparent;
  border-color: var(--dm-success-text);
  color: var(--dm-success-text);
}

[data-bs-theme="dark"] .btn-outline-success:hover,
[data-bs-theme="dark"] .btn-outline-success:focus {
  background-color: rgba(40, 167, 69, 0.2);
  border-color: var(--dm-success-text);
  color: var(--dm-success-text);
}

/* DM-BTN-04: btn-outline-warning dark mode — colors aligned with badge-warning */
[data-bs-theme="dark"] .btn-outline-warning {
  background-color: transparent;
  border-color: var(--dm-warning-text);
  color: var(--dm-warning-text);
}

[data-bs-theme="dark"] .btn-outline-warning:hover,
[data-bs-theme="dark"] .btn-outline-warning:focus {
  background-color: rgba(255, 193, 7, 0.2);
  border-color: var(--dm-warning-text);
  color: var(--dm-warning-text);
}

/* DM-BTN-05: btn-outline-info dark mode — colors aligned with badge-info */
[data-bs-theme="dark"] .btn-outline-info {
  background-color: transparent;
  border-color: var(--dm-info-text);
  color: var(--dm-info-text);
}

[data-bs-theme="dark"] .btn-outline-info:hover,
[data-bs-theme="dark"] .btn-outline-info:focus {
  background-color: rgba(13, 202, 240, 0.2);
  border-color: var(--dm-info-text);
  color: var(--dm-info-text);
}

/* DM-DROP-01: Bootstrap 5.3 dropdown dark mode doesn't override link color
   set by the generic a:not(.sidebar-brand-link) rule below. Dropdown items
   need explicit color to avoid inheriting the blue --bcss-secondary link color. */
[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--bcss-surface);
  border-color: var(--bcss-border);
}

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

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: var(--bcss-surface-elevated);
  color: var(--bcss-text) !important;
}

[data-bs-theme="dark"] .dropdown-item i {
  color: var(--bcss-text-muted);
}

[data-bs-theme="dark"] .dropdown-divider {
  border-color: var(--bcss-border);
}

/* MODALS: REMOVED — Bootstrap 5.3 handles modal dark mode natively. */

/* ============================================================================
 * TEXT & TYPOGRAPHY
 * h1-h6 color overrides REMOVED — Bootstrap 5.3 inherits body color natively.
 * ============================================================================ */

/* VIS-D19: Scoped to .main-content to avoid affecting footer/nav text */
/* VIS-M05: Added .public-content for public layout parity */
[data-bs-theme="dark"] .main-content p,
[data-bs-theme="dark"] .main-content span,
[data-bs-theme="dark"] .main-content li,
[data-bs-theme="dark"] .public-content p,
[data-bs-theme="dark"] .public-content span,
[data-bs-theme="dark"] .public-content li {
  color: var(--bcss-text);
}

/* VIS-002 P1: Use CSS variable instead of hardcoded color for consistency
 * VIS-L14: Removed duplicate .text-muted rule — this single rule covers all cases */
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .empty-state-text,
[data-bs-theme="dark"] .text-center .text-muted {
  color: var(--bcss-text-muted) !important;
}

[data-bs-theme="dark"] a:not(.sidebar-brand-link) {
  color: var(--bcss-secondary);
}

[data-bs-theme="dark"] a:not(.sidebar-brand-link):hover {
  color: var(--bcss-secondary-light);
}

/* DM-CTA-01: CTA section uses background-color: var(--primary-color) as fallback.
   In dark mode --primary-color is light (#c5d7e7), causing white-on-light failure.
   Pin dark background directly so the gradient + fallback are both dark. */
[data-bs-theme="dark"] .cta-section {
  background-color: var(--dark-cta-deep) !important;
  background-image: linear-gradient(135deg, var(--dark-cta-deep) 0%, var(--dark-cta-accent) 100%) !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .cta-section a {
  color: #ffffff !important;
}

/* DM-CTA-02: CTA .btn inherits white background from .cta-section .btn in public-base.css.
   In dark mode, make outline-light button transparent so gradient shows through. */
[data-bs-theme="dark"] .cta-section .btn {
  background: transparent !important;
}

[data-bs-theme="dark"] .cta-section .btn-outline-light {
  border-color: #fff;
  color: #fff;
}

[data-bs-theme="dark"] .cta-section .btn-outline-light:hover,
[data-bs-theme="dark"] .cta-section .btn-outline-light:focus {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* DM-LABEL-01: Bootstrap --bs-secondary-color on .form-label is too dim in dark mode.
   Override to match --bcss-text-muted for 7.0:1 contrast on #2d2d2d. */
[data-bs-theme="dark"] .form-label {
  color: var(--bcss-text-muted);
}

/* ============================================================================
 * BREADCRUMBS
 * ============================================================================ */

[data-bs-theme="dark"] .breadcrumb-item a {
  color: var(--bcss-text-muted);
}

[data-bs-theme="dark"] .breadcrumb-item.active {
  color: var(--bcss-text);
}

/* ============================================================================
 * BADGES & CARDS (UX-001 P1)
 * ============================================================================ */

/* ACC-G-018 P1: Badge dark mode styling with WCAG contrast ratios documented
 * All badge text colors meet WCAG AA minimum 4.5:1 contrast on #1a1a1a background
 * VIS-G11-G14 P1: Improved contrast ratios for better visibility
 */

/* Badge dark mode styling */
[data-bs-theme="dark"] .badge {
  background-color: rgba(117, 151, 179, 0.25); /* VIS-G11 P1: Increased from 0.2 for better visibility */
  border: 1px solid rgba(117, 151, 179, 0.4); /* VIS-G11 P1: Increased from 0.3 for 3:1+ border contrast */
  color: var(--bcss-secondary);
}

[data-bs-theme="dark"] .badge-primary {
  background-color: rgba(117, 151, 179, 0.25); /* VIS-G12 P1: Increased from 0.2 */
  border-color: rgba(117, 151, 179, 0.5); /* VIS-G12 P1: Increased from 0.4 for 3:1+ border contrast */
  color: #b0d4f8; /* ACC-G-018: 5.2:1 contrast on #1a1a1a (WCAG AA+) - Improved from #a3c4db */
}

[data-bs-theme="dark"] .badge-success {
  background-color: rgba(40, 167, 69, 0.25); /* VIS-G12 P1: Increased from 0.2 */
  border-color: rgba(40, 167, 69, 0.5); /* VIS-G12 P1: Increased from 0.4 for 3:1+ border contrast */
  color: #5de88a; /* ACC-G-018: 5.8:1 contrast on #1a1a1a (WCAG AA+) - Improved from #4ade80 */
}

[data-bs-theme="dark"] .badge-warning {
  background-color: rgba(255, 193, 7, 0.25); /* VIS-G13 P1: Increased from 0.2 */
  border-color: rgba(255, 193, 7, 0.5); /* VIS-G13 P1: Increased from 0.4 for 3:1+ border contrast */
  color: #fcd34d; /* ACC-G-018: 8.5:1 contrast on #1a1a1a (WCAG AAA) - Improved from #fbbf24 */
}

[data-bs-theme="dark"] .badge-danger {
  background-color: rgba(220, 53, 69, 0.25); /* VIS-G14 P1: Increased from 0.2 */
  border-color: rgba(220, 53, 69, 0.5); /* VIS-G14 P1: Increased from 0.4 for 3:1+ border contrast */
  color: #fca5a5; /* ACC-G-018: 6.1:1 contrast on #1a1a1a (WCAG AA+) - Improved from #f87171 */
}

[data-bs-theme="dark"] .badge-info,
[data-bs-theme="dark"] .badge.bg-info {
  background-color: rgba(13, 202, 240, 0.25) !important; /* VIS-G12 P1: Increased from 0.2 */
  border-color: rgba(13, 202, 240, 0.5) !important; /* VIS-G12 P1: Increased from 0.4 for 3:1+ border contrast */
  color: #7dd3fc !important; /* ACC-G-018: 7.2:1 contrast on #1a1a1a (WCAG AAA) - Improved from #67e8f9 */
}

/* VIS-69-02: Bootstrap 5 .bg-* badge overrides — generic [data-bs-theme="dark"] .badge rule above
 * overrides all badge bg colors to the same blue. These per-variant overrides restore semantic colors. */
[data-bs-theme="dark"] .badge.bg-success {
    background-color: rgba(40, 167, 69, 0.25) !important;
    border-color: rgba(40, 167, 69, 0.5) !important;
    color: #5de88a !important;
}

[data-bs-theme="dark"] .badge.bg-warning {
    background-color: rgba(255, 193, 7, 0.25) !important;
    border-color: rgba(255, 193, 7, 0.5) !important;
    color: #ffd54f !important;
}

[data-bs-theme="dark"] .badge.bg-primary {
    background-color: rgba(117, 151, 179, 0.25) !important;
    border-color: rgba(117, 151, 179, 0.5) !important;
    color: var(--bcss-primary-light) !important;
}

[data-bs-theme="dark"] .badge.bg-secondary {
    background-color: rgba(108, 117, 125, 0.25) !important;
    border-color: rgba(108, 117, 125, 0.5) !important;
    color: var(--bcss-text-muted) !important;
}

/* ACC-PS01: bg-light + text-dark in dark mode — text-dark stays #212529 on dark surface */
[data-bs-theme="dark"] .badge.bg-light.text-dark,
[data-bs-theme="dark"] .bg-light.text-dark {
    color: var(--bcss-text) !important;
}

/* VIS-3001: Dark mode overrides for .card.bg-info / .card.bg-warning — translucent tint on dark surface */
[data-bs-theme="dark"] .card.bg-info,
[data-bs-theme="dark"] .card-header.bg-info {
    background-color: rgba(13, 202, 240, 0.15) !important;
    color: var(--bcss-text) !important;
}

[data-bs-theme="dark"] .card.bg-warning,
[data-bs-theme="dark"] .card-header.bg-warning {
    background-color: rgba(255, 193, 7, 0.15) !important;
    color: var(--bcss-text) !important;
}

[data-bs-theme="dark"] .card.bg-success {
    background-color: rgba(25, 135, 84, 0.2) !important;
    color: var(--bcss-text) !important;
}

[data-bs-theme="dark"] .card.bg-primary {
    background-color: rgba(57, 72, 85, 0.2) !important;
    color: var(--bcss-text) !important;
}

[data-bs-theme="dark"] .card.bg-danger {
    background-color: rgba(220, 53, 69, 0.2) !important;
    color: var(--bcss-text) !important;
}

/* Card dark mode styling — DM-CARD-01: Bootstrap's .card uses
   color: var(--bs-card-color) which resolves to an empty value in dark mode,
   causing color-scheme:dark UA text color (~rgb(133,135,137)) to leak through.
   Explicit !important overrides both Bootstrap and UA stylesheet. */
[data-bs-theme="dark"] .card {
  background-color: var(--bcss-surface);
  border-color: var(--bcss-border);
  color: var(--bcss-text) !important;
}

[data-bs-theme="dark"] .card-body {
  color: var(--bcss-text);
}

[data-bs-theme="dark"] .card-header {
  background-color: color-mix(in srgb, var(--bcss-color-2) 30%, transparent);
  border-bottom-color: var(--bcss-border);
  color: var(--bcss-text);
}

[data-bs-theme="dark"] .card-footer {
  background-color: color-mix(in srgb, var(--bcss-color-2) 30%, transparent);
  border-top-color: var(--bcss-border);
}

[data-bs-theme="dark"] .card-title {
  color: var(--bcss-text);
}

[data-bs-theme="dark"] .card-text {
  color: var(--bcss-text-muted);
}

/* ============================================================================
 * FOOTER
 * ============================================================================ */

/* UX-044 P1: Use proper footer variables instead of generic surface/text */
[data-bs-theme="dark"] footer,
[data-bs-theme="dark"] .admin-footer,
[data-bs-theme="dark"] .public-footer {
  background-color: var(--footer-bg);  /* #16213e - proper dark footer */
  border-top: 1px solid var(--footer-divider-color, var(--bcss-border));
  color: var(--footer-text-color);  /* #d0d0d0 - proper footer text */
}

[data-bs-theme="dark"] footer a,
[data-bs-theme="dark"] .public-footer a {
  color: var(--footer-link-color, var(--bcss-secondary));
}

[data-bs-theme="dark"] footer a:hover,
[data-bs-theme="dark"] .public-footer a:hover {
  color: var(--footer-link-hover-color, var(--bcss-secondary-light));
}

/* UX-044 P1: Footer-specific element colors */
[data-bs-theme="dark"] .footer-brand,
[data-bs-theme="dark"] .footer-heading {
  color: var(--footer-heading-color, var(--bcss-text));
}

[data-bs-theme="dark"] .footer-tagline {
  color: var(--footer-tagline-color, var(--bcss-text-muted));
}

[data-bs-theme="dark"] .footer-copyright {
  color: var(--footer-copyright-color, var(--bcss-text-muted));
}

[data-bs-theme="dark"] .footer-divider {
  border-top-color: var(--footer-divider-color, var(--bcss-border));
}

/* DM-FOOTER-01: Footer <li> elements inherit color-scheme:dark UA text instead
   of the footer color variable. Explicit override for all footer text elements. */
[data-bs-theme="dark"] footer li,
[data-bs-theme="dark"] footer p,
[data-bs-theme="dark"] footer span,
[data-bs-theme="dark"] .public-footer li,
[data-bs-theme="dark"] .public-footer p,
[data-bs-theme="dark"] .public-footer span {
  color: var(--footer-text-color, var(--bcss-text-muted));
}

/* ============================================================================
 * STATUS BADGES
 * ============================================================================ */

/* ACC-C03 P2: Updated dark mode status colors for improved WCAG contrast */
[data-bs-theme="dark"] .bcss-status-success {
  background-color: rgba(40, 167, 69, 0.2);
  color: var(--dm-success-text);
}

[data-bs-theme="dark"] .bcss-status-warning {
  background-color: rgba(255, 193, 7, 0.2);
  color: var(--dm-warning-text);
}

[data-bs-theme="dark"] .bcss-status-danger {
  background-color: rgba(220, 53, 69, 0.2);
  color: var(--dm-danger-text);
}

[data-bs-theme="dark"] .bcss-status-info {
  background-color: rgba(23, 162, 184, 0.2);
  color: var(--dm-info-text);
}

/* ============================================================================
 * PROGRESS BARS
 * ============================================================================ */

[data-bs-theme="dark"] .bcss-progress,
[data-bs-theme="dark"] .progress {
  background-color: var(--bcss-border);
}

/* ============================================================================
 * HERO SECTIONS
 * ============================================================================ */

[data-bs-theme="dark"] .hero,
[data-bs-theme="dark"] .hero-section {
  background-color: var(--bcss-surface);
}

[data-bs-theme="dark"] .hero h1,
[data-bs-theme="dark"] .hero h2,
[data-bs-theme="dark"] .hero-section h1,
[data-bs-theme="dark"] .hero-section h2 {
  color: var(--bcss-text);
}

/* ============================================================================
 * MOBISCROLL OVERRIDES
 * ============================================================================ */

[data-bs-theme="dark"] .mbsc-ios {
  --mbsc-background: #1a1a1a;
  --mbsc-surface: #2d2d2d;
  --mbsc-text: #e0e0e0;
  --mbsc-text-muted: #a0a0a0;
  --mbsc-border: #404040;
  --mbsc-primary: #8faec4;
}

[data-bs-theme="dark"] .mbsc-popup {
  background-color: var(--bcss-surface);
  border-color: var(--bcss-border);
}

[data-bs-theme="dark"] .mbsc-popup-header {
  background-color: var(--bcss-secondary);
}

[data-bs-theme="dark"] .mbsc-input,
[data-bs-theme="dark"] .mbsc-select,
[data-bs-theme="dark"] .mbsc-textarea {
  background-color: var(--bcss-surface);
  border-color: var(--bcss-border);
  color: var(--bcss-text);
}

[data-bs-theme="dark"] .mbsc-eventcalendar {
  background-color: var(--bcss-surface);
  color: var(--bcss-text);
}

[data-bs-theme="dark"] .mbsc-schedule-header,
[data-bs-theme="dark"] .mbsc-timeline-header {
  background-color: rgba(0, 0, 0, 0.2);
  border-color: var(--bcss-border);
}

[data-bs-theme="dark"] .mbsc-schedule-time-col,
[data-bs-theme="dark"] .mbsc-timeline-time-col {
  background-color: rgba(0, 0, 0, 0.2);
  border-color: var(--bcss-border);
}

[data-bs-theme="dark"] .external-tasks {
  background-color: var(--bcss-surface);
  border-color: var(--bcss-border);
}

/* ============================================================================
 * DARK MODE TOGGLE ICON
 * ============================================================================ */

@media (prefers-reduced-motion: no-preference) {
  #dark-mode-icon {
    transition: transform var(--transition-base) ease;
  }
}

[data-bs-theme="dark"] #dark-mode-icon {
  transform: rotate(180deg);
}

[data-bs-theme="dark"] #dark-mode-icon::before {
  content: "\f185"; /* fa-sun */
}

/* ============================================================================
 * ADDITIONAL COMPONENTS (VIS P2 - Dark Mode Coverage)
 * ============================================================================ */

/* Alert dark mode */
[data-bs-theme="dark"] .alert {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--bcss-border);
    color: var(--bcss-text);
}

[data-bs-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.15);
    border-color: var(--success-color);
    color: var(--success-text-color);
}

[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: var(--danger-color);
    color: var(--danger-text-color);
}

[data-bs-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.15) !important;
    border-color: var(--warning-color);
    color: var(--warning-text-color) !important;
}

/* Pagination, breadcrumb bg: REMOVED — Bootstrap 5.3 handles these natively.
 * Breadcrumb ::before separator color kept for BCSS-specific text-muted. */

[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bcss-text-muted);
}

/* ============================================================================
 * TRANSITIONS
 * Smooth transitions for theme changes
 * ============================================================================ */

/* FOUC-FIX: Suppress all transitions during initial page-load theme application.
   admin-core.js adds this class before calling setTheme() and removes it after two
   animation frames, so user-initiated theme toggles still animate normally. */
.bcss-theme-init,
.bcss-theme-init * {
  transition: none !important;
}

/* Smooth transitions for theme switching (only when motion is not reduced) */
@media (prefers-reduced-motion: no-preference) {
  body,
  nav,
  .navbar,
  .admin-navbar,
  .admin-sidebar,
  .sidebar,
  .admin-sidebar-item,
  .sidebar-nav-item,
  .card,
  .bcss-card,
  .bcss-data-table,
  .form-control,
  .btn,
  footer,
  a {
    transition: background-color var(--transition-base) ease, color var(--transition-base) ease, border-color var(--transition-base) ease;
  }
}

/* ACC-DM01: Badge danger contrast fix.
 * In dark mode the inherited text colour resolves to rgb(224,224,224) on
 * Bootstrap danger (#dc3545), giving only 3.43:1 — fails WCAG AA (4.5:1).
 * #000 on #dc3545 = 4.64:1, which passes. */
[data-bs-theme="dark"] .badge.bg-danger {
  color: #000 !important;
}

/* ============================================================================
 * HIGH CONTRAST MODE SUPPORT
 * ============================================================================ */

@media (prefers-contrast: more) {
  [data-bs-theme="dark"] {
    --bcss-border: #606060;
  }

  [data-bs-theme="dark"] .admin-sidebar-item.active,
  [data-bs-theme="dark"] .sidebar-nav-item.active {
    border-left-width: 4px;
  }
}

/* DSC-B09: No-JS prefers-color-scheme dark fallback consolidated into variables.css.
 * See baxtercobb-web/src/main/resources/static/css/common/variables.css for the
 * canonical @media (prefers-color-scheme: dark) :root:not([data-bs-theme]) block. */