/* Global Design System - Light Mode (Default) */
:root {
    /* Primary Colors - Green (for main UI elements, buttons, highlights) */
    --primary-color: #56ab2f;
    --primary-dark: #3d7a20;
    --primary-light: #6fc142;
    --primary-gradient-start: #56ab2f;
    --primary-gradient-end: #3d7a20;

    /* Secondary Colors - Sky Blue (for header, FAB button, accents) */
    --secondary-color: #4fc3f7;
    --secondary-dark: #29b6f6;
    --secondary-light: #81d4fa;
    --secondary-gradient-start: #4fc3f7;
    --secondary-gradient-end: #29b6f6;

    /* Accent Colors */
    --accent-orange: #ff9800;
    --accent-red: #f44336;
    --accent-green-success: #4caf50;

    /* Text Colors - Light Mode */
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #767676; /* Updated for WCAG AA compliance (4.54:1) */
    --text-inverse: #ffffff;

    /* Background Colors - Light Mode */
    --background-primary: #ffffff;
    --background-secondary: #f8f9fa;
    --background-tertiary: #f7f7f7;
    --background-elevated: #ffffff;

    /* Surface Colors */
    --surface-card: #ffffff;
    --surface-header: #8dbb28;
    --surface-nav: #2b4b6f;

    /* Border Colors */
    --border-color: #e0e0e0;
    --border-light: #f0f0f0;
    --border-dark: #999999; /* Improved for better visibility */

    /* Input Colors */
    --input-background: #ffffff;
    --input-border: #999999; /* Updated for WCAG AA compliance (2.85:1 - acceptable for UI components) */
    --input-focus-border: #2b4b6f;
    --input-text: #333333;

    /* Shadows - Light Mode */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.15);
    --shadow-lg: 0 6px 20px rgba(0,0,0,0.2);
    --shadow-primary: 0 6px 20px rgba(86, 171, 47, 0.4);
    --shadow-secondary: 0 6px 20px rgba(79, 195, 247, 0.4);

    /* Status Colors */
    --status-success: #4caf50;
    --status-success-bg: #f0f9f3;
    --status-warning: #d39e00; /* Updated for WCAG AA compliance (4.52:1) - was #ffc107 */
    --status-warning-bg: #fff9f0;
    --status-error: #dc3545;
    --status-error-bg: #fff0f0;
    --status-info: #2196F3;
    --status-info-bg: #e8f4fd;

    /* Dashboard Status Colors */
    --pdi-ready: #28a745;
    --pdi-ready-bg: linear-gradient(135deg, #ffffff 0%, #f0f9f3 100%);
    --pdi-developing: #ffc107;
    --pdi-developing-bg: linear-gradient(135deg, #ffffff 0%, #fff9f0 100%);
    --pdi-needs-work: #dc3545;
    --pdi-needs-work-bg: linear-gradient(135deg, #ffffff 0%, #fff0f0 100%);
    --pdi-no-data: #6c757d;
    --pdi-no-data-bg: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);

    /* Typography */
    --font-family-base: Arial, sans-serif;
    --font-family-heading: "Helvetica Neue", Arial, sans-serif;

    /* Spacing Scale */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-circle: 50%;

    /* Focus Indicators - WCAG 2.2 Compliant */
    --focus-outline-color: #4fc3f7;
    --focus-outline-width: 3px;
    --focus-outline-style: solid;
    --focus-outline-offset: 2px;
}

/* ========================================
   WCAG 2.2 Accessibility Enhancements
   ======================================== */

/* Visible Focus Indicators for Keyboard Navigation */
*:focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Enhanced focus for interactive elements */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
    box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.2);
}

/* Skip to main content link (for screen readers and keyboard users) */
.skip-to-main {
    position: absolute;
    left: -9999px;
    z-index: 999999;
    padding: 1em;
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.skip-to-main:focus {
    left: 50%;
    transform: translateX(-50%);
    top: 10px;
}

/* Ensure sufficient color contrast for links */
a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover,
a:focus {
    text-decoration-thickness: 2px;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus visible (hide outline for mouse users, show for keyboard) */
.focus-visible:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Reduced motion support for users with vestibular disorders */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Dark Mode - Automatically applies when system preference is dark OR manually enabled */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Text Colors - Dark Mode (lighter for better visibility) */
        --text-primary: #e8e8e8;
        --text-secondary: #c8c8c8;
        --text-muted: #a8a8a8;
        --text-inverse: #1a1a1a;

        /* Background Colors - Dark Mode (slightly lighter for better comfort) */
        --background-primary: #1e1e1e;
        --background-secondary: #2a2a2a;
        --background-tertiary: #242424;
        --background-elevated: #2a2a2a;

        /* Surface Colors - Dark Mode */
        --surface-card: #2a2a2a;
        --surface-header: #6d9820; /* Slightly darker green for dark mode */
        --surface-nav: #1e3449;

        /* Border Colors - Dark Mode */
        --border-color: #404040;
        --border-light: #333333;
        --border-dark: #555555;

        /* Input Colors - Dark Mode */
        --input-background: #2a2a2a;
        --input-border: #404040;
        --input-focus-border: #4fc3f7;
        --input-text: #d1d1d1;

        /* Shadows - Dark Mode (more subtle) */
        --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
        --shadow-md: 0 4px 8px rgba(0,0,0,0.4);
        --shadow-lg: 0 6px 20px rgba(0,0,0,0.5);
        --shadow-primary: 0 6px 20px rgba(86, 171, 47, 0.3);
        --shadow-secondary: 0 6px 20px rgba(79, 195, 247, 0.3);

        /* Status Colors - Dark Mode (slightly adjusted for better contrast) */
        --status-success-bg: #1a3a1c;
        --status-warning-bg: #3a3010;
        --status-error-bg: #3a1a1a;
        --status-info-bg: #1a2a3a;

        /* Dashboard Status Colors - Dark Mode */
        --pdi-ready-bg: linear-gradient(135deg, #2a2a2a 0%, #1a3a1c 100%);
        --pdi-developing-bg: linear-gradient(135deg, #2a2a2a 0%, #3a3010 100%);
        --pdi-needs-work-bg: linear-gradient(135deg, #2a2a2a 0%, #3a1a1a 100%);
        --pdi-no-data-bg: linear-gradient(135deg, #2a2a2a 0%, #242424 100%);
    }

    /* Body background in dark mode */
    body {
        background-color: var(--background-primary) !important;
        color: var(--text-primary) !important;
    }

    /* Cards and elevated surfaces */
    .card,
    .metric-card,
    .pdi-card,
    .login-container,
    .dropdown-menu {
        background-color: var(--surface-card) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    /* Input fields — all types + Bootstrap form classes */
    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="image"]):not([type="file"]),
    textarea,
    select,
    .form-control,
    .form-select {
        background-color: var(--input-background) !important;
        color: var(--input-text) !important;
        border-color: var(--input-border) !important;
    }

    input:focus,
    textarea:focus,
    select:focus,
    .form-control:focus,
    .form-select:focus {
        border-color: var(--input-focus-border) !important;
        box-shadow: 0 0 0 0.2rem rgba(79, 195, 247, 0.2) !important;
    }

    /* Placeholder text */
    ::placeholder {
        color: var(--text-muted) !important;
        opacity: 1 !important;
    }

    /* Select option background (Chrome/Edge) */
    option {
        background-color: var(--input-background);
        color: var(--input-text);
    }

    /* Tables */
    table {
        color: var(--text-primary) !important;
    }

    table thead {
        background-color: var(--background-tertiary) !important;
    }

    table tbody tr {
        border-bottom: 1px solid var(--border-color) !important;
    }

    table tbody tr:hover {
        background-color: var(--background-secondary) !important;
    }

    /* Dropdown menus */
    .dropdown-menu a {
        color: var(--text-primary) !important;
    }

    .dropdown-menu a:hover {
        background-color: var(--background-secondary) !important;
    }

    /* Mobile bottom nav - Dark mode */
    .mobile-bottom-nav {
        background: var(--surface-nav) !important;
    }

    /* Alerts */
    .alert {
        color: var(--text-primary) !important;
    }
    /* Fix btn-close position and colour in dark alerts */
    .alert-dismissible {
        position: relative !important;
        padding-right: 3rem !important;
    }
    .alert-dismissible .btn-close {
        position: absolute !important;
        top: 50% !important;
        right: 0.75rem !important;
        transform: translateY(-50%) !important;
        filter: invert(1) grayscale(100%) brightness(200%) !important;
        opacity: 0.75 !important;
    }
    .alert-success {
        background-color: var(--status-success-bg) !important;
        border-color: #2d5a30 !important;
        color: #a3d9a5 !important;
    }
    .alert-danger {
        background-color: var(--status-error-bg) !important;
        border-color: #6b2c2c !important;
        color: #f0a0a0 !important;
    }
    .alert-warning {
        background-color: var(--status-warning-bg) !important;
        border-color: #5a4a10 !important;
        color: #f0d080 !important;
    }
    .alert-info {
        background-color: var(--status-info-bg) !important;
        border-color: #1e3a5a !important;
        color: #90c8f0 !important;
    }

    /* Footer */
    footer {
        background-color: var(--background-secondary) !important;
        color: var(--text-secondary) !important;
    }

    /* Chart.js - Improve visibility in dark mode */
    canvas {
        filter: brightness(0.9) contrast(1.1);
    }
}

/* Manual Dark Mode - When user explicitly sets dark mode */
:root[data-theme="dark"] {
    /* Text Colors - Dark Mode (lighter for better visibility) */
    --text-primary: #e8e8e8;
    --text-secondary: #c8c8c8;
    --text-muted: #a8a8a8;
    --text-inverse: #1a1a1a;

    /* Background Colors - Dark Mode (slightly lighter for better comfort) */
    --background-primary: #1e1e1e;
    --background-secondary: #2a2a2a;
    --background-tertiary: #242424;
    --background-elevated: #2a2a2a;

    /* Surface Colors - Dark Mode */
    --surface-card: #2a2a2a;
    --surface-header: #6d9820;
    --surface-nav: #1e3449;

    /* Border Colors - Dark Mode */
    --border-color: #404040;
    --border-light: #333333;
    --border-dark: #555555;

    /* Input Colors - Dark Mode */
    --input-background: #2a2a2a;
    --input-border: #404040;
    --input-focus-border: #4fc3f7;
    --input-text: #d1d1d1;

    /* Shadows - Dark Mode (more subtle) */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.4);
    --shadow-lg: 0 6px 20px rgba(0,0,0,0.5);
    --shadow-primary: 0 6px 20px rgba(86, 171, 47, 0.3);
    --shadow-secondary: 0 6px 20px rgba(79, 195, 247, 0.3);

    /* Status Colors - Dark Mode */
    --status-success-bg: #1a3a1c;
    --status-warning-bg: #3a3010;
    --status-error-bg: #3a1a1a;
    --status-info-bg: #1a2a3a;

    /* Dashboard Status Colors - Dark Mode */
    --pdi-ready-bg: linear-gradient(135deg, #2a2a2a 0%, #1a3a1c 100%);
    --pdi-developing-bg: linear-gradient(135deg, #2a2a2a 0%, #3a3010 100%);
    --pdi-needs-work-bg: linear-gradient(135deg, #2a2a2a 0%, #3a1a1a 100%);
    --pdi-no-data-bg: linear-gradient(135deg, #2a2a2a 0%, #242424 100%);
}

:root[data-theme="dark"] body {
    background-color: var(--background-primary) !important;
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .metric-card,
:root[data-theme="dark"] .pdi-card,
:root[data-theme="dark"] .login-container,
:root[data-theme="dark"] .dropdown-menu {
    background-color: var(--surface-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="image"]):not([type="file"]),
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
    background-color: var(--input-background) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}

:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
    border-color: var(--input-focus-border) !important;
    box-shadow: 0 0 0 0.2rem rgba(79, 195, 247, 0.2) !important;
}

:root[data-theme="dark"] ::placeholder {
    color: var(--text-muted) !important;
    opacity: 1 !important;
}

:root[data-theme="dark"] option {
    background-color: var(--input-background);
    color: var(--input-text);
}

:root[data-theme="dark"] table {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] table thead {
    background-color: var(--background-tertiary) !important;
}

:root[data-theme="dark"] table tbody tr {
    border-bottom: 1px solid var(--border-color) !important;
}

:root[data-theme="dark"] table tbody tr:hover {
    background-color: var(--background-secondary) !important;
}

:root[data-theme="dark"] .dropdown-menu a {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .dropdown-menu a:hover {
    background-color: var(--background-secondary) !important;
}

:root[data-theme="dark"] .mobile-bottom-nav {
    background: var(--surface-nav) !important;
}

:root[data-theme="dark"] footer {
    background-color: var(--background-secondary) !important;
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .alert-dismissible {
    position: relative !important;
    padding-right: 3rem !important;
}
:root[data-theme="dark"] .alert-dismissible .btn-close {
    position: absolute !important;
    top: 50% !important;
    right: 0.75rem !important;
    transform: translateY(-50%) !important;
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 0.75 !important;
}
:root[data-theme="dark"] .alert-success {
    background-color: var(--status-success-bg) !important;
    border-color: #2d5a30 !important;
    color: #a3d9a5 !important;
}
:root[data-theme="dark"] .alert-danger {
    background-color: var(--status-error-bg) !important;
    border-color: #6b2c2c !important;
    color: #f0a0a0 !important;
}
:root[data-theme="dark"] .alert-warning {
    background-color: var(--status-warning-bg) !important;
    border-color: #5a4a10 !important;
    color: #f0d080 !important;
}
:root[data-theme="dark"] .alert-info {
    background-color: var(--status-info-bg) !important;
    border-color: #1e3a5a !important;
    color: #90c8f0 !important;
}

:root[data-theme="dark"] canvas {
    filter: brightness(0.9) contrast(1.1);
}

/* Apply primary solid color to elements */
.btn-primary,
.hero-btn,
.primary-gradient {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Apply secondary solid color to elements */
.secondary-gradient {
    background: var(--secondary-color) !important;
}

/* Primary color for text and borders */
.text-primary,
.primary-color {
    color: var(--primary-color) !important;
}

.border-primary {
    border-color: var(--primary-color) !important;
}

/* Secondary color for text and borders */
.text-secondary-color {
    color: var(--secondary-color) !important;
}

.border-secondary-color {
    border-color: var(--secondary-color) !important;
}

/* Override removed - was causing unwanted backgrounds on icons */

/* ═══════════════════════════════════════════════════════════════════════
   BOOTSTRAP 5 CSS VARIABLE BRIDGE
   Maps Bootstrap's --bs-* variables to our design token system.
   CSS custom properties resolve lazily (at use time), so these references
   automatically inherit dark mode changes — no duplication needed.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    /* Body */
    --bs-body-bg:                       var(--background-primary);
    --bs-body-color:                    var(--text-primary);
    --bs-body-bg-rgb:                   255, 255, 255;

    /* Text */
    --bs-secondary-color:               var(--text-secondary);
    --bs-tertiary-color:                var(--text-muted);
    --bs-emphasis-color:                var(--text-primary);
    --bs-heading-color:                 var(--text-primary);

    /* Surfaces */
    --bs-secondary-bg:                  var(--background-secondary);
    --bs-tertiary-bg:                   var(--background-tertiary);

    /* Borders */
    --bs-border-color:                  var(--border-color);
    --bs-border-color-translucent:      rgba(0, 0, 0, 0.175);

    /* Cards */
    --bs-card-bg:                       var(--surface-card);
    --bs-card-border-color:             var(--border-color);
    --bs-card-color:                    var(--text-primary);
    --bs-card-cap-bg:                   var(--background-secondary);

    /* Dropdowns */
    --bs-dropdown-bg:                   var(--surface-card);
    --bs-dropdown-border-color:         var(--border-color);
    --bs-dropdown-color:                var(--text-primary);
    --bs-dropdown-link-color:           var(--text-primary);
    --bs-dropdown-link-hover-bg:        var(--background-secondary);
    --bs-dropdown-link-hover-color:     var(--text-primary);
    --bs-dropdown-divider-bg:           var(--border-color);

    /* Modals */
    --bs-modal-bg:                      var(--surface-card);
    --bs-modal-color:                   var(--text-primary);
    --bs-modal-header-border-color:     var(--border-color);
    --bs-modal-footer-border-color:     var(--border-color);

    /* List group */
    --bs-list-group-bg:                 var(--surface-card);
    --bs-list-group-border-color:       var(--border-color);
    --bs-list-group-color:              var(--text-primary);
    --bs-list-group-hover-bg:           var(--background-secondary);
    --bs-list-group-action-color:       var(--text-primary);
    --bs-list-group-action-hover-color: var(--text-primary);

    /* Tables */
    --bs-table-color:                   var(--text-primary);
    --bs-table-border-color:            var(--border-color);
    --bs-table-striped-bg:              var(--background-secondary);
    --bs-table-hover-bg:                var(--background-tertiary);

    /* Nav / Tabs */
    --bs-nav-link-color:                var(--text-primary);
    --bs-nav-tabs-border-color:         var(--border-color);
    --bs-nav-tabs-link-active-bg:       var(--surface-card);
    --bs-nav-tabs-link-active-color:    var(--text-primary);
    --bs-nav-tabs-link-active-border-color: var(--border-color);

    /* Accordion */
    --bs-accordion-bg:                  var(--surface-card);
    --bs-accordion-border-color:        var(--border-color);
    --bs-accordion-color:               var(--text-primary);
    --bs-accordion-btn-color:           var(--text-primary);
    --bs-accordion-btn-bg:              var(--surface-card);
    --bs-accordion-active-bg:           var(--background-secondary);
    --bs-accordion-active-color:        var(--text-primary);
    --bs-accordion-btn-icon:            url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333333'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon:     url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333333'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");

    /* Offcanvas */
    --bs-offcanvas-bg:                  var(--surface-card);
    --bs-offcanvas-color:               var(--text-primary);
    --bs-offcanvas-border-color:        var(--border-color);

    /* Popover */
    --bs-popover-bg:                    var(--surface-card);
    --bs-popover-border-color:          var(--border-color);
    --bs-popover-header-bg:             var(--background-secondary);
    --bs-popover-body-color:            var(--text-primary);

    /* Input group */
    --bs-input-group-addon-bg:          var(--background-secondary);
    --bs-input-group-addon-color:       var(--text-primary);
    --bs-input-group-addon-border-color: var(--border-color);
}

/* Dark mode: values that can't use var() (RGB channels for rgba() usage) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bs-body-bg-rgb:               30, 30, 30;
        --bs-border-color-translucent:  rgba(255, 255, 255, 0.15);
        --bs-accordion-btn-icon:        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e8e8e8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e8e8e8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    }
}

:root[data-theme="dark"] {
    --bs-body-bg-rgb:               30, 30, 30;
    --bs-border-color-translucent:  rgba(255, 255, 255, 0.15);
    --bs-accordion-btn-icon:        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e8e8e8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e8e8e8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* ─── Bootstrap component dark mode overrides ────────────────────────────
   The variable bridge above handles most components automatically.
   These rules cover elements where Bootstrap's CSS specificity needs
   an explicit nudge, or where inline hardcoded styles override variables.
   ───────────────────────────────────────────────────────────────────── */

/* Shared dark mode ruleset — applied via both mechanisms */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .modal-content,
    :root:not([data-theme="light"]) .modal-header,
    :root:not([data-theme="light"]) .modal-footer {
        background-color: var(--surface-card) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
    }
    :root:not([data-theme="light"]) .list-group-item {
        background-color: var(--surface-card) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
    }
    :root:not([data-theme="light"]) .nav-tabs {
        border-color: var(--border-color) !important;
    }
    :root:not([data-theme="light"]) .nav-tabs .nav-link {
        color: var(--text-secondary) !important;
    }
    :root:not([data-theme="light"]) .nav-tabs .nav-link.active {
        background-color: var(--surface-card) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
    }
    :root:not([data-theme="light"]) .accordion-item {
        background-color: var(--surface-card) !important;
        border-color: var(--border-color) !important;
    }
    :root:not([data-theme="light"]) .accordion-button {
        background-color: var(--surface-card) !important;
        color: var(--text-primary) !important;
    }
    :root:not([data-theme="light"]) .accordion-button:not(.collapsed) {
        background-color: var(--background-secondary) !important;
        color: var(--text-primary) !important;
        box-shadow: inset 0 -1px 0 var(--border-color) !important;
    }
    :root:not([data-theme="light"]) .accordion-body {
        background-color: var(--surface-card) !important;
        color: var(--text-primary) !important;
    }
    :root:not([data-theme="light"]) .input-group-text {
        background-color: var(--background-secondary) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
    }
    :root:not([data-theme="light"]) .form-label,
    :root:not([data-theme="light"]) .form-check-label,
    :root:not([data-theme="light"]) .col-form-label {
        color: var(--text-primary) !important;
    }
    :root:not([data-theme="light"]) .form-text,
    :root:not([data-theme="light"]) .text-muted,
    :root:not([data-theme="light"]) .text-body-secondary {
        color: var(--text-muted) !important;
    }
    :root:not([data-theme="light"]) pre,
    :root:not([data-theme="light"]) code {
        background-color: var(--background-tertiary) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }
    :root:not([data-theme="light"]) hr {
        border-color: var(--border-color) !important;
        opacity: 1 !important;
    }
    :root:not([data-theme="light"]) .pagination .page-link {
        background-color: var(--surface-card) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
    }
    :root:not([data-theme="light"]) .pagination .page-item.active .page-link {
        background-color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
        color: #fff !important;
    }
    :root:not([data-theme="light"]) .pagination .page-item.disabled .page-link {
        background-color: var(--background-secondary) !important;
        color: var(--text-muted) !important;
    }
    :root:not([data-theme="light"]) .offcanvas {
        background-color: var(--surface-card) !important;
        color: var(--text-primary) !important;
    }
}

:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer {
    background-color: var(--surface-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
:root[data-theme="dark"] .list-group-item {
    background-color: var(--surface-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
:root[data-theme="dark"] .nav-tabs {
    border-color: var(--border-color) !important;
}
:root[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary) !important;
}
:root[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--surface-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
:root[data-theme="dark"] .accordion-item {
    background-color: var(--surface-card) !important;
    border-color: var(--border-color) !important;
}
:root[data-theme="dark"] .accordion-button {
    background-color: var(--surface-card) !important;
    color: var(--text-primary) !important;
}
:root[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--background-secondary) !important;
    color: var(--text-primary) !important;
    box-shadow: inset 0 -1px 0 var(--border-color) !important;
}
:root[data-theme="dark"] .accordion-body {
    background-color: var(--surface-card) !important;
    color: var(--text-primary) !important;
}
:root[data-theme="dark"] .input-group-text {
    background-color: var(--background-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
:root[data-theme="dark"] .form-label,
:root[data-theme="dark"] .form-check-label,
:root[data-theme="dark"] .col-form-label {
    color: var(--text-primary) !important;
}
:root[data-theme="dark"] .form-text {
    color: var(--text-muted) !important;
}
:root[data-theme="dark"] pre,
:root[data-theme="dark"] code {
    background-color: var(--background-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
:root[data-theme="dark"] hr {
    border-color: var(--border-color) !important;
    opacity: 1 !important;
}
:root[data-theme="dark"] .pagination .page-link {
    background-color: var(--surface-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
:root[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}
:root[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: var(--background-secondary) !important;
    color: var(--text-muted) !important;
}
:root[data-theme="dark"] .offcanvas {
    background-color: var(--surface-card) !important;
    color: var(--text-primary) !important;
}