@import url("css/rapportages.css");

/* =============================================
   De Slimme Brug stijl
   ============================================= */

/* Animaties: gedefinieerd bovenaan zodat ze beschikbaar zijn voor alle componenten */
@keyframes bl-spin    { to { transform: rotate(360deg); } }
@keyframes dsb-spin   { to { transform: rotate(360deg); } }


/* Auth-loading overlay: toont een spinner terwijl de initiele token-refresh
   wordt uitgevoerd na een pagina-refresh (voorkomt login-flash). */
.auth-loading-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg, #00112C);
    z-index: 9999;
}

.auth-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-border, rgba(255,255,255,0.25));
    border-top-color: var(--dsb-orange-500, #F08A4A);
    border-radius: 50%;
    animation: auth-spin 0.75s linear infinite;
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}
/* CSS custom properties  light thema (standaard) */
:root,
[data-theme="light"] {
    /* -- DSB Brand palette (DeSlimmeBrugDesignSystem is leidend) -- */
    --dsb-site-bg: #00112C;
    --dsb-site-bg-deep: #00081B;
    --dsb-site-surface: #062A4A;
    --dsb-site-surface-strong: #0A2540;
    /* Cyaan is DEPRECATED in DSB; de merk-accent is oranje. Tokens hieronder
       blijven bestaan voor backward-compat maar wijzen nu naar de oranje accent. */
    --dsb-site-cyan: #DA5612;
    --dsb-site-cyan-hover: #F08A4A;
    --dsb-site-cyan-soft: rgba(218,86,18,0.16);
    --dsb-site-orange: #DA5612;
    --dsb-navy-950: #00112C;
    --dsb-navy-900: #062A4A;
    --dsb-navy-800: #0A2540;
    --dsb-navy-700: #143A5B;
    --dsb-navy-600: #1E5380;
    --dsb-navy-500: #2E72A8;
    --dsb-orange-700: #B84509;
    --dsb-orange-600: #C24C0E;
    --dsb-orange-500: var(--dsb-site-orange);
    --dsb-orange-400: #F08A4A;
    --dsb-orange-300: #F5A87A;
    --dsb-orange-200: #FBD4B8;
    --dsb-orange-100: #FFE4D2;
    --dsb-cyan-500:  var(--dsb-site-orange);
    --dsb-cyan-400:  #F08A4A;
    --dsb-cyan-300:  #F5A87A;
    --dsb-cyan-100:  #FFE4D2;
    --dsb-cream:    #F9F5F1;
    --dsb-paper:    #F9F5F1;
    --dsb-bone:     #F1ECE5;
    --dsb-mist:     #E2DCD3;
    --dsb-slate-300: #B5AFA6;
    /* #6B6559 i.p.v. #7B7569: ~5,3:1 ook op getinte card-achtergronden (WCAG 2.2 AA, was ~4,2:1). */
    --dsb-slate-500: #6B6559;
    --dsb-slate-700: #3F3A33;
    --dsb-ink:       #0E1620;
    --dsb-success-500: #16A34A;
    --dsb-warning-500: #D97706;
    --dsb-danger-500:  #DC2626;

    /* -- Kleuren -- */
    --color-primary: var(--dsb-site-cyan);
    --color-primary-hover: var(--dsb-site-cyan-hover);
    --color-accent: var(--dsb-site-orange);
    --color-accent-hover: var(--dsb-orange-400);
    --color-bg: var(--dsb-paper);
    --color-bg-secondary: var(--dsb-bone);
    --color-surface: #ffffff;
    --color-surface-alt: var(--dsb-bone);
    --color-text: var(--dsb-ink);
    --color-text-muted: var(--dsb-slate-500);
    --color-border: var(--dsb-mist);
    --color-sidebar-bg: var(--dsb-navy-900);
    --color-sidebar-text: rgba(255,255,255,0.85);
    --color-sidebar-hover: var(--dsb-orange-500);
    --color-sidebar-nav-header: rgba(255,255,255,0.45);
    --color-sidebar-border: rgba(255,255,255,0.10);
    --color-topbar-bg: var(--dsb-cream);
    --color-topbar-text: var(--dsb-ink);

    /* -- Status (gesynchroniseerd met GetMarkerColor in Kaart.razor) -- */
    --status-closed:  #27a353;
    --status-open:    #1a73e8;
    --status-fault:   #b00020;
    --status-unknown: #767676;
    --status-warning: #f59300;
    /* Aparte amber voor TEKST: #f59300 haalt geen 4,5:1 op wit (~2,3:1). #9a6300 ~5:1 op licht. */
    --status-warning-text: #9a6300;
    --status-maintenance: #DA5612;

    /* -- Semantic aliases -- */
    --bg-surface: #ffffff;
    --bg-surface-inset: var(--dsb-bone);
    --border-subtle: var(--dsb-mist);
    --text-primary: var(--dsb-ink);
    --text-muted: var(--dsb-slate-500);
    --c-black: var(--dsb-ink);
    --c-red: var(--dsb-orange-500);
    --color-card: #ffffff;
    --btn-close-filter: none;

    /* -- Typografie -- */
    --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
    --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* -- Type-schaal (root = 16px) - overgenomen uit colors_and_type.css -- */
    --fs-12: 0.75rem;
    --fs-13: 0.8125rem;
    --fs-14: 0.875rem;
    --fs-16: 1rem;
    --fs-18: 1.125rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    --fs-30: 1.875rem;
    --fs-36: 2.25rem;
    --fs-48: 3rem;
    --fs-64: 4rem;
    --fs-80: 5rem;

    /* -- Spacing (4-pt grid) - overgenomen uit colors_and_type.css -- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* -- Semantische aliassen voor demo-CSS-pariteit --
       Gemapt op de bestaande, thema-veilige frontend-tokens zodat demo-regels
       (die --accent / --fg-* / --bg-subtle gebruiken) verbatim overgenomen kunnen
       worden en automatisch in licht en dark thema correct kleuren. */
    --accent:       var(--color-accent);
    --fg-primary:   var(--color-text);
    --fg-secondary: var(--color-text);
    --fg-tertiary:  var(--color-text-muted);
    --bg-subtle:    var(--bg-surface-inset);

    /* -- Schaduwen -- */
    --shadow-xs: 0 1px 2px rgba(6,42,74,0.06);
    --shadow-sm: 0 2px 6px rgba(6,42,74,0.07), 0 1px 2px rgba(6,42,74,0.04);
    --shadow-md: 0 6px 16px rgba(6,42,74,0.09), 0 2px 4px rgba(6,42,74,0.05);
    --shadow-lg: 0 16px 36px rgba(6,42,74,0.11), 0 4px 8px rgba(6,42,74,0.05);
    --shadow-glow: 0 0 0 4px rgba(249,245,241,0.22);

    /* -- Radius -- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* -- Motion -- */
    --ease-out: cubic-bezier(0.2, 0.7, 0.25, 1);
    --dur-fast: 160ms;
    --dur-normal: 240ms;

    /* -- Layout maten -- */
    --topbar-height: 68px;
    --topbar-safe-top: env(safe-area-inset-top, 0px);
    --ticker-safe-bottom: env(safe-area-inset-bottom, 0px);
    --topbar-side-padding: max(1rem, env(safe-area-inset-right, 0px));
    --topbar-side-padding-left: max(1rem, env(safe-area-inset-left, 0px));
    --ticker-height: 42px;
    --ticker-total-height: calc(var(--ticker-height) + var(--ticker-safe-bottom));
    --topbar-total-height: calc(var(--topbar-height) + var(--topbar-safe-top));
}

/*  Light thema: topbar en sidebar krijgen een eigen DSB light-skin 
   Dark thema houdt de bestaande marine/zwarte shell.
    */
[data-theme="light"] {
    /* Topbar: crme vlak met zachte mist-rand  identiek aan DSB website header */
    --color-topbar-bg: var(--dsb-cream, #F9F5F1);
    --color-topbar-text: var(--dsb-ink, #0E1620);
    /* Sidebar: bone (een tint donkerder dan cream) met donkere tekst */
    --color-sidebar-bg: var(--dsb-bone, #F1ECE5);
    --color-sidebar-text: var(--dsb-ink, #0E1620);
    --color-sidebar-hover: var(--dsb-navy-700, #143A5B);
    --color-sidebar-nav-header: var(--dsb-slate-700, #3F3A33);
    --color-sidebar-border: var(--dsb-mist, #E2DCD3);
}
[data-theme="dark"] {
    --color-bg: var(--dsb-site-bg, #00112C);
    --color-bg-secondary: var(--dsb-site-bg-deep, #00081B);
    --color-surface: var(--dsb-site-surface, #062A4A);
    --color-surface-alt: color-mix(in srgb, var(--dsb-site-surface, #062A4A) 86%, var(--dsb-site-bg-deep, #00081B));
    --color-text: rgba(245,250,255,0.96);
    --color-text-muted: rgba(249,245,241,0.82);
    --color-border: rgba(249,245,241,0.18);
    --color-sidebar-bg: var(--dsb-site-bg, #00112C);
    --color-sidebar-text: rgba(255,255,255,0.85);
    --color-sidebar-hover: var(--dsb-site-cyan, #DA5612);
    --color-sidebar-nav-header: rgba(255,255,255,0.55);
    --color-sidebar-border: rgba(249,245,241,0.14);
    --color-topbar-bg: var(--dsb-site-bg, #00112C);
    --color-topbar-text: rgba(249,245,241,0.92);
    --color-primary: var(--dsb-site-cyan, #DA5612);
    --color-primary-hover: var(--dsb-site-cyan-hover, #F08A4A);
    --color-accent: var(--dsb-site-orange, #DA5612);
    --status-warning: #F5C66A;
    /* Op donkere achtergrond is de lichte amber juist goed leesbaar. */
    --status-warning-text: #F5C66A;
    --bg-surface: var(--dsb-site-surface, #062A4A);
    --bg-surface-inset: color-mix(in srgb, var(--dsb-site-surface, #062A4A) 86%, var(--dsb-site-bg-deep, #00081B));
    --border-subtle: rgba(249,245,241,0.14);
    --text-primary: rgba(245,250,255,0.96);
    --text-muted: rgba(249,245,241,0.74);
    --c-black: #ffffff;
    --c-red: #F87171;
    --color-card: var(--dsb-site-surface, #062A4A);
    /* Bootstrap 5 CSS-variabelen overschrijven  DSB dark */
    --bs-body-bg: var(--dsb-site-bg);
    --bs-body-color: rgba(245,250,255,0.96);
    --bs-secondary-bg: var(--dsb-site-surface, #062A4A);
    --bs-tertiary-bg: color-mix(in srgb, var(--dsb-site-surface, #062A4A) 86%, var(--dsb-site-bg-deep, #00081B));
    --bs-border-color: rgba(249,245,241,0.18);
    --bs-border-color-translucent: rgba(249,245,241,0.12);
    --bs-list-group-bg: var(--dsb-site-surface, #062A4A);
    --bs-list-group-color: rgba(245,250,255,0.96);
    --bs-list-group-border-color: rgba(249,245,241,0.16);
    --bs-list-group-active-bg: var(--dsb-site-cyan, #DA5612);
    --bs-list-group-active-color: var(--dsb-site-bg-deep, #00081B);
    --bs-list-group-active-border-color: var(--dsb-site-cyan, #DA5612);
    --bs-list-group-hover-bg: rgba(249,245,241,0.08);
    --bs-list-group-action-color: rgba(245,250,255,0.96);
    --bs-list-group-action-hover-color: #fff;
    --bs-card-bg: var(--dsb-site-surface, #062A4A);
    --bs-card-border-color: rgba(249,245,241,0.16);
    --bs-modal-bg: var(--dsb-site-surface, #062A4A);
    --bs-modal-border-color: rgba(249,245,241,0.18);
    --btn-close-filter: invert(1) grayscale(1);
    --bs-dropdown-bg: color-mix(in srgb, var(--dsb-site-surface, #062A4A) 86%, var(--dsb-site-bg-deep, #00081B));
    --bs-dropdown-border-color: rgba(249,245,241,0.18);
    --bs-dropdown-link-color: rgba(245,250,255,0.96);
    --bs-dropdown-link-hover-bg: rgba(249,245,241,0.10);
    --bs-table-bg: var(--dsb-site-surface, #062A4A);
    --bs-table-color: rgba(245,250,255,0.96);
    --bs-table-border-color: rgba(249,245,241,0.14);
    --bs-table-striped-bg: rgba(255,255,255,0.025);
    --bs-table-hover-bg: rgba(249,245,241,0.08);
    --bs-pagination-bg: var(--dsb-site-surface, #062A4A);
    --bs-pagination-border-color: rgba(249,245,241,0.16);
    --bs-pagination-color: rgba(245,250,255,0.86);
    --bs-pagination-hover-bg: rgba(249,245,241,0.10);
    --bs-pagination-active-bg: var(--dsb-site-cyan, #DA5612);
    --bs-pagination-active-border-color: var(--dsb-site-cyan, #DA5612);
    --bs-pagination-disabled-bg: var(--dsb-site-bg-deep, #00081B);
    --bs-pagination-disabled-color: rgba(249,245,241,0.38);
    --bs-input-group-addon-bg: color-mix(in srgb, var(--dsb-site-surface, #062A4A) 86%, var(--dsb-site-bg-deep, #00081B));
    --bs-input-group-addon-border-color: rgba(249,245,241,0.18);
    --bs-nav-tabs-border-color: rgba(249,245,241,0.14);
    --bs-nav-tabs-link-active-bg: var(--dsb-site-surface, #062A4A);
    --bs-nav-tabs-link-active-border-color: rgba(249,245,241,0.18) rgba(249,245,241,0.18) var(--dsb-site-surface, #062A4A);
    --bs-nav-tabs-link-active-color: #ffffff;
    --bs-nav-tabs-link-hover-border-color: rgba(249,245,241,0.16);
    --bs-nav-pills-link-active-bg: var(--dsb-site-cyan, #DA5612);
    --bs-toast-bg: color-mix(in srgb, var(--dsb-site-surface, #062A4A) 86%, var(--dsb-site-bg-deep, #00081B));
    --bs-toast-border-color: rgba(249,245,241,0.16);
    --bs-popover-bg: color-mix(in srgb, var(--dsb-site-surface, #062A4A) 86%, var(--dsb-site-bg-deep, #00081B));
    --bs-popover-border-color: rgba(249,245,241,0.16);
    --bs-tooltip-bg: color-mix(in srgb, var(--dsb-site-cyan, #DA5612) 18%, var(--dsb-site-surface, #062A4A));
}

/* Dark mode  Bootstrap component overrides  DSB stijl */
[data-theme="dark"] body {
    background-color: var(--color-bg, #00112C);
    color: rgba(255,255,255,0.90);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] input[type="date"]:focus,
[data-theme="dark"] input[type="datetime-local"]:focus {
    background-color: color-mix(in srgb, var(--color-surface, #062A4A) 85%, var(--color-bg, #00112C)) !important;
    color: rgba(255,255,255,0.90) !important;
    border-color: rgba(240,138,74,0.20) !important;
    color-scheme: dark;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input[type="date"]::placeholder { color: rgba(255,255,255,0.40); }

[data-theme="dark"] .form-label,
[data-theme="dark"] label { color: rgba(255,255,255,0.85); }

[data-theme="dark"] .form-check-label { color: rgba(255,255,255,0.85); }

[data-theme="dark"] .form-text { color: rgba(255,255,255,0.55); }

/* Bootstrap bg-warning/bg-info hebben standaard text-dark (zwart)  slecht leesbaar in dark-mode */
[data-theme="dark"] {
    --badge-warning-dark-bg: #92400e;
    --badge-warning-dark-text: #fef3c7;
}
[data-theme="dark"] .badge.bg-warning,
[data-theme="dark"] .badge.bg-warning.text-dark,
[data-theme="dark"] span.bg-warning {
    background-color: var(--badge-warning-dark-bg) !important;
    color: var(--badge-warning-dark-text) !important;
}
[data-theme="dark"] .badge.bg-info,
[data-theme="dark"] .badge.bg-info.text-dark,
[data-theme="dark"] span.bg-info {
    background-color: var(--color-surface, #062A4A) !important;
    color: var(--dsb-orange-400, #F08A4A) !important;
}
/* Zorg dat .text-dark nooit donker is in dark-mode */
[data-theme="dark"] .text-dark {
    color: rgba(255,255,255,0.85) !important;
}
/* list-group dark-mode fix */
[data-theme="dark"] .list-group-item {
    background-color: var(--color-surface, #062A4A);
    border-color: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.90);
}
[data-theme="dark"] .list-group-item:hover,
[data-theme="dark"] .list-group-item-action:hover {
    background-color: var(--dsb-navy-700, #143A5B);
    color: rgba(255,255,255,0.95);
}
[data-theme="dark"] .list-group-item.active {
    background-color: #F08A4A;
    border-color: #F08A4A;
    color: var(--color-bg, #00112C);
}
[data-theme="dark"] .list-group-item.active .opacity-75,
[data-theme="dark"] .list-group-item.active .opacity-50 {
    color: rgba(255,255,255,.8) !important;
}
/* pagination dark-mode */
[data-theme="dark"] .page-link {
    background-color: var(--dsb-navy-800, #0A2540);
    border-color: #444444;
    color: #f0f0f0;
}
[data-theme="dark"] .page-link:hover {
    background-color: var(--dsb-navy-700, #143A5B);
    color: #fff;
}
[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--dsb-navy-900, #062A4A);
    border-color: #444444;
    color: #666;
}
[data-theme="dark"] .page-item.active .page-link {
    background-color: #F08A4A;
    border-color: #F08A4A;
    color: var(--color-bg, #00112C);
}
/* input-group dark */
[data-theme="dark"] .input-group-text {
    background-color: #143A5B;
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.90);
}
/* nav-tabs dark */
[data-theme="dark"] .nav-tabs {
    border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .nav-tabs .nav-link {
    color: rgba(255,255,255,0.55);
    border-color: transparent;
}
[data-theme="dark"] .nav-tabs .nav-link:hover {
    color: rgba(255,255,255,0.90);
    border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--color-surface, #062A4A);
    border-color: rgba(255,255,255,0.10) rgba(255,255,255,0.10) var(--color-surface, #062A4A);
    color: #ffffff;
}
/* progress bar dark */
[data-theme="dark"] .progress {
    background-color: rgba(255,255,255,0.08);
}
/* Zelfstandige data-balk — vervangt Bootstrap .progress/.progress-bar.
   De .progress-bar bg-primary-vulling bleef in dark mode onzichtbaar; deze
   variant heeft een expliciete hoogte + kleur en werkt in light en dark.
   Statuskleuren komen van bg-success/bg-warning/bg-danger op .ams-bar-fill. */
.ams-bar { height: 8px; border-radius: 4px; background: var(--color-border, #e2dcd3); overflow: hidden; }
[data-theme="dark"] .ams-bar { background: rgba(255,255,255,0.10); }
.ams-bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--color-primary); transition: width .3s ease; }
/* small/muted tekst in tabel-rijen */
[data-theme="dark"] small,
[data-theme="dark"] .small {
    color: inherit;
}
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary {
    color: rgba(249,245,241,0.74) !important;
}
/* hr dark */
[data-theme="dark"] hr {
    border-color: rgba(255,255,255,0.10);
    opacity: 1;
}

[data-theme="dark"] .card,
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-footer {
    background-color: var(--color-surface, #062A4A) !important;
    border-color: rgba(249,245,241,0.16) !important;
    color: rgba(245,250,255,0.96);
}

[data-theme="dark"] .card-header {
    background-color: color-mix(in srgb, var(--color-surface, #062A4A) 84%, var(--color-bg, #00112C)) !important;
}

[data-theme="dark"] .table {
    color: rgba(245,250,255,0.96);
    --bs-table-bg: var(--color-surface, #062A4A);
    --bs-table-border-color: rgba(249,245,241,0.14);
    --bs-table-striped-bg: rgba(255,255,255,0.025);
    --bs-table-hover-bg: rgba(249,245,241,0.08);
    --bs-table-color: rgba(245,250,255,0.96);
    --bs-table-striped-color: rgba(245,250,255,0.96);
    --bs-table-hover-color: rgba(255,255,255,0.98);
}

[data-theme="dark"] .table thead th {
    background-color: color-mix(in srgb, var(--color-surface, #062A4A) 78%, var(--color-bg, #00112C)) !important;
    color: #ffffff !important;
    border-color: rgba(249,245,241,0.18) !important;
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    border-color: rgba(249,245,241,0.11) !important;
    color: inherit;
}

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: rgba(249,245,241,0.10) !important;
    color: rgba(255,255,255,0.98) !important;
}

.table-hover > tbody > tr:hover > td {
    background-color: var(--color-surface-hover, rgba(0,0,0,0.03));
}

[data-theme="dark"] .table-danger,
[data-theme="dark"] .table-danger > th,
[data-theme="dark"] .table-danger > td,
[data-theme="dark"] .table-danger > * {
    --bs-table-bg: rgba(127,29,29,0.72);
    --bs-table-color: #FFF7F7;
    --bs-table-border-color: rgba(248,113,113,0.26);
    --bs-table-striped-bg: rgba(153,27,27,0.72);
    --bs-table-striped-color: #FFF7F7;
    --bs-table-hover-bg: rgba(185,28,28,0.76);
    --bs-table-hover-color: #ffffff;
    background-color: var(--bs-table-bg) !important;
    color: var(--bs-table-color) !important;
}

[data-theme="dark"] .table-warning,
[data-theme="dark"] .table-warning > th,
[data-theme="dark"] .table-warning > td,
[data-theme="dark"] .table-warning > * {
    --bs-table-bg: rgba(120,53,15,0.72);
    --bs-table-color: #FFF8E6;
    --bs-table-border-color: rgba(245,198,106,0.26);
    --bs-table-striped-bg: rgba(146,64,14,0.72);
    --bs-table-striped-color: #FFF8E6;
    --bs-table-hover-bg: rgba(180,83,9,0.78);
    --bs-table-hover-color: #ffffff;
    background-color: var(--bs-table-bg) !important;
    color: var(--bs-table-color) !important;
}

[data-theme="dark"] .table-danger a,
[data-theme="dark"] .table-danger .text-muted,
[data-theme="dark"] .table-danger .text-secondary,
[data-theme="dark"] .table-warning a,
[data-theme="dark"] .table-warning .text-muted,
[data-theme="dark"] .table-warning .text-secondary {
    color: inherit !important;
}

[data-theme="dark"] .modal-content {
    background-color: var(--color-surface, #062A4A);
    border-color: rgba(240,138,74,0.15);
    color: rgba(255,255,255,0.90);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    background-color: color-mix(in srgb, var(--color-surface, #062A4A) 85%, var(--color-bg, #00112C));
    border-color: rgba(240,138,74,0.12);
}

[data-theme="dark"] .modal-body {
    background-color: var(--color-surface, #062A4A);
    color: rgba(255,255,255,0.90);
}

[data-theme="dark"] .modal-title { color: #ffffff; }

/* Light-mode modals: expliciete kleuren zodat ze niet afhangen van Bootstrap defaults */
.modal-header,
.modal-footer {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

.modal-body {
    background-color: var(--color-bg);
    color: var(--color-text);
}

[data-theme="dark"] .offcanvas {
    background-color: var(--color-surface, #062A4A) !important;
    color: rgba(255,255,255,0.90);
    border-color: rgba(240,138,74,0.12) !important;
}

[data-theme="dark"] .offcanvas-header {
    background-color: color-mix(in srgb, var(--color-surface, #062A4A) 85%, var(--color-bg, #00112C));
    border-bottom-color: rgba(240,138,74,0.12);
}

[data-theme="dark"] .offcanvas-title { color: #ffffff; }

[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }

[data-theme="dark"] .btn-outline-primary {
    color: #F08A4A !important;
    border-color: #F08A4A !important;
}
[data-theme="dark"] .btn-outline-primary:hover {
    background-color: #F08A4A !important;
    color: var(--color-bg, #00112C) !important;
}

[data-theme="dark"] .btn-outline-secondary {
    color: rgba(255,255,255,0.88) !important;
    border-color: rgba(255,255,255,0.45) !important;
}
[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(220,38,38,0.15);
    border-color: #DC2626;
    color: #FCA5A5;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(22,163,74,0.12);
    border-color: #16A34A;
    color: #86EFAC;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(46,114,168,0.10);
    border-color: #2E72A8;
    color: #F5A87A;
}

[data-theme="dark"] .alert-info a {
    color: #6BA3D6;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(217,119,6,0.12);
    border-color: #D97706;
    color: #FCD34D;
}

[data-theme="dark"] .alert-warning a {
    color: #FDE68A;
}

/* table-* rij-kleuren in dark-mode staan hierboven met hogere contrastwaarden. */

[data-theme="dark"] .table-success,
[data-theme="dark"] .table-success > td,
[data-theme="dark"] .table-success > th {
    --bs-table-accent-bg: rgba(22,163,74,0.12);
    background-color: rgba(22,163,74,0.12) !important;
    color: #86EFAC !important;
}

[data-theme="dark"] .table-info,
[data-theme="dark"] .table-info > td,
[data-theme="dark"] .table-info > th {
    --bs-table-accent-bg: rgba(46,114,168,0.10);
    background-color: rgba(46,114,168,0.10) !important;
    color: #F5A87A !important;
}

[data-theme="dark"] .badge.bg-secondary,
[data-theme="dark"] .badge.bg-secondary.text-dark,
[data-theme="dark"] span.bg-secondary {
    background-color: rgba(249,245,241,0.22) !important;
    color: #F0F8FF !important;
    border: 1px solid rgba(249,245,241,0.28);
}

[data-theme="dark"] .dropdown-menu {
    /* Losstaand van --color-surface (dezelfde tint als de omringende kaart) zodat de dropdown
       een zichtbare rand/diepte heeft in plaats van te verdwijnen tegen zijn eigen achtergrond
       tenzij het kader zichtbaar is via --color-border  in dark mode is --shadow-md te donker
       t.o.v. de paginakleur om als dieptesignaal te dienen. */
    background-color: var(--dsb-site-bg-deep, #00081B);
    border-color: rgba(249,245,241,0.24);
    box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
}

[data-theme="dark"] .dropdown-item {
    color: rgba(255,255,255,0.90);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface, #062A4A));
    color: #ffffff;
}

[data-theme="dark"] code {
    background-color: color-mix(in srgb, var(--color-surface, #062A4A) 85%, var(--color-bg, #00112C));
    color: #F08A4A;
}

/* Skip-to-content link voor toetsenbordgebruikers (WCAG 2.4.1) */
.skip-to-content {
    position: fixed;
    top: -100%;
    left: 1rem;
    z-index: 10000;
    background: var(--color-primary, #DA5612);
    color: #fff;
    padding: 0.5rem 1.25rem;
    border-radius: 0 0 6px 6px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s ease;
}
.skip-to-content:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Reset & basis */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-sans, 'Inter', 'Segoe UI', system-ui, sans-serif);
    font-size: 16px;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-feature-settings: "ss01" 1, "cv05" 1, "cv11" 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display, 'Space Grotesk', 'Inter', system-ui, sans-serif);
    font-weight: 800;
    letter-spacing: -0.045em;
}

/* =============================================
   ANIMATIES & OVERGANGEN  De Slimme Brug
   Subtiel, professioneel, consistent
   ============================================= */

/* -- Globale micro-interacties -- */
a,
button,
.btn,
.nav-link,
.list-group-item,
.dropdown-item {
    transition: color 0.15s ease, background-color 0.15s ease,
                border-color 0.15s ease, box-shadow 0.15s ease,
                opacity 0.15s ease, transform 0.12s ease;
}

::selection { background: var(--color-primary); color: #fff; }

:focus-visible {
    outline: 2px solid #DA5612;
    outline: 2px solid color-mix(in srgb, var(--dsb-orange-500, #DA5612) 72%, white);
    outline-offset: 2px;
}

/* Cards en panelen verschijnen met een lichte fade-slide */
.card,
.offcanvas,
.modal-content {
    transition: background-color 0.2s ease, border-color 0.2s ease,
                box-shadow 0.2s ease;
}

/* Tabelrijen hover  vloeiende achtergrond */
.table-hover tbody tr {
    transition: background-color 0.12s ease;
}

/* Badges  kleur schakelend */
.badge {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* -- Inkomende pagina-inhoud -- */
/* fill-mode 'backwards' i.p.v. 'both'  zie toelichting bij .card hieronder: anders blijft
   .main-content permanent een eigen stacking context vormen. */
.main-content {
    animation: ams-page-in 0.22s ease-out backwards;
}

@keyframes ams-page-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* -- Card entrance -- */
/* fill-mode is bewust 'backwards' (niet 'both'): elk .card-element met een actieve/gevulde
   transform-animatie krijgt een eigen stacking context, ook als de eindwaarde zelf 'none' is
   (het is de animatie op de transform-property zelf die dit triggert, niet de resulterende
   waarde). Met 'both' bleef die stacking context na de intro-animatie permanent bestaan, waardoor
   een z-index:1000 dropdown-menu (bv. ObjectFilterPicker) nooit boven een latere sibling-.card kon
   uitkomen  de twee cards vormen dan los van hun eigen z-index elk een eigen stacking-laag, en die
   lagen worden op DOM-volgorde gestapeld, niet op het z-index van een descendant. 'backwards' houdt
   alleen de startstatus vast vlak vr de animatie (voorkomt een flits van onopgemaakte inhoud) en
   laat de animatie  inclusief de stacking context  na afloop volledig los. */
.card {
    animation: ams-card-in 0.25s ease-out backwards;
}

@keyframes ams-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* Staggered delay voor rasters van cards */
.card:nth-child(1)  { animation-delay: 0.02s; }
.card:nth-child(2)  { animation-delay: 0.04s; }
.card:nth-child(3)  { animation-delay: 0.06s; }
.card:nth-child(4)  { animation-delay: 0.08s; }
.card:nth-child(5)  { animation-delay: 0.10s; }
.card:nth-child(6)  { animation-delay: 0.12s; }

/* -- Knoppen  subtiele lift bij hover -- */
.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,.18);
}
.btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}
.btn {
    transition: color 0.15s ease, background-color 0.15s ease,
                border-color 0.15s ease, box-shadow 0.15s ease,
                transform 0.12s ease;
}

/* -- Formuliervelden  focus-ring animatie -- */
.form-control,
.form-select {
    transition: border-color 0.18s ease, box-shadow 0.18s ease,
                background-color 0.18s ease, transform 0.12s ease;
    border-radius: var(--radius-md, 8px);
}
.form-control:focus,
.form-select:focus {
    box-shadow: var(--shadow-glow);
}

/* iOS auto-zoom preventie: minimaal 16px op touch-schermen */
@media (hover: none) and (pointer: coarse) {
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        font-size: max(16px, 1em);
    }
}

/* -- Statusbadge  fade bij statuswijziging -- */
.status-badge,
[class*="badge"] {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.12s ease;
}

/* -- Klikbare tabelrijen -- */
.tr-clickable {
    cursor: pointer;
}
.tr-clickable:hover td {
    background-color: var(--color-surface-hover, rgba(255,255,255,.05));
}
/* Link in klikbare tabelrij: ziet eruit als tekst maar is keyboard-navigeerbaar (WCAG 4.1.2) */
.object-name-link {
    color: inherit;
    text-decoration: none;
    display: block;
}
.object-name-link:focus-visible {
    outline: 2px solid var(--dsb-orange-500, #DA5612);
    outline-offset: 2px;
    border-radius: 3px;
}

/* -- Tabelrij-fault -- */
.table-row-fault {
    animation: ams-row-fault-in 0.35s ease-out both;
}
@keyframes ams-row-fault-in {
    from { background-color: rgba(220,38,38,0.15); }
    to   { background-color: transparent; }
}

/* -- Offcanvas slide-in (formulierpanelen) -- */
.offcanvas.show {
    animation: ams-offcanvas-in 0.28s cubic-bezier(.25,.8,.25,1) backwards;
}
@keyframes ams-offcanvas-in {
    from { transform: translateX(100%); opacity: 0.6; }
    to   { transform: none; opacity: 1; }
}

/* -- Alert / foutmelding fade-in -- */
.alert {
    animation: ams-alert-in 0.2s ease-out backwards;
}
@keyframes ams-alert-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -- Spinner aanwezig animatie -- */
.spinner-border {
    animation: spinner-border 0.75s linear infinite;
}

/* -- Topbar en sidebar  vloeiende themawissel -- */
.topbar,
.sidebar,
.app-shell {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* -- Sidebar nav-links -- */
.sidebar .nav-link,
.sidebar-nav .nav-link {
    transition: background-color 0.15s ease, color 0.15s ease,
                border-left-color 0.15s ease, padding-left 0.15s ease;
}

/* -- Beheer-toolbar zoekbalk focus -- */
.beheer-toolbar .form-control:focus {
    box-shadow: var(--shadow-glow);
}

/* -- Map/filter chips -- */
.map-chip {
    transition: background-color 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, transform 0.1s ease;
}
.map-chip:hover:not(.active) {
    transform: translateY(-1px);
}
.map-chip.active {
    transform: scale(1.03);
}

/* -- KPI-kaarten op detail-pagina -- */
.kpi-card-detail {
    transition: box-shadow 0.2s ease, border-color 0.2s ease,
                background-color 0.2s ease;
    animation: ams-card-in 0.3s ease-out backwards;
}
.kpi-card-detail:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

/* -- Realtime badge pulse -- */
.badge-realtime {
    animation: ams-live-pulse 2s ease-in-out infinite;
}
@keyframes ams-live-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}

/* -- Kaart update toast -- */
.map-update-toast {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(30,30,30,0.88);
    color: #fff;
    font-size: 0.8rem;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
    pointer-events: none;
    animation: ams-toast-in-out 3s ease forwards;
    white-space: nowrap;
}
.map-update-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #F08A4A;
    margin-right: 5px;
    vertical-align: middle;
}
@keyframes ams-toast-in-out {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    12%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

/* -- Toasts (ToastContainer.razor) -------------------------------------------
   Vaste, gecentreerde stapel ONDER de topbar zodat meldingen op mobiel niet
   achter de LiveTicker (onderbalk) vallen. Volledig token-gebaseerd -> leesbaar
   in beide thema's; randkleur + icoon per niveau. Bootstrap gaf .toast-container
   alleen position:absolute; deze regels stylen de hele laag. */
.toast-container {
    position: fixed;
    top: calc(var(--topbar-total-height, 68px) + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1990;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(92vw, 420px);
    max-width: 92vw;
    padding: 0;
    pointer-events: none; /* container vangt geen klikken; losse items wel */
}

.toast-item {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--status-open, #0b5cad);
    border-radius: 10px;
    box-shadow: var(--shadow-lg, 0 16px 36px rgba(6, 42, 74, 0.18));
    font-size: 0.9rem;
    line-height: 1.35;
    animation: ams-toast-slide-in 0.18s ease;
}

.toast-item.toast-removing {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast-icon { flex: 0 0 auto; font-weight: 700; line-height: 1.4; }
.toast-message { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.toast-close {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
}
.toast-close:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 12%, transparent); }

.toast-success { border-left-color: var(--status-closed, #1f7a3e); }
.toast-success .toast-icon { color: var(--status-closed, #1f7a3e); }
.toast-warning { border-left-color: var(--status-warning, #a86b00); }
.toast-warning .toast-icon { color: var(--status-warning, #a86b00); }
.toast-error   { border-left-color: var(--status-fault, #b00020); }
.toast-error .toast-icon { color: var(--status-fault, #b00020); }
.toast-info    { border-left-color: var(--status-open, #0b5cad); }
.toast-info .toast-icon { color: var(--status-open, #0b5cad); }

@keyframes ams-toast-slide-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .toast-container {
        top: calc(var(--topbar-total-height, 68px) + 6px);
        width: 94vw;
    }
}

/* -- KPI grid highlight bij live update -- */
@keyframes ams-kpi-updated {
    0%   { outline: 2px solid rgba(46,114,168,0.7); outline-offset: 4px; }
    100% { outline: 2px solid transparent; outline-offset: 4px; }
}
.kpi-grid-updated {
    animation: ams-kpi-updated 1.8s ease-out forwards;
    border-radius: 6px;
}

/* -- MetroKaart node highlight bij live update (SVG g-element) -- */
@keyframes ams-node-updated {
    0%   { filter: drop-shadow(0 0 5px rgba(236, 0, 0, 0.9)); }
    100% { filter: none; }
}
.metro-node-updated {
    animation: ams-node-updated 1.8s ease-out forwards;
}

/* -- Tegel highlight bij live update -- */
@keyframes ams-tile-updated {
    0%   { box-shadow: 0 0 0 3px rgba(46,114,168,0.7); }
    100% { box-shadow: none; }
}
.tile-updated {
    animation: ams-tile-updated 1.8s ease-out forwards;
}

/* -- Row/card highlight bij live update -- */
@keyframes ams-row-updated {
    0%   { background-color: rgba(236, 0, 0, 0.18); }
    100% { background-color: transparent; }
}
.row-updated {
    animation: ams-row-updated 1.8s ease-out forwards;
}

/* -- Offline device-rij: rode tint + accentrand, leesbaar in beide thema's -- */
tr.row-offline > td {
    background: color-mix(in srgb, var(--status-fault, #b00020) 8%, transparent);
}
tr.row-offline > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--status-fault, #b00020);
}
[data-theme="dark"] tr.row-offline > td {
    background: color-mix(in srgb, #b00020 16%, transparent);
}

/* -- Nieuwe rij highlight (bijv. nieuwe melding) -- */
@keyframes ams-row-new {
    0%   { background-color: rgba(76, 175, 116, 0.25); }
    100% { background-color: transparent; }
}
.row-new {
    animation: ams-row-new 2.5s ease-out forwards;
}

/* -- Reduce motion  respecteer gebruikersvoorkeur -- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Spinners mogen blijven draaien zodat laadstatus zichtbaar blijft. */
    .bl-spinner,
    .auth-loading-spinner,
    .spinner-border,
    .dsb-page-loading__arc {
        animation-duration: 0.75s !important;
        animation-iteration-count: infinite !important;
    }

    .dsb-page-loading__arc {
        animation-duration: 0.7s !important;
    }

    /* Live-ticker mag blijven scrollen (net als de spinners): het is een
       doorlopende status-/meldingenbalk, en hij is pauzeerbaar bij aanraken
       (WCAG 2.2.2). De duur komt uit de door JS gezette --bo-duration; de
       per-ticker animatienaam staat inline op het element. Zonder deze
       uitzondering zet de reset hierboven de duur op 0.01ms en stopt de ticker. */
    .dsb-ticker-track,
    .bo-ticker-inner {
        animation-duration: var(--bo-duration, 60s) !important;
        animation-iteration-count: infinite !important;
    }
}

/* =============================================
   MOBILE SHELL FIXES  menu, overscroll, ticker
   ============================================= */

html,
body {
    min-height: 100%;
    overscroll-behavior: none;
}

@media (max-width: 768px) {
    body.mobile-nav-open {
        overflow: hidden;
    }

    /* Sidebar zelf pan-y voor scrollen; links en knoppen expliciet auto zodat taps werken */
    body.mobile-nav-open .sidebar {
        touch-action: pan-y;
    }

    body.mobile-nav-open .sidebar a,
    body.mobile-nav-open .sidebar button {
        touch-action: manipulation;
    }
}

@media (min-width: 769px) {
    body.mobile-nav-open {
        overflow: auto;
    }
}



.content-area,
.sidebar {
    overscroll-behavior: contain;
}

@media (max-width: 768px) {
    .topbar {
        height: var(--topbar-total-height);
        min-height: var(--topbar-total-height);
        padding-top: var(--topbar-safe-top);
    }

    .app-shell {
        padding-top: var(--topbar-total-height);
    }

    .content-area {
        padding-top: 0;
        width: 100%;
        min-width: 0;
        min-height: calc(100dvh - var(--topbar-total-height));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: none;
        /* Kleine zijdelingse padding zodat tekst niet tegen de rand plakt */
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-bottom: calc(var(--ticker-total-height) + 44px);
    }

    /* Mobiel: reset de negatieve margin van .page-header  er is geen padding te compenseren */
    #app-shell .page-header,
    .page-header {
        margin-left: -0.75rem !important;
        margin-right: -0.75rem !important;
        width: calc(100% + 1.5rem) !important;
        top: var(--topbar-total-height) !important;
    }

    .sidebar-backdrop {
        top: var(--topbar-total-height);
        bottom: var(--ticker-total-height);
        z-index: 1490;
        overscroll-behavior: none;
        pointer-events: auto;
        backdrop-filter: blur(2px);
        height: calc(100dvh - var(--topbar-total-height) - var(--ticker-total-height));
    }

    .sidebar {
        /* Width en padding-top worden gezet in de authoritatieve mobile-blok
           bij regel ~1150 (min(65vw, 240px) / padding-top: 0.45rem).
           Hier alleen de positionering en bottom-safe-area. */
        max-height: calc(100dvh - var(--topbar-total-height) - var(--ticker-total-height));
        padding-bottom: 12px;
        overscroll-behavior: none;
        pointer-events: auto;
        padding-right: env(safe-area-inset-right, 0px);
    }

    .topbar .nav-toggle-menu {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
        margin-left: 0.35rem;
        z-index: 1600;
        position: relative;
    }

    .topbar .brand {
        flex: 1 1 0;
        min-width: 0;
    }

    .topbar .spacer {
        display: none;
    }

    .dsb-ticker {
        height: var(--ticker-total-height);
        padding-bottom: var(--ticker-safe-bottom);
        align-items: center;
        z-index: 1080;
    }

    .dsb-ticker-track {
        min-height: calc(var(--ticker-height) - 6px);
        align-items: center;
    }
}

@media (max-width: 420px) {
    :root {
        --ticker-height: 38px;
    }

    .content-area {
        padding-bottom: calc(var(--ticker-total-height) + 40px);
    }

    .dsb-ticker-track {
        min-height: calc(var(--ticker-height) - 4px);
    }
}


/* Layout */
.page {
    display: flex;
    flex-direction: column;
    height: 100dvh;   /* vaste hoogte: maakt .app-shell/.content-area tot echte scroll-containers */
    width: 100%;
    overflow: hidden; /* page zelf scrollt niet; .content-area doet dat */
}

.main-content {
    flex: 1;
    padding: 1.5rem;
    background-color: var(--color-bg);
}

/* Topbar */
.topbar {
    background: color-mix(in srgb, var(--color-topbar-bg) 92%, transparent);
    backdrop-filter: blur(18px);
    color: var(--color-topbar-text);
    min-height: 68px;
    display: flex;
    align-items: center;
    /* Safe area: links/rechts voor notch landscape, boven voor status bar */
    padding: var(--topbar-safe-top) var(--topbar-side-padding) 0 var(--topbar-side-padding-left);
    gap: 1.25rem;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 0 rgba(240,138,74,0.08), 0 16px 42px rgba(0,0,0,0.28);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Desktop: sticky in de flow */
@media (min-width: 769px) {
    .topbar {
        position: sticky;
    }
}

/* Mobiel: fixed zodat topbar altijd boven de content zweeft */
@media (max-width: 768px) {
    .topbar {
        position: fixed;
        left: 0;
        right: 0;
        z-index: 1200;
    }
}

/* WCAG 2.4.11 (Focus niet verborgen): wanneer de browser een element bij toetsenbordfocus
   in beeld scrolt, moet er ruimte onder de sticky/fixed topbar blijven zodat het gefocuste
   element niet (deels) achter de balk verdwijnt. scroll-margin-top reserveert die ruimte en
   verandert niets aan de visuele layout. Maat = topbar + kleine marge. */
a, button, input, select, textarea, summary,
[tabindex]:not([tabindex="-1"]), [role="button"], [role="tab"], [role="link"], [role="menuitem"] {
    scroll-margin-top: calc(var(--topbar-total-height) + 12px);
}

/* Sessieverloop-waarschuwing (WCAG 2.2.1). Token-gebaseerd zodat ze in beide thema's leesbaar is. */
.session-expiry-banner {
    position: fixed;
    top: calc(var(--topbar-total-height) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    width: min(92vw, 480px);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--status-warning, #a86b00);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
    padding: 12px 16px;
}

.session-expiry-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.session-expiry-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    background: color-mix(in srgb, var(--status-warning, #a86b00) 20%, transparent);
    color: var(--status-warning, #a86b00);
}

.session-expiry-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.9rem;
    line-height: 1.35;
}

.session-expiry-extend {
    flex: 0 0 auto;
    margin-left: auto;
    min-height: 44px;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.session-expiry-extend:disabled {
    opacity: 0.6;
    cursor: default;
}

.topbar .brand {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-topbar-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.topbar .brand picture {
    display: flex;
    align-items: center;
}

.topbar .brand-logo {
    flex-shrink: 0;
    display: block;
    width: auto;
    height: 38px;
    max-width: min(210px, 52vw);
    filter: drop-shadow(0 0 10px rgba(218,86,18,0.10));
}

/* Branding-logo als rauwe SVG (organisatie-branding) — schaalt als het wordmark */
.topbar .brand-logo-svg { display: inline-flex; align-items: center; }
.topbar .brand-logo-svg svg,
.topbar .brand-logo-svg img { height: 38px; width: auto; max-width: min(210px, 52vw); }

/* Eén org-logo zonder aparte dark-variant (brand-logo-auto) volgt de
   topbar-tekstkleur, net als het default-woordmerk: navy op de lichte (cream)
   topbar, wit op de donkere. Zonder dit is een aangeleverd wit/eenkleurig logo
   onzichtbaar in light mode. Alleen daadwerkelijk gevulde/gestreepte vormen
   worden herkleurd; fill="none" en stroke="none" blijven ongemoeid zodat
   lijn-logo's niet dichtlopen. Heeft de organisatie WEL een aparte light- én
   dark-variant (brand-logo-light/-dark), dan gebeurt dit NIET en behouden de
   logo's hun eigen kleuren. */
.topbar .brand-logo-auto svg { color: var(--color-topbar-text); fill: currentColor; }
.topbar .brand-logo-auto svg [fill]:not([fill="none"]) { fill: currentColor; }
.topbar .brand-logo-auto svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
/* Light thema: de topbar is cream (zie [data-theme="light"] .topbar), dus het
   currentColor-logo moet navy zijn — net als alle andere topbar-tekst in light.
   --color-topbar-text blijft near-white (dient ook de donkere sidebar), daarom
   hier expliciet de topbar-variant overschrijven. Anders is het org-logo een
   near-white vlek op de cream topbar. */
[data-theme="light"] .topbar .brand-logo-auto svg { color: var(--dsb-ink, #0E1620); }

/* Topbar-woordmerk schakelt mee met het thema: inverse (wit) op de donkere
   topbar, gewoon (navy) op de lichte topbar. Anders is het witte logo
   onzichtbaar in light mode. */
.topbar .brand-logo-light { display: none; }
[data-theme="light"] .topbar .brand-logo-dark { display: none; }
[data-theme="light"] .topbar .brand-logo-light { display: block; }

.topbar .brand-text {
    font-size: 1.02rem;
    font-weight: 800;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    color: var(--color-topbar-text, #fff);
    letter-spacing: -0.025em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Topbar gebruikersnaam */
.topbar-username {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-topbar-text, rgba(255,255,255,0.90));
    white-space: nowrap;
    overflow: hidden;
    max-width: 280px;
}

.topbar-user-meta {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
    overflow: hidden;
}

.topbar-username .topbar-user-name {
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-user-role {
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.75;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-user-org {
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--color-topbar-text, rgba(255,255,255,0.80));
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Light-mode: topbar user-info tekst donker genoeg voor AA contrast */
[data-theme="light"] .topbar-user-name,
[data-theme="light"] .topbar-username .topbar-user-name,
[data-theme="light"] .topbar-user-role,
[data-theme="light"] .topbar-user-org {
    color: var(--dsb-slate-700, #3F3A33) !important;
}

/* Verticale scheidingslijn rechts van de gebruikersnaam */
.topbar-separator {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,0.14);
    vertical-align: middle;
    flex-shrink: 0;
}

/* Topbar icoonknoppen — minimaal 44x44px voor WCAG 2.5.5 touch targets */
.btn-topbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md, 8px);
    border: 1.5px solid transparent;
    background: rgba(255,255,255,0.07);
    color: var(--color-topbar-text, rgba(255,255,255,0.80));
    opacity: 0.80;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
    flex-shrink: 0;
    text-decoration: none;
}

.btn-topbar-icon:hover {
    background: rgba(218,86,18,0.18);
    border-color: rgba(218,86,18,0.45);
    color: var(--dsb-orange-400, #F08A4A);
    opacity: 1;
    transform: translateY(-1px);
}

.btn-topbar-icon:active {
    transform: translateY(0);
    background: rgba(218,86,18,0.28);
}

/* Thema-toggle: subtiel anders gekleurd voor herkenbaarheid */
.btn-topbar-icon.theme-toggle-btn {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
}
.btn-topbar-icon.theme-toggle-btn:hover {
    background: rgba(218,86,18,0.18);
    border-color: rgba(218,86,18,0.45);
    color: #F5C66A;
}

/* Inbox-knop in de topbar met badge-teller */
.topbar-inbox-btn {
    position: relative;
}
.topbar-inbox-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--dsb-orange-500, #DA5612);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

/* Klikbare KPI-kaart */
.kpi-card-link {
    cursor: pointer;
    user-select: none;
}
.kpi-card-link:focus-visible {
    outline: 2px solid var(--dsb-orange-500, #DA5612);
    outline-offset: 2px;
}

.topbar,
.sidebar,
.dsb-ticker,
.dsb-live-pill,
.dsb-panel-topline,
.dsb-panel-grid small,
.dsb-panel-grid span,
.dsb-sensor-card,
.dsb-hero-metrics span {
    -webkit-font-smoothing: antialiased;
}

.sidebar .nav-group-header,
.sidebar .nav-link,
.topbar-username,
.btn-topbar-icon {
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.topbar .spacer { flex: 1; }

.topbar .nav-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    display: none;
    align-items: center;
    justify-content: center;
}

/* Menu-knop override: altijd zichtbaar, wit icoon op rode balk */
.nav-toggle-menu {
    display: inline-flex !important;
    background: rgba(255,255,255,0.15) !important;
    border: 1.5px solid rgba(255,255,255,0.4) !important;
    color: #ffffff !important;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    flex-shrink: 0;
}
.nav-toggle-menu:hover {
    background: rgba(255,255,255,0.28) !important;
    border-color: rgba(255,255,255,0.7) !important;
}
/* Op desktop sidebar altijd zichtbaar: knop meer subtiel */
@media (min-width: 769px) {
    .nav-toggle-menu {
        background: rgba(255,255,255,0.12) !important;
        border-color: rgba(255,255,255,0.25) !important;
    }
    .nav-toggle-menu:hover {
        background: rgba(255,255,255,0.22) !important;
    }
}

/* Sidebar + offcanvas */
.app-shell {
    display: flex;
    flex: 1;
    min-height: 0; /* kritiek: zonder dit groeit flex-child buiten .page */
}

/* Backdrop: verborgen op desktop, zichtbaar als overlay op mobiel */
.sidebar-backdrop {
    display: none;
    position: fixed;
    /* Laat de topbar en ticker vrij zodat de shell-interactie intact blijft. */
    inset: var(--topbar-total-height) 0 var(--ticker-total-height) 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1490;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

/* Backdrop alleen tonen op mobiel: op desktop staat de sidebar permanent open
   en mag niets de pagina-interactie blokkeren. */
body.mobile-nav-open .sidebar-backdrop.open {
    display: block;
}

.sidebar {
    width: 240px;
    height: calc(100dvh - var(--topbar-total-height));
    background: color-mix(in srgb, var(--color-sidebar-bg) 94%, transparent);
    color: var(--color-sidebar-text);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: transform 0.25s ease, width 0.25s ease;
    border-right: 1px solid var(--color-sidebar-border, #e0e0e0);
    overflow-x: hidden;
    overflow-y: auto;
    /* Altijd fixed  staat buiten .page zodat overflow:hidden de overlay niet afkapt */
    position: fixed;
    top: var(--topbar-total-height);
    left: 0;
    z-index: 1500;
}

/* Mobiel: sidebar als fixed overlay (verborgen links, schuift in bij open) */
@media (max-width: 768px) {
    .sidebar {
        top: var(--topbar-total-height);
        height: calc(100dvh - var(--topbar-total-height) - var(--ticker-total-height));
        z-index: 1500;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: min(65vw, 240px) !important;
        border-right-width: 1px;
        padding-top: 0.45rem;
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        pointer-events: auto;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar nav > .nav-group:first-child {
        margin-top: 0.35rem;
    }

    .sidebar.open {
        transform: translateX(0);
    }
}

/* Desktop: sidebar zichtbaar als fixed panel links; content-area krijgt margin-left */
@media (min-width: 769px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease, width 0.25s ease;
    }

    .sidebar.open {
        transform: translateX(0);
        width: 240px;
    }

    .sidebar:not(.open) {
        width: 0;
        border-right-width: 0;
    }

    /* Content-area verschuift mee met de sidebar breedte op desktop */
    .content-area {
        transition: margin-left 0.25s ease;
        margin-left: 0;
    }

    body.sidebar-open .content-area {
        margin-left: 240px;
    }

    /* De live-ticker (fixed, full-width onderaan) staat met z-index onder de
       sidebar (z-index 1500). Zonder correctie verdwijnt de linker ~240px van
       de ticker achter het zijmenu. Schuif hem daarom mee met de content zodra
       de sidebar opent, net als .content-area hierboven. */
    .dsb-ticker {
        transition: left 0.25s ease;
    }

    body.sidebar-open .dsb-ticker {
        left: 240px;
    }
}

/* ============================================================
   Desktop sidebar-rail (ingeklapte icoon-modus)
   ------------------------------------------------------------
   body.sidebar-rail versmalt de zijbalk tot een icoon-rail. Alleen
   van toepassing op desktop (>=769px); op mobiel is de zijbalk een
   overlay en heeft de class geen effect. De accordeon-groepen worden
   in rail-modus geforceerd opengezet zodat elk item bereikbaar blijft;
   labels verschijnen als native title-tooltip (zie syncSidebarRailTooltips).
   Werkt met CSS-tokens zodat beide thema's blijven kloppen.
   ============================================================ */
@media (min-width: 769px) {
    :root { --rail-width: 64px; }

    /* Zijbalk smal; content en ticker schuiven mee naar de rail-breedte.
       Hogere specificiteit dan .sidebar.open / body.sidebar-open zodat het wint. */
    body.sidebar-rail .sidebar.open { width: var(--rail-width); }
    body.sidebar-open.sidebar-rail .content-area { margin-left: var(--rail-width); }
    body.sidebar-open.sidebar-rail .dsb-ticker { left: var(--rail-width); }

    /* Alle groep-bodies geforceerd zichtbaar: in rail is er geen accordeon. */
    body.sidebar-rail .sidebar .nav-group-body { max-height: none !important; overflow: visible; }

    /* Groep-header wordt een slanke, gecentreerde scheiding met enkel het groep-icoon.
       font-size:0 collapse't de losse tekstknoop ("Werkplek" enz.); het icoon heeft
       een eigen vaste px-maat en blijft staan. */
    body.sidebar-rail .sidebar .nav-group-header {
        justify-content: center;
        gap: 0;
        padding: 0.5rem 0;
        font-size: 0;
    }
    body.sidebar-rail .sidebar .nav-group-header .nav-chevron { display: none; }

    /* Iconen iets groter in de rail (CSS width/height wint van de svg-attributen). */
    body.sidebar-rail .sidebar .nav-svg-icon { width: 19px; height: 19px; }
    body.sidebar-rail .sidebar .nav-group-icon { width: 17px; height: 17px; opacity: 0.6; }

    /* Links/sublinks: icoon centreren, label (tekstknoop) collapsen via font-size:0. */
    body.sidebar-rail .sidebar .nav-link,
    body.sidebar-rail .sidebar .nav-sublink {
        position: relative;
        justify-content: center;
        gap: 0;
        padding-left: 0 !important;
        padding-right: 0 !important;
        font-size: 0;
    }

    /* Element-children die geen icoon zijn verbergen (badges, favorieten-bediening). */
    body.sidebar-rail .sidebar .nav-link .nav-role-badge,
    body.sidebar-rail .sidebar .nav-link .module-state-badge,
    body.sidebar-rail .sidebar .nav-favorite-label,
    body.sidebar-rail .sidebar .nav-favorite-grip,
    body.sidebar-rail .sidebar .nav-favorite-move,
    body.sidebar-rail .sidebar .nav-favorite-remove { display: none; }

    /* Tellerbadge (actieve meldingen/offline devices) blijft als kleine stip zichtbaar
       zodat operators in rail-modus toch zien dat er actie-items zijn. */
    body.sidebar-rail .sidebar .nav-count-badge {
        position: absolute;
        top: 5px;
        right: 9px;
        min-width: 9px;
        width: 9px;
        height: 9px;
        padding: 0;
        border-radius: 50%;
        line-height: 0;
        overflow: hidden;
    }

    /* Powered-by-attributie past niet in de smalle rail; verbergen. */
    body.sidebar-rail .powered-by { display: none; }
}

/* Rail-toggle: slanke knop bovenaan de zijbalk (alleen desktop, via d-none d-md-flex). */
.sidebar-rail-toggle-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.4rem 0.6rem 0.2rem;
}

body.sidebar-rail .sidebar-rail-toggle-row {
    justify-content: center;
    padding: 0.4rem 0 0.2rem;
}

.sidebar-rail-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-sidebar-border, rgba(255,255,255,0.12));
    border-radius: 8px;
    background: transparent;
    color: var(--color-sidebar-text);
    cursor: pointer;
    opacity: 0.75;
    transition: background-color 0.15s, opacity 0.15s, color 0.15s;
}

.sidebar-rail-toggle:hover,
.sidebar-rail-toggle:focus-visible {
    background-color: rgba(255,255,255,0.08);
    opacity: 1;
    outline: none;
}

[data-theme="light"] .sidebar-rail-toggle:hover,
[data-theme="light"] .sidebar-rail-toggle:focus-visible {
    background-color: rgba(14,22,32,0.06);
}

/* Chevron wijst naar binnen (inklappen) in volle modus en draait 180deg in rail. */
.sidebar-rail-toggle .rail-chevron { transition: transform 0.2s ease; }
body.sidebar-rail .sidebar-rail-toggle .rail-chevron { transform: rotate(180deg); }

/* ============================================================
   Dichtheid (compacte weergave) — body.density-compact
   ------------------------------------------------------------
   Alleen desktop (>=769px): verlaagt de rijhoogte van standaard
   datatabellen en de padding van KPI-tegels zodat er meer op één
   scherm past. Voorkeur per browser (zie getDensityCompact).
   ============================================================ */
@media (min-width: 769px) {
    body.density-compact .table-enhanced > tbody > tr > td,
    body.density-compact .table-enhanced > thead > tr > th {
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
    }

    body.density-compact .kpi-card { padding: 9px 12px; }
    body.density-compact .kpi-grid { gap: 9px; }
}

/* Brede schermen: dashboard wat meer lucht; KPI-tegels iets groter zodat de grid
   de breedte vult i.p.v. veel kleine tegels op zeer brede monitoren. */
@media (min-width: 1600px) {
    .dashboard-row { gap: 22px; }
}
@media (min-width: 1900px) {
    .kpi-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* Sneltoets-hulp (modaal) */
.shortcuts-help-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.shortcuts-help-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--color-text);
}

.shortcuts-help-keys { display: inline-flex; gap: 0.3rem; flex-shrink: 0; }

.shortcuts-help-list kbd {
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    padding: 2px 7px;
    border-radius: 5px;
    border: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
    color: var(--color-text-muted);
    line-height: 1.3;
}

.sidebar .nav-header {
    padding: 1rem 1rem 0.5rem;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-sidebar-nav-header, #767676);
}

.sidebar .nav-link {
    color: var(--color-sidebar-text);
    padding: 0.55rem 1rem 0.55rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    border-radius: 0;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-size: 0.855rem;
    text-transform: none;
}

.sidebar .nav-link:hover {
    background-color: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.96);
    border-left-color: rgba(255,255,255,0.25);
}

.sidebar .nav-link.active {
    background-color: rgba(218,86,18,0.16);
    color: var(--dsb-orange-400, #F08A4A);
    border-left-color: var(--color-primary, #DA5612);
    font-weight: 600;
}

.sidebar .nav-link .nav-icon {
    width: 20px;
    text-align: center;
}

.nav-icon {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    color: currentColor;
    opacity: 0.86;
}

.nav-icon::before {
    content: '';
    width: 16px;
    height: 16px;
    display: block;
    border: 1.8px solid currentColor;
    border-radius: 4px;
    box-sizing: border-box;
}

.nav-icon[data-icon="overview"]::before,
.nav-icon[data-icon="dashboard"]::before { border-radius: 3px; box-shadow: inset 6px 0 0 rgba(240,138,74,0.28), inset 0 -6px 0 rgba(255,255,255,0.10); }
.nav-icon[data-icon="map"]::before { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.nav-icon[data-icon="table"]::before { border-radius: 2px; background: linear-gradient(currentColor 0 0) 50% 33%/100% 1.5px no-repeat, linear-gradient(currentColor 0 0) 50% 66%/100% 1.5px no-repeat; }
.nav-icon[data-icon="tiles"]::before { border-radius: 2px; background: linear-gradient(currentColor 0 0) 50% 50%/100% 1.5px no-repeat, linear-gradient(90deg, currentColor 0 1.5px, transparent 0) 50% 50%/50% 100% no-repeat; }
.nav-icon[data-icon="play"]::before { width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid currentColor; border-right: 0; border-radius: 0; }
.nav-icon[data-icon="alert"]::before { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 15px solid currentColor; border-top: 0; border-radius: 0; opacity: 0.88; }
.nav-icon[data-icon="bell"]::before { border-radius: 8px 8px 5px 5px; border-bottom-width: 3px; }
.nav-icon[data-icon="chart"]::before { border-radius: 2px; background: linear-gradient(90deg, transparent 2px, currentColor 2px 4px, transparent 4px 6px, currentColor 6px 8px, transparent 8px 10px, currentColor 10px 12px, transparent 12px); }
.nav-icon[data-icon="manage"]::before,
.nav-icon[data-icon="system"]::before,
.nav-icon[data-icon="settings"]::before { border-radius: 50%; box-shadow: inset 0 0 0 4px var(--color-sidebar-bg, var(--color-bg, #00112C)); }
.nav-icon[data-icon="bridge"]::before { border-radius: 0; border-left: 0; border-right: 0; transform: translateY(2px); box-shadow: 0 -7px 0 -4px currentColor; }
.nav-icon[data-icon="users"]::before { border-radius: 50%; box-shadow: 9px 5px 0 -5px currentColor, -9px 5px 0 -5px currentColor; }
.nav-icon[data-icon="device"]::before { border-radius: 3px; box-shadow: inset 0 -4px 0 rgba(240,138,74,0.24); }
.nav-icon[data-icon="tag"]::before { border-radius: 4px 4px 4px 0; transform: rotate(-45deg); }
.nav-icon[data-icon="map-pin"]::before { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: inset 0 0 0 4px var(--color-sidebar-bg, var(--color-bg, #00112C)); }
.nav-icon[data-icon="briefcase"]::before { border-radius: 3px; box-shadow: 0 -5px 0 -3px currentColor; }
.nav-icon[data-icon="palette"]::before { border-radius: 50%; box-shadow: inset 5px -2px 0 rgba(240,138,74,0.38); }
.nav-icon[data-icon="audit"]::before,
.nav-icon[data-icon="log"]::before { border-radius: 2px; background: linear-gradient(currentColor 0 0) 50% 35%/70% 1.5px no-repeat, linear-gradient(currentColor 0 0) 50% 65%/70% 1.5px no-repeat; }
.nav-icon[data-icon="key"]::before { border-radius: 50%; box-shadow: 10px 0 0 -6px currentColor; }
.nav-icon[data-icon="signal"]::before { border: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor, 0 0 0 4px transparent, 0 0 0 6px currentColor; transform: scale(0.65); }
.nav-icon[data-icon="code"]::before { border: 0; border-radius: 0; background: linear-gradient(135deg, transparent 35%, currentColor 35% 45%, transparent 45%), linear-gradient(225deg, transparent 35%, currentColor 35% 45%, transparent 45%); }
.nav-icon[data-icon="widgets"]::before { border-radius: 2px; box-shadow: 8px 0 0 -2px currentColor, 0 8px 0 -2px currentColor, 8px 8px 0 -2px currentColor; transform: scale(0.68); }
.nav-icon[data-icon="shield"]::before { border-radius: 8px 8px 5px 5px; clip-path: polygon(50% 0, 100% 18%, 88% 80%, 50% 100%, 12% 80%, 0 18%); }
.nav-icon[data-icon="mail"]::before { border-radius: 2px; background: linear-gradient(135deg, transparent 45%, currentColor 45% 55%, transparent 55%), linear-gradient(225deg, transparent 45%, currentColor 45% 55%, transparent 55%); }

/* -- Nav-groepen (2-niveau uitklapbaar) -- */
.sidebar .nav-group {
    border-bottom: 1px solid var(--color-sidebar-border, rgba(255,255,255,0.07));
}

.sidebar .nav-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 1rem 0.65rem 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-sidebar-text);
    font-size: 0.70rem;
    font-weight: 700;
    text-align: left;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    opacity: 0.82;
    transition: background-color 0.15s, opacity 0.15s;
}

.sidebar .nav-group-header:hover {
    background-color: rgba(255,255,255,0.06);
    opacity: 0.90;
}

.sidebar .nav-group-header .nav-chevron {
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.55;
    transition: transform 0.22s ease, opacity 0.15s;
}

.sidebar .nav-group-open .nav-group-header .nav-chevron {
    transform: rotate(180deg);
    opacity: 0.85;
}

/* Actieve groepheader-markering: open groep krijgt accentkleur op tekst */
.sidebar .nav-group-open > .nav-group-header {
    color: var(--color-sidebar-hover, var(--dsb-orange-400, #F08A4A));
}

.sidebar .nav-group-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.28s ease;
}

.sidebar .nav-group-open .nav-group-body {
    max-height: 900px;
}

.sidebar .nav-sublink {
    padding-left: 2.5rem !important;
    font-size: 0.92rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Actieve sublink krijgt een subtiele oranje achtergrondstrip + accentlijn links */
.sidebar .nav-sublink.active {
    background: linear-gradient(90deg, rgba(218,86,18,0.20) 0%, rgba(218,86,18,0.06) 100%);
    border-left: 3px solid var(--color-primary, #DA5612);
    color: var(--dsb-orange-400, #F08A4A);
    font-weight: 600;
}

/* Nav-group-header: Space Grotesk voor sectietitel conform design system */
.sidebar .nav-group-header {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.10em;
}

/* Nav-sublinks hover: neutraal licht zonder oranje was */
.sidebar .nav-sublink:hover {
    color: rgba(255,255,255,0.92);
    border-left-color: rgba(255,255,255,0.28);
}

/* Light mode: de zijbalk is licht (bone), dus de witte hover-rand is daar onzichtbaar.
   Geef het hover-accent een neutrale donkere tint zodat het in beide thema's leesbaar is. */
[data-theme="light"] .sidebar .nav-sublink:hover {
    border-left-color: rgba(0, 17, 44, 0.28);
}

/* -- Favorieten-groep -------------------------------------------- */
/* Statische (niet-inklapbare) groepheader voor Favorieten */
.sidebar .nav-group-header-static {
    cursor: default;
}
.sidebar .nav-group-header-static:hover {
    background-color: transparent;
}
.sidebar .nav-group-favorites > .nav-group-header-static {
    color: var(--dsb-orange-400, #F08A4A);
    opacity: 1;
}
.sidebar .nav-group-favorites .nav-group-icon {
    color: var(--dsb-orange-500, #DA5612);
}
/* Versleepbare favoriet-rij */
.sidebar .nav-favorite-row {
    position: relative;
    border-top: 2px solid transparent;
    transition: border-color 0.12s ease, opacity 0.12s ease;
}
.sidebar .nav-favorite-row.nav-fav-dragging {
    opacity: 0.45;
}
.sidebar .nav-favorite-row.nav-fav-drop-target {
    border-top-color: var(--dsb-orange-500, #DA5612);
}
/* Sleep-greep: alleen zichtbaar op hover */
.sidebar .nav-favorite-grip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 0.1rem;
    color: var(--color-sidebar-text, rgba(255,255,255,0.55));
    opacity: 0;
    cursor: grab;
    transition: opacity 0.15s;
}
.sidebar .nav-favorite-row:hover .nav-favorite-grip {
    opacity: 0.6;
}
.sidebar .nav-favorite-row[draggable="true"]:active .nav-favorite-grip {
    cursor: grabbing;
}
/* Favoriet-item: ster links, label in het midden, verwijder-knop rechts */
.sidebar .nav-favorite-item {
    position: relative;
}
.sidebar .nav-favorite-star {
    color: var(--dsb-orange-500, #DA5612);
    flex-shrink: 0;
}
[data-theme="dark"] .sidebar .nav-favorite-star {
    color: var(--dsb-orange-400, #F08A4A);
}
.sidebar .nav-favorite-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar .nav-favorite-remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 0.25rem;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 5px;
    color: var(--color-sidebar-text, rgba(255,255,255,0.7));
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.15s, background-color 0.15s, color 0.15s;
}
.sidebar .nav-favorite-item:hover .nav-favorite-remove,
.sidebar .nav-favorite-remove:focus-visible {
    opacity: 0.85;
}
.sidebar .nav-favorite-remove:hover,
.sidebar .nav-favorite-remove:focus-visible {
    background: rgba(176,0,32,0.18);
    color: #ff8a8a;
    opacity: 1;
    outline: none;
}
[data-theme="light"] .sidebar .nav-favorite-remove {
    color: var(--color-text-muted, #475765);
}
[data-theme="light"] .sidebar .nav-favorite-remove:hover {
    background: rgba(176,0,32,0.12);
    color: #b00020;
}

/* Herorden-knoppen (omhoog/omlaag) naast de verwijderknop. Touch-alternatief voor
   de sleepgreep. Op desktop hover-onthuld zoals de verwijderknop; op touch altijd
   zichtbaar (zie @media (hover: none) hieronder). Alleen kleur/achtergrond -> beide thema's. */
.sidebar .nav-favorite-move {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 5px;
    color: var(--color-sidebar-text, rgba(255,255,255,0.7));
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.15s, background-color 0.15s, color 0.15s;
}
.sidebar .nav-favorite-item:hover .nav-favorite-move,
.sidebar .nav-favorite-move:focus-visible {
    opacity: 0.85;
}
.sidebar .nav-favorite-move:hover,
.sidebar .nav-favorite-move:focus-visible {
    background: rgba(255,255,255,0.14);
    opacity: 1;
    outline: none;
}
[data-theme="light"] .sidebar .nav-favorite-move {
    color: var(--color-text-muted, #475765);
}
[data-theme="light"] .sidebar .nav-favorite-move:hover,
[data-theme="light"] .sidebar .nav-favorite-move:focus-visible {
    background: rgba(0,0,0,0.06);
    color: var(--color-text, #1c2a36);
}

/* Touch (geen hover): sleepgreep verbergen en de actieknoppen altijd tonen en
   groter maken. Hover-onthulde controls zijn op touch onbereikbaar. */
@media (hover: none) {
    .sidebar .nav-favorite-grip { display: none; }
    .sidebar .nav-favorite-move,
    .sidebar .nav-favorite-remove {
        opacity: 0.9;
        width: 30px;
        height: 30px;
    }
}

/* Sidebar brand / logo-sectie: extra padding bovenaan na topbar */
.sidebar > nav {
    padding-top: 0.25rem;
}

/* Topbar: subtiele scheiding, niet oranje  brand is navy/cream met oranje alleen als accent */
.topbar {
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

/*  Light thema: topbar  */
[data-theme="light"] .topbar {
    background: var(--dsb-cream, #F9F5F1) !important;
    box-shadow: 0 1px 0 var(--dsb-mist, #E2DCD3), 0 4px 12px rgba(6,42,74,0.06) !important;
    border-bottom: 1px solid var(--dsb-mist, #E2DCD3) !important;
    color: var(--dsb-ink, #0E1620) !important;
}
[data-theme="light"] .topbar .brand {
    color: var(--dsb-ink, #0E1620) !important;
}
[data-theme="light"] .topbar-username {
    color: var(--dsb-slate-700, #3F3A33) !important;
}
[data-theme="light"] .topbar-separator {
    background: var(--dsb-mist, #E2DCD3) !important;
}
[data-theme="light"] .topbar-live-dot {
    background: var(--dsb-orange-500, #DA5612) !important;
    box-shadow: 0 0 0 3px rgba(218,86,18,0.18) !important;
}
[data-theme="light"] .btn-topbar-icon {
    background: rgba(6,42,74,0.05) !important;
    border-color: var(--dsb-mist, #E2DCD3) !important;
    color: var(--dsb-slate-700, #3F3A33) !important;
}
[data-theme="light"] .btn-topbar-icon:hover {
    background: rgba(218,86,18,0.10) !important;
    border-color: rgba(218,86,18,0.40) !important;
    color: var(--dsb-orange-600, #C24C0E) !important;
}
[data-theme="light"] .btn-topbar-icon.theme-toggle-btn {
    background: rgba(6,42,74,0.04) !important;
    border-color: var(--dsb-mist, #E2DCD3) !important;
}
[data-theme="light"] .nav-toggle-menu {
    background: rgba(6,42,74,0.06) !important;
    border-color: var(--dsb-mist, #E2DCD3) !important;
    color: var(--dsb-ink, #0E1620) !important;
}
[data-theme="light"] .nav-toggle-menu:hover {
    background: rgba(218,86,18,0.10) !important;
    border-color: rgba(218,86,18,0.40) !important;
    color: var(--dsb-orange-600, #C24C0E) !important;
}

/*  Light thema: sidebar  */
[data-theme="light"] .sidebar {
    background: var(--dsb-bone, #F1ECE5) !important;
    border-right-color: var(--dsb-mist, #E2DCD3) !important;
}
[data-theme="light"] .sidebar .nav-group {
    border-bottom-color: var(--dsb-mist, #E2DCD3) !important;
}
[data-theme="light"] .sidebar .nav-group-header {
    color: var(--dsb-slate-700, #3F3A33) !important;
}
[data-theme="light"] .sidebar .nav-group-header:hover {
    background-color: rgba(14,22,32,0.05) !important;
    color: var(--dsb-slate-700, #3F3A33) !important;
}
[data-theme="light"] .sidebar .nav-link {
    color: var(--dsb-slate-700, #3F3A33) !important;
}
[data-theme="light"] .sidebar .nav-link:hover {
    background-color: rgba(6,42,74,0.06) !important;
    color: var(--dsb-navy-700, #143A5B) !important;
    border-left-color: var(--dsb-slate-300, #B5AFA6) !important;
}
[data-theme="light"] .sidebar .nav-link.active,
[data-theme="light"] .sidebar .nav-sublink.active {
    background: linear-gradient(90deg, rgba(218,86,18,0.14) 0%, rgba(218,86,18,0.04) 100%) !important;
    border-left-color: var(--color-primary, #DA5612) !important;
    color: var(--dsb-orange-700, #B84509) !important;
}
/* Niet-actieve nav-sublinks: donkere tekst voor AA contrast op bone achtergrond */
[data-theme="light"] .sidebar .nav-sublink {
    color: var(--dsb-slate-700, #3F3A33) !important;
}
[data-theme="light"] .sidebar .nav-svg-icon {
    color: var(--dsb-slate-500, #7B7569) !important;
}
[data-theme="light"] .sidebar .nav-sublink:hover .nav-svg-icon,
[data-theme="light"] .sidebar .nav-sublink.active .nav-svg-icon {
    color: var(--dsb-orange-600, #C24C0E) !important;
}
[data-theme="light"] .sidebar .nav-group-icon {
    color: var(--dsb-slate-500, #7B7569) !important;
}
[data-theme="light"] .sidebar .nav-group-header:hover .nav-group-icon,
[data-theme="light"] .sidebar .nav-group-open .nav-group-header .nav-group-icon {
    color: var(--dsb-orange-600, #C24C0E) !important;
}
[data-theme="light"] .sidebar .nav-group-open > .nav-group-header {
    color: var(--dsb-orange-700, #B84509);
}
[data-theme="light"] .nav-role-badge::after {
    background-color: var(--dsb-ink, #0E1620);
    color: #ffffff;
}

/*  Sidebar SVG icons (inline Feather-stijl)  */
/* Groepstitel-icoon naast de sectielabel */
.sidebar .nav-group-icon {
    flex-shrink: 0;
    opacity: 0.60;
    transition: opacity 0.15s ease;
}
.sidebar .nav-group-header:hover .nav-group-icon,
.sidebar .nav-group-open .nav-group-header .nav-group-icon {
    opacity: 0.90;
    color: var(--dsb-orange-400, #F08A4A);
}

/* Sublink-icoon */
.sidebar .nav-svg-icon {
    flex-shrink: 0;
    opacity: 0.70;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.sidebar .nav-sublink:hover .nav-svg-icon,
.sidebar .nav-sublink.active .nav-svg-icon {
    opacity: 1;
    color: var(--dsb-orange-400, #F08A4A);
}

/* Rol-badge bolletje rechts van het label */
.nav-count-badge {
    margin-left: auto;
    flex-shrink: 0;
    background: rgba(255,255,255,0.16);
    color: #f2f6fa;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
    letter-spacing: 0.01em;
    transition: background 0.15s;
}

/* Meta-items op nav-sublink: count -> rol -> module-state */
.sidebar .nav-sublink > .nav-role-badge {
    margin-left: 0.35rem;
}

/* Als rolbadge het eerste meta-item is en er is geen module-state-badge, schuif naar rechts.
   Wanneer module-state-badge aanwezig is, neemt die het auto-margin over. */
.sidebar .nav-sublink > .nav-role-badge:first-of-type {
    margin-left: auto;
}

/* Module-state-badge altijd rechts uitlijnen; rolbadge houdt kleine tussenruimte */
.sidebar .nav-sublink > .module-state-badge ~ .nav-role-badge {
    margin-left: 0.35rem;
}

.sidebar .nav-sublink > .nav-role-badge + .module-state-badge {
    margin-left: auto;
}

.sidebar .nav-sublink:hover .nav-count-badge,
.sidebar .nav-sublink.active .nav-count-badge {
    background: rgba(255,255,255,0.22);
    color: #fff;
}

[data-theme="light"] .nav-count-badge {
    background: #e8eef6;
    border: 1px solid #c4d1df;
    color: #102030;
}

[data-theme="light"] .sidebar .nav-sublink:hover .nav-count-badge,
[data-theme="light"] .sidebar .nav-sublink.active .nav-count-badge {
    background: #dce6f2;
    border-color: #aebfd3;
    color: #0b1a2a;
}

/* Actieve meldingen tonen in accent-rood — dark theme standaard */
.nav-count-badge.nav-count-alert {
    background: rgba(176, 0, 32, 0.25);
    color: #ff8a9a;
}

.sidebar .nav-sublink:hover .nav-count-badge.nav-count-alert,
.sidebar .nav-sublink.active .nav-count-badge.nav-count-alert {
    background: rgba(176, 0, 32, 0.40);
    color: #ffb3bd;
}

/* Light mode: donkere rode tekst op lichte rode achtergrond (WCAG AA contrast) */
[data-theme="light"] .nav-count-badge.nav-count-alert {
    background: #fde7ea;
    border: 1px solid #f5b8c0;
    color: #991b1b;
}

[data-theme="light"] .sidebar .nav-sublink:hover .nav-count-badge.nav-count-alert,
[data-theme="light"] .sidebar .nav-sublink.active .nav-count-badge.nav-count-alert {
    background: #fbd0d5;
    border-color: #e8929e;
    color: #7f1d1d;
}

.nav-role-badge {
    margin-left: 0.35rem;
    font-size: 0.5rem;
    line-height: 1;
    flex-shrink: 0;
    position: relative;
    cursor: default;
    opacity: 0.68;
    transition: opacity 0.15s;
}

[data-theme="light"] .nav-role-badge {
    opacity: 0.76;
}

.sidebar .nav-sublink:hover .nav-role-badge,
.sidebar .nav-sublink.active .nav-role-badge {
    opacity: 1;
}

/* Kleuren per toegangsniveau */
.nav-role-all        { color: #bebebe; } /* grijs         Alle rollen          */
.nav-role-monteur    { color: #4dd67e; } /* groen         Monteur+             */
.nav-role-bedienaar  { color: #f0c04a; } /* geel/amber    Bedienaar+           */
.nav-role-beheer     { color: #4a9eff; } /* blauw         OrganisatieAdmin+    */
.nav-role-admin      { color: #ff7c3f; } /* oranje        OrganisatieAdmin     */
.nav-role-hoofdadmin { color: #b00020; } /* rood          HoofdAdmin only      */

/* Badges verbergen als het vinkje uit staat  zet .show-role-badges op de <nav> */
nav:not(.show-role-badges) .nav-role-badge {
    display: none;
}

/* CSS-only tooltip via data-tooltip attribuut */
.nav-role-badge::after {
    content: attr(data-tooltip);
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background-color: #202020;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 200;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.nav-role-badge:hover::after {
    opacity: 1;
}

/* ── Connectivity-widget in het menu ─────────────────────────────────────── */
.nav-sensor-widget {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.75rem 1rem 0.25rem;
    padding: 0.65rem 0.9rem;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    font-size: 0.78rem;
    line-height: 1.3;
    transition: background 160ms ease, border-color 160ms ease;
}

.nav-sensor-widget__dot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}

.nav-sensor-widget__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.nav-sensor-widget__label {
    color: rgba(255,255,255,0.55);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.nav-sensor-widget__status {
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-sensor-widget__count {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.65;
    white-space: nowrap;
    color: #fff;
}

/* Status-varianten */
.nav-sensor-widget--ok {
    border-color: rgba(31, 122, 62, 0.55);
    background: rgba(31, 122, 62, 0.12);
    color: #4ade80;
}
.nav-sensor-widget--ok .nav-sensor-widget__dot    { background: #4ade80; }
.nav-sensor-widget--ok .nav-sensor-widget__status { color: #86efac; }

.nav-sensor-widget--warning {
    border-color: rgba(168, 107, 0, 0.55);
    background: rgba(168, 107, 0, 0.12);
    color: #fbbf24;
}
.nav-sensor-widget--warning .nav-sensor-widget__dot    { background: #fbbf24; }
.nav-sensor-widget--warning .nav-sensor-widget__status { color: #fde68a; }

.nav-sensor-widget--error {
    border-color: rgba(176, 0, 32, 0.55);
    background: rgba(176, 0, 32, 0.12);
    color: #f87171;
}
.nav-sensor-widget--error .nav-sensor-widget__dot    { background: #f87171; }
.nav-sensor-widget--error .nav-sensor-widget__status { color: #fca5a5; }

.nav-sensor-widget--unknown {
    border-color: rgba(71, 87, 101, 0.55);
    background: rgba(71, 87, 101, 0.12);
    color: #94a3b8;
}
.nav-sensor-widget--unknown .nav-sensor-widget__dot    { background: #94a3b8; }
.nav-sensor-widget--unknown .nav-sensor-widget__status { color: #cbd5e1; }

/* Light theme */
[data-theme="light"] .nav-sensor-widget {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .nav-sensor-widget--ok {
    background: rgba(31, 122, 62, 0.08);
    border-color: rgba(31, 122, 62, 0.35);
}
[data-theme="light"] .nav-sensor-widget--warning {
    background: rgba(168, 107, 0, 0.08);
    border-color: rgba(168, 107, 0, 0.35);
}
[data-theme="light"] .nav-sensor-widget--error {
    background: rgba(176, 0, 32, 0.08);
    border-color: rgba(176, 0, 32, 0.35);
}
[data-theme="light"] .nav-sensor-widget .nav-sensor-widget__label  { color: #2D3B4A; }
[data-theme="light"] .nav-sensor-widget .nav-sensor-widget__status { color: #1C2A36; }
[data-theme="light"] .nav-sensor-widget .nav-sensor-widget__count  {
    color: #1B2733;
    opacity: 1;
    font-weight: 700;
}

/* Snelle acties in mobiel zijmenu */
.nav-mobile-actions {
    display: none;
}

@media (max-width: 768px) {
    .nav-mobile-actions {
        display: block;
        padding: 0.75rem 1rem;
        border-top: 1px solid rgba(255,255,255,0.08);
        margin-top: 0.5rem;
    }

    .nav-mobile-actions-title {
        font-size: 0.68rem;
        opacity: 0.55;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.4rem;
    }

    .nav-mobile-actions-list {
        display: grid;
        gap: 0.25rem;
    }

    .nav-mobile-action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.35rem;
        min-height: 44px;
        width: 100%;
        border-radius: 5px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.03);
        color: rgba(255,255,255,0.60);
        text-decoration: none;
        font-size: 0.72rem;
        font-weight: 400;
        padding: 0.2rem 0.5rem;
        cursor: pointer;
    }

    .nav-mobile-action-icon-shell {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.04);
        color: rgba(255,255,255,0.55);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    [data-theme="light"] .nav-mobile-actions {
        border-top-color: rgba(6, 42, 74, 0.18);
    }

    [data-theme="light"] .nav-mobile-actions-title {
        color: rgba(14, 22, 32, 0.78);
        opacity: 1;
    }

    [data-theme="light"] .nav-mobile-action-btn {
        border-color: rgba(6, 42, 74, 0.32);
        background: #ffffff;
        color: #0e1620;
        font-weight: 600;
    }

    [data-theme="light"] .nav-mobile-action-btn:hover {
        background: #eef1f5;
        color: #0b2238;
    }

    [data-theme="light"] .nav-mobile-action-icon-shell {
        border-color: rgba(6, 42, 74, 0.34);
        background: rgba(6, 42, 74, 0.08);
        color: #0b2238;
    }

    .nav-mobile-action-icon-shell.danger {
        border-color: rgba(236, 0, 0, 0.30);
        background: rgba(80, 10, 20, 0.5);
        color: rgba(255,180,180,0.85); /* dark mode: lichtroze op donkerrode achtergrond */
    }

    [data-theme="light"] .nav-mobile-action-icon-shell.danger {
        border-color: rgba(176, 0, 32, 0.42);
        background: rgba(176, 0, 32, 0.14);
        color: #7a0014; /* donkerrood op lichtrode achtergrond, WCAG AA */
    }

    .nav-mobile-action-icon-shell svg {
        flex-shrink: 0;
        opacity: 0.92;
    }

    .nav-mobile-action-btn span {
        min-width: 0;
    }

    .nav-mobile-action-btn:hover {
        background: rgba(255,255,255,0.12);
        color: #fff;
    }

    .nav-mobile-action-btn.danger {
        border-color: rgba(236, 0, 0, 0.25);
        background: rgba(236, 0, 0, 0.07);
        color: rgba(255,180,180,0.80);
    }

    [data-theme="light"] .nav-mobile-action-btn.danger {
        border-color: rgba(176, 0, 32, 0.42);
        background: rgba(176, 0, 32, 0.12);
        color: #7a0014;
    }
}

/* Legenda onderaan de sidebar */
.nav-role-legend {
    padding: 0.6rem 1rem 0.8rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 0.5rem;
}

.nav-role-legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.3rem;
}

.nav-role-legend-title {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.75); /* donker sidebar: voldoende contrast */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
[data-theme="light"] .nav-role-legend-title {
    color: rgba(0,0,0,0.72); /* lichte sidebar: voldoende contrast */
}

.nav-role-legend-toggle {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.75); /* donker sidebar: voldoende contrast */
    cursor: pointer;
    user-select: none;
}
[data-theme="light"] .nav-role-legend-toggle {
    color: rgba(0,0,0,0.72);
}

.nav-role-legend-toggle input[type="checkbox"] {
    margin: 0;
    width: 11px;
    height: 11px;
    cursor: pointer;
    accent-color: #b00020;
}

.nav-role-legend-items {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.nav-role-legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    opacity: 0.90;
}

.nav-role-legend-dot {
    font-size: 0.5rem;
    line-height: 1;
}


.content-area {
    flex: 1;
    min-height: 0;        /* Noodzakelijk in flex-context: voorkomt dat flex-child groeit buiten de container */
    overflow-y: auto;
    overflow-x: hidden;
    /* Desktop padding: rondom zodat inhoud niet tegen de randen plakt.
       .page-header compenseert dit met negatieve margin zodat hij edge-to-edge blijft. */
    padding: 0 1.5rem;
    padding-bottom: calc(var(--ticker-total-height) + 16px);
    background:
        radial-gradient(circle at 68% 24%, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 24rem),
        linear-gradient(90deg, color-mix(in srgb, var(--color-border) 35%, transparent) 1px, transparent 1px),
        linear-gradient(180deg, color-mix(in srgb, var(--color-border) 24%, transparent) 1px, transparent 1px),
        linear-gradient(115deg, var(--color-bg) 0%, color-mix(in srgb, var(--color-bg) 78%, var(--color-surface)) 42%, color-mix(in srgb, var(--color-bg) 88%, var(--color-accent)) 100%);
    background-size: auto, 64px 64px, 64px 64px, auto;
}

[data-theme="light"] .content-area {
    background:
        radial-gradient(circle at 68% 24%, rgba(218,86,18,0.08), transparent 24rem),
        linear-gradient(90deg, rgba(14,22,32,0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(14,22,32,0.04) 1px, transparent 1px),
        linear-gradient(115deg, #F9F5F1 0%, #ffffff 55%, #F1ECE5 100%);
    background-size: auto, 64px 64px, 64px 64px, auto;
}

/* ============================================================
   Content-canvas — leesbreedte op brede/ultrawide schermen
   ------------------------------------------------------------
   Standaard full-bleed (volle breedte) zodat data-pagina's (kaart,
   tabellen, dashboards, grafieken) ongewijzigd blijven. Alleen
   formulier-/tekstpagina's krijgen .is-narrow (zie MainLayout
   NarrowRoutes): die centreren de leescolumn met een max-width.
   De max-width heeft GEEN effect zolang het scherm smaller is dan
   --content-max, dus laptops en gewone monitoren blijven ongemoeid;
   de decoratieve achtergrond zit op .content-area en vult de zijkanten.
   ============================================================ */
:root { --content-max: 1680px; }

.content-canvas {
    width: 100%;
    min-width: 0;
}

@media (min-width: 769px) {
    .content-canvas.is-narrow {
        max-width: var(--content-max);
        margin-inline: auto;
    }
}

/* ============================================================
   Tabel: bevroren eerste kolom (opt-in via data-freeze-first)
   ------------------------------------------------------------
   Houdt de eerste kolom (meestal de objectnaam) in beeld bij
   horizontaal scrollen op brede tabellen. Werkt alleen in een
   horizontaal scrollbare container (.table-responsive) en alleen
   op desktop. Opt-in zodat bestaande tabellen ongewijzigd blijven.
   ============================================================ */
@media (min-width: 769px) {
    table[data-freeze-first] > thead > tr > th:first-child,
    table[data-freeze-first] > tbody > tr > td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--color-surface);
        border-right: 1px solid var(--color-border);
    }

    table[data-freeze-first] > thead > tr > th:first-child {
        z-index: 2;
    }

    /* Toetsenbordnavigatie (opt-in via data-row-nav): zichtbare focusring op de rij. */
    table[data-row-nav] > tbody > tr:focus-visible {
        outline: 2px solid var(--dsb-orange-500, #DA5612);
        outline-offset: -2px;
    }
}

/* Knoppen */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--dsb-site-bg-deep, #00081B);
    min-height: 44px;
    font-size: 1rem;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--dsb-site-bg-deep, #00081B);
}

/* Formulieren */
.form-control, .form-select {
    font-size: 1rem;
    min-height: 44px;
    border-color: var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-text);
}

.form-control:focus, .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow);
}

.form-label { font-weight: 600; color: var(--color-text); }

/* Kaarten/cards */
.card {
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card-header {
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
}

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.32em 0.75em;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    box-shadow: var(--shadow-xs);
}

.status-closed  { background: color-mix(in srgb, var(--status-closed) 18%, white);  color: #14532d; border-color: color-mix(in srgb, var(--status-closed) 36%, transparent); }
.status-open    { background: color-mix(in srgb, var(--status-open) 18%, white);    color: #1e3a8a; border-color: color-mix(in srgb, var(--status-open) 36%, transparent); }
.status-fault   { background: color-mix(in srgb, var(--status-fault) 18%, white);   color: #7f1d1d; border-color: color-mix(in srgb, var(--status-fault) 36%, transparent); }
.status-unknown { background: color-mix(in srgb, var(--status-unknown) 18%, white); color: #334155; border-color: color-mix(in srgb, var(--status-unknown) 36%, transparent); }
.status-warning { background: color-mix(in srgb, var(--status-warning) 18%, white); color: #92400e; border-color: color-mix(in srgb, var(--status-warning) 36%, transparent); }

/* Tegels */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.tile {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 120px;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.12s ease;
    box-shadow: var(--shadow-xs);
}

/* top i.p.v. transform (zie .kpi-card:hover verderop): een transform maakt de tegel een eigen
   stacking context/containing block, waardoor een position:fixed/absolute overlay erin (tooltip,
   dropdown) gevangen raakt en achter latere buurtegels valt. */
.tile:hover { box-shadow: var(--shadow-md); top: -1px; }

.tile.tile-fault   { border-color: var(--status-fault);   }
.tile.tile-open    { border-color: var(--status-open);    }
.tile.tile-closed  { border-color: var(--status-closed);  }
.tile.tile-unknown { border-color: var(--status-unknown); }

.tile-name  { font-weight: 700; font-size: 0.95rem; }
.tile-code  { font-size: 0.75rem; color: var(--color-text-muted); }

/* Tabel */
.table { color: var(--color-text); }
.table td { border-color: var(--color-border); vertical-align: middle; }
.table-responsive { overflow-x: auto; }
.table thead th {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

/* ── Uniforme mobiele kaart-weergave voor datatabellen ───────────────────────
   Tabelstandaard: elke <table class="table-enhanced"> waarvan de <td>'s een
   data-label dragen, wordt op smal scherm (<=768px) omgezet naar kaarten.
   Kolomkoppen verdwijnen en elke cel wordt een label/waarde-regel: label links
   uit data-label, waarde rechts. Eén globale regel i.p.v. per-pagina CSS, zodat
   alle datatabellen identiek mobiel gedrag hebben. Werkt in light én dark via
   de --color-* tokens. Cellen zonder data-label (acties, colspan-meldingen)
   vullen de hele breedte en worden gecentreerd. */
@media (max-width: 768px) {
    /* container niet horizontaal laten scrollen wanneer hij kaarten bevat */
    .table-responsive:has(.table-enhanced) {
        overflow: visible;
    }

    .table-enhanced,
    .table-enhanced > tbody,
    .table-enhanced > tbody > tr {
        display: block;
        width: 100%;
    }

    /* Overschrijf de globale `.table-responsive table { min-width: 640px }`
       (die horizontaal scrollen forceert) zodat de kaart-tabel binnen het
       scherm past i.p.v. te overflowen. Hogere specificiteit dan die regel. */
    .table-responsive .table-enhanced,
    .table-enhanced {
        min-width: 0;
    }

    /* kolomkoppen verbergen; data-label vervangt ze per cel */
    .table-enhanced > thead {
        display: none;
    }

    .table-enhanced > tbody > tr {
        position: relative;
        margin-bottom: 12px;
        border: 1px solid var(--color-border);
        border-radius: 10px;
        background: var(--color-surface);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
        overflow: hidden;
    }

    .table-enhanced > tbody > tr > td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        width: auto;
        padding: 10px 14px;
        text-align: right;
        border: none;
        border-bottom: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
    }

    .table-enhanced > tbody > tr > td:last-child {
        border-bottom: none;
    }

    /* label links uit data-label */
    .table-enhanced > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 38%;
        max-width: 38%;
        text-align: left;
        font-family: var(--font-mono, monospace);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--color-text-muted);
        white-space: normal;
        word-break: break-word;
    }

    /* waarde vult de resterende ruimte zodat lange tekst netjes wrapt */
    .table-enhanced > tbody > tr > td[data-label] > * {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* cellen zonder label (acties, lege-staat met colspan) vullen volle breedte */
    .table-enhanced > tbody > tr > td:not([data-label]),
    .table-enhanced > tbody > tr > td[colspan] {
        justify-content: center;
        text-align: center;
    }
}

/* Heel smal scherm: label boven de waarde i.p.v. ernaast (38% naast lange NL-labels
   zoals "Functioneel herstel (uren)" brak anders lelijk af). */
@media (max-width: 420px) {
    .table-enhanced > tbody > tr > td[data-label] {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        text-align: left;
    }

    .table-enhanced > tbody > tr > td[data-label]::before {
        flex-basis: auto;
        max-width: 100%;
    }

    .table-enhanced > tbody > tr > td[data-label] > * {
        text-align: left;
    }
}

/* Kaartpagina layout */
.map-page {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Kaartmodus-tabs ──────────────────────────────────────────────────── */
.map-mode-tabs {
    display: flex;
    gap: 2px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}
.map-mode-tabs::-webkit-scrollbar { display: none; }

.map-mode-tab {
    flex-shrink: 0;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.map-mode-tab:hover { background: var(--color-hover, rgba(0,0,0,.06)); color: var(--color-text); }
.map-mode-tab.active { background: var(--color-primary); color: #fff; }

[data-theme="dark"] .map-mode-tab:hover { background: rgba(255,255,255,.08); }

/* ── Vaarroute filterbar ──────────────────────────────────────────────── */
.map-route-filterbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 12px;
}
.map-route-filterbar-label {
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.map-route-select {
    flex: 1;
    max-width: 220px;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 13px;
}
.map-route-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.map-route-empty {
    font-size: 13px;
    color: var(--color-text-muted);
    font-style: italic;
}

/* ── Map canvas-rij (kaart + rechterpaneel) ───────────────────────────── */
.map-canvas-row {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 10px;
}
.map-canvas-row .map-wrapper { flex: 1; }

/* ── Rechterpaneel ────────────────────────────────────────────────────── */
.map-side-panel {
    width: 260px;
    flex-shrink: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.map-side-panel-inner {
    overflow-y: auto;
    flex: 1;
    padding: 14px;
    scrollbar-width: thin;
}

.msp-header {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}
.msp-kpi-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.msp-kpi {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.msp-kpi-val {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
}
.msp-kpi-label {
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.msp-kpi--accent .msp-kpi-val { color: var(--color-primary); }
.msp-kpi--fault  .msp-kpi-val { color: #DA5612; }
.msp-kpi--maint  .msp-kpi-val { color: var(--status-warning-text); }
.msp-kpi--ok     .msp-kpi-val { color: #27a353; }

.msp-section-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--color-text-muted);
    margin: 10px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-border);
}

/* Ranglijstrij */
.msp-rank-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.msp-rank-nr {
    width: 16px;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-align: right;
    flex-shrink: 0;
}
.msp-rank-body { flex: 1; min-width: 0; }
.msp-rank-name {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.msp-rank-bar-wrap {
    height: 3px;
    background: var(--color-border);
    border-radius: 2px;
    overflow: hidden;
}
.msp-rank-bar {
    height: 100%;
    background: var(--color-primary);
    border-radius: 2px;
    transition: width .3s ease;
}
.msp-rank-val {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Live-rij */
.msp-live-row, .msp-sensor-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 7px;
}
.msp-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
}
.msp-live-body { flex: 1; min-width: 0; }
.msp-live-name {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msp-live-label {
    display: block;
    font-size: 10px;
    color: var(--color-text-muted);
}
.msp-empty { font-size: 12px; color: var(--color-text-muted); }
.msp-load-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: color-mix(in srgb, #b00020 12%, var(--color-surface));
    border: 1px solid color-mix(in srgb, #b00020 30%, transparent);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--color-text);
    margin-bottom: 12px;
    line-height: 1.5;
}
.msp-load-error-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #b00020;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.msp-tip {
    margin-top: 14px;
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Uitklapbare technische details onder een mislukte modus-render (diagnostiek) */
.msp-error-detail {
    margin: -6px 0 12px;
    font-size: 11px;
}
.msp-error-detail > summary {
    cursor: pointer;
    color: var(--color-text-muted);
    font-weight: 600;
    list-style: revert;
    user-select: none;
}
.msp-error-detail-pre {
    margin: 8px 0 0;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--color-text) 6%, var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Handmatige diagnostiek-banner bovenaan de kaartpagina */
.map-diag-banner {
    border: 1px solid var(--color-border);
}
.map-diag-banner-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.map-diag-close {
    flex-shrink: 0;
}
.map-diag-text {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--color-text);
    white-space: pre-wrap;
    word-break: break-word;
}

/* OSM-bronbadge in vaarroutes-paneel */
.msp-osm-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: #27a353;
    background: color-mix(in srgb, #27a353 10%, var(--color-surface));
    border: 1px solid color-mix(in srgb, #27a353 25%, transparent);
    border-radius: 4px;
    padding: 3px 7px;
    margin-bottom: 10px;
}

/* Vaarroutes stop-lijst */
.msp-route-stop {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 7px;
}
.msp-route-nr {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--color-primary);
}
.msp-route-stop-body { flex: 1; min-width: 0; }
.msp-route-stop-name {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msp-route-stop-meta {
    display: block;
    font-size: 10px;
    color: var(--color-text-muted);
}

/* ── Tijdlijn schuifbalk ──────────────────────────────────────────────── */
.map-timeline-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    flex-shrink: 0;
}
.map-timeline-play {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.map-timeline-play:hover { background: var(--color-hover, rgba(0,0,0,.06)); }
.map-timeline-time {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 52px;
}
.map-timeline-slider {
    flex: 1;
    accent-color: var(--color-primary);
    cursor: pointer;
    height: 4px;
}
.map-timeline-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--color-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Legenda uitbreidingen (cirkel + gradient) ───────────────────────── */
.legend-circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.map-legend--gradient {
    min-width: 220px;
}
.map-legend-gradient-bar {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, #1a73e8, #f59300);
    margin: 6px 0 4px;
}
.map-legend-gradient-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--color-text-muted);
}

/* ── Bottom mode legend bar ─────────────────────────────────────────────── */
.map-mode-legend-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 10px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.mmlb-mode-label {
    color: var(--color-text-muted);
    letter-spacing: .06em;
    white-space: nowrap;
    flex-shrink: 0;
    padding-right: 4px;
    border-right: 1px solid var(--color-border);
}
.mmlb-gradient-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 100px;
    max-width: 260px;
    gap: 2px;
}
.mmlb-gradient {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, #1a73e8, #f59300, #b00020);
}
.mmlb-gradient-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 400;
    color: var(--color-text-muted);
}
.mmlb-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mmlb-dot-label {
    color: var(--color-text);
    white-space: nowrap;
    margin-right: 4px;
}
.mmlb-sep {
    width: 1px;
    height: 12px;
    background: var(--color-border);
    flex-shrink: 0;
    align-self: center;
}
.mmlb-attrib {
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Oranje rank-bar variant voor sensordekking prioriteitslijst */
.msp-rank-bar--warn { background: var(--color-warning, #f59300); }

/* ── Licht thema overrides ────────────────────────────────────────────── */
[data-theme="light"] .map-mode-tab.active { color: #fff; }
[data-theme="light"] .map-timeline-play:hover { background: rgba(0,0,0,.05); }

/* ── Mobiel ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .map-canvas-row { flex-direction: column; }
    .map-side-panel { width: 100%; max-height: 220px; }
    .map-timeline-label { display: none; }
    .map-mode-tabs { border-radius: 6px; }
}

.kpi-card,
.kpi-tile,
.chart-card,
.map-toolbar,
.map-legend,
.page-header-main,
.filter-bar__fields {
    background: color-mix(in srgb, var(--color-surface) 96%, var(--color-bg));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Kaart toolbar */
.map-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.map-toolbar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
}

.map-toolbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.badge-realtime {
    font-size: .72rem;
    color: #1a7a3c; /* 4.6:1 op wit; dark-theme override hieronder */
    font-weight: 600;
    letter-spacing: .03em;
}
[data-theme="dark"] .badge-realtime { color: #4caf74; /* 4.5:1 op #121212 */ }

/* Filter chips */
.map-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Toggle-knop: alleen zichtbaar op mobiel */
.map-filter-toggle-btn {
    display: none;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.map-filter-toggle-btn:hover { color: var(--color-text); border-color: var(--color-text); }
.map-filter-toggle-btn .chevron-up { transform: rotate(180deg); transition: transform 0.2s; }
.map-filter-toggle-btn svg { transition: transform 0.2s; }

@media (max-width: 768px) {
    /* Toggle-knop tonen op mobiel */
    .map-filter-toggle-btn { display: inline-flex; }

    /* Toolbar: titel en toggle naast elkaar, acties eronder */
    .map-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .map-toolbar-title {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Filters standaard verborgen op mobiel */
    .map-toolbar-actions {
        display: none;
        flex-direction: column;
        gap: 8px;
        padding-top: 10px;
        border-top: 1px solid var(--color-border);
        margin-top: 8px;
    }
    /* Zichtbaar wanneer open */
    .map-toolbar-actions.filters-open {
        display: flex;
    }
}

.map-chip {
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    font-size: .8rem;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.map-chip:hover { background: var(--color-hover); }

.map-chip.active {
    background: var(--color-text);
    color: var(--color-bg);
    border-color: var(--color-text);
}

.map-chip.chip-closed.active  { background: #27a353; border-color: #27a353; }
.map-chip.chip-open.active    { background: #1a73e8; border-color: #1a73e8; }
.map-chip.chip-fault.active   { background: #b00020; border-color: #b00020; }
.map-chip.chip-unknown.active { background: #767676; border-color: #767676; }

/* Legenda */
.map-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--color-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.map-legend-overlay {
    position: absolute;
    bottom: 30px;
    right: 10px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.96);
    color: #333;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

[data-theme="dark"] .map-legend-overlay {
    background: rgba(20, 20, 20, 0.96);
    color: #eee;
    border-color: rgba(255, 255, 255, 0.12);
}

.map-legend-title {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    color: var(--color-text);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
}

[data-theme="dark"] .map-legend-title {
    color: #eee;
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.875rem;
    color: var(--color-text);
    line-height: 1.4;
}

[data-theme="dark"] .legend-item {
    color: #ddd;
}

.legend-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    background-clip: padding-box;
}

.legend-dot--closed  { background: var(--status-closed, #27a353); }
.legend-dot--open    { background: var(--status-open, #1a73e8); }
.legend-dot--fault   { background: var(--status-fault, #b00020); }
.legend-dot--warning { background: var(--status-warning, #f59300); }
.legend-dot--maintenance { background: var(--dsb-orange-500, #DA5612); }
.legend-dot--unknown { background: var(--status-unknown, #767676); }

/* Kaart marker pin */
.marker-pin {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.55);
}

/* Permanente Leaflet-tooltip als label onder marker */
.marker-tooltip {
    background: rgba(255,255,255,0.92) !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.28) !important;
    padding: 2px 6px !important;
    font-family: sans-serif;
    font-size: 11px;
    line-height: 1.4;
    color: #202020;
    white-space: nowrap;
    pointer-events: none;
    text-align: center;
}

/* Verberg het standaard pijltje van Leaflet-tooltips */
.marker-tooltip::before {
    display: none !important;
}

/* Hover-only tooltip (bij laag zoomniveau): subtiel andere achtergrond ter onderscheid */
.marker-tooltip.marker-tooltip-hover {
    background: rgba(255,255,255,0.97) !important;
}

[data-theme="dark"] .marker-tooltip {
    background: rgba(14,28,46,0.96) !important;
    color: rgba(240,245,255,0.92) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .marker-tooltip.marker-tooltip-hover {
    background: rgba(20,38,62,0.98) !important;
}
[data-theme="dark"] .marker-tooltip .tt-code,
[data-theme="dark"] .marker-tooltip .tt-extra {
    color: rgba(200,215,235,0.75) !important;
}

.marker-tooltip .tt-name {
    display: block;
    font-weight: 600;
}

.marker-tooltip .tt-code {
    display: block;
    font-size: 10px;
    color: #555;
    font-weight: 400;
}

.marker-tooltip .tt-extra {
    display: block;
    font-size: 10px;
    color: #444;
    font-weight: 400;
}

/* Label-toggle knoppen in toolbar */
.map-label-toggles {
    display: flex;
    gap: 6px;
    align-items: center;
}

.map-label-toggles .toggle-icon {
    font-weight: 700;
    margin-right: 2px;
}

.map-wrapper {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Laad-overlay over de kaart (container blijft gemeten zodat Leaflet correct initialiseert) */
.map-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: color-mix(in srgb, var(--color-bg, #00112C) 78%, transparent);
    color: var(--color-text, #F9F5F1);
    font-size: 0.9rem;
    border-radius: 4px;
    pointer-events: none;
}

.map-page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* De kaartpagina vult de hoogte via de flex-keten (.map-page -> .map-canvas-row ->
   .map-wrapper -> .map-container, allemaal flex:1). Die keten brak omdat .content-canvas
   geen hoogte doorgaf, waardoor .map-page height:100% inklapte en de kaart op zijn
   min-height (320px) bleef hangen — een dunne strook met lege ruimte eronder. Geef de
   canvas alleen hoogte WANNEER hij de kaartpagina bevat (:has), zodat andere pagina's
   ongemoeid blijven. .content-area is al een echte hoogte-referentie (flex:1 in .app-shell). */
.content-canvas:has(> .map-page) {
    height: 100%;
}

.map-container {
    /* Vul de beschikbare ruimte binnen .map-wrapper (zelf flex:1 in .map-page).
       Geen vaste dvh-hoogte: die negeert PageHeader + ticker en zorgt voor
       overlap met de topbar/onderkant. min-height alleen als fallback. */
    flex: 1 1 auto;
    min-height: 320px;
    height: 100%;
    width: 100%;
    border-radius: 4px;
    border: 1px solid var(--color-border);
}

.map-attribution {
    position: absolute;
    bottom: 6px;
    right: 8px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.82);
    color: #333;
    font-size: .72rem;
    padding: 2px 6px;
    border-radius: 3px;
    pointer-events: auto;
}

.map-attribution a {
    color: #0078a8;
    text-decoration: none;
}

.map-attribution a:hover {
    text-decoration: underline;
}

/* ── Vaarroute-schema (schematisch genummerd-baan diagram, auto OSM-groepering) ── */
.vaarroute-schema {
    position: absolute;
    inset: 0;
    z-index: 1050;                       /* dekt kaart + attribution; onder laad-overlay (1100) */
    background: var(--color-bg, #00112C);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: auto;
    padding: 18px 20px 8px;
    display: flex;
    flex-direction: column;
}

.vrs-lanes {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: max-content;              /* sta horizontaal scrollen toe bij volle banen */
}

.vrs-lane {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 34px;
}

.vrs-lane-label {
    position: sticky;
    left: 0;
    z-index: 2;
    flex: 0 0 150px;
    width: 150px;
    text-align: right;
    font-style: italic;
    font-size: .8rem;
    color: var(--color-text-muted);
    background: var(--color-bg, #00112C);
    padding-right: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vrs-track {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 6px 6px;
    /* Gestreepte verbindingslijn achter de pins; pins dekken hem af tussen de stippen. */
    background: repeating-linear-gradient(90deg,
        color-mix(in srgb, var(--color-border) 85%, transparent) 0 5px,
        transparent 5px 11px) left center / 100% 2px no-repeat;
}

.vrs-pin {
    position: relative;
    flex: 0 0 auto;
    min-width: 34px;
    height: 30px;
    padding: 0 9px;
    display: grid;
    place-items: center;
    border-radius: 999px;                 /* pill: ruimte voor brugcode i.p.v. losse cijfer */
    border: 2px solid var(--color-border);
    background: var(--color-bg, #00112C);
    color: var(--color-text);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 0 0 3px var(--color-bg, #00112C);   /* maskeert de lijn rond de pin */
    transition: transform .12s ease;
}
.vrs-pin:hover { transform: scale(1.14); z-index: 3; }
.vrs-pin:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Touch-apparaten: vergroot de pin-tikdoelen naar min. 44x44px (CLAUDE.md touch-target-eis). */
@media (pointer: coarse) {
    .vrs-pin { min-width: 44px; height: 44px; padding: 0 12px; font-size: .78rem; }
    .vrs-track { gap: 16px; }
}

.vrs-footer {
    position: sticky;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}
.vrs-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.vrs-leg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .74rem;
    color: var(--color-text-muted);
}
.vrs-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.vrs-note {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .68rem;
    letter-spacing: .05em;
    color: var(--color-text-muted);
    text-transform: uppercase;
}
.vrs-empty {
    margin: auto;
    color: var(--color-text-muted);
    font-size: .85rem;
}

/* Dashboard KPI cards  stijl conform klantoverzicht */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 1.5rem;
}

.kpi-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--color-primary);
    border-radius: 6px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    position: relative;
}

.kpi-card-info {
    position: absolute;
    top: 8px;
    right: 8px;
    line-height: 1;
}

.kpi-card.kpi-ok   { border-left-color: var(--status-closed); }
.kpi-card.kpi-fault { border-left-color: var(--status-fault); }
.kpi-card.kpi-warn  { border-left-color: var(--status-warning); }
.kpi-card.kpi-info  { border-left-color: var(--status-open); }

.kpi-card-label {
    font-size: .76rem;
    color: var(--color-text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}

.kpi-card-value {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.1;
}

.kpi-card-trend {
    font-size: .78rem;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Tegels-panel */
.tile-toggle-wrap {
    position: relative;
}

.tile-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 200;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    min-width: 220px;
    max-width: 280px;
}

.tile-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-alt, var(--color-surface));
    border-radius: 8px 8px 0 0;
}

.tile-panel-body {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
}

.tile-panel-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
}

.tile-panel-item input[type="checkbox"] {
    accent-color: var(--color-primary);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
}

.tile-panel-footer {
    padding: 8px 14px 10px;
    border-top: 1px solid var(--color-border);
    text-align: right;
}

.tile-panel-section-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-muted, #bebebe);
    padding: 4px 0 2px;
}

/* Dashboard filter balk */
.dashboard-filters {
    background: color-mix(in srgb, var(--color-surface, #fff) 82%, var(--color-bg, #f9f5f1));
    border: 1px solid color-mix(in srgb, var(--color-border, #e2dcd3) 90%, transparent);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 18px;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-start;
    box-shadow: 0 2px 10px rgba(6,42,74,0.05);
}

.dashboard-filters strong {
    font-size: .78rem;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-right: 0.15rem;
    margin-top: 0.7rem;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.dashboard-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.55rem;
    min-width: 0;
}

.dashboard-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    min-width: 0;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    min-height: 38px;
    padding: 0.5rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--color-border, #e2dcd3) 92%, transparent);
    background: color-mix(in srgb, var(--color-surface, #fff) 90%, transparent);
    color: var(--color-text);
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    border-radius: 999px;
    white-space: nowrap;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.filter-chip:hover {
    background: color-mix(in srgb, var(--dsb-orange-500, #DA5612) 8%, var(--color-surface));
    border-color: color-mix(in srgb, var(--dsb-orange-500, #DA5612) 40%, var(--color-border));
    box-shadow: 0 2px 6px rgba(218, 86, 18, 0.12);
    transform: translateY(-1px);
}

.filter-chip:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.filter-chip.active {
    background: linear-gradient(180deg, var(--dsb-orange-500, #DA5612), var(--dsb-orange-600, #C24C0E));
    color: #fff;
    border-color: var(--dsb-orange-500, #DA5612);
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(199, 74, 10, 0.28);
}

.filter-chip.active:hover {
    background: linear-gradient(180deg, var(--dsb-orange-500, #DA5612), var(--dsb-orange-600, #C24C0E));
    border-color: var(--dsb-orange-500, #DA5612);
    box-shadow: 0 4px 12px rgba(199, 74, 10, 0.32);
}

[data-theme="dark"] .filter-chip {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.9);
}

[data-theme="dark"] .filter-chip:hover {
    background: rgba(240,138,74,0.14);
    border-color: rgba(240,138,74,0.5);
    box-shadow: 0 2px 8px rgba(218,86,18,0.2);
}

[data-theme="dark"] .filter-chip.active {
    background: linear-gradient(180deg, rgba(240,138,74,.95), rgba(218,86,18,.9));
    border-color: var(--dsb-orange-400, #F08A4A);
    color: #00112C;
    box-shadow: 0 4px 12px rgba(218,86,18,.3);
}

/* Status-specifieke filter chips */
.filter-chip.chip-closed {
    --chip-color: #27a353;
    --chip-bg: rgba(39, 163, 83, 0.08);
}

.filter-chip.chip-closed:hover {
    background: rgba(39, 163, 83, 0.12);
    border-color: #27a353;
}

.filter-chip.chip-closed.active {
    background: #27a353;
    color: white;
    border-color: #27a353;
    box-shadow: 0 4px 12px rgba(39, 163, 83, 0.3);
}

.filter-chip.chip-open {
    --chip-color: #1a73e8;
    --chip-bg: rgba(26, 115, 232, 0.08);
}

.filter-chip.chip-open:hover {
    background: rgba(26, 115, 232, 0.12);
    border-color: #1a73e8;
}

.filter-chip.chip-open.active {
    background: #1a73e8;
    color: white;
    border-color: #1a73e8;
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
}

.filter-chip.chip-fault {
    --chip-color: #b00020;
    --chip-bg: rgba(236, 0, 0, 0.08);
}

.filter-chip.chip-fault:hover {
    background: rgba(236, 0, 0, 0.12);
    border-color: #b00020;
}

.filter-chip.chip-fault.active {
    background: #b00020;
    color: white;
    border-color: #b00020;
    box-shadow: 0 4px 12px rgba(236, 0, 0, 0.3);
}

.filter-chip.chip-unknown {
    --chip-color: #767676;
    --chip-bg: rgba(118, 118, 118, 0.08);
}

.filter-chip.chip-unknown:hover {
    background: rgba(118, 118, 118, 0.12);
    border-color: #767676;
}

.filter-chip.chip-unknown.active {
    background: #767676;
    color: white;
    border-color: #767676;
    box-shadow: 0 4px 12px rgba(118, 118, 118, 0.3);
}

.filter-chip.chip-maintenance {
    --chip-color: #DA5612;
    --chip-bg: rgba(218, 86, 18, 0.08);
}

.filter-chip.chip-maintenance:hover {
    background: rgba(218, 86, 18, 0.12);
    border-color: #DA5612;
}

.filter-chip.chip-maintenance.active {
    background: #DA5612;
    color: white;
    border-color: #DA5612;
    box-shadow: 0 4px 12px rgba(218, 86, 18, 0.3);
}

/* Dashboard rijen */
.dashboard-row {
    display: grid;
    gap: 18px;
    margin-bottom: 18px;
}

.dashboard-row.cols-2   { grid-template-columns: 1fr 1fr; }
.dashboard-row.cols-3   { grid-template-columns: repeat(3, 1fr); }
.dashboard-row.cols-2-1 { grid-template-columns: 2fr 1fr; }

/* Chart card — gradient gekleurde rand via background-clip techniek */
.chart-card {
    background:
        linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
        linear-gradient(145deg, var(--color-primary, #DA5612) 0%, var(--color-border) 80%) border-box;
    border: 1.5px solid transparent;
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    min-width: 0;
}

.chart-card h2, .chart-card h3 {
    margin: 0 0 14px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

/* Staafdiagram */
.bar-chart-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
}
.bar-chart-wrap::-webkit-scrollbar { height: 5px; }
.bar-chart-wrap::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }

.bar-chart {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 150px;
    padding: 0 0 68px;
    position: relative;
}

.bar-chart::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 68px;
    height: 1px;
    background: var(--color-border);
}

.bc-bar {
    flex: 1 1 0;
    min-width: 8px;
    max-width: 40px;
    background: var(--color-primary);
    border-radius: 3px 3px 0 0;
    position: relative;
    min-height: 4px;
    transition: opacity .15s;
}

.bc-bar:hover { opacity: .8; }
.bc-bar:nth-child(3n+2) { background: var(--color-text); opacity: .65; }
.bc-bar:nth-child(3n+3) { background: var(--status-open); opacity: 1; }

.bc-bar span {
    position: absolute;
    top: calc(100% + 4px);      /* start onder de basislijn, ongeacht balkhoogte */
    bottom: auto;
    right: 50%;                 /* anker op het midden van de balk */
    left: auto;
    transform: rotate(-60deg);
    transform-origin: top right; /* draait weg naar links-onder, blijft onder de basislijn */
    font-size: .62rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    pointer-events: none;
}

/* Donut (CSS-only) */
.donut {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    position: relative;
    flex: 0 0 auto;
}

.donut::after {
    content: '';
    position: absolute;
    inset: 20px;
    background: var(--color-surface);
    border-radius: 50%;
}

.donut-status {
    background: conic-gradient(
        var(--status-closed) 0 70%,
        var(--status-open)   70% 82%,
        var(--status-fault)  82% 92%,
        var(--color-text-muted) 92% 100%
    );
}

.donut-priority {
    background: conic-gradient(
        var(--status-fault)   0 18%,
        var(--status-warning) 18% 55%,
        var(--status-open)    55% 100%
    );
}

.donut-status-dynamic {
    background: conic-gradient(
        var(--status-closed) 0 var(--donut-stop-1, 0%),
        var(--status-open) var(--donut-stop-1, 0%) var(--donut-stop-2, 0%),
        var(--status-fault) var(--donut-stop-2, 0%) var(--donut-stop-3, 0%),
        var(--color-text-muted) var(--donut-stop-3, 0%) 100%
    );
}

.donut-device-dynamic {
    background: conic-gradient(
        var(--status-closed) 0 var(--donut-stop-1, 0%),
        var(--status-warning) var(--donut-stop-1, 0%) var(--donut-stop-2, 0%),
        var(--status-fault) var(--donut-stop-2, 0%) 100%
    );
}

.donut-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.donut-legend {
    font-size: .85rem;
    flex: 1;
    min-width: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}

.donut-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    color: var(--color-text);
}

.donut-legend li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-legend li strong { flex-shrink: 0; color: var(--color-text); }

.donut-legend li::before {
    content: '';
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: var(--color-text-muted);
    flex: 0 0 auto;
}

.donut-legend li.l-closed::before  { background: var(--status-closed); }
.donut-legend li.l-open::before    { background: var(--status-open); }
.donut-legend li.l-fault::before   { background: var(--status-fault); }
.donut-legend li.l-warn::before    { background: var(--status-warning); }
.donut-legend li.l-unknown::before { background: var(--color-text-muted); }
.donut-legend li.l-p1::before      { background: var(--status-fault); }
.donut-legend li.l-p2::before      { background: var(--status-warning); }
.donut-legend li.l-p3::before      { background: var(--status-open); }

/* Heatmap */
.heatmap {
    display: grid;
    grid-template-columns: 38px repeat(24, 1fr);
    gap: 2px;
    font-size: .62rem;
}

.heatmap-label {
    color: var(--color-text-muted);
    font-weight: 700;
    text-align: right;
    padding-right: 4px;
    align-self: center;
}

.heatmap-cell {
    aspect-ratio: 1;
    background: var(--color-border);
    border-radius: 2px;
}

.h-1 { background: rgba(236,0,0,.15); }
.h-2 { background: rgba(236,0,0,.30); }
.h-3 { background: rgba(236,0,0,.50); }
.h-4 { background: rgba(236,0,0,.70); }
.h-5 { background: rgba(236,0,0,.90); }

/* ── Heatmap "Openingen per uur × dag" (demo-pariteit) ── */
.hm-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.7rem;
}
.hm-sub {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}
.hm-tag {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
    padding-top: 0.3rem;
}
.hm-scroll { overflow-x: auto; }
.hm {
    display: grid;
    /* Cellen gecapt op een vaste maximale breedte (i.p.v. 1fr) zodat ze op een
       volle-breedte widget niet uitgroeien tot enorme vierkanten; aspect-ratio: 1
       houdt ze even hoog → veel compactere heatmap. */
    grid-template-columns: 26px repeat(24, minmax(12px, 26px));
    gap: 2px;
    min-width: 560px;
    align-items: center;
}
.hm-d {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    color: var(--color-text-muted);
    text-align: right;
    padding-right: 6px;
}
.hm-cell {
    aspect-ratio: 1;
    border-radius: 3px;
    background: rgba(255,255,255,0.05);
}
[data-theme="light"] .hm-cell { background: rgba(0,17,44,0.05); }
/* Sequentiële schaal in de merkkleur: faint (rustig) → volle primaire kleur (druk).
   Volgt automatisch de organisatie-branding via --color-primary. */
.hm-1 { background: color-mix(in srgb, var(--color-primary, #DA5612) 22%, transparent); }
.hm-2 { background: color-mix(in srgb, var(--color-primary, #DA5612) 42%, transparent); }
.hm-3 { background: color-mix(in srgb, var(--color-primary, #DA5612) 62%, transparent); }
.hm-4 { background: color-mix(in srgb, var(--color-primary, #DA5612) 82%, transparent); }
.hm-5 { background: var(--color-primary, #DA5612); }
/* Light mode: de intensiteitskleuren moeten de hogere-specificiteit lege-cel-override
   ([data-theme="light"] .hm-cell, 0-2-0) verslaan. Gelijke specificiteit + latere bronvolgorde.
   Iets hogere ondergrens zodat lichte drukte ook op witte achtergrond zichtbaar blijft. */
[data-theme="light"] .hm-1 { background: color-mix(in srgb, var(--color-primary, #DA5612) 26%, transparent); }
[data-theme="light"] .hm-2 { background: color-mix(in srgb, var(--color-primary, #DA5612) 46%, transparent); }
[data-theme="light"] .hm-3 { background: color-mix(in srgb, var(--color-primary, #DA5612) 64%, transparent); }
[data-theme="light"] .hm-4 { background: color-mix(in srgb, var(--color-primary, #DA5612) 82%, transparent); }
[data-theme="light"] .hm-5 { background: var(--color-primary, #DA5612); }
.hm-now { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0,0,0,0.30); }
[data-theme="light"] .hm-now { box-shadow: 0 0 0 2px var(--color-topbar-bg, #00112C), 0 0 0 4px rgba(0,17,44,0.18); }
.hm-h {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 9.5px;
    color: var(--color-text-muted);
    text-align: center;
    white-space: nowrap;
}
.hm-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 0.6rem;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.hm-sw {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
}
.hm-now-key {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.hm-now-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: rgba(255,255,255,0.06);
    box-shadow: inset 0 0 0 2px #fff;
    display: inline-block;
}
[data-theme="light"] .hm-now-dot {
    background: rgba(0,17,44,0.06);
    box-shadow: inset 0 0 0 2px var(--color-topbar-bg, #00112C);
}

/* Top-N lijst */
.top-list { display: flex; flex-direction: column; gap: 6px; }

.top-row {
    display: grid;
    grid-template-columns: 1fr 56px;
    gap: 8px;
    align-items: center;
    font-size: .88rem;
}

.top-row-name  { color: var(--color-text); font-weight: 700; }
.top-row-value { text-align: right; font-weight: 800; color: var(--color-text); }

.top-row-bar {
    grid-column: 1 / -1;
    height: 5px;
    background: var(--color-border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.top-row-bar > span {
    display: block;
    height: 100%;
    background: var(--color-primary);
}

/* Beschikbaarheidsbalken */
.availability-list { display: flex; flex-direction: column; gap: 8px; }

.availability-row {
    display: grid;
    grid-template-columns: 130px 1fr 54px;
    gap: 8px;
    align-items: center;
    font-size: .85rem;
}

.availability-bar {
    height: 10px;
    background: var(--color-border);
    border-radius: 3px;
    overflow: hidden;
}

.availability-bar > span { display: block; height: 100%; }
.av-good > span { background: var(--status-closed); }
.av-mid  > span { background: var(--status-warning); }
.av-bad  > span { background: var(--status-fault); }
.av-none > span { background: transparent; }

.availability-value { text-align: right; font-weight: 800; color: var(--color-text); font-size: .85rem; }

/* Lijn-SVG chart */
.line-chart { display: block; width: 100%; max-width: 100%; height: 150px; }
.line-chart .axis  { stroke: var(--color-border); stroke-width: 1; }
.line-chart .grid  { stroke: var(--color-border); stroke-width: 1; stroke-dasharray: 3,3; }
.line-chart .series-1 { fill: none; stroke: var(--color-primary); stroke-width: 2; }
.line-chart .series-2 { fill: none; stroke: var(--status-open); stroke-width: 2; stroke-dasharray: 5,4; }
.line-chart .lbl   { fill: var(--color-text-muted); font-size: 10px; font-weight: 700; }

/* Responsive dashboard */
@media (max-width: 960px) {
    .dashboard-row.cols-2,
    .dashboard-row.cols-2-1 { grid-template-columns: 1fr; }
    .dashboard-row.cols-3   { grid-template-columns: 1fr 1fr; }
    .heatmap { grid-template-columns: 28px repeat(24, 1fr); font-size: .52rem; }
    .availability-row { grid-template-columns: 100px 1fr 48px; }
}

@media (max-width: 640px) {
    .dashboard-row.cols-3 { grid-template-columns: 1fr; }
}

/* Dashboard metrics (legacy  behoud voor compatibiliteit) */
.metric-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1.25rem;
    text-align: center;
}

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.metric-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

/* Foutmelding (globale Blazor-circuitfout) - zelfde kaart-taal als .toast-item:
   surface-achtergrond, accentrand + schaduw, thema-bewust via CSS-tokens. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
}

#blazor-error-ui .error-ui-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 0.75rem 1.1rem;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-top: 3px solid var(--status-fault, #b00020);
    border-radius: 10px 10px 0 0;
    box-shadow: var(--shadow-lg, 0 16px 36px rgba(6, 42, 74, 0.18));
}

#blazor-error-ui .error-ui-icon {
    flex: 0 0 auto;
    display: flex;
    color: var(--status-fault, #b00020);
}

#blazor-error-ui .error-ui-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9rem;
    line-height: 1.4;
}
#blazor-error-ui .error-ui-text strong { display: block; }
#blazor-error-ui .error-ui-text span { color: var(--color-text-muted); }

#blazor-error-ui .reload {
    flex: 0 0 auto;
    color: var(--status-open, #0b5cad);
    text-decoration: underline;
    font-weight: 600;
    white-space: nowrap;
}

#blazor-error-ui .dismiss {
    flex: 0 0 auto;
    cursor: pointer;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 4px;
}
#blazor-error-ui .dismiss:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 12%, transparent); }

@media (max-width: 560px) {
    #blazor-error-ui .error-ui-inner { border-radius: 0; flex-wrap: wrap; }
}

/* Topbar icon knoppen  zie definitieve stijl hoger in dit bestand (bij brand-logo-dark/light) */

/* Topbar live-dot */
.topbar-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dsb-orange-500, #DA5612);
    box-shadow: 0 0 0 0 rgba(218,86,18,0.45);
    animation: dsb-pulse var(--dur-pulse, 1800ms) ease-in-out infinite;
    flex-shrink: 0;
}

/* Alerts / meldingen */
.alert-p1 { background: #ffebee; border-left: 4px solid var(--status-fault); color: #7b0000; }
.alert-p2 { background: #fff3e0; border-left: 4px solid var(--status-warning); color: #5a2e00; }
.alert-p3 { background: #e8f5e9; border-left: 4px solid var(--status-closed); color: #1b4020; }

[data-theme="dark"] .alert-p1 { background: #2d0000; color: #ffb3b3; border-left-color: #b00020; }
[data-theme="dark"] .alert-p2 { background: #2d1a00; color: #ffd699; border-left-color: #ff8c00; }
[data-theme="dark"] .alert-p3 { background: #001a08; color: #9ee8b0; border-left-color: #2e7d32; }

[data-theme="dark"] .alert-danger {
    background-color: rgba(127,29,29,0.82) !important;
    border-color: rgba(248,113,113,0.34) !important;
    color: #FFF7F7 !important;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(120,53,15,0.82) !important;
    border-color: rgba(245,198,106,0.36) !important;
    color: #FFF8E6 !important;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(249,245,241,0.14) !important;
    border-color: rgba(249,245,241,0.30) !important;
    color: #DFF8FF !important;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(20,83,45,0.82) !important;
    border-color: rgba(34,197,94,0.34) !important;
    color: #DCFCE7 !important;
}

/* Toegankelijkheid  focus ring */
:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

h1:focus-visible, h2:focus-visible, h3:focus-visible,
h4:focus-visible, h5:focus-visible, h6:focus-visible,
p:focus-visible, div:focus-visible, section:focus-visible {
    outline: none;
}

/* Responsive */
@media (max-width: 768px) {
    .topbar .nav-toggle { display: flex; }

    /* sidebar-positie en z-index worden beheerd door het Sidebar + offcanvas blok hieronder */

    .tile-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media (max-width: 480px) {
    .metric-value { font-size: 1.5rem; }
    .tile { min-height: 100px; }
}

/* =============================================
   Login pagina
   ============================================= */
.login-outer {
    min-height: 100vh;
    background-color: var(--color-bg-secondary, #f5f5f5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* De rijke loginpagina (.login-page) is full-bleed: ze regelt zelf achtergrond,
   hoogte en centrering. De .login-outer-wrapper is bedoeld voor de smalle
   .login-card-schermen (wachtwoord vergeten / melding) en mag de loginpagina dan
   niet inkaderen met padding, centrering of eigen achtergrond — anders verschijnt
   er op desktop een rand rondom het scherm. Vergelijk .content-canvas:has(> .map-page). */
.login-outer:has(> .login-page) {
    padding: 0;
    align-items: stretch;
    background-color: transparent;
}

.login-outer--top {
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 0;
}

@media (max-width: 576px) {
    .login-outer--top {
        padding-inline: 0;
    }
}

.login-wrapper {
    width: 100%;
    max-width: 420px;
}

.login-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #bebebe);
    border-radius: 6px;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.login-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.brand-dot-lg {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary, #F08A4A);
    margin-bottom: 0.75rem;
}

.login-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-text, #202020);
}

.login-subtitle {
    color: var(--color-text-muted, #767676);
    font-size: 0.9rem;
    margin: 0.25rem 0 0;
}

/* =============================================
   Kiosk modus - altijd dark, 1920x1080
   ============================================= */
.kiosk-page {
    background:
        radial-gradient(circle at 18% 12%, rgba(218,86,18, 0.08), transparent 30rem),
        radial-gradient(circle at 82% 88%, rgba(0,200,255, 0.05), transparent 28rem),
        linear-gradient(135deg, #00081B 0%, #00112C 55%, #051E3A 100%);
    color: rgba(245, 250, 255, 0.96);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-display, 'Space Grotesk', 'Inter', system-ui, sans-serif);
}

/* -- Header -- */
.kiosk-header {
    background: linear-gradient(180deg, rgba(0,8,27,0.98) 0%, rgba(3,16,42,0.95) 100%);
    border-bottom: 1px solid rgba(218,86,18, 0.35);
    box-shadow: 0 2px 0 rgba(218,86,18, 0.15), 0 8px 32px rgba(0, 0, 0, 0.45);
    padding: 0 36px;
    height: 72px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}

/* Brand-blok met logo + tagline */
.kiosk-brand-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    flex: 0 0 auto;
}
/* Org-logo (inline SVG) op de altijd-donkere kiosk: wit via currentColor zodat
   ook een navy/lichte org-SVG leesbaar is. Alleen gevulde/gestreepte vormen. */
.kiosk-brand-logo-svg { display: inline-flex; align-items: center; }
.kiosk-brand-logo-svg svg { height: 46px; width: auto; max-width: 320px; color: #F9F5F1; fill: currentColor; }
.kiosk-brand-logo-svg svg [fill]:not([fill="none"]) { fill: currentColor; }
.kiosk-brand-logo-svg svg [stroke]:not([stroke="none"]) { stroke: currentColor; }

/* ── 'Powered by De Slimme Brug'-attributie (white-label) ──────────────────
   Klein en thema-bewust. De mark-strokes volgen currentColor; het oranje
   stipje blijft vast. Kleur is context-afhankelijk omdat sidebar en kiosk
   altijd donker zijn (token --color-text-muted zou daar onleesbaar zijn). */
.powered-by {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.66rem;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    opacity: 0.9;
    white-space: nowrap;
    user-select: none;
}
/* Het woordmerk volgt currentColor (= de badge-kleur); het oranje stipje blijft vast. */
.powered-by .pb-logo { height: 15px; width: auto; flex: 0 0 auto; }
/* Onderaan de sidebar: gebruik dezelfde tokens als de (bewezen leesbare)
   nav-groepskoppen, zodat de attributie meeschaalt met welke sidebar-kleur dan
   ook (bone in light / navy in dark, of org-branding). */
.sidebar .powered-by {
    color: var(--color-sidebar-nav-header, rgba(255,255,255,0.6));
    padding: 0.55rem 1rem 0.7rem;
    border-top: 1px solid var(--color-sidebar-border, rgba(255,255,255,0.12));
    margin-top: 0.25rem;
}
/* Auth/portaal-schermen (EmptyLayout): vaste kleine footer onderaan, gecentreerd.
   De login-kaart staat in een flex-center container, dus niet als rij-sibling. */
.powered-by--auth {
    position: fixed;
    left: 50%;
    bottom: 0.85rem;
    transform: translateX(-50%);
    z-index: 5;
    margin: 0;
}
/* Kiosk (altijd donker): linksonder zodat het de rechts-uitgelijnde footer
   (LoRaWAN-labels + uitlogknop) niet overlapt. */
.powered-by--kiosk {
    position: fixed; left: 16px; bottom: 12px; z-index: 4;
    color: rgba(205, 239, 248, 0.5); font-size: 0.6rem;
}

/* Wettelijk verplichte toegankelijkheidsverklaring: altijd zichtbaar, ongeacht
   org-branding (in tegenstelling tot .powered-by hierboven). */
.legal-footer {
    font-size: 0.66rem;
    line-height: 1;
    opacity: 0.9;
}
.legal-footer a {
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.legal-footer a:hover, .legal-footer a:focus-visible {
    color: var(--color-text);
}
.sidebar .legal-footer {
    padding: 0 1rem 0.6rem;
}
.sidebar .legal-footer a { color: var(--color-sidebar-nav-header, rgba(255,255,255,0.6)); }
/* Auth/portaal-schermen (EmptyLayout): vaste kleine footer, boven de powered-by-badge
   zodat ze elkaar niet overlappen wanneer beide zichtbaar zijn. */
.legal-footer--auth {
    position: fixed;
    left: 50%;
    bottom: 2.5rem;
    transform: translateX(-50%);
    z-index: 5;
}

.kiosk-brand-logo {
    height: 46px;
    width: auto;
    max-width: 320px;
    object-fit: contain;
    display: block;
}
.kiosk-brand-fallback {
    color: #DA5612;
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
}
.kiosk-brand-tagline {
    font-size: 0.72rem;
    color: rgba(205, 239, 248, 0.60);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 500;
}

/* Verticale scheidslijn tussen brand en metrics */
.kiosk-header-divider {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, transparent, rgba(249,245,241,0.25), transparent);
    flex: 0 0 auto;
}

.kiosk-metrics {
    display: flex;
    gap: 10px;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
}
.kiosk-metric {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
    white-space: nowrap;
    letter-spacing: .01em;
}
.kiosk-metric-value { font-size: 1.12em; font-weight: 900; font-variant-numeric: tabular-nums; }
.kiosk-metric-label { margin-left: 5px; opacity: .80; text-transform: uppercase; font-size: .78em; letter-spacing: .04em; }
.kiosk-metric.metric-fault   { background: rgba(236, 0, 0, 0.80); border-color: rgba(255, 100, 100, 0.40); }
.kiosk-metric.metric-unknown { background: rgba(100, 100, 100, 0.65); border-color: rgba(190, 190, 190, 0.28); }
.kiosk-metric.metric-total   { background: rgba(205,239,248, 0.12); border-color: rgba(205,239,248, 0.35); }
.kiosk-metric.metric-closed  { background: rgba(22, 163, 74, 0.68); border-color: rgba(134, 239, 172, 0.32); }
.kiosk-metric.metric-open    { background: rgba(218, 86, 18, 0.72); border-color: rgba(245, 168, 122, 0.35); }
.kiosk-metric.metric-p1      { background: #8b0000; animation: kiosk-pulse-metric 1.4s ease-in-out infinite; }

.kiosk-clock {
    color: #CDEFF8;
    font-size: 1.55rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    flex: 0 0 auto;
    margin-left: auto;
    letter-spacing: .04em;
    text-shadow: 0 0 18px rgba(205,239,248, 0.35);
}

/* -- Tile grid -- */
.kiosk-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    padding: 8px;
    background: transparent;
    align-content: start;
    align-items: stretch;
    flex: 1;
}
.kiosk-tile {
    background: linear-gradient(145deg, rgba(5,22,42,0.92) 0%, rgba(8,34,58,0.88) 100%);
    border: 1px solid rgba(205,239,248, 0.10);
    border-left: 6px solid #444;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.04);
    padding: 16px 15px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    overflow: hidden;
    min-height: 172px;
    height: 172px;
    box-sizing: border-box;
    transition: box-shadow 0.2s;
}
.kiosk-tile:hover {
    box-shadow: 0 12px 36px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.07);
}
.kiosk-tile-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}
.kiosk-tile-icon {
    font-size: 1.25rem;
    line-height: 1;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    font-weight: 900;
    opacity: .92;
}
.kiosk-tile-closed  { border-left-color: #22C55E; background: linear-gradient(135deg, rgba(9,36,22,0.95) 0%, rgba(5,22,42,0.90) 100%); }
.kiosk-tile-open    { border-left-color: #DA5612; background: linear-gradient(135deg, rgba(52,22,5,0.96) 0%, rgba(5,22,42,0.90) 100%); }
.kiosk-tile-fault   { border-left-color: #b00020; background: linear-gradient(135deg, rgba(70,5,5,0.96) 0%, rgba(5,22,42,0.90) 100%); }
.kiosk-tile-unknown { border-left-color: #868686; background: linear-gradient(135deg, rgba(30,34,40,0.94) 0%, rgba(5,22,42,0.90) 100%); }
.kiosk-tile-maintenance { border-left-color: #7d5fb2; background: linear-gradient(135deg, rgba(40,26,66,0.96) 0%, rgba(5,22,42,0.90) 100%); }

/* Tile icon kleur per status */
.kiosk-tile-closed .kiosk-tile-icon  { background: rgba(34,197,94,0.18); color: #86EFAC; }
.kiosk-tile-open   .kiosk-tile-icon  { background: rgba(218,86,18,0.18);  color: #F5A87A; }
.kiosk-tile-fault  .kiosk-tile-icon  { background: rgba(236,0,0,0.18);    color: #FF9D9D; }
.kiosk-tile-unknown .kiosk-tile-icon { background: rgba(134,134,134,0.14); color: #D8D8D8; }
.kiosk-tile-maintenance .kiosk-tile-icon { background: rgba(125,95,178,0.22); color: #C4B5FD; }

.kiosk-tile-closed  .kiosk-tile-status { color: #86EFAC; }
.kiosk-tile-open    .kiosk-tile-status { color: #F5A87A; }
.kiosk-tile-fault   .kiosk-tile-status { color: #FF9D9D; }
.kiosk-tile-unknown .kiosk-tile-status { color: #D0D0D0; }
.kiosk-tile-maintenance .kiosk-tile-status { color: #C4B5FD; }

/* Fault tile: subtiele rode glow */
.kiosk-tile-fault {
    box-shadow: 0 8px 24px rgba(0,0,0,0.28), 0 0 0 1px rgba(236,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.03);
}

.kiosk-tile.status-offline {
    opacity: .48;
    border-left-color: #767676;
    background: linear-gradient(135deg, rgba(14,18,24,0.95), rgba(8,14,22,0.92)) !important;
    filter: grayscale(.60) brightness(.85);
}
.kiosk-tile.status-offline .kiosk-tile-status { color: #BEBEBE; }
.kiosk-offline-cross { display: none; }

.kiosk-tile-name   { font-weight: 800; font-size: 1.18rem; color: #F9F5F1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; line-height: 1.2; }
.kiosk-tile-code   { font-size: 0.82rem; color: rgba(205, 239, 248, 0.50); letter-spacing: .06em; text-transform: uppercase; }
.kiosk-tile-status { font-size: 1.15rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.kiosk-tile-meta   { font-size: 0.88rem; color: rgba(205, 239, 248, 0.62); }
.kiosk-tile-flags  { display: flex; gap: 0.38rem; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.kiosk-flag { font-size: 0.74rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; align-self: flex-start; letter-spacing: .03em; }
.kiosk-flag-p1      { background: rgba(236,0,0,0.90);    color: white; box-shadow: 0 0 8px rgba(236,0,0,0.50); }
.kiosk-flag-p2      { background: rgba(184,68,0,0.88);   color: white; }
.kiosk-flag-water   { background: rgba(2,119,189,0.88);  color: white; }
.kiosk-flag-toolong { background: rgba(125,78,0,0.88);   color: white; }
.kiosk-flag-safety  { background: rgba(106,0,106,0.88);  color: white; }
.kiosk-flag-offline { background: rgba(80,80,80,0.80);   color: #ccc; }

/* Sensor-type badge rechtsbovenin de tile */
.kiosk-tile.src-lorawan::after,
.kiosk-tile.src-wired::after,
.kiosk-tile.src-none::after {
    position: absolute;
    top: 10px; right: 12px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: rgba(205,239,248, 0.42);
    pointer-events: none;
    z-index: 3;
    line-height: 1;
    text-transform: uppercase;
}
.kiosk-tile.src-lorawan::after { content: "LoRa"; }
.kiosk-tile.src-wired::after   { content: "6x"; }
.kiosk-tile.src-none::after    { content: "---"; }
.kiosk-tile.src-lorawan.status-offline::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom right, transparent calc(50% - 1.5px), rgba(200,30,30,.65) calc(50% - 1.5px), rgba(200,30,30,.65) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
        linear-gradient(to bottom left,  transparent calc(50% - 1.5px), rgba(200,30,30,.65) calc(50% - 1.5px), rgba(200,30,30,.65) calc(50% + 1.5px), transparent calc(50% + 1.5px));
    pointer-events: none;
    z-index: 2;
}
.kiosk-tile.src-wired.status-offline {
    border-left: 4px dashed rgba(200,30,30,.6) !important;
    opacity: .6;
}
.kiosk-footer {
    background: linear-gradient(180deg, rgba(3,14,28,0.95) 0%, rgba(0,8,27,0.98) 100%);
    border-top: 1px solid rgba(218,86,18, 0.20);
    padding: 0 36px;
    height: 44px;
    display: flex;
    gap: 24px;
    flex-wrap: nowrap;
    align-items: center;
    color: rgba(205, 239, 248, 0.45);
    font-size: .82rem;
    letter-spacing: .03em;
    flex-shrink: 0;
    overflow: hidden;
}

.kiosk-exit-btn {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    right: max(14px, env(safe-area-inset-right, 0px));
    z-index: 10020;
    min-height: 38px;
    min-width: 80px;
    border-radius: 999px;
    border: 1px solid rgba(218,86,18, 0.50);
    background: rgba(0,8,27,0.88);
    color: rgba(205,239,248,0.90);
    font-size: 0.80rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 0 1rem;
    backdrop-filter: blur(8px);
    transition: background 0.15s, border-color 0.15s;
}
.kiosk-exit-btn:hover {
    background: rgba(218,86,18,0.18);
    border-color: rgba(218,86,18,0.80);
    color: #F5A87A;
}

.kiosk-logout-btn {
    display: inline-flex;
    align-items: center;
    margin-left: 18px;
    height: 28px;
    padding: 0 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(236,0,0,0.45);
    background: transparent;
    color: rgba(205,239,248,0.80);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.kiosk-logout-btn:hover {
    background: rgba(236,0,0,0.18);
    border-color: rgba(236,0,0,0.80);
    color: #b00020;
}


/* Live badge in footer */
.kiosk-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 800;
    color: #86EFAC;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.kiosk-live-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 6px rgba(34,197,94,0.70);
    animation: kiosk-pulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes kiosk-pulse {
    0%, 100% { opacity: 1; transform: scale(1);   box-shadow: 0 0 6px rgba(34,197,94,0.70); }
    50%       { opacity: .5; transform: scale(.65); box-shadow: 0 0 3px rgba(34,197,94,0.30); }
}
.kiosk-demo-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(218,86,18,0.25);
    border: 1px solid rgba(218,86,18,0.50);
    color: #F5A87A;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

/* Geen verbinding overlay */
.kiosk-no-connection {
    position: fixed;
    inset: 0;
    background: rgba(0,6,18,.88);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(8px) saturate(0.6);
}
.kiosk-no-connection-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: rgba(205,239,248,0.90);
    text-align: center;
    padding: 48px 56px;
    background: rgba(5,18,36,0.85);
    border-radius: 24px;
    border: 1px solid rgba(218,86,18,0.30);
    box-shadow: 0 32px 80px rgba(0,0,0,0.60);
}
.kiosk-no-connection-title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: .04em;
    margin: 0;
    color: #F08A4A;
}
.kiosk-no-connection-sub {
    font-size: .95rem;
    color: #aaa;
    margin: 0;
}
.kiosk-reconnect-spinner {
    width: 32px; height: 32px;
    border: 3px solid #333;
    border-top-color: #F08A4A;
    border-radius: 50%;
    animation: kiosk-spin 0.9s linear infinite;
}
@keyframes kiosk-spin {
    to { transform: rotate(360deg); }
}

/* P1-metric extra opmaak */
.kiosk-metric.metric-p1 { background: #8b0000; animation: kiosk-pulse-metric 1s ease-in-out infinite; }
@keyframes kiosk-pulse-metric {
    0%, 100% { opacity: 1; }
    50%       { opacity: .7; }
}

/* =============================================
   LOGIN PAGINA
   ============================================= */

.login-page {
    display: flex;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    /* Login is een merkscherm: altijd de (instelbare) donkere brand-achtergrond,
       onafhankelijk van het app-thema. Alle kleuren komen uit de branding-tokens. */
    background: var(--color-topbar-bg, #00112C);
    position: relative;
    overflow: hidden;
}

/* Ronde thema-toggle knop rechtsboven */
/* Drie iconen rechtsboven op login-pagina */
.login-top-actions {
    position: fixed;
    top: 1.2rem;
    right: 1.2rem;
    z-index: 100;
    display: flex;
    gap: 10px;
    align-items: center;
}

.login-top-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--color-border, #333);
    background: var(--color-surface, #1e1e1e);
    color: var(--color-text, #f0f0f0);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    padding: 0;
}

.login-top-btn:hover {
    background: var(--color-primary, #DA5612);
    border-color: var(--color-primary, #DA5612);
    color: #fff;
}

/* Op mobiel is er geen menu-knop op de loginpagina */
.login-menu-btn {
    display: none !important;
}

/* Linkerpaneel  branding */
.login-brand-panel {
    flex: 0 0 62%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4.5rem clamp(2rem, 5vw, 5rem);
    background:
        radial-gradient(circle at 68% 35%, color-mix(in srgb, var(--color-primary, #DA5612) 16%, transparent), transparent 24rem),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.03) 1px, transparent 1px),
        var(--color-topbar-bg, #00112C);
    background-size: auto, 72px 72px, 72px 72px, auto;
    border-right: 1px solid rgba(255,255,255,0.08);
    position: relative;
    overflow: hidden;
}

/* Subtiele achtergrond decoratie: zachte gloed in de merkkleur */
.login-brand-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 50%;
    background: radial-gradient(circle at 74% 52%, color-mix(in srgb, var(--color-primary, #DA5612) 10%, transparent) 0%, transparent 34rem);
    pointer-events: none;
}

.login-ams-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: clamp(1.75rem, 4vw, 3.25rem);
    position: relative;
    z-index: 2;
}

.login-wordmark {
    width: min(380px, 72vw);
    height: auto;
    display: block;
}

/* Wrapper voor theme-wisselende fallback logos */
.login-wordmark-wrap {
    display: block;
    max-width: min(380px, 72vw);
}

/* Dark mode (standaard): inverse logo zichtbaar, default verborgen */
.login-logo-default { display: none; }
.login-logo-inverse { display: block; }

/* Light mode: default logo zichtbaar, inverse verborgen */
[data-theme="light"] .login-logo-default { display: block; }
[data-theme="light"] .login-logo-inverse { display: none; }

/* Branding-logo aangeleverd als rauwe SVG (organisatie-branding) */
.login-wordmark-svg {
    display: inline-flex;
    align-items: center;
    max-width: min(380px, 72vw);
}
.login-wordmark-svg svg,
.login-wordmark-svg img {
    max-width: 100%;
    max-height: 72px;
    height: auto;
    width: auto;
}

.login-ams-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.login-ams-logo-text span {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
}

[data-theme="light"] .login-ams-logo-text span {
    color: #0e1620;
}

.login-slogans {
    margin-bottom: 1.35rem;
    max-width: min(480px, 52%);
    position: relative;
    z-index: 2;
}

.login-input-shell {
    position: relative;
}

.login-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    padding: 0.28rem 0.65rem;
    border: 1px solid rgba(249,245,241,0.12);
    border-radius: var(--radius-pill, 999px);
    background: rgba(249,245,241,0.035);
    color: rgba(249,245,241,0.64);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: clamp(0.58rem, 0.8vw, 0.72rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.login-eyebrow span {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--color-accent, #DA5612);
    box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent, #DA5612) 70%, transparent);
}

.login-slogan-line {
    display: block;
    font-size: clamp(2.15rem, 4vw, 4.15rem);
    font-weight: 600;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    letter-spacing: -0.045em;
    color: #F9F5F1;
    line-height: 1.02;
}

.login-slogan-block {
    margin: 0;
    font-size: clamp(1.55rem, 2.4vw, 2.8rem);
    font-weight: 600;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    letter-spacing: -0.04em;
    color: #F9F5F1;
    line-height: 1.1;
    white-space: pre-line;
}

/* =====================================================================
   InfoTooltip component
   ===================================================================== */
.info-tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: .35rem;
    vertical-align: middle;
}

.info-tooltip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1.5px solid var(--color-border, #888);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted, #aaa);
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
}

.info-tooltip-btn:hover,
.info-tooltip-btn:focus-visible {
    background: var(--color-accent, #2E72A8);
    color: #fff;
    border-color: var(--color-accent, #2E72A8);
    outline: none;
}

/* Overlay die klikken buiten de tooltip sluit */
.info-tooltip-overlay {
    position: fixed;
    inset: 0;
    z-index: 1599;
    background: transparent;
}

.info-tooltip-box {
    position: fixed;
    z-index: 1600;
    width: 300px;
    max-width: calc(100vw - 24px);
    background: var(--color-card, #1e1e1e);
    border: 1px solid var(--color-border, #555);
    border-radius: 8px;
    padding: .8rem 1rem .85rem;
    box-shadow: 0 6px 24px rgba(0,0,0,.55);
    font-size: .83rem;
    color: var(--color-text, #e8e8e8);
    word-break: break-word;
    line-height: 1.5;
    overflow-y: auto;
    overscroll-behavior: contain;
}

[data-theme="light"] .info-tooltip-box {
    background: #ffffff;
    border-color: #d0d0d0;
    color: #202020;
    box-shadow: 0 6px 24px rgba(0,0,0,.15);
}

/* Dark mode: het uitlegpaneel duidelijk laten "zweven" boven de donkere pagina/heatmap.
   --color-card (#062A4A) ligt te dicht bij de pagina-bg (#00112C) en een donkere schaduw
   is op een donkere pagina onzichtbaar; daardoor versmelt het paneel met drukke achtergrond-
   content (bv. de openingen-heatmap). Lichtere navy-surface + sterkere rand + zichtbare
   schaduw geven het paneel een duidelijke leesrand. Tekstcontrast blijft ~10:1. */
[data-theme="dark"] .info-tooltip-box {
    background: var(--dsb-navy-700, #143A5B);
    border-color: rgba(245,250,255,0.26);
    box-shadow: 0 12px 34px rgba(0,0,0,0.66), 0 0 0 1px rgba(0,0,0,0.55);
}

/* Caret/pijltje dat het uitlegpaneel visueel aan de info-knop koppelt.
   Eigen fixed element (geen child van de box) zodat overflow:auto het niet afknipt.
   Een 45deg-geroteerd vierkant; alleen de twee buitenwaartse randen zijn zichtbaar. */
.info-tooltip-caret {
    position: fixed;
    z-index: 1601;
    width: 12px;
    height: 12px;
    background: var(--color-card, #1e1e1e);
    transform: rotate(45deg);
    pointer-events: none;
}
[data-theme="light"] .info-tooltip-caret {
    background: #ffffff;
    border: 1px solid #d0d0d0;
}
[data-theme="dark"] .info-tooltip-caret {
    background: var(--dsb-navy-700, #143A5B);
    border: 1px solid rgba(245,250,255,0.26);
}
.info-tooltip-caret.caret-up   { border-bottom: none; border-right: none; } /* wijst omhoog (paneel onder de knop) */
.info-tooltip-caret.caret-down { border-top: none;    border-left: none;  } /* wijst omlaag (paneel boven de knop) */

/* Zelfde dark-mode elevatie als .info-tooltip-box voor de overige backdrop-loze
   zwevende panelen (dropdowns/menu's): hun --color-surface/--bg-surface (#062A4A)
   ligt te dicht bij de pagina-bg (#00112C) en versmelt over drukke content. Een
   lichtere navy-surface + sterkere rand + zichtbare schaduw geeft een leesrand.
   .kpi-thresh heeft al een dimmende backdrop en is hier bewust NIET opgenomen. */
[data-theme="dark"] .tile-panel,
[data-theme="dark"] .ctx-menu,
[data-theme="dark"] .metro-detail-panel {
    background: var(--dsb-navy-700, #143A5B);
    border-color: rgba(245,250,255,0.24);
    box-shadow: 0 12px 34px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.5);
}

.info-tooltip-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .45rem;
}

.info-tooltip-title {
    font-weight: 700;
    font-size: .87rem;
    color: var(--color-text, #f0f0f0);
    line-height: 1.3;
    flex: 1;
}

[data-theme="light"] .info-tooltip-title { color: #202020; }

.info-tooltip-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    background: none;
    border: none;
    font-size: .95rem;
    color: var(--color-text-muted, #aaa);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    border-radius: 6px;
}

.info-tooltip-close:hover { color: var(--color-accent, #2E72A8); }

.info-tooltip-body {
    color: var(--color-text-muted, #bbb);
    line-height: 1.55;
}

[data-theme="light"] .info-tooltip-body { color: #444; }

.info-tooltip-fakedata {
    margin-top: .55rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--color-border, #555);
    font-size: .79rem;
    color: var(--color-text-muted, #999);
    line-height: 1.45;
}

[data-theme="light"] .info-tooltip-fakedata { color: #666; }

.info-tooltip-fakedata-badge {
    display: inline-block;
    background: rgba(224,168,0,.18);
    color: #d4a000;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: .76rem;
    font-weight: 700;
    margin-right: .3rem;
    white-space: nowrap;
}

[data-theme="light"] .info-tooltip-fakedata-badge {
    background: rgba(224,168,0,.12);
    color: #a07800;
}

/* -- Tegelweergave  bediencentrale (dark tile grid) ---------------- */
.tiles-dark {
    background: var(--color-surface, #1a1a1a);
    border-radius: 18px;
    padding: 22px;
    border: 1px solid var(--color-border, rgba(255,255,255,.08));
}

.tiles-dark-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}

.tiles-dark-header strong {
    color: var(--color-text, #fff);
    font-size: 1.15rem;
}

.tile-dark-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.tile-dark {
    background: var(--color-surface-alt, #2a2a2a);
    border: 2px solid var(--color-border, #444);
    border-radius: 12px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tile-dark-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.tile-dark::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 6px;
}

.tile-dark.td-closed::before { background: var(--status-closed, #00893c); }
.tile-dark.td-open::before   { background: var(--status-open, #004699); }
.tile-dark.td-fault::before  { background: var(--status-fault, #b00020); }
.tile-dark.td-warning::before { background: var(--status-warning, #ff9100); }
.tile-dark.td-maintenance::before { background: var(--status-maintenance, #7d5fb2); }
.tile-dark.td-unknown::before { background: var(--color-border, #555); }

/* sensor-type icon top-right via ::after */
.tile-dark.src-lorawan::after,
.tile-dark.src-wired::after {
    position: absolute;
    top: 6px; right: 8px;
    font-size: .75rem;
    opacity: .55;
    pointer-events: none;
    z-index: 3;
    font-family: sans-serif;
}
.tile-dark.src-lorawan::after { content: 'LoRa'; }
.tile-dark.src-wired::after   { content: '6x'; }
/* src-none: geen icoon */

/* LoRaWAN offline: diagonal red cross */
.tile-dark.src-lorawan.td-offline::before {
    background:
        linear-gradient(to bottom right,
            transparent calc(50% - 1.5px),
            rgba(200,30,30,.65) calc(50% - 1.5px),
            rgba(200,30,30,.65) calc(50% + 1.5px),
            transparent calc(50% + 1.5px)),
        linear-gradient(to bottom left,
            transparent calc(50% - 1.5px),
            rgba(200,30,30,.65) calc(50% - 1.5px),
            rgba(200,30,30,.65) calc(50% + 1.5px),
            transparent calc(50% + 1.5px));
    width: 100%; height: 100%;
}
/* Wired offline: dashed border */
.tile-dark.src-wired.td-offline {
    border: 2px dashed rgba(200,30,30,.6) !important;
    opacity: .65;
}

.tile-dark h4 {
    color: var(--color-text, #fff);
    margin: 0;
    font-size: 1.05rem;
    padding-right: 24px; /* room for sensor icon */
}

.tile-dark .tile-time {
    color: var(--color-text-muted, #9a9a9a);
    font-size: .82rem;
}

.tile-dark-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}

.btn-mini {
    flex: 1;
    background: transparent;
    border: 1px solid var(--color-border, #555);
    color: var(--color-text, #fff);
    font-size: .82rem;
    font-weight: 700;
    padding: 8px;
    border-radius: 0;
    cursor: pointer;
    min-height: 36px;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-mini:hover {
    background: var(--color-surface-alt, rgba(255,255,255,.08));
    color: var(--color-text, #fff);
    text-decoration: none;
}

.btn-mini.btn-fault {
    border-color: var(--status-fault, #b00020);
    color: var(--status-fault, #b00020);
}

.btn-mini.btn-fault:hover {
    background: rgba(236,0,0,.12);
}

.pill-dark {
    background: var(--color-surface-alt, #2a2a2a);
    color: var(--color-text, #fff);
    border: 2px solid var(--color-border, #555);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 700;
    white-space: nowrap;
}

.pill-dark-fault {
    background: var(--color-surface-alt, #2a2a2a);
    color: var(--status-fault, #b00020);
    border: 2px solid var(--status-fault, #b00020);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 700;
    white-space: nowrap;
}

/* -- KPI cards voor ObjectDetail ------------------------------------ */
.kpi-grid-detail {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.kpi-card-detail {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-left: 5px solid var(--c-red);
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(32,32,32,.08);
}

.kpi-card-detail.ok   { border-left-color: var(--status-closed, #00893c); }
.kpi-card-detail.warn { border-left-color: var(--status-warning, #ff9100); }
.kpi-card-detail.info { border-left-color: var(--status-open, #004699); }

.kpi-card-label-detail {
    font-size: .75rem;
    color: var(--text-muted, #767676);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.kpi-card-value-detail {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-primary, #202020);
    line-height: 1.1;
    margin: 4px 0 2px;
}

.kpi-card-sub-detail {
    font-size: .78rem;
    color: var(--text-muted, #767676);
    font-weight: 600;
}

/* chart-card header met I knop */
.chart-card h2, .chart-card h3 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .2rem;
    margin-bottom: .6rem;
}

/* Voorbeelddata banner op chart-card */
.chart-card-fakedata-banner {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgba(224,168,0,.18);
    color: #7a5800; /* 4.6:1 op wit */ 
    border: 1px solid rgba(224,168,0,.35);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: .74rem;
    font-weight: 600;
    margin-bottom: .6rem;
}
[data-theme="dark"] .chart-card-fakedata-banner { color: #ffd566; /* 7.1:1 op #1e1e1e */ }

[data-theme="light"] .chart-card-fakedata-banner {
    background: rgba(224,168,0,.09);
    color: #8a6b00;
    border-color: rgba(224,168,0,.3);
}

.login-slogan-line.accent,
.login-slogan-block .accent {
    color: var(--color-accent, #DA5612);
}

.login-tagline {
    max-width: min(470px, 54%);
    font-size: clamp(1rem, 1.2vw, 1.18rem);
    color: rgba(249,245,241,0.72);
    margin-bottom: 1.35rem;
    line-height: 1.7;
    position: relative;
    z-index: 2;
    max-width: min(470px, 54%);
}

[data-theme="light"] .login-tagline {
    color: #5b6773;
}

/* Live status indicator op login pagina */
.login-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(249,245,241,0.12);
    border-radius: var(--radius-pill, 999px);
    background: rgba(249,245,241,0.04);
    font-size: 0.8rem;
    color: rgba(249,245,241,0.68);
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

[data-theme="light"] .login-live-indicator {
    border-color: rgba(22,163,74,0.25);
    background: rgba(22,163,74,0.06);
    color: #3f4a5a;
}

.login-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent, #DA5612);
    box-shadow: 0 0 0 3px rgba(249,245,241,0.20);
    animation: login-pulse-dot var(--dur-pulse, 1.8s) ease-in-out infinite;
    flex-shrink: 0;
}

.login-live-text {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@keyframes login-pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(249,245,241,0.20); }
    50%       { opacity: 0.72; box-shadow: 0 0 0 8px rgba(249,245,241,0.05); }
}




.login-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.login-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--color-border, #333);
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--color-text-muted, #bbb);
    background: transparent;
    transition: border-color 0.2s;
}
.login-badge:hover { border-color: var(--color-primary, #F08A4A); }

/* Rechterpaneel  formulier */
.login-form-panel {
    flex: 0 0 38%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem clamp(2rem, 4vw, 4.5rem);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-surface, #062A4A) 92%, #000),
        color-mix(in srgb, var(--color-topbar-bg, #00112C) 94%, #000));
    border-left: 1px solid rgba(255,255,255,0.08);
    position: relative;
    z-index: 3;
}

[data-theme="light"] .login-form-panel {
    box-shadow: inset 1px 0 0 rgba(226,220,211,0.9);
}

.login-form-inner {
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
}

.login-form-title {
    font-size: 2rem;
    font-weight: 600;
    color: #F9F5F1;
    margin-bottom: 0.25rem;
    letter-spacing: -0.035em;
}

.login-form-subtitle {
    color: rgba(249,245,241,0.62);
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}

.login-input-group {
    position: relative;
    margin-bottom: 1.1rem;
}

.login-input-group label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(249,245,241,0.84);
    margin-bottom: 0.35rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.login-input-group .form-control {
    padding-right: 4.6rem;
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.14);
    border-radius: var(--radius-md, 10px);
    color: #F9F5F1;
    font-size: 0.97rem;
    height: 48px;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.login-input-group .form-control::placeholder { color: rgba(249,245,241,0.4); }
.login-input-group .form-control:hover { background: rgba(255,255,255,0.09); }

.login-input-group .form-control:focus {
    border-color: var(--color-primary, #DA5612);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #DA5612) 28%, transparent);
    outline: none;
}

.login-pw-toggle {
    position: absolute;
    right: 0.6rem;
    bottom: 0.62rem;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--color-text-muted, #888);
    cursor: pointer;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.4rem;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.login-pw-toggle:hover { color: var(--color-primary, #DA5612); }

.login-forgot {
    display: block;
    text-align: right;
    font-size: 0.85rem;
    color: var(--color-text-muted, #aaa);
    text-decoration: underline;
    margin-top: -0.25rem;
    margin-bottom: 1.1rem;
}
.login-forgot:hover { color: var(--color-primary-hover, #F08A4A); }

/* Login tabs (Inloggen / Kiosk-toegang) */
.login-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid rgba(255,255,255,0.10);
}
.login-tab {
    flex: 1;
    min-height: 36px;
    padding: 0.6rem 0.5rem;
    font-size: 0.92rem;
    font-weight: 600;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    color: var(--color-text-muted, #aaa);
    cursor: pointer;
    transition: color 0.18s, border-color 0.18s, background-color 0.18s;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .4rem .4rem 0 0;
}
.login-tab:hover {
    color: #F9F5F1;
    background: color-mix(in srgb, rgba(249,245,241,0.08) 70%, transparent);
}
.login-tab.active {
    color: #F9F5F1;
    border-bottom-color: var(--color-accent, #DA5612);
}

[data-theme="light"] .login-tabs {
    border-bottom-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .login-tab {
    color: #767676;
}
[data-theme="light"] .login-tab:hover {
    color: #202020;
    background: color-mix(in srgb, var(--color-surface-hover, rgba(0,0,0,0.03)) 70%, transparent);
}
[data-theme="light"] .login-tab.active {
    color: #202020;
    border-bottom-color: var(--color-accent, #F08A4A);
}
/* Login submit button */

.login-submit-btn {
    width: 100%;
    padding: 0.9rem;
    font-size: 1rem;
    font-weight: 700;
    background: var(--color-primary, #DA5612);
    border: none;
    border-radius: var(--radius-md, 10px);
    color: #fff;
    cursor: pointer;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
    letter-spacing: 0.01em;
    margin-top: 0.25rem;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary, #DA5612) 28%, transparent);
}
.login-submit-btn:hover {
    background: var(--color-primary-hover, #F08A4A);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primary, #DA5612) 38%, transparent);
}
.login-submit-btn:active { transform: translateY(1px); box-shadow: none; }
.login-submit-btn:disabled { opacity: 0.65; cursor: not-allowed; box-shadow: none; }

.login-footer {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.82rem;
    color: rgba(249,245,241,0.46);
}
.login-footer p { margin-bottom: 0.1rem; }
.login-footer a { color: var(--color-text-muted, #888); text-decoration: underline; }
.login-footer a:hover { color: var(--color-primary-hover, #F08A4A); }

@media (max-width: 1200px) {
    .login-brand-panel {
        flex-basis: 58%;
    }

    .login-form-panel {
        flex-basis: 42%;
    }

    .login-slogans,
    .login-tagline,
    .login-live-indicator {
        max-width: 100%;
    }


}

@media (max-width: 1024px) {
    .login-slogan-line {
        font-size: clamp(2rem, 5.6vw, 3.5rem);
    }
    .login-slogan-block {
        font-size: clamp(1.4rem, 2.8vw, 2.2rem);
    }


}

/* -- Mobiele loginpagina: compacte branding + card-formulier -- */
@media (max-width: 768px) {
    .login-page {
        flex-direction: column;
        min-height: 100dvh;
        height: 100dvh;
        overflow: hidden;
        background: var(--dsb-site-bg, #00112C);
    }

    .login-top-actions {
        top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
        right: max(0.85rem, env(safe-area-inset-right, 0px));
    }

    .login-top-btn {
        width: 42px;
        height: 42px;
        border-width: 1.5px;
    }

    /* Brandingpaneel: slanke strook met gradient naar beneden */
    .login-brand-panel {
        flex: 0 0 auto;
        padding: calc(env(safe-area-inset-top, 0px) + 0.85rem) 0.95rem 2.4rem;
        border-right: none;
        border-bottom: none;
        position: relative;
    }

    /* Logo kleiner en horizontaal */
    .login-ams-logo {
        margin-bottom: 0.7rem;
        gap: 0.4rem;
    }
    .login-wordmark { width: min(220px, 64vw); }

    /* Slogans compact */
    .login-slogans { margin-bottom: 0; }
    .login-slogan-line { font-size: clamp(1.45rem, 6.8vw, 2.15rem); line-height: 1.02; }
    .login-slogan-block { font-size: clamp(0.92rem, 3.6vw, 1.12rem); line-height: 1.08; }

    .login-tagline {
        display: block;
        margin-top: 1rem;
        margin-bottom: 1rem;
        font-size: 0.95rem;
    }



    /* Tagline en badges verbergen */
    .login-badges  { display: none; }

    /* Formulierpaneel: kaart met ronde bovenhoeken, schuift over branding */
    .login-form-panel {
        flex: 1 1 auto;
        min-height: 0;
        padding: 1rem 0.95rem calc(env(safe-area-inset-bottom, 0px) + 0.85rem);
        overflow: hidden;
        justify-content: flex-start;
        background: linear-gradient(180deg, rgba(8,34,53,0.98), rgba(3,16,26,0.98));
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.45);
        margin-top: -1.2rem;
        position: relative;
        z-index: 2;
    }

    .login-form-inner {
        max-width: none;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .login-form-title    { font-size: 1.18rem; margin-bottom: 0.08rem; }
    .login-form-subtitle { margin-bottom: 0.65rem; font-size: 0.8rem; }
    .login-footer        { margin-top: auto; padding-top: 0.45rem; font-size: 0.76rem; }

    .login-tabs {
        margin-bottom: 0.8rem;
    }

    .login-tab {
        min-height: 32px;
        padding: 0.45rem 0.35rem;
        font-size: 0.82rem;
    }

    .login-input-group {
        margin-bottom: 0.7rem;
    }

    .login-input-group label {
        font-size: 0.7rem;
        margin-bottom: 0.22rem;
    }

    .login-input-group .form-control {
        height: 42px;
        font-size: 0.9rem;
        padding-right: 3.85rem;
    }

    .login-forgot {
        margin-top: -0.05rem;
        margin-bottom: 0.75rem;
        font-size: 0.78rem;
    }

    .login-submit-btn {
        padding: 0.74rem;
        font-size: 0.94rem;
    }
}

@media (max-width: 480px) {
    .login-brand-panel  { padding: calc(env(safe-area-inset-top, 0px) + 0.7rem) 0.85rem 2rem; }
    .login-eyebrow { font-size: 0.5rem; letter-spacing: 0.08em; }
    .login-slogan-line  { font-size: 1.55rem; }
    .login-slogan-block { display: none; }
    .login-live-indicator { margin-top: 0.55rem; padding: 0.55rem 0.8rem; }
    .login-form-panel   { padding: 0.9rem 0.85rem calc(env(safe-area-inset-bottom, 0px) + 0.8rem); border-radius: 14px 14px 0 0; margin-top: -0.9rem; }
    .login-form-title { font-size: 1.08rem; }
    .login-form-subtitle { font-size: 0.78rem; margin-bottom: 0.55rem; }
}

/* Light mode aanpassingen voor login */
[data-theme="light"] .login-slogan-line,
[data-theme="light"] .login-slogan-block {
    color: #1c2a36;
}

[data-theme="light"] .login-eyebrow {
    color: #4d5c6b;
    border-color: rgba(111,128,145,0.24);
    background: rgba(255,255,255,0.68);
}

[data-theme="light"] .login-form-title {
    color: #0e1620;
}

[data-theme="light"] .login-form-subtitle,
[data-theme="light"] .login-footer,
[data-theme="light"] .login-footer a,
[data-theme="light"] .login-forgot,
[data-theme="light"] .login-live-text {
    color: #475765;
}

[data-theme="light"] .login-input-group label {
    color: #3f5266;
}

[data-theme="light"] .login-input-group .form-control {
    background: #ffffff;
    border-color: #d7dde6;
    color: #0e1620;
}

[data-theme="light"] .login-input-group .form-control::placeholder {
    color: #7b8a98;
}

[data-theme="light"] .login-pw-toggle {
    color: #5f6f7d;
}

[data-theme="light"] .login-badge {
    border-color: #ccc;
    color: #555;
}

[data-theme="light"] .login-top-btn {
    background: rgba(255,255,255,0.96);
    border-color: #d7dde6;
    color: #202020;
}

[data-theme="light"] .login-tabs {
    border-bottom-color: rgba(14,22,32,0.12);
}

[data-theme="light"] .login-tab {
    color: #5f6f7d;
}

[data-theme="light"] .login-tab:hover {
    color: #1c2a36;
    background: rgba(14,22,32,0.04);
}

[data-theme="light"] .login-tab.active {
    color: #1c2a36;
    border-bottom-color: #DA5612;
}

/* Login brand panel light mode */
[data-theme="light"] .login-brand-panel {
    background:
        radial-gradient(circle at 68% 35%, rgba(46,114,168,0.12), transparent 24rem),
        linear-gradient(90deg, rgba(14,22,32,0.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(14,22,32,0.035) 1px, transparent 1px),
        linear-gradient(180deg, #ffffff 0%, #f5f1eb 100%);
    border-right-color: rgba(226,220,211,0.9);
}

[data-theme="light"] .login-brand-panel::before {
    background: radial-gradient(circle at 74% 52%, rgba(46,114,168,0.08) 0%, transparent 34rem);
}

[data-theme="light"] .login-form-panel {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,241,236,0.98));
    border-top: 1px solid rgba(226,220,211,0.9);
}

[data-theme="light"] .login-live-indicator {
    border-color: rgba(46,114,168,0.22);
    background: rgba(46,114,168,0.06);
    color: #3f5266;
}

/* Mobiele login-layout (stacked brand-strook + formulier-card-sheet) staat in het
   verfijnde @media (max-width: 768px)-blok hierboven (incl. env(safe-area-inset-*) voor
   notch/home-indicator) en het @media (max-width: 480px)-blok. Een tweede, oudere
   768px-blok hier overschreef die safe-area-paddings (kwam later in source order) en is
   daarom verwijderd; voeg geen nieuw 768px-loginblok toe maar pas het bestaande aan. */

.login-page--compact .login-brand-panel--compact {
    flex: 0 0 34%;
    justify-content: flex-start;
}

.login-page--compact .login-form-panel--compact {
    flex: 1 1 66%;
}

.portaal-choice-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

.portaal-choice-card {
    width: 100%;
    text-align: left;
    border: 1px solid rgba(249,245,241,0.12);
    border-radius: 12px;
    background: rgba(249,245,241,0.05);
    color: #F9F5F1;
    padding: 1rem 1rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.portaal-choice-card:hover {
    transform: translateY(-1px);
    border-color: rgba(240,138,74,0.32);
    background: rgba(249,245,241,0.08);
}

.portaal-choice-card:focus-visible {
    outline: 3px solid var(--dsb-site-cyan, #DA5612);
    outline-offset: 2px;
}

.portaal-choice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(240,138,74,0.12);
    color: #F08A4A;
}

.portaal-choice-card--brugopen .portaal-choice-icon {
    background: rgba(34,197,94,0.12);
    color: #4ADE80;
}

.portaal-choice-title {
    font-size: 1rem;
    font-weight: 700;
    color: #F9F5F1;
}

.portaal-choice-text {
    font-size: 0.86rem;
    line-height: 1.45;
    color: rgba(249,245,241,0.72);
}

.portaal-choice-cta {
    margin-top: 0.2rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #F08A4A;
}

.portaal-choice-card--brugopen .portaal-choice-cta {
    color: #4ADE80;
}

[data-theme="light"] .portaal-choice-card {
    background: rgba(255,255,255,0.94);
    border-color: rgba(215,221,230,0.9);
    color: #0e1620;
}

[data-theme="light"] .portaal-choice-title {
    color: #0e1620;
}

[data-theme="light"] .portaal-choice-text {
    color: #475765;
}

@media (min-width: 720px) {
    .portaal-choice-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* -- Melding formulier (klantoverzicht 4.5) -- */
.report-mock {
    background: var(--bg-surface, #fff);
    border-radius: 18px;
    box-shadow: 0 18px 55px rgba(32,32,32,.14);
    border: 1px solid rgba(32,32,32,.12);
    overflow: hidden;
    max-width: 860px;
    margin: 0 auto;
}

.report-header {
    background: #F08A4A;
    color: #00112C; /* vaste donkere tekst: bg is in beide thema's licht-oranje (cream-op-oranje was ~2,3:1) */
    padding: 18px 26px;
}

.report-header h3 { margin: 0; font-size: 1.3rem; }
.report-header p  { margin: 4px 0 0; font-size: .9rem; opacity: .88; }

.report-body {
    padding: 26px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

@media (max-width: 599px) {
    .report-body { grid-template-columns: 1fr; }
}

.report-body .form-group-ams       { display: flex; flex-direction: column; gap: 6px; }
.report-body .form-group-ams.full  { grid-column: 1 / -1; }
.report-body .form-group-ams label { font-weight: 700; font-size: .92rem; color: var(--text-primary, #202020); }

.form-input-ams {
    border: 2px solid var(--c-black, #202020);
    padding: 12px 14px;
    font-size: 1rem;
    border-radius: 0;
    width: 100%;
    background: var(--bg-surface, #fff);
    color: var(--text-primary, #202020);
    min-height: 44px;
}

[data-theme="dark"] .form-input-ams {
    background: var(--input-bg, #2a2a2a);
    border-color: rgba(255,255,255,.25);
}

.form-input-ams:focus {
    outline: 3px solid #F08A4A;
    outline-offset: 1px;
}

.form-select-ams {
    border: 2px solid var(--c-black, #202020);
    padding: 12px 14px;
    font-size: 1rem;
    border-radius: 0;
    width: 100%;
    background: var(--bg-surface, #fff);
    color: var(--text-primary, #202020);
    min-height: 44px;
    appearance: auto;
}

[data-theme="dark"] .form-select-ams {
    background: var(--input-bg, #2a2a2a);
    border-color: rgba(255,255,255,.25);
}

.form-textarea-ams {
    border: 2px solid var(--c-black, #202020);
    padding: 12px 14px;
    font-size: 1rem;
    border-radius: 0;
    width: 100%;
    min-height: 140px;
    resize: vertical;
    background: var(--bg-surface, #fff);
    color: var(--text-primary, #202020);
}

[data-theme="dark"] .form-textarea-ams {
    background: var(--input-bg, #2a2a2a);
    border-color: rgba(255,255,255,.25);
}

.category-pills    { display: flex; gap: 8px; flex-wrap: wrap; }

.category-pill {
    padding: 8px 14px;
    border: 2px solid var(--c-black, #202020);
    background: var(--bg-surface, #fff);
    color: var(--text-primary, #202020);
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    border-radius: 0;
    min-height: 44px;
}

.category-pill.active {
    background: #202020;
    color: #fff;
    border-color: #202020;
}

[data-theme="dark"] .category-pill {
    border-color: rgba(255,255,255,.25);
    background: transparent;
}

[data-theme="dark"] .category-pill.active {
    background: #444;
    border-color: #888;
}

.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-surface-inset, #f8f8f8);
    border: 2px solid rgba(32,32,32,.12);
    border-radius: 6px;
}

[data-theme="dark"] .switch-row {
    background: var(--bg-surface-inset, #2a2a2a);
    border-color: rgba(255,255,255,.12);
}

.switch-row label { font-weight: 700; color: var(--text-primary); font-size: .95rem; }

.ams-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex: 0 0 auto;
}

.ams-switch input { opacity: 0; width: 0; height: 0; position: absolute; }

.ams-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #bebebe;
    border-radius: 28px;
    transition: .2s;
}

.ams-switch-slider::before {
    content: '';
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: .2s;
}

.ams-switch input:checked + .ams-switch-slider { background: #F08A4A; }
.ams-switch input:checked + .ams-switch-slider::before { transform: translateX(24px); }

.priority-hint {
    grid-column: 1 / -1;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: .92rem;
    font-weight: 700;
}

.priority-hint.p1 {
    background: rgba(240,138,74,.12);
    color: #92400e;  /* was #D97706 (3.5:1 fail op licht) — #92400e op tint = 5.5:1 WCAG AA */
    border: 2px solid #F08A4A;
}
[data-theme="dark"] .priority-hint.p1 {
    color: #fbbf24;  /* op donkere ondergrond = 7.8:1 WCAG AA */
}

.priority-radio-group {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
}

.priority-radio {
    flex: 1;
    min-width: 110px;
    border: 2px solid var(--c-black, #202020);
    padding: 12px;
    cursor: pointer;
    background: var(--bg-surface, #fff);
    color: var(--text-primary, #202020);
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    min-height: 44px;
    border-radius: 0;
    transition: background .15s, color .15s;
}

.priority-radio small { display: block; font-weight: 600; font-size: .75rem; margin-top: 3px; opacity: .85; }
.priority-radio.active.p1 { background: #b50000; color: #fff; border-color: #b50000; } /* was #b00020: #fff op #b00020 = 4.0:1 fail; #b50000 = 5.1:1 WCAG AA */
.priority-radio.active.p2 { background: #ff9100; color: #202020; border-color: #ff9100; } /* #202020 op #ff9100 = 7.8:1 OK */
.priority-radio.active.p3 { background: #004699; color: #fff; border-color: #004699; }
.priority-radio.disabled  { opacity: .4; cursor: not-allowed; pointer-events: none; }

[data-theme="dark"] .priority-radio {
    border-color: rgba(255,255,255,.25);
    background: transparent;
    color: #f0f0f0;
}

.responsible-party-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-surface-inset, #f8f8f8);
    border: 2px solid rgba(32,32,32,.12);
    border-radius: 6px;
    flex-wrap: wrap;
    min-height: 44px;
}

[data-theme="dark"] .responsible-party-box {
    background: var(--bg-surface-inset, #2a2a2a);
    border-color: rgba(255,255,255,.12);
}

.report-footer {
    padding: 0 26px 26px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-report-primary {
    flex: 1;
    min-width: 140px;
    background: #F08A4A;
    color: #00112C; /* vaste donkere tekst: bg is in beide thema's licht-oranje (cream-op-oranje was ~2,3:1) */
    border: 0;
    padding: 14px 24px;
    font-weight: 800;
    font-size: 1rem;
    min-height: 48px;
    border-radius: 0;
    cursor: pointer;
}

.btn-report-primary:disabled { opacity: .6; cursor: not-allowed; }

.btn-report-secondary {
    flex: 1;
    min-width: 140px;
    background: transparent;
    color: var(--text-primary, #202020);
    border: 2px solid var(--c-black, #202020);
    padding: 14px 24px;
    font-weight: 700;
    font-size: 1rem;
    min-height: 48px;
    border-radius: 0;
    cursor: pointer;
}

[data-theme="dark"] .btn-report-secondary { border-color: rgba(255,255,255,.4); color: #f0f0f0; }





/* ============================================================
   Beheer toolbar - gedeeld door Tabel, Objectbeheer, Gebruikers,
   Devices, AuditLog, Instellingen, LoRaWAN Mock
   ============================================================ */
.beheer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    margin-bottom: 16px;
}

.beheer-toolbar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
}

/* -----------------------------------------------------------
   METRO KAART
   ----------------------------------------------------------- */

.metro-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 56px);
    overflow: hidden;
    background: var(--color-surface);
}

/* -- Toolbar -- */
.metro-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.metro-toolbar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
}

.metro-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* -- Body: canvas + sidebar -- */
.metro-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* -- SVG canvas -- */
.metro-canvas-wrapper {
    flex: 1;
    overflow: auto;
    position: relative;
    background: #f0f4f8;
}

[data-theme="dark"] .metro-canvas-wrapper {
    background: #1a1f2e;
}

.metro-svg {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 1200px;
    min-height: 900px;
    cursor: default;
}

.metro-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 2rem;
}

.metro-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 1.1rem;
    color: #e3000b;
    padding: 2rem;
    text-align: center;
}

/* -- Metro lines -- */
.metro-line {
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

/* -- Node labels -- */
.metro-label-bg {
    fill: rgba(255,255,255,0.88);
    stroke: none;
}

[data-theme="dark"] .metro-label-bg {
    fill: rgba(20, 26, 40, 0.88);
}

.metro-label {
    font-family: sans-serif;
    font-size: 12px;
    font-weight: 600;
    fill: #202020;
    pointer-events: none;
}

[data-theme="dark"] .metro-label {
    fill: #e8e8e8;
}

.metro-code {
    font-family: sans-serif;
    font-size: 10px;
    font-weight: 400;
    fill: #555;
    pointer-events: none;
}

[data-theme="dark"] .metro-code {
    fill: #aaa;
}

/* Node hover / selected */
.metro-node circle {
    transition: r 0.15s ease;
}

.metro-node:hover circle:first-of-type {
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.4));
}

/* Area row label (left of each line) */
.metro-area-label {
    font-family: sans-serif;
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
}

/* -- Sidebar -- */
.metro-sidebar {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--color-border);
    background: var(--color-surface);
    overflow: hidden;
}

.metro-search-box {
    position: relative;
    padding: 10px 12px 0;
    flex-shrink: 0;
}

.metro-search-input {
    width: 100%;
    padding: 7px 32px 7px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 13px;
}

.metro-search-input:focus {
    outline: 2px solid #0092d0;
    outline-offset: -1px;
}

.metro-search-icon {
    position: absolute;
    right: 20px;
    top: 18px;
    font-size: 15px;
    opacity: 0.5;
    pointer-events: none;
}

/* Area colour legend */
.metro-area-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.metro-area-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--color-text-muted, #767676);
}

.metro-area-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Bridge list */
.metro-bridge-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.metro-bridge-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 14px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    color: var(--color-text);
    font-size: 13px;
    transition: background 0.12s;
}

.metro-bridge-item:hover {
    background: var(--color-hover, rgba(0,0,0,0.06));
}

.metro-bridge-item.active {
    background: rgba(0, 146, 208, 0.12);
    font-weight: 600;
}

.metro-bridge-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.metro-bridge-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metro-bridge-code {
    font-size: 10px;
    color: var(--color-text-muted, #767676);
    flex-shrink: 0;
}

/* -- Detail panel (bottom) -- */
.metro-detail-panel {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    padding: 14px 18px;
    min-width: 220px;
    max-width: 320px;
    z-index: 10;
}

.metro-detail-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    color: var(--color-text-muted, #767676);
}

.metro-detail-name {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
}

.metro-detail-code {
    font-size: 11px;
    color: var(--color-text-muted, #767676);
    margin-bottom: 6px;
}

.metro-detail-status {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.metro-detail-flag {
    font-size: 12px;
    margin-bottom: 3px;
}

.flag-p1 { color: #b00020; }
.flag-p2 { color: var(--status-warning-text); }
.flag-grey { color: #767676; }

.metro-detail-ts {
    font-size: 11px;
    color: var(--color-text-muted, #767676);
    margin-top: 4px;
}

.metro-detail-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    color: #0092d0;
    text-decoration: none;
}

.metro-detail-link:hover { text-decoration: underline; }

/* -- Responsive: stack on small screens -- */
@media (max-width: 640px) {
    .metro-body {
        flex-direction: column;
    }

    .metro-sidebar {
        width: 100%;
        height: 220px;
        border-left: none;
        border-top: 1px solid var(--color-border);
    }

    .metro-detail-panel {
        bottom: 230px;
    }
}


.beheer-toolbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.beheer-toolbar-actions > * {
    min-width: 0;
}

.beheer-toolbar-actions .btn {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.beheer-toolbar-actions .form-control,
.beheer-toolbar-actions .form-select {
    flex: 1 1 12rem;
    min-width: 0;
    max-width: 100%;
}

/* Rode linkerborder op P1-rijen in tabel */
.table-row-fault td:first-child {
    border-left: 3px solid #b00020;
}

/* Beheer sectie-card - instellingen, categorieen */
.beheer-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    margin-bottom: 20px;
    overflow: hidden;
}

.beheer-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    font-size: .9rem;
}

.beheer-section-body {
    padding: 16px;
}

/* LoRaWAN mock logvenster */
.mock-log {
    background: #111;
    color: #d4f5a0;
    font-family: 'Consolas', monospace;
    font-size: .78rem;
    border-radius: 4px;
    padding: 10px 12px;
    height: 320px;
    overflow-y: auto;
    line-height: 1.5;
}

[data-theme="light"] .mock-log {
    background: #1e2a1a;
    color: #b8f0a0;
}

.mock-log .log-error  { color: #ff6b6b; }
.mock-log .log-ok     { color: #69f0ae; }
.mock-log .log-info   { color: #82cfff; }
.mock-log .log-ts     { color: #888; font-size: .72rem; margin-right: 6px; }

/* AuditLog diff weergave */
.cursor-pointer {
    cursor: pointer;
}

.audit-diff {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: .78rem;
    font-family: 'Consolas', monospace;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 240px;
    overflow-y: auto;
}


/* ============================================================
   Bevestigingsdialoog - permanent verwijderen
   ============================================================ */
.confirm-delete-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1200;
}

.confirm-delete-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1201;
    width: min(480px, 95vw);
    background: var(--color-surface);
    border: 2px solid #F08A4A;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.45);
    overflow: hidden;
}

.confirm-delete-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: #F08A4A;
    color: var(--color-bg, #00112C);
}

.confirm-delete-icon { font-size: 1.3rem; line-height: 1; }

.confirm-delete-title {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
}

.confirm-delete-body { padding: 16px 18px; }

.confirm-delete-desc {
    font-size: .88rem;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.confirm-delete-impact {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-left: 3px solid #F08A4A;
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: .83rem;
}

.confirm-delete-impact strong {
    display: block;
    margin-bottom: 6px;
    font-size: .82rem;
}

.confirm-delete-impact-list {
    margin: 0;
    padding-left: 18px;
    color: var(--color-text-muted);
    line-height: 1.7;
}

.confirm-delete-type-instruction {
    font-size: .85rem;
    margin-bottom: 6px;
    color: var(--color-text);
}

/* Minimaal 16px om iOS Safari auto-zoom bij focus te voorkomen */
.confirm-delete-input { font-size: 1rem; }

.confirm-delete-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}

/* AVG Verantwoording - compliance-grid */
.admin-only-notice {
    background: #fff8e1;
    border: 2px solid #ff9100;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: .88rem;
    font-weight: 700;
    color: #7a4800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

[data-theme="dark"] .admin-only-notice {
    background: rgba(255,145,0,.12);
    border-color: #ff9100;
    color: #ffcc80;
}

.compliance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

@media (max-width: 768px) {
    .compliance-grid { grid-template-columns: 1fr; }
}

.compliance-card {
    background: var(--color-surface);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.compliance-header {
    padding: 16px 22px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.compliance-header h3 {
    margin: 0;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
}

.compliance-header .badge-label {
    margin-left: auto;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compliance-body {
    padding: 18px 22px;
}

.compliance-body p {
    margin: 0 0 12px;
    font-size: .92rem;
    color: var(--color-text-muted);
}

.compliance-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.compliance-list li {
    padding: 8px 0 8px 22px;
    border-top: 1px solid var(--color-border);
    position: relative;
    font-size: .92rem;
    color: var(--color-text);
}

.compliance-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--status-closed);
    font-weight: 800;
}

.compliance-list li a {
    color: var(--color-primary);
    font-weight: 700;
}

/* ===================================================
   Digitoegankelijkheid (WCAG 2.2 AA nalevingsoverzicht)
   Beide thema's: licht + donker. Statuskleuren krijgen
   expliciete dark-overrides waar de token te donker is
   op de navy dark-surface (status-fault/closed).
   =================================================== */

/* Statustekst-kleuren (grote tekst, contrastveilig in beide thema's) */
.a11y-pass-text  { color: #1f7a3e; }
.a11y-warn-text  { color: #a86b00; }
.a11y-fault-text { color: var(--status-fault); }
[data-theme="dark"] .a11y-pass-text  { color: #4ade80; }
[data-theme="dark"] .a11y-warn-text  { color: #f5c66a; }
[data-theme="dark"] .a11y-fault-text { color: #f87171; }

/* KPI-tegels */
.a11y-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}

@media (max-width: 900px) { .a11y-kpi-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .a11y-kpi-grid { grid-template-columns: 1fr; } }

.a11y-kpi {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
}

.a11y-kpi-head { display: flex; align-items: center; gap: 14px; }

.a11y-kpi-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.a11y-kpi-value { font-size: 2.1rem; font-weight: 800; line-height: 1.1; color: var(--color-text); }
.a11y-kpi-sub { font-size: .82rem; color: var(--color-text-muted); margin-top: 4px; }

/* Score-donut via conic-gradient (--pct = score in procenten) */
.a11y-donut {
    --pct: 0;
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: conic-gradient(var(--status-closed) calc(var(--pct) * 1%),
                               color-mix(in srgb, var(--color-border) 70%, transparent) 0);
    display: grid;
    place-items: center;
}

[data-theme="dark"] .a11y-donut {
    background: conic-gradient(#4ade80 calc(var(--pct) * 1%),
                               color-mix(in srgb, var(--color-border) 70%, transparent) 0);
}

.a11y-donut::before {
    content: '';
    grid-area: 1 / 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-surface);
}

.a11y-donut-label { grid-area: 1 / 1; z-index: 1; font-size: .74rem; font-weight: 800; color: var(--color-text); }

/* Sectie met principes */
.a11y-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 18px 22px;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
}

.a11y-section-head h2 { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--color-text); }
.a11y-section-sub { margin: 2px 0 14px; font-size: .85rem; color: var(--color-text-muted); }

.a11y-principle-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 1100px) { .a11y-principle-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .a11y-principle-grid { grid-template-columns: 1fr; } }

.a11y-principle {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-text) 3%, transparent);
}

.a11y-principle-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
    border-bottom: 1px solid var(--color-border);
}

.a11y-principle-name { font-weight: 700; color: var(--color-text); }
.a11y-principle-count { font-family: var(--font-mono, monospace); font-size: .82rem; color: var(--color-text-muted); }

.a11y-crit-list { list-style: none; margin: 0; padding: 0; }

.a11y-crit {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    font-size: .86rem;
    color: var(--color-text);
}

.a11y-crit:first-child { border-top: 0; }
.a11y-crit-id { flex: 1 1 auto; min-width: 0; }

.a11y-level-badge {
    flex: 0 0 auto;
    font-family: var(--font-mono, monospace);
    font-size: .66rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 5px;
    color: var(--color-text-muted);
    background: color-mix(in srgb, var(--color-text) 9%, transparent);
    border: 1px solid var(--color-border);
}

/* Statuschip met inline SVG-icoon */
.a11y-status {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: grid;
    place-items: center;
}

.a11y-status--pass  { color: #0f7a37; background: color-mix(in srgb, #27a353 22%, transparent); }
.a11y-status--warn  { color: #8a5800; background: color-mix(in srgb, #f59300 26%, transparent); }
.a11y-status--fault { color: #9b001c; background: color-mix(in srgb, #b00020 20%, transparent); }
.a11y-status--na    { color: var(--color-text-muted); background: color-mix(in srgb, var(--color-text) 8%, transparent); }

[data-theme="dark"] .a11y-status--pass  { color: #4ade80; background: rgba(39,163,83,.20); }
[data-theme="dark"] .a11y-status--warn  { color: #f5c66a; background: rgba(245,147,0,.22); }
[data-theme="dark"] .a11y-status--fault { color: #f87171; background: rgba(176,0,32,.32); }

/* Legenda */
.a11y-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 14px 2px 0;
    font-size: .82rem;
    color: var(--color-text-muted);
}

.a11y-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* Build-stempel + scan-status */
.a11y-buildbar {
    margin-top: 18px;
    padding: 14px 18px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-text) 3%, transparent);
    font-size: .86rem;
    color: var(--color-text);
}

.a11y-buildbar-line { color: var(--color-text); }
.a11y-build-meta { color: var(--color-text-muted); }

/* ===================================================
   E-mail template editor  preview & placeholder grid
   =================================================== */

.et-body-editor {
    font-size: .82rem;
    line-height: 1.5;
    resize: vertical;
}

/* Placeholder invoervelden */
.et-live-badge {
    font-size: .7rem;
}

.et-template-key {
    font-size: .75rem;
}

.et-template-updated-by {
    font-size: .72rem;
}

.et-placeholder-grid {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.et-placeholder-row {
    display: grid;
    grid-template-columns: 10rem 1fr;
    align-items: center;
    gap: .5rem;
}

.et-placeholder-label {
    margin-bottom: 0;
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.et-placeholder-label code {
    font-size: .76rem;
    color: var(--text-muted, #6c757d);
    background: var(--bg-surface-inset, rgba(0,0,0,.06));
    padding: 1px 4px;
    border-radius: 3px;
}

[data-theme="dark"] .et-placeholder-label code {
    background: rgba(255,255,255,.08);
    color: #b0b8c1;
}

/* Onderwerp preview balk */
.et-preview-subject {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    padding: .4rem .6rem;
    border-radius: 4px;
    background: var(--bg-surface-inset, rgba(0,0,0,.05));
    font-size: .82rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.et-preview-subject-label {
    font-weight: 700;
    flex-shrink: 0;
    color: var(--text-muted, #6c757d);
    font-size: .76rem;
}

.et-preview-subject-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="dark"] .et-preview-subject {
    background: rgba(255,255,255,.06);
}

/* HTML preview frame */
.et-preview-frame {
    border: 1px solid var(--border-color, rgba(0,0,0,.12));
    border-radius: 6px;
    background: #f4f4f4;
    width: 100%;
    min-height: 400px;
    max-height: 640px;
    display: block;
}

/* Dark-mode: preview frame blijft altijd wit (echte e-mailklant) */
[data-theme="dark"] .et-preview-frame {
    border-color: rgba(255,255,255,.18);
}

/* ---------------------------------------------------------------
   KIOSK 2-KOLOMS LAYOUT
   --------------------------------------------------------------- */

/* Hoofdbody onder header en boven footer */
.kiosk-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    overflow: hidden;
    gap: 0;
    height: calc(100vh - 92px - 44px); /* 100vh min header min footer */
}

/* Boven: objecttegels scrollbaar */
.kiosk-top {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px;
    scrollbar-width: thin;
    scrollbar-color: rgba(249,245,241, 0.40) rgba(3, 16, 26, 0.80);
}

.kiosk-top::-webkit-scrollbar { width: 6px; }
.kiosk-top::-webkit-scrollbar-track { background: rgba(3, 16, 26, 0.80); }
.kiosk-top::-webkit-scrollbar-thumb { background: rgba(249,245,241, 0.40); border-radius: 3px; }

/* Onder: statistieken widgets horizontale balk */
.kiosk-bottom {
    flex: 0 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 14px 18px;
    display: flex;
    flex-direction: row;
    gap: 16px;
    background: rgba(3, 16, 26, 0.62);
    border-top: 1px solid rgba(249,245,241, 0.16);
    scrollbar-width: thin;
    scrollbar-color: rgba(249,245,241, 0.40) rgba(3, 16, 26, 0.80);
}

.kiosk-bottom::-webkit-scrollbar { height: 6px; }
.kiosk-bottom::-webkit-scrollbar-track { background: rgba(3, 16, 26, 0.80); }
.kiosk-bottom::-webkit-scrollbar-thumb { background: rgba(249,245,241, 0.40); border-radius: 3px; }

/* Widgets in de balk krijgen een vaste minimumbreedte zodat ze niet te smal worden */
.kiosk-bottom .kiosk-stat-widget {
    flex: 0 0 auto;
    min-width: 250px;
    max-width: 340px;
}

/* -- Widget container -- */
.kiosk-stat-widget {
    background: rgba(8, 34, 53, 0.88);
    border: 1px solid rgba(249,245,241, 0.16);
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    flex-shrink: 0;
}

.kiosk-widget-header {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(249,245,241, 0.13);
    border-bottom: 1px solid rgba(249,245,241, 0.22);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 16px;
}

/* Kiosk-widget-kop-icoon: inline SVG (NavIcon) i.p.v. emoji, zodat het op TV/kiosk-fonts
   altijd rendert (geen ?/tofu) en met currentColor meekleurt met de header. */
.kiosk-header-icon {
    flex: 0 0 auto;
}

.kiosk-widget-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kiosk-widget-body-center {
    align-items: center;
    text-align: center;
    padding: 16px 12px;
}

/* -- Statistiekenrij -- */
.kiosk-stat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.kiosk-stat-row:last-child { border-bottom: none; }

.kiosk-stat-row-alert { background: rgba(236,0,0,0.07); border-radius: 4px; padding: 4px 6px; }
.kiosk-stat-row-highlight { background: rgba(255,255,255,0.04); border-radius: 4px; padding: 4px 6px; }

.kiosk-stat-name { flex: 1; color: rgba(245,250,255,0.78); }
.kiosk-stat-name-sm { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kiosk-stat-val { font-weight: 900; font-size: 1.22rem; color: #fff; min-width: 40px; text-align: right; }
.kiosk-stat-rank { color: rgba(205,239,248,0.5); font-size: 0.9rem; min-width: 22px; }
.kiosk-stat-loading { color: rgba(255,255,255,0.42); font-size: 1rem; align-self: center; }
.kiosk-stat-none    { color: rgba(255,255,255,0.42); font-size: 1rem; font-style: italic; padding: 8px 0; align-self: center; }

/* Status dots */
.kiosk-stat-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dot-total   { background: rgba(255,255,255,0.4); }
.dot-closed  { background: #4caf50; }
.dot-open    { background: #2196f3; }
.dot-fault   { background: #b00020; }
.dot-unknown { background: #9e9e9e; }

/* Prioriteit badges */
.kiosk-stat-badge {
    font-size: 0.8rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    min-width: 30px;
    text-align: center;
}
.badge-p1 { background: #b00020; color: #fff; }
.badge-p2 { background: #ff9800; color: #000; }
.badge-p3 { background: #2196f3; color: #fff; }
.badge-fault { background: rgba(236,0,0,0.3); color: #b00020; }  /* dark mode OK; light override nodig */
[data-theme="light"] .badge-fault { background: #fde7ea; color: #9b0000; border: 1px solid #f3c1ca; } /* #9b0000 op #fde7ea = 5.8:1 WCAG AA */
.badge-org  { background: #475765; color: #ffffff; border: 1px solid #36424d; font-size: 0.72rem; font-weight: 600; border-radius: 4px; padding: 2px 6px; }

/* Kleurklassen voor waarden */
.kiosk-val-success { color: #4caf50 !important; }
.kiosk-val-warning { color: #ff9800 !important; }
.kiosk-val-danger  { color: #b00020 !important; }
.kiosk-val-accent  { color: #2196f3 !important; }

/* -- Grote cijfers (beschikbaarheid, openingsduur) -- */
.kiosk-big-number {
    font-size: 3.4rem;
    font-weight: 900;
    line-height: 1;
    color: #fff;
}

.kiosk-big-label {
    font-size: 0.95rem;
    color: rgba(205, 239, 248, 0.66);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Beschikbaarheidsbar */
.kiosk-avail-bar {
    width: 100%;
    height: 9px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    margin-top: 10px;
    overflow: hidden;
}
.kiosk-avail-fill {
    height: 100%;
    border-radius: 3px;
    background: #4caf50;
    transition: width 0.8s ease;
}
.kiosk-avail-fill.kiosk-val-warning { background: #ff9800; }
.kiosk-avail-fill.kiosk-val-danger  { background: #b00020; }

/* -- Widget preview in KioskInstellingen -- */
.kiosk-stats-preview { background: transparent; }
.kiosk-stat-widget-preview {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
}
.kiosk-stat-widget-title { color: #fff; font-size: 0.8rem; font-weight: 600; }
.kiosk-stat-widget-body  { color: rgba(255,255,255,0.45); font-size: 0.72rem; }

/* -- KioskInstellingen widget picker -- */
.kiosk-widget-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 420px;
    overflow-y: auto;
}
.kiosk-widget-list:focus-visible {
    outline: 2px solid var(--color-primary, #DA5612);
    outline-offset: 2px;
}
.kiosk-widget-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--color-border, #e8e8e8);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
}
.kiosk-widget-item:hover { background: rgba(240,138,74,0.05); border-color: #F08A4A; }
.kiosk-widget-item.active { background: rgba(240,138,74,0.08); border-color: #F08A4A; }
.kiosk-widget-item.active .kiosk-widget-desc { color: var(--color-text, #1c2a36); }
.kiosk-widget-icon { font-size: 1.1rem; min-width: 24px; }
.kiosk-widget-label { font-weight: 600; font-size: 0.88rem; min-width: 140px; }
.kiosk-widget-desc  { flex: 1; font-size: 0.78rem; color: var(--color-text-muted, #767676); }
.kiosk-widget-check { font-weight: 700; color: #F08A4A; min-width: 20px; text-align: right; }

.kiosk-active-list { display: flex; flex-direction: column; gap: 6px; }
.kiosk-active-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--color-border, #e8e8e8);
    border-radius: 6px;
    background: var(--color-surface, #fff);
}
.kiosk-active-order { font-weight: 700; color: #F08A4A; min-width: 20px; text-align: center; }
.kiosk-active-label { flex: 1; font-size: 0.87rem; font-weight: 600; }
.kiosk-active-actions { display: flex; gap: 4px; }

/* Kiosk demo-badge */
.kiosk-demo-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    background: rgba(255, 165, 0, 0.18);
    border: 1px solid rgba(255, 165, 0, 0.5);
    border-radius: 12px;
    color: #ffaa00;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-left: 10px;
    animation: live-pulse 2s ease-in-out infinite;
}


/* =============================================
   MOBILE / PWA  aanvullende responsive regels
   Aanpak: mobile-first verbeteringen die de
   desktop-layout ongewijzigd laten.
   ============================================= */

/* -- Sidebar overlay backdrop (mobiel) -------- */
/* backdrop-stijl wordt beheerd in het Sidebar + offcanvas blok */

/* -- Tabel horizontal scroll wrapper ---------- */
.table-responsive-ams {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior: contain;
    /* Zachte schaduw als visuele hint dat er meer is */
    background:
        linear-gradient(to right, var(--color-bg) 0%, transparent 2rem) left / 2rem 100% no-repeat,
        linear-gradient(to left,  var(--color-bg) 0%, transparent 2rem) right / 2rem 100% no-repeat;
    background-attachment: local, local;
}
.table-responsive-ams table { min-width: 640px; }

/* -- Content-area padding kleiner op mobiel ---
   padding-bottom blijft afkomstig uit de centrale shell-blok (regel ~828),
   die safe-area + ticker-hoogte gecombineerd al goed zet. Hier alleen de
   horizontale padding aanpassen. padding-top MOET 0 blijven omdat de sticky
   .page-header edge-to-edge direct onder de fixed topbar moet zitten. */
@media (max-width: 768px) {
    .content-area {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-top: 0;
    }
}
@media (max-width: 480px) {
    .content-area {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-top: 0;
    }
}

/* -- Beheer-toolbar stapelt op small screens -- */
@media (max-width: 640px) {
    .beheer-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
    .beheer-toolbar-actions {
        width: 100%;
        align-items: stretch;
    }
    .beheer-toolbar-actions .btn,
    .beheer-toolbar-actions .form-control,
    .beheer-toolbar-actions .form-select {
        width: 100%;
    }
    .map-filter-chips {
        width: 100%;
    }
}

/* -- Dashboard KPI grid ------------------------ */
@media (max-width: 480px) {
    .dashboard-row.cols-2,
    .dashboard-row.cols-2-1,
    .dashboard-row.cols-3 { grid-template-columns: 1fr; }
    .kpi-grid { grid-template-columns: 1fr 1fr; }
}

/* -- Touch targets  minimaal 4444 px ------- */
/* Chip-knoppen en kleine badges */
.map-chip {
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
}
/* Topbar icon-knoppen al 36px, toch iets groter op touch */
@media (hover: none) and (pointer: coarse) {
    .btn-topbar-icon {
        width: 44px;
        height: 44px;
    }
    .map-chip {
        min-height: 44px;
    }
    /* Sidebar nav-links al goed, extra zekerheid */
    .sidebar .nav-link {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

/* -- Nav-toggle zichtbaar op mobiel ------------ */
@media (max-width: 768px) {
    .topbar .nav-toggle {
        display: flex;
        min-width: 44px;
        min-height: 44px;
    }
}

/* -- Tegels grid smaller op klein scherm ------- */
@media (max-width: 480px) {
    .tile-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .tile-dark-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* -- Formuliervelden  minimaal 16px op iOS ---- */
/* Voorkomt automatisch inzoomen van iOS Safari */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    textarea,
    select,
    .form-control,
    .form-select,
    .form-input-ams,
    .form-select-ams,
    .form-textarea-ams {
        font-size: 16px !important;
    }
}

/* -- Heatmap tabel  veilig scrollen op mobiel - */
@media (max-width: 768px) {
    .bo-hm-grid {
        overflow-x: auto;
        overscroll-behavior: contain;
    }
    .heatmap {
        overflow-x: auto;
        overscroll-behavior: contain;
    }
}

/* -- Rapportages / compliance grid ------------- */
@media (max-width: 480px) {
    .et-placeholder-row { grid-template-columns: 1fr; }
    .et-placeholder-label { font-weight: 700; }
}

/* -- Brand-text compacter op mobiele schermen -- */
@media (max-width: 768px) {
    .topbar {
        gap: 0.55rem;
        padding-left: max(0.65rem, var(--topbar-side-padding-left));
        padding-right: max(0.65rem, var(--topbar-side-padding));
    }

    .topbar .brand {
        gap: 0.42rem;
        min-width: 0;
        max-width: none;
        flex: 1 1 auto;
    }

    .topbar .brand-logo {
        width: auto;
        height: 32px;
        max-width: min(180px, 44vw);
    }

    .topbar .brand-text {
        font-size: 0.84rem;
    }

    .topbar .btn-topbar-icon,
    .topbar .nav-toggle {
        position: relative;
        z-index: 1600;
        pointer-events: auto;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .topbar .btn-topbar-icon:not(.nav-toggle-menu) {
        display: none !important;
    }

    .topbar .nav-toggle-menu {
        display: inline-flex !important;
    }
}

@media (max-width: 420px) {
    .topbar .brand {
        max-width: none;
    }

    .topbar .brand-text {
        font-size: 0.78rem;
    }
}



@media (max-width: 360px) {
    .topbar .brand-text { display: none; }
}

/* -- Ticker mobiel: itemgrootte. De iOS PWA safe-area-correctie staat
   BEWUST NA het .dsb-ticker-basisblok hieronder. Stond ze hier (voor de basis),
   dan overschreef de basis padding-bottom (env safe-area-inset-bottom) de
   correctie door cascade-volgorde (gelijke specificiteit, latere regel wint). */

@media (max-width: 768px) {
    .dsb-ticker {
        height: var(--ticker-total-height);
    }

    .dsb-ticker-item {
        padding: 0 14px;
        font-size: 0.66rem;
        letter-spacing: 0.03em;
    }

    .dsb-ticker::before,
    .dsb-ticker::after {
        width: 20px;
    }
    /* .content-area padding-bottom wordt centraal beheerd in eerste 768px-blok */
}

@media (max-width: 420px) {
    .dsb-ticker-item {
        padding: 0 10px;
        font-size: 0.62rem;
    }
    /* .content-area padding-bottom wordt centraal beheerd in eerste 420px-blok */
}

/* -- Tabellen mobiel: alle pagina-tabellen zijn al gewrapped in
   .table-responsive (Bootstrap). Een globale display:block reset
   op .table breekt de tabel-rendering, dus die wordt hier NIET
   meer toegepast. Voor tabellen zonder wrapper: voeg ad-hoc
   .table-responsive of .table-responsive-ams toe rond de tabel. */

/* =============================================
   DSB LIVE TICKER  scrollende status balk
   ============================================= */
.dsb-ticker {
    background: rgba(7, 16, 32, 0.98);
    border-top: 1px solid rgba(240,138,74,0.18);
    overflow: hidden;
    height: var(--ticker-total-height);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    box-shadow: 0 -18px 42px rgba(0,0,0,0.34);
}

/* iOS PWA (standalone, toegevoegd aan beginscherm): env(safe-area-inset-bottom)
   is ~34px - ruimer dan de home-indicator feitelijk vraagt. Daardoor zweefde de
   tickertekst te hoog boven de onderrand. Verlaag de ingehouden ruimte met 20px
   EN verlaag de hoogte met exact hetzelfde bedrag, zodat de content-box gelijk
   blijft aan --ticker-height (geen extra gat door align-items:center) en de tekst
   strak boven de home-indicator zit (~14px). bottom blijft 0, dus de balk-
   achtergrond raakt nog steeds de onderrand. Staat BEWUST na het basisblok
   hierboven, anders draait de basis padding-bottom deze correctie terug. */
@media (max-width: 768px) {
    @supports (-webkit-touch-callout: none) {
        .dsb-ticker {
            --dsb-ticker-ios-safe: max(0px, calc(var(--ticker-safe-bottom) - 20px));
            height: calc(var(--ticker-height) + var(--dsb-ticker-ios-safe));
            padding-bottom: var(--dsb-ticker-ios-safe);
        }

        .dsb-ticker::before,
        .dsb-ticker::after {
            bottom: var(--dsb-ticker-ios-safe);
        }
    }
}

[data-theme="light"] .dsb-ticker {
    background: #eef1f5;
    border-top-color: #dce2ea;
    box-shadow: 0 -4px 16px rgba(14,22,32,0.06);
}

.dsb-ticker::before,
.dsb-ticker::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: env(safe-area-inset-bottom, 0px);
    width: 40px;
    z-index: 2;
    pointer-events: none;
}
.dsb-ticker::before {
    left: 0;
    background: linear-gradient(to right, rgba(10,16,22,1) 0%, transparent 100%);
}
.dsb-ticker::after {
    right: 0;
    background: linear-gradient(to left, rgba(10,16,22,1) 0%, transparent 100%);
}

[data-theme="light"] .dsb-ticker::before { background: linear-gradient(to right, #eef1f5 0%, transparent 100%); }
[data-theme="light"] .dsb-ticker::after  { background: linear-gradient(to left, #eef1f5 0%, transparent 100%); }

.dsb-ticker-track {
    display: flex;
    gap: 0;
    height: var(--ticker-height);
    white-space: nowrap;
    will-change: transform;
}

.dsb-ticker-track:hover { /* boTicker pauzeert via mouseenter/mouseleave */ }

.dsb-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 24px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.88);
    white-space: nowrap;
}

.dsb-ticker-item-link {
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.dsb-ticker-item-link:hover {
    background: rgba(255,255,255,0.10);
    color: #ffffff;
}

.dsb-ticker-item-link:focus-visible {
    outline: 2px solid var(--dsb-orange-400, #F08A4A);
    outline-offset: -2px;
    background: rgba(240,138,74,0.16);
}

[data-theme="light"] .dsb-ticker-item {
    color: #2a3644;
}

[data-theme="light"] .dsb-ticker-item-link:hover {
    background: rgba(11,92,173,0.10);
    color: #0e1b2a;
}

[data-theme="light"] .dsb-ticker-item-link:focus-visible {
    background: rgba(11,92,173,0.14);
}

.dsb-ticker-item::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(240,138,74,0.50);
    flex-shrink: 0;
    align-self: center;
}

.dsb-ticker-item-name {
    color: rgba(255,255,255,0.96);
    font-weight: 700;
}

[data-theme="light"] .dsb-ticker-item-name {
    color: #0f1d2c;
}

.dsb-ticker-item-value {
    color: #F8B38E;
    font-weight: 800;
}

[data-theme="light"] .dsb-ticker-item-value {
    color: #9f3e08;
}

.dsb-ticker-item-label {
    color: rgba(255,255,255,0.62);
    font-weight: 600;
}
[data-theme="light"] .dsb-ticker-item-label { color: rgba(14,22,32,0.52); }

.dsb-ticker-item.tick-fault .dsb-ticker-item-name  { color: #FC8181; }
.dsb-ticker-item.tick-open  .dsb-ticker-item-name  { color: #FFD3B8; }
.dsb-ticker-item.tick-closed .dsb-ticker-item-name { color: rgba(255,255,255,0.80); }
.dsb-ticker-item.tick-fault::before  { background: #FC8181; }
.dsb-ticker-item.tick-open::before   { background: #F08A4A; }
.dsb-ticker-item.tick-closed::before { background: #4ADE80; }

/* Light-mode overrides: donkere tekst/stippen op lichte achtergrond */
[data-theme="light"] .dsb-ticker-item.tick-fault .dsb-ticker-item-name  { color: #991b1b; }
[data-theme="light"] .dsb-ticker-item.tick-open  .dsb-ticker-item-name  { color: #7c2d08; }
[data-theme="light"] .dsb-ticker-item.tick-closed .dsb-ticker-item-name { color: #14532d; }
[data-theme="light"] .dsb-ticker-item.tick-fault::before  { background: #dc2626; }
[data-theme="light"] .dsb-ticker-item.tick-open::before   { background: #c2410c; }
[data-theme="light"] .dsb-ticker-item.tick-closed::before { background: #15803d; }

.dsb-ticker-item.tick-open {
    background: rgba(240,138,74,0.22);
    border: 1px solid rgba(240,138,74,0.42);
}

[data-theme="light"] .dsb-ticker-item.tick-open {
    background: rgba(240,138,74,0.16);
    border: 1px solid rgba(159,62,8,0.32);
}

.dsb-ticker-item-link.tick-open:hover {
    background: rgba(240,138,74,0.30);
}

[data-theme="light"] .dsb-ticker-item-link.tick-open:hover {
    background: rgba(240,138,74,0.24);
}

/* =============================================
   DSB LIVE TICKER  uitbreidingen
   [samenvatting links] [viewport met scroll] [pauzeknop rechts]
   ============================================= */

/* Vaste samenvatting links: telt per categorie, scrollt NIET mee.
   z-index 3 zodat ze boven de rand-gradients (::before/::after, z-index 2) staat. */
.dsb-ticker-summary {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--ticker-height);
    padding: 0 14px 0 calc(14px + env(safe-area-inset-left, 0px));
    border-right: 1px solid rgba(255,255,255,0.10);
    white-space: nowrap;
}
[data-theme="light"] .dsb-ticker-summary { border-right-color: rgba(14,22,32,0.10); }

.dsb-ticker-sum {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    color: rgba(255,255,255,0.86);
}
[data-theme="light"] .dsb-ticker-sum { color: #2a3644; }

.dsb-ticker-sum-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(240,138,74,0.6);
}
.dsb-ticker-sum.tick-fault   .dsb-ticker-sum-dot { background: #FC8181; }
.dsb-ticker-sum.tick-open    .dsb-ticker-sum-dot { background: #F08A4A; }
.dsb-ticker-sum.tick-maint   .dsb-ticker-sum-dot { background: #F6C667; }
.dsb-ticker-sum.tick-closed  .dsb-ticker-sum-dot { background: #4ADE80; }
.dsb-ticker-sum.tick-unknown .dsb-ticker-sum-dot { background: rgba(255,255,255,0.5); }
[data-theme="light"] .dsb-ticker-sum.tick-fault   .dsb-ticker-sum-dot { background: #dc2626; }
[data-theme="light"] .dsb-ticker-sum.tick-open    .dsb-ticker-sum-dot { background: #c2410c; }
[data-theme="light"] .dsb-ticker-sum.tick-maint   .dsb-ticker-sum-dot { background: #a86b00; }
[data-theme="light"] .dsb-ticker-sum.tick-closed  .dsb-ticker-sum-dot { background: #15803d; }
[data-theme="light"] .dsb-ticker-sum.tick-unknown .dsb-ticker-sum-dot { background: rgba(14,22,32,0.4); }

.dsb-ticker-sum-offline {
    display: inline-flex;
    align-items: center;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #FC8181;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(252,129,129,0.16);
}
[data-theme="light"] .dsb-ticker-sum-offline { color: #b00020; background: rgba(176,0,32,0.10); }

/* Viewport: statisch clip-venster waarin de track scrollt; rand-fade via mask
   (vervangt de bar-gradients in het middendeel). */
.dsb-ticker-viewport {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: var(--ticker-height);
    display: flex;
    align-items: center;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}

/* Pauze/afspeel-knop rechts. */
.dsb-ticker-btn {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: var(--ticker-height);
    margin-right: env(safe-area-inset-right, 0px);
    padding: 0;
    border: none;
    border-left: 1px solid rgba(255,255,255,0.10);
    background: transparent;
    color: rgba(255,255,255,0.82);
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
}
.dsb-ticker-btn:hover { background: rgba(255,255,255,0.10); color: #ffffff; }
.dsb-ticker-btn:focus-visible { outline: 2px solid var(--dsb-orange-400, #F08A4A); outline-offset: -2px; }
[data-theme="light"] .dsb-ticker-btn { color: #2a3644; border-left-color: rgba(14,22,32,0.10); }
[data-theme="light"] .dsb-ticker-btn:hover { background: rgba(11,92,173,0.10); color: #0e1b2a; }

/* --- Inklapbare LiveTicker (zie LiveTicker.razor) ----------------------------
   Ingeklapt verlaagt --ticker-height op <html> (de root, waar
   --ticker-total-height wordt berekend) zodat content-padding, sidebar- en
   ticker-hoogte meeschalen en de schermruimte teruggegeven wordt. De verbergknop
   staat alleen op mobiel; de uitklap-handle is overal zichtbaar zodat je nooit
   vast komt te zitten. Kleuren volgen het .dsb-ticker-btn-patroon (beide thema's). */
html.ticker-collapsed { --ticker-height: 26px; }

.dsb-ticker-expand {
    position: relative;
    z-index: 3;
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 100%;
    padding: 0 0.75rem;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
}
.dsb-ticker-expand:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
.dsb-ticker-expand:focus-visible { outline: 2px solid var(--dsb-orange-400, #F08A4A); outline-offset: -2px; }
[data-theme="light"] .dsb-ticker-expand { color: #2a3644; }
[data-theme="light"] .dsb-ticker-expand:hover { background: rgba(11, 92, 173, 0.10); color: #0e1b2a; }

@media (min-width: 769px) {
    /* Inklappen alleen op mobiel aanbieden; desktop houdt de balk volledig. */
    .dsb-ticker-collapse { display: none; }
}

/* --- Mobiele FAB (MobileFab.razor) -------------------------------------------
   Primaire actie binnen duimbereik, alleen op mobiel. Zweeft rechtsonder boven de
   LiveTicker. Tekst (#fff) op de merkkleur, net als .btn-primary. */
.mobile-fab { display: none; }

@media (max-width: 768px) {
    .mobile-fab {
        position: fixed;
        right: max(16px, env(safe-area-inset-right, 0px));
        bottom: calc(var(--ticker-total-height) + 16px);
        z-index: 1085;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        height: 52px;
        padding: 0 1.15rem;
        border: none;
        border-radius: 999px;
        background: var(--color-primary, #DA5612);
        color: #fff;
        font-size: 0.92rem;
        font-weight: 700;
        text-decoration: none;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
        cursor: pointer;
    }

    .mobile-fab svg { width: 20px; height: 20px; flex: 0 0 auto; }

    .mobile-fab:hover,
    .mobile-fab:focus-visible {
        filter: brightness(1.06);
        color: #fff;
        outline: none;
    }

    .mobile-fab:focus-visible {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #DA5612) 45%, transparent), 0 8px 22px rgba(0, 0, 0, 0.28);
    }
}

/* --- O1: sticky actiebalk in offcanvas-formulieren (mobiel) -------------------
   Opslaan/Annuleren blijven onderaan het scrollende paneel zichtbaar i.p.v.
   helemaal naar beneden te moeten scrollen. De offcanvas-body is de scroll-
   container; negatieve marges trekken de balk vol-breed tot de paneelranden. */
/* Required field star indicator (WCAG 1.3.1 / 3.3.2) */
.required-star { color: var(--color-danger, #dc3545); margin-left: 2px; }

@media (max-width: 768px) {
    .offcanvas .form-actions-sticky {
        position: sticky;
        bottom: 0;
        z-index: 2;
        margin: 0.5rem -1.25rem -1.25rem;
        padding: 0.75rem 1.25rem;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
    }
}

/* --- O3: duidelijke tap-respons op touch ------------------------------------
   Tap-highlight in de merkkleur i.p.v. de standaard grijs/zwart-flits, plus een
   lichte indruk-animatie op touchscreens (geen hover beschikbaar). */
a, button, summary, [role="button"], .btn, .nav-link, .ss-trigger, .ss-option,
.mobile-fab, .dsb-ticker-btn, label.form-check-label {
    -webkit-tap-highlight-color: color-mix(in srgb, var(--color-primary, #DA5612) 20%, transparent);
}

@media (hover: none) {
    .btn:active,
    .mobile-fab:active,
    .nav-link:active,
    .kpi-card:active,
    .dsb-ticker-btn:active,
    .ss-trigger:active {
        transform: scale(0.97);
    }
}

/* --- P3: scroll-naar-boven knop (mobiel) ------------------------------------
   JS-geïnjecteerd (app-interop.js), linksonder zodat hij de FAB rechtsonder niet
   raakt. Verschijnt pas na flink scrollen (class .is-visible). Token-gebaseerd. */
.scroll-top-btn { display: none; }

@media (max-width: 768px) {
    .scroll-top-btn {
        position: fixed;
        left: max(16px, env(safe-area-inset-left, 0px));
        bottom: calc(var(--ticker-total-height) + 16px);
        z-index: 1084;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1px solid var(--color-border);
        border-radius: 50%;
        background: var(--color-surface);
        color: var(--color-text);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.26);
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease;
        cursor: pointer;
    }

    .scroll-top-btn.is-visible {
        opacity: 0.96;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* Stale: SignalR verbroken -> ticker dimmen zodat verouderde data herkenbaar is.
   De offline-badge zelf blijft op volle sterkte. */
.dsb-ticker--stale .dsb-ticker-viewport,
.dsb-ticker--stale .dsb-ticker-summary .dsb-ticker-sum {
    opacity: 0.55;
    filter: grayscale(0.4);
}

/* Onderhoud-kleur voor de scrollende items. */
.dsb-ticker-item.tick-maint .dsb-ticker-item-name { color: #F6C667; }
.dsb-ticker-item.tick-maint::before { background: #F6C667; }
[data-theme="light"] .dsb-ticker-item.tick-maint .dsb-ticker-item-name { color: #7a5b00; }
[data-theme="light"] .dsb-ticker-item.tick-maint::before { background: #a86b00; }

/* Mobiel: compacter; minst belangrijke samenvatting-pil ('onbekend') verbergen. */
@media (max-width: 768px) {
    .dsb-ticker-summary {
        gap: 6px;
        padding: 0 10px 0 calc(10px + env(safe-area-inset-left, 0px));
        /* Op smal scherm mag de samenvatting wijken (rechtse pillen clippen)
           zodat het scroll-venster en de pauzeknop altijd zichtbaar blijven. */
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
    }
    .dsb-ticker-sum { font-size: 0.66rem; }
    .dsb-ticker-sum--opt { display: none; }
    .dsb-ticker-btn { width: 36px; }
}

/* =============================================
   DSB SENSOR CARDS  compacte sensorwidgets
   ============================================= */
.dsb-sensor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.dsb-sensor-card {
    background: var(--color-surface, var(--color-surface, #062A4A));
    border: 1px solid var(--color-border, rgba(240,138,74,0.12));
    border-radius: 8px;
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
}

.dsb-sensor-card::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240,138,74,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.dsb-sensor-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(240,138,74,0.10);
    border: 1px solid rgba(240,138,74,0.20);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #F08A4A;
    margin-bottom: 10px;
}

.dsb-sensor-tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    animation: dsb-sensor-dot-pulse 2s ease-in-out infinite;
}

@keyframes dsb-sensor-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.dsb-sensor-value {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--color-text, rgba(255,255,255,0.92));
    line-height: 1;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    letter-spacing: -0.03em;
}

.dsb-sensor-unit {
    font-size: 1rem;
    font-weight: 600;
    color: #F08A4A;
    margin-left: 2px;
}

.dsb-sensor-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted, rgba(255,255,255,0.45));
    margin-top: 4px;
}

.dsb-sensor-label-sep {
    margin: 0 4px;
    opacity: 0.4;
}

/* =============================================
   DSB HEARTBEAT  kleine sparkline-achtige lijn
   ============================================= */
.dsb-heartbeat {
    width: 100%;
    height: 32px;
    overflow: hidden;
    position: relative;
}

.dsb-heartbeat svg {
    width: 200%;
    height: 100%;
    animation: dsb-heartbeat-scroll 4s linear infinite;
}

@keyframes dsb-heartbeat-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.dsb-heartbeat-line {
    fill: none;
    stroke: #F08A4A;
    stroke-width: 1.5;
    opacity: 0.7;
}

/* =============================================
   DSB HERO GLOW  radiale oranje gloed
   ============================================= */
.dsb-hero-glow {
    pointer-events: none;
    position: absolute;
    width: 800px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(240,138,74,0.12) 0%,
        rgba(240,138,74,0.04) 40%,
        transparent 70%);
    transform: translate(-50%, -50%);
    left: 70%;
    top: 50%;
    filter: blur(40px);
    z-index: 0;
}

/* Dashboard hero strip */
.dsb-hero-strip {
    background: linear-gradient(135deg, var(--color-bg, #00112C) 0%, var(--color-surface, #062A4A) 60%, var(--color-bg, #00112C) 100%);
    border-bottom: 1px solid rgba(240,138,74,0.12);
    padding: 24px 28px 20px;
    position: relative;
    overflow: hidden;
    margin: -1.5rem -1.5rem 1.5rem;
}

[data-theme="light"] .dsb-hero-strip {
    background: linear-gradient(135deg, #fefefe 0%, #fffbf2 60%, #fefefe 100%);
    border-bottom-color: rgba(240,138,74,0.20);
}

.dsb-hero-strip-title {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    color: rgba(255,255,255,0.95);
    letter-spacing: -0.02em;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}

[data-theme="light"] .dsb-hero-strip-title { color: var(--color-text, #00112C); }

.dsb-hero-strip-sub {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.50);
    position: relative;
    z-index: 1;
    margin-top: 4px;
}

[data-theme="light"] .dsb-hero-strip-sub { color: rgba(0,0,0,0.50); }

.dsb-hero-strip-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(240,138,74,0.12);
    border: 1px solid rgba(240,138,74,0.25);
    border-radius: 999px;
    padding: 3px 10px 3px 7px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #F08A4A;
    position: relative;
    z-index: 1;
}

.dsb-hero-strip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.20);
    animation: login-pulse-dot 1.8s ease-in-out infinite;
    flex-shrink: 0;
}

/* Dashboard hero volgens De Slimme Brug homepage */
.dsb-dashboard-hero {
    width: min(1180px, calc(100vw - 2rem));
    min-height: clamp(600px, calc(100vh - 104px), 760px);
    margin: 0 auto;
    padding: clamp(4rem, 9vh, 7rem) 0 clamp(2.5rem, 6vh, 5rem);
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(480px, 1.05fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    position: relative;
    isolation: isolate;
}

.dsb-dashboard-hero::before {
    content: '';
    position: absolute;
    inset: 8% -8% 2% 42%;
    background: radial-gradient(circle at 48% 44%, rgba(240, 138, 74, 0.24), transparent 17rem);
    filter: blur(18px);
    z-index: -1;
}

.dsb-hero-copy { max-width: 560px; }

.dsb-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.48rem 0.8rem;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    background: rgba(255,255,255,0.035);
    box-shadow: inset 0 0 0 1px rgba(240,138,74,0.05), 0 12px 28px rgba(0,0,0,0.22);
    color: rgba(255,255,255,0.78);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

[data-theme="light"] .dsb-live-pill {
    background: rgba(240,138,74,0.10);
    border-color: rgba(240,138,74,0.30);
    color: #92400e;
    box-shadow: 0 4px 12px rgba(240,138,74,0.10);
}

.dsb-hero-copy h1 {
    margin: 1.2rem 0;
    color: #ffffff;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: clamp(3.4rem, 6vw, 5.35rem);
    line-height: 0.96;
    font-weight: 800;
    letter-spacing: -0.07em;
}

[data-theme="light"] .dsb-hero-copy h1 {
    color: #0e1620;
}

.dsb-hero-copy h1 span {
    color: #F5A87A;
    text-shadow: 0 0 24px rgba(46,114,168,0.12);
}

[data-theme="light"] .dsb-hero-copy h1 span {
    color: #d97706;
    text-shadow: 0 0 24px rgba(240,138,74,0.20);
}

.dsb-hero-copy p {
    margin: 0;
    color: rgba(255,255,255,0.72);
    font-size: clamp(1.05rem, 1.55vw, 1.32rem);
    line-height: 1.5;
    font-weight: 600;
}

[data-theme="light"] .dsb-hero-copy p {
    color: #3f4a5a;
}

.dsb-hero-greeting {
    margin-top: 0.8rem;
    color: rgba(255,255,255,0.48);
    font-size: 0.9rem;
}

[data-theme="light"] .dsb-hero-greeting {
    color: #7b8898;
}

.dsb-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.dsb-hero-actions .btn {
    min-height: 50px;
    padding-inline: 1.2rem;
    border-radius: 0.35rem;
    font-size: 0.92rem;
    font-weight: 800;
}

.dsb-hero-actions .btn-primary {
    background: linear-gradient(180deg, #F08A4A, #dc7f25);
    border: 0;
    color: #1d1207;
    box-shadow: 0 14px 30px rgba(220,127,37,0.20);
}

.dsb-hero-actions .btn-outline-light {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.16);
    color: #ffffff;
}

[data-theme="light"] .dsb-hero-actions .btn-outline-light {
    background: transparent;
    border-color: rgba(14,22,32,0.25);
    color: #0e1620;
}

[data-theme="light"] .dsb-hero-actions .btn-outline-light:hover {
    background: rgba(14,22,32,0.06);
    border-color: rgba(14,22,32,0.40);
}

.dsb-hero-metrics {
    margin-top: 2.25rem;
    padding-top: 1.55rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
}

[data-theme="light"] .dsb-hero-metrics {
    border-top-color: rgba(14,22,32,0.10);
}

.dsb-hero-metrics strong {
    display: block;
    color: #ffffff;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: clamp(1.9rem, 3vw, 2.45rem);
    line-height: 1;
    letter-spacing: -0.055em;
}

[data-theme="light"] .dsb-hero-metrics strong {
    color: #0e1620;
}

.dsb-hero-metrics strong em {
    color: #F08A4A;
    font-size: 0.72em;
    font-style: normal;
}

.dsb-hero-metrics span {
    display: block;
    margin-top: 0.55rem;
    color: rgba(255,255,255,0.48);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

[data-theme="light"] .dsb-hero-metrics span {
    color: #7b8898;
}

.dsb-bridge-visual {
    min-height: 520px;
    position: relative;
}

.dsb-bridge-panel {
    width: min(430px, 82%);
    margin: 0 auto;
    padding: 0.85rem 1rem 0.65rem;
    border: 1px solid rgba(59,130,246,0.26);
    border-radius: 0.65rem;
    background: linear-gradient(180deg, rgba(20,25,34,0.96), rgba(18,22,30,0.94));
    box-shadow: 0 22px 60px rgba(0,0,0,0.34), inset 0 0 0 1px rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.82);
    position: relative;
    z-index: 3;
}

.dsb-panel-topline,
.dsb-panel-grid small,
.dsb-panel-grid span {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.dsb-panel-topline {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: rgba(255,255,255,0.42);
    font-size: 0.62rem;
    font-weight: 800;
}

.dsb-panel-status { color: #ffffff; }

.dsb-panel-grid {
    margin-top: 0.8rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.dsb-panel-grid > div + div { border-left: 1px solid rgba(255,255,255,0.08); padding-left: 0.9rem; }
.dsb-panel-grid small { display: block; color: rgba(255,255,255,0.36); font-size: 0.58rem; font-weight: 800; }
.dsb-panel-grid strong { display: block; margin-top: 0.25rem; color: #ffffff; font-size: 1.45rem; line-height: 1; font-family: var(--font-mono, 'JetBrains Mono', monospace); }
.dsb-panel-grid span { display: block; margin-top: 0.35rem; color: rgba(255,255,255,0.34); font-size: 0.55rem; font-weight: 800; }

.dsb-heartline { width: 100%; height: 52px; margin-top: 0.4rem; }
.dsb-heartline path {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 2.2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.dsb-bridge-stage {
    position: absolute;
    inset: 140px 0 0;
    border-bottom: 1px solid rgba(240,138,74,0.10);
    background: radial-gradient(circle at 50% 8%, rgba(240,138,74,0.22), transparent 12rem), linear-gradient(90deg, transparent 49.8%, rgba(240,138,74,0.12) 50%, transparent 50.2%);
}

.dsb-bridge-road {
    position: absolute;
    left: 8%; right: 8%; top: 58%;
    height: 4px;
    background: linear-gradient(90deg, rgba(255,255,255,0.65), #ffffff, rgba(255,255,255,0.65));
    box-shadow: 0 0 14px rgba(255,255,255,0.15);
}

.dsb-bridge-pier {
    position: absolute;
    top: 47%;
    width: 28px;
    height: 62px;
    border-top: 8px solid #ffffff;
    border-bottom: 10px solid rgba(255,255,255,0.72);
    background: linear-gradient(90deg, rgba(255,255,255,0.78), #ffffff, rgba(255,255,255,0.78));
}

.dsb-bridge-pier.left { left: 26%; }
.dsb-bridge-pier.right { right: 26%; }

.dsb-bridge-leaf {
    position: absolute;
    top: 45%;
    width: 8px;
    height: 138px;
    background: linear-gradient(180deg, #ffffff, #d5d7da);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.26), 0 0 16px rgba(255,255,255,0.16);
    transform-origin: 50% 0;
}

.dsb-bridge-leaf.left { left: 40%; transform: rotate(32deg); }
.dsb-bridge-leaf.right { right: 40%; transform: rotate(-32deg); }

.dsb-bridge-stage .dsb-sensor-card {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.7rem;
    border-radius: 0.42rem;
    border: 1px solid rgba(240,138,74,0.48);
    background: rgba(86, 52, 8, 0.70);
    color: rgba(255,255,255,0.86);
    box-shadow: 0 10px 30px rgba(0,0,0,0.28), inset 0 0 18px rgba(240,138,74,0.11);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.dsb-bridge-stage .dsb-sensor-card::before {
    width: 7px;
    height: 7px;
    inset: auto;
    position: static;
    background: #F08A4A;
    border-radius: 50%;
    box-shadow: 0 0 8px #F08A4A;
}

.dsb-sensor-a { left: 7%; top: 30%; }
.dsb-sensor-b { right: 3%; top: 30%; }
.dsb-sensor-c { left: 12%; bottom: 19%; }
.dsb-sensor-d { right: 10%; bottom: 19%; }

@media (max-width: 1100px) {
    .dsb-dashboard-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 3rem; }
    .dsb-bridge-visual { min-height: 500px; }
}

@media (max-width: 700px) {
    .dsb-dashboard-hero { width: min(100% - 1rem, 1180px); padding-top: 2rem; }
    .dsb-hero-copy h1 { font-size: clamp(2.8rem, 14vw, 4rem); }
    .dsb-hero-metrics { grid-template-columns: 1fr; }
    .dsb-bridge-panel { width: 100%; }
    .dsb-panel-grid { grid-template-columns: 1fr; }
    .dsb-panel-grid > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,0.08); padding-left: 0; padding-top: 0.7rem; }
    .dsb-bridge-stage { display: none; }
    .dsb-bridge-visual { min-height: auto; }
}

/* ============================================================
   LIGHT MODE  GLOBALE OVERRIDES
   Alle hardcoded donkere kleuren correcties voor light thema.
   ============================================================ */

/* -- Body -- */
[data-theme="light"] body {
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* -- Bootstrap component resets voor light mode -- */
[data-theme="light"] .form-control,
[data-theme="light"] .form-select,
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="datetime-local"] {
    background-color: #ffffff;
    color: #0e1620;
    border-color: #dce2ea;
    color-scheme: light;
}

[data-theme="light"] .form-control::placeholder { color: #b5bfcc; }
[data-theme="light"] .form-label,
[data-theme="light"] label { color: #0e1620; }
[data-theme="light"] .form-check-label { color: #0e1620; }
[data-theme="light"] .form-text { color: #7b8898; }

[data-theme="light"] .input-group-text {
    background-color: #eef1f5;
    border-color: #dce2ea;
    color: #0e1620;
}

/* -- Bootstrap nav-tabs -- */
[data-theme="light"] .nav-tabs {
    border-color: #dce2ea;
}
[data-theme="light"] .nav-tabs .nav-link {
    color: #7b8898;
    border-color: transparent;
}
[data-theme="light"] .nav-tabs .nav-link:hover {
    color: #0e1620;
    border-color: #dce2ea;
}
[data-theme="light"] .nav-tabs .nav-link.active {
    background-color: #ffffff;
    border-color: #dce2ea #dce2ea #ffffff;
    color: #0e1620;
}

/* -- Dropdowns -- */
[data-theme="light"] .dropdown-menu {
    background-color: #ffffff;
    border-color: #dce2ea;
    box-shadow: 0 4px 16px rgba(14,22,32,0.10);
}
[data-theme="light"] .dropdown-item {
    color: #0e1620;
}
[data-theme="light"] .dropdown-item:hover,
[data-theme="light"] .dropdown-item:focus {
    background-color: #eef1f5;
    color: #0e1620;
}
[data-theme="light"] .dropdown-divider {
    border-color: #dce2ea;
}

/* -- Modals -- */
[data-theme="light"] .modal-content {
    background-color: #ffffff;
    border-color: #dce2ea;
    color: #0e1620;
}
[data-theme="light"] .modal-header {
    border-color: #dce2ea;
    background-color: #f7f8fa;
}
[data-theme="light"] .modal-footer {
    border-color: #dce2ea;
    background-color: #f7f8fa;
}

/* -- Offcanvas -- */
[data-theme="light"] .offcanvas {
    background-color: #ffffff;
    color: #0e1620;
}
[data-theme="light"] .offcanvas-header {
    border-bottom-color: #dce2ea;
}

/* -- Cards -- */
[data-theme="light"] .card {
    background-color: #ffffff !important;
    border-color: #dce2ea !important;
    color: #0e1620;
}
[data-theme="light"] .card-header {
    background-color: #f7f8fa !important;
    border-color: #dce2ea !important;
    color: #0e1620;
}
[data-theme="light"] .card-footer {
    background-color: #f7f8fa !important;
    border-color: #dce2ea !important;
}

/* -- Tabellen -- */
[data-theme="light"] .table {
    color: #0e1620;
    --bs-table-bg: #ffffff;
    --bs-table-border-color: #dce2ea;
    --bs-table-striped-bg: #f7f8fa;
    --bs-table-hover-bg: #eef1f5;
    --bs-table-color: #0e1620;
}
[data-theme="light"] .table thead th {
    background-color: #eef1f5 !important;
    color: #0e1620 !important;
    border-color: #dce2ea !important;
}
[data-theme="light"] .table td,
[data-theme="light"] .table th {
    border-color: #dce2ea;
}

/* -- List groups -- */
[data-theme="light"] .list-group-item {
    background-color: #ffffff;
    border-color: #dce2ea;
    color: #0e1620;
}
[data-theme="light"] .list-group-item:hover,
[data-theme="light"] .list-group-item-action:hover {
    background-color: #eef1f5;
    color: #0e1620;
}
[data-theme="light"] .list-group-item.active {
    background-color: #F08A4A;
    border-color: #F08A4A;
    color: #1d1207;
}

/* -- Pagination -- */
[data-theme="light"] .page-link {
    background-color: #ffffff;
    border-color: #dce2ea;
    color: #0e1620;
}
[data-theme="light"] .page-link:hover {
    background-color: #eef1f5;
    color: #0e1620;
}
[data-theme="light"] .page-item.disabled .page-link {
    background-color: #f7f8fa;
    border-color: #dce2ea;
    color: #b5bfcc;
}
[data-theme="light"] .page-item.active .page-link {
    background-color: #F08A4A;
    border-color: #F08A4A;
    color: #1d1207;
}

/* -- Alerts -- */
[data-theme="light"] .alert-dark {
    background-color: #eef1f5;
    border-color: #dce2ea;
    color: #0e1620;
}

/* -- Badges -- */
[data-theme="light"] .badge.bg-dark,
[data-theme="light"] .badge.text-bg-dark {
    background-color: #3f4a5a !important;
    color: #ffffff !important;
}
[data-theme="light"] .badge.bg-secondary,
[data-theme="light"] .badge.text-bg-secondary {
    background-color: #7b8898 !important;
    color: #ffffff !important;
}

/* -- Toasts -- */
[data-theme="light"] .toast {
    background-color: #ffffff;
    border-color: #dce2ea;
    color: #0e1620;
}
[data-theme="light"] .toast-header {
    background-color: #f7f8fa;
    border-color: #dce2ea;
    color: #0e1620;
}

/* -- Accordion -- */
[data-theme="light"] .accordion-item {
    background-color: #ffffff;
    border-color: #dce2ea;
}
[data-theme="light"] .accordion-button {
    background-color: #f7f8fa;
    color: #0e1620;
}
[data-theme="light"] .accordion-button:not(.collapsed) {
    background-color: #eef1f5;
    color: #0e1620;
}
[data-theme="light"] .accordion-body {
    background-color: #ffffff;
    color: #0e1620;
}

/* -- Page headers -- */
[data-theme="light"] .page-header,
[data-theme="light"] .beheer-header {
    color: #0e1620;
}
[data-theme="light"] .beheer-header h1,
[data-theme="light"] .beheer-header p {
    color: #0e1620;
}

/* -- Text utilities -- */
[data-theme="light"] .text-muted,
[data-theme="light"] .text-secondary {
    color: #7b8898 !important;
}
[data-theme="light"] .text-dark { color: #0e1620 !important; }
[data-theme="light"] small, [data-theme="light"] .small { color: inherit; }
[data-theme="light"] hr { border-color: #dce2ea; opacity: 1; }

/* -- Sidebar nav-legend -- */
[data-theme="light"] .nav-role-legend {
    border-top-color: rgba(14,22,32,0.10);
}

/* -- Sidebar in light mode (al donker, hoeft niet) -- */
/* Sidebar blijft altijd donker (navy), topbar ook  dat is opzettelijk */

/* -- Hoofdinhoud headings -- */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
    color: #0e1620;
}

/* -- Hover voor clickable tr -- */
[data-theme="light"] .tr-clickable:hover td {
    background-color: #eef1f5;
}

/* -- Category pills in light mode -- */
[data-theme="light"] .category-pill.active {
    background: #0e1620;
    color: #ffffff;
    border-color: #0e1620;
}

/* -- Compliance cards  de header heeft gekleurde achtergrond, wit is ok -- */
/* (geen aanpassing nodig voor compliance-header) */

/* -- Dashboard ticker in light mode -- */
[data-theme="light"] .dsb-ticker {
    background: #eef1f5;
    border-top-color: #dce2ea;
}

/* -- Dashboard live-pill fix (al gedaan in hero sectie) -- */

/* -- Topbar action buttons -- */
[data-theme="light"] .topbar-btn {
    background: rgba(14,22,32,0.06);
    border-color: rgba(14,22,32,0.15);
    color: #ffffff; /* topbar is altijd donker navy */
}

/* -- Scrollbar in light mode -- */
[data-theme="light"] ::-webkit-scrollbar-track { background: #eef1f5; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #b5bfcc; border-color: #eef1f5; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #7b8898; }

/* -- Dashboard actiebalk -- */
.dashboard-action-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.dashboard-greeting {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

[data-theme="light"] .dashboard-action-bar {
    background: #ffffff;
    border-bottom-color: #dce2ea;
}

/* ============================================================
   PageHeader - herbruikbare paginatitelbalk
   Responsieve layout voorkomt overlap tussen titel, acties en filters.
   ============================================================ */
.page-header {
    background: transparent;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 200;
    /* Compenseer de horizontale padding van .content-area zodat de header
       altijd edge-to-edge loopt, ongeacht de outer container-padding. */
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    width: calc(100% + 3rem);
}

.page-header-main {
    display: grid;
    grid-template-columns: auto minmax(12rem, 1fr) auto auto;
    align-items: center;
    column-gap: 0.85rem;
    min-height: 60px;
    padding: 0.6rem 1.5rem;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--color-surface) 98%, var(--color-bg)) 0%,
            var(--color-surface) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    backdrop-filter: blur(10px);
}

/* Light-mode page-header: witte achtergrond met lichte schaduwen */
[data-theme="light"] .page-header-main {
    background: linear-gradient(180deg, #ffffff 0%, var(--dsb-bone, #F1ECE5) 100%);
    border-bottom-color: var(--dsb-mist, #E2DCD3);
    box-shadow: 0 1px 0 var(--dsb-mist, #E2DCD3), 0 4px 16px rgba(14,22,32,0.06);
}

.page-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
    color: var(--color-primary);
}

.page-header-icon svg {
    display: block;
    width: 15px;
    height: 15px;
}

.page-header-title-group {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page-header-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.page-header-subtitle {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.page-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    justify-self: end;
}

.page-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
    min-width: 0;
    max-width: 100%;
    justify-self: end;
}

.page-header-actions .btn,
.page-header-actions .filter-chip {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-header-actions .form-control,
.page-header-actions .form-select {
    flex: 1 1 10rem;
    min-width: 8rem;
    max-width: 16rem;
}

.page-header-actions .page-header-select {
    flex: 0 1 12rem;
    min-width: 10.5rem;
    max-width: 13rem;
    border-radius: 8px;
    font-weight: 600;
}

.page-header-filterbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    row-gap: 0.45rem;
    padding: 0.55rem 1.5rem 0.7rem;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
    background: color-mix(in srgb, var(--color-bg) 74%, var(--color-surface));
    font-size: 0.8rem;
    color: var(--color-text-muted);
    min-height: 0;
    overflow: visible;
}

.page-header-filterbar strong {
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    margin-right: 0.1rem;
}

/* Live badge */
.page-header-live {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 20px;
    padding: 0.1rem 0.5rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.8;
}

.page-header-live::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    animation: page-header-pulse 1.8s ease-in-out infinite;
}

@keyframes page-header-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

/* Teller pill */
.page-header-count {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-border);
    border-radius: 20px;
    padding: 0.1rem 0.5rem;
    line-height: 1.8;
}

.page-header-count--fault {
    border: 1px solid color-mix(in srgb, var(--status-fault, #b00020) 35%, transparent);
    color: var(--status-fault, #b00020);
    background: color-mix(in srgb, var(--status-fault, #b00020) 14%, transparent);
}

.detail-nav-pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    line-height: 1;
    user-select: none;
    white-space: nowrap;
}

/* Light mode */
[data-theme="light"] .page-header {
    background: transparent;
    border-bottom-color: #dce2ea;
}

[data-theme="light"] .page-header-main {
    background: linear-gradient(180deg, #ffffff, #fbfcfe);
    border-bottom-color: #dce2ea;
}

[data-theme="light"] .page-header-filterbar {
    background: #f4f6f9;
    border-top-color: #dce2ea;
}

[data-theme="light"] .page-header-icon {
    background: color-mix(in srgb, var(--color-primary) 10%, #fff);
}

[data-theme="light"] .page-header-title  { color: #0e1620; }
[data-theme="light"] .page-header-subtitle { color: #4a5568; }

/* Responsive */
@media (max-width: 1100px) {
    .page-header-main {
        grid-template-columns: auto minmax(0, 1fr) auto;
        row-gap: 0.55rem;
    }

    .page-header-title-group {
        min-width: 0;
    }

    .page-header-badge {
        justify-self: end;
    }

    .page-header-actions {
        grid-column: 2 / -1;
        justify-content: flex-start;
        justify-self: stretch;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .page-header-main {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 0.55rem 0.85rem;
        gap: 0.5rem;
    }

    .page-header-badge {
        grid-column: 2;
        justify-self: start;
    }

    .page-header-actions {
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.4rem 0.45rem;
    }

    .page-header-actions > .btn,
    .page-header-actions > .filter-chip {
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
        max-width: 100%;
    }

    .page-header-filterbar {
        align-items: flex-start;
        padding: 0.6rem 0.85rem 0.75rem;
        gap: 0.45rem;
    }

    .page-header-filterbar strong {
        flex-basis: 100%;
        margin-top: 0.25rem;
    }

    .page-header-title { font-size: 0.88rem; }
    .page-header-icon  { width: 26px; height: 26px; }

    .page-header-actions .btn,
    .filter-chip {
        min-height: 38px;
    }
}

@media (max-width: 420px) {
    /* Knoppen krijgen natuurlijke breedte, wrappen netjes, niet meer volledig breed. */
    .page-header-actions {
        gap: 0.35rem 0.4rem;
    }

    .page-header-actions > .btn,
    .page-header-actions > .filter-chip {
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
    }
}

.filter-collapse-toggle {
    display: none !important;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    color: var(--color-text);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.1;
}

.dashboard-filter-content {
    display: contents;
}

.dashboard-filter-shell {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) auto;
    align-items: center;
    gap: 0.75rem 1rem;
    width: 100%;
}

.dashboard-filter-summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    min-width: 0;
}

.dashboard-filter-kicker {
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-filter-current {
    color: var(--color-text);
    font-size: 0.82rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-filter-fields {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(9rem, 1fr)) auto;
    align-items: end;
    gap: 0.85rem;
    width: 100%;
    background-color: transparent;
}

[data-theme="dark"] .dashboard-filter-fields {
    background-color: #062A4A;
}

[data-theme="dark"] .dashboard-filter-field span {
    color: #e8f0f8;
}

[data-theme="dark"] .dashboard-filter-reset {
    color: #e8f0f8;
    background-color: #0c3a66;
    border-color: #1e5080;
}

.dashboard-filter-field {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.dashboard-filter-field span {
    color: #1c2e3f !important;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-left: 0.1rem;
}

.dashboard-filter-field .form-select {
    min-height: 38px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
    background-color: color-mix(in srgb, var(--color-surface) 88%, var(--color-bg));
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 2rem 0.35rem 0.75rem;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.dashboard-filter-field .form-select:hover {
    border-color: color-mix(in srgb, var(--color-border) 100%, transparent);
    background-color: color-mix(in srgb, var(--color-surface) 96%, var(--color-bg));
}

.dashboard-filter-field .form-select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--color-primary) 70%, var(--color-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.dashboard-filter-reset {
    min-height: 38px;
    align-self: end;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.4rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
    background-color: color-mix(in srgb, var(--color-surface) 88%, var(--color-bg));
    color: #1c2e3f !important;
    transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}

.dashboard-filter-reset:hover,
.dashboard-filter-reset:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
    color: var(--color-text);
    background-color: color-mix(in srgb, var(--color-surface) 96%, var(--color-bg));
    outline: none;
}

[data-theme="light"] .dashboard-filter-field .form-select,
[data-theme="light"] .dashboard-filter-reset {
    background-color: #ffffff !important;
    border-color: #d4dbe6 !important;
    color: #1f2937 !important;
}

[data-theme="light"] .dashboard-filter-field span {
    color: #374151 !important;
}

[data-theme="light"] .dashboard-filter-reset {
    color: #1f2937 !important;
}

[data-theme="dark"] .dashboard-filter-field span,
[data-theme="dark"] .dashboard-filter-reset {
    color: #e8f0f8 !important;
}

[data-theme="light"] .dashboard-filter-reset:hover,
[data-theme="light"] .dashboard-filter-reset:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary) 55%, #d4dbe6);
    color: #0e1620;
}

@media (max-width: 768px) {
    .filter-collapse-toggle {
        display: inline-flex !important;
        min-height: 44px;
        padding: 0 1rem;
        border-radius: 999px !important;
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1.1;
        white-space: nowrap;
        margin-bottom: 0.2rem;
    }

    .dashboard-filter-content {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
        gap: 0.6rem 0.65rem;
        width: 100%;
    }

    .dashboard-filter-shell {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .dashboard-filter-summary {
        align-self: center;
    }

    .dashboard-filter-current {
        white-space: normal;
    }

    .dashboard-filter-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.6rem 0.65rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .dashboard-filter-field {
        min-width: 0;
    }

    .dashboard-filter-field .form-select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Reset altijd op eigen rij, volledige breedte  niet meer ingedrukt naast laatste select. */
    .dashboard-filter-reset {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        margin-top: 0.15rem !important;
    }

    .dashboard-filter-content .filter-group {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.45rem;
        width: 100%;
    }

    .dashboard-filter-content .filter-group strong {
        margin: 0;
        padding-right: 0.2rem;
        flex: 0 0 auto;
    }

    .dashboard-filter-content .filter-chip {
        flex: 0 1 auto;
        width: auto;
    }

    .dashboard-filter-content.is-collapsed {
        display: none;
    }

    .dashboard-filter-reset {
        width: 100%;
    }

    .page-header-actions > * {
        min-width: 0;
    }

    /* Tap-target hoogte; geen full-width meer afdwingen */
    .page-header-actions .btn,
    .page-header-actions .filter-chip {
        min-height: 40px;
    }

    .page-header-actions .form-control,
    .page-header-actions .form-select {
        flex: 1 1 10rem;
        min-width: 8rem;
        max-width: 100%;
    }

    .table-responsive {
        overflow-x: auto;
        overscroll-behavior: contain;
    }

    .table-responsive table {
        min-width: 640px;
    }

    .map-container {
        /* Mobiel: volledige beschikbare hoogte binnen .map-wrapper (flex chain).
           Geen dvh-rekensom hier  die conflicteerde met de globale .map-container
           regel en negeerde PageHeader + ticker. */
        min-height: 240px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .leaflet-top,
    .leaflet-bottom,
    .leaflet-control {
        z-index: 100 !important;
    }

    .map-legend-overlay {
        display: none;
    }

    .tile-panel {
        right: 0;
        max-width: min(92vw, 320px);
    }
}

@media (max-width: 768px) {
    .page-header-actions {
        gap: 0.35rem;
    }

    .page-header-actions .dashboard-top-action {
        min-height: 34px !important;
        height: 34px !important;
        padding: 0 0.5rem !important;
        font-size: 0.74rem !important;
    }

    .page-header-live {
        min-width: 62px !important;
        height: 34px !important;
        padding: 0 0.6rem !important;
        font-size: 0.72rem !important;
    }
}

@media (max-width: 420px) {
    .dashboard-filter-content .filter-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
    }

    .dashboard-filter-shell {
        grid-template-columns: 1fr;
    }

    .dashboard-filter-toggle {
        width: 100%;
    }

    .dashboard-filter-fields {
        grid-template-columns: 1fr;
    }

    .dashboard-filter-content .filter-group strong {
        width: 100%;
        margin-bottom: 0.1rem;
    }

    .dashboard-filter-content .filter-chip {
        width: 100%;
    }
}

.object-form-offcanvas {
    width: min(420px, 100vw);
}

.object-location-editor {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.65rem;
    background: color-mix(in srgb, var(--color-surface, #fff) 90%, var(--color-bg, #00112C));
}

.object-location-map {
    width: 100%;
    min-height: 220px;
    height: 220px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    background: #0b1725;
    isolation: isolate;
}

.object-location-map .leaflet-container {
    width: 100%;
    height: 100%;
}

.object-location-map--modal {
    min-height: min(62vh, 560px);
    height: min(62vh, 560px);
}

.object-location-modal {
    position: fixed;
    z-index: 1501;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(980px, calc(100vw - 1.25rem));
    max-width: 98vw;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 1rem);
}

.object-location-modal__header,
.object-location-modal__footer {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
}

.object-location-modal__footer {
    border-bottom: none;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
}

.object-location-modal__body {
    padding: 0.75rem 0.9rem;
    overflow: auto;
}

@media (max-width: 768px) {
    .object-location-map {
        min-height: 200px;
        height: 200px;
    }

    .object-location-modal {
        width: calc(100vw - 0.8rem);
        max-height: calc(100vh - 0.5rem);
    }

    .object-location-map--modal {
        min-height: 54vh;
        height: 54vh;
    }
}

/* ---------------------------------------------------------------------------
 * Description-cel in tabellen (o.a. ObjectDetail meldingen).
 * Op desktop ruim, op mobiel ellipsis met tooltip (title-attribute).
 * ------------------------------------------------------------------------- */
.description-cell {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .description-cell {
        max-width: 180px;
    }
}

/* ---------------------------------------------------------------------------
 * ApexCharts thema-fix: voorkom witte achtergrond in dark mode.
 * ApexCharts injecteert inline background op .apexcharts-canvas en de svg;
 * dit overschrijft die met transparant zodat de card-achtergrond zichtbaar blijft.
 * --------------------------------------------------------------------------- */
.apexcharts-canvas,
.apexcharts-canvas svg,
.apexcharts-inner {
    background: transparent !important;
}

/* chart-card gradient border: CSS-vars passen automatisch aan per thema */
[data-theme="dark"] .chart-card {
    background:
        linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
        linear-gradient(145deg, var(--color-primary, #DA5612) 0%, rgba(249,245,241,0.22) 80%) border-box !important;
}

[data-theme="dark"] .apexcharts-canvas,
[data-theme="dark"] .apexcharts-canvas svg {
    background: transparent !important;
}

/* ApexCharts tooltip in dark mode */
[data-theme="dark"] .apexcharts-tooltip {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}
[data-theme="dark"] .apexcharts-tooltip-title {
    background: color-mix(in srgb, var(--color-surface) 80%, var(--color-bg)) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

/* As-labels, legenda en titels: ApexCharts' standaard ForeColor (#373d3f) is onleesbaar
 * op een donkere kaart. In dark mode terugzetten naar de thema-token zodat alle grafieken
 * in beide thema's leesbaar blijven (WCAG AA). */
[data-theme="dark"] .apexcharts-text,
[data-theme="dark"] .apexcharts-text tspan,
[data-theme="dark"] .apexcharts-yaxis-title text,
[data-theme="dark"] .apexcharts-xaxis-title text,
[data-theme="dark"] .apexcharts-datalabel,
[data-theme="dark"] .apexcharts-datalabels text {
    fill: var(--color-text-muted) !important;
}
[data-theme="dark"] .apexcharts-legend-text {
    color: var(--color-text-muted) !important;
}
[data-theme="dark"] .apexcharts-gridline,
[data-theme="dark"] .apexcharts-grid line {
    stroke: color-mix(in srgb, var(--color-border) 55%, transparent) !important;
}

/* ---------------------------------------------------------------------------
 * Standaard breakpoints (voor toekomstige consolidatie).
 * Huidige media queries gebruiken nog meerdere waarden; nieuwe styles zouden
 * deze 3 breakpoints moeten gebruiken om onderhoud te vereenvoudigen.
 *   --bp-mobile:  480px  (klein telefoon)
 *   --bp-tablet:  768px  (tablet portrait / hamburger menu grens)
 *   --bp-desktop: 1100px (desktop sidebar layout)
 * ------------------------------------------------------------------------- */
:root {
    --bp-mobile: 480px;
    --bp-tablet: 768px;
    --bp-desktop: 1100px;
}

/* =============================================================================
   DE SLIMME BRUG  Design System component-stijlen (conform colors_and_type.css)
   Navy #062A4A  Oranje #DA5612  Crme #F9F5F1
   Space Grotesk (display)  Inter (body)  JetBrains Mono (mono/data)
   ============================================================================= */

/*  DSB utility klassen  */
.dsb-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;            /* 11px */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dsb-orange-500, #DA5612);
    line-height: 1.3;
}
[data-theme="dark"] .dsb-eyebrow { color: var(--dsb-orange-400, #F08A4A); }

.dsb-section-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--color-text);
    margin: 0 0 0.5rem;
}

.dsb-section-lead {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    max-width: 640px;
    margin: 0;
}

.dsb-mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

.dsb-display {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.05;
}

/*  KPI-cards  DSB stijl  */
/* Bestaande .kpi-card vervangen door een volledig DSB-conforme variant.
   Wit (light) of navy-900 (dark) achtergrond, oranje eyebrow, mono waarde. */
.kpi-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 12px);
    padding: 0.95rem 1.05rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    position: relative;
    overflow: hidden;
    top: 0;
    transition: box-shadow 0.16s var(--ease-out), border-color 0.16s var(--ease-out), top 0.14s var(--ease-out);
    box-shadow: var(--shadow-sm);
}
.kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--dsb-orange-500, #DA5612);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.kpi-card:hover {
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--dsb-orange-500) 28%, var(--color-border));
    /* Relatieve offset i.p.v. transform: een transform zou een containing block +
       stacking-context maken, waardoor de position:fixed InfoTooltip in de kaart
       gevangen en door overflow:hidden geclipt raakt (en achter buurtegels valt). */
    top: -2px;
}
.kpi-card:hover::before { opacity: 1; }

.kpi-card-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dsb-slate-500, #7B7569);
    line-height: 1.3;
}
[data-theme="dark"] .kpi-card-label { color: rgba(249,245,241,0.60); }

.kpi-card-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--color-text);
    margin: 0.1rem 0 0.05rem;
}

/* Noemer in breuk-waarde, bijv. "59/73" -> de "/73" is kleiner + gedempt */
.kpi-card-denominator {
    font-size: 0.65em;
    font-weight: 400;
    opacity: 0.55;
    letter-spacing: -0.01em;
    margin-left: 1px;
}

.kpi-card-trend {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* Trend badge met pijl (bijv. "▲ 12% vs gem.") */
.kpi-card-trend.up,
.kpi-card-trend.down {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.45rem;
    border-radius: 2rem;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.35;
}
.kpi-card-trend.up {
    background: rgba(22,101,52,.12);
    color: #166534;
}
.kpi-card-trend.down {
    background: rgba(153,27,27,.10);
    color: #991b1b;
}
/* Dark mode aanpassingen */
[data-theme="dark"] .kpi-card-trend.up {
    background: rgba(110,231,160,.14);
    color: #6EE7A0 !important;
}
[data-theme="dark"] .kpi-card-trend.down {
    background: rgba(255,160,160,.12);
    color: #FFA0A0 !important;
}

/* Beschrijvende subtext verborgen: minder tekst op de kaart; de volledige
   toelichting blijft beschikbaar via de (i)-infotooltip rechtsboven. */
.kpi-card-desc {
    display: none;
}
/* Vaste opaque achtergrond zodat axe-core het contrast correct kan meten (ook variant-klassen) */
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .kpi-card.kpi-ok,
[data-theme="dark"] .kpi-card.kpi-fault,
[data-theme="dark"] .kpi-card.kpi-warn,
[data-theme="dark"] .kpi-card.kpi-info { background: #062A4A !important; }

/* KPI-status varianten  kleur-accent op top-border */
.kpi-card.kpi-ok::before    { background: var(--dsb-success-500, #16A34A); opacity: 1; }
.kpi-card.kpi-fault::before { background: var(--dsb-danger-500, #DC2626);  opacity: 1; }
.kpi-card.kpi-warn::before  { background: var(--dsb-warning-500, #D97706); opacity: 1; }
.kpi-card.kpi-info::before  { background: var(--dsb-navy-500, #2E72A8);    opacity: 1; }

.kpi-card.kpi-ok    { border-color: color-mix(in srgb, var(--dsb-success-500) 22%, var(--color-border)); }
.kpi-card.kpi-fault { border-color: color-mix(in srgb, var(--dsb-danger-500) 22%, var(--color-border)); }
.kpi-card.kpi-warn  { border-color: color-mix(in srgb, var(--dsb-warning-500) 22%, var(--color-border)); }

/* KPI-info knop rechtsboven */
.kpi-card-info {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    opacity: 0.45;
    transition: opacity 0.15s ease;
}
.kpi-card:hover .kpi-card-info { opacity: 1; }

/* KPI-grid layout */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
/* Mobiel: nog compacter — kleinere waarde/label, krappere padding en de
   trend-regel verbergen zodat alleen label + waarde overblijven. */
@media (max-width: 768px) {
    .kpi-card { padding: 0.7rem 0.8rem 0.65rem; gap: 0.1rem; }
    .kpi-card-value { font-size: 1.55rem; margin: 0.1rem 0 0; }
    .kpi-card-label { font-size: 0.62rem; letter-spacing: 0.05em; }
    /* Trend-regel blijft zichtbaar (bevat unieke live-cijfers op o.a. Home en het
       Bestuurlijk dashboard, zonder tooltip-fallback) maar wordt compacter. */
    .kpi-card-trend { font-size: 0.6rem; margin-top: 0.1rem; gap: 0.25rem; line-height: 1.3; }
    .kpi-card-trend.up,
    .kpi-card-trend.down { padding: 0.1rem 0.35rem; font-size: 0.6rem; }
}
@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .kpi-card-value { font-size: 1.4rem; }
}

/*  Chart-cards  DSB stijl — gradient gekleurde rand  */
.chart-card {
    background:
        linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
        linear-gradient(145deg, var(--color-primary, #DA5612) 0%, var(--color-border) 80%) border-box;
    border: 1.5px solid transparent;
    border-radius: var(--radius-lg, 12px);
    padding: 1.375rem 1.5rem 1.25rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.16s var(--ease-out);
}
.chart-card:hover {
    box-shadow: var(--shadow-md), 0 4px 20px rgba(218,86,18,.12);
}

.chart-card h2, .chart-card h3 {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--color-text);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Dark mode: expliciete dark-surface + iets zichtbaardere rand */
[data-theme="dark"] .chart-card {
    background:
        linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
        linear-gradient(145deg, var(--color-primary, #DA5612) 0%, rgba(249,245,241,0.22) 80%) border-box;
}

/*  DSB-card (generiek, conform design system cards.html)  */
.dsb-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-sm);
    padding: 1.375rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: box-shadow 0.16s var(--ease-out), border-color 0.16s var(--ease-out), top 0.14s var(--ease-out);
}
.dsb-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border);
    /* top i.p.v. transform  zie toelichting bij .tile:hover/.kpi-card:hover: voorkomt dat de kaart
       een eigen stacking context/containing block vormt die een overlay erin (tooltip, dropdown)
       zou opsluiten. */
    top: -2px;
}
.dsb-card--dark {
    background: var(--dsb-navy-800, #0A2540);
    border-color: transparent;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.dsb-card--dark::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--dsb-orange-400, #F08A4A);
}
.dsb-card .dsb-card-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dsb-orange-500, #DA5612);
}
[data-theme="dark"] .dsb-card .dsb-card-eyebrow { color: var(--dsb-orange-400, #F08A4A); }
.dsb-card--dark .dsb-card-eyebrow { color: var(--dsb-orange-400, #F08A4A); }

.dsb-card .dsb-card-title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin: 0;
}
.dsb-card--dark .dsb-card-title { color: #fff; }

.dsb-card .dsb-card-body {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-muted);
    margin: 0;
}
.dsb-card--dark .dsb-card-body { color: rgba(255,255,255,0.72); }

.dsb-card .dsb-card-stat {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.dsb-card .dsb-card-meta {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/*  DSB featured/dark-sectie  */
.dsb-featured {
    background: var(--dsb-navy-900, #062A4A);
    color: #fff;
    padding: 3rem 2rem;
    border-radius: var(--radius-2xl, 24px);
    margin: 0.75rem 0;
    position: relative;
    overflow: hidden;
}
.dsb-featured::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(70% 50% at 80% 30%, rgba(218,86,18,0.12), transparent 60%);
    pointer-events: none;
}
.dsb-featured h2 { color: #fff; }
.dsb-featured p  { color: rgba(255,255,255,0.78); font-size: 1.0625rem; line-height: 1.7; }

/*  Buttons  DSB-conforme verfijning  */
/* btn-primary: navy achtergrond, focus-ring glow */
.btn-primary {
    background: var(--dsb-navy-900, #062A4A) !important;
    border-color: var(--dsb-navy-900, #062A4A) !important;
    color: #fff !important;
}
.btn-primary:hover:not(:disabled) {
    background: var(--dsb-navy-700, #143A5B) !important;
    border-color: var(--dsb-navy-700, #143A5B) !important;
}
.btn-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(218,86,18,0.40) !important;
    outline: none;
}

/* btn-accent: orange call-to-action */
.btn-accent,
.btn.btn-accent {
    background: var(--dsb-orange-500, #DA5612) !important;
    border-color: var(--dsb-orange-500, #DA5612) !important;
    color: #fff !important;
    font-weight: 500;
}
.btn-accent:hover:not(:disabled) {
    background: var(--dsb-orange-400, #F08A4A) !important;
    border-color: var(--dsb-orange-400, #F08A4A) !important;
}

/* Generieke focus-ring voor alle knoppen */
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(218,86,18,0.35) !important;
}

/* btn-outline-primary in DSB-stijl */
.btn-outline-primary {
    color: var(--dsb-navy-900, #062A4A) !important;
    border-color: var(--dsb-navy-900, #062A4A) !important;
    background: transparent !important;
}
.btn-outline-primary:hover:not(:disabled) {
    background: var(--dsb-navy-900, #062A4A) !important;
    color: #fff !important;
}
[data-theme="dark"] .btn-outline-primary {
    color: var(--dsb-orange-400, #F08A4A) !important;
    border-color: var(--dsb-orange-400, #F08A4A) !important;
}
[data-theme="dark"] .btn-outline-primary:hover:not(:disabled) {
    background: var(--dsb-orange-400, #F08A4A) !important;
    color: var(--dsb-navy-950, #00112C) !important;
}

/*  Tabel  DSB-stijl  */
.table {
    font-size: 0.84375rem;    /* 13.5px */
}
.table thead th {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    white-space: nowrap;
}

/*  Formuliervelden  DSB-stijl  */
.form-control,
.form-select {
    border-radius: var(--radius-md, 8px);
    border-color: var(--color-border);
    font-size: 0.875rem;
    line-height: 1.55;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--dsb-orange-500, #DA5612);
    box-shadow: 0 0 0 3px rgba(218,86,18,0.18);
    outline: none;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    border-color: var(--dsb-orange-400, #F08A4A) !important;
    box-shadow: 0 0 0 3px rgba(240,138,74,0.20) !important;
}
.form-control:disabled,
.form-select:disabled,
.form-check-input:disabled { cursor: not-allowed; opacity: 0.6; }

/*  Badges  DSB-stijl  */
/* dsb-badge: monospace, kleine capsule conform design system */
.dsb-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-pill, 999px);
    font-family: var(--font-mono);
    font-size: 0.65625rem;    /* 10.5px */
    letter-spacing: 0.04em;
    font-weight: 500;
    line-height: 1.3;
}
.dsb-badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dsb-badge--live {
    background: rgba(218,86,18,0.14);
    color: var(--dsb-orange-500, #DA5612);
}
[data-theme="dark"] .dsb-badge--live {
    background: rgba(240,138,74,0.18);
    color: var(--dsb-orange-400, #F08A4A);
}
.dsb-badge--live .dsb-badge-dot { background: var(--dsb-orange-500, #DA5612); }
[data-theme="dark"] .dsb-badge--live .dsb-badge-dot { background: var(--dsb-orange-400, #F08A4A); }

.dsb-badge--ok {
    background: rgba(22,163,74,0.12);
    color: var(--dsb-success-500, #16A34A);
}
[data-theme="dark"] .dsb-badge--ok {
    background: rgba(52,199,89,0.16);
    color: #34C759;
}
.dsb-badge--ok .dsb-badge-dot { background: currentColor; }

.dsb-badge--fault {
    background: rgba(220,38,38,0.12);
    color: var(--dsb-danger-500, #DC2626);
}
[data-theme="dark"] .dsb-badge--fault {
    background: rgba(255,84,71,0.16);
    color: #FF5447;
}

.dsb-badge--warn {
    background: rgba(217,119,6,0.12);
    color: var(--dsb-warning-500, #D97706);
}
[data-theme="dark"] .dsb-badge--warn {
    background: rgba(240,160,40,0.16);
    color: #F0A028;
}

/*  Stats / cijfers sectie  */
.dsb-stat-num {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.dsb-stat-num em {
    font-style: normal;
    color: var(--dsb-orange-500, #DA5612);
}
[data-theme="dark"] .dsb-stat-num em { color: var(--dsb-orange-400, #F08A4A); }

.dsb-stat-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-top: 0.625rem;
}

/*  Stap/how-it-works kaart  */
.dsb-step {
    padding: 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 12px);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: box-shadow 0.16s var(--ease-out);
}
.dsb-step:hover { box-shadow: var(--shadow-md); }
.dsb-step-num {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--dsb-orange-500, #DA5612);
    letter-spacing: 0.08em;
    font-weight: 500;
}
[data-theme="dark"] .dsb-step-num { color: var(--dsb-orange-400, #F08A4A); }
.dsb-step-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--color-text);
    margin: 0;
}
.dsb-step-desc {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
}

/*  Accentlijn / divider  */
.dsb-rule {
    width: 4rem;
    height: 2px;
    background: var(--dsb-orange-500, #DA5612);
    border-radius: var(--radius-pill, 999px);
    margin-bottom: 1.125rem;
}
[data-theme="dark"] .dsb-rule { background: var(--dsb-orange-400, #F08A4A); }

/*  Live-pulse dot  */
.dsb-pulse-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--dsb-orange-500, #DA5612);
    flex-shrink: 0;
    animation: dsb-pulse 1.8s ease-in-out infinite;
}
@keyframes dsb-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.82); }
}
[data-theme="dark"] .dsb-pulse-dot { background: var(--dsb-orange-400, #F08A4A); }

/*  Kaart / map chip  */
.dsb-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill, 999px);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    font-weight: 500;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.16s var(--ease-out);
    white-space: nowrap;
}
.dsb-chip:hover,
.dsb-chip.active {
    background: var(--dsb-orange-500, #DA5612);
    border-color: var(--dsb-orange-500, #DA5612);
    color: #fff;
}
[data-theme="dark"] .dsb-chip {
    background: rgba(249,245,241,0.06);
    border-color: rgba(249,245,241,0.16);
    color: rgba(249,245,241,0.72);
}
[data-theme="dark"] .dsb-chip:hover,
[data-theme="dark"] .dsb-chip.active {
    background: var(--dsb-orange-400, #F08A4A);
    border-color: var(--dsb-orange-400, #F08A4A);
    color: var(--dsb-navy-950, #00112C);
}

/*  Page-level live-indicator  */
.page-header-live {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-pill, 999px);
    background: rgba(218,86,18,0.14);
    color: var(--dsb-orange-500, #DA5612);
    border: 1px solid rgba(218,86,18,0.28);
}
.page-header-live::before {
    content: '';
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    animation: dsb-pulse 1.8s ease-in-out infinite;
}
[data-theme="dark"] .page-header-live {
    background: rgba(240,138,74,0.18);
    color: var(--dsb-orange-400, #F08A4A);
    border-color: rgba(240,138,74,0.32);
}

/*  Reconnect / error-staat  */
.dsb-offline-banner {
    background: var(--dsb-danger-500, #DC2626);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.375rem 1rem;
    text-align: center;
}

/*  Breadcrumb  */
.dsb-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    flex-wrap: wrap;
}
.dsb-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}
.dsb-breadcrumb a:hover { color: var(--dsb-orange-500, #DA5612); }
[data-theme="dark"] .dsb-breadcrumb a:hover { color: var(--dsb-orange-400, #F08A4A); }
.dsb-breadcrumb-sep { opacity: 0.4; }

/*  Responsive grid helpers (DSB-stijl)  */
.dsb-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.dsb-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (max-width: 900px) {
    .dsb-grid-3 { grid-template-columns: 1fr 1fr; }
    .dsb-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .dsb-grid-3,
    .dsb-grid-4 { grid-template-columns: 1fr; }
}

/* 
   DSB COMPONENT RESTYLE  fase 2
   Vervangt generieke Bootstrap-uitstraling door merk-conforme componenten.
   Alle klassen werken in light n dark thema.
    */

/*  Management sectie  rapportages / bestuurlijk dashboard  */
.management-section {
    margin-top: 2rem;
    padding: 0;
    background: transparent;
}
.management-section-title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--color-text);
    margin-bottom: 1.2rem;
    margin-top: 0;
    padding-top: 0.5rem;
    border-top: 2px solid var(--dsb-orange-500, #DA5612);
    padding-left: 0;
}
[data-theme="dark"] .management-section-title {
    border-top-color: var(--dsb-orange-400, #F08A4A);
}

/*  Status-badges  DSB monospace capsule  */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.2em 0.65em;
    border-radius: 4px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.4;
    border: 1px solid transparent;
    transition: opacity 0.15s ease;
    white-space: nowrap;
}
/* Dot accent voor elke status */
.status-badge::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.status-badge--with-icon::before {
    display: none;
}

.status-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.status-badge--with-icon .status-badge-icon {
    margin-right: 0.2rem;
    padding-right: 0.28rem;
    border-right: 1px solid color-mix(in srgb, currentColor 55%, transparent);
}

.status-badge-icon svg {
    display: block;
    width: 14px;
    height: 14px;
}
.status-closed {
    background: #166534;
    color: #FFFFFF;
    border-color: #14532D;
}
.status-open {
    background: color-mix(in srgb, var(--dsb-navy-600, #1A4E7A) 12%, transparent);
    color: var(--dsb-navy-600, #1A4E7A);
    border-color: color-mix(in srgb, var(--dsb-navy-600, #1A4E7A) 28%, transparent);
}
.status-fault {
    background: color-mix(in srgb, #DC2626 12%, transparent);
    color: #B91C1C;
    border-color: color-mix(in srgb, #DC2626 30%, transparent);
}
.status-warning {
    background: color-mix(in srgb, #D97706 12%, transparent);
    color: #B45309;
    border-color: color-mix(in srgb, #D97706 28%, transparent);
}
.status-unknown {
    background: color-mix(in srgb, var(--color-text-muted) 10%, transparent);
    color: var(--color-text-muted);
    border-color: color-mix(in srgb, var(--color-text-muted) 22%, transparent);
}
.status-maintenance {
    background: color-mix(in srgb, #DA5612 14%, transparent);
    color: #7c3009;  /* was #a8420e (4.1:1 fail op licht) — #7c3009 op tint-wit = 5.2:1 WCAG AA */
    border-color: color-mix(in srgb, #DA5612 30%, transparent);
}
/* Dark-mode overrides */
[data-theme="dark"] .status-closed {
    background: rgba(22,163,74,0.18);
    color: #4ADE80;
    border-color: rgba(22,163,74,0.35);
}
[data-theme="dark"] .status-open {
    background: rgba(59,130,246,0.16);
    color: #93C5FD;
    border-color: rgba(59,130,246,0.32);
}
[data-theme="dark"] .status-fault {
    background: rgba(220,38,38,0.18);
    color: #FCA5A5;
    border-color: rgba(220,38,38,0.38);
}
[data-theme="dark"] .status-warning {
    background: rgba(217,119,6,0.18);
    color: #FCD34D;
    border-color: rgba(217,119,6,0.35);
}
[data-theme="dark"] .status-unknown {
    background: rgba(148,163,184,0.12);
    color: #94A3B8;
    border-color: rgba(148,163,184,0.25);
}
[data-theme="dark"] .status-maintenance {
    background: rgba(218,86,18,0.22);
    color: #F5A87A;
    border-color: rgba(218,86,18,0.40);
}

/*  Prioriteit-badges  P1/P2/P3  */
.status-badge.status-fault   { /* P1  al gedekt door .status-fault */ }
.status-badge.status-warning { /* P2 */ }
.priority-p1 {
    background: color-mix(in srgb, #DC2626 12%, transparent);
    color: #B91C1C;
    border-color: color-mix(in srgb, #DC2626 30%, transparent);
}
.priority-p2 {
    background: color-mix(in srgb, #D97706 20%, transparent);
    color: #8A3F00;
    border-color: color-mix(in srgb, #D97706 42%, transparent);
}
.priority-p3 {
    background: color-mix(in srgb, var(--dsb-navy-500, #2E72A8) 12%, transparent);
    color: var(--dsb-navy-600, #1A4E7A);
    border-color: color-mix(in srgb, var(--dsb-navy-500, #2E72A8) 26%, transparent);
}
[data-theme="dark"] .priority-p1 { background: rgba(220,38,38,0.18); color: #FCA5A5; border-color: rgba(220,38,38,0.38); }
[data-theme="dark"] .priority-p2 { background: rgba(217,119,6,0.18);  color: #FCD34D; border-color: rgba(217,119,6,0.35); }
[data-theme="dark"] .priority-p3 { background: rgba(46,114,168,0.18); color: #93C5FD; border-color: rgba(46,114,168,0.32); }

/*  Tegels (Tegels.razor, statustegels)  DSB restyle  */
.tile {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg, 10px);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 110px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.14s ease;
}
.tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: var(--radius-lg, 10px) var(--radius-lg, 10px) 0 0;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.tile:hover {
    box-shadow: var(--shadow-md);
    top: -1px;
}
.tile:hover::before { opacity: 1; }
.tile.tile-fault   { border-color: color-mix(in srgb, var(--status-fault) 35%, var(--color-border)); }
.tile.tile-fault::before   { background: var(--status-fault); opacity: 1; }
.tile.tile-open    { border-color: color-mix(in srgb, var(--status-open) 30%, var(--color-border)); }
.tile.tile-open::before    { background: var(--status-open); opacity: 1; }
.tile.tile-closed  { border-color: color-mix(in srgb, var(--status-closed) 30%, var(--color-border)); }
.tile.tile-closed::before  { background: var(--status-closed); opacity: 1; }
.tile.tile-unknown { border-color: var(--color-border); }
.tile.tile-unknown::before { background: var(--color-border); opacity: 0.5; }
.tile-name {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: -0.01em;
    color: var(--color-text);
    line-height: 1.25;
}
.tile-code {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.675rem;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/*  KpiTile (Benchmark / kleine tegels)  DSB restyle  */
.kpi-tile {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    transition: box-shadow 0.15s ease;
}
.kpi-tile:hover { box-shadow: var(--shadow-sm); }
.kpi-tile-label {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dsb-orange-500, #DA5612);
    line-height: 1.3;
}
[data-theme="dark"] .kpi-tile-label { color: var(--dsb-orange-400, #F08A4A); }
.kpi-tile-value {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

/*  Modal / dialoog  DSB restyle  */
.modal-content {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 10px);
    color: var(--color-text);
    box-shadow: var(--shadow-xl, 0 20px 48px rgba(0,0,0,0.32));
}
.modal-header {
    background: color-mix(in srgb, var(--color-surface) 95%, var(--dsb-navy-900, #06192C));
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 10px) var(--radius-lg, 10px) 0 0;
    padding: 0.9rem 1.25rem;
}
.modal-title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.modal-body {
    padding: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.65;
}
.modal-footer {
    background: color-mix(in srgb, var(--color-surface) 95%, var(--dsb-navy-900, #06192C));
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-lg, 10px) var(--radius-lg, 10px);
    padding: 0.8rem 1.25rem;
    gap: 0.5rem;
}
[data-theme="dark"] .modal-content {
    background: var(--color-surface);
    border-color: color-mix(in srgb, var(--color-border) 80%, transparent);
    box-shadow: 0 24px 64px rgba(0,0,0,0.55);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    background: color-mix(in srgb, var(--dsb-navy-900, #06192C) 70%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-border) 75%, transparent);
}

/*  ConfirmDelete dialoog  DSB restyle  */
.confirm-delete-dialog {
    background: var(--color-surface);
    border: 1px solid color-mix(in srgb, var(--dsb-danger-500, #DC2626) 28%, var(--color-border));
    border-radius: var(--radius-lg, 10px);
    box-shadow: 0 20px 48px rgba(0,0,0,0.28);
    max-width: 420px;
    width: calc(100% - 2rem);
}
.confirm-delete-header {
    background: color-mix(in srgb, #DC2626 8%, var(--color-surface));
    border-bottom: 1px solid color-mix(in srgb, #DC2626 20%, var(--color-border));
    border-radius: var(--radius-lg, 10px) var(--radius-lg, 10px) 0 0;
    padding: 0.9rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.confirm-delete-title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
    margin: 0;
}
.confirm-delete-icon {
    color: #DC2626;
    font-size: 1.1rem;
    flex-shrink: 0;
}
[data-theme="dark"] .confirm-delete-dialog {
    border-color: color-mix(in srgb, #DC2626 30%, var(--color-border));
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
[data-theme="dark"] .confirm-delete-header {
    background: rgba(220,38,38,0.12);
    border-color: rgba(220,38,38,0.28);
}

/*  Alert / meldingsbanner  DSB restyle  */
.alert {
    border-radius: var(--radius-md, 8px);
    border-width: 1px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    line-height: 1.55;
    animation: ams-alert-in 0.2s ease-out backwards;
}
.alert-danger {
    background: color-mix(in srgb, #DC2626 10%, var(--color-surface));
    border-color: color-mix(in srgb, #DC2626 28%, transparent);
    color: #991B1B;
}
.alert-warning {
    background: color-mix(in srgb, #D97706 10%, var(--color-surface));
    border-color: color-mix(in srgb, #D97706 26%, transparent);
    color: #92400E;
}
.alert-success {
    background: color-mix(in srgb, #16A34A 10%, var(--color-surface));
    border-color: color-mix(in srgb, #16A34A 26%, transparent);
    color: #14532D;
}
.alert-info {
    background: color-mix(in srgb, var(--dsb-navy-500, #2E72A8) 10%, var(--color-surface));
    border-color: color-mix(in srgb, var(--dsb-navy-500, #2E72A8) 24%, transparent);
    color: var(--dsb-navy-700, #0D3558);
}
[data-theme="dark"] .alert-danger  { background: rgba(220,38,38,0.14);  border-color: rgba(220,38,38,0.32);  color: #FCA5A5; }
[data-theme="dark"] .alert-warning { background: rgba(217,119,6,0.14);  border-color: rgba(217,119,6,0.30);  color: #FDE68A; }
[data-theme="dark"] .alert-success { background: rgba(22,163,74,0.14);  border-color: rgba(22,163,74,0.30);  color: #86EFAC; }
[data-theme="dark"] .alert-info    { background: rgba(46,114,168,0.14); border-color: rgba(46,114,168,0.28); color: #93C5FD; }

/*  Spinner  DSB oranje accent  */
.spinner-border.text-danger,
.spinner-border.text-primary {
    color: var(--dsb-orange-500, #DA5612) !important;
}
[data-theme="dark"] .spinner-border.text-danger,
[data-theme="dark"] .spinner-border.text-primary {
    color: var(--dsb-orange-400, #F08A4A) !important;
}

/* -- Pagina-laadindicator (LoadingSpinner.razor) -- */
.dsb-page-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 5rem 2rem;
    min-height: 280px;
}
.dsb-page-loading__ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--dsb-orange-500, #DA5612) 8%, transparent);
    position: relative;
}
.dsb-page-loading__ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--dsb-orange-500, #DA5612) 18%, transparent);
}
.dsb-page-loading__arc {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--dsb-orange-500, #DA5612) 22%, transparent);
    border-top-color: var(--dsb-orange-500, #DA5612);
    animation: dsb-spin 0.7s linear infinite;
}
.dsb-page-loading__label {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
[data-theme="dark"] .dsb-page-loading__ring {
    background: color-mix(in srgb, var(--dsb-orange-400, #F08A4A) 10%, transparent);
}
[data-theme="dark"] .dsb-page-loading__ring::before {
    border-color: color-mix(in srgb, var(--dsb-orange-400, #F08A4A) 20%, transparent);
}
[data-theme="dark"] .dsb-page-loading__arc {
    border-color: color-mix(in srgb, var(--dsb-orange-400, #F08A4A) 22%, transparent);
    border-top-color: var(--dsb-orange-400, #F08A4A);
}

/* Laadscherm center (legacy .dsb-loading) */
.dsb-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.75rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.dsb-loading .spinner-border {
    width: 2rem; height: 2rem;
    border-width: 2px;
    color: var(--dsb-orange-500, #DA5612);
}
[data-theme="dark"] .dsb-loading .spinner-border { color: var(--dsb-orange-400, #F08A4A); }

/*  Offcanvas / slide-in panelen  DSB restyle  */
.offcanvas {
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    color: var(--color-text);
}
.offcanvas-header {
    background: color-mix(in srgb, var(--color-surface) 94%, var(--dsb-navy-900, #06192C));
    border-bottom: 1px solid var(--color-border);
    padding: 0.9rem 1.25rem;
}
.offcanvas-title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}
.offcanvas-body { padding: 1.25rem; }

/* Mobiel: zijpanelen (offcanvas) full-width zodat ze niet buiten beeld lopen.
   Diverse panelen zetten een vaste pixelbreedte (inline style of via class, bv.
   Devices 420px, Gebruikers 400px, FaultReportCategorieen 380px); de !important
   wint daarvan op smalle telefoons. Boven deze grens houden ze hun eigen breedte.
   Alleen breedte -> werkt in beide thema's. */
@media (max-width: 575.98px) {
    .offcanvas-start,
    .offcanvas-end {
        width: 100% !important;
        max-width: 100%;
    }
}

/* Mobiel: detail-/formuliertabellen met een vaste pixel-kolombreedte (zetten die
   inline) mogen op smalle telefoons krimpen i.p.v. de tabel horizontaal te laten
   scrollen. Dit zijn data-no-std-table-tabellen die geen kaart-omzetting krijgen:
   - SLA-instellingenformulier (twee 180px-invoervelden naast de prioriteit);
   - foutlog-viewer (Tijdstip/Niveau/Bron met vaste breedtes). */
@media (max-width: 575.98px) {
    table[data-table-key="instellingen-sla"] td,
    .lv-log-table th,
    .lv-log-table td {
        width: auto !important;
    }
}

[data-theme="dark"] .offcanvas {
    background: var(--color-surface);
    border-left-color: var(--color-border);
}
[data-theme="dark"] .offcanvas-header {
    background: color-mix(in srgb, var(--dsb-navy-900, #06192C) 65%, var(--color-surface));
    border-color: var(--color-border);
}

/*  Bootstrap .card  DSB restyle  */
.card {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg, 10px) !important;
    color: var(--color-text);
    transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.18s ease;
}
/* Geen transform hier (bewust): elke transform  ook een kleine hover-lift  geeft de kaart een
   eigen stacking context zodra de muis erover hangt, waardoor een z-index:1000 dropdown-menu erin
   (bv. ObjectFilterPicker) nooit meer boven een latere sibling-.card kan uitkomen. Zie ook de
   toelichting bij de .card entrance-animatie hierboven  zelfde bugklasse. */
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.card-header {
    background: color-mix(in srgb, var(--color-surface) 94%, var(--dsb-navy-900, #06192C)) !important;
    border-bottom: 1px solid var(--color-border) !important;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: -0.01em;
    padding: 0.75rem 1.125rem !important;
    border-radius: var(--radius-lg, 10px) var(--radius-lg, 10px) 0 0 !important;
}
.card-footer {
    background: color-mix(in srgb, var(--color-surface) 94%, var(--dsb-navy-900, #06192C)) !important;
    border-top: 1px solid var(--color-border) !important;
    padding: 0.75rem 1.125rem !important;
    border-radius: 0 0 var(--radius-lg, 10px) var(--radius-lg, 10px) !important;
}
[data-theme="dark"] .card { box-shadow: none; }
[data-theme="dark"] .card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
    background: color-mix(in srgb, var(--dsb-navy-900, #06192C) 50%, var(--color-surface)) !important;
    border-color: var(--color-border) !important;
}

/*  Tabel  uitgebreid dark/light  */
.table {
    color: var(--color-text);
    border-color: var(--color-border);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--color-border);
}
.table tbody td {
    border-color: var(--color-border);
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
    color: var(--color-text);
}
.table tbody tr:hover td {
    background: color-mix(in srgb, var(--dsb-orange-500, #DA5612) 4%, var(--color-surface));
}
[data-theme="dark"] .table tbody tr:hover td {
    background: rgba(240,138,74,0.07);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: color-mix(in srgb, var(--color-surface-hover, rgba(0,0,0,0.03)) 60%, transparent);
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background: rgba(255,255,255,0.03);
}

/* DSB thead: consistent in light en dark */
.dsb-thead th {
    background: color-mix(in srgb, var(--color-surface) 92%, var(--dsb-navy-900, #06192C));
    color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-border);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.55rem 0.75rem;
    white-space: nowrap;
}
[data-theme="dark"] .dsb-thead th {
    background: color-mix(in srgb, var(--dsb-navy-900, #06192C) 55%, var(--color-surface));
    color: rgba(249,245,241,0.55);
    border-bottom-color: var(--color-border);
}

/* DSB feature-rij (ingesprongen rij onder module) */
.dsb-feature-row td {
    background: color-mix(in srgb, var(--color-surface) 94%, var(--dsb-navy-900, #06192C)) !important;
    border-top: 1px solid var(--color-border) !important;
}
[data-theme="dark"] .dsb-feature-row td {
    background: color-mix(in srgb, var(--dsb-navy-900, #06192C) 40%, var(--color-surface)) !important;
}

/* DSB feature-card (individuele feature-blokken) */
.dsb-feature-card {
    background: var(--color-surface);
    border-color: var(--color-border) !important;
    color: var(--color-text);
}
[data-theme="dark"] .dsb-feature-card {
    background: color-mix(in srgb, var(--color-surface) 80%, var(--dsb-navy-900, #06192C));
    border-color: rgba(249,245,241,0.1) !important;
}

/* DSB rol-badge (HoofdAdmin / OrganisatieAdmin labels) */
.dsb-badge-role {
    background: color-mix(in srgb, var(--color-surface) 75%, var(--color-border));
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
[data-theme="dark"] .dsb-badge-role {
    background: rgba(249,245,241,0.08);
    color: rgba(249,245,241,0.55);
    border-color: rgba(249,245,241,0.15);
}

/*  Dropdown  DSB restyle  */
.dropdown-menu {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-md);
    padding: 0.35rem;
}
.dropdown-item {
    border-radius: 5px;
    font-size: 0.875rem;
    color: var(--color-text);
    padding: 0.45rem 0.75rem;
    transition: background 0.12s ease, color 0.12s ease;
}
.dropdown-item:hover, .dropdown-item:focus {
    background: color-mix(in srgb, var(--dsb-orange-500, #DA5612) 8%, var(--color-surface));
    color: var(--dsb-orange-600, #B54010);
}
[data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus {
    background: rgba(240,138,74,0.1);
    color: var(--dsb-orange-400, #F08A4A);
}
.dropdown-divider { border-color: var(--color-border); }

/*  Buttons  secondaire / outline aanvulling  */
.btn-secondary {
    background: #475765 !important;
    border-color: #475765 !important;
    color: #ffffff !important;
}
.btn-secondary:hover:not(:disabled),
.btn-secondary:active:not(:disabled) {
    background: #3f4e5b !important;
    border-color: #3f4e5b !important;
    color: #ffffff !important;
}

.btn-success {
    background: #166534 !important;
    border-color: #166534 !important;
    color: #ffffff !important;
}
.btn-success:hover:not(:disabled),
.btn-success:active:not(:disabled) {
    background: #14532d !important;
    border-color: #14532d !important;
    color: #ffffff !important;
}

.btn-warning {
    background: #a16207 !important;
    border-color: #a16207 !important;
    color: #ffffff !important;
}
.btn-warning:hover:not(:disabled),
.btn-warning:active:not(:disabled) {
    background: #854d0e !important;
    border-color: #854d0e !important;
    color: #ffffff !important;
}

.btn-info {
    background: #0c4a6e !important;
    border-color: #0c4a6e !important;
    color: #ffffff !important;
}
.btn-info:hover:not(:disabled),
.btn-info:active:not(:disabled) {
    background: #075985 !important;
    border-color: #075985 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-secondary {
    background: #5c7080 !important;
    border-color: #5c7080 !important;
    color: #ffffff !important;
}
[data-theme="dark"] .btn-secondary:hover:not(:disabled),
[data-theme="dark"] .btn-secondary:active:not(:disabled) {
    background: #6b8091 !important;
    border-color: #6b8091 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-success {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #052e16 !important;
}
[data-theme="dark"] .btn-success:hover:not(:disabled),
[data-theme="dark"] .btn-success:active:not(:disabled) {
    background: #4ade80 !important;
    border-color: #4ade80 !important;
    color: #052e16 !important;
}

[data-theme="dark"] .btn-warning {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #1f1300 !important;
}
[data-theme="dark"] .btn-warning:hover:not(:disabled),
[data-theme="dark"] .btn-warning:active:not(:disabled) {
    background: #fbbf24 !important;
    border-color: #fbbf24 !important;
    color: #1f1300 !important;
}

[data-theme="dark"] .btn-info {
    background: #38bdf8 !important;
    border-color: #38bdf8 !important;
    color: #082f49 !important;
}
[data-theme="dark"] .btn-info:hover:not(:disabled),
[data-theme="dark"] .btn-info:active:not(:disabled) {
    background: #7dd3fc !important;
    border-color: #7dd3fc !important;
    color: #082f49 !important;
}

.btn-outline-secondary {
    color: var(--color-text-muted);
    border-color: var(--color-border);
    background: transparent;
    font-weight: 500;
}
.btn-outline-secondary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-border) 60%, transparent);
    color: var(--color-text);
    border-color: var(--color-text-muted);
}
.btn-outline-secondary:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dsb-orange-500, #DA5612) 30%, transparent);
    outline: none;
}
.btn-danger {
    background: #DC2626;
    border-color: #DC2626;
    color: #fff;
    font-weight: 600;
}
.btn-danger:hover:not(:disabled) { background: #B91C1C; border-color: #B91C1C; }
.btn-danger:focus-visible {
    box-shadow: 0 0 0 3px rgba(220,38,38,0.35);
    outline: none;
}
/* Link-stijl knop */
.btn-link {
    color: var(--dsb-orange-500, #DA5612);
    text-decoration: none;
    font-weight: 500;
}
.btn-link:hover { color: var(--dsb-orange-600, #B54010); text-decoration: underline; }
[data-theme="dark"] .btn-link { color: var(--dsb-orange-400, #F08A4A); }
[data-theme="dark"] .btn-link:hover { color: var(--dsb-orange-300, #F5A87A); }

/*  Badge-aantal (Bootstrap .badge)  DSB restyle  */
.badge {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.2em 0.55em;
    border-radius: 4px;
    line-height: 1.4;
}
.badge.bg-danger  { background: #DC2626 !important; }
.badge.bg-warning { background: #D97706 !important; color: #111827 !important; } /* was #fff (3.0:1 fail op amber) — #111827 = 7.7:1 WCAG AA */
.badge.bg-warning.text-dark { color: #111827 !important; }
.badge.bg-success { background: #15803D !important; color: #fff !important; } /* was #16A34A (wit = 3.3:1, fail) — #15803D = 5.0:1 WCAG AA, crispere groen */
.badge.bg-primary { background: var(--dsb-navy-600, #1A4E7A) !important; }
.badge.bg-secondary { background: var(--color-text-muted) !important; }

/* Legacy alias, niet meer in gebruik */
.module-default-badge {
    background: color-mix(in srgb, var(--color-surface, #fff) 75%, var(--color-border, #d0d0d0));
    color: var(--color-text, #111) !important;
    border: 1px solid var(--color-border, #d0d0d0);
}

/* Badge: feature is standaard ingeschakeld bij module-activatie */
.dsb-badge-default {
    background: color-mix(in srgb, #16A34A 12%, var(--color-surface));
    color: #16A34A;
    border: 1px solid color-mix(in srgb, #16A34A 35%, transparent);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: help;
}
[data-theme="dark"] .dsb-badge-default {
    background: color-mix(in srgb, #4ade80 10%, var(--color-surface));
    color: #4ade80;
    border-color: color-mix(in srgb, #4ade80 28%, transparent);
}

.report-compact-label {
    font-size: .82rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-compact-value {
    font-size: .82rem;
}

.report-availability-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.report-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    border-radius: 999px;
}

.report-legend-dot--good { background: var(--status-closed, #27a353); }
.report-legend-dot--mid  { background: var(--status-warning, #f59300); margin-left: .4rem; }
.report-legend-dot--bad  { background: var(--status-fault, #b00020); margin-left: .4rem; }

.report-table-head {
    background: transparent !important;
    text-transform: none;
    font-weight: 700;
}

.report-nowrap {
    white-space: nowrap;
}

.report-sla-line {
    font-size: .85rem;
}

.report-sla-empty {
    font-size: .8rem;
}

.report-sla-value {
    font-size: .85rem;
}

.report-sla-good { color: var(--status-closed, #27a353); }
.report-sla-mid  { color: var(--status-warning-text); }
.report-sla-bad  { color: var(--status-fault, #b00020); }

.report-list-item {
    font-size: .9rem;
}

.report-mini-bar-bg {
    width: 80px;
    height: 20px;
    background: color-mix(in srgb, var(--color-surface, #fff) 75%, var(--color-border, #d0d0d0));
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.report-mini-bar-fill {
    height: 100%;
    background: var(--status-warning, #f59300);
}

.report-mini-bar-value {
    font-weight: 700;
    min-width: 40px;
    text-align: right;
}

.dsb-modal-backdrop {
    background: rgba(0,0,0,.5);
}

.surface-inset-panel {
    background: var(--bg-surface-inset, var(--color-surface-alt, #1a1a1a));
    border-radius: 4px;
}

.mock-log-body {
    font-size: .72rem;
    color: var(--color-text-muted);
    white-space: pre-wrap;
    margin-top: 2px;
}

.event-detail-row {
    background: var(--bs-tertiary-bg, var(--bs-body-bg));
    color: var(--bs-body-color);
}

.event-row-threshold > * {
    background-color: rgba(245, 158, 11, 0.14) !important;
}

[data-theme="dark"] .event-row-threshold > * {
    background-color: rgba(245, 158, 11, 0.22) !important;
}

.table-hover > tbody > tr.event-row-threshold:hover > * {
    background-color: rgba(245, 158, 11, 0.28) !important;
}

[data-theme="dark"] .table-hover > tbody > tr.event-row-threshold:hover > * {
    background-color: rgba(245, 158, 11, 0.34) !important;
}

.branding-color-chip {
    width: 18px;
    height: 18px;
    background: var(--branding-chip-color, transparent);
    border: 1px solid var(--color-border, #ccc);
    display: inline-block;
}

.branding-logo-preview {
    background: var(--color-topbar-bg, #061829);
    min-width: 80px;
    min-height: 60px;
}

.branding-appname-preview {
    background: var(--branding-preview-bg, #061829);
    color: var(--branding-preview-text, #e2e8f0);
    font-family: var(--branding-preview-font, var(--font-display, inherit));
    font-size: 1.1rem;
    font-weight: 600;
}

/* ── Branding-discovery (website overnemen) ─────────────────────────── */
.branding-discover-input { max-width: 640px; }

/* Logo-preview met dubbele achtergrond (helft licht / helft donker) zodat
   zowel donkere als witte logo's zichtbaar zijn, ongeacht het actieve thema. */
.branding-discover-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border, #ccc);
    background: linear-gradient(90deg, #ffffff 0 50%, #00112C 50% 100%);
}
.branding-discover-logo svg,
.branding-discover-logo img { height: 40px; width: auto; max-width: 220px; }

.branding-discover-thumb { line-height: 0; }
.branding-discover-thumb img {
    height: 34px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
}

/* Tweeregelige afkapping (tagline-voorbeeld). */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kiosk-state-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #121212;
}

.kiosk-state-screen--error {
    flex-direction: column;
    color: #fff;
    gap: 1rem;
}

.kiosk-state-spinner {
    width: 3rem;
    height: 3rem;
}

.kiosk-state-message {
    font-size: 1.25rem;
}

/*  Nav-tabs (beheer-pagina's)  DSB restyle  */
.nav-tabs {
    border-bottom: 2px solid var(--color-border);
    gap: 0.1rem;
}
.nav-tabs .nav-link {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.55rem 0.9rem;
    margin-bottom: -2px;
    transition: color 0.15s ease, border-color 0.15s ease;
    background: transparent !important;
}
.nav-tabs .nav-link:hover { color: var(--color-text); border-bottom-color: var(--color-border); }
.nav-tabs .nav-link.active {
    color: var(--dsb-orange-500, #DA5612) !important;
    border-bottom-color: var(--dsb-orange-500, #DA5612);
    background: transparent !important;
}
[data-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--dsb-orange-400, #F08A4A) !important;
    border-bottom-color: var(--dsb-orange-400, #F08A4A);
}

/*  Pagination  DSB restyle  */
.pagination .page-link {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.75rem;
    transition: background 0.12s ease, color 0.12s ease;
}
.pagination .page-link:hover { background: var(--color-surface-hover); color: var(--color-text); }
.pagination .page-item.active .page-link {
    background: var(--dsb-navy-700, #0D3558);
    border-color: var(--dsb-navy-700, #0D3558);
    color: #fff;
}
[data-theme="dark"] .pagination .page-item.active .page-link {
    background: var(--dsb-orange-500, #DA5612);
    border-color: var(--dsb-orange-500, #DA5612);
}
.pagination .page-item.disabled .page-link { opacity: 0.4; }

/*  Focus-ring universeel DSB-oranje  */
[data-theme="dark"] ::selection { background: rgba(240,138,74,0.75); color: #fff; }
:focus-visible {
    outline: 2px solid var(--dsb-orange-500, #DA5612);
    outline-offset: 2px;
}
[data-theme="dark"] :focus-visible {
    outline-color: var(--dsb-orange-400, #F08A4A);
}

/*  Scrollbar  subtiel DSB  */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-border) 90%, transparent);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--dsb-orange-500, #DA5612) 40%, var(--color-border));
}
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(240,138,74,0.38); }
/* Firefox scrollbar — dark theme */
[data-theme="dark"] {
    scrollbar-color: var(--dsb-navy-600, #1A4E7A) var(--dsb-site-bg, #00081B);
    scrollbar-width: thin;
}

/*  Laadindicator (p-5 spinner blok)  DSB restyle  */
.text-center.p-5 > .spinner-border {
    color: var(--dsb-orange-500, #DA5612) !important;
    width: 2.25rem; height: 2.25rem;
    border-width: 2.5px;
}
[data-theme="dark"] .text-center.p-5 > .spinner-border {
    color: var(--dsb-orange-400, #F08A4A) !important;
}
/* Fallback: losse spinner-border zonder klasse krijgt ook DSB-oranje */
.spinner-border:not([class*="text-"]):not(.spinner-border-sm) {
    color: var(--dsb-orange-500, #DA5612);
}
[data-theme="dark"] .spinner-border:not([class*="text-"]):not(.spinner-border-sm) {
    color: var(--dsb-orange-400, #F08A4A);
}

/*  Bootstrap btn-outline-warning/-info contrast fix (WCAG AA)  */
/* Bootstrap standaard gele/blauwe kleuren halen op witte achtergrond WCAG niet.  */
/* CSS-variabelen worden overschreven door Bootstrap-directe selectors; gebruik !important. */
.btn-outline-warning {
    --bs-btn-color: #92600a;
    --bs-btn-border-color: #92600a;
    color: #92600a !important;
    border-color: #92600a !important;
}
.btn-outline-warning:hover,
.btn-outline-warning:active,
.btn-outline-warning.active {
    color: #ffffff !important;
    background-color: #92600a !important;
    border-color: #92600a !important;
}
[data-theme="dark"] .btn-outline-warning {
    --bs-btn-color: #fcd34d;
    --bs-btn-border-color: #fcd34d;
    color: #fcd34d !important;
    border-color: #fcd34d !important;
}
[data-theme="dark"] .btn-outline-warning:hover,
[data-theme="dark"] .btn-outline-warning:active {
    color: #1c1a00 !important;
    background-color: #fcd34d !important;
    border-color: #fcd34d !important;
}

/* btn-outline-success contrast fix (WCAG AA) */
.btn-outline-success {
    --bs-btn-color: #166534;
    --bs-btn-border-color: #166534;
    color: #166534 !important;
    border-color: #166534 !important;
}
.btn-outline-success:hover,
.btn-outline-success:active,
.btn-outline-success.active {
    color: #ffffff !important;
    background-color: #166534 !important;
    border-color: #166534 !important;
}
[data-theme="dark"] .btn-outline-success {
    --bs-btn-color: #ffffff;
    --bs-btn-border-color: #22c55e;
    color: #ffffff !important;
    border-color: #22c55e !important;
    background-color: #166534 !important;
}
[data-theme="dark"] .btn-outline-success:hover,
[data-theme="dark"] .btn-outline-success:active {
    color: #ffffff !important;
    background-color: #15803d !important;
    border-color: #4ade80 !important;
}

/* btn-outline-info: Bootstrap #0dcaf0 op wit = 1.8:1   donkerblauw */
.btn-outline-info {
    --bs-btn-color: #0c4a6e;
    --bs-btn-border-color: #0c4a6e;
    color: #0c4a6e !important;
    border-color: #0c4a6e !important;
}
.btn-outline-info:hover,
.btn-outline-info:active,
.btn-outline-info.active {
    color: #ffffff !important;
    background-color: #0c4a6e !important;
    border-color: #0c4a6e !important;
}
[data-theme="dark"] .btn-outline-info {
    --bs-btn-color: #7dd3fc;
    --bs-btn-border-color: #7dd3fc;
    color: #7dd3fc !important;
    border-color: #7dd3fc !important;
}
[data-theme="dark"] .btn-outline-info:hover,
[data-theme="dark"] .btn-outline-info:active {
    color: #0c0c0c !important;
    background-color: #7dd3fc !important;
    border-color: #7dd3fc !important;
}

/* ============================================================
   Shared FilterBar component
   ============================================================ */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 1rem;
    background: color-mix(in srgb, var(--color-surface, #fff) 82%, var(--subtle, #f4f1ec));
    border: 1px solid color-mix(in srgb, var(--line, #e2dcd3) 90%, transparent);
    border-radius: 10px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 10px rgba(6,42,74,0.05);
}
[data-theme="dark"] .filter-bar {
    background: color-mix(in srgb, var(--color-surface, #062A4A) 86%, rgba(255,255,255,.04));
    border-color: rgba(255,255,255,.12);
}
.filter-bar__toggle,
.filter-collapse-toggle,
.dashboard-filter-toggle,
#app-shell .page-header-filterbar .filter-collapse-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    padding: 0 1.15rem;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 999px !important;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--color-border, #E2DCD3) 88%, transparent) !important;
    background: color-mix(in srgb, var(--color-surface, #fff) 92%, var(--color-bg, #F9F5F1)) !important;
    color: var(--color-text, #0E1620) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    letter-spacing: 0.01em;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease;
}

[data-theme="dark"] .filter-bar__toggle,
[data-theme="dark"] .filter-collapse-toggle,
[data-theme="dark"] .dashboard-filter-toggle,
[data-theme="dark"] #app-shell .page-header-filterbar .filter-collapse-toggle {
    border-color: rgba(249,245,241,0.24) !important;
    background: color-mix(in srgb, var(--color-surface, #062A4A) 88%, var(--color-bg, #00112C)) !important;
    color: rgba(249,245,241,0.94) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
}

.filter-bar__toggle:hover,
.filter-collapse-toggle:hover,
.dashboard-filter-toggle:hover,
#app-shell .page-header-filterbar .filter-collapse-toggle:hover {
    border-color: color-mix(in srgb, var(--dsb-orange-500, #DA5612) 52%, var(--color-border, #E2DCD3)) !important;
    background: color-mix(in srgb, var(--color-surface, #fff) 96%, var(--color-bg, #F9F5F1)) !important;
    color: var(--color-text, #0E1620) !important;
    transform: translateY(-1px);
}

[data-theme="dark"] .filter-bar__toggle:hover,
[data-theme="dark"] .filter-collapse-toggle:hover,
[data-theme="dark"] .dashboard-filter-toggle:hover,
[data-theme="dark"] #app-shell .page-header-filterbar .filter-collapse-toggle:hover {
    background: color-mix(in srgb, var(--color-surface, #062A4A) 96%, var(--color-bg, #00112C)) !important;
    color: #ffffff !important;
}

.filter-bar__fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    flex: 1;
}
.filter-bar--collapsed .filter-bar__fields { display: none; }

.filter-bar__field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    min-width: 180px;
    flex: 1 1 180px;
    font-size: .8125rem;
}
.filter-bar__field span {
    color: var(--ink-2, #475765);
    white-space: nowrap;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
[data-theme="dark"] .filter-bar__field span { color: rgba(255,255,255,.62); }

.filter-bar__field .form-select,
.filter-bar__field .form-control {
    width: 100%;
    min-height: 42px;
    border-radius: 8px;
}

.filter-bar__reset {
    margin-left: auto;
    min-height: 42px;
    padding-inline: .9rem;
    border-radius: 8px;
    align-self: flex-end;
}

@media (max-width: 640px) {
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }
    .filter-bar__fields {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }
    .filter-bar__field {
        min-width: 0;
        width: 100%;
    }
    .filter-bar__reset {
        margin-left: 0;
        align-self: stretch;
        width: 100%;
    }
}

/* Detail tabs (ObjectDetail.razor) */
.detail-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .42rem;
    margin-bottom: 1rem;
    padding: .35rem;
    border: 1px solid color-mix(in srgb, var(--color-border, #E2DCD3) 80%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-surface, #ffffff) 94%, transparent);
}

.detail-tab {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid color-mix(in srgb, var(--color-border, #E2DCD3) 82%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-surface, #ffffff) 98%, transparent) !important;
    color: var(--color-text-muted, #475765);
    padding: .46rem .86rem;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.detail-tab:hover {
    color: var(--color-text, #1c2a36);
    border-color: color-mix(in srgb, var(--accent, #2b7de9) 30%, var(--color-border, #E2DCD3));
    background: color-mix(in srgb, var(--accent, #2b7de9) 8%, var(--color-surface, #ffffff)) !important;
}

.detail-tab--active {
    color: #fff !important;
    border-color: var(--dsb-orange-500, #DA5612) !important;
    background: linear-gradient(180deg, var(--dsb-orange-500, #DA5612), var(--dsb-orange-600, #C74A0A)) !important;
    box-shadow: 0 3px 10px rgba(199,74,10,0.28);
    font-weight: 700;
}

[data-theme="dark"] .detail-tabs {
    border-color: color-mix(in srgb, var(--color-border, rgba(255,255,255,0.2)) 78%, transparent);
    background: rgba(8, 31, 56, 0.54);
}

[data-theme="dark"] .detail-tab {
    color: rgba(255,255,255,.86);
    border-color: rgba(255,255,255,.2);
    background: rgba(255,255,255,.04) !important;
}

[data-theme="dark"] .detail-tab:hover {
    color: #fff;
    border-color: rgba(240,138,74,.65);
    background: rgba(240,138,74,.12) !important;
}

[data-theme="dark"] .detail-tab--active {
    color: #fff !important;
    border-color: var(--dsb-orange-400, #F08A4A) !important;
    background: linear-gradient(180deg, rgba(240,138,74,.94), rgba(218,86,18,.9)) !important;
    box-shadow: 0 4px 12px rgba(218,86,18,.3);
}

.detail-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.22rem;
    height: 1.22rem;
    padding: 0 .32rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--color-text-muted, #475765) 16%, transparent);
    color: inherit;
}

.detail-tab-count--alert {
    background: #fde7ea;
    color: #b00020;
}

[data-theme="dark"] .detail-tab-count {
    background: rgba(255,255,255,.16);
    color: rgba(255,255,255,.88);
}

[data-theme="dark"] .detail-tab-count--alert {
    background: rgba(176,0,32,.28);
    color: #ffb5bf;
}

/* ============================================================================
   Intensieve UI-consistentie: outline-buttons, tabs/pills/chips en page-header acties
   ============================================================================ */

/* 1) Alle btn-outline-* varianten: basisgedrag uniform in light + dark */
.btn[class*="btn-outline-"] {
    appearance: none;
    -webkit-appearance: none;
    background-image: none !important;
    border-width: 1px;
    border-style: solid;
    font-weight: 600;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.btn[class*="btn-outline-"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(218,86,18,0.30) !important;
}

[data-theme="dark"] .btn[class*="btn-outline-"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(240,138,74,0.34) !important;
}

.btn-outline-danger {
    --bs-btn-color: #b00020;
    --bs-btn-border-color: #b00020;
    color: #b00020 !important;
    border-color: #b00020 !important;
    background: transparent !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:active,
.btn-outline-danger.active {
    color: #ffffff !important;
    background-color: #b00020 !important;
    border-color: #b00020 !important;
}

[data-theme="dark"] .btn-outline-danger {
    --bs-btn-color: #ff8a98;
    --bs-btn-border-color: #ff8a98;
    color: #ff8a98 !important;
    border-color: #ff8a98 !important;
    background: transparent !important;
}

[data-theme="dark"] .btn-outline-danger:hover,
[data-theme="dark"] .btn-outline-danger:active,
[data-theme="dark"] .btn-outline-danger.active {
    color: #2b0a11 !important;
    background-color: #ff8a98 !important;
    border-color: #ff8a98 !important;
}

/* 2) Tabs / pills / chips uniformeren */
.nav-tabs .nav-link,
.nav-pills .nav-link,
.filter-chip,
.rapport-tab,
.detail-tab {
    appearance: none;
    -webkit-appearance: none;
    background-image: none !important;
}

.nav-pills {
    gap: 0.35rem;
}

.nav-pills .nav-link {
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-muted);
    background: var(--color-surface);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.42rem 0.72rem;
}

.nav-pills .nav-link:hover {
    color: var(--color-text);
    border-color: color-mix(in srgb, var(--color-border) 84%, transparent);
    background: color-mix(in srgb, var(--color-surface) 85%, transparent);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    border-color: var(--accent, #2b7de9);
    background: var(--accent, #2b7de9);
}

[data-theme="dark"] .filter-chip {
    background: color-mix(in srgb, var(--color-surface) 90%, transparent);
    border-color: color-mix(in srgb, var(--color-border) 85%, transparent);
    color: rgba(255,255,255,.86);
}

[data-theme="dark"] .filter-chip:hover {
    background: color-mix(in srgb, var(--color-surface) 78%, transparent);
    border-color: color-mix(in srgb, var(--color-border) 95%, transparent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
}

[data-theme="light"] .filter-chip {
    background: #ffffff;
    border-color: #cfd8e3;
    color: #102030;
}

[data-theme="light"] .filter-chip:hover {
    background: #f2f7fc;
    border-color: #98aeca;
    color: #0e1d2d;
}

[data-theme="light"] .filter-chip.active {
    background: #9F3F08 !important;
    color: #ffffff !important;
    border-color: #7D3206 !important;
}

[data-theme="dark"] .filter-chip.active {
    background: var(--color-text) !important;
    color: var(--color-surface) !important;
    border-color: var(--color-text) !important;
}

.rapport-tab:focus-visible,
.detail-tab:focus-visible,
.filter-chip:focus-visible,
.nav-tabs .nav-link:focus-visible,
.nav-pills .nav-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #2b7de9) 55%, transparent) !important;
}

/* 3) PageHeader action buttons + spacing rhythm uniform op objectdetail/rapportages/dashboard/meldingen */
.page-header {
    margin-bottom: 0.85rem;
}

.page-header-main {
    min-height: 60px;
}

.page-header-actions {
    gap: 0.45rem 0.45rem;
}

.page-header-actions .btn,
.page-header-actions a.btn,
.page-header-actions button.btn {
    min-height: 36px;
    height: 36px;
    border-radius: 6px;
    padding: 0 0.72rem;
    line-height: 1.15;
    white-space: nowrap;
}

.page-header-actions .btn.dashboard-top-action,
.page-header-actions .dashboard-top-action {
    min-height: 36px;
    height: 36px;
}

.dashboard-action-icon,
.rapportages-action-icon {
    margin-right: 4px;
}

.dashboard-scroll-x {
    overflow-x: auto;
}

/* N10/N15: brede matrix-tabellen die bewust horizontaal scrollen (data-no-std-table)
   + de expliciete scroll-wrappers. Scroll-affordance via de klassieke
   "scroll-shadow" (cover-gradient in --color-surface verbergt de rand-schaduw aan
   het uiteinde; background-attachment:local) en een sticky eerste kolom zodat het
   rijlabel in beeld blijft. Werkt in beide thema's (cover = surface-token; de
   rand-schaduw is per thema afgesteld). */
.bd-scroll-wrap,
.dashboard-scroll-x,
.table-responsive:has(table[data-no-std-table]) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    --scroll-edge-shadow: rgba(0, 0, 0, 0.16);
    background:
        linear-gradient(to right, var(--color-surface) 30%, transparent) 0 0,
        linear-gradient(to left, var(--color-surface) 30%, transparent) 100% 0,
        radial-gradient(farthest-side at 0 50%, var(--scroll-edge-shadow), transparent) 0 0,
        radial-gradient(farthest-side at 100% 50%, var(--scroll-edge-shadow), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

[data-theme="dark"] .bd-scroll-wrap,
[data-theme="dark"] .dashboard-scroll-x,
[data-theme="dark"] .table-responsive:has(table[data-no-std-table]) {
    --scroll-edge-shadow: rgba(0, 0, 0, 0.5);
}

.bd-scroll-wrap table > thead > tr > th:first-child,
.bd-scroll-wrap table > tbody > tr > td:first-child,
.table-responsive:has(table[data-no-std-table]) table > thead > tr > th:first-child,
.table-responsive:has(table[data-no-std-table]) table > tbody > tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--color-surface);
    box-shadow: 1px 0 0 var(--color-border);
}

.dashboard-table-compact {
    font-size: .88rem;
}

.rapport-tabs,
.detail-tabs,
.nav-tabs,
.nav-pills {
    margin-top: 0.1rem;
    margin-bottom: 0.9rem;
}

.management-summary,
.dashboard-filters,
.filter-bar {
    margin-bottom: 0.9rem;
}

@media (max-width: 768px) {
    .page-header {
        margin-bottom: 0.72rem;
    }

    .page-header-main {
        min-height: 56px;
    }

    .page-header-actions .btn,
    .page-header-actions a.btn,
    .page-header-actions button.btn,
    .page-header-actions .dashboard-top-action {
        min-height: 34px;
        height: 34px;
        padding: 0 0.6rem;
        font-size: 0.76rem;
    }

    .rapport-tabs,
    .detail-tabs,
    .nav-tabs,
    .nav-pills {
        margin-bottom: 0.75rem;
    }

    .management-summary,
    .dashboard-filters,
    .filter-bar {
        margin-bottom: 0.75rem;
    }
}

/* 4) Contrast + disabled-state + hover/active parity (intensieve controle) */
.btn:disabled,
.btn.disabled,
.filter-chip:disabled,
.filter-chip.disabled,
.rapport-tab:disabled,
.detail-tab:disabled,
.nav-pills .nav-link.disabled,
.nav-tabs .nav-link.disabled,
[aria-disabled="true"].filter-chip,
[aria-disabled="true"].rapport-tab,
[aria-disabled="true"].detail-tab {
    opacity: 0.56 !important;
    cursor: not-allowed !important;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

.btn-outline-secondary {
    color: #475765 !important;
    border-color: #9ca8b5 !important;
    background: transparent !important;
}

.btn-outline-secondary:hover:not(:disabled),
.btn-outline-secondary:active:not(:disabled),
.btn-outline-secondary.active {
    color: #1c2a36 !important;
    border-color: #6d7b88 !important;
    background: #e6ebf1 !important;
}

[data-theme="dark"] .btn-outline-secondary {
    color: rgba(255,255,255,0.86) !important;
    border-color: rgba(255,255,255,0.42) !important;
    background: transparent !important;
}

[data-theme="dark"] .btn-outline-secondary:hover:not(:disabled),
[data-theme="dark"] .btn-outline-secondary:active:not(:disabled),
[data-theme="dark"] .btn-outline-secondary.active {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.62) !important;
    background: rgba(255,255,255,0.14) !important;
}

[data-theme="light"] .text-muted,
[data-theme="light"] .form-text {
    color: #4A5563 !important;
}

[data-theme="light"] .badge.bg-secondary {
    background-color: #4B5563 !important;
    color: #ffffff !important;
}

.rapport-tab.active,
.detail-tab--active,
.filter-chip.active,
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    font-weight: 700;
}

[data-theme="light"] .nav-tabs .nav-link.active {
    background: transparent !important;
    border-color: transparent transparent var(--dsb-orange-500, #DA5612) transparent !important;
    color: var(--dsb-orange-500, #DA5612) !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background: transparent !important;
    border-color: transparent transparent var(--dsb-orange-400, #F08A4A) transparent !important;
    color: var(--dsb-orange-400, #F08A4A) !important;
}

/* ObjectDetail tabs: hard override zodat browser default button-style nooit terugkomt */
.detail-tabs .detail-tab,
.detail-tabs .nav-link.detail-tab {
    border: 1px solid color-mix(in srgb, var(--color-border, #E2DCD3) 82%, transparent) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--color-surface, #ffffff) 98%, transparent) !important;
    color: var(--color-text-muted, #475765) !important;
    padding: .46rem .86rem !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
}

.detail-tabs .detail-tab.active,
.detail-tabs .detail-tab.detail-tab--active,
.detail-tabs .nav-link.detail-tab.active,
.detail-tabs .nav-link.detail-tab.detail-tab--active {
    color: #fff !important;
    border-color: var(--dsb-orange-500, #DA5612) !important;
    background: linear-gradient(180deg, var(--dsb-orange-500, #DA5612), var(--dsb-orange-600, #C74A0A)) !important;
    box-shadow: 0 3px 10px rgba(199,74,10,0.28) !important;
    font-weight: 700 !important;
}

[data-theme="dark"] .detail-tabs .detail-tab,
[data-theme="dark"] .detail-tabs .nav-link.detail-tab {
    color: rgba(255,255,255,.86) !important;
    border-color: rgba(255,255,255,.2) !important;
    background: rgba(255,255,255,.04) !important;
}

[data-theme="dark"] .detail-tabs .detail-tab.active,
[data-theme="dark"] .detail-tabs .detail-tab.detail-tab--active,
[data-theme="dark"] .detail-tabs .nav-link.detail-tab.active,
[data-theme="dark"] .detail-tabs .nav-link.detail-tab.detail-tab--active {
    color: #fff !important;
    border-color: var(--dsb-orange-400, #F08A4A) !important;
    background: linear-gradient(180deg, rgba(240,138,74,.94), rgba(218,86,18,.9)) !important;
    box-shadow: 0 4px 12px rgba(218,86,18,.3) !important;
}

.page-header-actions .form-select,
.page-header-actions .form-control {
    min-height: 36px;
    height: 36px;
}

@media (max-width: 768px) {
    .page-header-actions .form-select,
    .page-header-actions .form-control {
        min-height: 34px;
        height: 34px;
        font-size: 0.78rem;
    }

    .page-header-actions .page-header-select {
        min-width: 100%;
        max-width: none;
        flex-basis: 100%;
    }

    .dashboard-filters {
        gap: 0.6rem;
        padding: 0.75rem 0.85rem;
    }

    .dashboard-filters strong {
        flex-basis: 100%;
        margin-top: 0.15rem;
        margin-right: 0;
    }

    .dashboard-filter-group,
    .dashboard-filter-options {
        width: 100%;
    }
}

/* Kleine utility knop voor compacte acties in detailwidgets */
.btn-xs {
    height: 1.5rem;
    min-height: 1.5rem;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    line-height: 1.05;
}

.device-link-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.device-link-item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}

.device-link-code {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
}

.device-link-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.device-card-link {
    display: block;
    color: var(--color-text, #1c2a36);
    background: color-mix(in srgb, var(--bg, #ffffff) 94%, var(--accent, #2b7de9) 6%);
    border-color: color-mix(in srgb, var(--line, #E2DCD3) 82%, var(--accent, #2b7de9) 18%) !important;
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.device-card-link .text-muted {
    color: var(--color-text-muted, #475765) !important;
    opacity: 1;
}

[data-theme="dark"] .device-card-link {
    color: #e8eef5;
    background: color-mix(in srgb, var(--color-surface, #0f2235) 90%, var(--accent, #2b7de9) 10%);
    border-color: color-mix(in srgb, #2a3f57 78%, var(--accent, #2b7de9) 22%) !important;
}

[data-theme="dark"] .device-card-link .text-muted {
    color: #c6d3e0 !important;
}

.device-card-link:hover,
.device-card-link:focus-visible {
    border-color: var(--accent, #2b7de9) !important;
    box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--accent, #2b7de9) 22%, transparent);
    transform: translateY(-1px);
    outline: none;
}

/* Nav unavailable items: gedimd maar klikbaar (voorbeeldweergave zonder data) */
.nav-link-unavailable {
    opacity: .72;
    cursor: pointer;
    color: rgba(255,255,255,0.56) !important;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
    border-left-color: transparent !important;
    filter: saturate(0.72);
}

.nav-link-unavailable .nav-svg-icon,
.nav-link-unavailable .module-state-badge {
    opacity: 0.9;
}

.nav-link-unavailable .nav-count-badge {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.56) !important;
}

.nav-link-unavailable .nav-role-badge {
    opacity: 0.35 !important;
}

.nav-link-unavailable:hover,
.nav-link-unavailable.active {
    color: rgba(255,255,255,0.56) !important;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%) !important;
}

.nav-link-trial {
    border-left-color: color-mix(in srgb, var(--dsb-orange-500, #DA5612) 35%, transparent) !important;
}

[data-theme="light"] .nav-link-trial {
    color: var(--dsb-slate-700, #3F3A33) !important;
    background: linear-gradient(90deg, rgba(218,86,18,0.09) 0%, rgba(218,86,18,0.03) 100%);
}

[data-theme="dark"] .nav-link-trial {
    background: linear-gradient(90deg, rgba(240,138,74,0.14) 0%, rgba(240,138,74,0.04) 100%);
}

[data-theme="light"] .nav-link-unavailable {
    color: rgba(28,42,54,0.62) !important;
    background: linear-gradient(90deg, rgba(14,22,32,0.06) 0%, rgba(14,22,32,0.03) 100%);
}

[data-theme="light"] .nav-link-unavailable .nav-count-badge {
    background: rgba(14,22,32,0.1) !important;
    color: rgba(28,42,54,0.66) !important;
}

/* Module-state badge variants */
.module-state-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 9999px;
    line-height: 1;
    vertical-align: middle;
    border: 1px solid transparent;
}
.module-state-badge svg {
    width: 0.72rem;
    height: 0.72rem;
}
.module-state-trial {
    background: #fff4df;
    color: #7a4e00;  /* was #a86b00 (3.8:1 fail op #fff4df) — #7a4e00 = 5.0:1 WCAG AA */
    border-color: #f0c060;
}
.module-state-unavailable {
    background: #dde3e8;
    color: #334150;
    border-color: #b8c2cb;
}
.module-state-active,
.module-state-unknown { display: none; }
[data-theme="dark"] .module-state-trial { background: rgba(168,107,0,.2); color: #f0c060; border-color: #a86b00; }
[data-theme="dark"] .module-state-unavailable { background: rgba(71,87,101,.3); color: #b0bac4; border-color: #475765; }

.std-table-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* alleen nog de Kolommen-knop; rechts uitgelijnd */
    gap: .65rem;
    margin-bottom: .5rem;
    position: relative;
}

.std-table-tools-right {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* P1: mobiele sorteer-control. Op desktop verborgen (sorteren via kolomkoppen);
   op mobiel zijn de koppen verborgen (kaartweergave) dus tonen we select + richting. */
.std-table-sort-mobile { display: none; }

@media (max-width: 768px) {
    .std-table-tools {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .std-table-sort-mobile {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        flex: 1 1 12rem;
        min-width: 0;
    }

    .std-table-sort-mobile-label {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--color-text-muted);
        white-space: nowrap;
    }

    .std-table-sort-select {
        flex: 1 1 auto;
        min-width: 0;
    }

    .std-table-sort-dir {
        flex: 0 0 auto;
        min-width: 40px;
        min-height: 40px;
        font-size: 1rem;
        line-height: 1;
    }
}

/* "Per pagina"-keuze: verfijnde segmented pill i.p.v. losse label + select.
   De <label> omsluit de <select>, dus de hele pill is het klikdoel (>= 44px). */
.std-table-pagesize-wrap {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;            /* voorkomt dat "Per pagina" over twee regels breekt */
    cursor: pointer;
    min-height: 44px;
    padding: .25rem .3rem .25rem .9rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-muted, rgba(249,245,241,.74));
    background: var(--color-surface-alt, var(--color-surface, #0b2a46));
    border: 1px solid var(--color-border, rgba(249,245,241,.18));
    border-radius: var(--radius-pill, 999px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.08));
    transition: border-color .18s ease, box-shadow .18s ease;
}

.std-table-pagesize-wrap:hover { border-color: var(--color-primary, #f08a4a); }

.std-table-pagesize-wrap:focus-within {
    border-color: var(--color-primary, #f08a4a);
    box-shadow: var(--shadow-glow);
}

.std-table-pagesize.form-select {
    width: auto;
    min-width: 3.4rem;
    min-height: 34px;
    height: 34px;
    padding: 0 1.85rem 0 .8rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--color-text, #f9f5f1);
    background-color: var(--color-surface, #fff);
    border: 1px solid var(--color-border, rgba(249,245,241,.2));
    border-radius: var(--radius-pill, 999px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.75 4.5 6 7.75 9.25 4.5' fill='none' stroke='%231c2a36' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: .68rem;
    box-shadow: none;
    cursor: pointer;
    transition: border-color .18s ease;
}

.std-table-pagesize.form-select:hover { border-color: var(--color-primary, #f08a4a); }

.std-table-pagesize.form-select:focus {
    border-color: var(--color-primary, #f08a4a);
    box-shadow: none;
    outline: none;
}

/* Chevron per thema leesbaar houden (donkere stroke op licht, lichte stroke op donker). */
[data-theme="dark"] .std-table-pagesize.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.75 4.5 6 7.75 9.25 4.5' fill='none' stroke='%23f9f5f1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.std-table-columns-btn {
    min-width: 7.25rem;
}

.std-table-columns-panel {
    position: absolute;
    right: 0;
    top: calc(100% + .35rem);
    min-width: 220px;
    max-height: 360px;
    overflow: auto;
    z-index: 12;
    background: var(--color-surface, #0b2a46);
    border: 1px solid var(--color-border, rgba(249,245,241,.2));
    border-radius: .5rem;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    padding: .55rem .65rem;
}

.std-table-columns-title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-muted, rgba(249,245,241,.72));
    margin-bottom: .4rem;
}

.std-table-columns-item {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .86rem;
    color: var(--color-text, #f9f5f1);
    padding: .15rem 0;
}

.std-table-columns-item input {
    margin: 0;
}

.std-table-preset-section {
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px solid var(--color-border, rgba(249,245,241,.15));
}

.std-table-preset-list {
    margin-bottom: .45rem;
}

.std-table-preset-empty {
    font-size: .8rem;
    color: var(--color-text-muted, rgba(249,245,241,.55));
    display: block;
    margin-bottom: .3rem;
}

.std-table-preset-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .25rem;
}

.std-table-preset-load {
    flex: 1;
    text-align: left;
    font-size: .82rem;
    padding: .15rem .5rem;
    background: transparent;
    border: 1px solid var(--color-border, rgba(249,245,241,.25));
    border-radius: .3rem;
    color: var(--color-text, #f9f5f1);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.std-table-preset-load:hover {
    background: var(--color-primary, #2b7de9);
    border-color: var(--color-primary, #2b7de9);
    color: #fff;
}

.std-table-preset-delete {
    flex-shrink: 0;
    font-size: .86rem;
    line-height: 1;
    padding: .15rem .45rem;
    background: transparent;
    border: 1px solid var(--color-border, rgba(249,245,241,.25));
    border-radius: .3rem;
    color: var(--color-text-muted, rgba(249,245,241,.6));
    cursor: pointer;
}

.std-table-preset-delete:hover {
    background: #b00020;
    border-color: #b00020;
    color: #fff;
}

.std-table-preset-save-row {
    display: flex;
    gap: .35rem;
    align-items: center;
}

.std-table-preset-input {
    flex: 1;
    min-width: 0;
    font-size: .82rem;
    background: var(--color-surface-alt, rgba(255,255,255,.07));
    border: 1px solid var(--color-border, rgba(249,245,241,.25));
    color: var(--color-text, #f9f5f1);
    border-radius: .3rem;
    padding: .2rem .45rem;
}

.std-table-preset-input::placeholder {
    color: var(--color-text-muted, rgba(249,245,241,.45));
}

.std-table-preset-save-btn {
    flex-shrink: 0;
    font-size: .82rem;
    padding: .2rem .65rem;
    white-space: nowrap;
}

.std-table th.std-table-sortable {
    cursor: pointer;
    position: relative;
    user-select: none;
    padding-right: 1.35rem;
}

.std-table th.std-table-sortable:hover,
.std-table th.std-table-sortable:focus-visible {
    text-decoration: underline;
    outline: none;
}

.std-table-sort-indicator {
    font-size: .78em;
    opacity: .86;
    position: absolute;
    right: .45rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Paginatie-onderbalk: "Per pagina"-keuze links, teller + vorige/volgende rechts. */
.std-table-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem .85rem;
    margin-top: .7rem;
    padding-top: .7rem;
    border-top: 1px solid var(--color-border, rgba(249,245,241,.12));
}

.std-table-pager-nav {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem;
    margin-left: auto;          /* duwt teller + knoppen naar rechts, ook als de balk wrapt */
}

.std-table-pager-info {
    font-size: .82rem;
    color: var(--color-text-muted, rgba(249,245,241,.74));
    white-space: nowrap;
    margin-right: .2rem;
}

.std-table-pager-btn {
    border-radius: var(--radius-pill, 999px);
    min-width: 5.5rem;
    font-weight: 600;
}

/* =============================================
   Overzicht-pariteit: gedeelde demo-primitives
   (card-head, segmented control, rank-lijst, recente activiteit).
   1-op-1 overgenomen uit DeSlimmeBrugDesignSystem / demo app.css,
   met de design-systeem-tokens uit :root.
   ============================================= */
.card-hd {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.card-hd.tight { margin-bottom: var(--space-4); }
.card-title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-16);
    color: var(--fg-primary);
    margin: 0;
}
.card-sub {
    font-size: var(--fs-13);
    color: var(--fg-tertiary);
    margin: 3px 0 0;
}
.card-meta {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
}

.seg {
    display: inline-flex;
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
    padding: 3px;
    gap: 2px;
}
.seg button {
    border: none;
    background: transparent;
    padding: 6px 13px;
    border-radius: 3px;
    font-size: var(--fs-13);
    font-weight: 500;
    color: var(--fg-secondary);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.seg button.active {
    background: var(--bg-surface);
    color: var(--fg-primary);
    box-shadow: var(--shadow-xs);
}

.rank-row {
    display: grid;
    grid-template-columns: 140px 1fr 64px;
    align-items: center;
    gap: var(--space-3);
    padding: 9px 0;
    cursor: pointer;
}
.rank-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.rank-name {
    font-size: var(--fs-13);
    font-weight: 500;
    color: var(--fg-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rank-track {
    display: block;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    overflow: hidden;
}
.rank-fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--dsb-navy-500);
}
.rank-fill.top { background: var(--accent); }
.rank-val {
    font-family: var(--font-mono);
    font-size: var(--fs-13);
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--fg-secondary);
}

.top-openingen-rows { margin-top: var(--space-2); }
.top-openingen-empty {
    font-size: var(--fs-13);
    color: var(--fg-tertiary);
    padding: var(--space-4) 0;
}

/* -- Recente activiteit (brow-rijen) -- */
.brow {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-6);
    border-top: 1px solid var(--border-subtle);
    text-decoration: none;
    color: inherit;
}
.brow:first-child { border-top: none; }
.brow:hover { background: var(--bg-subtle); }
.brow-dot {
    width: 9px;
    height: 9px;
    border-radius: var(--radius-pill);
    flex: 0 0 auto;
}
.brow-main { min-width: 0; }
.brow-name {
    font-size: var(--fs-13);
    font-weight: 500;
    color: var(--fg-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brow-loc {
    font-size: var(--fs-12);
    color: var(--fg-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brow-val {
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    color: var(--fg-tertiary);
    text-align: right;
    white-space: nowrap;
}
.recente-activiteit-rows { margin: 0 calc(-1 * var(--space-6)); }

/* -- KPI-tegels versleepbaar (volgorde via CSS order, opgeslagen in localStorage) -- */
.kpi-draggable { cursor: grab; position: relative; }
.kpi-draggable:active { cursor: grabbing; }
.kpi-card.kpi-dragging { opacity: 0.45; }
.kpi-card.kpi-drop-target { outline: 2px dashed var(--accent); outline-offset: 2px; }

/* Grip-indicator op KPI-tegels: zichtbaar op hover */
.kpi-draggable::before {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10px;
    height: 14px;
    background-image: radial-gradient(circle, var(--color-text-muted, #7B7569) 1.5px, transparent 1.5px);
    background-size: 5px 5px;
    background-repeat: repeat;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.kpi-draggable:hover::before { opacity: 0.5; }

/* -- Widget toolbar: drag-grip + opties-knop, zichtbaar bij hover -- */
.widget { position: relative; }

.widget-toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 4;
}
.widget:hover .widget-toolbar,
.widget:focus-within .widget-toolbar {
    opacity: 1;
    pointer-events: auto;
}

.widget-grip {
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    cursor: grab;
    padding: 4px 6px;
    border-radius: 4px;
    opacity: 0.6;
    transition: opacity 0.12s;
}
.widget-grip:hover { opacity: 1; }

.widget-options-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
    line-height: 1;
}
.widget-options-btn:hover {
    background: var(--color-border);
    color: var(--color-text);
}

/* Gradient achtergrond zodat toolbar-iconen leesbaar zijn boven grafiekinhoud */
.widget:hover .widget-toolbar {
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--color-surface) 92%, transparent) 0%,
        transparent 100%);
}

/* Context menu header */
.ctx-menu-header {
    border-bottom: 1px solid var(--border-subtle, rgba(249,245,241,.14));
    margin-bottom: 2px;
    padding-bottom: 6px;
    font-weight: 600;
    color: var(--color-text);
    opacity: 1;
}

/* -- Eenmalige drag-hint banner -- */
.drag-hint-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    margin-bottom: 14px;
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
    border-radius: 8px;
    font-size: 13px;
    color: var(--color-text-muted);
    animation: ams-card-in 0.3s ease-out backwards;
}
.drag-hint-text {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.drag-hint-icon {
    opacity: 0.6;
    flex-shrink: 0;
}
.drag-hint-sep {
    opacity: 0.4;
    margin: 0 2px;
}
.drag-hint-close {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    padding: 3px 10px;
    font-size: 12px;
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
}
.drag-hint-close:hover {
    background: var(--color-border);
    color: var(--color-text);
}

/* -- Teaser-cards (#overzicht): 3-koloms rij, mobile-first -- */
.teaser-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 768px) {
    .teaser-row { grid-template-columns: repeat(3, 1fr); }
}
.teaser-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.teaser-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) 0 var(--space-2);
}
.teaser-empty-badge {
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 3px var(--space-3);
}
.teaser-empty-text {
    font-size: var(--fs-13);
    color: var(--fg-tertiary);
    margin: 0;
    line-height: var(--lh-normal, 1.5);
}

/* -- Dashboard-filterbalk: strakke inline-stijl (demo .fb-*), token-gebaseerd -- */
.dashboard-filterbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    width: 100%;
}
.dashboard-filterbar .fb-block {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.dashboard-filterbar .fb-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
    white-space: nowrap;
}
.dashboard-filterbar .fb-select {
    font-family: var(--font-sans);
    font-size: var(--fs-13);
    font-weight: 500;
    color: var(--fg-primary);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default, var(--color-border));
    border-radius: var(--radius-sm);
    padding: 7px 30px 7px 11px;
    min-height: 36px;
    cursor: pointer;
    max-width: 16rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237B7569' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.dashboard-filterbar .fb-select:hover { border-color: var(--border-strong, var(--color-text-muted)); }
.dashboard-filterbar .fb-select:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.dashboard-filterbar .fb-reset {
    margin-left: auto;
    font-family: var(--font-sans);
    font-size: var(--fs-13);
    font-weight: 600;
    color: var(--fg-secondary);
    background: transparent;
    border: 1px solid var(--border-default, var(--color-border));
    border-radius: var(--radius-sm);
    padding: 7px 14px;
    min-height: 36px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}
.dashboard-filterbar .fb-reset:hover,
.dashboard-filterbar .fb-reset:focus-visible {
    border-color: var(--accent);
    color: var(--fg-primary);
    background: var(--bg-subtle);
    outline: none;
}
/* Lichtere chevron op donkere achtergrond */
[data-theme="dark"] .dashboard-filterbar .fb-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B9C6D4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
@media (max-width: 768px) {
    .dashboard-filterbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }
    .dashboard-filterbar .fb-block { justify-content: space-between; }
    .dashboard-filterbar .fb-select { flex: 1; max-width: none; min-height: 44px; }
    .dashboard-filterbar .fb-reset { margin-left: 0; min-height: 44px; }
}

/* ── Versleepbaar widget-raster (overzichtspagina) ───────────────────
   6-koloms raster; elke widget heeft --wspan (2=1/3, 3=1/2, 4=2/3, 6=vol).
   Volgorde via inline 'order'. Sleep om te herordenen, rechtermuisknop
   voor verbergen/breedte. */
.widget-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-4, 16px);
    margin-bottom: var(--space-4, 16px);
}
.widget-grid > .widget {
    grid-column: span var(--wspan, 3);
    min-width: 0;            /* voorkomt overflow van brede inhoud (tabellen/charts) */
    display: flex;
    cursor: grab;
}
.widget-grid > .widget > * { flex: 1 1 auto; min-width: 0; }
.widget-grid > .widget:active { cursor: grabbing; }

/* Sleep-visuals (spiegelt de KPI-tegel-stijl) */
.widget.widget-dragging { opacity: 0.45; }
.widget.widget-drop-target { outline: 2px dashed var(--accent, #DA5612); outline-offset: 3px; border-radius: var(--radius-lg, 12px); }

/* Smalle schermen: alles onder elkaar, volledige breedte */
@media (max-width: 900px) {
    .widget-grid { grid-template-columns: 1fr; }
    .widget-grid > .widget { grid-column: 1 / -1; }
}

/* ── Contextmenu (rechtermuisknop op een widget) ─────────────────── */
.ctx-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: transparent;
}
.ctx-menu {
    position: fixed;
    z-index: 1081;
    min-width: 180px;
    padding: 6px;
    background: var(--bg-surface, #062A4A);
    border: 1px solid var(--border-subtle, rgba(249,245,241,.16));
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 10px 32px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.24);
}
.ctx-menu .ctx-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm, 6px);
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: var(--fs-13, 13px);
    font-weight: 500;
    color: var(--fg-primary, #F9F5F1);
    text-align: left;
    cursor: pointer;
}
.ctx-menu .ctx-item:hover,
.ctx-menu .ctx-item:focus-visible {
    background: var(--bg-subtle, rgba(249,245,241,.08));
    outline: none;
}
.ctx-menu .ctx-item.active {
    color: var(--accent, #DA5612);
    font-weight: 700;
}
.ctx-menu .ctx-sep {
    height: 1px;
    margin: 5px 6px;
    background: var(--border-subtle, rgba(249,245,241,.14));
}
.ctx-menu .ctx-label {
    padding: 4px 10px 2px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fg-tertiary, rgba(249,245,241,.6));
}
/* Viewport-veiligheid: menu nooit groter dan het scherm */
.ctx-menu {
    max-height: min(360px, calc(100dvh - 24px));
    overflow-y: auto;
}
/* Info-tooltip naast een menu-item */
.ctx-info-tip {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    color: var(--fg-tertiary, rgba(249,245,241,.6));
    cursor: help;
    vertical-align: middle;
}
.ctx-info-tip svg {
    display: block;
}
/* Badge "ingesteld" naast een menu-item */
.ctx-item-badge {
    margin-left: auto;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    background: var(--color-primary, #DA5612);
    color: #fff;
    border-radius: 20px;
    white-space: nowrap;
}

/* ── KPI drempelwaarden editor ───────────────────────────────────── */
.kpi-thresh-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(0,0,0,.48);
    backdrop-filter: blur(2px);
}
.kpi-thresh-modal {
    position: fixed;
    z-index: 1091;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(480px, calc(100vw - 32px));
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    background: var(--color-surface, #0d2235);
    border: 1px solid var(--color-border, rgba(255,255,255,.12));
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 24px 64px rgba(0,0,0,.6);
    display: flex;
    flex-direction: column;
}
[data-theme="light"] .kpi-thresh-modal {
    background: var(--color-surface, #fff);
    border-color: var(--color-border, #e2dcd3);
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
.kpi-thresh-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,.1));
    flex-shrink: 0;
}
.kpi-thresh-title {
    flex: 1;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text, #f9f5f1);
    display: flex;
    align-items: center;
    gap: 7px;
}
[data-theme="light"] .kpi-thresh-title {
    color: var(--color-text, #1c2a36);
}
.kpi-thresh-body {
    padding: 16px;
    flex: 1;
}
.kpi-thresh-intro {
    font-size: 13px;
    color: var(--color-text-muted, rgba(249,245,241,.65));
    margin-bottom: 12px;
    line-height: 1.5;
}
[data-theme="light"] .kpi-thresh-intro {
    color: var(--color-text-muted, #475765);
}
/* Kleurverloop preview-balk */
.kpi-thresh-preview {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 14px;
    gap: 2px;
}
.kpi-thresh-preview-seg {
    border-radius: 2px;
    min-width: 8px;
    transition: flex .2s;
}
/* Rijen */
.kpi-thresh-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.kpi-thresh-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-surface-alt, rgba(255,255,255,.04));
    border: 1px solid var(--color-border, rgba(255,255,255,.08));
    border-radius: var(--radius-sm, 6px);
    padding: 6px 10px;
}
[data-theme="light"] .kpi-thresh-row {
    background: var(--color-surface-alt, #f4f1ec);
    border-color: var(--color-border, #e2dcd3);
}
.kpi-thresh-row-cond {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text, #f9f5f1);
}
[data-theme="light"] .kpi-thresh-row-cond {
    color: var(--color-text, #1c2a36);
}
.kpi-thresh-row-label-muted {
    color: var(--color-text-muted, rgba(249,245,241,.55));
    font-style: italic;
}
[data-theme="light"] .kpi-thresh-row-label-muted {
    color: var(--color-text-muted, #475765);
}
.kpi-thresh-input {
    width: 72px;
    font-size: 13px;
}
.kpi-thresh-colorpicker {
    width: 32px;
    height: 28px;
    padding: 1px;
    border: 1px solid var(--color-border, rgba(255,255,255,.14));
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}
.kpi-thresh-swatch {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    /* Thema-token i.p.v. rgba(0,0,0,..): donkere rand was onzichtbaar op dark-achtergrond. */
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}
.kpi-thresh-remove {
    color: var(--color-danger, #ef4444);
    border: none;
    background: transparent;
    padding: 2px 4px;
    line-height: 1;
}
.kpi-thresh-remove:hover {
    background: rgba(239,68,68,.12);
    border-radius: 4px;
}
.kpi-thresh-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--color-border, rgba(255,255,255,.1));
    flex-shrink: 0;
}

/* ── KPI tegel drempelkleur override ────────────────────────────── */
/* Wanneer een drempelkleur actief is, overschrijft die de decoratieve
   accentkleur van de kaart (::before pseudo-element via CSS var). */
.kpi-card {
    --kpi-threshold-color: transparent;
}
.kpi-card[style*="--kpi-threshold-color"]::before {
    background: var(--kpi-threshold-color) !important;
    opacity: 1 !important;
}
/* Drempelkleur tint de hele tegel (valt beter op dan alleen het accentblokje).
   Subtiele menging met de surface-kleur houdt de tekst leesbaar in beide thema's. */
.kpi-card[style*="--kpi-threshold-color"] {
    background: color-mix(in srgb, var(--kpi-threshold-color) 18%, var(--color-surface)) !important;
    border-color: color-mix(in srgb, var(--kpi-threshold-color) 45%, var(--color-border)) !important;
    border-left-color: var(--kpi-threshold-color) !important;
}
[data-theme="dark"] .kpi-card[style*="--kpi-threshold-color"] {
    background: color-mix(in srgb, var(--kpi-threshold-color) 26%, var(--color-surface)) !important;
}

/* === PWA installatie-info (PwaInstallInfo.razor) === */
.pwa-install-intro {
    font-size: 0.9rem;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}
.pwa-install-benefits {
    margin: 0 0 0.85rem;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.pwa-install-benefits li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.86rem;
    color: var(--color-text);
}
.pwa-install-benefits li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.12em;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary, #DA5612) 18%, transparent);
}
.pwa-install-benefits li::after {
    content: "";
    position: absolute;
    left: 0.3rem;
    top: 0.42em;
    width: 0.42rem;
    height: 0.22rem;
    border-left: 2px solid var(--color-primary, #DA5612);
    border-bottom: 2px solid var(--color-primary, #DA5612);
    transform: rotate(-45deg);
}
.pwa-install-steps {
    margin-top: 0.25rem;
    padding: 0.65rem 0.85rem;
    background: color-mix(in srgb, var(--color-text) 5%, transparent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
}
.pwa-install-steps-title {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
    color: var(--color-text);
}
.pwa-install-steps ol {
    margin: 0;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.pwa-install-steps li {
    font-size: 0.85rem;
    color: var(--color-text);
}
.pwa-install-more-link {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.pwa-install-more-link:hover, .pwa-install-more-link:focus-visible {
    color: var(--color-primary);
}
.pwa-install-installed {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}
.pwa-install-check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, #1f7a3e 20%, transparent);
    color: #1f7a3e;
}
[data-theme="dark"] .pwa-install-check {
    color: #6EE7A0;
    background: rgba(110, 231, 160, 0.16);
}

/* === Install-app banner (InstallAppBanner.razor) === */
.install-app-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-md, 8px);
    border: 1px solid color-mix(in srgb, var(--color-primary, #DA5612) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary, #DA5612) 10%, var(--color-surface));
    color: var(--color-text);
}
.install-app-banner-icon {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--color-primary, #DA5612);
}
.install-app-banner-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.4;
}
.install-app-banner-cta { flex-shrink: 0; }
.install-app-banner-close {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
}
.install-app-banner-close:hover { color: var(--color-text); }

/* Instructie-overlay (o.a. iOS 'Zet op beginscherm') */
.install-overlay-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}
.install-overlay {
    position: fixed;
    z-index: 1091;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(460px, calc(100vw - 28px));
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    padding: 1rem 1.15rem 1.25rem;
}
.install-overlay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.install-overlay-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
}
.install-overlay-close {
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.install-overlay-close:hover { color: var(--color-text); }
@media (max-width: 600px) {
    .install-app-banner { flex-wrap: wrap; }
    .install-app-banner-text { flex-basis: 100%; order: -1; }
}

/* ---- Weerwidgets (ObjectDetail) ------------------------------------------------ */
.weather-current-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.weather-temp-big {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
    white-space: nowrap;
}
.weather-current-meta {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.weather-desc-label {
    font-size: .95rem;
    font-weight: 600;
    color: var(--color-text);
}
.weather-stat-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    color: var(--color-text-muted);
}
.weather-stat {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
/* Compact dagstrip */
.weather-forecast-strip {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
    -webkit-overflow-scrolling: touch;
}
.weather-forecast-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    min-width: 64px;
    flex-shrink: 0;
    padding: .5rem .4rem;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: .75rem;
}
.wfd-name { font-weight: 700; color: var(--color-text); }
.wfd-desc { color: var(--color-text-muted); text-align: center; font-size: .68rem; line-height: 1.2; }
.wfd-temps { display: flex; gap: .25rem; align-items: baseline; }
.wfd-max { font-weight: 700; color: var(--color-text); }
.wfd-min { color: var(--color-text-muted); font-size: .7rem; }
.wfd-precip { color: #38a3ff; font-size: .68rem; }

/* Volledig Weer-tab */
.weer-current-big { text-align: center; padding: .5rem 0 1rem; }
.weer-temp-display { font-size: 3.5rem; font-weight: 700; line-height: 1; color: var(--color-text); }
.weer-desc-big { font-size: 1.1rem; color: var(--color-text-muted); margin-top: .25rem; }
.weer-forecast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: .5rem;
}
.weer-forecast-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: .6rem .4rem;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: .78rem;
    text-align: center;
}
.wfc-day { font-weight: 700; color: var(--color-text); }
.wfc-date { color: var(--color-text-muted); font-size: .68rem; }
.wfc-desc { color: var(--color-text-muted); font-size: .7rem; line-height: 1.2; }
.wfc-temps { display: flex; gap: .2rem; align-items: baseline; }
.wfc-max { font-weight: 700; color: var(--color-text); }
.wfc-sep { color: var(--color-text-muted); }
.wfc-min { color: var(--color-text-muted); font-size: .7rem; }
.wfc-precip { color: #38a3ff; font-size: .68rem; }
/* Neerslag-labels: #38a3ff op witte surface = ~2,7:1 (te laag in light). Donkerblauw in light. */
[data-theme="light"] .wfd-precip,
[data-theme="light"] .wfc-precip { color: #0b5cad; }

/* Verrijkingskaart (Locatie & Omgeving op objectdetailpagina) */
.enrichment-group {
    padding: .75rem;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    height: 100%;
}
.enrichment-group-title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: .5rem;
}
.enrichment-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .75rem;
    row-gap: .2rem;
    margin: 0;
    font-size: .8rem;
}
.enrichment-dl dt {
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.dt-ico {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--color-accent, var(--color-primary));
}
.enrichment-dl dd {
    margin: 0;
    color: var(--color-text);
    word-break: break-word;
}

/* ---- Nabijgelegen voorzieningen -------------------------------------- */
.amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .6rem;
}
.amenity-group {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-2, var(--color-surface));
    padding: .5rem .6rem;
}
.amenity-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .4rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--color-border);
}
.amenity-cat-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}
.amenity-icon {
    flex-shrink: 0;
    color: var(--color-accent, var(--color-primary));
}
.amenity-cat-name {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.amenity-cat-count {
    flex-shrink: 0;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    min-width: 1.3rem;
    text-align: center;
    padding: .18rem .4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text-muted) 16%, var(--color-surface));
    color: var(--color-text-muted);
}
.amenity-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.amenity-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
    font-size: .8rem;
}
.amenity-name {
    color: var(--color-text);
    word-break: break-word;
}
.amenity-dist {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-size: .72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.amenity-meta {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex-shrink: 0;
}
/* Nabijheidsbalk: vollere accentvulling = dichterbij (track = --color-border). */
.amenity-prox {
    position: relative;
    width: 34px;
    height: 4px;
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
}
.amenity-prox::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--p, 0) * 1%);
    background: var(--color-accent, #2b7de9);
    border-radius: 999px;
}
/* Aantal + straal naast de sectietitel; niet uppercase zoals de titel zelf. */
.amenity-total {
    margin-left: .45rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
}
.amenity-source {
    margin-top: .55rem;
    font-size: .7rem;
    color: var(--color-text-muted);
}

/* ---- Waterpeil -------------------------------------------------------- */
.waterpeil-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.waterpeil-value {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.waterpeil-positive { color: var(--color-primary, #2f3e4d); }
.waterpeil-negative { color: #e04; }
[data-theme="light"] .waterpeil-positive { color: #0b5cad; }
[data-theme="light"] .waterpeil-negative { color: #b00020; }
.waterpeil-unit {
    font-size: .85rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: .25rem;
}
.waterpeil-meta {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

/* Live doorvaarthoogte (afgeleid van waterpeil + referentiehoogte) */
.waterpeil-clearance {
    margin-left: auto;
    text-align: right;
    padding-left: 1rem;
    border-left: 1px solid var(--color-border);
}
.wpc-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary, var(--color-text));
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.wpc-unit { font-size: .85rem; font-weight: 500; color: var(--color-text-muted); }
.wpc-label { margin-top: .15rem; }

/* Groep met gesloten + open doorvaarthoogte naast elkaar; huidige status uitgelicht. */
.waterpeil-clearance-group {
    margin-left: auto;
    display: flex;
    gap: .9rem;
    flex-wrap: wrap;
}
.waterpeil-clearance-group .waterpeil-clearance { margin-left: 0; }
.wpc-current {
    border-left: 3px solid #2b7de9;            /* accent, leesbaar in beide thema's */
    background: rgba(43, 125, 233, .08);
    border-radius: 0 6px 6px 0;
    padding-right: .6rem;
}
.wpc-current .wpc-value { color: #2b7de9; }
[data-theme="light"] .wpc-current .wpc-value { color: #0b5cad; }
.wpc-unlimited { font-size: 1.1rem; }

/* Mini-verloop (sparkline) onder de waterpeilcijfers — eigen strip op een nieuwe regel.
   Lijnkleur via currentColor; #2b7de9 (accent) is leesbaar op zowel light als dark surface. */
.waterpeil-spark {
    flex: 1 0 100%;
    height: 34px;
    margin-top: .35rem;
    color: #2b7de9;
}
.waterpeil-spark .wps-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Verkeersimpact-cijfers */
.impact-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.impact-label { margin-top: .2rem; }

/* "Schip nadert"-markering in de komende-openingen-lijst */
.msp-vessel-flag { color: #27a353; font-weight: 600; }

/* ---- AIS scheepvaart -------------------------------------------------- */
/* Tabel gebruikt data-no-std-table, eigen compact-stijl */
.bas-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bas-item {
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--color-border);
}
.bas-item:last-child { border-bottom: none; }
.bas-title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: .15rem;
}
.bas-location { margin-bottom: .15rem; }
.bas-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }

/* ---- Luchtfoto -------------------------------------------------------- */
/* De foto + Kadaster-overlay vullen samen de volledige kaarthoogte, zodat de
   Luchtfoto-kaart even hoog wordt als de weerkaart ernaast (zie .object-env-grid,
   align-items: stretch) en er geen lege ruimte onder de foto overblijft. */
.aerial-photo-body {
    position: relative;
    min-height: 200px;
}

/* Kadaster-overlay valt pixel-precies op de luchtfoto: zelfde uitsnede (BBOX) in
   MapImageryHelper en hier zelfde box + object-fit, zodat de perceelgrenzen niet schuiven.
   Foto en overlay liggen beide absoluut over elkaar (identieke box) en vullen de stack;
   de stack vult op zijn beurt de kaarthoogte. */
.aerial-stack {
    position: relative;
    line-height: 0;
    height: 100%;
}
.aerial-stack .aerial-photo,
.aerial-stack .aerial-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: none;
}
.aerial-stack .aerial-overlay {
    pointer-events: none;
}

/* ---- Objectdetail: omgevingskaarten in 2 kolommen op breed scherm ------ */
.object-env-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: stretch;   /* kaarten in dezelfde rij even hoog -> bodems lijnen netjes uit */
    margin-bottom: 1.5rem;
}
.object-env-grid > .card {
    margin-bottom: 0;
    height: 100%;           /* vul de gridcel zodat card-body (en de luchtfoto) mee-rekken */
}
@media (min-width: 992px) {
    .object-env-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Eén losse kaart, of een brede kaart (waterpeil/AIS-tabel), neemt de volle breedte;
       het compacte paar (weer + luchtfoto) staat zo bovenaan en de brede kaarten eronder. */
    .object-env-grid > .card:only-child,
    .object-env-grid > .card.object-env-wide {
        grid-column: 1 / -1;
    }
    /* Geen weerkaart (object zonder weerstation)? Dan is de luchtfoto het eerste
       kind en zou hij als halfbrede wees blijven staan -> maak hem dan vol breed. */
    .object-env-grid > .object-env-photo:first-child {
        grid-column: 1 / -1;
    }
}

/* ---- Brugopeningen: klikbare rij naar detailpaneel --------------------- */
.opening-row {
    cursor: pointer;
}
.opening-row:hover {
    background: var(--color-surface-2, rgba(127, 127, 127, .08));
}
.opening-row--active {
    background: var(--color-primary-soft, rgba(43, 125, 233, .14));
}
.opening-weather-temp {
    font-weight: 600;
    color: var(--color-text);
    margin-right: .35rem;
}
.opening-details-btn {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    padding: .15rem .25rem;
    line-height: 0;
    border-radius: 6px;
    cursor: pointer;
}
.opening-details-btn:hover,
.opening-details-btn:focus-visible {
    color: var(--color-primary);
    background: var(--color-surface-2, rgba(127, 127, 127, .14));
}

/* ---- Detailpaneel (drawer) rechts: omstandigheden per opening ---------- */
.opening-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1045;
    animation: opening-drawer-fade .15s ease-out;
}
.opening-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100%);
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    box-shadow: -8px 0 28px rgba(0, 0, 0, .25);
    z-index: 1046;
    display: flex;
    flex-direction: column;
    animation: opening-drawer-slide .2s ease-out;
}
.opening-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}
.opening-drawer-eyebrow {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
}
.opening-drawer-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
}
.opening-drawer-close {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: .25rem;
    line-height: 0;
    border-radius: 6px;
}
.opening-drawer-close:hover,
.opening-drawer-close:focus-visible {
    color: var(--color-text);
    background: var(--color-surface-2, rgba(127, 127, 127, .14));
}
.opening-drawer-body {
    padding: 1rem 1.25rem;
    overflow-y: auto;
}
.opening-drawer-section + .opening-drawer-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}
.opening-drawer-section-title {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
    margin: 0 0 .6rem;
}
.opening-drawer-dl {
    display: grid;
    grid-template-columns: 42% 58%;
    gap: .4rem 0;
    margin: 0;
}
.opening-drawer-dl dt {
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: .9rem;
}
.opening-drawer-dl dd {
    margin: 0;
    color: var(--color-text);
    font-size: .9rem;
}
.opening-drawer-vessels {
    list-style: none;
    margin: .6rem 0 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}
.opening-drawer-vessel + .opening-drawer-vessel {
    border-top: 1px solid var(--color-border);
}
/* Rij-inhoud: zowel de klikbare knop als de niet-interactieve fallback delen deze layout. */
.opening-drawer-vessel-btn,
.opening-drawer-vessel-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    padding: .4rem .6rem;
    font-size: .88rem;
}
.opening-drawer-vessel-btn {
    background: transparent;
    border: 0;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.opening-drawer-vessel-btn:hover,
.opening-drawer-vessel-btn:focus-visible {
    /* Tint o.b.v. tekstkleur: donker in light mode, licht in dark mode -> in beide zichtbaar. */
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
}
.opening-drawer-vessel-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}
.opening-drawer-vessel-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .45rem;
    min-width: 0;
}
.opening-drawer-vessel-name {
    color: var(--color-text);
    font-weight: 500;
    word-break: break-word;
}
.opening-drawer-vessel-dest {
    font-size: .82rem;
}
.opening-drawer-vessel-meta {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: .82rem;
}
.opening-drawer-vessels-note {
    margin: .35rem 0 0;
    font-size: .78rem;
}
.opening-drawer-map {
    height: 200px;
    margin-top: .6rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    z-index: 0;
}
.opening-drawer-map .leaflet-container {
    height: 100%;
    width: 100%;
    background: var(--color-surface-2, #e9edf0);
}
.opening-drawer-map-legend {
    display: flex;
    gap: 1rem;
    margin-top: .4rem;
    font-size: .78rem;
}
.opening-drawer-map-legend > span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.opening-drawer-map-legend .ovl-sail {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 11px solid #0092d0;
}
.opening-drawer-map-legend .ovl-moor {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6b7785;
    border: 1.5px solid #fff;
}
@media (prefers-reduced-motion: reduce) {
    .opening-drawer-map .leaflet-container,
    .opening-drawer-map .leaflet-zoom-animated {
        transition: none !important;
    }
}
@keyframes opening-drawer-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes opening-drawer-slide {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
@media (max-width: 575.98px) {
    .opening-drawer {
        width: 100%;
    }
}

/* ── NDW-meetpunt-kiezer modal (gedeeld door objectdetail en objectbeheer) ── */
.ndw-pick-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1600;
}

.ndw-pick-modal {
    position: fixed;
    z-index: 1601;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(900px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background: var(--color-surface, #fff);
    color: var(--color-text, #1c2a36);
    border: 1px solid var(--color-border, #e2dcd3);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}

.ndw-pick-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--color-border, #e2dcd3);
}

.ndw-pick-modal__body {
    padding: 1.1rem;
}

/* NavModuleItem component */
.nav-module-item { list-style: none; }

.nav-link-module {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .38rem .75rem;
    background: none;
    border: none;
    text-align: left;
    color: var(--color-sidebar-text, rgba(255,255,255,.85));
    font-size: .82rem;
    line-height: 1.3;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.nav-link-module:hover {
    background: rgba(255,255,255,.07);
    color: var(--color-sidebar-text, rgba(255,255,255,.92));
}

[data-theme="light"] .nav-link-module { color: var(--color-sidebar-text, var(--dsb-ink, #0E1620)); }
[data-theme="light"] .nav-link-module:hover { background: rgba(14,22,32,.07); }

.nav-module-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    opacity: .75;
}

.nav-module-text { flex: 1 1 0; min-width: 0; }
.nav-module-title { display: block; font-weight: 500; }
.nav-module-subtitle {
    display: block;
    font-size: .73rem;
    opacity: .65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Unavailable state */
.nav-module-unavailable .nav-link-module {
    cursor: not-allowed;
    opacity: .55;
}
.nav-module-unavailable .nav-link-module:hover {
    background: none;
}

/* Trial state */
.nav-module-trial .nav-link-module {
    border-left: 2px solid color-mix(in srgb, var(--dsb-orange-500, #DA5612) 40%, transparent);
}
[data-theme="dark"] .nav-module-trial .nav-link-module {
    background: linear-gradient(90deg, rgba(240,138,74,.1) 0%, transparent 100%);
}
[data-theme="light"] .nav-module-trial .nav-link-module {
    background: linear-gradient(90deg, rgba(218,86,18,.07) 0%, transparent 100%);
}

/* =============================================
   PRINT
   Navigatie en interactieve elementen verbergen;
   alleen rapportage-content tonen.
   ============================================= */
@media print {
    @page { margin: 18mm 15mm; }

    /* Verberg navigatie- en interactie-elementen */
    .topbar,
    .sidebar,
    .pwa-bottom-nav,
    .live-ticker-bar,
    .install-app-banner,
    .network-offline-indicator,
    .page-header-actions,
    .table-enhancer-toolbar,
    .filter-chip-group,
    .btn-group,
    .dropdown,
    .dropdown-menu,
    .modal,
    .modal-backdrop,
    .tour-overlay,
    .install-overlay,
    .no-print {
        display: none !important;
    }

    body, .main-content, .page-content {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt;
    }

    .dsb-card, .card, .melding-card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        background: #fff !important;
    }

    .main-content, .page-content {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Sidebar margin-left weghalen bij afdrukken */
    body.sidebar-open .content-area,
    .content-area {
        margin-left: 0 !important;
    }

    /* Statuskleuren afdrukken met werkelijke kleur */
    .badge, .status-badge, .status-dot, .alert {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    tr { page-break-inside: avoid; }
    thead { display: table-header-group; }
    h1, h2, h3, h4 { page-break-after: avoid; }
    .apexcharts-canvas, .chart-container { page-break-inside: avoid; }
    .card { break-inside: avoid; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}