/* ============================================================
   Duinker Automatisering BV - Workforce Theme Overrides
   XAF Blazor 25.1 - Fluent Theme
   
   Sidebar + topbar ALTIJD zwart in beide modes.
   Gele accent kleur voor knoppen en interactie.
   ============================================================ */


/* ==========================================================
   OVERRIDE DS TOKENS OP SIDEBAR + HEADER
   ========================================================== */

html body div.xaf-sidebar.sidebar,
html body div.header,
html body div.logon-template-header {
    /* Surface (achtergronden) -> donker */
    --DS-color-surface-neutral-default-rest: #1a1a1a;
    --DS-color-surface-neutral-default-hovered: rgba(255, 183, 27, 0.12);
    --DS-color-surface-neutral-default-selected: rgba(255, 183, 27, 0.20);
    --DS-color-surface-neutral-default-selected-hovered: rgba(255, 183, 27, 0.25);
    --DS-color-surface-neutral-default-pressed: rgba(255, 183, 27, 0.20);
    --DS-color-surface-neutral-default-disabled: #1a1a1a;
    --DS-color-surface-neutral-subdued-rest: #1a1a1a;
    --DS-color-surface-neutral-subdued-hovered: rgba(255, 183, 27, 0.12);
    --DS-color-surface-neutral-subdued-pressed: rgba(255, 183, 27, 0.20);
    --DS-color-surface-neutral-subdued-disabled: #1a1a1a;
    --DS-color-surface-neutral-deep-rest: #242424;
    --DS-color-surface-neutral-deep-hovered: rgba(255, 183, 27, 0.12);
    --DS-color-surface-neutral-deep-pressed: rgba(255, 183, 27, 0.20);
    --DS-color-surface-neutral-deep-disabled: #1a1a1a;
    --DS-color-surface-neutral-muted-rest: rgba(26, 26, 26, 0);
    --DS-color-surface-neutral-muted-hovered: rgba(255, 183, 27, 0.08);
    --DS-color-surface-neutral-muted-pressed: rgba(255, 183, 27, 0.15);
    --DS-color-surface-neutral-muted-disabled: rgba(26, 26, 26, 0);
    --DS-color-surface-secondary-default-rest: #1a1a1a;
    --DS-color-surface-secondary-default-hovered: rgba(255, 183, 27, 0.12);
    --DS-color-surface-secondary-default-pressed: rgba(255, 183, 27, 0.20);
    --DS-color-surface-secondary-default-selected: rgba(255, 183, 27, 0.20);
    --DS-color-surface-secondary-default-disabled: #1a1a1a;
    /* Content (tekst/iconen) -> licht */
    --DS-color-content-neutral-default-rest: #ffffff;
    --DS-color-content-neutral-default-hovered: #ffffff;
    --DS-color-content-neutral-default-pressed: #ffffff;
    --DS-color-content-neutral-default-selected: #ffffff;
    --DS-color-content-neutral-default-selected-hovered: #ffffff;
    --DS-color-content-neutral-default-disabled: #808080;
    --DS-color-content-neutral-subdued-rest: #b0b0b0;
    --DS-color-content-neutral-subdued-hovered: #ffffff;
    --DS-color-content-neutral-subdued-pressed: #ffffff;
    --DS-color-content-neutral-subdued-selected: #ffffff;
    --DS-color-content-neutral-subdued-selected-hovered: #ffffff;
    --DS-color-content-neutral-subdued-disabled: #606060;
    --DS-color-content-neutral-deep-rest: #b0b0b0;
    --DS-color-content-neutral-deep-hovered: #ffffff;
    --DS-color-content-neutral-deep-pressed: #ffffff;
    --DS-color-content-neutral-deep-selected: #ffffff;
    --DS-color-content-neutral-deep-disabled: #606060;
    /* Borders -> donker */
    --DS-color-border-neutral-default-rest: #333333;
    --DS-color-border-neutral-default-hovered: #444444;
    --DS-color-border-neutral-default-pressed: #555555;
    --DS-color-border-neutral-default-disabled: #2a2a2a;
    --DS-color-border-neutral-subdued-rest: #1a1a1a;
    --DS-color-border-neutral-subdued-hovered: #242424;
    --DS-color-border-neutral-subdued-pressed: #2e2e2e;
    --DS-color-border-neutral-subdued-selected: #333333;
    --DS-color-border-neutral-subdued-selected-hovered: #444444;
    /* Shadows -> donkerder */
    --DS-color-shadow-key: rgba(0, 0, 0, 0.28);
    --DS-color-shadow-ambient: rgba(0, 0, 0, 0.24);
    /* Directe achtergrondkleur als fallback */
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}


/* ==========================================================
   SIDEBAR SPECIFIEK
   ========================================================== */

html body div.xaf-sidebar.sidebar {
    border-right: 1px solid #333333 !important;
    opacity: 1 !important;
}

/* Sidebar border ook in light mode */
[data-bs-theme="light"] div.xaf-sidebar.sidebar {
    border-right: 1px solid #333333 !important;
}

html body .sidebar-sm-shadow {
    background-color: transparent !important;
}

/* Actief nav item - DS tokens voor geel accent */
html body div.xaf-sidebar .dxbl-active {
    --DS-color-content-neutral-default-rest: #FFB71B;
    --DS-color-content-neutral-subdued-rest: #FFB71B;
    --DS-color-border-primary-default-rest: transparent;
    --DS-color-border-primary-default-selected: transparent;
    --DS-color-surface-primary-default-rest: transparent;
    --DS-color-surface-primary-default-selected: transparent;
}

/* (border, pseudo-elements, indicators → finale overrides aan eind van bestand) */

/* Zoekbalk */
html body div.xaf-sidebar .dxbl-navigation-filter {
    background-color: #242424 !important;
    border-color: #333333 !important;
}

    html body div.xaf-sidebar .dxbl-navigation-filter input {
        color: #ffffff !important;
    }

        html body div.xaf-sidebar .dxbl-navigation-filter input::placeholder {
            color: #808080 !important;
        }

/* Iconen */
html body div.xaf-sidebar .xaf-nav-menu-item-icon {
    opacity: 0.65;
}

html body div.xaf-sidebar .dxbl-active .xaf-nav-menu-item-icon,
html body div.xaf-sidebar .xaf-nav-item:hover .xaf-nav-menu-item-icon {
    opacity: 1;
}

/* Scrollbar */
html body div.xaf-sidebar::-webkit-scrollbar {
    width: 6px;
}

html body div.xaf-sidebar::-webkit-scrollbar-track {
    background: #1a1a1a;
}

html body div.xaf-sidebar::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 3px;
}

    html body div.xaf-sidebar::-webkit-scrollbar-thumb:hover {
        background: #808080;
    }


/* ==========================================================
   HEADER SPECIFIEK
   ========================================================== */

html body div.header {
    border-bottom: 1px solid #333333 !important;
}

/* Header border ook in light mode */
[data-bs-theme="light"] div.header {
    border-bottom: 1px solid #333333 !important;
}

html body div.header .btn-header {
    color: #b0b0b0 !important;
    background-color: transparent !important;
}

    html body div.header .btn-header:hover {
        color: #ffffff !important;
        background-color: #242424 !important;
    }


/* ==========================================================
   LIGHT MODE: sidebar + header IDENTIEK aan dark mode
   Nucleaire aanpak: forceer ALLES donker
   ========================================================== */

/* Forceer dark color-scheme op sidebar */
[data-bs-theme="light"] div.xaf-sidebar.sidebar {
    color-scheme: dark !important;
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

[data-bs-theme="light"] div.header {
    color-scheme: dark !important;
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* ALLE tekst in sidebar wit, borders donker, geen underline */
[data-bs-theme="light"] div.xaf-sidebar.sidebar *:not(.xaf-nav-menu-item-icon):not(img):not(svg):not(path):not(circle):not(rect):not(line) {
    color: #ffffff !important;
    border-color: #333333 !important;
    text-decoration: none !important;
}

/* Underline weg: target links en dxbl-text specifiek */
[data-bs-theme="light"] div.xaf-sidebar.sidebar a:not(.xaf-nav-menu-item-icon):not(img):not(svg):not(path):not(circle):not(rect):not(line),
[data-bs-theme="dark"] div.xaf-sidebar.sidebar a:not(.xaf-nav-menu-item-icon):not(img):not(svg):not(path):not(circle):not(rect):not(line) {
    text-decoration: none !important;
    border-bottom-style: none !important;
    border-bottom-width: 0 !important;
}

/* (active tekst/border wordt aan eind van bestand geregeld met hogere specificiteit) */

/* ALLE achtergronden in sidebar transparent (simple, geen :not hacks) */
[data-bs-theme="light"] div.xaf-sidebar.sidebar div,
[data-bs-theme="light"] div.xaf-sidebar.sidebar nav,
[data-bs-theme="light"] div.xaf-sidebar.sidebar ul,
[data-bs-theme="light"] div.xaf-sidebar.sidebar li,
[data-bs-theme="light"] div.xaf-sidebar.sidebar a,
[data-bs-theme="light"] div.xaf-sidebar.sidebar span,
[data-bs-theme="light"] div.xaf-sidebar.sidebar button {
    background-color: transparent !important;
    background: transparent !important;
}

/* Herstel sidebar root achtergrond */
[data-bs-theme="light"] div.xaf-sidebar.sidebar {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
}

    /* --- ACTIVE/SELECTED: alle items met .dxbl-active --- */
    [data-bs-theme="light"] div.xaf-sidebar.sidebar .dxbl-active,
    [data-bs-theme="light"] div.xaf-sidebar.sidebar [aria-selected="true"],
    [data-bs-theme="light"] div.xaf-sidebar.sidebar [aria-current="page"],
    [data-bs-theme="light"] div.xaf-sidebar.sidebar .dxbl-treeview-item-selected,
    [data-bs-theme="light"] div.xaf-sidebar.sidebar .xaf-nav-item-selected {
        background-color: rgba(255, 183, 27, 0.20) !important;
        background: rgba(255, 183, 27, 0.20) !important;
    }

    /* --- TOP-LEVEL menu items: NIET selected houden, alleen hover --- 
   XAF nav top-level items = direct children van de root nav/ul.
   Override de .dxbl-active terug naar transparent. */
    [data-bs-theme="light"] div.xaf-sidebar.sidebar > nav > ul > li.dxbl-active,
    [data-bs-theme="light"] div.xaf-sidebar.sidebar > nav > ul > li[aria-expanded="true"],
    [data-bs-theme="light"] div.xaf-sidebar.sidebar > .dxbl-treeview > ul > li.dxbl-active,
    [data-bs-theme="light"] div.xaf-sidebar.sidebar > .dxbl-treeview > ul > li[aria-expanded="true"],
    [data-bs-theme="light"] div.xaf-sidebar.sidebar > div > nav > ul > li.dxbl-active,
    [data-bs-theme="light"] div.xaf-sidebar.sidebar > div > nav > ul > li[aria-expanded="true"],
    [data-bs-theme="light"] div.xaf-sidebar.sidebar > div > .dxbl-treeview > ul > li.dxbl-active,
    [data-bs-theme="light"] div.xaf-sidebar.sidebar > div > .dxbl-treeview > ul > li[aria-expanded="true"],
    [data-bs-theme="light"] div.xaf-sidebar.sidebar .dxbl-nav > li.dxbl-active,
    [data-bs-theme="light"] div.xaf-sidebar.sidebar .dxbl-nav > li[aria-expanded="true"] {
        background-color: transparent !important;
        background: transparent !important;
        border-left: none !important;
    }

        [data-bs-theme="light"] div.xaf-sidebar.sidebar > nav > ul > li.dxbl-active > *,
        [data-bs-theme="light"] div.xaf-sidebar.sidebar > nav > ul > li[aria-expanded="true"] > *,
        [data-bs-theme="light"] div.xaf-sidebar.sidebar .dxbl-nav > li.dxbl-active > *,
        [data-bs-theme="light"] div.xaf-sidebar.sidebar .dxbl-nav > li[aria-expanded="true"] > * {
            color: #ffffff !important;
        }

    /* --- HOVER: geel-getinte hover, ook top-level items --- */
    [data-bs-theme="light"] div.xaf-sidebar.sidebar li:hover,
    [data-bs-theme="light"] div.xaf-sidebar.sidebar a:hover,
    [data-bs-theme="light"] div.xaf-sidebar.sidebar div.xaf-sidebar.sidebar li:hover,
    [data-bs-theme="light"] div.xaf-sidebar.sidebar li:hover > a,
    [data-bs-theme="light"] div.xaf-sidebar.sidebar li:hover > div,
    [data-bs-theme="light"] div.xaf-sidebar.sidebar li:hover > span,
    [data-bs-theme="light"] div.xaf-sidebar.sidebar [role="treeitem"]:hover,
    [data-bs-theme="light"] div.xaf-sidebar.sidebar [role="menuitem"]:hover,
    [data-bs-theme="light"] div.xaf-sidebar.sidebar > nav > ul > li:hover,
    [data-bs-theme="light"] div.xaf-sidebar.sidebar .dxbl-nav > li:hover,
    [data-bs-theme="light"] div.xaf-sidebar.sidebar .dxbl-treeview > ul > li:hover,
    [data-bs-theme="light"] div.xaf-sidebar.sidebar .dxbl-nav-link:hover {
        background-color: rgba(255, 183, 27, 0.12) !important;
        background: rgba(255, 183, 27, 0.12) !important;
    }

    /* Zoekbalk */
    [data-bs-theme="light"] div.xaf-sidebar.sidebar input {
        background-color: #242424 !important;
        background: #242424 !important;
        color: #ffffff !important;
    }

        [data-bs-theme="light"] div.xaf-sidebar.sidebar input::placeholder {
            color: #808080 !important;
        }

/* Header alles */
[data-bs-theme="light"] div.header *:not(img):not(svg):not(path) {
    color: #ffffff !important;
}

[data-bs-theme="light"] div.header .btn-header {
    color: #b0b0b0 !important;
    background-color: transparent !important;
    background: none !important;
}

    [data-bs-theme="light"] div.header .btn-header:hover {
        color: #ffffff !important;
        background-color: #242424 !important;
    }

/* DS design tokens voor light mode sidebar/header */
[data-bs-theme="light"] div.xaf-sidebar.sidebar,
[data-bs-theme="light"] div.header {
    --DS-color-surface-neutral-default-rest: #1a1a1a;
    --DS-color-surface-neutral-default-hovered: rgba(255, 183, 27, 0.12);
    --DS-color-surface-neutral-default-selected: rgba(255, 183, 27, 0.20);
    --DS-color-surface-neutral-default-selected-hovered: rgba(255, 183, 27, 0.25);
    --DS-color-surface-neutral-default-pressed: rgba(255, 183, 27, 0.20);
    --DS-color-surface-neutral-default-disabled: #1a1a1a;
    --DS-color-surface-neutral-subdued-rest: #1a1a1a;
    --DS-color-surface-neutral-subdued-hovered: rgba(255, 183, 27, 0.12);
    --DS-color-surface-neutral-subdued-pressed: rgba(255, 183, 27, 0.20);
    --DS-color-surface-neutral-subdued-disabled: #1a1a1a;
    --DS-color-surface-neutral-deep-rest: #242424;
    --DS-color-surface-neutral-deep-hovered: rgba(255, 183, 27, 0.12);
    --DS-color-surface-neutral-deep-pressed: rgba(255, 183, 27, 0.20);
    --DS-color-surface-neutral-deep-disabled: #1a1a1a;
    --DS-color-surface-neutral-muted-rest: rgba(26, 26, 26, 0);
    --DS-color-surface-neutral-muted-hovered: rgba(255, 183, 27, 0.08);
    --DS-color-surface-neutral-muted-pressed: rgba(255, 183, 27, 0.15);
    --DS-color-surface-neutral-muted-disabled: rgba(26, 26, 26, 0);
    --DS-color-surface-secondary-default-rest: #1a1a1a;
    --DS-color-surface-secondary-default-hovered: rgba(255, 183, 27, 0.12);
    --DS-color-surface-secondary-default-pressed: rgba(255, 183, 27, 0.20);
    --DS-color-surface-secondary-default-selected: rgba(255, 183, 27, 0.20);
    --DS-color-surface-secondary-default-disabled: #1a1a1a;
    --DS-color-content-neutral-default-rest: #ffffff;
    --DS-color-content-neutral-default-hovered: #ffffff;
    --DS-color-content-neutral-default-pressed: #ffffff;
    --DS-color-content-neutral-default-selected: #ffffff;
    --DS-color-content-neutral-default-selected-hovered: #ffffff;
    --DS-color-content-neutral-default-disabled: #808080;
    --DS-color-content-neutral-subdued-rest: #b0b0b0;
    --DS-color-content-neutral-subdued-hovered: #ffffff;
    --DS-color-content-neutral-subdued-pressed: #ffffff;
    --DS-color-content-neutral-subdued-selected: #ffffff;
    --DS-color-content-neutral-subdued-selected-hovered: #ffffff;
    --DS-color-content-neutral-subdued-disabled: #606060;
    --DS-color-content-neutral-deep-rest: #b0b0b0;
    --DS-color-content-neutral-deep-hovered: #ffffff;
    --DS-color-content-neutral-deep-pressed: #ffffff;
    --DS-color-content-neutral-deep-selected: #ffffff;
    --DS-color-content-neutral-deep-disabled: #606060;
    --DS-color-border-neutral-default-rest: #333333;
    --DS-color-border-neutral-default-hovered: #444444;
    --DS-color-border-neutral-default-pressed: #555555;
    --DS-color-border-neutral-default-disabled: #2a2a2a;
    --DS-color-border-neutral-subdued-rest: #1a1a1a;
    --DS-color-border-neutral-subdued-hovered: #242424;
    --DS-color-border-neutral-subdued-pressed: #2e2e2e;
    --DS-color-border-neutral-subdued-selected: #333333;
    --DS-color-border-neutral-subdued-selected-hovered: #444444;
    --DS-color-shadow-key: rgba(0, 0, 0, 0.28);
    --DS-color-shadow-ambient: rgba(0, 0, 0, 0.24);
}

/* ==========================================================
   LIGHT MODE: iconen donkergrijs/zwart (content area only)
   ========================================================== */

[data-bs-theme="light"] IMG.xaf-toolbar-item-icon,
[data-bs-theme="light"] IMG.dxbl-image,
[data-bs-theme="light"] .xaf-image svg {
    filter: saturate(0) brightness(0.75) contrast(1.3);
}

    [data-bs-theme="light"] IMG.xaf-toolbar-item-icon:hover,
    [data-bs-theme="light"] IMG.dxbl-image:hover {
        filter: saturate(0) brightness(0.55) contrast(1.4);
    }

/* Sidebar + header zijn altijd zwart -> iconen altijd geel houden */
html body div.xaf-sidebar IMG.xaf-toolbar-item-icon,
html body div.xaf-sidebar IMG.dxbl-image,
html body div.xaf-sidebar .xaf-image svg,
html body div.xaf-sidebar .xaf-navmenu svg,
html body div.header IMG.xaf-toolbar-item-icon,
html body div.header IMG.dxbl-image,
html body div.header .xaf-image svg {
    filter: none !important;
}

/* ==========================================================
   DARK MODE: sidebar geel-getinte hover/selectie
   ========================================================== */

[data-bs-theme="dark"] div.xaf-sidebar.sidebar .dxbl-active,
[data-bs-theme="dark"] div.xaf-sidebar.sidebar [aria-selected="true"],
[data-bs-theme="dark"] div.xaf-sidebar.sidebar [aria-current="page"],
[data-bs-theme="dark"] div.xaf-sidebar.sidebar .dxbl-treeview-item-selected,
[data-bs-theme="dark"] div.xaf-sidebar.sidebar .xaf-nav-item-selected {
    background-color: rgba(255, 183, 27, 0.20) !important;
    background: rgba(255, 183, 27, 0.20) !important;
}

    [data-bs-theme="dark"] div.xaf-sidebar.sidebar .dxbl-active *,
    [data-bs-theme="dark"] div.xaf-sidebar.sidebar [aria-selected="true"] *,
    [data-bs-theme="dark"] div.xaf-sidebar.sidebar [aria-current="page"] *,
    [data-bs-theme="dark"] div.xaf-sidebar.sidebar .dxbl-treeview-item-selected *,
    [data-bs-theme="dark"] div.xaf-sidebar.sidebar .xaf-nav-item-selected * {
        color: #FFB71B !important;
    }

/* Dark mode: top-level NIET selected houden */
[data-bs-theme="dark"] div.xaf-sidebar.sidebar > nav > ul > li.dxbl-active,
[data-bs-theme="dark"] div.xaf-sidebar.sidebar > nav > ul > li[aria-expanded="true"],
[data-bs-theme="dark"] div.xaf-sidebar.sidebar > div > nav > ul > li.dxbl-active,
[data-bs-theme="dark"] div.xaf-sidebar.sidebar > div > nav > ul > li[aria-expanded="true"],
[data-bs-theme="dark"] div.xaf-sidebar.sidebar > div > .dxbl-treeview > ul > li.dxbl-active,
[data-bs-theme="dark"] div.xaf-sidebar.sidebar > div > .dxbl-treeview > ul > li[aria-expanded="true"],
[data-bs-theme="dark"] div.xaf-sidebar.sidebar .dxbl-nav > li.dxbl-active,
[data-bs-theme="dark"] div.xaf-sidebar.sidebar .dxbl-nav > li[aria-expanded="true"] {
    background-color: transparent !important;
    background: transparent !important;
    border-left: none !important;
}

    [data-bs-theme="dark"] div.xaf-sidebar.sidebar > nav > ul > li.dxbl-active > *,
    [data-bs-theme="dark"] div.xaf-sidebar.sidebar > nav > ul > li[aria-expanded="true"] > *,
    [data-bs-theme="dark"] div.xaf-sidebar.sidebar .dxbl-nav > li.dxbl-active > *,
    [data-bs-theme="dark"] div.xaf-sidebar.sidebar .dxbl-nav > li[aria-expanded="true"] > * {
        color: #ffffff !important;
    }

/* Dark mode hover */
[data-bs-theme="dark"] div.xaf-sidebar.sidebar li:hover,
[data-bs-theme="dark"] div.xaf-sidebar.sidebar a:hover,
[data-bs-theme="dark"] div.xaf-sidebar.sidebar li:hover > a,
[data-bs-theme="dark"] div.xaf-sidebar.sidebar li:hover > div,
[data-bs-theme="dark"] div.xaf-sidebar.sidebar li:hover > span,
[data-bs-theme="dark"] div.xaf-sidebar.sidebar [role="treeitem"]:hover,
[data-bs-theme="dark"] div.xaf-sidebar.sidebar [role="menuitem"]:hover,
[data-bs-theme="dark"] div.xaf-sidebar.sidebar .dxbl-nav-link:hover {
    background-color: rgba(255, 183, 27, 0.12) !important;
    background: rgba(255, 183, 27, 0.12) !important;
}

/* (underline removal → finale overrides aan eind van bestand) */

/* ==========================================================
   DARK MODE: iconen geel houden (standaard)
   ========================================================== */

[data-bs-theme="dark"] IMG.xaf-toolbar-item-icon,
[data-bs-theme="dark"] IMG.dxbl-image,
[data-bs-theme="dark"] .xaf-image svg,
[data-bs-theme="dark"] .xaf-navmenu svg {
    filter: none;
}


/* ==========================================================
   DUINKER GEEL ACCENT - PRIMAIRE KNOPPEN
   Geldt overal (login, toolbar, popups, etc.)
   ========================================================== */

html body .dxbl-btn-primary,
html body .dxbl-btn.dxbl-btn-primary,
html body button.dxbl-btn-primary {
    background-color: #FFB71B !important;
    border-color: #FFB71B !important;
    color: #1a1a1a !important;
}

    html body .dxbl-btn-primary:hover,
    html body .dxbl-btn.dxbl-btn-primary:hover,
    html body button.dxbl-btn-primary:hover {
        background-color: #E6A200 !important;
        border-color: #E6A200 !important;
        color: #1a1a1a !important;
    }

    html body .dxbl-btn-primary:active,
    html body .dxbl-btn.dxbl-btn-primary:active {
        background-color: #CC8F00 !important;
        border-color: #CC8F00 !important;
        color: #1a1a1a !important;
    }

    html body .dxbl-btn-primary:focus,
    html body .dxbl-btn.dxbl-btn-primary:focus {
        box-shadow: 0 0 0 2px rgba(255, 183, 27, 0.3) !important;
    }

/* Login pagina specifiek - Log In knop */
html body .xaf-logon .dxbl-btn,
html body .xaf-logon button[type="submit"],
html body form .dxbl-btn-primary {
    background-color: #FFB71B !important;
    border-color: #FFB71B !important;
    color: #1a1a1a !important;
}

    html body .xaf-logon .dxbl-btn:hover,
    html body .xaf-logon button[type="submit"]:hover,
    html body form .dxbl-btn-primary:hover {
        background-color: #E6A200 !important;
        border-color: #E6A200 !important;
    }


/* ==========================================================
   LIGHT MODE: Settings bar DARK maken
   .settings-bar.card met Bootstrap .nav-pills
   Hoge specificiteit nodig om Bootstrap .card te overrulen
   ========================================================== */

html body .settings-bar,
html body .settings-bar.card,
html body div.settings-bar,
html body div.settings-bar.card {
    background-color: #2a2a2a !important;
    background: #2a2a2a !important;
    color: #ffffff !important;
    border-color: #444444 !important;
    color-scheme: dark !important;
}

    html body .settings-bar *:not(.image) {
        color: #ffffff !important;
    }

    html body .settings-bar .text-body {
        color: #ffffff !important;
    }

    html body .settings-bar .themes-menu,
    html body .settings-bar nav.themes-menu {
        background-color: transparent !important;
        background: transparent !important;
        border-color: #444444 !important;
    }

        html body .settings-bar .card,
        html body .settings-bar .themes-menu.card,
        html body .settings-bar nav.card,
        html body .settings-bar li.card {
            background-color: transparent !important;
            background: transparent !important;
            border-color: #444444 !important;
            color: #ffffff !important;
        }

    /* Combo boxes in settings (size mode, language) */
    html body .settings-bar input,
    html body .settings-bar .dxbl-text-edit-input,
    html body .settings-bar input[type="text"] {
        background-color: #1a1a1a !important;
        background: #1a1a1a !important;
        color: #ffffff !important;
        border-color: #555555 !important;
    }

    html body .settings-bar .dxbl-text-edit {
        background-color: #1a1a1a !important;
        border-color: #555555 !important;
    }

    html body .settings-bar .dxbl-btn,
    html body .settings-bar button,
    html body .settings-bar .dxbl-btn-outline-secondary,
    html body .settings-bar .dxbl-edit-btn-dropdown {
        background-color: #1a1a1a !important;
        background: #1a1a1a !important;
        border-color: #555555 !important;
        color: #ffffff !important;
    }

        html body .settings-bar .dxbl-btn:hover,
        html body .settings-bar button:hover {
            background-color: #3a3a3a !important;
            background: #3a3a3a !important;
        }

    /* Theme keuze links */
    html body .settings-bar .nav-link {
        color: #b0b0b0 !important;
    }

        html body .settings-bar .nav-link:hover {
            color: #ffffff !important;
            background-color: #3a3a3a !important;
        }

        html body .settings-bar .nav-link.active {
            color: #FFB71B !important;
            background-color: #3a3a3a !important;
        }

    /* SVG icons in settings wit maken */
    html body .settings-bar svg.dxbl-image {
        filter: invert(1) !important;
    }

    /* Border van de card sections */
    html body .settings-bar .border-start-0 {
        border-color: #444444 !important;
    }

/* ==========================================================
   Account / Login dropdown DARK maken
   .account-main.dropdown-menu - Bootstrap dropdown
   ========================================================== */

html body .account-main,
html body .account-main.dropdown-menu,
html body .dropdown-menu.account-main {
    background-color: #2a2a2a !important;
    background: #2a2a2a !important;
    color: #ffffff !important;
    border-color: #444444 !important;
    color-scheme: dark !important;
}

    html body .account-main *,
    html body .account-main.dropdown-menu * {
        color: #ffffff !important;
    }

    html body .account-main .dropdown-item,
    html body .account-main a,
    html body .account-main button {
        color: #ffffff !important;
        background-color: transparent !important;
    }

        html body .account-main .dropdown-item:hover,
        html body .account-main a:hover,
        html body .account-main button:hover {
            color: #ffffff !important;
            background-color: #3a3a3a !important;
            background: #3a3a3a !important;
        }

        html body .account-main .dropdown-item:focus,
        html body .account-main .dropdown-item.active {
            color: #FFB71B !important;
            background-color: #3a3a3a !important;
        }

    html body .account-main .dropdown-divider,
    html body .account-main hr {
        border-color: #444444 !important;
        opacity: 1 !important;
    }

    html body .account-main input,
    html body .account-main select {
        background-color: #1a1a1a !important;
        color: #ffffff !important;
        border-color: #555555 !important;
    }

/* ==========================================================
   LOGIN PAGINA - HEADER
   De login pagina kan een andere header structuur hebben.
   Force zwart op alle mogelijke header elementen.
   ========================================================== */

html body div.logon-template-header {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #333333 !important;
    color: #ffffff !important;
}

    html body div.logon-template-header .header-logo {
        color: #ffffff !important;
    }

/* Login header in light mode */
[data-bs-theme="light"] div.logon-template-header {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

    [data-bs-theme="light"] div.logon-template-header * {
        color: #ffffff !important;
    }

/* ==========================================================
   FINALE OVERRIDES - hoogste specificiteit, laatste in cascade
   
   Wildcard specificiteit = (0, 4, 6):
     [attr](0,1,0) div(0,0,1) .cls(0,1,0) .cls(0,1,0) 
     *:not(.cls)(0,1,0) :not(type)x5(0,0,5)
   
   Active specificiteit hieronder = (0, 5, 6):
     Zelfde + .dxbl-active(0,1,0) = wint altijd
   ========================================================== */

/* 1. ACTIVE TEKST GEEL in light mode */
[data-bs-theme="light"] div.xaf-sidebar.sidebar .dxbl-active *:not(.xaf-nav-menu-item-icon):not(img):not(svg):not(path):not(circle):not(rect):not(line),
[data-bs-theme="light"] div.xaf-sidebar.sidebar [aria-selected="true"] *:not(.xaf-nav-menu-item-icon):not(img):not(svg):not(path):not(circle):not(rect):not(line),
[data-bs-theme="light"] div.xaf-sidebar.sidebar [aria-current="page"] *:not(.xaf-nav-menu-item-icon):not(img):not(svg):not(path):not(circle):not(rect):not(line) {
    color: #FFB71B !important;
}

/* 2. UNDERLINE WEG - via dezelfde hoge specificiteit */
[data-bs-theme="light"] div.xaf-sidebar.sidebar *:not(.xaf-nav-menu-item-icon):not(img):not(svg):not(path):not(circle):not(rect):not(line) {
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
    text-decoration-line: none !important;
}

/* Underline via DevExpress .dxbl-text border-bottom - hoge specificiteit */
[data-bs-theme="light"] div.xaf-sidebar.sidebar .dxbl-text:not(.xaf-nav-menu-item-icon):not(img):not(svg):not(path):not(circle):not(rect):not(line),
[data-bs-theme="dark"] div.xaf-sidebar.sidebar .dxbl-text:not(.xaf-nav-menu-item-icon):not(img):not(svg):not(path):not(circle):not(rect):not(line),
html body div.xaf-sidebar.sidebar .dxbl-text,
html body div.xaf-sidebar.sidebar .dxbl-text *,
html body div.xaf-sidebar.sidebar a .dxbl-text,
html body div.xaf-sidebar.sidebar .dxbl-active .dxbl-text {
    --dxbl-text-border-style: none !important;
    --dxbl-text-border-color: transparent !important;
    --dxbl-text-border-width: 0 !important;
    border-bottom: none !important;
    border-bottom-style: none !important;
    border-bottom-width: 0px !important;
    text-decoration: none !important;
}

/* 3. GELE STREEP LINKS - zelfde breedte in beide modes */
html body div.xaf-sidebar .dxbl-active,
[data-bs-theme="light"] div.xaf-sidebar .dxbl-active,
[data-bs-theme="dark"] div.xaf-sidebar .dxbl-active {
    border: none !important;
    border-left: none !important;
    outline: none !important;
    box-shadow: inset 4px 0 0 0 #FFB71B !important;
    border-radius: 0 !important;
}

    /* Kill DX indicator - pseudo-elements en dedicated elementen */
    html body div.xaf-sidebar .dxbl-active::before,
    html body div.xaf-sidebar .dxbl-active::after,
    html body div.xaf-sidebar .dxbl-active > *::before,
    html body div.xaf-sidebar .dxbl-active > *::after,
    html body div.xaf-sidebar [aria-selected="true"]::before,
    html body div.xaf-sidebar [aria-selected="true"]::after,
    [data-bs-theme="light"] div.xaf-sidebar .dxbl-active::before,
    [data-bs-theme="light"] div.xaf-sidebar .dxbl-active::after,
    [data-bs-theme="dark"] div.xaf-sidebar .dxbl-active::before,
    [data-bs-theme="dark"] div.xaf-sidebar .dxbl-active::after {
        display: none !important;
        content: none !important;
        width: 0 !important;
        height: 0 !important;
        border: none !important;
        background: none !important;
        box-shadow: none !important;
        opacity: 0 !important;
    }

    /* Children: geen eigen borders (die de streep dubbelen) */
    html body div.xaf-sidebar .dxbl-active *,
    [data-bs-theme="light"] div.xaf-sidebar .dxbl-active *,
    [data-bs-theme="dark"] div.xaf-sidebar .dxbl-active * {
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

/* DX indicator element zelf */
html body div.xaf-sidebar .dxbl-nav-indicator,
html body div.xaf-sidebar [class*="indicator"],
html body div.xaf-sidebar [class*="selection-bar"] {
    display: none !important;
    width: 0 !important;
    opacity: 0 !important;
}

/* 4. TOP-LEVEL: geen gele streep, geen selectie-achtergrond */
[data-bs-theme="light"] div.xaf-sidebar.sidebar > nav > ul > li.dxbl-active,
[data-bs-theme="light"] div.xaf-sidebar.sidebar .dxbl-nav > li.dxbl-active,
[data-bs-theme="light"] div.xaf-sidebar.sidebar > div > nav > ul > li.dxbl-active,
[data-bs-theme="dark"] div.xaf-sidebar.sidebar > nav > ul > li.dxbl-active,
[data-bs-theme="dark"] div.xaf-sidebar.sidebar .dxbl-nav > li.dxbl-active,
[data-bs-theme="dark"] div.xaf-sidebar.sidebar > div > nav > ul > li.dxbl-active {
    box-shadow: none !important;
    background: transparent !important;
}