/* DevExpress / XAF specific overrides only (.dxbl-*) */

.dxbl-theme-fluent .app {
    background-color: var(--focara-app-bg, var(--bg-soft)) !important;
    color: var(--dxds-color-content-neutral-default-rest);
}

.dxbl-theme-fluent.dxbl-theme-dark .app {
    --focara-app-bg: #191c20;
}

.dxbl-theme-fluent:not(.dxbl-theme-dark) .app {
    --focara-app-bg: #f6f9fc;
}

:root[data-theme="dark"],
:root[data-bs-theme="dark"],
[data-theme="dark"],
[data-bs-theme="dark"],
.app[data-theme="dark"],
.app[data-bs-theme="dark"] {
    --focara-app-bg: #191c20;
}

:root[data-theme="light"],
:root[data-bs-theme="light"],
[data-theme="light"],
[data-bs-theme="light"] {
    --focara-app-bg: #f6f9fc;
}

.dxbl-modal > .dxbl-modal-root > .dxbl-popup.dxbl-popup-scrollable > .dxbl-modal-content {
    max-height: 100vh;
    overflow-y: hidden;
    border-width: var(--dxbl-popup-scrollable-border-width);
}


.dxbl-fl .dxbl-fl-group > .dxbl-group {
    --dxbl-group-bg: var(--dxbl-fl-group-bg);
    --dxbl-group-border-radius: var(--ar-border-radius-lg) !important;
    --dxbl-group-border-color: var(--dxbl-fl-group-border-color);
    --dxbl-group-border-width: var(--dxbl-fl-group-border-width);
    --dxbl-group-header-line-height: var(--dxbl-fl-group-header-line-height);
    --dxbl-group-header-font-size: var(--dxbl-fl-group-header-font-size);
    padding: 0;
    --dxbl-group-header-padding-x: var(--dxbl-fl-group-header-padding-x);
    --dxbl-group-header-padding-top: var(--dxbl-fl-group-header-padding-top);
    --dxbl-group-header-padding-bottom: var(--dxbl-fl-group-header-padding-bottom);
    --dxbl-group-header-bg: var(--dxbl-fl-group-header-bg);
    --dxbl-group-header-color: var(--dxbl-fl-group-header-color);
    --dxbl-group-header-font-weight: var(--dxbl-fl-group-header-font-weight);
    --dxbl-group-header-border-radius: var(--dxbl-fl-group-header-border-radius);
    --dxbl-group-header-text-padding-x: var(--dxbl-fl-group-header-text-padding-x);
    --dxbl-group-header-text-padding-y: var(--dxbl-fl-group-header-text-padding-y);
    --dxbl-group-header-btn-padding: var(--dxbl-fl-group-header-btn-padding);
    --dxbl-group-header-btn-bg: var(--dxbl-fl-group-header-btn-bg);
    --dxbl-group-header-btn-color: var(--dxbl-fl-group-header-btn-color);
    --dxbl-group-header-btn-hover-bg: var(--dxbl-fl-group-header-btn-hover-bg);
    --dxbl-group-header-btn-hover-color: var(--dxbl-fl-group-header-btn-hover-color);
}

/* Layoutgroepen als card: de header heeft een net-niet-witte achtergrond (#FCFCFC) en wordt verder door een
   scheidingslijn en een vettere titel van de inhoud gescheiden. Een duidelijk gekleurde header in de
   app-achtergrondkleur las als gaten in het scherm; helemaal wit was juist net te onzichtbaar. De inhoud krijgt
   de ruimte die voorheen op de hele groep stond. */
.dxbl-fl .dxbl-fl-group > .dxbl-group > .dxbl-group-header {
    padding: 10px 15px;
    background-color: #FCFCFC;
    border-bottom: 1px solid var(--dxbl-group-border-color);
    border-radius: calc(var(--ar-border-radius-lg) - 1px) calc(var(--ar-border-radius-lg) - 1px) 0 0;
    font-weight: 600;
}

/* DevExpress legt over de header een zwarte laag van 5% dekking; weg, zodat de header precies #FCFCFC is. */
.dxbl-fl .dxbl-fl-group > .dxbl-group > .dxbl-group-header::before {
    display: none;
}

/* Ingeklapte groep: alleen de header is zichtbaar, dus die krijgt rondom de afronding en geen scheidingslijn. */
.dxbl-fl .dxbl-fl-group > .dxbl-group:not(.expanded):not([is-animating]) > .dxbl-group-header {
    border-bottom: none;
    border-radius: calc(var(--ar-border-radius-lg) - 1px);
}

.dxbl-fl .dxbl-fl-group > .dxbl-group > .dxbl-group-body {
    padding: 15px;
}

.dxbl-treeview .dxbl-treeview-item .dxbl-treeview-item-container:not(.dxbl-disabled).dxbl-active {
    --dxbl-treeview-item-color: var(--muted) !important;
    --dxbl-treeview-item-bg: var(--fc-hover-bg);
    border-radius: 19px;
}

.dxbl-treeview .dxbl-treeview-item .dxbl-treeview-item-container:not(.dxbl-disabled) {
    --dxbl-treeview-item-cursor: pointer;
    padding-left: 17px;
    border-radius: 19px;
    /* margin-bottom: 10px; */
}


.dxbl-popup-cell,
.dxbl-popup-root.dxbl-popup-cell {
    z-index: 2000 !important;
}

/* ListView grid alternate rows */
/*.dxbl-grid .dxbl-grid-data-row-alt > td,
.dxbl-grid .dxbl-grid-table > tbody > tr:nth-child(even) > td {
    background-color: var(--dxds-primary-10) !important;
}*/

.dxbl-theme-fluent.xaf-size-m .xaf-view-caption-lg, .dxbl-theme-fluent.xaf-size-l .xaf-view-caption-lg {
    font-size: 1.2rem;
    line-height: var(--dxds-line-height-base-lg);
    font-weight: var(--dxds-font-weight-base-strong);
}


.normalrow {
    background-color: var(--dxds-primary-10) !important;
}

.alternaterow {
    background-color: color-mix(in srgb, var(--dxds-success-50) 6%, var(--fc-surface)) !important;
}

    .alternaterow:hover {
        background-color: var(--fc-hover-bg);
    }

.dxbl-checkbox.dxbl-checkbox-switch:not(.dxbl-readonly):not(.dxbl-disabled).dxbl-checkbox-checked {
    --dxbl-checkbox-check-element-bg: var(--dxds-primary-40);
    --dxbl-checkbox-check-element-border: var(--dxds-primary-40);
    --dxbl-checkbox-check-element-switch-trigger-bg: var(--dxds-secondary-10);
    --dxbl-checkbox-hover-check-element-border: var(--dxds-primary-50);
    --dxbl-checkbox-hover-check-element-bg: var(--dxds-primary-50);
    --dxbl-checkbox-hover-check-element-trigger-bg: var(--dxds-secondary-10);
}

.dxbl-checkbox.dxbl-checkbox-switch:not(.dxbl-readonly):not(.dxbl-disabled).dxbl-checkbox-unchecked {
    --dxbl-checkbox-check-element-bg: var(--dxds-neutral-40);
    --dxbl-checkbox-check-element-border: var(--dxds-neutral-50);
    --dxbl-checkbox-check-element-switch-trigger-bg: var(--dxds-secondary-10);
    --dxbl-checkbox-hover-check-element-border: var(--dxds-neutral-60);
    --dxbl-checkbox-hover-check-element-bg: var(--dxds-neutral-50);
    --dxbl-checkbox-hover-check-element-trigger-bg: var(--dxds-secondary-10);
}

.dxbl-grid-table.dxbl-grid-row-hover-enabled > tbody > tr:not(.dxbl-grid-group-row):not(.dxbl-grid-group-footer-row):not(.dxbl-grid-edit-row):not(.dxbl-grid-empty-row):hover {
    background-color: var(--fc-hover-bg) !important;
    color: var(--dxbl-grid-hover-color);
}

/*.dxbl-grid-table.dxbl-grid-row-hover-enabled > tbody > tr.dxbl-grid-selected-row:not(.dxbl-grid-focused-row):not(.dxbl-grid-touch-selection):not(.dxbl-grid-touch-selection-edge):not(.dxbl-grid-empty-row):hover {
    color: var(--dxbl-grid-selection-color);
}*/

.enum-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    padding: 3px 9px;
    font-size: 11.5px;
    line-height: 1;
    font-weight: 400;
    border: 1px solid transparent;
    white-space: nowrap;
}

.enum-badge-options {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding-top: 5px;
}

.enum-badge-muted {
    background: color-mix(in srgb, var(--dxds-neutral-90) 20%, var(--fc-surface));
    color: var(--dxds-neutral-150);
    border-color: color-mix(in srgb, var(--dxds-neutral-90) 40%, var(--fc-border));
}

.enum-badge-success {
    background: color-mix(in srgb, var(--dxds-success-90) 15%, var(--fc-surface));
    color: var(--dxds-success-130);
    border-color: color-mix(in srgb, var(--dxds-success-90) 35%, var(--fc-border));
}

.enum-badge-warning {
    background: color-mix(in srgb, var(--dxds-warning-80) 22%, var(--fc-surface));
    color: var(--dxds-warning-130);
    border-color: color-mix(in srgb, var(--dxds-warning-80) 45%, var(--fc-border));
}

.enum-badge-primary {
    background: color-mix(in srgb, var(--fc-primary) 20%, var(--fc-surface));
    color: var(--dxds-primary-120);
    border-color: color-mix(in srgb, var(--fc-primary) 50%, var(--fc-border));
}

.contact-role-badges {
    padding-top: 5px;
}


.grid-content{
    padding-top:11px;
}


.dxbl-fl .dxbl-text-edit,
.dxbl-fl .dxbl-spin-edit,
.dxbl-fl .dxbl-date-edit,
.dxbl-fl .dxbl-combobox,
.dxbl-fl .dxbl-memo {
    border-radius: 10px !important;
    overflow: hidden;
}

    .dxbl-fl .dxbl-text-edit .dxbl-btn:last-child,
    .dxbl-fl .dxbl-spin-edit .dxbl-btn:last-child,
    .dxbl-fl .dxbl-date-edit .dxbl-btn:last-child,
    .dxbl-fl .dxbl-combobox .dxbl-btn:last-child {
        border-top-right-radius: 10px !important;
        border-bottom-right-radius: 10px !important;
    }

.dxbl-fl .dxbl-text-edit {
    --dxbl-text-edit-underline-color: transparent !important;
    border-bottom-color: var(--dxbl-text-edit-border-color) !important;
}

    .dxbl-fl .dxbl-text-edit:focus-within,
    .dxbl-fl .dxbl-spin-edit:focus-within,
    .dxbl-fl .dxbl-date-edit:focus-within,
    .dxbl-fl .dxbl-combobox:focus-within,
    .dxbl-fl .dxbl-memo:focus-within {
        border-color: var(--dxds-primary-60) !important;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--dxds-primary-40) 45%, transparent) !important;
    }

    .dxbl-fl .dxbl-text-edit.dxbl-focused,
    .dxbl-fl .dxbl-text-edit:focus-within {
        --dxbl-text-edit-underline-focused-color: transparent !important;
        --dxbl-text-edit-underline-color: transparent !important;
    }

.dxbl-text-edit.dxbl-disabled {
    --dxbl-text-edit-bg: var(--dxbl-text-edit-disabled-bg, --dxbl-text-edit-bg);
    --dxbl-text-edit-color: var(--dxbl-text-edit-color);
    --dxbl-text-edit-border-color: var(--dxbl-text-edit-disabled-border-color);
    --dxbl-text-edit-underline-color: var(--dxbl-text-edit-border-color);
    /*background-color: #f6f9fc;*/
    background-color: var(--focara-app-bg, var(--bg-soft)) !important;
}


.dxbl-fl .dxbl-fl-cpt {
    width: auto;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    font-size: var(--dxbl-fl-caption-font-size);
    line-height: var(--dxbl-fl-caption-line-height);
    font-weight: var(--dxbl-fl-caption-font-weight);
    color: var(--muted) !important;
    color: var(--dxbl-fl-caption-color);
    margin: 0;
    font-size: 0.7125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.main-toolbar {
    padding-right: 1rem;
    padding-left: 1rem;
    border-width: 1px;
    border-style: solid;
    border-color: lightgray;
    border-radius: 10px;
    background-color: white;
    padding: 16px;
}

#applicationLoadingPanel img {
    width: 120px !important;
    height: 120px !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 50% !important;
    object-fit: contain;
}

    .nested-toolbar:empty, .main-toolbar:empty {
        padding: 0 !important;
        border-width: 0px;
    }

/* ============================================================
   Detail View popup � slide in from right
   ============================================================ */

@keyframes focara-popup-slide-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes focara-popup-slide-out {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}

dxbl-modal-dialog.focara-detail-popup {
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    position: fixed !important;
    box-shadow: -4px 0 32px rgba(0, 0, 0, 0.18) !important;
    animation: focara-popup-slide-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

dxbl-modal-dialog.focara-detail-popup.focara-popup-closing {
    animation: focara-popup-slide-out 0.32s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

dxbl-modal-dialog.focara-detail-popup dxbl-popup-resizable-container {
    --dxbl-popup-resize-container-width: 80vw !important;
    --dxbl-popup-resize-container-height: 100vh !important;
    width: 80vw !important;
    height: 100vh !important;
}


.dxbl-group > .dxbl-group-header {
    z-index: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: var(--dxbl-group-header-font-family);
    font-size: var(--dxbl-group-header-font-size);
    line-height: var(--dxbl-group-header-line-height);
    font-weight: var(--dxbl-group-header-font-weight);
    padding: 0px;
    margin-bottom: 0;
    border-radius: var(--dxbl-group-header-border-radius);
    color: var(--dxbl-group-header-color);
    background-color: var(--dxbl-group-header-bg);
}

dxbl-tabs:not(.dxbl-ribbon *) .dxbl-tabs-content-panel .dxbl-tabs-content {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 100%;
    -ms-flex: 1 0 100%;
    flex: 1 0 100%;
    width: 100%;
    border-width: 0px;
    border-color: lightgray;
    border-radius: 10px;
    border-style: solid;
    padding: 0px;
}

/* =========================================================
   Tabbladen als echte tabs
   Het Fluent-thema toont tabs als losse tekst met een streep onder de actieve tab, wat soms verwarrend is.
   Hier krijgt elke tab een rand en afgeronde bovenhoeken; de actieve tab is wit met vette tekst
   en loopt over in de inhoud eronder.
   De basislijn onder de tabrij is bewust een achtergrond en geen border: de scroll-container van de tabrij
   heeft overflow: hidden, dus de actieve tab kan niet óver een border heen. Als achtergrond ligt de lijn
   onder de tabs, en dekt de witte onderrand van de actieve tab hem af.
   :not(.dxbl-ribbon *): de toolbar van de RTF-editor (DxRichEdit) is intern een ribbon die ook dxbl-tabs
   gebruikt; zonder deze uitsluiting kreeg die toolbar een eigen afgerond kader binnen de rand van de editor.
   ========================================================= */
.dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *) > .dxbl-tabs-tablist {
    --focara-tab-border: var(--dxbl-fl-group-border-color, #dcdcdc);
    padding-left: 4px;
    background: linear-gradient(var(--focara-tab-border), var(--focara-tab-border)) left bottom / 100% 1px no-repeat;
}

.dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *) > .dxbl-tabs-tablist ul {
    align-items: flex-end;
    gap: 4px;
    /* DevExpress zet hier rondom 1.8px padding: onderaan weghalen, anders zweven de tabs boven de basislijn. */
    padding-bottom: 0 !important;
}

.dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *) > .dxbl-tabs-tablist .dxbl-tabs-item {
    border: 1px solid var(--focara-tab-border);
    /* Zelfde afronding als de cards (groepen); !important omdat de DevExpress-tabregel (1.8px) anders wint. */
    border-radius: var(--ar-border-radius-lg, 8px) var(--ar-border-radius-lg, 8px) 0 0 !important;
    background-color: #f4f5f4;
    color: #555;
}

.dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *) > .dxbl-tabs-tablist .dxbl-tabs-item:hover {
    background-color: #eaf3f0;
}

/* Actieve tab: wit met vette tekst in de normale tekstkleur, zodat tekst en (zwart-wit) icoon bij elkaar
   passen, en zonder gekleurde rand; de witte onderrand laat hem overlopen in de inhoud. */
.dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *) > .dxbl-tabs-tablist .dxbl-tabs-item.dxbl-active {
    background-color: #fff;
    border-bottom-color: #fff;
    font-weight: 600;
}

/* De Fluent-onderstreping van de actieve tab vervalt: de tab zelf laat nu zien welke actief is. */
.dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *) > .dxbl-tabs-tablist .dxbl-tabs-item::after {
    display: none;
}

/* De inhoud onder de tabs krijgt links, rechts en onder een rand; samen met de basislijn van de tabrij
   vormen tab en inhoud zo één omkaderd tabblad. */
.dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *) > .dxbl-tabs-content-panel {
    border: 1px solid var(--dxbl-fl-group-border-color, #dcdcdc);
    border-top: none;
    border-radius: 0 0 var(--ar-border-radius-lg, 8px) var(--ar-border-radius-lg, 8px);
    padding: 12px;
}
    
/* Een tabblad is altijd wit. Zonder dit schijnt de lichtblauwe achtergrond van het hoofdgebied (#f6f9fc, zie
   .main-content hieronder) door het transparante tabblad heen, en hebben geneste lijsten/detailschermen op een
   tabblad hun eigen lichtblauwe .main-content. */
.dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *) > .dxbl-tabs-content-panel,
.dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *) > .dxbl-tabs-content-panel .main-content.xaf-flex-auto {
    background-color: #fff;
}

.dxbl-theme-fluent .main-content.xaf-flex-auto {
    padding: 1rem;
    /*padding-bottom: 1rem;*/
    border-width: 1px;
    border-color: lightgray;
    border-radius: 10px;
    border-style: solid;
    background-color: #fff;
}

/*.dxbl-theme-fluent .main-content.xaf-flex-auto {
    padding-top: 0.5rem;
    padding-bottom: 1rem;*/
    /* border-width: 1px; */
    /*border-color: lightgray;*/
    /* border-radius: 10px; */
    /* border-style: solid; */
    /*background-color: #fff;
    background-color: #f6f9fc;
}*/

/* In een popup (bv. Offerteregel) geen lichtblauwe achtergrond: daar is de inhoud gewoon de popup zelf, anders
   zie je een lichte strook boven de eerste groep. Transparant, zodat de achtergrond van de popup doorloopt. */
.dxbl-modal .main-content.xaf-flex-auto,
.dxbl-popup .main-content.xaf-flex-auto {
    background-color: transparent;
}

/* Inhoud (tabbladen, groepen, grids, informatiepaneel) links én rechts op één lijn met de werkbalkkaart erboven:
   zonder dit begon en eindigde de inhoud 14.4px binnen de werkbalk. Kan rechts omdat het handvat van het
   informatiepaneel een eigen kolom in de indeling heeft (zie .focara-info-panel__edge-tab). */
.dxbl-theme-fluent .main-content.xaf-flex-auto.focara-detailview-body {
    /*padding-left: 0;
    padding-right: 0;*/
}

/* Ruimte tussen werkbalk en inhoud: alleen als de werkbalk iets toont. Een verborgen of lege werkbalk (bv.
   Instellingen > Algemeen) laat een lege .main-toolbar achter (:empty, zie hierboven); dan begint de inhoud
   gelijk met de navigatie ernaast. */
.dxbl-theme-fluent .main-toolbar:not(:empty) + .main-content.xaf-flex-auto {
    margin-top: 1rem;
}

.dxbl-btn-toolbar.dxbl-toolbar-btn-ellipsis > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar.dxbl-toolbar-btn-ellipsis > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary), .dxbl-btn-toolbar > .dxbl-adaptive-container-content.dxbl-toolbar-btn-ellipsis > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar > .dxbl-adaptive-container-content.dxbl-toolbar-btn-ellipsis > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary), .dxbl-btn-toolbar > .dxbl-adaptive-container-content > .dxbl-btn-group.dxbl-toolbar-btn-ellipsis > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar > .dxbl-adaptive-container-content > .dxbl-btn-group.dxbl-toolbar-btn-ellipsis > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary), .dxbl-btn-toolbar > .dxbl-adaptive-container-content > .dxbl-btn-group > .dxbl-btn-group.dxbl-toolbar-btn-ellipsis > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar > .dxbl-adaptive-container-content > .dxbl-btn-group > .dxbl-btn-group.dxbl-toolbar-btn-ellipsis > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary), .dxbl-btn-toolbar > .dxbl-adaptive-container-content > .dxbl-btn-group > .dxbl-btn-group > .dxbl-toolbar-item > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar > .dxbl-adaptive-container-content > .dxbl-btn-group > .dxbl-btn-group > .dxbl-toolbar-item > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary), .dxbl-btn-toolbar > .dxbl-adaptive-container-content > .dxbl-btn-group > .dxbl-toolbar-item > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar > .dxbl-adaptive-container-content > .dxbl-btn-group > .dxbl-toolbar-item > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary), .dxbl-btn-toolbar > .dxbl-adaptive-container-content > .dxbl-toolbar-item > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar > .dxbl-adaptive-container-content > .dxbl-toolbar-item > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary), .dxbl-btn-toolbar > .dxbl-btn-group.dxbl-toolbar-btn-ellipsis > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar > .dxbl-btn-group.dxbl-toolbar-btn-ellipsis > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary), .dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn-group.dxbl-toolbar-btn-ellipsis > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn-group.dxbl-toolbar-btn-ellipsis > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary), .dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn-group > .dxbl-toolbar-item > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn-group > .dxbl-toolbar-item > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary), .dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-toolbar-item > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-toolbar-item > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary), .dxbl-btn-toolbar > .dxbl-toolbar-item > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar > .dxbl-toolbar-item > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) {

    --dxbl-btn-padding-x-s: var(--dxds-spacing-40);
    --dxbl-btn-padding-x-m: calc(var(--dxds-spacing-60) - var(--dxds-spacing-10));
    --dxbl-btn-padding-x-l: var(--dxds-spacing-120);
    --dxbl-btn-text-color: var(--dxds-color-content-neutral-subdued-rest);
    --dxbl-btn-outline-color: var(--dxds-color-content-neutral-subdued-rest);
    --dxbl-btn-secondary-color: var(--dxds-color-content-neutral-subdued-rest);
    --dxbl-btn-font-weight: var(--dxds-font-weight-base-default);
    --dxbl-btn-secondary-hover-bg: var(--dxds-color-surface-neutral-default-hovered);
    --dxbl-btn-secondary-active-bg: var(--dxds-color-surface-neutral-default-selected);
    --dxbl-btn-text-hover-bg: var(--dxds-color-surface-neutral-default-hovered);
    --dxbl-btn-text-active-bg: var(--dxds-color-surface-neutral-default-selected);
    padding-left: 9px;
    padding-right: 9px;
    border-radius: 10px;
}

/* Gallery masonry override.
   Desktop-kolommen worden direct inline op .photo-thumbnails gezet door PhotoGalleryComponent.
   Responsive kolommen worden per instance met media rules gezet. */
.photo-gallery .photo-thumbnails.photo-layout-masonry {
    display: block !important;
    column-count: 3 !important;
    grid-template-rows: none !important;
    gap: 0 !important;
    column-gap: var(--pg-gap, 12px) !important;
}

.photo-gallery .photo-thumbnails.photo-layout-masonry .photo-thumbnail {
    display: inline-block !important;
    width: 100% !important;
    break-inside: avoid-column !important;
    margin-bottom: var(--pg-gap, 12px) !important;
    vertical-align: top;
}

/* Gallery uniform grid override.
   Desktop-kolommen worden direct inline op .photo-thumbnails gezet door PhotoGalleryComponent.
   Responsive kolommen worden per instance met media rules gezet. */
.photo-gallery .photo-thumbnails.photo-layout-uniformgrid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--pg-gap, 10px) !important;
}

/* Uitgevuld (justified): rijen die precies de breedte vullen, elke foto in zijn eigen verhouding.
   js/justified-gallery.js rekent de rijen uit en zet per kaart --pg-flex (vaste breedte) en --pg-h (rijhoogte),
   met --pg-row-height (per kolomaantal gezet door PhotoGalleryComponent) als doelhoogte. Zonder script: rijen
   van doelhoogte met gelijk meegroeiende kaarten. Het ::after-element vult een niet-uitgevulde laatste rij op. */
.photo-gallery .photo-thumbnails.photo-layout-justified {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--pg-gap, 10px) !important;
    grid-template-columns: none !important;
    columns: auto !important;
}

.photo-gallery .photo-thumbnails.photo-layout-justified::after {
    content: "";
    flex-grow: 999;
}

.photo-gallery .photo-thumbnails.photo-layout-justified .photo-thumbnail {
    flex: var(--pg-flex, 1 1 var(--pg-row-height, 280px));
    min-width: 0;
    height: var(--pg-h, var(--pg-row-height, 280px));
    display: flex;
    flex-direction: column;
    margin: 0 !important;
}

.photo-gallery .photo-thumbnails.photo-layout-justified .photo-thumbnail-media {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.photo-gallery .photo-thumbnails.photo-layout-justified .photo-thumbnail img {
    height: 100% !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    display: block;
}

/* Op een smal scherm liever één foto per rij over de volle breedte dan kleine uitsneden. */
@media (max-width: 575.98px) {
    .photo-gallery .photo-thumbnails.photo-layout-justified .photo-thumbnail {
        flex-basis: 100%;
        height: auto;
    }

    .photo-gallery .photo-thumbnails.photo-layout-justified .photo-thumbnail img {
        width: 100% !important;
        height: auto !important;
    }
}

.main-content > div:has(.dxbl-scheduler) {
    max-width: 100%;
    max-height: 100%;
    display: block !important;
}

/* ?? Info panel layout ???????????????????????????????????????????????? */

.focara-detailview-body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
}

.focara-detailview-main {
    flex: 1 1 0;
    min-width: 0;
}

.focara-info-panel {
    flex: 0 0 260px;
    min-width: 220px;
    max-width: 300px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 1rem;
    margin-top: 10px;
    font-size: 0.875rem;
}

/* Het handvat ("Toon"/"Verberg") staat als smalle kolom in de indeling, links van het paneel, en niet meer
   zwevend (position: fixed) tegen de rand van het browservenster: daar lag het óver de inhoud of het paneel heen.
   Ingeklapt blijft alleen die kolom over; zo kan de inhoud rechts gelijk eindigen met de werkbalk. */
/* Slide-animatie: het paneel schuift naar rechts weg (negatieve margin = eigen breedte + tussenruimte) en wordt
   door overflow: clip afgesneden; de kolom krimpt mee, zodat de inhoud ernaast soepel breder wordt. clip i.p.v.
   hidden: hidden maakt van de kolom een scrollcontainer en dan blijft het handvat niet meer bovenaan plakken. */
.focara-info-panel-shell {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
    margin-top: 10px;
    overflow: clip;
    /* Getal i.p.v. none: alleen dan werkt de vertraagde max-height bij het inklappen (none is niet te animeren). */
    max-height: 10000px;
}

.focara-info-panel-shell .focara-info-panel {
    flex: 0 0 300px;
    width: 300px;
    min-width: 0;
    max-width: none;
    margin-top: 0;
    margin-right: 0;
    opacity: 1;
    visibility: visible;
    transition: margin-right .25s ease, opacity .2s ease, visibility 0s linear 0s;
}

/* Ingeklapt: de kolom wordt pas ná het wegschuiven zo laag als het handvat (max-height met vertraging),
   anders springt de hoogte al tijdens de animatie. visibility: hidden na afloop, zodat verborgen links niet
   meer met Tab bereikbaar zijn. */
.focara-info-panel-shell.is-collapsed {
    max-height: 110px;
    transition: max-height 0s linear .25s;
}

.focara-info-panel-shell.is-collapsed .focara-info-panel {
    margin-right: calc(-300px - 8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: margin-right .25s ease, opacity .2s ease, visibility 0s linear .25s;
}

.focara-info-panel__edge-tab {
    position: sticky;
    top: 1rem;
    flex: 0 0 auto;
    width: 30px;
    height: 110px;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    background: #fff;
    color: var(--dxds-color-content-neutral-rest, #333);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: background-color .2s ease, box-shadow .2s ease;
}

.focara-info-panel__edge-tab:hover {
    background: #f5f5f5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

.focara-info-panel-shell:not(.is-collapsed) .focara-info-panel__edge-tab {
    background: var(--dxds-success-10) !important;
    border-color: #b9cdfa;
}

.focara-info-panel-shell:not(.is-collapsed) .focara-info-panel__edge-tab span,
.focara-info-panel-shell:not(.is-collapsed) .focara-info-panel__edge-tab .dx-icon {
    color: #666;
}

.focara-info-panel__edge-tab span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.focara-info-panel__header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--dxds-color-content-neutral-rest, #333);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.focara-info-panel__group-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dxds-color-content-neutral-subdued-rest, #666);
}

.focara-info-panel__group-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    cursor: pointer;
    text-align: left;
}

.focara-info-panel__group-toggle .dx-icon {
    font-size: 0.85rem;
    color: var(--dxds-color-content-neutral-subdued-rest, #666);
}

.focara-info-panel__group-toggle-icon {
    flex: 0 0 auto;
    transition: transform .2s ease;
}

.focara-info-panel__group-toggle-icon.is-expanded {
    transform: rotate(90deg);
}

.focara-info-panel__group-card {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    background: #fff;
}

.focara-info-panel__group-list {
    margin: 0;
}

.focara-info-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.focara-info-panel__item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    border-style: solid;
    border-width: 1px;
    border-color: lightgray;
    padding: 12px;
    border-radius: 10px;
}

.focara-info-panel__label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--dxds-color-content-neutral-subdued-rest, #777);
    font-weight: 700;
}

.focara-info-panel__value {
    font-weight: 500;
    color: var(--dxds-color-content-neutral-rest, #222);
    word-break: break-word;
}

.focara-info-panel__image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.focara-info-panel__image--circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.focara-info-panel__entity {
    display: inline-block;
}

.focara-info-panel__entity-link {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--dxds-color-content-link-rest, #0d6efd);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.focara-info-panel__entity-link:hover {
    color: var(--dxds-color-content-link-hover, #0a58ca);
}

.focara-info-panel__audit-list {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.focara-info-panel__audit-row {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.headshot-signup-qr-wrap {
    min-height: calc(100vh - 32px);
    margin: 0;
    background: #f4f6f8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.headshot-signup-qr-sheet {
    width: 100%;
    max-width: 720px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    box-sizing: border-box;
}

.headshot-signup-qr-logo-wrap {
    margin-bottom: 14px;
}

.headshot-signup-qr-logo {
    max-width: 260px;
    max-height: 160px;
    object-fit: contain;
}

.headshot-signup-qr-sheet h1 {
    margin: 0 0 12px 0;
    font-size: 1.7rem;
    color: #111827;
}

.headshot-signup-qr-intro {
    margin: 0 auto 18px auto;
    max-width: 620px;
    color: #374151;
    text-align: left;
}

.headshot-signup-qr-image-wrap {
    margin-bottom: 14px;
}

.headshot-signup-qr-image {
    width: min(380px, 80vw);
    height: auto;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    padding: 8px;
    box-sizing: border-box;
}

.headshot-signup-qr-message {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    background: #fff;
    color: #374151;
}

.headshot-signup-qr-message-error {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fef2f2;
}


@media (forced-colors: none) {
    .dxbl-btn.dxbl-btn-secondary {
        --dxbl-btn-bg: var(--dxbl-btn-secondary-bg);
        --dxbl-btn-hover-bg: var(--dxbl-btn-secondary-hover-bg);
        --dxbl-btn-color: var(--dxbl-btn-secondary-color);
        --dxbl-btn-border-color: var(--dxbl-btn-secondary-border-color);
        --dxbl-btn-separator-border-color: var(--dxbl-btn-secondary-separator-border-color);
        --dxbl-btn-hover-border-color: var(--dxbl-btn-secondary-hover-border-color);
        --dxbl-btn-active-bg: var(--dxbl-btn-secondary-active-bg);
        --dxbl-btn-active-border-color: var(--dxbl-btn-secondary-active-border-color);
        border-radius: 10px;
    }
}

@media (forced-colors: none) {
    .dxbl-btn.dxbl-btn-primary {
        --dxbl-btn-bg: var(--dxbl-btn-primary-bg);
        --dxbl-btn-hover-bg: var(--dxbl-btn-primary-hover-bg);
        --dxbl-btn-color: var(--dxbl-btn-primary-color);
        --dxbl-btn-border-color: var(--dxbl-btn-primary-border-color);
        --dxbl-btn-separator-border-color: var(--dxbl-btn-primary-separator-border-color);
        --dxbl-btn-hover-border-color: var(--dxbl-btn-primary-hover-border-color);
        --dxbl-btn-active-bg: var(--dxbl-btn-primary-active-bg);
        --dxbl-btn-active-border-color: var(--dxbl-btn-primary-active-border-color);
        border-radius: 10px;
    }
}

/* =========================================================
   Primaire toolbarknoppen (Opslaan, OK in popups) in de huisstijl
   DevExpress gebruikt hiervoor zijn eigen mint/teal (#018574, uitgeschakeld #8ad1bf), dat niet past bij het
   saliegroen van het logo (--brand-dark). Bewust alleen .xaf-primary-toolbar-btn (gezet door XAF's
   PrimaryToolbarItemsController en PrimarySaveButtonController): losse DxButtons, zoals in het klantportaal
   met zijn eigen opmaak, blijven ongemoeid.
   ========================================================= */
.dxbl-btn.dxbl-btn-primary.xaf-primary-toolbar-btn {
    --dxbl-btn-primary-bg: var(--brand-dark, #3f8877);
    --dxbl-btn-primary-border-color: var(--brand-dark, #3f8877);
    --dxbl-btn-primary-hover-bg: #34725f;
    --dxbl-btn-primary-hover-border-color: #34725f;
    --dxbl-btn-primary-active-bg: #2d6454;
    --dxbl-btn-primary-active-border-color: #2d6454;
}

/* Uitgeschakeld: een zachte tint van hetzelfde groen (i.p.v. DevExpress' mint); het witte pictogram en de
   witte tekst blijven leesbaar. !important omdat de DevExpress-regel voor uitgeschakelde knoppen anders wint. */
.dxbl-btn.dxbl-btn-primary.xaf-primary-toolbar-btn.dxbl-disabled {
    background-color: #c9ddd7 !important;
    border-color: #c9ddd7 !important;
    opacity: 1 !important;
}

/* Vorige/volgende record: de eigen (groene) iconen in Focara.Module/Images vervangen de oranje standaardiconen;
   uitgeschakeld (eerste/laatste record) grijs, net als de andere uitgeschakelde knoppen. */
.dxbl-btn.dxbl-disabled img[src*="Action_Navigation_Previous_Object"],
.dxbl-btn.dxbl-disabled img[src*="Action_Navigation_Next_Object"] {
    filter: grayscale(1);
    opacity: 0.45;
}



/* =========================================================
   Sectie-editor
   ========================================================= */

.section-editor-root {
    display: grid;
    grid-template-columns: 320px 1fr 260px;
    gap: 0;
    height: 70vh;
    min-height: 500px;
    border: 1px solid var(--dxbl-grid-border-color, #dee2e6);
    border-radius: 8px;
    overflow: hidden;
    background: var(--dxbl-back-color, #fff);
}

/* Instellingen > Algemeen (stamgegevens-dashboard, MasterDataHubSplitter.razor): lijst links, inhoud rechts,
   gescheiden door een versleepbare splitter die de beschikbare hoogte vult. */
.focara-masterdata-hub {
    height: calc(100vh - 150px);
    min-height: 480px;
}

.focara-masterdata-hub-list,
.focara-masterdata-hub-detail {
    overflow: auto;
}

.focara-masterdata-hub-list {
    padding-right: 8px;
}

.focara-masterdata-hub-detail {
    padding-left: 8px;
}

/* Rij in de lijst links: icoon van de entiteit + naam (MasterDataHubItemCell.razor). */
.focara-masterdata-hub-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Kaart bij de locatie van een offerte-/orderregel (LocationMapRenderer.razor). Bewust geen flex met gap: DxMap
   zet een reeks onzichtbare <dxbl-resource-script>-elementen vóór de kaart, en in een flex-container krijgt
   elk daarvan de gap mee — samen ruim 100px witruimte boven de kaart. */
/* Zelfde rand als de invoervelden (zie .dxbl-fl .dxbl-text-edit hierboven): themakleur, afgeronde hoeken — om
   het hele blok, dus afstand/reistijd en kaart samen. */
.focara-location-map {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--dxbl-text-edit-border-color, lightgray);
    border-radius: 10px;
    overflow: hidden;
}

.focara-location-map-summary,
.focara-location-map-empty {
    padding: 6px 10px;
}

.focara-location-map dxbl-map {
    display: block;
}

.focara-location-map-summary + dxbl-map,
.focara-location-map-summary ~ dxbl-map {
    border-top: 1px solid var(--dxbl-text-edit-border-color, lightgray);
}

.focara-location-map-empty {
    color: var(--dxbl-text-secondary-color, #6c757d);
    font-style: italic;
}

/* =========================================================
   Titel in de kop van een scherm (detailscherm bv. "Offerte" / "OFF-0074", lijstscherm bv. "Contact")
   Het icoon stond als 16px-plaatje in een klein rond badge naast de titel. Het badge is nu even hoog
   als de twee titelregels van een detailscherm (3.6em, schaalt mee met de lettergrootte); het icoon vult
   60% ervan. Lijstschermen (één regel) krijgen hetzelfde badge, zodat de kop bij wisselen niet verspringt.
   De algemene 16px-begrenzing voor alle iconen (site.css / XAF styles.css) wordt alleen hier opgeheven.
   ========================================================= */
.view-caption-root .xaf-caption-icon-container {
    /* !important: site.css zet dit badge vast op 16px */
    width: 3.6em !important;
    height: 3.6em !important;
    border-radius: 50%;
    flex-shrink: 0;
}

.view-caption-root .xaf-caption-icon {
    max-width: none;
    max-height: none;
    width: 60%;
    height: 60%;
}

/* XAF begrenst de tekst op "100% - 36px" (uitgaand van een klein icoon); met het grotere badge viel de titel
   daardoor weg ("OFF-00..."). De ruimte volgt nu gewoon uit de flex-indeling, lange titels krijgen nog "...". */
.view-caption-root .xaf-caption-container {
    max-width: none;
    min-width: 0;
}

/* In de kop van een popup is de schermtitel hierboven (groot badge + objecttitel van 1.75rem uit site.css) veel
   te fors: daar een compacte variant met een kleiner badge, kleinere titels en minder ruimte rond de kop. */
.dxbl-popup .dxbl-modal-header .view-caption-root .xaf-caption-icon-container {
    width: 2.4em !important;
    height: 2.4em !important;
}

.dxbl-popup .dxbl-modal-header .view-caption-root .xaf-object-caption {
    font-size: 1.1rem;
    line-height: 1.4rem;
}

.dxbl-popup .dxbl-modal-header .view-caption-root .xaf-view-caption-sm,
.dxbl-popup .dxbl-modal-header .view-caption-root .xaf-view-caption-lg {
    font-size: 0.8rem;
    line-height: 1.1rem;
}

.dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content .dxbl-popup-header > .dxbl-modal-header,
.dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-header {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 8px;
}

/* ============================================================
   Header rechts (.focara-header-actions in FocaraTemplateComponent)
   Eén stijl voor alles: gelijke icoonknoppen (40px, 24px lijn-iconen, zelfde kleur en hover) voor zoeken,
   notificaties, herinneringen, help en instellingen; het account als ronde avatar (met de foto van de gebruiker
   als die er is) achter een scheidingslijn. Labels staan in de tooltips.
   ============================================================ */
.focara-header-actions {
    --fh-icon: #454b49;
    --fh-hover: #eef4f2;
    --fh-border: #dfe3e1;
    --fh-size: 40px;
    --fh-icon-size: 24px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Icoonknoppen: zoeken, help, instellingen, account en de acties in de header-werkbalk */
.focara-header-actions .focara-header-icon-btn,
.focara-header-actions .theme-settings > .theme-button,
.focara-header-actions .account-button,
.focara-header-actions .dxbl-toolbar .dxbl-toolbar-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--fh-size);
    min-width: var(--fh-size);
    height: var(--fh-size);
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--fh-icon) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color .15s ease;
}

.focara-header-actions .focara-header-icon-btn:hover,
.focara-header-actions .theme-settings > .theme-button:hover,
.focara-header-actions .dxbl-toolbar .dxbl-toolbar-btn:not(.dxbl-disabled):hover {
    background: var(--fh-hover) !important;
}

/* XafImage-iconen (masker in currentColor); instellingen en account krijgen de fc-lijn-iconen i.p.v. de gevulde
   XAF-iconen (Settings / Security_Header). De foto van de gebruiker (.xaf-header-user-icon, een
   achtergrondafbeelding) valt hier bewust buiten: een masker zou die foto vervangen. */
.focara-header-actions .xaf-image:not(.xaf-header-user-icon) {
    width: 69px !important;
    height: 69px !important;
    margin: 0 !important;
    -webkit-mask-size: var(--fh-icon-size) !important;
    mask-size: var(--fh-icon-size) !important;
}

    /*.focara-header-actions .xaf-image:not(.xaf-header-user-icon) {
        width: var(--fh-icon-size) !important;
        height: var(--fh-icon-size) !important;
        margin: 0 !important;
        -webkit-mask-size: var(--fh-icon-size) !important;
        mask-size: var(--fh-icon-size) !important;
    }*/


.focara-header-actions .theme-settings > .theme-button .xaf-image {
    -webkit-mask-image: url('../IImageService/fc-nav-settings?t=Fluent') !important;
    mask-image: url('../IImageService/fc-nav-settings?t=Fluent') !important;
}

.focara-header-actions .account-button .xaf-image:not(.xaf-header-user-icon) {
    -webkit-mask-image: url('../IImageService/fc-user?t=Fluent') !important;
    mask-image: url('../IImageService/fc-user?t=Fluent') !important;
}

/* Header-werkbalk (notificaties, herinneringen): geen rand/pijltje; de iconen zijn <img>, dus via een filter
   in dezelfde donkergrijze tint als de maskers. DevExpress zet inline height: 29px; zonder vaste hoogte zakken
   de knoppen onder het midden. */
.focara-header-actions .dxbl-toolbar {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: var(--fh-size) !important;
    padding: 0 !important;
}

/* DevExpress zet de breedte van de werkbalk vooraf (inline min-width) op basis van knoppen + marges, maar zonder
   gap; een gap schuift de laatste knop dan over de help-knop heen. Tussenruimte daarom via de groepsmarge
   (standaard 5.4px, hier 4px zoals de andere headerknoppen), de eerste groep zonder marge. */
.focara-header-actions .dxbl-toolbar > .dxbl-btn-toolbar {
    height: var(--fh-size);
    align-items: center;
    gap: 0;
}

.focara-header-actions .dxbl-toolbar .dxbl-toolbar-group {
    margin-left: 4px !important;
}

.focara-header-actions .dxbl-toolbar .dxbl-toolbar-group.dxbl-btn-group-first {
    margin-left: 0 !important;
}

.focara-header-actions .dxbl-toolbar .dxbl-toolbar-btn img {
    width: var(--fh-icon-size) !important;
    height: var(--fh-icon-size) !important;
    max-width: none !important;
    max-height: none !important;
    filter: brightness(0);
    opacity: .72;
}

.focara-header-actions .dxbl-toolbar .dxbl-toolbar-btn.dxbl-disabled {
    opacity: 1;
    cursor: default;
}

.focara-header-actions .dxbl-toolbar .dxbl-toolbar-btn.dxbl-disabled img {
    opacity: .35;
}

.focara-header-actions .dxbl-toolbar .dxbl-toolbar-dropdown-toggle {
    display: none;
}

/* Aantal (herinneringen) als badge rechtsboven; bij 0 (knop uitgeschakeld) niets tonen. */
.focara-header-actions .dxbl-toolbar .dxbl-toolbar-btn > span {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #3F8877;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
}

.focara-header-actions .dxbl-toolbar .dxbl-toolbar-btn.dxbl-disabled > span {
    display: none;
}

/* Ongelezen notificaties: de caption wordt dan "Notificaties (n)" (NotificationsChoiceController). */
.focara-header-actions .dxbl-toolbar .dxbl-toolbar-btn[data-action-name^="Notificaties ("]::after {
    content: '';
    position: absolute;
    top: 7px;
    right: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3F8877;
    box-shadow: 0 0 0 2px #fff;
}

/* XAF geeft de wrapper van de instellingenknop 7.2px padding links; zelfde tussenruimte als de rest. */
.focara-header-actions .theme-settings {
    padding: 0 !important;
}

/* Account: ronde avatar, gescheiden van de rest */
.focara-header-actions .account-container {
    display: flex;
    align-items: center;
    margin-left: 8px;
    padding-left: 12px;
    border-left: 1px solid var(--fh-border);
}

.focara-header-actions .account-button {
    border-radius: 50% !important;
    background: #e3efeb !important;
    color: #2D6454 !important;
    overflow: hidden;
}

.focara-header-actions .account-button:hover {
    background: #d3e6df !important;
}

/* Met foto: de foto vult de hele ronde knop. */
.focara-header-actions .account-button .xaf-header-user-icon {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 50%;
    background-size: cover !important;
    background-position: center !important;
}

/* Instellingenpaneel (uitklappend vanuit de header): XAF zet geen ruimte boven de inhoud, waardoor het eerste
   item tegen de bovenrand van het paneel staat. */
.theme-settings.show-dropdown .settings-bar {
    padding-top: 12px;
}