/* ================================
   Helios – Dark mode (C1)
   ================================ */

/* Dark mode adjustments for Orbit language switcher */
[data-theme="dark"] .orbit-language-switch .orbit-flag {
    background: var(--helios-border-subtle);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

[data-theme="dark"] .orbit-language-switch .dropdown-menu {
    background-color: var(--helios-border-subtle);
    border-color: rgba(255, 255, 255, .08);
}

[data-theme="dark"] .orbit-language-switch .dropdown-item {
    color: #e5e7eb;
}

[data-theme="dark"] .orbit-language-switch .dropdown-item:hover,
[data-theme="dark"] .orbit-language-switch .dropdown-item:focus {
    background-color: rgba(255, 255, 255, .06);
    color: #ffffff;
}

/* Dark mode tweaks */
[data-theme="dark"] .auth-helper {
    color: #9ca3af;
}

/* Dark mode */
[data-theme="dark"] .orbit-divider {
    color: #9ca3af;
}

[data-theme="dark"] .orbit-divider::before,
[data-theme="dark"] .orbit-divider::after {
    border-color: rgba(255, 255, 255, .12);
}

/* Dark theme tokens (used by rules below; light fallbacks live in main.css) */
html[data-theme="dark"],
html[data-theme="auto"] {
    --helios-blue: #5f8fb3;
    --helios-blue-strong: #7aa7c7;
    --helios-blue-muted: rgba(95, 143, 179, 0.6);
    --helios-bg-main: #0f1720;
    --helios-bg-panel: #141d27;
    --helios-bg-panel-soft: #101824;
    --helios-border-subtle: #1f2937;
    --bs-tertiary-bg: #141d27;
    --bs-secondary-bg: #111a24;
    --bs-body-bg: #0f1720;
    --helios-blue-deep: #223f67;
    --helios-blue-deep-soft: #1e2f4d;
    --helios-blue-deep-border: #2a4166;
}

/* Root dark: color-scheme + full-page background */
html[data-theme="dark"] {
    color-scheme: dark;
    background-color: var(--helios-bg-main);
    /* Alle surface-bg tokens (modal/card/list-group/accordion/dropdown/
       nav-tabs/form-control) staan op component-level verderop —
       Bootstrap 5.3 defineert ze lokaal in `.modal{...}` / `.card{...}`
       / etc., :root-override zou no-op zijn. */
}

html[data-theme="dark"] body {
    background-color: var(--helios-bg-main);
    color: var(--helios-text);
    min-height: 100vh;
}

html[data-theme="dark"] .helios-logo {
    content: url("/assets/img/logo_orbit_dark.webp");
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .helios-logo {
        content: url("/assets/img/logo_orbit_dark.webp");
    }
}

html[data-theme="dark"] a {
    color: var(--helios-blue);
}

html[data-theme="dark"] a:hover {
    color: var(--helios-blue-strong);
}

/* Auto dark (OS preference) */
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        color-scheme: dark;
        background-color: var(--helios-bg-main);
        /* Surface-bg tokens staan op component-level — zie dark-theme
           scope. :root-overrides zijn no-op (Bootstrap 5.3 local scope). */
    }

    html[data-theme="auto"] body {
        background-color: var(--helios-bg-main);
        color: var(--helios-text);
        min-height: 100vh;
    }

    html[data-theme="auto"] a {
        color: var(--helios-blue);
    }

    html[data-theme="auto"] a:hover {
        color: var(--helios-blue-strong);
    }
}

/* ================================
   Helios – Dark mode (C2)
   Cards / modals / dropdowns
   ================================ */

/* -------------------------------------------
   Nav tabs / pills — Dark mode
------------------------------------------- */

[data-theme="dark"] .nav-tabs,
[data-theme="dark"] .nav-pills {
    border-color: rgba(255, 255, 255, 0.08);
}

/* Tab buttons */
[data-theme="dark"] .nav-tabs .nav-link,
[data-theme="dark"] .nav-pills .nav-link {
    color: rgba(255, 255, 255, 0.75);
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Hover */
[data-theme="dark"] .nav-tabs .nav-link:hover,
[data-theme="dark"] .nav-pills .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Active tab */
[data-theme="dark"] .nav-tabs .nav-link.active,
[data-theme="dark"] .nav-pills .nav-link.active {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Disabled */
[data-theme="dark"] .nav-tabs .nav-link.disabled,
[data-theme="dark"] .nav-pills .nav-link.disabled {
    color: rgba(255, 255, 255, 0.35);
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.05);
}

/* ========== Cards ========== */
html[data-theme="dark"] .card {
    background-color: var(--helios-surface-raised);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--helios-text);
    /* Heavier shadow for contrast against dark surface */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3),
                0 1px 2px rgba(0, 0, 0, 0.2);
    /* Surface-token op component-level (zie main.css comment bij :root) */
    --bs-card-bg: var(--helios-surface-raised);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .card {
        background-color: var(--helios-surface-raised);
        border-color: rgba(255, 255, 255, 0.08);
        color: var(--helios-text);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3),
                    0 1px 2px rgba(0, 0, 0, 0.2);
        --bs-card-bg: var(--helios-surface-raised);
    }
}

/* Overige Bootstrap surface-components op component-level.
   Bootstrap 5.3 defineert deze tokens lokaal in hun rule-bodies,
   dus :root-override is no-op. Component-level werkt wel. */
html[data-theme="dark"] .accordion {
    --bs-accordion-bg: var(--helios-surface-raised);
}
html[data-theme="dark"] .list-group {
    --bs-list-group-bg: var(--helios-surface-raised);
}
html[data-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: var(--helios-surface-raised);
}
html[data-theme="dark"] .nav-tabs {
    --bs-nav-tabs-link-active-bg: var(--helios-surface-raised);
}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: var(--helios-surface-sunken);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .accordion {
        --bs-accordion-bg: var(--helios-surface-raised);
    }
    html[data-theme="auto"] .list-group {
        --bs-list-group-bg: var(--helios-surface-raised);
    }
    html[data-theme="auto"] .dropdown-menu {
        --bs-dropdown-bg: var(--helios-surface-raised);
    }
    html[data-theme="auto"] .nav-tabs {
        --bs-nav-tabs-link-active-bg: var(--helios-surface-raised);
    }
    html[data-theme="auto"] .form-control,
    html[data-theme="auto"] .form-select {
        background-color: var(--helios-surface-sunken);
    }
}

/* ============================================================
   Cycle D — Visual refresh dark-mode overrides
   ============================================================ */


/* Icon-badges: slightly higher alpha in dark mode so the soft-tint
   background isn't invisible on dark card surfaces. */
html[data-theme="dark"] .icon-badge-success {
    background-color: rgba(var(--bs-success-rgb), 0.22);
}
html[data-theme="dark"] .icon-badge-accent {
    background-color: rgba(var(--x-brand-orange-rgb), 0.22);
    color: var(--orbit-accent-light);
}
html[data-theme="dark"] .icon-badge-info {
    background-color: rgba(var(--bs-info-rgb), 0.22);
}
html[data-theme="dark"] .icon-badge-warning {
    background-color: rgba(var(--bs-warning-rgb), 0.25);
    color: #ffc97a;
}
html[data-theme="dark"] .icon-badge-danger {
    background-color: rgba(var(--bs-danger-rgb), 0.20);
}
html[data-theme="dark"] .icon-badge-secondary {
    background-color: rgba(var(--bs-secondary-rgb), 0.22);
}

/* Sidebar active-state (dark): blue-soft tint ipv orange border.
   Consistent met light-mode sidebar active-state (beide gebruiken
   blue-soft omdat sidebar-bg sowieso dark is, zelfde rendering-
   context in beide modes). */
html[data-theme="dark"] #sidebar .nav-link.active {
    background-color: rgba(var(--x-brand-blue-soft-rgb), 0.20);
    color: #ffffff;
}
html[data-theme="dark"] #sidebar .collapse .nav-link.active {
    background-color: rgba(var(--x-brand-blue-soft-rgb), 0.24);
    color: #ffffff;
}

/* Auto-mode mirrors */
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .btn-accent,
    html[data-theme="auto"] .btn-accent > * {
        color: #ffffff !important;
    }
    html[data-theme="auto"] .btn-accent {
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.12),
            0 4px 14px rgba(var(--x-brand-orange-rgb), 0.32);
    }
    html[data-theme="auto"] .btn-accent:hover,
    html[data-theme="auto"] .btn-accent:focus-visible {
        background-color: var(--orbit-accent-light);
        border-color: var(--orbit-accent-light);
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.18),
            0 6px 18px rgba(var(--x-brand-orange-rgb), 0.42);
    }
    html[data-theme="auto"] .btn-accent:active,
    html[data-theme="auto"] .btn-accent.active {
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.10),
            0 1px 4px rgba(var(--x-brand-orange-rgb), 0.22);
    }

    html[data-theme="auto"] .icon-badge-success {
        background-color: rgba(var(--bs-success-rgb), 0.22);
    }
    html[data-theme="auto"] .icon-badge-accent {
        background-color: rgba(var(--x-brand-orange-rgb), 0.22);
        color: var(--orbit-accent-light);
    }
    html[data-theme="auto"] .icon-badge-info {
        background-color: rgba(var(--bs-info-rgb), 0.22);
    }
    html[data-theme="auto"] .icon-badge-warning {
        background-color: rgba(var(--bs-warning-rgb), 0.25);
        color: #ffc97a;
    }
    html[data-theme="auto"] .icon-badge-danger {
        background-color: rgba(var(--bs-danger-rgb), 0.20);
    }
    html[data-theme="auto"] .icon-badge-secondary {
        background-color: rgba(var(--bs-secondary-rgb), 0.22);
    }
    html[data-theme="auto"] #sidebar .nav-link.active {
        background-color: rgba(var(--x-brand-blue-soft-rgb), 0.20);
        color: #ffffff;
    }
    html[data-theme="auto"] #sidebar .collapse .nav-link.active {
        background-color: rgba(var(--x-brand-blue-soft-rgb), 0.24);
        color: #ffffff;
    }
}

html[data-theme="dark"] #sidebar .helios-segmented .btn {
    background-color: transparent;
    color: rgba(230, 234, 240, 0.7);
    border-color: var(--helios-border-subtle);
}

html[data-theme="dark"] #sidebar .helios-segmented .btn.is-selected {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.28);
    font-weight: 600;
}

html[data-theme="dark"] #sidebar .helios-segmented .btn:not(.is-selected):hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

/* Card header & footer */
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
    background-color: var(--helios-surface-sunken);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--helios-text);
}

/* Stat-card tinted footer — dark-mode text overrides.
   Light-mode uses Bootstrap's *-text-emphasis vars (dark-on-tint), which
   become unreadable on the same tint over a dark card surface. Switch to
   higher-luminance variants of the same color family. The background-color
   rgba() values in main.css already render as a slightly-tinted dark shade
   on top of the dark card, so we only override color / border-top-color. */
html[data-theme="dark"] .stat-card-footer-info {
    color: rgba(var(--bs-info-rgb), 0.95);
    border-top-color: rgba(var(--bs-info-rgb), 0.30);
}
html[data-theme="dark"] .stat-card-footer-success {
    color: rgba(var(--bs-success-rgb), 0.95);
    border-top-color: rgba(var(--bs-success-rgb), 0.30);
}
html[data-theme="dark"] .stat-card-footer-warning {
    color: rgba(var(--bs-warning-rgb), 0.95);
    border-top-color: rgba(var(--bs-warning-rgb), 0.35);
}
html[data-theme="dark"] .stat-card-footer-danger {
    color: rgba(var(--bs-danger-rgb), 0.95);
    border-top-color: rgba(var(--bs-danger-rgb), 0.30);
}
html[data-theme="dark"] .stat-card-footer-dark {
    color: var(--helios-text);
    border-top-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .stat-card-footer {
    /* Neutral default: lift slightly out of dark card surface */
    background-color: rgba(255, 255, 255, 0.04);
    border-top-color: rgba(255, 255, 255, 0.08);
    color: var(--helios-muted);
}

/* Stat-card info-tip button — dark-mode hover keeps it readable */
html[data-theme="dark"] .stat-card-info-icon {
    color: var(--helios-muted);
}
html[data-theme="dark"] .stat-card-info-icon:hover,
html[data-theme="dark"] .stat-card-info-icon:focus-visible {
    color: var(--helios-text);
}

/* Card header with bg-primary – neutralize in dark mode */
html[data-theme="dark"] .card-header.bg-primary {
    background-color: var(--helios-surface-sunken) !important;
    color: var(--helios-text) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

@media (prefers-color-scheme: dark) {

    html[data-theme="auto"] .card-header,
    html[data-theme="auto"] .card-footer {
        background-color: var(--helios-surface-sunken);
        border-color: rgba(255, 255, 255, 0.08);
        color: var(--helios-text);
    }

    html[data-theme="auto"] .card-header.bg-primary {
        background-color: var(--helios-surface-sunken) !important;
        color: var(--helios-text) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    /* Stat-card footer + info-icon in auto-mode dark — mirrors the
       html[data-theme="dark"] block above. */
    html[data-theme="auto"] .stat-card-footer-info {
        color: rgba(var(--bs-info-rgb), 0.95);
        border-top-color: rgba(var(--bs-info-rgb), 0.30);
    }
    html[data-theme="auto"] .stat-card-footer-success {
        color: rgba(var(--bs-success-rgb), 0.95);
        border-top-color: rgba(var(--bs-success-rgb), 0.30);
    }
    html[data-theme="auto"] .stat-card-footer-warning {
        color: rgba(var(--bs-warning-rgb), 0.95);
        border-top-color: rgba(var(--bs-warning-rgb), 0.35);
    }
    html[data-theme="auto"] .stat-card-footer-danger {
        color: rgba(var(--bs-danger-rgb), 0.95);
        border-top-color: rgba(var(--bs-danger-rgb), 0.30);
    }
    html[data-theme="auto"] .stat-card-footer-dark {
        color: var(--helios-text);
        border-top-color: rgba(255, 255, 255, 0.12);
    }
    html[data-theme="auto"] .stat-card-footer {
        background-color: rgba(255, 255, 255, 0.04);
        border-top-color: rgba(255, 255, 255, 0.08);
        color: var(--helios-muted);
    }
    html[data-theme="auto"] .stat-card-info-icon {
        color: var(--helios-muted);
    }
    html[data-theme="auto"] .stat-card-info-icon:hover,
    html[data-theme="auto"] .stat-card-info-icon:focus-visible {
        color: var(--helios-text);
    }
}

/* Dark mode – bg-secondary-subtle */
[data-theme="dark"] .bg-secondary-subtle {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--bs-body-color);
}

/* ========== Modals ========== */
/* Modal-tokens op component-level (Bootstrap 5.3 defineert ze lokaal
   op `.modal`, :root is no-op). De class-level rule eronder op
   `.modal-content` werkt via background-color direct, token-override
   is backup + consistent pattern. */
html[data-theme="dark"] .modal {
    --bs-modal-bg: var(--helios-surface-raised);
    --bs-modal-color: var(--helios-text);
    --bs-modal-border-color: rgba(255, 255, 255, 0.12);
    --bs-modal-header-bg: var(--helios-surface-sunken);
    --bs-modal-footer-bg: var(--helios-surface-sunken);
}
html[data-theme="dark"] .modal-content {
    background-color: var(--helios-surface-raised);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--helios-text);
}

/* Mobile table cards */
html[data-theme="dark"] .orbit-table-mobile tbody tr {
    background: #1b2330;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .orbit-table-mobile tbody tr:nth-child(even) {
    background: #1f2836;
}

html[data-theme="dark"] .orbit-table-mobile tbody td[data-label]::before {
    color: rgba(230, 234, 240, 0.7);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .modal {
        --bs-modal-bg: var(--helios-surface-raised);
        --bs-modal-color: var(--helios-text);
        --bs-modal-border-color: rgba(255, 255, 255, 0.12);
        --bs-modal-header-bg: var(--helios-surface-sunken);
        --bs-modal-footer-bg: var(--helios-surface-sunken);
    }
    html[data-theme="auto"] .modal-content {
        background-color: var(--helios-surface-raised);
        border-color: rgba(255, 255, 255, 0.12);
        color: var(--helios-text);
    }

    html[data-theme="auto"] .orbit-table-mobile tbody tr {
        background: #1b2330;
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    html[data-theme="auto"] .orbit-table-mobile tbody tr:nth-child(even) {
        background: #1f2836;
    }

    html[data-theme="auto"] .orbit-table-mobile tbody td[data-label]::before {
        color: rgba(230, 234, 240, 0.7);
    }

}

/* Modal header / footer */
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    background-color: var(--helios-surface-sunken);
    border-color: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {

    html[data-theme="auto"] .modal-header,
    html[data-theme="auto"] .modal-footer {
        background-color: var(--helios-surface-sunken);
        border-color: rgba(255, 255, 255, 0.08);
    }
}

/* Modal close button visibility */
html[data-theme="dark"] .modal-header .btn-close {
    filter: invert(1) brightness(1.2);
    opacity: 0.8;
}

html[data-theme="dark"] .modal-header .btn-close:hover {
    opacity: 1;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .modal-header .btn-close {
        filter: invert(1) brightness(1.2);
        opacity: 0.8;
    }

    html[data-theme="auto"] .modal-header .btn-close:hover {
        opacity: 1;
    }
}

/* ========== Dropdowns ========== */
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--helios-surface-raised);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--helios-text);
}

html[data-theme="dark"] .dropdown-menu .dropdown-item {
    color: var(--helios-text);
}

html[data-theme="dark"] .dropdown-menu .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

html[data-theme="dark"] .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .dropdown-menu {
        background-color: var(--helios-surface-raised);
        border-color: rgba(255, 255, 255, 0.12);
        color: var(--helios-text);
    }

    html[data-theme="auto"] .dropdown-menu .dropdown-item {
        color: var(--helios-text);
    }

    html[data-theme="auto"] .dropdown-menu .dropdown-item:hover {
        background-color: rgba(255, 255, 255, 0.06);
        color: #ffffff;
    }

    html[data-theme="auto"] .dropdown-divider {
        border-color: rgba(255, 255, 255, 0.08);
    }
}

/* ================================
   Helios – Dark mode (C3)
   Sidebar & navigation
   ================================ */

/* Subtle Helios blue accents – dark mode */

html[data-theme="dark"] #sidebar .nav-link.active,
html[data-theme="dark"] .nav.nav-pills .nav-link.active {
    background-color: var(--helios-blue-deep-soft);
}

html[data-theme="dark"] .card.is-primary,
html[data-theme="dark"] .card.border-primary {
    border-color: var(--helios-blue-deep-border) !important;
}

html[data-theme="dark"] .badge.bg-primary {
    background-color: var(--helios-blue-deep) !important;
    color: var(--helios-text) !important;
}

html[data-theme="dark"] .progress-bar.bg-info {
    background-color: var(--helios-info-accent) !important;
}

@media (prefers-color-scheme: dark) {

    html[data-theme="auto"] #sidebar .nav-link.active,
    html[data-theme="auto"] .nav.nav-pills .nav-link.active {
        background-color: var(--helios-blue-deep-soft);
    }

    html[data-theme="auto"] .card.is-primary,
    html[data-theme="auto"] .card.border-primary {
        border-color: var(--helios-blue-deep-border) !important;
    }

    html[data-theme="auto"] .badge.bg-primary {
        background-color: var(--helios-blue-deep) !important;
        color: var(--helios-text) !important;
    }
}

/* Sidebar section titles */
html[data-theme="dark"] #sidebar .nav-section-title {
    color: rgba(230, 234, 240, 0.55);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] #sidebar .nav-section-title {
        color: rgba(230, 234, 240, 0.55);
    }
}

/* Sidebar links */
html[data-theme="dark"] #sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] #sidebar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.10);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] #sidebar .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }

    html[data-theme="auto"] #sidebar .nav-link.active {
        background-color: rgba(255, 255, 255, 0.10);
    }
}

html[data-theme="dark"] .btn-primary {
    background-color: var(--helios-blue-strong);
    border-color: var(--helios-blue);
    color: var(--helios-bg-main);
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-primary.text-white {
    color: var(--helios-bg-main) !important;
}

html[data-theme="dark"] .btn-primary:hover {
    background-color: #8fb6d3;
    border-color: var(--helios-blue-strong);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .btn-primary.text-white {
        color: var(--helios-bg-main) !important;
    }
}

html[data-theme="dark"] .btn-link {
    color: var(--helios-blue);
}

html[data-theme="dark"] .btn-link:hover {
    color: var(--helios-blue-strong);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .btn-primary {
        background-color: var(--helios-blue-strong);
        border-color: var(--helios-blue);
        color: var(--helios-bg-main);
    }

    html[data-theme="auto"] .btn-primary,
    html[data-theme="auto"] .btn-primary.text-white {
        color: var(--helios-bg-main) !important;
    }

    html[data-theme="auto"] .btn-primary:hover {
        background-color: #8fb6d3;
        border-color: var(--helios-blue-strong);
    }

    html[data-theme="auto"] .btn-link {
        color: var(--helios-blue);
    }

    html[data-theme="auto"] .btn-link:hover {
        color: var(--helios-blue-strong);
    }
}

/* Ensure text inside transparent buttons is readable in dark mode */
html[data-theme="dark"] .btn.bg-transparent,
html[data-theme="dark"] .btn.bg-transparent span,
html[data-theme="dark"] .btn.bg-transparent .fw-semibold {
    color: rgba(230, 234, 240, 0.85) !important;
}

@media (prefers-color-scheme: dark) {

    html[data-theme="auto"] .btn.bg-transparent,
    html[data-theme="auto"] .btn.bg-transparent span,
    html[data-theme="auto"] .btn.bg-transparent .fw-semibold {
        color: rgba(230, 234, 240, 0.85) !important;
    }
}

/* Sidebar dividers */
html[data-theme="dark"] #sidebar hr,
html[data-theme="dark"] #sidebar .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.12);
}

@media (prefers-color-scheme: dark) {

    html[data-theme="auto"] #sidebar hr,
    html[data-theme="auto"] #sidebar .dropdown-divider {
        border-color: rgba(255, 255, 255, 0.12);
    }
}

/* ================================
   Helios – Dark mode (C4)
   Bootstrap utilities normalization
   ================================ */

/* List groups – dark mode */
html[data-theme="dark"] .list-group-item {
    background-color: var(--helios-surface-raised);
    color: rgba(230, 234, 240, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
    background-color: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .list-group-item {
        background-color: var(--helios-surface-raised);
        color: rgba(230, 234, 240, 0.85);
        border-color: rgba(255, 255, 255, 0.08);
    }

    html[data-theme="auto"] .list-group-item-action:hover,
    html[data-theme="auto"] .list-group-item-action:focus {
        background-color: rgba(255, 255, 255, 0.06);
        color: #ffffff;
    }
}

/* ---------- Text utilities ---------- */

html[data-theme="dark"] .text-secondary {
    color: rgba(230, 234, 240, 0.6) !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .text-secondary {
        color: rgba(230, 234, 240, 0.6) !important;
    }
}

html[data-theme="dark"] .text-dark {
    color: rgba(230, 234, 240, 0.85) !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .text-dark {
        color: rgba(230, 234, 240, 0.85) !important;
    }
}

html[data-theme="dark"] .text-dark.text-muted {
    color: rgba(230, 234, 240, 0.6) !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .text-dark.text-muted {
        color: rgba(230, 234, 240, 0.6) !important;
    }
}

/* ---------- Background utilities ---------- */

/* Slightly darker secondary background */
html[data-theme="dark"] .bg-secondary {
    background-color: var(--helios-border-subtle) !important;
    color: #e5e7eb;
}

html[data-theme="dark"] .bg-dark {
    background-color: #020617 !important;
    color: #f8fafc !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .bg-secondary {
        background-color: var(--helios-border-subtle) !important;
        color: #e5e7eb;
    }

    html[data-theme="auto"] .bg-dark {
        background-color: #020617 !important;
        color: #f8fafc !important;
    }
}

/* Border utilities – darken slightly for dark mode */
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

@media (prefers-color-scheme: dark) {

    html[data-theme="auto"] .border,
    html[data-theme="auto"] .border-top,
    html[data-theme="auto"] .border-bottom,
    html[data-theme="auto"] .border-start,
    html[data-theme="auto"] .border-end {
        border-color: rgba(255, 255, 255, 0.06) !important;
    }
}

/* Device list divider – dark mode */
html[data-theme="dark"] .device-list-item {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .device-list-item {
        border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    }
}

/* ---------- Alerts (generic) ---------- */
html[data-theme="dark"] .alert {
    background-color: var(--helios-surface-raised);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--helios-text);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .alert {
        background-color: var(--helios-surface-raised);
        border-color: rgba(255, 255, 255, 0.12);
        color: var(--helios-text);
    }
}

/* ================================
   Helios – Dark mode
   Toasts text & close icon
   ================================ */

/* Toast container */
html[data-theme="dark"] .toast {
    color: var(--helios-bg-main);
    /* dark text for contrast on colored toasts */
}

/* Toast body text */
html[data-theme="dark"] .toast-body {
    color: var(--helios-bg-main);
}

/* Toast close (X) button */
html[data-theme="dark"] .toast .btn-close {
    filter: none;
    opacity: 0.8;
}

html[data-theme="dark"] .toast .btn-close::before,
html[data-theme="dark"] .toast .btn-close::after {
    color: var(--helios-bg-main);
}

/* Ensure consistency in auto dark mode */
@media (prefers-color-scheme: dark) {

    html[data-theme="auto"] .toast,
    html[data-theme="auto"] .toast-body {
        color: var(--helios-bg-main);
    }

    html[data-theme="auto"] .toast .btn-close {
        filter: none;
        opacity: 0.8;
    }
}

/* ================================
   Helios – Dark mode (C5)
   Forms, DataTables, breadcrumbs
   ================================ */

/* Base form controls */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea {
    background-color: var(--helios-bg-main);
    color: var(--helios-text);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Plaintext form controls (override light defaults) */
html[data-theme="dark"] .form-control-plaintext {
    background-color: var(--helios-surface-sunken);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    color: rgba(230, 234, 240, 0.85);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .form-control-plaintext {
        background-color: var(--helios-surface-sunken);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 10px;
        color: rgba(230, 234, 240, 0.85);
    }
}

html[data-theme="dark"] .form-control::placeholder {
    color: rgba(230, 234, 240, 0.45);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: var(--helios-bg-main);
    color: #ffffff;
    border-color: var(--helios-info-accent);
    box-shadow: none;
}

/* Disabled / readonly */
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-select:disabled {
    background-color: var(--helios-surface-sunken);
    color: rgba(230, 234, 240, 0.5);
}

/* Improve disabled field visibility & UX */
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-select:disabled,
html[data-theme="dark"] textarea:disabled {
    opacity: 1;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.12);
}

@media (prefers-color-scheme: dark) {

    html[data-theme="auto"] .form-control:disabled,
    html[data-theme="auto"] .form-control[readonly],
    html[data-theme="auto"] .form-select:disabled,
    html[data-theme="auto"] textarea:disabled {
        opacity: 1;
        cursor: not-allowed;
        border-color: rgba(255, 255, 255, 0.12);
    }
}

/* Auto */
@media (prefers-color-scheme: dark) {

    html[data-theme="auto"] .form-control,
    html[data-theme="auto"] .form-select,
    html[data-theme="auto"] textarea {
        background-color: var(--helios-bg-main);
        color: var(--helios-text);
        border-color: rgba(255, 255, 255, 0.18);
    }

    html[data-theme="auto"] .form-control::placeholder {
        color: rgba(230, 234, 240, 0.45);
    }

    html[data-theme="auto"] .form-control:focus,
    html[data-theme="auto"] .form-select:focus {
        background-color: var(--helios-bg-main);
        color: #ffffff;
        border-color: var(--helios-info-accent);
        box-shadow: none;
    }
}

/* Input group addons */
html[data-theme="dark"] .input-group-text {
    background-color: var(--helios-surface-sunken);
    color: rgba(230, 234, 240, 0.75);
    border-color: rgba(255, 255, 255, 0.18);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .input-group-text {
        background-color: var(--helios-surface-sunken);
        color: rgba(230, 234, 240, 0.75);
        border-color: rgba(255, 255, 255, 0.18);
    }
}

/* Breadcrumbs */
html[data-theme="dark"] .breadcrumb {
    background-color: transparent;
}

html[data-theme="dark"] .breadcrumb-item,
html[data-theme="dark"] .breadcrumb-item a {
    color: rgba(230, 234, 240, 0.7);
}

html[data-theme="dark"] .breadcrumb-item.active {
    color: #ffffff;
}

/* Divider */
html[data-theme="dark"] .breadcrumb-item+.breadcrumb-item::before {
    color: rgba(230, 234, 240, 0.35);
}

@media (prefers-color-scheme: dark) {

    html[data-theme="auto"] .breadcrumb-item,
    html[data-theme="auto"] .breadcrumb-item a {
        color: rgba(230, 234, 240, 0.7);
    }

    html[data-theme="auto"] .breadcrumb-item.active {
        color: #ffffff;
    }

    html[data-theme="auto"] .breadcrumb-item+.breadcrumb-item::before {
        color: rgba(230, 234, 240, 0.35);
    }
}

/* Text utilities */
/* text-white – soften for dark mode */
html[data-theme="dark"] .text-white {
    color: rgba(230, 234, 240, 0.85) !important;
}

html[data-theme="dark"] .text-light {
    color: rgba(230, 234, 240, 0.85) !important;
}

html[data-theme="dark"] .text-muted {
    color: rgba(230, 234, 240, 0.7) !important;
}

html[data-theme="dark"] .text-success {
    color: #5cb85c !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .text-white {
        color: rgba(230, 234, 240, 0.85) !important;
    }

    html[data-theme="auto"] .text-light {
        color: rgba(230, 234, 240, 0.85) !important;
    }

    html[data-theme="auto"] .text-muted {
        color: rgba(230, 234, 240, 0.7) !important;
    }

    html[data-theme="auto"] .text-success {
        color: #5cb85c !important;
    }
}

/* Form helper text */
html[data-theme="dark"] .form-text {
    color: rgba(230, 234, 240, 0.7) !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .form-text {
        color: rgba(230, 234, 240, 0.7) !important;
    }
}

/* Background utilities */
html[data-theme="dark"] .bg-white {
    background-color: var(--helios-bg-main) !important;
}

html[data-theme="dark"] .bg-light {
    background-color: var(--helios-surface-sunken) !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .bg-white {
        background-color: var(--helios-bg-main) !important;
    }

    html[data-theme="auto"] .bg-light {
        background-color: var(--helios-surface-sunken) !important;
    }
}

/* Tables base */
html[data-theme="dark"] table {
    color: rgba(230, 234, 240, 0.85);
}

/* Table head */

/* Table body */

/* Striped rows */

/* Bordered */

/* Shadow */
html[data-theme="dark"] .shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.6) !important;
}

/* Auto mode */

html[data-theme="dark"] img.invert {
    filter: invert(1);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] img.invert {
        filter: invert(1);
    }
}

/* Icon inversion helper */
html[data-theme="dark"] .invert-dark {
    filter: invert(1) brightness(1.1);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .invert-dark {
        filter: invert(1) brightness(1.1);
    }
}

/* =====================================
   Helios segmented: never auto invert
   ===================================== */

html[data-theme="dark"] .helios-segmented img {
    filter: none !important;
}

/* Explicit opt-in still allowed */
html[data-theme="dark"] .helios-segmented img.invert-dark {
    filter: invert(1) brightness(1.1) !important;
}

/* Auto mode */
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .helios-segmented img {
        filter: none !important;
    }

    html[data-theme="auto"] .helios-segmented img.invert-dark {
        filter: invert(1) brightness(1.1) !important;
    }
}

[data-theme="dark"] .backend-mode-indicator {
    background-color: rgba(255, 255, 255, 0.02);
    background-image: linear-gradient(45deg,
            rgba(255, 255, 255, 0.035) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.035) 50%,
            rgba(255, 255, 255, 0.035) 75%,
            transparent 75%,
            transparent);
}

/* Common icon locations – default invert */
html[data-theme="dark"] .btn img,
html[data-theme="dark"] .dropdown-item img,
html[data-theme="dark"] table img {
    filter: invert(1) brightness(1.05);
}

/* Do NOT invert icons in user manage dropdown (icons are already light) */
html[data-theme="dark"] #userManage img {
    filter: none !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] #userManage img {
        filter: none !important;
    }
}

/* Do NOT invert icons inside btn-white (already correct contrast) */
html[data-theme="dark"] .btn-white img {
    filter: none !important;
}

/* Allow explicit opt-in inversion inside btn-white */
html[data-theme="dark"] .btn-white .invert-dark {
    filter: invert(1) brightness(1.1) !important;
}

@media (prefers-color-scheme: dark) {

    html[data-theme="auto"] .btn img,
    html[data-theme="auto"] .dropdown-item img,
    html[data-theme="auto"] table img {
        filter: invert(1) brightness(1.05);
    }

    /* Do NOT invert icons inside btn-white (already correct contrast) */
    html[data-theme="auto"] .btn-white img {
        filter: none !important;
    }

    /* Allow explicit opt-in inversion inside btn-white */
    html[data-theme="auto"] .btn-white .invert-dark {
        filter: invert(1) brightness(1.1) !important;
    }
}

/* ================================
   Helios – Dark mode (C6.1)
   btn-light normalization
   ================================ */

/* btn-light */
html[data-theme="dark"] .btn-light {
    background-color: var(--helios-surface-raised);
    color: var(--helios-text);
    border-color: rgba(255, 255, 255, 0.18);
}

html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-light:focus {
    background-color: var(--helios-surface-hover);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: none;
}

/* Disabled */
html[data-theme="dark"] .btn-light:disabled,
html[data-theme="dark"] .btn-light.disabled {
    background-color: var(--helios-surface-sunken);
    color: rgba(230, 234, 240, 0.5);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Auto mode */
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .btn-light {
        background-color: var(--helios-surface-raised);
        color: var(--helios-text);
        border-color: rgba(255, 255, 255, 0.18);
    }

    html[data-theme="auto"] .btn-light:hover,
    html[data-theme="auto"] .btn-light:focus {
        background-color: var(--helios-surface-hover);
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.28);
        box-shadow: none;
    }

    html[data-theme="auto"] .btn-light:disabled,
    html[data-theme="auto"] .btn-light.disabled {
        background-color: var(--helios-surface-sunken);
        color: rgba(230, 234, 240, 0.5);
        border-color: rgba(255, 255, 255, 0.12);
    }
}

/* ================================
   Helios – Dark mode
   btn-white text normalization
   ================================ */

html[data-theme="dark"] .btn-white {
    background-color: var(--helios-surface-raised);
    color: rgba(230, 234, 240, 0.85);
    border-color: rgba(255, 255, 255, 0.18);
}

html[data-theme="dark"] .btn-white:hover,
html[data-theme="dark"] .btn-white:focus {
    background-color: var(--helios-surface-hover);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: none;
}

html[data-theme="dark"] .btn-white:disabled,
html[data-theme="dark"] .btn-white.disabled {
    background-color: var(--helios-surface-sunken);
    color: rgba(230, 234, 240, 0.5);
    border-color: rgba(255, 255, 255, 0.12);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .btn-white {
        background-color: var(--helios-surface-raised);
        color: rgba(230, 234, 240, 0.85);
        border-color: rgba(255, 255, 255, 0.18);
    }

    html[data-theme="auto"] .btn-white:hover,
    html[data-theme="auto"] .btn-white:focus {
        background-color: var(--helios-surface-hover);
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.28);
        box-shadow: none;
    }

    html[data-theme="auto"] .btn-white:disabled,
    html[data-theme="auto"] .btn-white.disabled {
        background-color: var(--helios-surface-sunken);
        color: rgba(230, 234, 240, 0.5);
        border-color: rgba(255, 255, 255, 0.12);
    }
}

/* ================================
   Helios – Dark mode (C6.2)
   Progress bars
   ================================ */

/* Progress background (track) */
html[data-theme="dark"] .progress {
    background-color: #000000;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .progress {
        background-color: #000000;
    }
}

/* Default progress bar */
html[data-theme="dark"] .progress-bar {
    background-color: var(--helios-info-accent);
    color: var(--helios-bg-main);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .progress-bar {
        background-color: var(--helios-info-accent);
        color: var(--helios-bg-main);
    }
}

/* Contextual progress variants */
html[data-theme="dark"] .progress-bar.bg-success {
    background-color: #7fcf7a !important;
}

html[data-theme="dark"] .progress-bar.bg-warning {
    background-color: var(--bs-warning) !important;
    color: var(--helios-bg-main);
}

html[data-theme="dark"] .progress-bar.bg-danger {
    background-color: #e07a7a !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .progress-bar.bg-success {
        background-color: #7fcf7a !important;
    }

    html[data-theme="auto"] .progress-bar.bg-info {
        background-color: var(--helios-info-accent) !important;
    }

    html[data-theme="auto"] .progress-bar.bg-warning {
        background-color: var(--bs-warning) !important;
        color: var(--helios-bg-main);
    }

    html[data-theme="auto"] .progress-bar.bg-danger {
        background-color: #e07a7a !important;
    }
}

/* Pagination – dark mode */
html[data-theme="dark"] .pagination .page-link {
    background-color: var(--helios-surface-raised);
    color: rgba(230, 234, 240, 0.85);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .pagination .page-link:hover {
    background-color: var(--helios-surface-hover);
    color: #ffffff;
}

html[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--helios-blue-deep);
    border-color: var(--helios-blue-deep);
    color: #ffffff;
}

html[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: var(--helios-surface-sunken);
    color: rgba(230, 234, 240, 0.4);
    border-color: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {

    /* Pagination – auto dark mode */
    html[data-theme="auto"] .pagination .page-link {
        background-color: var(--helios-surface-raised);
        color: rgba(230, 234, 240, 0.85);
        border-color: rgba(255, 255, 255, 0.12);
    }

    html[data-theme="auto"] .pagination .page-link:hover {
        background-color: var(--helios-surface-hover);
        color: #ffffff;
    }

    html[data-theme="auto"] .pagination .page-item.active .page-link {
        background-color: var(--helios-blue-deep);
        border-color: var(--helios-blue-deep);
        color: #ffffff;
    }

    html[data-theme="auto"] .pagination .page-item.disabled .page-link {
        background-color: var(--helios-surface-sunken);
        color: rgba(230, 234, 240, 0.4);
        border-color: rgba(255, 255, 255, 0.08);
    }
}

/* ================================
   Helios – Dark mode (C7)
   Neutralize legacy Helios blues
   ================================ */

/* Nav pills (desktop + mobile) */
html[data-theme="dark"] .nav.nav-pills .nav-link {
    color: rgba(230, 234, 240, 0.75);
    background-color: transparent;
}

html[data-theme="dark"] .nav.nav-pills .nav-link.active {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

html[data-theme="dark"] .nav.nav-pills .nav-link .badge {
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: rgba(230, 234, 240, 0.85) !important;
}

html[data-theme="dark"] .nav.nav-pills .nav-link.active .badge {
    background-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .nav.nav-pills .nav-link {
        color: rgba(230, 234, 240, 0.75);
        background-color: transparent;
    }

    html[data-theme="auto"] .nav.nav-pills .nav-link.active {
        background-color: rgba(255, 255, 255, 0.12);
        color: #ffffff;
    }

    html[data-theme="auto"] .nav.nav-pills .nav-link .badge {
        background-color: rgba(255, 255, 255, 0.10) !important;
        color: rgba(230, 234, 240, 0.85) !important;
    }

    html[data-theme="auto"] .nav.nav-pills .nav-link.active .badge {
        background-color: rgba(255, 255, 255, 0.22) !important;
        color: #ffffff !important;
    }
}

/* Helios segmented controls */
html[data-theme="dark"] .helios-segmented .btn {
    color: rgba(230, 234, 240, 0.75);
    background-color: transparent;
    border-color: var(--helios-border-subtle);
}

/* Segmented: primary action button (e.g. Manage) */
html[data-theme="dark"] .helios-segmented .btn.btn-primary {
    background-color: var(--helios-surface-hover);
    border-color: var(--helios-blue);
    color: #ffffff !important;
}

html[data-theme="dark"] .helios-segmented .btn.btn-primary:hover {
    background-color: #223043;
    border-color: var(--helios-blue-strong);
}

html[data-theme="dark"] .helios-segmented .btn.is-selected,
html[data-theme="dark"] .helios-segmented label.btn.is-selected {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
    color: #ffffff !important;
}

html[data-theme="dark"] .helios-segmented {
    border-top: 1px solid var(--helios-border-subtle);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .helios-segmented {
        border-top: 1px solid var(--helios-border-subtle);
    }
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .helios-segmented .btn {
        color: rgba(230, 234, 240, 0.75);
        background-color: transparent;
        border-color: var(--helios-border-subtle);
    }
}

/* Sidebar mobile tabs & dropdown tabs */
html[data-theme="dark"] #sidebar .nav-link,
html[data-theme="dark"] #sidebar .dropdown-menu:not(#userManageMenu) .dropdown-item {
    background-color: transparent;
    color: rgba(230, 234, 240, 0.85) !important;
}

html[data-theme="dark"] #sidebar .nav-link.active,
html[data-theme="dark"] #sidebar .dropdown-menu .dropdown-item.active {
    background-color: rgba(var(--x-brand-blue-soft-rgb), 0.20) !important;
    color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {

    html[data-theme="auto"] #sidebar .nav-link,
    html[data-theme="auto"] #sidebar .dropdown-menu:not(#userManageMenu) .dropdown-item {
        background-color: transparent;
        color: rgba(230, 234, 240, 0.85) !important;
    }

    html[data-theme="auto"] #sidebar .nav-link.active,
    html[data-theme="auto"] #sidebar .dropdown-menu .dropdown-item.active {
        background-color: rgba(var(--x-brand-blue-soft-rgb), 0.20) !important;
        color: #ffffff !important;
    }
}

/* Kill remaining legacy bg-primary bleed */
html[data-theme="dark"] .bg-primary {
    background-color: var(--helios-blue) !important;
    color: var(--helios-bg-main);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .bg-primary {
        background-color: var(--helios-blue) !important;
        color: var(--helios-bg-main);
    }
}

/* ================================
   Helios – Dark mode (C8)
   Sidebar deep neutral
   ================================ */

/* Sidebar links */
html[data-theme="dark"] #sidebar .nav-link {
    color: rgba(230, 234, 240, 0.85);
}

html[data-theme="dark"] #sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

html[data-theme="dark"] #sidebar .nav-link.active {
    background-color: rgba(var(--x-brand-blue-soft-rgb), 0.20);
    color: #ffffff;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] #sidebar .nav-link {
        color: rgba(230, 234, 240, 0.85);
    }

    html[data-theme="auto"] #sidebar .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.06);
        color: #ffffff;
    }

    html[data-theme="auto"] #sidebar .nav-link.active {
        background-color: rgba(var(--x-brand-blue-soft-rgb), 0.20);
        color: #ffffff;
    }
}

/* Sidebar dropdown menus – neutralize blue.
   `:not(#userManageMenu)` sluit user-menu uit (eigen theme-invariant
   dark-blue via main.css). */
html[data-theme="dark"] #sidebar .dropdown-menu:not(#userManageMenu),
html[data-theme="dark"] .dropdown-menu-primary {
    background-color: var(--helios-surface-raised) !important;
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] #sidebar .dropdown-menu:not(#userManageMenu) .dropdown-item {
    color: rgba(230, 234, 240, 0.9) !important;
}

/* User-menu container in dark: neutraal-grijs (HSL 219°/14%/19%)
   i.p.v. de light-mode blauw (#3d5470). Sidebar in dark is bijna-
   zwart (HSL 220°/49%/8%), dus user-menu +11 L-punten voor
   container-pop + 71% saturation-reduction om "ingeplakte blauw-
   vlek" gevoel te voorkomen. Subtiele blauw-undertone houdt hint
   naar brand-kleur. */
html[data-theme="dark"] #userManageMenu {
    background-color: #2a2f38 !important;
    border-color: rgba(255, 255, 255, 0.10);
}

/* User-menu items in dark: active (current route) krijgt zelfde
   blue-soft tint als sidebar-active voor consistent navigation-cue. */
html[data-theme="dark"] #userManageMenu .dropdown-item.active,
html[data-theme="dark"] #userManageMenu .dropdown-item[aria-current="page"] {
    background-color: rgba(var(--x-brand-blue-soft-rgb), 0.20) !important;
    color: #ffffff !important;
    font-weight: 600;
}
html[data-theme="dark"] #userManageMenu .dropdown-divider {
    border-top-color: rgba(255, 255, 255, 0.12);
}

@media (prefers-color-scheme: dark) {

    html[data-theme="auto"] #sidebar .dropdown-menu:not(#userManageMenu),
    html[data-theme="auto"] .dropdown-menu-primary {
        background-color: var(--helios-surface-raised) !important;
        border-color: rgba(255, 255, 255, 0.12);
    }

    html[data-theme="auto"] #sidebar .dropdown-menu:not(#userManageMenu) .dropdown-item {
        color: rgba(230, 234, 240, 0.9) !important;
    }

    html[data-theme="auto"] #userManageMenu {
        background-color: #2a2f38 !important;
        border-color: rgba(255, 255, 255, 0.10);
    }

    html[data-theme="auto"] #userManageMenu .dropdown-item.active,
    html[data-theme="auto"] #userManageMenu .dropdown-item[aria-current="page"] {
        background-color: rgba(var(--x-brand-blue-soft-rgb), 0.20) !important;
        color: #ffffff !important;
        font-weight: 600;
    }
    html[data-theme="auto"] #userManageMenu .dropdown-divider {
        border-top-color: rgba(255, 255, 255, 0.12);
    }
}

/* ---------- Tables: force text color in all rows ---------- */

/* ---------- Tables: tooltip text on colored cells ---------- */
html[data-theme="dark"] td.bg-success .text-tooltip,
html[data-theme="dark"] td.bg-warning .text-tooltip,
html[data-theme="dark"] td.bg-info .text-tooltip,
html[data-theme="dark"] td.bg-danger .text-tooltip {
    color: var(--helios-bg-main) !important;
}

@media (prefers-color-scheme: dark) {

    html[data-theme="auto"] td.bg-success .text-tooltip,
    html[data-theme="auto"] td.bg-warning .text-tooltip,
    html[data-theme="auto"] td.bg-info .text-tooltip,
    html[data-theme="auto"] td.bg-danger .text-tooltip {
        color: var(--helios-bg-main) !important;
    }
}

/* ================================
   Tables – border normalization (dark)
   ================================ */

/* ================================
   Tables – subtle dark borders
   ================================ */

/* Cell borders */

/* Header border a bit stronger */

/* Table outer border */

/* Rounded outer table container */

/* Ensure outer border when wrapped in .table-responsive */

/* Prevent Bootstrap background bleed */

/* ================================
   Auto mode
   ================================ */

/* ================================
   Helios – Dark mode (C10)
   Legacy layout background overrides
   ================================ */

/* Sidebar container — canonical merge of C3/C8/C10 rules */
html[data-theme="dark"] #sidebar {
    background-color: var(--helios-surface-deep) !important;
    background-image: none !important;
    border-right-color: rgba(255, 255, 255, 0.08) !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] #sidebar {
        background-color: var(--helios-surface-deep) !important;
        background-image: none !important;
        border-right-color: rgba(255, 255, 255, 0.08) !important;
    }
}

/* ================================
   Helios – Dark mode
   Mobile navigation
   ================================ */

/* Mobile hamburger in dark-mode: gradient bg blijft oranje (brand),
   icon-color SWAP naar zwart voor leesbaar contrast op lichte oranje.
   In light-mode is icon wit; in dark-mode wit-op-oranje oogt "verblind"
   tegen de omliggende dark sidebar/page-bg. Zwart icon geeft meer
   rust + duidelijker contrast. */
html[data-theme="dark"] .mobile-nav {
    color: #000000;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .mobile-nav {
        color: #000000;
    }
}

/* Mobile header */
html[data-theme="dark"] #mobileHeader {
    background-color: var(--helios-bg-main) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] #mobileHeader {
        background-color: var(--helios-bg-main) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
}

/* ================================
   Helios – Dark mode (C11)
   Override inline sidebar backgrounds
   ================================ */

/* Desktop sidebar header block */
html[data-theme="dark"] #sidebar>.border-bottom {
    background-color: var(--helios-surface-deep) !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] #sidebar>.border-bottom {
        background-color: var(--helios-surface-deep) !important;
    }
}

/* Sidebar scroll body (was inline #223f67) */
html[data-theme="dark"] #sidebar .offcanvas-body {
    background-color: var(--helios-surface-deep) !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] #sidebar .offcanvas-body {
        background-color: var(--helios-surface-deep) !important;
    }
}

/* User dropdown menu (was inline #1d3557) */
/* `:not(#userManageMenu)` sluit user-menu uit — dat heeft eigen
   theme-invariant dark-blue bg via main.css #userManageMenu rule. */
html[data-theme="dark"] #sidebar .dropdown-menu:not(#userManageMenu) {
    background-color: var(--helios-surface-raised) !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] #sidebar .dropdown-menu:not(#userManageMenu) {
        background-color: var(--helios-surface-raised) !important;
    }
}

/* Safety net: any remaining inline blue inside sidebar */
html[data-theme="dark"] #sidebar [style*="#223f67"],
html[data-theme="dark"] #sidebar [style*="#264773"],
html[data-theme="dark"] #sidebar [style*="#1d3557"] {
    background-color: var(--helios-surface-deep) !important;
}

@media (prefers-color-scheme: dark) {

    html[data-theme="auto"] #sidebar [style*="#223f67"],
    html[data-theme="auto"] #sidebar [style*="#264773"],
    html[data-theme="auto"] #sidebar [style*="#1d3557"] {
        background-color: var(--helios-surface-deep) !important;
    }
}

/* ================================
   Helios – Dark mode (C12)
   Kill remaining sidebar blues (logo, headers, dropdown items)
   ================================ */

/* Bootstrap helper classes leaking blue */
html[data-theme="dark"] .text-bg-dark {
    background-color: var(--helios-surface-deep) !important;
    color: rgba(230, 234, 240, 0.95) !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .text-bg-dark {
        background-color: var(--helios-surface-deep) !important;
        color: rgba(230, 234, 240, 0.95) !important;
    }
}

/* Offcanvas header (mobile logo area) */
html[data-theme="dark"] #sidebar .offcanvas-header {
    background-color: var(--helios-surface-deep) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] #sidebar .offcanvas-header {
        background-color: var(--helios-surface-deep) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
}

/* Nav section toggle rows (Devices / Users / etc.) */
html[data-theme="dark"] #sidebar .nav-section-toggle {
    background-color: transparent !important;
    color: rgba(230, 234, 240, 0.7) !important;
}

html[data-theme="dark"] #sidebar .nav-section-toggle:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] #sidebar .nav-section-toggle {
        background-color: transparent !important;
        color: rgba(230, 234, 240, 0.7) !important;
    }

    html[data-theme="auto"] #sidebar .nav-section-toggle:hover {
        background-color: rgba(255, 255, 255, 0.06) !important;
        color: #ffffff !important;
    }
}

/* Dropdown items inside sidebar (NIET user-menu — die heeft eigen
   theme-invariant styling via main.css #userManageMenu rules). */
html[data-theme="dark"] #sidebar .dropdown-menu:not(#userManageMenu) .dropdown-item {
    background-color: transparent !important;
    color: rgba(230, 234, 240, 0.9) !important;
}

html[data-theme="dark"] #sidebar .dropdown-menu:not(#userManageMenu) .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] #sidebar .dropdown-menu:not(#userManageMenu) .dropdown-item {
        background-color: transparent !important;
        color: rgba(230, 234, 240, 0.9) !important;
    }

    html[data-theme="auto"] #sidebar .dropdown-menu:not(#userManageMenu) .dropdown-item:hover {
        background-color: rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
    }
}

/* Desktop logo header strip (inline background leftovers) */
html[data-theme="dark"] #sidebar>div[style*="background"] {
    background-color: var(--helios-surface-deep) !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] #sidebar>div[style*="background"] {
        background-color: var(--helios-surface-deep) !important;
    }
}

/* Dark badge text for success, danger, warning, and info badges */
html[data-theme="dark"] .badge.bg-success,
html[data-theme="dark"] .badge.bg-danger,
html[data-theme="dark"] .badge.bg-warning,
html[data-theme="dark"] .badge.bg-info {
    color: #0f172a !important;
    font-weight: 600;
}

@media (prefers-color-scheme: dark) {

    html[data-theme="auto"] .badge.bg-success,
    html[data-theme="auto"] .badge.bg-danger,
    html[data-theme="auto"] .badge.bg-warning,
    html[data-theme="auto"] .badge.bg-info {
        color: #0f172a !important;
        font-weight: 600;
    }
}

/* ================================
   Contextual content blocks (remarks, postmortem, notes)
   Dark mode normalization
   ================================ */

/* Warning blocks */
html[data-theme="dark"] .bg-warning.bg-opacity-10 {
    background-color: rgba(240, 195, 109, 0.12) !important;
}

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

/* Info blocks */
html[data-theme="dark"] .bg-info.bg-opacity-10 {
    background-color: rgba(138, 178, 210, 0.12) !important;
}

html[data-theme="dark"] .text-info-emphasis {
    color: var(--helios-info-accent) !important;
}

/* Auto mode */
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .bg-warning.bg-opacity-10 {
        background-color: rgba(240, 195, 109, 0.12) !important;
    }

    html[data-theme="auto"] .text-warning-emphasis {
        color: var(--bs-warning) !important;
    }

    html[data-theme="auto"] .bg-info.bg-opacity-10 {
        background-color: rgba(138, 178, 210, 0.12) !important;
    }

    html[data-theme="auto"] .text-info-emphasis {
        color: var(--helios-info-accent) !important;
    }
}

/* Tinted overrides for the remaining bg-X.bg-opacity-10 utilities so soft
   stat-card panels remain tinted instead of becoming solid colours under
   the broader `html[data-theme="dark"] .bg-X { ... !important }` rules. */
html[data-theme="dark"] .bg-primary.bg-opacity-10 {
    background-color: rgba(110, 166, 220, 0.12) !important;
}
html[data-theme="dark"] .bg-success.bg-opacity-10 {
    background-color: rgba(185, 218, 130, 0.12) !important;
}
html[data-theme="dark"] .bg-danger.bg-opacity-10 {
    background-color: rgba(240, 122, 137, 0.12) !important;
}
html[data-theme="dark"] .bg-secondary.bg-opacity-10 {
    background-color: rgba(149, 168, 189, 0.14) !important;
}
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .bg-primary.bg-opacity-10 {
        background-color: rgba(110, 166, 220, 0.12) !important;
    }
    html[data-theme="auto"] .bg-success.bg-opacity-10 {
        background-color: rgba(185, 218, 130, 0.12) !important;
    }
    html[data-theme="auto"] .bg-danger.bg-opacity-10 {
        background-color: rgba(240, 122, 137, 0.12) !important;
    }
    html[data-theme="auto"] .bg-secondary.bg-opacity-10 {
        background-color: rgba(149, 168, 189, 0.14) !important;
    }
}

html[data-theme="dark"] .fs-5 {
    color: #ffffff;
    letter-spacing: 0.01em;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .fs-5 {
        color: #ffffff;
        letter-spacing: 0.01em;
    }
}

/* ================================
   Helios badge (dark)
   ================================ */

html[data-theme="dark"] .helios-badge {
    display: inline-block;
    padding: .15rem .5rem;
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-radius: .4rem;
    background-color: var(--helios-surface-selected);
    color: #ffffff;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .helios-badge {
        background-color: var(--helios-surface-selected);
        color: #ffffff;
    }
}

/* ================================
   Helios – Dark mode
   Timeline
   ================================ */

html[data-theme="dark"] .timeline::before {
    background-color: var(--helios-timeline-line);
    /* visible subtle line on dark bg */
}

html[data-theme="dark"] .timeline-dot {
    background-color: var(--helios-muted);
    /* soft light dot */
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .timeline::before {
        background-color: var(--helios-timeline-line);
    }

    html[data-theme="auto"] .timeline-dot {
        background-color: var(--helios-muted);
    }
}

/* Fix text-reset links inside content blocks (dark mode) */
html[data-theme="dark"] a.text-reset {
    color: rgba(230, 234, 240, 0.85) !important;
}

html[data-theme="dark"] a.text-reset:hover {
    color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] a.text-reset {
        color: rgba(230, 234, 240, 0.85) !important;
    }

    html[data-theme="auto"] a.text-reset:hover {
        color: #ffffff !important;
    }
}

/* ================================
   Helios – User menu appearance toggle (dark mode)
   ================================ */

html[data-theme="dark"] #userManageMenu .small.text-muted {
    color: var(--helios-muted) !important;
    /* muted slate */
}

/* Segmented container */
html[data-theme="dark"] #userManageMenu .helios-segmented {
    background-color: transparent;
}

/* Base buttons – fixed solid colors */
html[data-theme="dark"] #userManageMenu .helios-segmented .btn {
    background-color: var(--helios-surface-raised);
    color: #cbd5e1;
    border-color: var(--helios-surface-selected);
}

/* Hover */
html[data-theme="dark"] #userManageMenu .helios-segmented .btn:hover {
    background-color: var(--helios-surface-hover);
    color: #ffffff;
}

/* Selected */
html[data-theme="dark"] #userManageMenu .helios-segmented .btn.is-selected {
    background-color: var(--helios-surface-selected);
    color: #ffffff;
    border-color: #3b4a63;
    font-weight: 600;
}

/* Auto mode */
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] #userManageMenu .small.text-muted {
        color: var(--helios-muted) !important;
    }

    html[data-theme="auto"] #userManageMenu .helios-segmented .btn {
        background-color: var(--helios-surface-raised);
        color: #cbd5e1;
        border-color: var(--helios-surface-selected);
    }

    html[data-theme="auto"] #userManageMenu .helios-segmented .btn:hover {
        background-color: var(--helios-surface-hover);
        color: #ffffff;
    }

    html[data-theme="auto"] #userManageMenu .helios-segmented .btn.is-selected {
        background-color: var(--helios-surface-selected);
        color: #ffffff;
        border-color: #3b4a63;
        font-weight: 600;
    }
}

/* ================================
   Helios – Dark mode
   Bootstrap form-switch tuning
   ================================ */

html[data-theme="dark"] .form-check-input[type="checkbox"] {
    background-color: var(--helios-surface-sunken);
    border-color: rgba(255, 255, 255, 0.25);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23cbd5e1'/%3e%3c/svg%3e");
}

/* Checked state (color + switch knob SVG) */
html[data-theme="dark"] .form-check-input:checked {
    background-color: var(--helios-blue);
    border-color: var(--helios-blue-strong);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

/* Focus state – subtle, Bootstrap-aligned */
html[data-theme="dark"] .form-check-input:focus {
    border-color: var(--helios-blue-strong);
    box-shadow: 0 0 0 0.15rem rgba(122, 167, 199, 0.25);
}

/* Disabled */
html[data-theme="dark"] .form-check-input:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Auto mode */
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .form-check-input[type="checkbox"] {
        background-color: var(--helios-surface-sunken);
        border-color: rgba(255, 255, 255, 0.25);
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23cbd5e1'/%3e%3c/svg%3e");
    }

    html[data-theme="auto"] .form-check-input:checked {
        background-color: var(--helios-blue);
        border-color: var(--helios-blue-strong);
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
    }

    html[data-theme="auto"] .form-check-input:focus {
        border-color: var(--helios-blue-strong);
        box-shadow: 0 0 0 0.15rem rgba(122, 167, 199, 0.25);
    }
}

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

/* ================================
   Success and Danger Subtle Badges (dark mode)
   ================================ */

html[data-theme="dark"] .badge.bg-success-subtle {
    background-color: rgba(74, 142, 71, 0.3) !important;
    border-color: rgba(74, 142, 71, 0.5) !important;
}

html[data-theme="dark"] .badge.bg-success-subtle.text-success {
    color: #60d345 !important;
}

html[data-theme="dark"] .badge.bg-danger-subtle {
    background-color: rgba(220, 78, 66, 0.3) !important;
    border-color: rgba(220, 78, 66, 0.5) !important;
}

html[data-theme="dark"] .badge.bg-danger-subtle.text-danger {
    color: #f87171 !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .badge.bg-success-subtle {
        background-color: rgba(74, 142, 71, 0.3) !important;
        border-color: rgba(74, 142, 71, 0.5) !important;
    }

    html[data-theme="auto"] .badge.bg-success-subtle.text-success {
        color: #60d345 !important;
    }

    html[data-theme="auto"] .badge.bg-danger-subtle {
        background-color: rgba(220, 78, 66, 0.3) !important;
        border-color: rgba(220, 78, 66, 0.5) !important;
    }

    html[data-theme="auto"] .badge.bg-danger-subtle.text-danger {
        color: #f87171 !important;
    }
}

/* ================================
   Select2 – Dark mode overrides
   ================================ */

html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--helios-bg-panel);
    border-color: rgba(95, 143, 179, 0.25);
}

html[data-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--helios-bg-panel);
    border-color: rgba(95, 143, 179, 0.25);
    color: var(--helios-text);
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--helios-text);
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgba(230, 234, 240, 0.6);
}

html[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--helios-blue);
}

html[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--helios-blue);
}

html[data-theme="dark"] .select2-dropdown {
    background-color: var(--helios-bg-panel);
    border-color: rgba(95, 143, 179, 0.25);
}

html[data-theme="dark"] .select2-results__option {
    color: var(--helios-text);
}

html[data-theme="dark"] .select2-results__option--highlighted {
    background-color: rgba(95, 143, 179, 0.15) !important;
    color: var(--helios-text) !important;
}

html[data-theme="dark"] .select2-results__option--selected {
    background-color: rgba(95, 143, 179, 0.15) !important;
    color: var(--helios-text) !important;
}

html[data-theme="dark"] .select2-results__option[aria-selected="true"] {
    background-color: rgba(95, 143, 179, 0.25) !important;
    color: var(--helios-text) !important;
}

html[data-theme="dark"] .select2-selection__choice {
    background: var(--helios-blue) !important;
    border: 0 !important;
    color: var(--helios-bg-main) !important;
}

html[data-theme="dark"] .select2-selection__choice__remove {
    color: var(--helios-bg-main) !important;
    opacity: 0.8;
}

html[data-theme="dark"] .select2-selection__choice__remove:hover {
    opacity: 1;
}

/* Auto dark mode (OS preference) */
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .select2-container--default .select2-selection--multiple {
        background-color: var(--helios-bg-panel);
        border-color: rgba(95, 143, 179, 0.25);
    }

    html[data-theme="auto"] .select2-container--default .select2-selection--single {
        background-color: var(--helios-bg-panel);
        border-color: rgba(95, 143, 179, 0.25);
        color: var(--helios-text);
    }

    html[data-theme="auto"] .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: var(--helios-text);
    }

    html[data-theme="auto"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: rgba(230, 234, 240, 0.6);
    }

    html[data-theme="auto"] .select2-container--default.select2-container--focus .select2-selection--multiple {
        border-color: var(--helios-blue);
    }

    html[data-theme="auto"] .select2-container--default.select2-container--focus .select2-selection--single {
        border-color: var(--helios-blue);
    }

    html[data-theme="auto"] .select2-dropdown {
        background-color: var(--helios-bg-panel);
        border-color: rgba(95, 143, 179, 0.25);
    }

    html[data-theme="auto"] .select2-results__option {
        color: var(--helios-text);
    }

    html[data-theme="auto"] .select2-results__option--highlighted {
        background-color: rgba(95, 143, 179, 0.15) !important;
        color: var(--helios-text) !important;
    }

    html[data-theme="auto"] .select2-results__option--selected {
        background-color: rgba(95, 143, 179, 0.15) !important;
        color: var(--helios-text) !important;
    }

    html[data-theme="auto"] .select2-results__option[aria-selected="true"] {
        background-color: rgba(95, 143, 179, 0.25) !important;
        color: var(--helios-text) !important;
    }

    html[data-theme="auto"] .select2-selection__choice {
        background: var(--helios-blue) !important;
        border: 0 !important;
        color: var(--helios-bg-main) !important;
    }

    html[data-theme="auto"] .select2-selection__choice__remove {
        color: var(--helios-bg-main) !important;
        opacity: 0.8;
    }

    html[data-theme="auto"] .select2-selection__choice__remove:hover {
        opacity: 1;
    }
}

/* ================================
   Tables – canonical dark/auto setter
   Bootstrap leest deze variabelen zelf voor row-separators, achtergrond
   en tekstkleur. Bewust ALLE relevante --bs-table-* tokens hier zetten
   zodat we GEEN cell-overrides met !important nodig hebben.
   ================================ */
html[data-theme="dark"] .table {
    --bs-table-color:                var(--helios-text);
    --bs-table-bg:                   transparent;
    --bs-table-border-color:         var(--helios-border-subtle);
    --bs-table-striped-color:        var(--helios-text);
    --bs-table-striped-bg:           rgba(255, 255, 255, 0.035);
    --bs-table-striped-border-color: var(--helios-border-subtle);
    --bs-table-active-color:         #f4f6fa;
    --bs-table-active-bg:            rgba(95, 143, 179, 0.18);
    --bs-table-active-border-color:  var(--helios-blue-deep-border);
    --bs-table-hover-color:          #f4f6fa;
    --bs-table-hover-bg:             rgba(95, 143, 179, 0.10);
    --bs-table-hover-border-color:   var(--helios-border-subtle);
}
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .table {
        --bs-table-color:                var(--helios-text);
        --bs-table-bg:                   transparent;
        --bs-table-border-color:         var(--helios-border-subtle);
        --bs-table-striped-color:        var(--helios-text);
        --bs-table-striped-bg:           rgba(255, 255, 255, 0.035);
        --bs-table-striped-border-color: var(--helios-border-subtle);
        --bs-table-active-color:         #f4f6fa;
        --bs-table-active-bg:            rgba(95, 143, 179, 0.18);
        --bs-table-active-border-color:  var(--helios-blue-deep-border);
        --bs-table-hover-color:          #f4f6fa;
        --bs-table-hover-bg:             rgba(95, 143, 179, 0.10);
        --bs-table-hover-border-color:   var(--helios-border-subtle);
    }
}

/* Header (thead): kleur-accenten in dark mode.
   Typografie (uppercase, weight, letter-spacing, padding) staat in
   main.css zodat het identiek is in light + dark. */
html[data-theme="dark"] .table > thead,
html[data-theme="dark"] .table > thead > tr.table-dark {
    --bs-table-color: #c7d4e2;
    --bs-table-bg:    rgba(255, 255, 255, 0.045);
    --bs-table-border-color: #2a3849;
}
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .table > thead,
    html[data-theme="auto"] .table > thead > tr.table-dark {
        --bs-table-color: #c7d4e2;
        --bs-table-bg:    rgba(255, 255, 255, 0.045);
        --bs-table-border-color: #2a3849;
    }
}

/* Caption zachter tegen donkere bg. */
html[data-theme="dark"] .table > caption {
    color: #8a98a9;
}
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .table > caption {
        color: #8a98a9;
    }
}

/* Tooltip text op gekleurde cells (wordt op lichte achtergrond gezet) */
html[data-theme="dark"] td.bg-success .text-tooltip,
html[data-theme="dark"] td.bg-warning .text-tooltip,
html[data-theme="dark"] td.bg-info .text-tooltip,
html[data-theme="dark"] td.bg-danger .text-tooltip {
    color: var(--helios-bg-main);
}
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] td.bg-success .text-tooltip,
    html[data-theme="auto"] td.bg-warning .text-tooltip,
    html[data-theme="auto"] td.bg-info .text-tooltip,
    html[data-theme="auto"] td.bg-danger .text-tooltip {
        color: var(--helios-bg-main);
    }
}

/* ============================================================
   Cycle E redesign — Page-header dark-mode
   ============================================================
   Platte flat layout werkt ook in dark. Icon-badge blauw-soft op
   dark surface; buttons licht-wit-tint met border; offcanvas op
   helios-surface-raised. Dotted divider rgba wit zodat hij zichtbaar
   is op dark page-bg. */

html[data-theme="dark"] .page-header-title {
    color: var(--helios-text);
}
html[data-theme="dark"] .page-header-breadcrumb .breadcrumb,
html[data-theme="dark"] .page-header-breadcrumb .breadcrumb-item,
html[data-theme="dark"] .page-header-breadcrumb .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.60);
}
html[data-theme="dark"] .page-header-breadcrumb .breadcrumb a {
    color: rgba(255, 255, 255, 0.72);
}
html[data-theme="dark"] .page-header-breadcrumb .breadcrumb a:hover {
    color: rgba(255, 255, 255, 0.95);
}
html[data-theme="dark"] .page-header-intro {
    color: rgba(255, 255, 255, 0.70);
}
html[data-theme="dark"] .page-header-divider {
    border-top-color: rgba(255, 255, 255, 0.14);
}


/* Back + secondary in dark: licht-wit-tint ipv blue-deep */
html[data-theme="dark"] .page-header-btn-back,
html[data-theme="dark"] .page-header-btn-secondary {
    background-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}
html[data-theme="dark"] .page-header-btn-back:hover,
html[data-theme="dark"] .page-header-btn-back:focus-visible,
html[data-theme="dark"] .page-header-btn-secondary:hover,
html[data-theme="dark"] .page-header-btn-secondary:focus-visible {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
}

/* Primary in dark: zwart tekst + icon op oranje gradient-bg, match
   met `.mobile-nav` hamburger-toggle (zie dark.css ~1789). Wit-op-
   oranje oogt "verblind" tegen de omliggende dark page-bg; zwart
   geeft meer rust + duidelijker contrast, consistent over alle
   accent-CTAs in dark-mode. `> * { color: inherit }` zodat Lucide
   SVG's die via currentColor erven ook zwart krijgen — geen lek
   van white-text meer vanuit parent-rules. */
html[data-theme="dark"] .page-header-btn-primary,
html[data-theme="dark"] .page-header-btn-primary:hover,
html[data-theme="dark"] .page-header-btn-primary:focus-visible,
html[data-theme="dark"] .page-header-btn-primary:active {
    color: #000000;
}
html[data-theme="dark"] .page-header-btn-primary > * {
    color: inherit;
}
html[data-theme="dark"] .page-header-btn-primary {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        0 4px 14px rgba(var(--x-brand-orange-rgb), 0.32);
}
html[data-theme="dark"] .page-header-btn-primary:hover,
html[data-theme="dark"] .page-header-btn-primary:focus-visible {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.18),
        0 6px 18px rgba(var(--x-brand-orange-rgb), 0.42);
}
html[data-theme="dark"] .page-header-btn-primary:active {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.10),
        0 1px 4px rgba(var(--x-brand-orange-rgb), 0.22);
}

/* Dropdown-menu in dark: helios-surface-raised bg, wit text */
html[data-theme="dark"] .page-header-actions .dropdown-menu {
    --bs-dropdown-bg: var(--helios-surface-raised);
    background-color: var(--helios-surface-raised);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .page-header-actions .dropdown-menu .dropdown-item {
    color: rgba(255, 255, 255, 0.92);
}
html[data-theme="dark"] .page-header-actions .dropdown-menu .dropdown-item:hover,
html[data-theme="dark"] .page-header-actions .dropdown-menu .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* Offcanvas in dark */
html[data-theme="dark"] .page-header-offcanvas {
    background-color: var(--helios-surface-raised);
    color: var(--helios-text);
    border-top-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .page-header-offcanvas .offcanvas-header {
    border-bottom-color: rgba(255, 255, 255, 0.10);
}
html[data-theme="dark"] .page-header-offcanvas .offcanvas-title {
    color: var(--helios-text);
}
html[data-theme="dark"] .page-header-offcanvas .btn-close {
    filter: invert(1) brightness(1.2);
    opacity: 0.8;
}
html[data-theme="dark"] .page-header-offcanvas .btn-close:hover {
    opacity: 1;
}
html[data-theme="dark"] .page-header-offcanvas-item {
    color: rgba(255, 255, 255, 0.92);
}
html[data-theme="dark"] .page-header-offcanvas-item:hover,
html[data-theme="dark"] .page-header-offcanvas-item:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
html[data-theme="dark"] .page-header-offcanvas-item.is-danger {
    color: rgb(255, 138, 138);
}
html[data-theme="dark"] .page-header-offcanvas-item.is-danger:hover,
html[data-theme="dark"] .page-header-offcanvas-item.is-danger:focus-visible {
    background-color: rgba(var(--bs-danger-rgb), 0.18);
    color: rgb(255, 168, 168);
}
html[data-theme="dark"] .page-header-offcanvas-divider {
    border-top-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .page-header-offcanvas-section {
    color: rgba(255, 255, 255, 0.55);
}

/* Auto-mode mirror */
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .page-header-title {
        color: var(--helios-text);
    }
    html[data-theme="auto"] .page-header-breadcrumb .breadcrumb,
    html[data-theme="auto"] .page-header-breadcrumb .breadcrumb-item,
    html[data-theme="auto"] .page-header-breadcrumb .breadcrumb-item.active {
        color: rgba(255, 255, 255, 0.60);
    }
    html[data-theme="auto"] .page-header-breadcrumb .breadcrumb a {
        color: rgba(255, 255, 255, 0.72);
    }
    html[data-theme="auto"] .page-header-breadcrumb .breadcrumb a:hover {
        color: rgba(255, 255, 255, 0.95);
    }
    html[data-theme="auto"] .page-header-intro {
        color: rgba(255, 255, 255, 0.70);
    }
    html[data-theme="auto"] .page-header-divider {
        border-top-color: rgba(255, 255, 255, 0.14);
    }
    html[data-theme="auto"] .page-header-btn-back,
    html[data-theme="auto"] .page-header-btn-secondary {
        background-color: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.92);
        border-color: rgba(255, 255, 255, 0.14);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
    }
    html[data-theme="auto"] .page-header-btn-back:hover,
    html[data-theme="auto"] .page-header-btn-back:focus-visible,
    html[data-theme="auto"] .page-header-btn-secondary:hover,
    html[data-theme="auto"] .page-header-btn-secondary:focus-visible {
        background-color: rgba(255, 255, 255, 0.12);
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.24);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
    }
    /* Primary in auto-mode dark: zwart-tekst + zwart-icon — zie
       dark-theme scope voor onderbouwing. Match met mobile-nav. */
    html[data-theme="auto"] .page-header-btn-primary,
    html[data-theme="auto"] .page-header-btn-primary:hover,
    html[data-theme="auto"] .page-header-btn-primary:focus-visible,
    html[data-theme="auto"] .page-header-btn-primary:active {
        color: #000000;
    }
    html[data-theme="auto"] .page-header-btn-primary > * {
        color: inherit;
    }
    html[data-theme="auto"] .page-header-btn-primary {
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.12),
            0 4px 14px rgba(var(--x-brand-orange-rgb), 0.32);
    }
    html[data-theme="auto"] .page-header-btn-primary:hover,
    html[data-theme="auto"] .page-header-btn-primary:focus-visible {
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.18),
            0 6px 18px rgba(var(--x-brand-orange-rgb), 0.42);
    }
    html[data-theme="auto"] .page-header-btn-primary:active {
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.10),
            0 1px 4px rgba(var(--x-brand-orange-rgb), 0.22);
    }
    html[data-theme="auto"] .page-header-actions .dropdown-menu {
        --bs-dropdown-bg: var(--helios-surface-raised);
        background-color: var(--helios-surface-raised);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    }
    html[data-theme="auto"] .page-header-actions .dropdown-menu .dropdown-item {
        color: rgba(255, 255, 255, 0.92);
    }
    html[data-theme="auto"] .page-header-actions .dropdown-menu .dropdown-item:hover,
    html[data-theme="auto"] .page-header-actions .dropdown-menu .dropdown-item:focus {
        background-color: rgba(255, 255, 255, 0.08);
        color: #ffffff;
    }
    html[data-theme="auto"] .page-header-offcanvas {
        background-color: var(--helios-surface-raised);
        color: var(--helios-text);
        border-top-color: rgba(255, 255, 255, 0.12);
    }
    html[data-theme="auto"] .page-header-offcanvas .offcanvas-header {
        border-bottom-color: rgba(255, 255, 255, 0.10);
    }
    html[data-theme="auto"] .page-header-offcanvas .btn-close {
        filter: invert(1) brightness(1.2);
        opacity: 0.8;
    }
    html[data-theme="auto"] .page-header-offcanvas-item {
        color: rgba(255, 255, 255, 0.92);
    }
    html[data-theme="auto"] .page-header-offcanvas-item:hover,
    html[data-theme="auto"] .page-header-offcanvas-item:focus-visible {
        background-color: rgba(255, 255, 255, 0.08);
        color: #ffffff;
    }
    html[data-theme="auto"] .page-header-offcanvas-item.is-danger {
        color: rgb(255, 138, 138);
    }
    html[data-theme="auto"] .page-header-offcanvas-divider {
        border-top-color: rgba(255, 255, 255, 0.12);
    }
    html[data-theme="auto"] .page-header-offcanvas-section {
        color: rgba(255, 255, 255, 0.55);
    }
}