/* ==========================================================================
   Thema "Centri Light"
   Lichte blauwgrijze zijbalk, wit werkvlak in een blauwgrijs kader,
   oranje accentlijn, grijze tabelkoppen, groene/blauwe rijmarkering
   en gekleurde tegels.

   Dit bestand wordt alleen geladen als in Beheer → Instellingen → Weergave
   het thema "Centri Light" is gekozen (App.razor). Alle regels staan bovendien
   onder html[data-theme="centri-light"], zodat de klassieke stijl nooit geraakt wordt.
   Terugdraaien = thema op "Klassiek" zetten (of dit bestand verwijderen).
   Kleuren staan als variabelen hieronder; de donkere variant (onderaan) zet ze opnieuw.
   ========================================================================== */

html[data-theme="centri-light"] {
    /* Centri Light-palet */
    --cl-frame: #c9d4e0;          /* kader rond het werkvlak */
    --cl-sidebar: #dde4ec;        /* zijbalk */
    --cl-sidebar-hover: #c8d3df;
    --cl-menu-header: #2f5f8f;    /* "Menu"-balk */
    --cl-orange: #e8590c;         /* accentlijn, actieve tab */
    --cl-orange-dark: #c2410c;
    /* Zacht blauw, afgeleid van de "Menu"-balk en de rijselectie */
    --cl-blue: #3f72a8;           /* knoppen, links, vinkjes */
    --cl-blue-dark: #2f5f8f;      /* hover/actief */
    --cl-blue-darker: #284f78;    /* ingedrukt */
    --cl-blue-soft: #e3ebf4;      /* lichte achtergrond (actief menu-item, dropdown) */
    --cl-blue-border: #b7cbe0;    /* lichte rand */
    --cl-blue-focus: #9fb9d4;     /* rand van een veld met focus */
    --cl-blue-text: #1f3d5c;      /* tekst op lichtblauw */
    --cl-info: #a9c4e2;           /* "info"-kleur (badges), met donkere tekst */
    --cl-select: #4a7fb5;         /* geselecteerde rij */
    --cl-green: #8fd16b;          /* gemarkeerde rij */
    --cl-green-soft: #e3f4d8;     /* hover op rij */
    --cl-green-text: #1f7a1f;
    --cl-red: #c8102e;
    --cl-teal: #0b6b5a;
    --cl-amber: #d98a00;
    --cl-grid-header: #6f7378;    /* tabelkop */
    --cl-border: #d5dbe2;
    --cl-text: #1f2a37;
    --cl-muted: #5f6b78;
    /* Vlakken en randen (in het donkere thema hieronder opnieuw gezet) */
    --cl-surface: #ffffff;          /* werkvlak, bovenbalk, actieve tab */
    --cl-surface-alt: #f4f6f8;      /* werkbalkknoppen */
    --cl-surface-hover: #e4eaf0;
    --cl-surface-active: #d6dee7;
    --cl-panel-border: #b9c5d2;     /* rand rond werkvlak en zijbalk */
    --cl-section-border: #bfcad6;   /* lijn onder menukopjes */
    --cl-control-border: #b9c3cf;   /* invoervelden */
    --cl-btn-border: #c3ccd6;
    --cl-btn-border-hover: #aab6c3;
    --cl-tab: #a9b4bf;              /* inactieve tab */
    --cl-tab-hover: #bec7d0;
    --cl-tab-border: #98a4b0;
    --cl-grid-header-border: #5d6166;
    --cl-row-border: #e3e7ec;
    --cl-striped: #f5f7f9;
    --cl-grid-header-weekend: #5a5e63; /* weekend in de tabelkop: iets donkerder grijs */
    --cl-weekend: rgba(31, 42, 55, 0.05); /* laag over weekendcellen */
    --cl-card-header: #f1f4f7;

    /* Bootstrap-variabelen */
    --bs-body-font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --bs-body-color: var(--cl-text);
    --bs-body-bg: var(--cl-surface);
    --bs-blue: var(--cl-blue);
    --bs-primary: var(--cl-blue);
    --bs-primary-rgb: 63, 114, 168;
    --bs-primary-text-emphasis: var(--cl-blue-text);
    --bs-primary-bg-subtle: var(--cl-blue-soft);
    --bs-primary-border-subtle: var(--cl-blue-border);
    --bs-info: var(--cl-info);
    --bs-info-rgb: 169, 196, 226;
    --bs-cyan: var(--cl-info);
    --bs-link-color: var(--cl-blue);
    --bs-link-color-rgb: 63, 114, 168;
    --bs-link-hover-color: var(--cl-blue-dark);
    --bs-link-hover-color-rgb: 47, 95, 143;
    --bs-focus-ring-color: rgba(63, 114, 168, 0.3);
    --bs-border-color: var(--cl-border);
    --bs-border-radius: 0.2rem;
    --bs-border-radius-sm: 0.15rem;
    --bs-border-radius-lg: 0.25rem;
}

html[data-theme="centri-light"] body {
    font-family: var(--bs-body-font-family);
    font-size: 0.9rem;
    color: var(--cl-text);
    background-color: var(--cl-frame);
}

html[data-theme="centri-light"] a,
html[data-theme="centri-light"] .btn-link {
    color: var(--cl-blue);
}

/* ---------- Zijbalk (back-office) ---------- */

html[data-theme="centri-light"] .sidebar {
    background-image: none;
    background-color: var(--cl-sidebar);
    border-right: 1px solid var(--cl-panel-border);
}

/* Kop van de zijbalk: blauwe "Menu"-balk */
html[data-theme="centri-light"] .sidebar .top-row {
    background-color: var(--cl-menu-header);
    min-height: 3.5rem;
}

html[data-theme="centri-light"] .sidebar .navbar-brand {
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
}

html[data-theme="centri-light"] .sidebar .nav-section {
    color: var(--cl-text);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.9rem 1.25rem 0.35rem;
    margin: 0 0.75rem 0.25rem;
    border-bottom: 1px solid var(--cl-section-border);
}

html[data-theme="centri-light"] .sidebar .nav-item {
    padding-bottom: 0.15rem;
}

html[data-theme="centri-light"] .sidebar .nav-item .nav-link {
    color: var(--cl-text);
    height: 2.25rem;
    line-height: 2.25rem;
    border-radius: 2px;
    border-left: 3px solid transparent;
}

html[data-theme="centri-light"] .sidebar .nav-item .nav-link:hover {
    background-color: var(--cl-sidebar-hover);
    color: var(--cl-text);
}

html[data-theme="centri-light"] .sidebar .nav-item a.active {
    background-color: var(--cl-surface);
    color: var(--cl-text);
    font-weight: 600;
    border-left-color: var(--cl-orange);
}

/* Menu-iconen in oranjerood (het pijltje "nieuw tabblad" blijft in de tekstkleur) */
html[data-theme="centri-light"] .sidebar .nav-item .bi:not(.nav-external) {
    color: var(--cl-orange);
}

/* Buildversie onderaan het menu. De standaardkleur (wit, 45%) is op de lichte zijbalk
   onleesbaar (contrast 1,1:1). Gedempte tekst met 15% tekstkleur erdoor haalt 4,9:1 op de
   lichte en 7,8:1 op de donkere zijbalk; color-mix volgt beide varianten vanzelf. */
html[data-theme="centri-light"] .sidebar .build-info {
    color: var(--cl-muted);
    color: color-mix(in srgb, var(--cl-muted) 85%, var(--cl-text));
}

/* ---------- Bovenbalk (back-office) ---------- */

html[data-theme="centri-light"] main {
    background-color: var(--cl-frame);
}

html[data-theme="centri-light"] main > .top-row {
    background-color: var(--cl-surface);
    color: var(--cl-text);
    border-bottom: 3px solid var(--cl-orange);
    font-weight: 600;
}

html[data-theme="centri-light"] main > .top-row a,
html[data-theme="centri-light"] main > .top-row .btn-link {
    color: var(--cl-text);
}

html[data-theme="centri-light"] main > .top-row a:hover,
html[data-theme="centri-light"] main > .top-row .btn-link:hover {
    color: var(--cl-orange-dark);
}

/* ---------- Werkvlak: wit paneel in blauwgrijs kader ---------- */

html[data-theme="centri-light"] main > .content {
    background-color: var(--cl-surface);
    margin: 0.75rem;
    border: 1px solid var(--cl-panel-border);
    min-height: calc(100vh - 3.5rem - 1.5rem);
}

html[data-theme="centri-light"] .content h1,
html[data-theme="centri-light"] .content h2,
html[data-theme="centri-light"] .content h3,
html[data-theme="centri-light"] .content h4,
html[data-theme="centri-light"] .content h5 {
    color: var(--cl-text);
    font-weight: 600;
}

html[data-theme="centri-light"] .content h1 {
    font-size: 1.6rem;
}

/* Icoon vóór de paginatitel: oranjerood, net als in het menu */
html[data-theme="centri-light"] .page-icon {
    color: var(--cl-orange);
}

/* ---------- Knoppen ---------- */

html[data-theme="centri-light"] .btn {
    border-radius: 2px;
}

html[data-theme="centri-light"] .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cl-blue);
    --bs-btn-border-color: var(--cl-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cl-blue-dark);
    --bs-btn-hover-border-color: var(--cl-blue-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cl-blue-darker);
    --bs-btn-active-border-color: var(--cl-blue-darker);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--cl-blue);
    --bs-btn-disabled-border-color: var(--cl-blue);
    --bs-btn-focus-shadow-rgb: 63, 114, 168;
    color: #fff;
    background-color: var(--cl-blue);
    border-color: var(--cl-blue);
}

html[data-theme="centri-light"] .btn-primary:hover {
    background-color: var(--cl-blue-dark);
    border-color: var(--cl-blue-dark);
}

html[data-theme="centri-light"] .btn-primary:active,
html[data-theme="centri-light"] .btn-primary.active {
    background-color: var(--cl-blue-darker);
    border-color: var(--cl-blue-darker);
}

html[data-theme="centri-light"] .btn-outline-primary {
    --bs-btn-color: var(--cl-blue);
    --bs-btn-border-color: var(--cl-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cl-blue);
    --bs-btn-hover-border-color: var(--cl-blue);
    --bs-btn-focus-shadow-rgb: 63, 114, 168;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cl-blue-dark);
    --bs-btn-active-border-color: var(--cl-blue-dark);
    --bs-btn-disabled-color: var(--cl-blue);
    --bs-btn-disabled-border-color: var(--cl-blue);
}

/* "Info"-knoppen: lichtblauw met donkere tekst i.p.v. fel cyaan */
html[data-theme="centri-light"] .btn-info {
    --bs-btn-color: var(--cl-blue-text);
    --bs-btn-bg: var(--cl-info);
    --bs-btn-border-color: var(--cl-info);
    --bs-btn-hover-color: var(--cl-blue-text);
    --bs-btn-hover-bg: #95b5d8;
    --bs-btn-hover-border-color: #95b5d8;
    --bs-btn-active-color: var(--cl-blue-text);
    --bs-btn-active-bg: #86a9cf;
    --bs-btn-active-border-color: #86a9cf;
    --bs-btn-disabled-color: var(--cl-blue-text);
    --bs-btn-disabled-bg: var(--cl-info);
    --bs-btn-disabled-border-color: var(--cl-info);
}

html[data-theme="centri-light"] .btn-outline-info {
    --bs-btn-color: var(--cl-blue);
    --bs-btn-border-color: var(--cl-blue-border);
    --bs-btn-hover-color: var(--cl-blue-text);
    --bs-btn-hover-bg: var(--cl-info);
    --bs-btn-hover-border-color: var(--cl-info);
    --bs-btn-active-color: var(--cl-blue-text);
    --bs-btn-active-bg: var(--cl-info);
    --bs-btn-active-border-color: var(--cl-info);
    --bs-btn-disabled-color: var(--cl-blue);
    --bs-btn-disabled-border-color: var(--cl-blue-border);
}

html[data-theme="centri-light"] .btn-link {
    --bs-btn-color: var(--cl-blue);
    --bs-btn-hover-color: var(--cl-blue-dark);
    --bs-btn-active-color: var(--cl-blue-dark);
}

/* Werkbalk-achtige secundaire knoppen (bijv. "Toevoegen" / "Details") */
html[data-theme="centri-light"] .btn-outline-secondary {
    --bs-btn-color: var(--cl-text);
    --bs-btn-bg: var(--cl-surface-alt);
    --bs-btn-border-color: var(--cl-btn-border);
    --bs-btn-hover-color: var(--cl-text);
    --bs-btn-hover-bg: var(--cl-surface-hover);
    --bs-btn-hover-border-color: var(--cl-btn-border-hover);
    --bs-btn-active-color: var(--cl-text);
    --bs-btn-active-bg: var(--cl-surface-active);
    --bs-btn-active-border-color: var(--cl-btn-border-hover);
}

html[data-theme="centri-light"] .btn:focus,
html[data-theme="centri-light"] .btn:active:focus,
html[data-theme="centri-light"] .form-control:focus,
html[data-theme="centri-light"] .form-select:focus,
html[data-theme="centri-light"] .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--cl-surface), 0 0 0 0.25rem rgba(63, 114, 168, 0.35);
}

/* ---------- Formulieren ---------- */

html[data-theme="centri-light"] .form-control,
html[data-theme="centri-light"] .form-select,
html[data-theme="centri-light"] .input-group-text {
    border-radius: 2px;
    border-color: var(--cl-control-border);
}

html[data-theme="centri-light"] .form-control:focus,
html[data-theme="centri-light"] .form-select:focus,
html[data-theme="centri-light"] .form-check-input:focus {
    border-color: var(--cl-blue-focus);
}

html[data-theme="centri-light"] .form-check-input:checked,
html[data-theme="centri-light"] .form-check-input[type=checkbox]:indeterminate,
html[data-theme="centri-light"] .form-switch .form-check-input:checked {
    background-color: var(--cl-blue);
    border-color: var(--cl-blue);
}

/* Bolletje van een schakelaar met focus: zacht blauw i.p.v. cyaan */
html[data-theme="centri-light"] .form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239fb9d4'/%3e%3c/svg%3e");
}

html[data-theme="centri-light"] .form-range::-webkit-slider-thumb {
    background-color: var(--cl-blue);
}

html[data-theme="centri-light"] .form-range::-moz-range-thumb {
    background-color: var(--cl-blue);
}

/* Apart per browser: een onbekend pseudo-element maakt anders de hele regel ongeldig */
html[data-theme="centri-light"] .form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(63, 114, 168, 0.3);
}

html[data-theme="centri-light"] .form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(63, 114, 168, 0.3);
}

/* ---------- Overige componenten met de primaire kleur ---------- */

html[data-theme="centri-light"] .dropdown-menu {
    --bs-dropdown-link-active-color: var(--cl-blue-text);
    --bs-dropdown-link-active-bg: var(--cl-blue-soft);
}

html[data-theme="centri-light"] .dropdown-menu-dark {
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--cl-blue);
}

html[data-theme="centri-light"] .nav-pills {
    --bs-nav-pills-link-active-color: var(--cl-blue-text);
    --bs-nav-pills-link-active-bg: var(--cl-blue-soft);
}

html[data-theme="centri-light"] .nav-link:focus-visible,
html[data-theme="centri-light"] .btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(63, 114, 168, 0.3);
}

html[data-theme="centri-light"] .pagination {
    --bs-pagination-color: var(--cl-blue);
    --bs-pagination-hover-color: var(--cl-blue-dark);
    --bs-pagination-focus-color: var(--cl-blue-dark);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(63, 114, 168, 0.3);
    --bs-pagination-active-bg: var(--cl-blue);
    --bs-pagination-active-border-color: var(--cl-blue);
    --bs-pagination-border-radius: 2px;
}

html[data-theme="centri-light"] .progress,
html[data-theme="centri-light"] .progress-stacked {
    --bs-progress-bar-bg: var(--cl-blue);
}

html[data-theme="centri-light"] .list-group {
    --bs-list-group-active-bg: var(--cl-blue);
    --bs-list-group-active-border-color: var(--cl-blue);
}

html[data-theme="centri-light"] .accordion {
    --bs-accordion-active-color: var(--cl-blue-text);
    --bs-accordion-active-bg: var(--cl-blue-soft);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(63, 114, 168, 0.3);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231f3d5c' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

html[data-theme="centri-light"] .table-primary {
    --bs-table-bg: var(--cl-blue-soft);
    --bs-table-border-color: var(--cl-blue-border);
}

/* Badges/labels met de info-kleur: lichtblauw met donkere tekst */
html[data-theme="centri-light"] .badge.bg-info,
html[data-theme="centri-light"] .text-bg-info {
    color: var(--cl-blue-text) !important;
}

/* Verbindingsmelding van Blazor (bij wegvallen van de verbinding) */
html[data-theme="centri-light"] #components-reconnect-modal button {
    background-color: var(--cl-blue);
}

html[data-theme="centri-light"] #components-reconnect-modal button:hover {
    background-color: var(--cl-blue-dark);
}

html[data-theme="centri-light"] .components-rejoining-animation div {
    border-color: var(--cl-blue);
}

html[data-theme="centri-light"] .form-label {
    font-weight: 600;
    color: var(--cl-muted);
    font-size: 0.82rem;
}

/* ---------- Tabbladen: grijze tabs, actieve tab wit, oranje lijn ---------- */

html[data-theme="centri-light"] .nav-tabs {
    border-bottom: 2px solid var(--cl-orange);
    gap: 2px;
}

html[data-theme="centri-light"] .nav-tabs .nav-link {
    background-color: var(--cl-tab);
    color: var(--cl-text);
    border: 1px solid var(--cl-tab-border);
    border-bottom: none;
    border-radius: 2px 2px 0 0;
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
}

html[data-theme="centri-light"] .nav-tabs .nav-link:hover {
    background-color: var(--cl-tab-hover);
}

html[data-theme="centri-light"] .nav-tabs .nav-link.active {
    background-color: var(--cl-surface);
    color: var(--cl-text);
    border-color: var(--cl-orange) var(--cl-orange) var(--cl-surface);
    border-top-width: 2px;
}

/* ---------- Tabellen (grids) ---------- */

html[data-theme="centri-light"] .table {
    --bs-table-hover-bg: var(--cl-green-soft);
    --bs-table-striped-bg: var(--cl-striped);
    font-size: 0.85rem;
    border: 1px solid var(--cl-border);
}

html[data-theme="centri-light"] .table > thead > tr > th,
html[data-theme="centri-light"] .table > thead > tr > td {
    background-color: var(--cl-grid-header);
    color: #ffffff;
    font-weight: 600;
    border-color: var(--cl-grid-header-border);
    white-space: nowrap;
}

/* Vandaag: oranje kop (anders wint de grijze tabelkop hierboven) */
html[data-theme="centri-light"] .table > thead > tr > th.is-today {
    background-color: var(--cl-orange);
    border-color: var(--cl-orange-dark);
}

html[data-theme="centri-light"] .table > thead a {
    color: #ffffff;
}

/* Gedempte tekst in de donkere tabelkop: lichtgrijs i.p.v. donkergrijs, anders onleesbaar */
html[data-theme="centri-light"] .table > thead .text-muted,
html[data-theme="centri-light"] .table > thead .text-secondary,
html[data-theme="centri-light"] .table > thead .text-body-secondary {
    color: rgba(255, 255, 255, 0.82) !important;
}

/* Weekend: kop iets donkerder grijs (witte tekst blijft leesbaar), cellen een lichte laag */
html[data-theme="centri-light"] .table > thead > tr > th.is-weekend:not(.is-today) {
    background-color: var(--cl-grid-header-weekend);
}

html[data-theme="centri-light"] .table > tfoot > tr > td.is-weekend {
    background-color: transparent;
    background-image: linear-gradient(var(--cl-weekend), var(--cl-weekend));
}

html[data-theme="centri-light"] .table > tbody > tr > td.is-weekend {
    background-image: linear-gradient(var(--cl-weekend), var(--cl-weekend));
}

html[data-theme="centri-light"] .table > tbody > tr > td,
html[data-theme="centri-light"] .table > tbody > tr > th {
    border-color: var(--cl-row-border);
}

html[data-theme="centri-light"] .table > tbody > tr:hover > * {
    background-color: var(--cl-green-soft);
}

/* Gemarkeerde rij (groen) en geselecteerde rij (blauw) */
html[data-theme="centri-light"] .table-success,
html[data-theme="centri-light"] .table > tbody > tr.table-success > * {
    --bs-table-bg: var(--cl-green);
    --bs-table-color: var(--cl-text);
    /* Bootstrap legt de hoverkleur als box-shadow over de cel; zo blijft de markering zichtbaar */
    --bs-table-bg-state: var(--cl-green);
    --bs-table-color-state: var(--cl-text);
    background-color: var(--cl-green);
}

html[data-theme="centri-light"] .table-active,
html[data-theme="centri-light"] .table > tbody > tr.table-active > *,
html[data-theme="centri-light"] .table-primary,
html[data-theme="centri-light"] .table > tbody > tr.table-primary > * {
    --bs-table-bg: var(--cl-select);
    --bs-table-color: #fff;
    /* Ook bij hover blauw houden: anders legt Bootstrap groen over de cel en valt de witte tekst weg */
    --bs-table-bg-state: var(--cl-select);
    --bs-table-color-state: #fff;
    background-color: var(--cl-select);
    color: #fff;
}

html[data-theme="centri-light"] .table > tbody > tr.table-active a,
html[data-theme="centri-light"] .table > tbody > tr.table-primary a {
    color: #fff;
}

/* ---------- Kaarten en dashboardtegels ---------- */

html[data-theme="centri-light"] .card {
    border-radius: 2px;
    border-color: var(--cl-border);
    box-shadow: 0 1px 2px rgba(31, 42, 55, 0.06);
}

html[data-theme="centri-light"] .card-header {
    background-color: var(--cl-card-header);
    font-weight: 600;
}

/* Tegels (StatCard): groot gekleurd getal */
html[data-theme="centri-light"] .stat-card .card-body {
    padding: 1.4rem 1.5rem;
}

html[data-theme="centri-light"] .stat-card .stat-card__value,
html[data-theme="centri-light"] .stat-card .stat-card__value a {
    font-weight: 700;
}

html[data-theme="centri-light"] .stat-card .stat-card__title {
    color: var(--cl-text);
    font-size: 0.85rem;
}

/* Elke tegel een eigen kleur, op volgorde: groen, rood, blauw, oranje, groenblauw */
html[data-theme="centri-light"] .stat-tile:nth-child(5n+1) .stat-card__value,
html[data-theme="centri-light"] .stat-tile:nth-child(5n+1) .stat-card__value a { color: var(--cl-green-text); }
html[data-theme="centri-light"] .stat-tile:nth-child(5n+2) .stat-card__value,
html[data-theme="centri-light"] .stat-tile:nth-child(5n+2) .stat-card__value a { color: var(--cl-red); }
html[data-theme="centri-light"] .stat-tile:nth-child(5n+3) .stat-card__value,
html[data-theme="centri-light"] .stat-tile:nth-child(5n+3) .stat-card__value a { color: var(--cl-blue); }
html[data-theme="centri-light"] .stat-tile:nth-child(5n+4) .stat-card__value,
html[data-theme="centri-light"] .stat-tile:nth-child(5n+4) .stat-card__value a { color: var(--cl-amber); }
html[data-theme="centri-light"] .stat-tile:nth-child(5n+5) .stat-card__value,
html[data-theme="centri-light"] .stat-tile:nth-child(5n+5) .stat-card__value a { color: var(--cl-teal); }

/* Waarschuwing en "goed nieuws" blijven herkenbaar */
html[data-theme="centri-light"] .stat-card.border-warning {
    border-color: var(--cl-orange) !important;
    border-left-width: 4px;
}

html[data-theme="centri-light"] .stat-card.border-success {
    border-left: 4px solid var(--cl-green-text) !important;
}

html[data-theme="centri-light"] .stat-tile .stat-card.border-success .stat-card__value,
html[data-theme="centri-light"] .stat-tile .stat-card.border-success .stat-card__value a {
    color: var(--cl-green-text);
}

/* ---------- Badges en meldingen ---------- */

html[data-theme="centri-light"] .badge {
    border-radius: 2px;
}

html[data-theme="centri-light"] .alert {
    border-radius: 2px;
}

/* ---------- Relatieportaal ---------- */

/* Bovenbalk: wit met oranje lijn en donkere tekst, net als de bovenbalk van de back-office */
html[data-theme="centri-light"] .portal-topbar {
    --bs-navbar-color: var(--cl-text);
    --bs-navbar-hover-color: var(--cl-orange-dark);
    --bs-navbar-active-color: var(--cl-text);
    --bs-navbar-brand-color: var(--cl-text);
    --bs-navbar-brand-hover-color: var(--cl-text);
    background-color: var(--cl-surface);
    border-bottom: 3px solid var(--cl-orange);
    color: var(--cl-text);
}

html[data-theme="centri-light"] .portal-topbar .navbar-text {
    color: var(--cl-text);
    font-weight: 600;
}

/* Actieve pagina: oranje onderstreping, zoals de actieve tab */
html[data-theme="centri-light"] .portal-topbar .nav-link.active {
    box-shadow: inset 0 -3px 0 var(--cl-orange);
}

/* Lichte knoppen (Wachtwoord / Uitloggen) zijn onzichtbaar op wit: als werkbalkknop tonen */
html[data-theme="centri-light"] .portal-topbar .btn-outline-light {
    --bs-btn-color: var(--cl-text);
    --bs-btn-bg: var(--cl-surface-alt);
    --bs-btn-border-color: var(--cl-btn-border);
    --bs-btn-hover-color: var(--cl-text);
    --bs-btn-hover-bg: var(--cl-surface-hover);
    --bs-btn-hover-border-color: var(--cl-btn-border-hover);
    --bs-btn-active-color: var(--cl-text);
    --bs-btn-active-bg: var(--cl-surface-active);
    --bs-btn-active-border-color: var(--cl-btn-border-hover);
}

/* Alleen het werkvlak van het portaal (PortalLayout); niet de accountpagina's */
html[data-theme="centri-light"] main.container {
    background-color: var(--cl-surface);
    border: 1px solid var(--cl-panel-border);
    padding-top: 1.5rem;
}

/* ---------- Accountpagina's (AccountLayout): kader, blauwe merkbalk, oranje accent ---------- */

html[data-theme="centri-light"] .auth {
    --auth-bg: var(--cl-frame);
    --auth-brand-bg: var(--cl-menu-header);
    --auth-brand-accent: rgba(255, 255, 255, 0.16);
    --auth-mark-bg: var(--cl-orange);
    --auth-mark-color: #ffffff;
    --auth-radius: 3px;
}

html[data-theme="centri-light"] .auth__brand {
    border-right: 4px solid var(--cl-orange);
}

@media (max-width: 767.98px) {
    html[data-theme="centri-light"] .auth__brand {
        border-right: 0;
        border-bottom: 3px solid var(--cl-orange);
    }
}

html[data-theme="centri-light"] .auth__footer {
    color: var(--cl-muted);
}

/* ---------- Inlogpagina ---------- */

html[data-theme="centri-light"] .login {
    --login-navy: var(--cl-blue);
    --login-navy-dark: var(--cl-menu-header);
    --login-navy-soft: rgba(63, 114, 168, 0.08);
    --login-focus: rgba(63, 114, 168, 0.25);
    --login-text: var(--cl-text);
    --login-radius: 2px;
}

html[data-theme="centri-light"] .login__submit {
    background: var(--cl-orange);
}

html[data-theme="centri-light"] .login__submit:hover {
    filter: none;
    background: var(--cl-orange-dark);
}

/* ==========================================================================
   Centri Light – donker (knop maan/zon in de bovenbalk, data-bs-theme="dark")
   Zelfde opbouw en oranje accent; alleen de kleuren van vlakken, tekst en randen wisselen.
   Ook de Bootstrap-variabelen opnieuw zetten: die van Centri Light (hierboven) zijn
   specifieker dan die van Bootstrap voor [data-bs-theme=dark].
   ========================================================================== */

html[data-theme="centri-light"][data-bs-theme="dark"] {
    --cl-frame: #0f141a;
    --cl-sidebar: #161d26;
    --cl-sidebar-hover: #222c38;
    --cl-menu-header: #1c3550;
    --cl-orange: #f06d22;
    --cl-orange-dark: #ff8a47;      /* hover: lichter i.p.v. donkerder op een donkere ondergrond */
    --cl-blue: #4f86c0;
    --cl-blue-dark: #5f95cf;
    --cl-blue-darker: #3f72a8;
    --cl-blue-soft: #1d2a3a;
    --cl-blue-border: #34506f;
    --cl-blue-focus: #4f74a0;
    --cl-blue-text: #cfe0f3;
    --cl-info: #2f4a68;
    --cl-select: #2f5f8f;
    --cl-green: #2c5424;
    --cl-green-soft: rgba(143, 209, 107, 0.10);
    --cl-green-text: #7fcf7f;
    --cl-red: #ff7676;
    --cl-teal: #4fc3a8;
    --cl-amber: #f0b44c;
    --cl-grid-header: #2a3139;
    --cl-border: #2c3642;
    --cl-text: #e4e9ef;
    --cl-muted: #9aa7b4;

    --cl-surface: #1a2028;
    --cl-surface-alt: #222a34;
    --cl-surface-hover: #2a3440;
    --cl-surface-active: #334050;
    --cl-panel-border: #2c3642;
    --cl-section-border: #2c3642;
    --cl-control-border: #3a4656;
    --cl-btn-border: #3a4656;
    --cl-btn-border-hover: #4a5868;
    --cl-tab: #2a333e;
    --cl-tab-hover: #34404d;
    --cl-tab-border: #3a4656;
    --cl-grid-header-border: #1e242b;
    --cl-row-border: #2a333e;
    --cl-striped: #1e252e;
    --cl-grid-header-weekend: #1f252c;
    --cl-weekend: rgba(255, 255, 255, 0.04);
    --cl-card-header: #212933;

    --bs-body-color: var(--cl-text);
    --bs-body-bg: var(--cl-surface);
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: var(--cl-muted);
    --bs-tertiary-bg: var(--cl-surface-alt);
    --bs-border-color: var(--cl-border);
    --bs-primary: var(--cl-blue);
    --bs-primary-rgb: 79, 134, 192;
    --bs-primary-text-emphasis: var(--cl-blue-text);
    --bs-primary-bg-subtle: var(--cl-blue-soft);
    --bs-primary-border-subtle: var(--cl-blue-border);
    --bs-info: var(--cl-info);
    --bs-info-rgb: 47, 74, 104;
    --bs-link-color: #7fb0e3;
    --bs-link-color-rgb: 127, 176, 227;
    --bs-link-hover-color: #a6c9ee;
    --bs-link-hover-color-rgb: 166, 201, 238;
    --bs-focus-ring-color: rgba(79, 134, 192, 0.4);
    color-scheme: dark;
}

/* Gewone tekstlinks (zonder klasse, dus geen knoppen of menu-items) iets lichter, voor genoeg contrast op donker */
html[data-theme="centri-light"][data-bs-theme="dark"] .content a:not([class]),
html[data-theme="centri-light"][data-bs-theme="dark"] main.container a:not([class]),
html[data-theme="centri-light"][data-bs-theme="dark"] .btn-link {
    color: var(--bs-link-color);
}

/* Bovenbalk-links blijven in de tekstkleur */
html[data-theme="centri-light"][data-bs-theme="dark"] main > .top-row a,
html[data-theme="centri-light"][data-bs-theme="dark"] main > .top-row .btn-link {
    color: var(--cl-text);
}

html[data-theme="centri-light"][data-bs-theme="dark"] .card {
    box-shadow: none;
}

/* Gemarkeerde rij (donkergroen) met lichte tekst */
html[data-theme="centri-light"][data-bs-theme="dark"] .table-success,
html[data-theme="centri-light"][data-bs-theme="dark"] .table > tbody > tr.table-success > * {
    --bs-table-color: var(--cl-text);
    color: var(--cl-text);
}

/* Links in een gemarkeerde of geselecteerde rij: niet blauw op groen/blauw */
html[data-theme="centri-light"][data-bs-theme="dark"] .content .table > tbody > tr.table-success a,
html[data-theme="centri-light"][data-bs-theme="dark"] main.container .table > tbody > tr.table-success a {
    color: var(--cl-text);
}

html[data-theme="centri-light"][data-bs-theme="dark"] .content .table > tbody > tr.table-active a,
html[data-theme="centri-light"][data-bs-theme="dark"] .content .table > tbody > tr.table-primary a,
html[data-theme="centri-light"][data-bs-theme="dark"] main.container .table > tbody > tr.table-active a,
html[data-theme="centri-light"][data-bs-theme="dark"] main.container .table > tbody > tr.table-primary a {
    color: #ffffff;
}