/* ============================================================================
   X Modern — selectable theme overlay  (v9.16 — popup detail view: moderne kaart-layout)
   File: wwwroot/css/ProfixModern/profix-modern.css
   Selectors gematcht op de echte DevExpress-DOM (via DevTools-snippets).

   Instelbaar via attributen op <html> (gezet door js/profix-theme.js):
     data-pfx-theme   = "light" | "dark"
     data-pfx-accent  = "orange" | "blue" | "green" | "purple" | "teal"
     data-pfx-density = "normal" | "compact"
   ============================================================================ */

/* 1. Base theme + font ------------------------------------------------------- */
@import url('/_content/DevExpress.Blazor.Themes/office-white.bs5.min.css');
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap');

:root {
    /* Instelbaar via settings-paneel (profix-theme.js zet --pfx-font op <html>) */
    --pfx-font: 'Figtree', 'Segoe UI', system-ui, sans-serif;
}

/* 2. Tokens + framework variables ------------------------------------------- */
:root {
    /* Vaste merk-kleuren */
    --pfx-navy:      #17406B;
    --pfx-navy-deep: #0F2E4D;

    /* Accent (preset: orange). Wordt overschreven door data-pfx-accent. */
    --pfx-accent:       #E8791E;
    --pfx-accent-hover: #d76c14;
    --pfx-accent-rgb:   232, 121, 30;
    /* Backwards-compat alias — oudere regels gebruiken --pfx-orange */
    --pfx-orange:       var(--pfx-accent);

    /* Oppervlakken & tekst (licht) */
    --pfx-surface:   #FFFFFF;   /* kaarten, header, toolbar, grid */
    --pfx-surface-2: #FBFCFE;   /* sidebar */
    --pfx-surface-3: #F7F9FC;   /* grid-header, chips */
    --pfx-hover:     #F6F8FB;   /* hover-vlakken */
    --pfx-ink:       #1C2A38;
    --pfx-text:      #1C2A38;   /* gegevens in lijsten; in licht gelijk aan ink */
    --pfx-muted:     #64748B;
    --pfx-text-soft: #5A6675;
    --pfx-label:     #8A96A5;
    --pfx-nav-text:  #475569;
    --pfx-line:      #E3E8EF;
    --pfx-line-soft: #EEF2F6;
    --pfx-card-line: #E7ECF3;
    --pfx-canvas:    #EDEFF2;   /* RGB 237 239 242 — basis-achtergrond overal */
    --pfx-active:    #EAF1F8;
    --pfx-heading:   var(--pfx-navy);       /* sectielabels, actieve tabs */
    --pfx-heading-deep: var(--pfx-navy-deep);

    /* Dichtheid (preset: normal). Overschreven door data-pfx-density="compact". */
    --pfx-card-gap:     16px;
    --pfx-card-pad:     2px 14px 12px;
    --pfx-cardhead-pad: 10px 2px 6px;
    --pfx-fl-item-pad:  2px;
    --pfx-fl-item-gap:  4px;
    --pfx-fl-gutter-y:  0.5rem;
    --pfx-grid-row-pad: 9px;
    --pfx-toolbar-pad:  9px 18px;
    --pfx-toolbar-h:    46px;
    --pfx-nav-row-pad:  5px;
    --pfx-content-pad:  14px;

    --bs-primary: var(--pfx-accent);
    --bs-primary-rgb: var(--pfx-accent-rgb);
    --bs-link-color: #17406B;
    --bs-link-color-rgb: 23, 64, 107;
    --bs-link-hover-color: var(--pfx-accent);
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 14px;
    --bs-body-font-family: var(--pfx-font);

    --dxbl-btn-primary-bg: var(--pfx-accent);
    --dxbl-btn-primary-border-color: var(--pfx-accent);
    --dxbl-btn-primary-hover-bg: var(--pfx-accent-hover);
    --dxbl-btn-primary-hover-border-color: var(--pfx-accent-hover);
    --dxbl-border-radius: 10px;
}

/* 2a. Accent-presets (à la DevExpress Fluent) -------------------------------- */
html[data-pfx-accent="blue"] {
    --pfx-accent: #2F6FED; --pfx-accent-hover: #245CD0; --pfx-accent-rgb: 47, 111, 237;
}
html[data-pfx-accent="green"] {
    --pfx-accent: #2E9E6B; --pfx-accent-hover: #268A5C; --pfx-accent-rgb: 46, 158, 107;
}
html[data-pfx-accent="purple"] {
    --pfx-accent: #7C5CD6; --pfx-accent-hover: #6A4BC2; --pfx-accent-rgb: 124, 92, 214;
}
html[data-pfx-accent="teal"] {
    --pfx-accent: #14919B; --pfx-accent-hover: #0F7E87; --pfx-accent-rgb: 20, 145, 155;
}

/* 2b. Compacte dichtheid ------------------------------------------------------ */
html[data-pfx-density="compact"] {
    --pfx-card-gap:     10px;
    --pfx-card-pad:     2px 12px 8px;
    --pfx-cardhead-pad: 8px 2px 4px;
    --pfx-fl-item-pad:  1px;
    --pfx-fl-item-gap:  2px;
    --pfx-fl-gutter-y:  0.25rem;
    --pfx-grid-row-pad: 6px;
    --pfx-toolbar-pad:  6px 18px;
    --pfx-toolbar-h:    40px;
    --pfx-nav-row-pad:  3px;
    --pfx-content-pad:  10px;
}

/* 2c. Dark mode ---------------------------------------------------------------
   Overschrijft de oppervlak-/teksttokens; alle regels hieronder gebruiken die
   tokens, dus het grootste deel volgt vanzelf. Extra DX-specifieke overrides
   staan in sectie 11. */
html[data-pfx-theme="dark"] {
    color-scheme: dark;
    --pfx-surface:   #1E2733;
    --pfx-surface-2: #19212C;
    --pfx-surface-3: #253040;
    /* Duidelijk lichter dan surface (#1E2733) én dan invoervelden (surface-3): met #26313F was de hover
       in lijsten, filtermenu's en grids nauwelijks te zien. */
    --pfx-hover:     #303D51;
    --pfx-ink:       #E3E9F1;
    /* Gegevens in lijsten: zachter dan ink (±9:1 i.p.v. 12:1). Een volle lijst in bijna-wit was
       te fel; koppen en titels houden ink en daarmee hun nadruk. */
    --pfx-text:      #BEC7D2;
    --pfx-muted:     #93A1B3;
    --pfx-text-soft: #A7B4C4;
    --pfx-label:     #8494A8;
    --pfx-nav-text:  #B4C0CF;
    /* Iets lichter dan de kaartrand: invoervelden moeten zich van de kaart eronder onderscheiden,
       met #2B3646 vielen ze er nagenoeg in weg. */
    --pfx-line:      #3A475B;
    --pfx-line-soft: #26303E;
    --pfx-card-line: #2B3646;
    --pfx-canvas:    #141B24;
    --pfx-active:    #22354B;
    --pfx-heading:   #8FB8E4;
    --pfx-heading-deep: #C9DCF0;

    --bs-body-bg: #141B24;
    --bs-body-color: #E3E9F1;
    --bs-link-color: #8FB8E4;
    --bs-link-color-rgb: 143, 184, 228;
    /* profix-theme.js zet ook data-bs-theme="dark", zodat de dark-variant van Bootstrap in
       office-white actief wordt (selects, sluitknopjes, formuliervelden). Die gebruikt eigen grijzen;
       hier op ons palet gezet. html[...] wint van [data-bs-theme=dark]. */
    --bs-emphasis-color: #F3F6FA;
    --bs-secondary-color: rgba(227, 233, 241, .72);
    --bs-tertiary-color: rgba(227, 233, 241, .5);
    --bs-secondary-bg: var(--pfx-surface-3);
    --bs-tertiary-bg: var(--pfx-surface-2);
    --bs-border-color: var(--pfx-line);

    /* Variabelen die eigen componenten gebruiken alsof het DevExpress-variabelen zijn, maar die
       office-white niet definieert (--dxbl-input-bg, --dxbl-body-bg, ...) of alleen bínnen een
       DevExpress-component (--dxbl-popup-bg, --dxbl-btn-border-color). Daarbuiten pakt de browser
       altijd de lichte terugvalwaarde uit de regel zelf (#fff e.d.) — zo bleef bv. de omschrijving
       van een werkitem wit. Alleen in dark mode gezet; DevExpress' eigen definities binnen zijn
       componenten liggen dichterbij en blijven dus voorgaan. */
    --dxbl-input-bg: var(--pfx-surface-3);
    --dxbl-border-color: var(--pfx-line);
    --dxbl-body-bg: var(--pfx-surface);
    --dxbl-body-color: var(--pfx-ink);
    --dxbl-gray-100: var(--pfx-surface-3);
    --dxbl-gray-200: rgba(255, 255, 255, .08);
    --dxbl-popup-bg: var(--pfx-surface);
    --dxbl-popup-color: var(--pfx-ink);
    --dxbl-text-muted: var(--pfx-muted);
    --dxbl-text-muted-color: var(--pfx-muted);
    --dxbl-link-color: #8FB8E4;
    --dxbl-btn-border-color: var(--pfx-line);

    /* Alleen-dark-tokens voor plekken die met een lichte terugvalwaarde werken (var(--x, #licht)):
       de verberg-badge van de toolbar-editor (profix-toolbar.js) en de Model Editor
       (--xaf-application-background, nergens anders gedefinieerd). */
    --pfx-danger-tint: rgba(214, 69, 80, .2);
    --pfx-danger-ink: #F08A92;
    --pfx-danger-line: rgba(214, 69, 80, .45);
    --xaf-application-background: var(--pfx-surface);
}

body, .dxbl-blazor {
    font-family: var(--pfx-font);
    color: var(--pfx-ink);
}
/* Form-controls erven het body-font niet vanzelf → Figtree expliciet op inputs,
   knoppen en DevExpress-editortekst. Bewust GEEN *-regel: dat sloopt de icon-fonts. */
input, textarea, select, button,
.dxbl-text-edit-input,
.dxbl-text, .dxbl-btn, .dxbl-edit {
    font-family: var(--pfx-font);
}
/* ALLEEN de ingebedde toolbar-editors (combobox "Tonen", zoekveld) gelijktrekken
   met de toolbar-knoppen. In em, dus gelijk aan de maat die de toolbar zelf heeft
   (--dxbl-toolbar-font-size): 14px op Standaard, 12px op Compact. Stond hier vast op
   14px, en dan bleef het zoekveld groot terwijl de cellen eronder meekrompen. */
.dxbl-toolbar-item-tmpl .dxbl-text-edit-input,
.dxbl-toolbar-item-tmpl input {
    font-size: 1.14em !important;
}
/* Statusfilter op de werkitemlijst (StatusFilterDropDown): breed genoeg voor "Status: 4 van 6". */
.pfx-status-filter {
    width: 11rem;
}
/* Lijsten passend op het scherm (autoPageSize.js): het grid heeft een vaste hoogte. Het scrollgebied is in
   DevExpress' flex-kolom flex-grow:1 maar zonder min-height:0, en krimpt dan niet onder zijn inhoud: kies je
   zelf 50 of All, dan liep het buiten het grid en viel er niets te scrollen. Nu scrollt het binnen het grid
   en blijft de pager onderaan staan. */
[data-pfx-autopage] > .dxbl-scroll-viewer {
    min-height: 0;
}
/* De lijst groeit mee tot alle statussen zichtbaar zijn; pas bij een heel lange lijst een schuifbalk. */
.pfx-status-filter-list {
    height: auto !important;
    max-height: 70vh;
}

/* 3a. Brand-regel: logo | accent-streep | klantnaam --------------------------- */
/* Header-vak boven de sidebar mag meegroeien met lange klantnamen
   (site.css pint dit op --profix-sidebar-width) */
.header .header-left-side {
    width: auto !important;
    min-width: var(--profix-sidebar-width, 260px) !important;
    max-width: none !important;
    flex-shrink: 0;
}
/* DOM (ProfixApplicationWindowTemplateComponent.razor):
   .header-logo-wrapper > .header-logo + span.header-tenant-name */
.header .header-logo-wrapper {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.header .header-logo-wrapper .header-logo {
    flex: 0 0 auto;
}
.header .header-tenant-name {
    display: inline-flex !important;
    align-items: center;
    gap: 14px;
    margin: 0 !important;
    font-size: 14px;
    font-weight: 700;
    color: var(--pfx-heading) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 560px;
}
.header .header-tenant-name::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 24px;
    border-radius: 2px;
    background: var(--pfx-accent);
}

/* 3. Header — light bar ------------------------------------------------------ */
.header.navbar-dark, .header {
    background: var(--pfx-surface) !important;
    border-bottom: 1px solid var(--pfx-line) !important;
    color: var(--pfx-ink) !important;
}
.header .dxbl-btn, .header .dxbl-btn-standalone, .header a, .header .dxbl-text {
    color: var(--pfx-ink) !important;
}
.header .dxbl-btn:hover, .header .dxbl-btn-standalone:hover {
    background: var(--pfx-line-soft) !important; border-radius: 9px;
}
.xaf-detail-view-header {
    background: var(--pfx-surface) !important;
    border-bottom: 1px solid var(--pfx-line) !important;
}
/* Donker: eigen dark-variant van het logo (licht woordmerk, gekleurde X behouden) — in de kopbalk
   én op het inlogscherm. Eerder een filter dat het hele logo egaal lichtgrijs maakte, waardoor de
   merkkleur van de X verdween. Bronnen: images/*-logo-dark.png, gemaakt uit de lichte logo's. */
html[data-pfx-theme="dark"] .header-logo {
    background-image: url('../../images/profix-logo-dark.png');
}
html[data-pfx-theme="dark"] .header-logo.header-logo-brickx {
    background-image: url('../../images/brickx-logo-dark.png');
}
/* XAF's eigen grootte-keuzelijst in het instellingenpaneel. De vlag ShowSizeModeSwitcher
   moet aan staan, want anders leest XafSizeModeService de cookie XAF_SizeMode niet terug
   en is de keuze na een herlaadbeurt weg. De keuzelijst zelf willen we niet: onze eigen
   sectie heeft er een knop "Grootte" voor, naast Dichtheid. Deze klasse hangt alleen aan
   die ene sectie (SettingsComponent.razor). */
.settings-bar .themes-menu-sm {
    display: none !important;
}

/* 4. Sidebar ----------------------------------------------------------------- */
.xaf-sidebar {
    background: var(--pfx-surface-2) !important;
    border-right: 1px solid var(--pfx-line);
    padding: 6px 2px;
}
/* Zoekveld (Filter...) — eigen vlak, zoals ontwerp 2a: wit, rand, radius 9px */
.xaf-sidebar .dxbl-text-edit,
.xaf-sidebar .dxbl-text-box {
    background-color: var(--pfx-surface) !important;
    border: 1px solid var(--pfx-card-line) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    height: 36px;
    margin: 4px 10px 6px;
}
.xaf-sidebar .dxbl-text-edit:focus-within,
.xaf-sidebar .dxbl-text-box:focus-within {
    border-color: var(--pfx-accent) !important;
}
.xaf-sidebar .dxbl-text-edit input,
.xaf-sidebar input {
    background-color: transparent !important;
    color: var(--pfx-ink) !important;
    border: none !important;
    font-size: 13px !important;
}
.xaf-sidebar .dxbl-text-edit input::placeholder,
.xaf-sidebar input::placeholder {
    color: #9AA6B3;
}
/* Zoek-icoon in het veld gedempt grijs */
.xaf-sidebar .dxbl-text-edit :is(svg, .dxbl-image) {
    color: #94A3B8 !important;
    opacity: 0.9;
}
/* Alle accordion-vlakken, randen en lijnen weg — met app-ID zodat dit óók wint
   van DevExpress-regels die na het theme laden */
#main-window-template-component .xaf-sidebar .xaf-navmenu,
#main-window-template-component .xaf-sidebar .xaf-accordion,
#main-window-template-component .xaf-sidebar .dxbl-accordion,
#main-window-template-component .xaf-sidebar dxbl-accordion,
#main-window-template-component .xaf-sidebar .dxbl-accordion-container,
#main-window-template-component .xaf-sidebar .dxbl-accordion-items-container,
#main-window-template-component .xaf-sidebar dxbl-group-control,
#main-window-template-component .xaf-sidebar .dxbl-accordion-item,
#main-window-template-component .xaf-sidebar .dxbl-group-header,
#main-window-template-component .xaf-sidebar .dxbl-accordion-group-header,
#main-window-template-component .xaf-sidebar .dxbl-group-body,
#main-window-template-component .xaf-sidebar .dxbl-accordion-group-body,
#main-window-template-component .xaf-sidebar .dxbl-accordion-item-content,
#main-window-template-component .xaf-sidebar .dxbl-group-header .dxbl-btn-tool {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* DevExpress' zwarte ::before-overlay over elke rij volledig uitschakelen */
#main-window-template-component .xaf-sidebar div::before,
#main-window-template-component .xaf-sidebar div::after {
    content: none !important;
    background: transparent !important;
}
/* Geen link-onderstreping */
.xaf-sidebar a, .xaf-sidebar a:hover,
.xaf-sidebar .xaf-nav-link, .xaf-sidebar .xaf-nav-link span {
    text-decoration: none !important;
}
/* Rijen: afgerond, ruim, chevron rechts */
.xaf-sidebar .dxbl-group-header,
.xaf-sidebar a.dxbl-accordion-item-content {
    border-radius: 9px;
    margin: 1px 6px;
    padding-top: var(--pfx-nav-row-pad);
    padding-bottom: var(--pfx-nav-row-pad);
    display: flex;
    align-items: center;
}
.xaf-sidebar .dxbl-group-header:hover,
.xaf-sidebar a.dxbl-accordion-item-content:hover {
    background: var(--pfx-line-soft) !important;
}
.xaf-sidebar .dxbl-group-expand-btn {
    order: 99;
    margin-left: auto;
    opacity: 0.55;
}
/* Tekstgrootte (override op de 12px uit site.css) */
.xaf-sidebar .dxbl-accordion-item-text-container .dxbl-text,
.xaf-sidebar .xaf-nav-link span {
    font-size: 13px !important;
    color: var(--pfx-nav-text);
}
/* Hoofdgroepen (indent 0) → sectielabels */
.xaf-sidebar dxbl-group-control[data-dx-style="--dxbl-accordion-item-indent:0"] > .dxbl-group-header {
    margin-top: 10px;
    padding: 2px 10px;
    min-height: 24px !important;
}
.xaf-sidebar dxbl-group-control[data-dx-style="--dxbl-accordion-item-indent:0"] > .dxbl-group-header:hover {
    background: transparent !important;
}
.xaf-sidebar dxbl-group-control[data-dx-style="--dxbl-accordion-item-indent:0"] > .dxbl-group-header .xaf-nav-link span {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px !important;
    font-weight: 700;
    color: var(--pfx-heading) !important;
}
.xaf-sidebar dxbl-group-control[data-dx-style="--dxbl-accordion-item-indent:0"] > .dxbl-group-header img.xaf-nav-menu-item-icon {
    display: none;
}
.xaf-sidebar dxbl-group-control[data-dx-style="--dxbl-accordion-item-indent:0"] > .dxbl-group-header .dxbl-group-expand-btn {
    opacity: 0.35;
    transform: scale(0.75);
}
/* Actief item — pill + accent-rand */
.xaf-sidebar a.dxbl-accordion-item-content.dxbl-active,
.xaf-sidebar a[aria-selected="true"] {
    background: var(--pfx-active) !important;
    box-shadow: inset 3px 0 0 var(--pfx-accent) !important;
}
.xaf-sidebar a.dxbl-accordion-item-content.dxbl-active .xaf-nav-link span {
    color: var(--pfx-heading) !important;
    font-weight: 700;
}

/* 5. Toolbar ----------------------------------------------------------------- */
/* Alle acties links: rechtergroep (Refresh, Save, Save and Close) sluit aan
   bij de rest. :has() pakt de auto-marge af van elke container om die knoppen
   heen, waar DevExpress hem ook zet. */
.main-toolbar :is(.dxbl-toolbar, .dxbl-toolbar-content, [role="toolbar"]) {
    justify-content: flex-start !important;
}
/* Op de reorder-eenheid (.dxbl-btn-group) i.p.v. universeel *:has() — dat laatste
   is een van de duurste style-recalc-patronen en werd bij elke DOM-mutatie opnieuw
   geëvalueerd. profix-toolbar.js positioneert deze systeemknoppen bovendien zelf. */
.main-toolbar .dxbl-btn-group:has(> .dxbl-btn[data-action-name="Save"]),
.main-toolbar .dxbl-btn-group:has(> .dxbl-btn[data-action-name="SaveAndClose"]),
.main-toolbar .dxbl-btn-group:has(> .dxbl-btn[data-action-name="Refresh"]),
.main-toolbar .dxbl-btn-group:has(.dxbl-btn[data-action-name="SaveAndClose"]) {
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
}
.main-toolbar :is(.dxbl-toolbar-content, [role="toolbar"]) > *:empty {
    flex-grow: 0 !important;
    display: none !important;
}
.main-toolbar {
    background: var(--pfx-surface);
    border-bottom: 1px solid var(--pfx-line-soft);
    padding: var(--pfx-toolbar-pad);
    /* Vaste balkhoogte, onafhankelijk van of er links acties staan. In kijkmodus
       (alleen kleine icoonknoppen rechts) zakte de balk anders lager dan de
       lijstweergave — de witruimte-klacht. .main-toolbar zelf wordt een flexbox die
       de hoogte afdwingt én de toolbar-inhoud verticaal centreert. */
    min-height: var(--pfx-toolbar-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    /* De balk staat met .main-content (flex:auto, overflow:auto) in één flex-kolom. Zonder dit
       krimpt hij bij een view waarvan de inhoud hoger is dan het venster tot zijn min-height, en
       houdt hij bij korte inhoud zijn natuurlijke hoogte — dus een balk die per tab van hoogte
       wisselt (zichtbaar op het werkitem-projectscherm). De inhoud scrollt zelf, de balk niet. */
    flex-shrink: 0;
}
.main-toolbar > * { flex: 1 1 auto; min-width: 0; }
.main-toolbar :is(.dxbl-toolbar, .dxbl-toolbar-content, [role="toolbar"]) {
    align-items: center !important;
}
.dxbl-toolbar-btn,
.dxbl-toolbar-btn > .dxbl-btn {
    border-radius: 9px !important;
    font-weight: 600;
}
/* Split-knoppen: binnennaad recht houden */
.dxbl-toolbar-btn.dxbl-btn-split > .dxbl-btn:not(.dxbl-btn-split-dropdown) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.dxbl-toolbar-btn.dxbl-btn-split > .dxbl-btn-split-dropdown {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
/* Secondary actions — vlak met lichte rand */
.dxbl-toolbar-btn.dxbl-btn-secondary:not([data-action-name="New"]):not([data-action-name^="Filter"]) {
    background: var(--pfx-surface) !important;
    border: 1px solid var(--pfx-card-line) !important;
    color: var(--pfx-text-soft) !important;
    padding: 6px 13px;
}
.dxbl-toolbar-btn.dxbl-btn-secondary:not([data-action-name="New"]):not([data-action-name^="Filter"]):hover {
    background: var(--pfx-hover) !important;
    border-color: var(--pfx-line) !important;
}
.dxbl-toolbar-item-tmpl {
    display: flex !important;
    align-items: center !important;
}
/* New — zelfde vlakke stijl als de geneste New (bv. Contacts-tab) */
.main-toolbar .dxbl-btn[data-action-name="New"] {
    background: var(--pfx-surface) !important;
    border: 1px solid var(--pfx-card-line) !important;
    color: var(--pfx-ink) !important;
    padding: 6px 16px;
    font-weight: 700;
    box-shadow: none;
}
.main-toolbar .dxbl-btn[data-action-name="New"]:hover {
    background: var(--pfx-hover) !important;
    border-color: var(--pfx-line) !important;
}
/* Save — zelfde vlakke stijl als New (niet 'vol' oranje) */
.main-toolbar .dxbl-btn[data-action-name="Save"],
.main-toolbar .dxbl-btn[data-action-name="SaveAndClose"] {
    background: var(--pfx-surface) !important;
    border: 1px solid var(--pfx-card-line) !important;
    color: var(--pfx-ink) !important;
    padding: 6px 16px;
    font-weight: 700;
    box-shadow: none !important;
}
.main-toolbar .dxbl-btn[data-action-name="Save"]:hover,
.main-toolbar .dxbl-btn[data-action-name="SaveAndClose"]:hover {
    background: var(--pfx-hover) !important;
    border-color: var(--pfx-line) !important;
}
/* Icoon in accentkleur (wit icoon valt anders weg op de witte knop) */
.main-toolbar .dxbl-btn[data-action-name="Save"] :is(svg, span[class*="icon"]),
.main-toolbar .dxbl-btn[data-action-name="SaveAndClose"] :is(svg, span[class*="icon"]) {
    color: var(--pfx-accent) !important;
    fill: var(--pfx-accent) !important;
}
/* Wit/zwart img-icoon → accent-tint via filter (licht thema) */
.main-toolbar .dxbl-btn[data-action-name="Save"] img.xaf-toolbar-item-icon,
.main-toolbar .dxbl-btn[data-action-name="SaveAndClose"] img.xaf-toolbar-item-icon {
    filter: brightness(0) saturate(100%) invert(56%) sepia(61%) saturate(2434%) hue-rotate(357deg) brightness(96%) contrast(89%);
}

/* Filter toggle actions → pill chips */
.main-toolbar .dxbl-btn[data-action-name^="Filter"] {
    border-radius: 999px !important;
    background: var(--pfx-surface-3) !important;
    border-color: transparent !important;
    color: var(--pfx-text-soft) !important;
    padding: 6px 14px;
}
.main-toolbar .dxbl-btn[data-action-name^="Filter"]:hover {
    background: var(--pfx-active) !important;
    color: var(--pfx-heading) !important;
}
.main-toolbar .dxbl-btn[data-action-name^="Filter"][aria-pressed="true"] {
    background: var(--pfx-active) !important;
    box-shadow: inset 0 0 0 1px rgba(23, 64, 107, 0.25);
}
.main-toolbar .dxbl-btn[data-action-name^="Filter"][aria-pressed="true"] span {
    color: var(--pfx-heading) !important;
    font-weight: 700;
}

/* 6. Content canvas + grid card --------------------------------------------- */
#main-view-content { background: var(--pfx-canvas); }
#main-view-content .main-content { background: transparent; padding: var(--pfx-content-pad); }

/* Merk-achtergrond (X-logo, logo-vrij) — vast t.o.v. het venster, rechtsonder.
   Op de app-root zodat de lege startpagina (nog geen #main-view-content) hem over
   de héle pagina toont; header en sidebar hebben hun eigen dekkende achtergrond en
   dekken de X links/boven af. Ook zichtbaar rondom/achter geopende schermen omdat
   #main-view-content .main-content transparant is. Alleen in de lichte modus. */
/* Eén fixed achtergrond-laag (body) i.p.v. vier. background-attachment:fixed dwingt
   per element een herteken bij elke repaint/scroll; op vier grote oppervlakken
   tegelijk gaf dat merkbare jank. De overige oppervlakken worden transparant zodat
   de body-laag (canvas + X) er doorheen blijft; opake vlakken (header, sidebar,
   grid-kaarten) dekken hem af waar nodig. Zelfde beeld, ~75% minder fixed-repaint. */
html:not([data-pfx-theme="dark"]) body {
    background: var(--pfx-canvas) url('../../images/achtergrond.png') no-repeat right bottom / 100% auto fixed;
}
html:not([data-pfx-theme="dark"]) .dxbl-blazor,
html:not([data-pfx-theme="dark"]) .app,
html:not([data-pfx-theme="dark"]) #main-view-content {
    background: transparent;
}

/* De lege startpagina/dashboard-zone is XAF-default markup: classless <div>
   wrappers die office-white hard wit (#FFFFFF/#FBFCFE) schildert bovenop het
   canvas. Die maken we in de lichte modus transparant zodat de #EDEFF2-achtergrond
   + X doorloopt. Alle echte oppervlakken (grid, group-control, popup, header,
   sidebar, toolbar) dragen een class en/of !important en blijven dus ongemoeid.
   Een div die zelf een achtergrond meegeeft (style="background...") is ook geen wrapper maar
   een vlak dat gezien moet worden: kleurvakjes, meldingsbalken, badges. Die slaan we over; anders
   werd de kleurkiezer wit en verdween een rode foutbadge met witte tekst. */
html:not([data-pfx-theme="dark"]) #main-view-content div:not([class]):not([style*="background"]),
html:not([data-pfx-theme="dark"]) .dxbl-blazor > div:not([class]):not([style*="background"]) {
    background: transparent !important;
}

/* Lege MDI-tabzone (dxbl-tabs.xaf-tabbed-mdi) — office-white schildert de
   tab-container en het content-paneel wit; transparant zodat canvas + X doorlopen. */
html:not([data-pfx-theme="dark"]) .xaf-tabbed-mdi,
html:not([data-pfx-theme="dark"]) .xaf-tabbed-mdi .dxbl-tabs-content-panel,
html:not([data-pfx-theme="dark"]) .xaf-tabbed-mdi .dxbl-tabs-tablist {
    background: transparent !important;
}

#main-view-content .dxbl-grid {
    border: 1px solid var(--pfx-card-line) !important;
    border-radius: 12px !important;
    overflow: hidden;
    background: var(--pfx-surface);
    box-shadow: 0 1px 3px rgba(15, 46, 77, 0.06);
}
.dxbl-grid .dxbl-grid-header-row .dxbl-grid-header {
    background: var(--pfx-surface-3) !important;
    border-bottom: 1px solid var(--pfx-card-line) !important;
}
/* De kolomkop is de eerste span in de kop-cel; DevExpress mikt er zelf ook zo op
   (.dxbl-grid-header-content span:first-child krijgt flex-grow). Eerder stond hier
   span[role="presentation"], en dat attribuut komt in de hele Grid-assembly precies
   één keer voor: op de onzichtbare opvulkolom achteraan. Deze opmaak kwam dus nooit
   ergens terecht en de koppen liepen op de DevExpress-maat (12,25px vet) — even groot
   als de gegevens eronder, en daardoor braken koppen als "Work Item Type" over twee
   regels en was de koprij dubbel zo hoog als een datarij. */
.dxbl-grid .dxbl-grid-header-content > span:first-child {
    font-size: 0.94em;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--pfx-label);
}
.dxbl-grid .dxbl-grid-data-row > td {
    padding-top: var(--pfx-grid-row-pad) !important;
    padding-bottom: var(--pfx-grid-row-pad) !important;
}
.dxbl-grid .dxbl-grid-data-row:hover > td { background: var(--pfx-hover) !important; }
/* Geen verticale kolomlijnen */
.dxbl-grid .dxbl-grid-table th,
.dxbl-grid .dxbl-grid-table td {
    border-left: none !important;
    border-right: none !important;
}

/* 7. Tabs (open documents) --------------------------------------------------- */
.dxbl-tabs-item .dxbl-tabs-text-overflow {
    font-size: 1.1em !important;
}
.dxbl-tabs-item.dxbl-active {
    box-shadow: inset 0 -2.5px 0 var(--pfx-accent);
}
/* DevExpress' eigen actieve-tab-indicator meekleuren met het gekozen accent
   (anders blijft die theme-oranje naast onze accent-lijn staan) */
.dxbl-tabs, .dxbl-tabs-tablist, .dxbl-tabs-item {
    --dxbl-tabs-item-active-border-color: var(--pfx-accent) !important;
    --dxbl-tabs-item-selected-border-color: var(--pfx-accent) !important;
}
.dxbl-tabs-item.dxbl-active,
.dxbl-tabs-item.dxbl-active > .dxbl-btn {
    border-bottom-color: var(--pfx-accent) !important;
}
.dxbl-tabs-item.dxbl-active::after,
.dxbl-tabs-item.dxbl-active > .dxbl-btn::after {
    background-color: var(--pfx-accent) !important;
    border-color: var(--pfx-accent) !important;
}
.dxbl-tabs-item.dxbl-active .dxbl-tabs-text-overflow {
    color: var(--pfx-heading) !important;
    font-weight: 700;
}
#main-view-content .dxbl-tabs-item .dxbl-tabs-text-overflow {
    font-size: 1.06em !important;
    font-weight: 600;
    color: var(--pfx-text-soft);
}
#main-view-content .dxbl-tabs-item.dxbl-active .dxbl-tabs-text-overflow {
    color: var(--pfx-heading) !important;
    font-weight: 700;
}

/* 8. DetailView — kaarten op de échte elementen ------------------------------- */
#main-view-content .main-content dxbl-group-control.dxbl-group {
    display: block;
    background: var(--pfx-surface) !important;
    border: 1px solid var(--pfx-card-line) !important;
    border-radius: 14px;
    padding: var(--pfx-card-pad);
    margin-bottom: var(--pfx-card-gap);
    box-shadow: 0 1px 2px rgba(15, 46, 77, 0.04);
}
#main-view-content .main-content .dxbl-group-header.dxbl-fl-caption-tmpl,
#main-view-content .main-content dxbl-group-control.dxbl-group > .dxbl-group-header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 1.14em;
    font-weight: 700;
    color: var(--pfx-heading-deep);
    padding: var(--pfx-cardhead-pad);
}
#main-view-content .main-content .dxbl-group-header::before,
#main-view-content .main-content .dxbl-group-header::after {
    content: none !important;
}
#main-view-content .main-content .dxbl-fl-group-body,
#main-view-content .main-content .dxbl-group-body-content {
    background: transparent !important;
}
/* Veldlabels: klein, uppercase, gedempt. In em, zodat ze de SizeMode volgen. Let op de
   basis: site.css zet de wortelmaat op 14px, dus de formulier-layout staat op 0.875rem =
   12,25px (Standaard) en 0.75rem = 10,5px (Compact) — niet op de 14/12px die je bij een
   wortel van 16px zou verwachten. 0.9em is dus 11,0px respectievelijk 9,5px. In px
   bleven ze op elke stand even groot. */
#main-view-content .main-content label.dxbl-fl-cpt {
    font-size: 0.9em !important;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--pfx-label) !important;
}
#main-view-content .main-content dxbl-form-layout-item.dxbl-fl-item {
    padding-top: var(--pfx-fl-item-pad);
    padding-bottom: var(--pfx-fl-item-pad);
}
#main-view-content .main-content .dxbl-fl .row,
#main-view-content .main-content .dxbl-fl-row {
    --bs-gutter-y: var(--pfx-fl-gutter-y);
}
#main-view-content .main-content .dxbl-fl-group-body .dxbl-fl-item + .dxbl-fl-item {
    margin-top: var(--pfx-fl-item-gap);
}

/* 8b. Zelfde kaart-layout in popups/dialogs (detail view als popup) ----------- */
html :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) dxbl-group-control.dxbl-group {
    display: block;
    background: var(--pfx-surface) !important;
    border: 1px solid var(--pfx-card-line) !important;
    border-radius: 14px;
    padding: var(--pfx-card-pad);
    margin-bottom: var(--pfx-card-gap);
    box-shadow: 0 1px 2px rgba(15, 46, 77, 0.04);
}
html :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) .dxbl-group-header.dxbl-fl-caption-tmpl,
html :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) dxbl-group-control.dxbl-group > .dxbl-group-header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 1.14em;
    font-weight: 700;
    color: var(--pfx-heading-deep);
    padding: var(--pfx-cardhead-pad);
}
html :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) .dxbl-group-header::before,
html :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) .dxbl-group-header::after {
    content: none !important;
}
html :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) :is(.dxbl-fl-group-body, .dxbl-group-body-content) {
    background: transparent !important;
}
html :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) label.dxbl-fl-cpt {
    font-size: 0.9em !important;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--pfx-label) !important;
}
html :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) dxbl-form-layout-item.dxbl-fl-item {
    padding-top: var(--pfx-fl-item-pad);
    padding-bottom: var(--pfx-fl-item-pad);
}
html :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) .dxbl-fl-group-body .dxbl-fl-item + .dxbl-fl-item {
    margin-top: var(--pfx-fl-item-gap);
}

/* 9. Editors / inputs -------------------------------------------------------- */
.dxbl-text-edit, .dxbl-edit, .dxbl-combobox, .dxbl-spin-edit, .dxbl-date-edit {
    border-radius: 9px !important;
}
.dxbl-text-edit:focus-within, .dxbl-edit:focus-within {
    border-color: var(--pfx-heading) !important;
    box-shadow: 0 0 0 3px rgba(var(--pfx-accent-rgb), 0.15) !important;
}

/* 9a. Pager + switches — volgen de gekozen accentkleur ------------------------ */
/* Actieve pagina in de grid-pager (meerdere DX-varianten afgedekt) */
:is(.dxbl-pager, .dxbl-grid-pager, .dxbl-grid .dxbl-pager) {
    --dxbl-pager-page-selected-bg: var(--pfx-accent);
    --dxbl-pager-page-selected-border-color: var(--pfx-accent);
    --dxbl-btn-primary-bg: var(--pfx-accent);
    --dxbl-btn-primary-border-color: var(--pfx-accent);
}
:is(.dxbl-pager, .dxbl-grid-pager) :is(.dxbl-btn-primary,
    .dxbl-active, [aria-current="page"], .dxbl-pager-page-selected,
    .dxbl-btn[aria-pressed="true"]) {
    background-color: var(--pfx-accent) !important;
    border-color: var(--pfx-accent) !important;
    color: #fff !important;
}
/* Yes/No toggle switches (boolean editors) — alleen kleur, vorm intact laten */
.dxbl-checkbox {
    --dxbl-checkbox-checked-bg: var(--pfx-accent);
    --dxbl-checkbox-checked-border-color: var(--pfx-accent);
    --dxbl-checkbox-switch-checked-bg: var(--pfx-accent);
    --dxbl-checkbox-switch-checked-border-color: var(--pfx-accent);
    --dxbl-checkbox-check-element-checked-bg: var(--pfx-accent);
    --dxbl-checkbox-check-element-checked-border-color: var(--pfx-accent);
}
.dxbl-checkbox.dxbl-checked .dxbl-checkbox-check-element {
    background-color: var(--pfx-accent) !important;
    border-color: var(--pfx-accent) !important;
    border-radius: inherit;
}
/* Bootstrap-fallback (form-check/switch) */
.form-check-input:checked {
    background-color: var(--pfx-accent) !important;
    border-color: var(--pfx-accent) !important;
}

/* 6a. Detail view — label-kolom past zich aan de inhoud aan ------------------- */
/* Kolommen op inhoud laten sizen: tabel op auto-layout, caption-cel op auto
   met nowrap → kolom = breedste label, nooit afgekapt. */
/* Alleen layout-tabellen (formulieren), NOOIT grid-tabellen — die hebben
   table-layout:fixed + col-breedtes nodig voor kolom-resizing */
.xaf-layout-group table:not(.dxbl-grid-table):not([class*="grid"]),
.xaf-detailview table:not(.dxbl-grid-table):not([class*="grid"]),
.dxbl-fl table:not(.dxbl-grid-table):not([class*="grid"]) {
    table-layout: auto !important;
}
.xaf-layout-group table:not(.dxbl-grid-table):not([class*="grid"]) col,
.dxbl-fl table:not(.dxbl-grid-table):not([class*="grid"]) col {
    width: auto !important;
}
.dxbl-fl-cpt,
.xaf-layout-item-caption,
.xaf-field-caption {
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    white-space: nowrap;
    overflow: visible !important;
    flex: 0 0 auto !important;
    padding-right: 14px;
}
/* Grid-variant (DevExpress FormLayout): caption = max-content, editor vult rest */
.dxbl-fl {
    --dxbl-fl-cpt-width: max-content;
}
.dxbl-fl-item:has(> .dxbl-fl-cpt) {
    grid-template-columns: max-content 1fr;
}

/* 10. Rounded popups --------------------------------------------------------- */
.dxbl-popup-window, .dxbl-popup-window-content { border-radius: 14px; }

/* 11. Dark mode — DX-specifieke overrides -------------------------------------
   Het office-white basisthema zet veel wit hard op elementen; hier de
   belangrijkste vlakken expliciet donker. */
html[data-pfx-theme="dark"] body,
html[data-pfx-theme="dark"] .dxbl-blazor,
html[data-pfx-theme="dark"] .app {
    background: var(--pfx-canvas) !important;
    color: var(--pfx-ink);
}
/* Editors */
html[data-pfx-theme="dark"] .dxbl-text-edit,
html[data-pfx-theme="dark"] .dxbl-edit,
html[data-pfx-theme="dark"] .dxbl-combobox,
html[data-pfx-theme="dark"] .dxbl-spin-edit,
html[data-pfx-theme="dark"] .dxbl-date-edit,
html[data-pfx-theme="dark"] .dxbl-text-edit-input,
html[data-pfx-theme="dark"] .dxbl-memo,
html[data-pfx-theme="dark"] .dxbl-listbox {
    background-color: var(--pfx-surface-3) !important;
    border-color: var(--pfx-line) !important;
    color: var(--pfx-ink) !important;
}
html[data-pfx-theme="dark"] .dxbl-text-edit-input::placeholder { color: var(--pfx-muted); }
/* Grid-cellen en selectie */
/* Grid-binnenkant: scroll-viewer, tabel en lege ruimte onder de rijen worden
   door office-white hard wit gezet — expliciet donker + de dxbl-vars meezetten. */
html[data-pfx-theme="dark"] .dxbl-grid {
    --dxbl-grid-bg: var(--pfx-surface);
    --dxbl-grid-header-bg: var(--pfx-surface-3);
    --dxbl-grid-selection-bg: var(--pfx-active);
    /* Rij-, kolom- en buitenlijnen: office-white zet ze op #ced4da — op donker witte strepen. */
    --dxbl-grid-border-color: var(--pfx-line-soft);
    --dxbl-grid-fixed-column-border-color: var(--pfx-line);
}
html[data-pfx-theme="dark"] .dxbl-grid,
html[data-pfx-theme="dark"] .dxbl-grid .dxbl-scroll-viewer,
html[data-pfx-theme="dark"] .dxbl-grid .dxbl-scroll-viewer-content,
html[data-pfx-theme="dark"] .dxbl-grid .dxbl-grid-table,
html[data-pfx-theme="dark"] .dxbl-grid tbody,
html[data-pfx-theme="dark"] .dxbl-grid .dxbl-grid-empty-cell,
html[data-pfx-theme="dark"] .dxbl-grid .dxbl-grid-empty-data-row,
html[data-pfx-theme="dark"] .dxbl-grid .dxbl-grid-empty-data-row > td {
    background: var(--pfx-surface) !important;
    background-color: var(--pfx-surface) !important;
    color: var(--pfx-ink);
}
/* Rijen/cellen met een eigen inline achtergrond (XAF-opmaakregels: oranje/groen/rood voor
   backorders, voorraad, voorstellen, …) worden niet overgeschilderd: de kleur is betekenis. */
/* :where() houdt het gewicht gelijk aan de oorspronkelijke regel, zodat selectie (11d) en het
   Kanban-bord (kanban.css) hem blijven overschrijven.
   Bewust GEEN achtergrond op de cel: de grid zelf is al donker (--dxbl-grid-bg), en een dekkende
   cel-achtergrond met !important schilderde élke celkleur weg (XAF-opmaakregels, klassen, inline). */
html[data-pfx-theme="dark"] .dxbl-grid :where(.dxbl-grid-table > tbody) > tr:where(:not(.dxbl-grid-empty-row, .dxbl-grid-group-row, .dxbl-grid-footer-row, .dxbl-grid-group-footer-row)):where(:not([style*="background"])) > td:where(:not([style*="background"])) {
    color: var(--pfx-text) !important;
    border-color: var(--pfx-line-soft) !important;
}
/* … en krijgen donkere tekst, want het vlak blijft het lichte pastel uit de regel. */
html[data-pfx-theme="dark"] .dxbl-grid :where(.dxbl-grid-table > tbody) > tr:where(:not(.dxbl-grid-empty-row, .dxbl-grid-group-row, .dxbl-grid-footer-row, .dxbl-grid-group-footer-row))[style*="background"] > td,
html[data-pfx-theme="dark"] .dxbl-grid :where(.dxbl-grid-table > tbody) > tr:where(:not(.dxbl-grid-empty-row, .dxbl-grid-group-row, .dxbl-grid-footer-row, .dxbl-grid-group-footer-row)) > td[style*="background"] {
    color: #1C2A38 !important;
    border-color: var(--pfx-line-soft) !important;
}
html[data-pfx-theme="dark"] .dxbl-grid :where(.dxbl-grid-table > tbody) > tr:where(:not(.dxbl-grid-empty-row, .dxbl-grid-group-row, .dxbl-grid-footer-row, .dxbl-grid-group-footer-row))[style*="background"] > td :is(a, span, div),
html[data-pfx-theme="dark"] .dxbl-grid :where(.dxbl-grid-table > tbody) > tr:where(:not(.dxbl-grid-empty-row, .dxbl-grid-group-row, .dxbl-grid-footer-row, .dxbl-grid-group-footer-row)) > td[style*="background"] :is(a, span, div) {
    color: inherit !important;
    text-decoration-color: rgba(28, 42, 56, .45);
}
/* Onderstreepte verwijzingen (werksoort, toegewezen aan, ...): de streep in volle tekstkleur gaf
   per rij een felle lijn; gedempt blijft hij herkenbaar als link zonder het beeld te domineren. */
html[data-pfx-theme="dark"] .dxbl-grid :where(.dxbl-grid-table > tbody) > tr:where(:not(.dxbl-grid-empty-row, .dxbl-grid-group-row, .dxbl-grid-footer-row, .dxbl-grid-group-footer-row)) > td a {
    text-decoration-color: rgba(190, 199, 210, .4);
}
html[data-pfx-theme="dark"] .dxbl-grid :where(.dxbl-grid-table > tbody) > tr:where(:not(.dxbl-grid-empty-row, .dxbl-grid-group-row, .dxbl-grid-footer-row, .dxbl-grid-group-footer-row)):where(:not([style*="background"])):hover > td:where(:not([style*="background"], [class*="xaf-dynamic-"])) {
    background: var(--pfx-hover) !important;
}
html[data-pfx-theme="dark"] .dxbl-grid .dxbl-grid-footer,
html[data-pfx-theme="dark"] .dxbl-grid .dxbl-grid-pager,
html[data-pfx-theme="dark"] .dxbl-pager {
    background: var(--pfx-surface) !important;
    color: var(--pfx-ink) !important;
    border-color: var(--pfx-line) !important;
}
/* Tabsbalken en toolbars die het thema wit maakt */
html[data-pfx-theme="dark"] .dxbl-tabs,
html[data-pfx-theme="dark"] .dxbl-tabs-scroll-viewer,
html[data-pfx-theme="dark"] .dxbl-tabs-tablist,
html[data-pfx-theme="dark"] .dxbl-toolbar,
html[data-pfx-theme="dark"] .dxbl-toolbar-group {
    background: var(--pfx-surface) !important;
    color: var(--pfx-ink) !important;
}
html[data-pfx-theme="dark"] .dxbl-tabs-item .dxbl-tabs-text-overflow { color: var(--pfx-text-soft); }
/* Kleuren ín de toolbar en zijn uitklapmenu's (bv. het menu onder "Nieuw"). office-white zet de
   tekst op #212529; in het menu was daardoor niets te lezen, en een actieve knop (menu open) erft
   die kleur ook — dan verdween "Nieuw" uit de knop. */
html[data-pfx-theme="dark"] :is(.dxbl-toolbar, .dxbl-toolbar-dropdown) {
    --dxbl-toolbar-color: var(--pfx-ink);
    --dxbl-toolbar-separator-color: var(--pfx-line);
    --dxbl-toolbar-btn-bg: var(--pfx-surface);
    --dxbl-toolbar-btn-color: var(--pfx-ink);
    --dxbl-toolbar-btn-border-color: var(--pfx-line);
    --dxbl-toolbar-btn-disabled-bg: var(--pfx-surface);
    --dxbl-toolbar-dropdown-btn-color: var(--pfx-ink);
}
html[data-pfx-theme="dark"] :is(.dxbl-menu, .dxbl-menu-dropdown) {
    --dxbl-menu-bg: var(--pfx-surface);
    --dxbl-menu-separator-color: var(--pfx-line);
    --dxbl-menu-item-disabled-color: var(--pfx-muted);
    --dxbl-menu-dropdown-border-color: var(--pfx-line);
}
/* Hover/actief tekent DevExpress als zwarte laag met lage opacity — op donker onzichtbaar. */
html[data-pfx-theme="dark"] :is(.dxbl-toolbar, .dxbl-toolbar-dropdown, .dxbl-menu, .dxbl-menu-dropdown) .dxbl-btn:not(.dxbl-btn-primary)::before {
    background-color: #fff !important;
}
/* Knoppen (niet-primary) */
html[data-pfx-theme="dark"] .dxbl-btn-secondary,
html[data-pfx-theme="dark"] .dxbl-btn-standalone {
    background-color: transparent;
    color: var(--pfx-ink);
    border-color: var(--pfx-line);
}
/* Popups, dropdowns, menu's */
html[data-pfx-theme="dark"] .dxbl-popup-window,
html[data-pfx-theme="dark"] .dxbl-popup-window-content,
html[data-pfx-theme="dark"] .dxbl-dropdown-dialog,
html[data-pfx-theme="dark"] .dxbl-dropdown,
html[data-pfx-theme="dark"] .dxbl-window,
html[data-pfx-theme="dark"] .dxbl-context-menu,
html[data-pfx-theme="dark"] .dxbl-list-box,
html[data-pfx-theme="dark"] .dxbl-popup {
    background: var(--pfx-surface) !important;
    color: var(--pfx-ink) !important;
    border-color: var(--pfx-line) !important;
}
/* Hover in lijsten en menu's. DevExpress tekent die als een zwarte laag (::before) met 4-12% dekking,
   op donker onzichtbaar; hier een echt hover-vlak. Geselecteerde/actieve items houden hun eigen
   (accent)kleur. */
html[data-pfx-theme="dark"] :is(
    .dxbl-list-box-item, .dxbl-dropdown-item, .dxbl-menu-item, .dxbl-menu-list-item,
    .dxbl-context-menu-item, .dxbl-toolbar-dropdown-item, .dxbl-toolbar-menu-item,
    .dxbl-btn-dropdown-item, .dxbl-btn-dropdown-list-item, .dxbl-ribbon-menu-item
):hover:not(.dxbl-active):not([aria-selected="true"]):not([class*="selected"]) {
    background: var(--pfx-hover) !important;
}
/* Boomlijst apart: de selectie zit op een binnenelement (.dxbl-treeview-item-container.dxbl-active),
   dus een hover-vlak op de rij zou de selectie wegvegen. */
html[data-pfx-theme="dark"] .dxbl-treeview-item-content:hover:not(:has(.dxbl-active)) {
    background: var(--pfx-hover) !important;
}
/* Regels in een DxListBox / combobox-lijst / filterwaardenlijst van een grid zijn kale <li>'s (of <tr>'s
   bij meerdere kolommen), zonder item-klasse. Hover is bij DevExpress "unset" en de selectie is een
   oranje ::before met z-index -1, die op ons dekkende donkere vlak wegvalt — aangevinkte waarden waren
   daardoor niet te onderscheiden. Hier rechtstreeks: hover-vlak, en een accenttint voor geselecteerd. */
html[data-pfx-theme="dark"] :is(.dxbl-list-box, .dxbl-list-box-render-container) :is(ul > li, tbody > tr):not(.dxbl-list-box-empty-list-item):not(.dxbl-list-box-group-item):hover {
    background-color: var(--pfx-hover) !important;
}
html[data-pfx-theme="dark"] :is(.dxbl-list-box, .dxbl-list-box-render-container) :is(ul > li, tbody > tr).dxbl-list-box-item-selected {
    background-color: rgba(var(--pfx-accent-rgb), .22) !important;
    color: var(--pfx-ink) !important;
}
html[data-pfx-theme="dark"] :is(.dxbl-list-box, .dxbl-list-box-render-container) :is(ul > li, tbody > tr).dxbl-list-box-item-selected:hover {
    background-color: rgba(var(--pfx-accent-rgb), .34) !important;
}
/* Knoppen tekenen hover/klik met dezelfde zwarte laag; in een toolbar, menu en ribbon stond die al op
   wit, hier ook voor de overige (niet-primaire) knoppen en kleine knopjes: wis-kruisje in een veld,
   paginaknoppen, sluit-/maximaliseerknop in een popupkop. Checkbox en schakelaar gebruiken ::before
   voor het vakje en het bolletje en blijven er bewust buiten. */
/* Menubalk links en knoppen in de kopbalk: in licht een lichtgrijs hover-vlak (line-soft), in donker
   was dat nauwelijks anders dan de achtergrond. */
html[data-pfx-theme="dark"] .xaf-sidebar dxbl-group-control:not([data-dx-style="--dxbl-accordion-item-indent:0"]) > .dxbl-group-header:hover,
html[data-pfx-theme="dark"] .xaf-sidebar a.dxbl-accordion-item-content:not(.dxbl-active):hover,
html[data-pfx-theme="dark"] .header :is(.dxbl-btn, .dxbl-btn-standalone):hover {
    background: var(--pfx-hover) !important;
}
html[data-pfx-theme="dark"] .dxbl-btn:not(.dxbl-btn-primary):not(.dxbl-btn-success):not(.dxbl-btn-danger):not(.dxbl-btn-warning):not(.dxbl-btn-info)::before,
html[data-pfx-theme="dark"] :is(.dxbl-edit-btn-clear, .dxbl-pager-page-btn, .dxbl-popup-header-button, .dxbl-window-header-button)::before {
    background-color: #fff !important;
}
/* Iconen (zwarte SVG/PNG-iconen licht maken; gekleurde eigen iconen niet) */
html[data-pfx-theme="dark"] .header img:not(.header-logo),
html[data-pfx-theme="dark"] .dxbl-toolbar-btn img.xaf-toolbar-item-icon:not([src*="/oranje/"]):not([src*="ProfixIcons"]) {
    filter: brightness(0) invert(0.85);
}
html[data-pfx-theme="dark"] .about-info { color: var(--pfx-muted); }

/* Popup / dialog detail-view — dark mode.
   Een detail view die als popup opent valt buiten #main-view-content, dus de
   kaart-, sectiekop- en veldkleuren bleven licht. Hier expliciet donker. */
html[data-pfx-theme="dark"] :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) :is(
    .dxbl-popup-header, .dxbl-window-header, .dxbl-popup-body, .dxbl-window-body,
    .dxbl-popup-content, .dxbl-form-layout, .dxbl-fl, .dxbl-fl-group,
    dxbl-group-control, .dxbl-group, .dxbl-fl-group-body, .dxbl-group-body-content,
    .xaf-detailview, .xaf-layout-group
) {
    background-color: var(--pfx-surface) !important;
    border-color: var(--pfx-line) !important;
    color: var(--pfx-ink) !important;
}
/* Sectiekoppen ("Customer", "Shared Relation Type Properties") */
html[data-pfx-theme="dark"] :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) :is(
    .dxbl-group-header, .dxbl-fl-caption-tmpl, .dxbl-fl-group-caption
) {
    background-color: var(--pfx-surface-3) !important;
    color: var(--pfx-ink) !important;
    border-color: var(--pfx-line) !important;
}
/* Titelbalk van de popup zelf */
html[data-pfx-theme="dark"] :is(.dxbl-popup-window, .dxbl-window) > :is(.dxbl-popup-header, .dxbl-window-header) {
    background-color: var(--pfx-surface-3) !important;
    color: var(--pfx-ink) !important;
    border-bottom-color: var(--pfx-line) !important;
}
/* Veldlabels in de popup */
html[data-pfx-theme="dark"] :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) :is(.dxbl-fl-cpt, label) {
    color: var(--pfx-label, var(--pfx-muted)) !important;
}
/* Resterende witte vlakken: body-wrapper, scroll-viewer, footer/knoppenbalk */
html[data-pfx-theme="dark"] :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]),
html[data-pfx-theme="dark"] :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) :is(
    .dxbl-popup-body, .dxbl-window-body, .dxbl-popup-content, .dxbl-popup-content-wrapper,
    .dxbl-scroll-viewer, .dxbl-scroll-viewer-content, .dxbl-popup-footer, .dxbl-window-footer,
    .dxbl-popup-actions, .dxbl-toolbar, .card, .panel, .dxbl-panel
) {
    background-color: var(--pfx-surface) !important;
    border-color: var(--pfx-line) !important;
}
html[data-pfx-theme="dark"] :is(.dxbl-popup-window, .dxbl-window) > :is(.dxbl-popup-footer, .dxbl-window-footer),
html[data-pfx-theme="dark"] :is(.dxbl-popup-window, .dxbl-window) .dxbl-popup-actions {
    background-color: var(--pfx-surface-3) !important;
    border-top-color: var(--pfx-line) !important;
}
/* Vangnet: venster hard donker + ALLE structurele containers transparant, zodat
   header-/footer-/wrapper-vlakken die een eigen witte klasse houden toch donker
   worden. Editors, knoppen en switches worden bewust NIET geraakt, en evenmin:
   - de gekleurde "pillen" van de filtereditor (veld/operator/waarde, sectie 11c) — die
     zijn divs, en zonder hun tint is de opbouw van een criterium niet meer te lezen;
   - XAF-iconen (.xaf-image): een div die het icoon tekent als background-color:
     currentColor met een mask-image. Transparant maakte élk XAF-icoon in een popup
     onzichtbaar, bv. het potlood naast een criteria-veld.
   Elke losse uitzondering hierboven was een gat dat pas opviel als iets onzichtbaar werd; de
   schakelaar in een popup was de volgende (alleen het bolletje bleef, het spoor is een div). Daarom
   is het vangnet nu beperkt tot wat het moet raken:
   - alleen containers van DevExpress/XAF/DevExtreme (klasse met dxbl-, xaf-, dx- of dxd-) en
     klasseloze wrappers. Eigen componenten (wi-*, wl-*, sd-*, pfx-*, …) hebben hun eigen
     dark-regels en worden niet meer leeggemaakt als ze in een popup staan;
   - nooit de binnenkant van onderdelen die zelf kleurvlakken tekenen: checkbox/schakelaar/radio,
     TagBox-tags, voortgangsbalk, kleurkiezers, planner, laadpaneel;
   - nooit een element met een inline achtergrond (kleurstalen, avatars, accentvlakjes). */
html[data-pfx-theme="dark"] :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) {
    background-color: var(--pfx-surface) !important;
}
html[data-pfx-theme="dark"] :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) :is(div, header, footer, section, form):is(
    [class*="dxbl-"], [class*="xaf-"], [class*="dx-"], [class*="dxd-"], :not([class])):not(
    .dxbl-text-edit):not(.dxbl-combobox):not(.dxbl-date-edit):not(.dxbl-spin-edit):not(.dxbl-memo):not(.dxbl-edit):not(
    .dxbl-checkbox):not([class*="btn"]):not([class*="button"]):not(.dxbl-text-edit-input):not(
    [class*="dxd-filter-editor-"]):not(.xaf-image):not([style*="background"]):not(
    :is(.dxbl-checkbox, .dxbl-tag-box, .dxbl-progress-bar, .dxbl-color-palette, .dxbl-toolbar-coloredit,
        [class*="dxbl-ribbon-color"], .dxbl-scheduler, .dxbl-loading-panel) *) {
    background-color: transparent !important;
}

/* Readonly / geblokkeerde velden — donker vlak, lichte tekst.
   DevExpress tekent bij een readonly of disabled editor een eigen achtergrondlaag (een ::after
   met --dxbl-text-edit-readonly-bg / -disabled-bg, standaard #fff). Die bleef wit; de tekst stond
   daarom eerder donker gezet. Nu krijgt die laag zelf de veldkleur, en de tekst een gedempt licht
   — zichtbaar anders dan een bewerkbaar veld, maar goed leesbaar. */
html[data-pfx-theme="dark"] .dxbl-text-edit {
    --dxbl-text-edit-bg: var(--pfx-surface-3);
    --dxbl-text-edit-color: var(--pfx-ink);
    --dxbl-text-edit-border-color: var(--pfx-line);
    --dxbl-text-edit-readonly-bg: var(--pfx-surface-3);
    --dxbl-text-edit-readonly-color: var(--pfx-text-soft);
    --dxbl-text-edit-disabled-bg: var(--pfx-surface-3);
    --dxbl-text-edit-disabled-color: var(--pfx-muted);
    --dxbl-text-edit-btn-color: var(--pfx-text-soft);
    --dxbl-text-edit-btn-hover-color: var(--pfx-ink);
    --dxbl-text-edit-btn-disabled-color: var(--pfx-muted);
}
html[data-pfx-theme="dark"] :is(
    .dxbl-text-edit, .dxbl-edit, .dxbl-combobox, .dxbl-spin-edit, .dxbl-date-edit, .dxbl-memo
):is(.dxbl-readonly, .dxbl-disabled, [aria-readonly="true"], [aria-disabled="true"]) *,
html[data-pfx-theme="dark"] :is(
    .dxbl-text-edit, .dxbl-edit, .dxbl-combobox, .dxbl-spin-edit, .dxbl-date-edit
):has(:is(input, textarea):is([readonly], :disabled)) :is(input, textarea, span, a, div, label),
html[data-pfx-theme="dark"] :is(input, textarea, .dxbl-text-edit-input):is([readonly], :disabled) {
    color: var(--pfx-text-soft) !important;
    -webkit-text-fill-color: var(--pfx-text-soft) !important;
    opacity: 1 !important;
}

/* Secundaire DevExpress-knoppen (secondary, text-secondary, outline-secondary). office-white zet hun
   tekst en icoon op #212529, voor knoppen in een toolbar met selectors tot zeven klassen diep —
   vandaar !important op de variabelen. Zichtbaar o.a. bij de taalkeuze op het inlogscherm (een
   toolbar met één "plain" knop: taalnaam én pijltje waren onzichtbaar). Primaire knoppen vallen
   erbuiten en houden hun witte tekst. Staat vóór de ribbon-regels hieronder, zodat die (even
   specifiek, later) hun doorzichtige knoppen houden. Expliciete kleuren elders in dit bestand
   (bv. de hoofdtoolbar) zetten 'color' zelf en blijven dus voorgaan. */
html[data-pfx-theme="dark"] .dxbl-btn:is(.dxbl-btn-secondary, .dxbl-btn-text-secondary, .dxbl-btn-outline-secondary) {
    --dxbl-btn-color: var(--pfx-ink) !important;
    --dxbl-btn-hover-color: var(--pfx-ink) !important;
    --dxbl-btn-active-color: var(--pfx-ink) !important;
    --dxbl-btn-disabled-color: var(--pfx-muted) !important;
}
/* Alleen de omlijnde varianten krijgen een rand; text-secondary is randloos en moet dat blijven. */
html[data-pfx-theme="dark"] .dxbl-btn:is(.dxbl-btn-secondary, .dxbl-btn-outline-secondary) {
    --dxbl-btn-border-color: var(--pfx-line) !important;
    --dxbl-btn-hover-border-color: var(--pfx-line) !important;
    --dxbl-btn-active-border-color: var(--pfx-line) !important;
    --dxbl-btn-disabled-border-color: var(--pfx-line) !important;
}
html[data-pfx-theme="dark"] .dxbl-btn.dxbl-btn-secondary {
    --dxbl-btn-bg: var(--pfx-surface-3) !important;
    --dxbl-btn-root-bg: var(--pfx-surface-3) !important;
    --dxbl-btn-disabled-bg: var(--pfx-surface-3) !important;
}
/* Link-knoppen (link, outline-link, text-link) zetten geen eigen tekstkleur en erven de #212529 van
   de basis-.dxbl-btn — bv. de filtertekst onderin een grid ("[Status] Is any of ..."). In licht is dat
   gewone tekstkleur met een onderstreping; hier dus ink. Bewust niet op de basis-.dxbl-btn zelf:
   primair/succes/gevaar zetten hun witte tekst met een selector van gelijke lage specificiteit
   (.dxbl-btn-primary:where(...)) en zouden dan meegaan. */
html[data-pfx-theme="dark"] .dxbl-btn:is(.dxbl-btn-link, .dxbl-btn-outline-link, .dxbl-btn-text-link) {
    --dxbl-btn-color: var(--pfx-ink);
}
/* Hover- en klikvlak van de grijze en lichte knopstijlen. office-white zet die op bijna-wit (#f7f8f9,
   #e5e5e5, #e9ecef, #f9fafb) — op donker een wit blok zodra je eroverheen gaat, bv. het
   trechterknopje in een kolomkop van een grid. Hier een doorschijnende lichte laag, die op elk donker
   vlak werkt. De filterbouwer-knoppen hebben dezelfde lichte waarden. */
html[data-pfx-theme="dark"] .dxbl-btn:is(.dxbl-btn-secondary, .dxbl-btn-outline-secondary, .dxbl-btn-text-secondary,
    .dxbl-btn-light, .dxbl-btn-outline-light, .dxbl-btn-text-light),
html[data-pfx-theme="dark"] .dxbl-btn.dxbl-grid-filter-menu-funnel-btn,
html[data-pfx-theme="dark"] .dxbl-filter-builder .dxbl-btn {
    --dxbl-btn-hover-bg: rgba(255, 255, 255, .08) !important;
    --dxbl-btn-active-bg: rgba(255, 255, 255, .14) !important;
}
/* Filterpaneel onderin een grid: de filtertekst en de wisknop rechts (trechter-icoon) waren
   onzichtbaar. Rechtstreeks op de elementen, los van welke knopstijl DevExpress daar kiest. */
html[data-pfx-theme="dark"] .dxbl-grid-filter-panel .dxbl-grid-filter-panel-filter {
    color: var(--pfx-text) !important;
}
html[data-pfx-theme="dark"] .dxbl-grid-filter-panel .dxbl-grid-filter-panel-filter:hover {
    color: var(--pfx-ink) !important;
}
html[data-pfx-theme="dark"] .dxbl-grid-filter-panel .dxbl-grid-filter-panel-clear-button {
    --dxbl-btn-color: var(--pfx-text-soft) !important;
    --dxbl-btn-hover-color: var(--pfx-ink) !important;
    --dxbl-btn-active-color: var(--pfx-ink) !important;
    color: var(--pfx-text-soft) !important;
}
html[data-pfx-theme="dark"] .dxbl-grid-filter-panel .dxbl-grid-filter-panel-clear-button:hover {
    color: var(--pfx-ink) !important;
}

/* Bootstrap-knoppen in eigen componenten (bv. "Save draft" in het werkitemgesprek).
   office-white geeft btn-outline-secondary zwarte tekst en rand — onzichtbaar op donker. */
html[data-pfx-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--pfx-ink);
    --bs-btn-border-color: var(--pfx-line);
    --bs-btn-hover-color: var(--pfx-ink);
    --bs-btn-hover-bg: var(--pfx-hover);
    --bs-btn-hover-border-color: var(--pfx-muted);
    --bs-btn-active-color: var(--pfx-ink);
    --bs-btn-active-bg: var(--pfx-hover);
    --bs-btn-active-border-color: var(--pfx-muted);
    --bs-btn-disabled-color: var(--pfx-muted);
    --bs-btn-disabled-border-color: var(--pfx-line);
    --bs-btn-focus-shadow-rgb: 227, 233, 241;
}

/* HTML-editor (DxHtmlEditor: notities, beschrijvingen, kennisbank).
   De werkbalk is een DevExpress-ribbon die tekst- en icoonkleur op de knop zelf vastzet
   (#212529, met een selector van zeven klassen) — vandaar de !important op de variabelen.
   Werkbalk en schrijfvlak delen één donker veld, zoals elk ander invoerveld. */
html[data-pfx-theme="dark"] .dxbl-html-editor {
    --dxbl-html-editor-border-color: var(--pfx-line);
    --dxbl-html-editor-block-font-color: rgba(227, 233, 241, .8);
    --dxbl-html-editor-placeholder-color: var(--pfx-muted);
    --dxbl-html-editor-code-block-background-color: rgba(255, 255, 255, .06);
    background-color: var(--pfx-surface-3);
    color: var(--pfx-ink);
}
html[data-pfx-theme="dark"] .dxbl-html-editor .dx-htmleditor-content {
    color: var(--pfx-ink);
}
html[data-pfx-theme="dark"] .dxbl-html-editor :is(.dxbl-ribbon, .dxbl-toolbar, .dxbl-toolbar-group, .dxbl-tabs-content-panel) {
    background: transparent !important;
}
html[data-pfx-theme="dark"] .dxbl-ribbon__root {
    --dxbl-ribbon-border-color: var(--pfx-line);
    --dxbl-ribbon-horizontal-separator-color: var(--pfx-line);
    --dxbl-ribbon-group-separator-color: var(--pfx-line);
    --dxbl-ribbon-color-picker-outline: 1px solid var(--pfx-line);
}
html[data-pfx-theme="dark"] .dxbl-ribbon .dxbl-btn {
    --dxbl-btn-bg: transparent !important;
    --dxbl-btn-root-bg: transparent !important;
    --dxbl-btn-disabled-bg: transparent !important;
    --dxbl-btn-color: var(--pfx-ink) !important;
    --dxbl-btn-hover-color: var(--pfx-ink) !important;
    --dxbl-btn-active-color: var(--pfx-ink) !important;
    --dxbl-btn-disabled-color: var(--pfx-muted) !important;
    --dxbl-btn-border-color: var(--pfx-line) !important;
    --dxbl-btn-hover-border-color: var(--pfx-line) !important;
    --dxbl-btn-active-border-color: var(--pfx-line) !important;
}
/* Hover/actief tekent DevExpress als zwarte laag met lage opacity — op donker onzichtbaar. */
html[data-pfx-theme="dark"] .dxbl-ribbon .dxbl-btn::before {
    background-color: #fff !important;
}

/* 11a. DevExpress-componentvariabelen — dark mode ------------------------------
   office-white zet per component tekst (#212529), vlakken (#fff) en randen (#ced4da) vast in
   variabelen op de component zelf (.dxbl-fl, .dxbl-calendar, ...). Alles wat de regels hierboven
   niet expliciet raken bleef daardoor licht — bv. het label "Tenant" op het inlogscherm, of het
   lege vakje van een checkbox. Hier per component in één keer omgezet (inventaris: elke
   .dxbl-*-regel in office-white met zo'n waarde).
   Bewust NIET omgezet:
   - wit dat tekst of een bolletje óp een gekleurd vlak is (vinkje, actieve pagina, geselecteerd
     item, het bolletje van een schakelaar) — dat hoort wit te blijven;
   - knoppen: DevExpress zet hun tekstkleur per variant met diepe selectors, en de primaire knop
     moet zijn witte tekst houden. De secundaire varianten staan hierboven (vóór de HTML-editor),
     de toolbar- en ribbonknoppen elk bij hun eigen blok. */
html[data-pfx-theme="dark"] .dxbl-fl {
    --dxbl-fl-caption-color: var(--pfx-label);
    --dxbl-fl-group-color: var(--pfx-ink);
    --dxbl-fl-group-bg: var(--pfx-surface);
    --dxbl-fl-tab-group-bg: var(--pfx-surface);
    --dxbl-fl-tab-group-color: var(--pfx-ink);
    --dxbl-fl-tab-group-content-color: var(--pfx-ink);
    --dxbl-fl-tab-group-bottom-border-color: var(--pfx-line);
}
html[data-pfx-theme="dark"] .dxbl-group {
    --dxbl-group-bg: var(--pfx-surface);
    --dxbl-group-color: var(--pfx-ink);
    --dxbl-group-border-color: var(--pfx-card-line);
}
html[data-pfx-theme="dark"] .dxbl-accordion {
    --dxbl-accordion-group-border-color: var(--pfx-line);
    --dxbl-accordion-filter-content-color: var(--pfx-ink);
}
html[data-pfx-theme="dark"] .dxbl-tabs {
    --dxbl-tabs-bg: var(--pfx-surface);
    --dxbl-tabs-color: var(--pfx-ink);
    --dxbl-tabs-content-color: var(--pfx-ink);
    --dxbl-tabs-separator-border-color: var(--pfx-line);
    --dxbl-tabs-close-btn-hover-bg: var(--pfx-hover);
    --dxbl-tabs-close-btn-hover-color: var(--pfx-ink);
    --dxbl-tabs-tab-drag-bg-color: var(--pfx-surface);
}
html[data-pfx-theme="dark"] .dxbl-listbox {
    --dxbl-listbox-bg: var(--pfx-surface-3);
    --dxbl-listbox-color: var(--pfx-ink);
    --dxbl-listbox-border-color: var(--pfx-line);
    --dxbl-listbox-readonly-color: var(--pfx-text-soft);
    --dxbl-listbox-disabled-color: var(--pfx-muted);
}
html[data-pfx-theme="dark"] .dxbl-list-box-dragging-hint {
    --dxbl-list-box-item-drag-hint-bg: var(--pfx-surface-3);
}
/* De lijst in het uitklapvak van een DxComboBox (.dxbl-list-box-render-container) en de losse
   DxListBox: hun scroll-vlak tekent var(--dxbl-list-box-bg), en die stond nog op #fff met
   #212529-tekst — elke combobox-dropdown bleef daardoor wit (de inventaris hierboven had alleen de
   oude .dxbl-listbox). Geselecteerd item (wit op oranje) blijft zoals het is; de zoekmarkering wordt
   dezelfde gedempte ambertint als in de grids (zie .dxbl-grid verderop) i.p.v. een felgeel blok. */
html[data-pfx-theme="dark"] :is(.dxbl-list-box, .dxbl-list-box-render-container) {
    --dxbl-list-box-bg: var(--pfx-surface);
    --dxbl-list-box-color: var(--pfx-ink);
    --dxbl-list-box-border-color: var(--pfx-line);
    --dxbl-list-box-readonly-color: var(--pfx-text-soft);
    --dxbl-list-box-disabled-color: var(--pfx-muted);
    --dxbl-list-box-item-disabled-color: var(--pfx-muted);
    --dxbl-list-box-highlighted-text-bg: rgba(224, 164, 0, .38);
    --dxbl-list-box-highlighted-text-color: #FFF6DC;
}
/* Zelfde gat bij de andere uitklapvakken: de vlakken hebben hierboven al een donkere achtergrond,
   maar de variabelen die hun binnenkant en submenu's gebruiken stonden nog licht. */
html[data-pfx-theme="dark"] :is(.dxbl-dropdown, .dxbl-itemlist-dropdown) {
    --dxbl-dropdown-bg: var(--pfx-surface);
    --dxbl-dropdown-color: var(--pfx-ink);
    --dxbl-dropdown-border-color: var(--pfx-line);
}
html[data-pfx-theme="dark"] :is(.dxbl-context-menu, .dxbl-context-menu-submenu) {
    --dxbl-context-menu-bg: var(--pfx-surface);
    --dxbl-context-menu-border-color: var(--pfx-line);
    --dxbl-context-menu-separator-color: var(--pfx-line);
    --dxbl-context-menu-disabled-color: var(--pfx-muted);
}
html[data-pfx-theme="dark"] .dxbl-btn-dropdown-popup {
    --dxbl-btn-dropdown-btn-color: var(--pfx-ink);
}
/* Uitklapvak van comboboxen en datumvelden. De footerknop wordt in licht #e5e5e5 met #ced4da bij
   hover: dat zijn vlakken, dus hier donker met een iets lichter hover-vlak. */
html[data-pfx-theme="dark"] .dxbl-edit-dropdown {
    --dxbl-edit-dropdown-bg: var(--pfx-surface);
    --dxbl-edit-dropdown-color: var(--pfx-ink);
    --dxbl-edit-dropdown-border-color: var(--pfx-line);
    --dxbl-edit-dropdown-footer-btn-color: var(--pfx-ink);
    --dxbl-edit-dropdown-footer-apply-btn-bg: var(--pfx-surface-3);
    --dxbl-edit-dropdown-footer-apply-btn-hover-color: var(--pfx-line);
}
html[data-pfx-theme="dark"] .dxbl-calendar {
    --dxbl-calendar-bg: var(--pfx-surface);
    --dxbl-calendar-color: var(--pfx-ink);
    --dxbl-calendar-border-color: var(--pfx-line);
    --dxbl-calendar-readonly-color: var(--pfx-text-soft);
    --dxbl-calendar-disabled-color: var(--pfx-muted);
    --dxbl-calendar-footer-btn-bg: var(--pfx-surface-3);
    --dxbl-calendar-footer-btn-hover-color: var(--pfx-line);
}
/* Het lege vakje van een checkbox en het rondje van een radioknop; het vinkje en het bolletje van
   een schakelaar blijven wit. */
html[data-pfx-theme="dark"] .dxbl-checkbox {
    --dxbl-checkbox-check-element-unchecked-bg: var(--pfx-surface-3);
    --dxbl-checkbox-check-element-unchecked-hover-bg: var(--pfx-surface-3);
    --dxbl-checkbox-check-element-readonly-bg: var(--pfx-surface-3);
    --dxbl-checkbox-indeterminate-element-disabled-bg: var(--pfx-surface-3);
    --dxbl-checkbox-radio-bg: var(--pfx-surface-3);
    --dxbl-checkbox-radio-hover-bg: var(--pfx-surface-3);
    --dxbl-checkbox-radio-check-readonly-bg: var(--pfx-surface-3);
    /* Rand van een leeg vakje/rondje: DevExpress laat die "unset", waardoor het vakje (bv. de
       selectievakjes in een grid) op donker in de rij opging. */
    --dxbl-checkbox-check-element-unchecked-border-color: var(--pfx-muted);
    --dxbl-checkbox-check-element-unchecked-hover-border-color: var(--pfx-ink);
    --dxbl-checkbox-check-element-readonly-border-color: var(--pfx-label);
    --dxbl-checkbox-radio-unchecked-border-color: var(--pfx-muted);
    --dxbl-checkbox-radio-unchecked-hover-border-color: var(--pfx-ink);
    /* Schakelaar "uit": DevExpress tekent het spoor als var(--dxbl-checkbox-switch-unchecked-bg, #000)
       met opacity via dezelfde variabele (50%, readonly 30%) — zwart op donker, bv. de Ja/Nee-schakelaars
       in een grid. Een kleur hier maakt die opacity ongeldig (dus 1) en geeft een zichtbaar spoor; het
       bolletje iets gedempter dan wit, zodat "uit" en "aan" (accent) duidelijk verschillen. */
    --dxbl-checkbox-switch-unchecked-bg: #4A5869;
    --dxbl-checkbox-switch-unchecked-hover-bg: #566579;
    --dxbl-checkbox-switch-element-unchecked-bg: #D5DCE5;
}
html[data-pfx-theme="dark"] .dxbl-treeview {
    --dxbl-treeview-navigation-filter-content-color: var(--pfx-ink);
    --dxbl-treeview-checkbox-unchecked-bg: var(--pfx-surface-3);
    --dxbl-treeview-checkbox-unchecked-hover-bg: var(--pfx-surface-3);
    --dxbl-treeview-checkbox-readonly-bg: var(--pfx-surface-3);
}
html[data-pfx-theme="dark"] .dxbl-modal {
    --dxbl-popup-bg: var(--pfx-surface);
    --dxbl-popup-color: var(--pfx-ink);
    --dxbl-popup-border-color: var(--pfx-line);
}
html[data-pfx-theme="dark"] .dxbl-window {
    --dxbl-window-bg: var(--pfx-surface);
    --dxbl-window-color: var(--pfx-ink);
    --dxbl-window-border-color: var(--pfx-line);
}
/* Flyout (tooltip-achtige ballon); de pijlrand hoort de kleur van de ballon zelf te hebben. */
html[data-pfx-theme="dark"] .dxbl-flyout {
    --dxbl-flyout-bg: var(--pfx-surface);
    --dxbl-flyout-color: var(--pfx-ink);
    --dxbl-flyout-border-color: var(--pfx-line);
    --dxbl-flyout-arrow-color: var(--pfx-line);
    --dxbl-flyout-arrow-base-border-color: var(--pfx-surface);
}
html[data-pfx-theme="dark"] .dxbl-drawer {
    --dxbl-drawer-panel-bg: var(--pfx-surface);
    --dxbl-drawer-panel-color: var(--pfx-ink);
    --dxbl-drawer-separator-border-color: var(--pfx-line);
}
html[data-pfx-theme="dark"] .dxbl-pager {
    --dxbl-pager-color: var(--pfx-ink);
    --dxbl-pager-btn-bg: var(--pfx-surface);
    --dxbl-pager-btn-border-color: var(--pfx-line);
    --dxbl-pager-btn-disabled-bg: var(--pfx-surface);
    --dxbl-pager-page-btn-bg: var(--pfx-surface);
    --dxbl-pager-page-btn-color: var(--pfx-ink);
    --dxbl-pager-page-edit-bg: var(--pfx-surface-3);
    --dxbl-pager-page-edit-color: var(--pfx-ink);
    --dxbl-pager-page-edit-border-color: var(--pfx-line);
}
/* Zoekmarkering: DevExpress zet een felgeel vlak (yellow) met #212529-tekst. Lichte tekst daarop was
   onleesbaar, donkere tekst een fel geel blok in een donkere lijst. Hier een gedempte ambertint met
   lichte, warme tekst (±6,5:1) — zelfde markering als in de keuzelijsten (.dxbl-list-box hierboven). */
html[data-pfx-theme="dark"] .dxbl-grid {
    --dxbl-grid-color: var(--pfx-text);
    --dxbl-grid-highlighted-text-bg: rgba(224, 164, 0, .38);
    --dxbl-grid-highlighted-text-color: #FFF6DC;
}
html[data-pfx-theme="dark"] .dxbl-grid-draggable-header {
    --dxbl-grid-draggable-header-bg: var(--pfx-surface-3);
    --dxbl-grid-draggable-header-color: var(--pfx-ink);
    --dxbl-grid-draggable-header-border-color: var(--pfx-line);
}
html[data-pfx-theme="dark"] .dxbl-grid-row-drag-hint {
    --dxbl-grid-row-drag-hint-bg: var(--pfx-surface-3);
    --dxbl-grid-row-drag-hint-border-color: var(--pfx-line);
}
html[data-pfx-theme="dark"] .dxbl-filter-builder {
    --dxbl-filter-builder-bg: var(--pfx-surface);
    --dxbl-filter-builder-color: var(--pfx-ink);
    --dxbl-filter-builder-btn-secondary-border-color: var(--pfx-line);
}
/* Laadpaneel: het waas over de inhoud was wit. */
html[data-pfx-theme="dark"] .dxbl-loading-panel {
    --dxbl-loading-panel-underlay-bg: var(--pfx-canvas);
    --dxbl-loading-panel-overlay-bg: var(--pfx-canvas);
    --dxbl-loading-panel-indicator-area-background-color: var(--pfx-surface);
}
html[data-pfx-theme="dark"] .dxbl-color-palette {
    --dxbl-color-palette-bg: var(--pfx-surface);
    --dxbl-color-palette-text-color: var(--pfx-ink);
    --dxbl-color-palette-color-button-hover-color: var(--pfx-ink);
}
html[data-pfx-theme="dark"] .dxbl-html-editor-modal-dialog {
    --dxbl-html-editor-drop-zone-border-color: var(--pfx-line);
    --dxbl-html-editor-drop-zone-background-color: var(--pfx-surface-3);
}
html[data-pfx-theme="dark"] .dxbl-splitter {
    --dxbl-splitter-bg: var(--pfx-surface);
    --dxbl-splitter-color: var(--pfx-ink);
    --dxbl-splitter-button-color: var(--pfx-text-soft);
    --dxbl-splitter-button-hover-color: var(--pfx-ink);
    --dxbl-splitter-resize-handle-color: var(--pfx-text-soft);
    --dxbl-splitter-resize-handle-hover-color: var(--pfx-ink);
}
html[data-pfx-theme="dark"] .dxbl-chart-root {
    --dxbl-chart-container-background-color: transparent;
    --dxbl-chart-axis-label-font-color: var(--pfx-muted);
    --dxbl-chart-constant-line-color: var(--pfx-ink);
    --dxbl-chart-error-bar-color: var(--pfx-ink);
}
html[data-pfx-theme="dark"] .dxbl-chatui-root {
    --dx-chatui-messagelist-bg: var(--pfx-surface-2);
    --dx-chatui-message-color: var(--pfx-ink);
    --dx-chatui-message-user-color: var(--pfx-ink);
    --dx-chatui-submitarea-bg: var(--pfx-surface);
    --dx-chatui-empty-icon-color: var(--pfx-muted);
    --dx-chatui-empty-text-title-color: var(--pfx-ink);
    --dx-chatui-suggestion-item-bg: var(--pfx-surface-3);
    --dx-chatui-suggestion-item-border-color: var(--pfx-line);
    --dx-chatui-suggestion-item-active-border-color: var(--pfx-line);
    --dx-chatui-suggestion-item-title-color: var(--pfx-ink);
    --dx-chatui-suggestion-item-hover-text-color: var(--pfx-ink);
    --dx-chatui-suggestion-item-active-text-color: var(--pfx-ink);
    --dx-chatui-function-call-expander-bg: var(--pfx-surface-3);
}
html[data-pfx-theme="dark"] .dxbl-scheduler {
    --dxbl-scheduler-background-color: var(--pfx-surface);
    --dxbl-scheduler-border-color: var(--pfx-line);
    --dxbl-scheduler-cell-hover-color: var(--pfx-hover);
    --dxbl-scheduler-cell-text-color: var(--pfx-ink);
}
html[data-pfx-theme="dark"] :is(.dxbl-sc-hint, .dxbl-apt-edit-dialog) {
    --dxbl-scheduler-flyout-background-color: var(--pfx-surface);
    --dxbl-scheduler-flyout-border-color: var(--pfx-line);
    --dxbl-scheduler-flyout-header-btn-hover-color: var(--pfx-hover);
}
html[data-pfx-theme="dark"] .dxbl-pivot-table {
    --dxbl-pivot-table-bg: var(--pfx-surface);
    --dxbl-pivot-table-color: var(--pfx-ink);
    --dxbl-pivot-table-border-color: var(--pfx-line-soft);
    --dxbl-pivot-table-fixed-column-border-color: var(--pfx-line);
}
html[data-pfx-theme="dark"] .dxbl-pivot-table-draggable-header {
    --dxbl-pivot-table-draggable-header-border-color: var(--pfx-line);
}
html[data-pfx-theme="dark"] .dxbl-pivotgrid {
    --dxbl-pivot-bg: var(--pfx-surface);
    --dxbl-pivot-color: var(--pfx-ink);
    --dxbl-pivot-border-color: var(--pfx-line-soft);
}

/* 11c. Filtereditor ("Criteria bewerken") — dark mode ----------------------------
   De popup van een criteria-veld (o.a. het filter van de bulk edit) is de KO/DevExtreme-
   filtereditor, geen dxbl-component. Zijn kleuren komen uit DevExtreme's dx.light.css: #333-tekst,
   lichte randen, witte vinkjes en tekstvakken, en "pillen" die 30% doorschijnend over wit bedoeld
   zijn — op donker werd dat donker op donker. Hier omgezet met de pfx-tokens; de pillen houden hun
   kleur als tint (zelfde aanpak als elders op donker) met lichte tekst, geselecteerd blijft solide
   met witte tekst zoals in light. */
html[data-pfx-theme="dark"] :is(.dx-filtereditor, .dx-filtereditor-criteriaoperator-popup, .popup-filter-wrapper) :is(.dx-widget, .dxd-text-primary, .dx-checkbox-text, .dx-list-item, .dx-popup-title) {
    color: var(--pfx-ink);
}
html[data-pfx-theme="dark"] :is(.dx-filtereditor, .dx-filtereditor-criteriaoperator-popup) .dxd-text-info {
    color: var(--pfx-text-soft);
}
html[data-pfx-theme="dark"] :is(.dx-filtereditor, .dx-filtereditor-criteriaoperator-popup) :is(.dxd-border-primary, .dx-list-item, .dx-popup-title),
html[data-pfx-theme="dark"] .dx-filtereditor .dx-filtereditor-tree {
    border-color: var(--pfx-line);
}
html[data-pfx-theme="dark"] :is(.dx-filtereditor, .dx-filtereditor-criteriaoperator-popup) :is(.dxd-back-primary, .dxd-back-secondary) {
    background-color: var(--pfx-surface-3);
}
html[data-pfx-theme="dark"] :is(.dx-filtereditor, .dx-filtereditor-criteriaoperator-popup) .dxd-back-primary2 {
    background-color: var(--pfx-surface);
}
/* Tekst in de pillen (veld, operator, waarde, "And"/"Or") */
html[data-pfx-theme="dark"] .dx-filtereditor .dxd-filter-editor-text-color {
    color: var(--pfx-ink);
    fill: var(--pfx-ink);
}
html[data-pfx-theme="dark"] .dx-filtereditor .dxd-filter-editor-text-color.dxd-state-selected,
html[data-pfx-theme="dark"] .dx-filtereditor .dxd-state-selected .dxd-filter-editor-text-color {
    color: #fff;
    fill: #fff;
}
html[data-pfx-theme="dark"] .dx-filtereditor .dxd-filter-editor-group-back-color { background-color: rgba(217, 83, 79, .35); }
html[data-pfx-theme="dark"] .dx-filtereditor .dxd-filter-editor-group-back-color:hover:not(.dxd-state-no-hover) { background-color: rgba(217, 83, 79, .5); }
html[data-pfx-theme="dark"] .dx-filtereditor .dxd-filter-editor-field-back-color { background-color: rgba(28, 168, 221, .35); }
html[data-pfx-theme="dark"] .dx-filtereditor .dxd-filter-editor-field-back-color:hover:not(.dxd-state-no-hover) { background-color: rgba(28, 168, 221, .5); }
html[data-pfx-theme="dark"] .dx-filtereditor .dxd-filter-editor-parameter-back-color { background-color: rgba(240, 173, 78, .35); }
html[data-pfx-theme="dark"] .dx-filtereditor .dxd-filter-editor-parameter-back-color:hover:not(.dxd-state-no-hover) { background-color: rgba(240, 173, 78, .5); }
html[data-pfx-theme="dark"] .dx-filtereditor .dxd-filter-editor-operator-back-color { background-color: rgba(92, 184, 92, .35); }
html[data-pfx-theme="dark"] .dx-filtereditor .dxd-filter-editor-operator-back-color:hover:not(.dxd-state-no-hover) { background-color: rgba(92, 184, 92, .5); }
/* Waarde-pil: in light lichtgrijs; op donker zou dat een middengrijs vlak onder lichte tekst geven. */
html[data-pfx-theme="dark"] .dx-filtereditor .dxd-filter-editor-value-back-color { background-color: rgba(255, 255, 255, .08); }
html[data-pfx-theme="dark"] .dx-filtereditor .dxd-filter-editor-value-back-color:hover:not(.dxd-state-no-hover) { background-color: rgba(255, 255, 255, .14); }
/* Waas over de boom zolang Advanced Mode aan staat: in light een witte laag. */
html[data-pfx-theme="dark"] .dx-filtereditor .dx-filtereditor-plain-content .dx-filtereditor-plain-disabled {
    background: rgba(0, 0, 0, .45);
}
/* Vinkje "Advanced Mode" (het aangevinkte icoon is blauw op het vlak en blijft zo zichtbaar) */
html[data-pfx-theme="dark"] :is(.dx-filtereditor, .popup-filter-wrapper) .dx-checkbox-icon {
    background-color: var(--pfx-surface-3);
    border-color: var(--pfx-line);
}
/* Tekstvak van Advanced Mode en het zoekvak in de uitklaplijst */
html[data-pfx-theme="dark"] :is(.dx-filtereditor, .dx-filtereditor-criteriaoperator-popup) .dx-texteditor.dx-editor-outlined {
    background: var(--pfx-surface-3);
    border-color: var(--pfx-line);
}
html[data-pfx-theme="dark"] :is(.dx-filtereditor, .dx-filtereditor-criteriaoperator-popup) .dx-texteditor-input {
    color: var(--pfx-ink);
}
html[data-pfx-theme="dark"] :is(.dx-filtereditor, .dx-filtereditor-criteriaoperator-popup) .dx-placeholder {
    color: var(--pfx-muted);
}
html[data-pfx-theme="dark"] .dx-designer-viewport .dx-filtereditor-ace.ace_editor,
html[data-pfx-theme="dark"] .dx-filtereditor-ace.ace_editor .ace_gutter {
    background-color: var(--pfx-surface-3);
    color: var(--pfx-ink);
}
/* Syntaxkleuren in het Advanced Mode-vak. De editor draait op Ace's lichte "dreamweaver"-thema
   (velden #06F, waarden #00F, operatoren grijsblauw): op het donkere vlak onleesbaar. Hier lichte
   tinten met dezelfde rolverdeling — veld, waarde, operator en functie blijven van elkaar te
   onderscheiden. */
html[data-pfx-theme="dark"] .dx-filtereditor-ace .ace_variable { color: #7DD3FC; }
html[data-pfx-theme="dark"] .dx-filtereditor-ace .ace_string { color: #F2B880; }
html[data-pfx-theme="dark"] .dx-filtereditor-ace :is(.ace_keyword, .ace_storage) { color: #8AB4F8; }
html[data-pfx-theme="dark"] .dx-filtereditor-ace .ace_keyword.ace_operator { color: var(--pfx-text-soft); }
html[data-pfx-theme="dark"] .dx-filtereditor-ace :is(.ace_constant, .ace_constant.ace_numeric, .ace_constant.ace_language, .ace_constant.ace_buildin) { color: #C3A6FF; }
html[data-pfx-theme="dark"] .dx-filtereditor-ace :is(.ace_support.ace_function, .ace_entity.ace_name.ace_function) { color: #E6D17E; }
html[data-pfx-theme="dark"] .dx-filtereditor-ace .ace_comment { color: #8FB996; }
html[data-pfx-theme="dark"] .dx-filtereditor-ace :is(.ace_paren, .ace_text-layer) { color: var(--pfx-ink); }
html[data-pfx-theme="dark"] .dx-filtereditor-ace .ace_cursor {
    color: var(--pfx-ink);
    border-color: var(--pfx-ink);
}
html[data-pfx-theme="dark"] .dx-filtereditor-ace .ace_marker-layer .ace_selection { background: rgba(255, 255, 255, .18); }
html[data-pfx-theme="dark"] .dx-filtereditor-ace .ace_marker-layer .ace_active-line { background: rgba(255, 255, 255, .05); }
html[data-pfx-theme="dark"] .dx-filtereditor-ace .ace_marker-layer .ace_bracket { border-color: rgba(255, 255, 255, .35); }
html[data-pfx-theme="dark"] .dx-filtereditor-ace .ace_gutter-active-line { background-color: rgba(255, 255, 255, .05); }
/* Uitklaplijst (veld/operator kiezen): een DevExtreme-overlay, in light wit met #ddd-randen. */
html[data-pfx-theme="dark"] .dx-filtereditor-criteriaoperator-popup.dx-popup-wrapper > .dx-overlay-content,
html[data-pfx-theme="dark"] .dx-overlay-wrapper.dx-filtereditor-criteriaoperator-popup .dx-overlay-content {
    background: var(--pfx-surface);
    border-color: var(--pfx-line);
    color: var(--pfx-ink);
}
html[data-pfx-theme="dark"] .dx-filtereditor-criteriaoperator-popup .dx-popup-content.dx-popup-content-scrollable .dxd-list-item-back-color:hover:before {
    background-color: #fff;
}

/* 11b. Inlogscherm — dark mode -------------------------------------------------
   Valt buiten #main-view-content en de popups, dus de regels hierboven raken het niet. */
/* Logo: de dark-variant per merk staat in sectie 3 (.header-logo), geldt ook hier. */
/* Kaart iets lichter dan de pagina, zoals elke kaart in de app; anders is hij alleen een rand. */
html[data-pfx-theme="dark"] #logon-template-component .logon-main.card {
    background-color: var(--pfx-surface);
    border-color: var(--pfx-card-line);
}
/* Taalkeuze rechts in de kaartkop: XAF's ToolbarLanguageSwitcher, een toolbar met één "plain"
   knop (taalnaam + pijltje). Kleur hier rechtstreeks op de knop, los van de DevExpress-variabelen,
   en de toolbar zelf doorzichtig — anders stond er een los donker blok in de kop. */
html[data-pfx-theme="dark"] .toolbar-language-switcher-wrapper :is(.dxbl-toolbar, .dxbl-toolbar-group) {
    background: transparent !important;
}
html[data-pfx-theme="dark"] .toolbar-language-switcher-wrapper .dxbl-btn {
    color: var(--pfx-ink) !important;
}

/* 11d. Audit dark mode 2026-10-08 — resterende DevExpress-gaten -------------------
   Systematisch nagelopen op de patronen die eerder losse fixes nodig hadden: lichte
   componentvariabelen, zwarte ::before-overlays (hover/klik), en selecties die door onze
   dekkende vlakken wegvallen. Kleurparen (vlak + tekst) altijd samen. */

/* Gridselectie en -focus. Onze dekkende td-achtergrond (sectie 11) schildert over DevExpress'
   selectiekleur en de oranje focus-laag (::before, z-index -1) heen: geselecteerde en gefocuste rijen
   waren niet te zien. Rechtstreeks een accenttint, met een sterkere tint bij hover. */
/* Rijen met een kleur uit een opmaakregel houden die (met donkere tekst); daar geen tint overheen. */
html[data-pfx-theme="dark"] .dxbl-grid .dxbl-grid-selected-row:where(:not([style*="background"])) > td:where(:not([style*="background"])) {
    background: rgba(var(--pfx-accent-rgb), .18) !important;
}
html[data-pfx-theme="dark"] .dxbl-grid .dxbl-grid-focused-row:where(:not([style*="background"])) > td:where(:not([style*="background"])) {
    background: rgba(var(--pfx-accent-rgb), .26) !important;
    color: var(--pfx-ink) !important;
}
html[data-pfx-theme="dark"] .dxbl-grid :is(.dxbl-grid-selected-row, .dxbl-grid-focused-row):where(:not([style*="background"])):hover > td:where(:not([style*="background"])) {
    background: rgba(var(--pfx-accent-rgb), .32) !important;
}
/* Footer- en groepsfooterrijen (totalen): de band was een zwarte laag van 2-3%. */
html[data-pfx-theme="dark"] .dxbl-grid .dxbl-grid-table :is(.dxbl-grid-footer-row, .dxbl-grid-group-footer-row) > td {
    background-color: var(--pfx-surface-3) !important;
    color: var(--pfx-ink);
}
html[data-pfx-theme="dark"] .dxbl-grid-edit-canceled-notification > span {
    color: var(--pfx-ink);
}

/* Zoekmarkering in de menubalk-zoeker (accordion) en in boomlijsten: geel blok → dezelfde gedempte
   ambertint als in grids en keuzelijsten. */
html[data-pfx-theme="dark"] .dxbl-accordion {
    --dxbl-accordion-filter-content-bg-color: rgba(224, 164, 0, .38);
    --dxbl-accordion-filter-content-color: #FFF6DC;
}
html[data-pfx-theme="dark"] .dxbl-treeview {
    --dxbl-treeview-navigation-filter-content-bg-color: rgba(224, 164, 0, .38);
    --dxbl-treeview-navigation-filter-content-color: #FFF6DC;
}

/* Focus (Tab) op secundaire knoppen, bv. Annuleren in een popup: DevExpress zet focus-vlak en
   -tekst op #fff / #343a40 met een zwaardere selector — een wit blok met lichte tekst. */
html[data-pfx-theme="dark"] .dxbl-btn.dxbl-btn-secondary {
    --dxbl-btn-focus-bg: var(--pfx-surface-3) !important;
    --dxbl-btn-focus-color: var(--pfx-ink) !important;
    --dxbl-btn-focus-border-bg: var(--pfx-line) !important;
    --dxbl-btn-focus-border-color: var(--pfx-line) !important;
}
html[data-pfx-theme="dark"] .dxbl-btn:is(.dxbl-btn-outline-secondary, .dxbl-btn-text-secondary) {
    --dxbl-btn-focus-bg: rgba(255, 255, 255, .08) !important;
    --dxbl-btn-focus-color: var(--pfx-ink) !important;
    --dxbl-btn-focus-border-bg: var(--pfx-line) !important;
    --dxbl-btn-focus-border-color: var(--pfx-line) !important;
}
/* text-secondary is randloos, maar krijgt bij hover/klik een #212529/#495057-rand. */
html[data-pfx-theme="dark"] .dxbl-btn.dxbl-btn-text-secondary {
    --dxbl-btn-hover-border-color: transparent !important;
    --dxbl-btn-active-border-color: transparent !important;
}
/* Filterbouwer: veld/operator/waarde-knoppen hebben eigen tekst- en randkleuren (#343a40/#495057). */
html[data-pfx-theme="dark"] .dxbl-filter-builder .dxbl-btn {
    --dxbl-btn-color: var(--pfx-ink) !important;
    --dxbl-btn-hover-color: var(--pfx-ink) !important;
    --dxbl-btn-active-color: var(--pfx-ink) !important;
    --dxbl-btn-focus-color: var(--pfx-ink) !important;
    --dxbl-btn-hover-border-color: var(--pfx-line) !important;
    --dxbl-btn-active-border-color: var(--pfx-line) !important;
    --dxbl-btn-focus-border-bg: var(--pfx-line) !important;
    --dxbl-btn-disabled-color: var(--pfx-muted) !important;
    --dxbl-btn-disabled-border-color: var(--pfx-line) !important;
}
/* Toolbar-scheidingslijnen en de lijnen in de uitklapmenu's van de HTML-editor (die zweven los van
   de ribbon, dus de ribbon-variabelen uit 11 komen daar niet aan). */
html[data-pfx-theme="dark"] :is(.dxbl-btn-toolbar, .dxbl-btn-toolbar > .dxbl-adaptive-container-content) {
    --dxbl-btn-toolbar-separator-color: var(--pfx-line);
}
html[data-pfx-theme="dark"] .dxbl-toolbar-dropdown .dxbl-toolbar-dropdown-item-list {
    --dxbl-ribbon-horizontal-separator-color: var(--pfx-line);
    --dxbl-ribbon-color-picker-outline: 1px solid var(--pfx-line);
}

/* Invoervelden: wis-rondje (×) was #545558 en bij hover #222 — op donker onzichtbaar; de
   scrollbalk van meerregelige velden en de "geen gegevens"-tekst in keuzelijsten idem. */
html[data-pfx-theme="dark"] .dxbl-text-edit {
    --dxbl-text-edit-clear-btn-bg: var(--pfx-label);
    --dxbl-text-edit-clear-btn-hover-bg: var(--pfx-text-soft);
}
html[data-pfx-theme="dark"] .dxbl-text-edit.dxbl-memo-edit {
    --dxbl-memo-edit-scroll-color: var(--pfx-line);
}
html[data-pfx-theme="dark"] :is(.dxbl-list-box, .dxbl-list-box-render-container) {
    --dxbl-list-box-empty-data-text-color: var(--pfx-muted);
    --dxbl-list-box-empty-data-icon-color: var(--pfx-muted);
}
html[data-pfx-theme="dark"] :is(.dxbl-list-box, .dxbl-list-box-render-container) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > thead > tr > th::before {
    background-color: #fff !important;
}

/* Kalender (datumvelden): hover op een dag, de kop- en voetband, de geselecteerde dag (vaste
   oranje 20% → accent, beter zichtbaar) en dagen van de vorige/volgende maand. */
html[data-pfx-theme="dark"] .dxbl-calendar {
    --dxbl-calendar-not-current-view-color: var(--pfx-label);
}
html[data-pfx-theme="dark"] .dxbl-calendar :is(.dxbl-calendar-header, div.dxbl-calendar-footer)::before {
    background-color: #fff !important;
}
html[data-pfx-theme="dark"] .dxbl-calendar .dxbl-calendar-content > table > tbody > tr td:not(.dxbl-calendar-selected-item):hover::before {
    background-color: #fff !important;
    opacity: .12 !important;
}
html[data-pfx-theme="dark"] .dxbl-calendar .dxbl-calendar-content .dxbl-calendar-selected-item::before {
    background-color: var(--pfx-accent) !important;
    opacity: .45 !important;
}

/* Tabs: hover was een zwarte laag van 4%. TagBox: het randje rond een gekozen waarde idem (10%). */
html[data-pfx-theme="dark"] .dxbl-tabs-item:not(.dxbl-active):hover {
    background-color: var(--pfx-hover);
}
html[data-pfx-theme="dark"] .dxbl-tag-box > .dxbl-tag:not(.dxbl-tag-tmpl)::before {
    background-color: #fff !important;
}

/* Boomlijst: selectie in de accentkleur (DevExpress zet vast oranje), wit op accent. */
html[data-pfx-theme="dark"] .dxbl-treeview .dxbl-treeview-item-container.dxbl-active::before {
    background-color: var(--pfx-accent) !important;
}

/* Planner: geselecteerd tijdvak (#eeeff0), uitgeschakelde cellen en de sleepgreep (#252525), plus
   het basispalet waar afspraak-statusstrook en labels op leunen. */
html[data-pfx-theme="dark"] .dxbl-scheduler {
    --dxbl-scheduler-cell-active-color: var(--pfx-active);
    --dxbl-scheduler-cell-hover-disabled-color: var(--pfx-hover);
    --dxbl-scheduler-cell-active-disabled-color: var(--pfx-active);
    --dxbl-scheduler-appointment-resize-handle-color: var(--pfx-ink);
}
html[data-pfx-theme="dark"] .dxbl-scheduler-color {
    --dxbl-scheduler-white-color: var(--pfx-surface);
    --dxbl-scheduler-light-color: var(--pfx-surface-3);
    --dxbl-scheduler-light-gray-color: var(--pfx-line-soft);
    --dxbl-scheduler-disabled-color: var(--pfx-surface-2);
    --dxbl-scheduler-dark-color: var(--pfx-ink);
}

/* AI-chat (Ask X): DevExpress zet de chat zelf hard op #fff/#212529 (geen variabele), plus een reeks
   chatvariabelen die 11a nog niet had: eigen bericht (#ffe5d0), fout, bijlage, suggesties, labels. */
html[data-pfx-theme="dark"] .dxbl-chatui-root .dxbl-chatui {
    color: var(--pfx-ink);
    background-color: var(--pfx-surface);
}
html[data-pfx-theme="dark"] .dxbl-chatui-root .dxbl-chatui .dxbl-chatui-messages :is(.dxbl-chatui-message.dxbl-chatui-message-assistant, .dxbl-chatui-function-call-header) {
    color: var(--pfx-ink);
}
html[data-pfx-theme="dark"] .dxbl-chatui-root {
    --dx-chatui-message-user-bg: rgba(var(--pfx-accent-rgb), .22);
    --dx-chatui-message-assistant-bg: rgba(255, 255, 255, .06);
    --dx-chatui-message-error-bg: rgba(214, 69, 80, .18);
    --dx-chatui-message-attachment-bg: var(--pfx-surface-3);
    --dx-chatui-empty-text-caption-color: var(--pfx-muted);
    --dx-chatui-function-call-label-color: var(--pfx-text-soft);
    --dx-chatui-function-call-expander-hover-bg: var(--pfx-hover);
    --dx-chatui-submitarea-container-border-color: var(--pfx-line);
    --dx-chatui-attachment-list-item-border-color: var(--pfx-line);
    --dx-chatui-suggestion-item-text-color: var(--pfx-text-soft);
    --dx-chatui-suggestion-item-focus-bg: var(--pfx-surface-3);
    --dx-chatui-suggestion-item-focus-border-color: var(--pfx-ink);
    --dx-chatui-suggestion-item-hover-bg: var(--pfx-hover);
    --dx-chatui-suggestion-item-active-bg: rgba(255, 255, 255, .12);
}

/* Berichtvenster (DxMessageBox): achtergrond en kop-/knoptekst stonden op wit/#495057. */
html[data-pfx-theme="dark"] .dxbl-message-box {
    --dxbl-message-box-background-color: var(--pfx-surface) !important;
    --dxbl-message-box-header-font-color: var(--pfx-ink) !important;
    --dxbl-message-box-header-close-icon-color: var(--pfx-text-soft) !important;
    --dxbl-message-box-footer-secondary-button-color: var(--pfx-ink) !important;
    --dxbl-message-box-footer-secondary-button-hover-color: var(--pfx-hover) !important;
}

/* Kleurkiezer-randen, en XAF: rand van de wizardpanelen en de splitter van de layout-editor. */
html[data-pfx-theme="dark"] .dxbl-color-palette {
    --dxbl-color-palette-border: 1px solid var(--pfx-line);
    --dxbl-color-palette-separator: 1px solid var(--pfx-line);
    --dxbl-color-palette-color-tile-outline: 1px solid var(--pfx-line);
}
html[data-pfx-theme="dark"] .xaf-data-source-content > .xaf-fieldset-panel {
    border-color: var(--pfx-line) !important;
}
html[data-pfx-theme="dark"] .xaf-layouteditor-splitter {
    background-color: var(--pfx-line) !important;
}