:root {
    --profix-sidebar-width: 260px;
}

/* Hide spin buttons on number inputs in dialogs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

html {
    font-size: 14px;  /* DevExpress standaard = 16px, wij schalen alles ~12% kleiner */
}

html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

.header-logo-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Logo's met ondertitel (sinds 15-10-2026). Op 40px hoog is de ondertitel nog net leesbaar; de breedte
   volgt de verhouding van het bestand (profix 1000:459, brickx 1000:347). */
.header-logo {
    width: 87px;
    height: 40px;
    background-image: url('../images/profix-logo.png');
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
}

/* Brickx-merk: eigen woordmerk, breder. Stond eerder inline in de templates; als klasse kan het thema
   (profix-modern.css) het in dark mode vervangen door de lichte variant. */
.header-logo.header-logo-brickx {
    width: 115px;
    background-image: url('../images/brickx-logo-png.png');
}

.header-tenant-name {
    color: inherit;
    font-weight: bold;
    font-size: 13px;
    line-height: 16px;
    white-space: nowrap;
    display: block;
    text-align: center;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

/* Navigatiekolom in- en uitklappen ------------------------------------------------------------

   De kolom gaat alleen weg als je er zelf op klikt. XAF doet dat standaard anders: onder 576px valt
   de kolom vanzelf weg en komt hij na een klik als overlay over de inhoud terug. Dat verspringen bij
   het versmallen van het venster willen we niet, dus zetten de regels hieronder dat breedte-
   afhankelijke gedrag uit: op elk formaat staat de kolom gewoon links, en de hamburger in de
   kopbalk is het enige dat hem weghaalt.

   XAF zet bij een klik de klasse .collapse-toggle op .app; wij geven die op elke breedte dezelfde
   betekenis: kolom weg. De selectors hangen aan .app.collapse-toggle en niet aan .collapse-toggle,
   want XAF's regels zijn !important en dan beslist specificiteit, niet de volgorde waarin de
   stylesheets geladen worden.

   Weghalen gebeurt met een negatieve linkermarge in plaats van met display:none, want daar valt wel
   een overgang op te zetten: de kolom schuift naar links het beeld uit (de omhullende div snijdt af
   met overflow:hidden) en de inhoud ernaast groeit in diezelfde beweging mee. De kolom houdt daarbij
   zijn eigen breedte, zodat het menu er niet tijdens het schuiven in elkaar vouwt - dat gebeurt wel
   als je de breedte zelf naar nul animeert.

   visibility springt pas op hidden als de beweging klaar is, anders zie je de kolom niet wegschuiven
   maar verdwijnen; bij het uitklappen staat er geen vertraging op, want dan zou hij onzichtbaar
   openschuiven. Die visibility houdt de weggeschoven kolom uit de tabvolgorde en bij de
   schermlezer weg - met alleen een marge blijft hij gewoon bereikbaar. */

.xaf-sidebar {
    display: flex;
    width: var(--profix-sidebar-width);
    min-width: var(--profix-sidebar-width);
    transition: margin-left .2s ease-out, visibility 0s;
}

.app.collapse-toggle .xaf-sidebar {
    display: flex !important;
    margin-left: calc(-1 * var(--profix-sidebar-width));
    visibility: hidden;
    transition: margin-left .2s ease-out, visibility 0s linear .2s;
}

/* De verduistering hoort bij XAF's overlay-stand op smalle schermen; die gebruiken we niet. */
.app .sidebar-sm-shadow,
.app.collapse-toggle .sidebar-sm-shadow {
    display: none !important;
}

.header-left-side {
    width: var(--profix-sidebar-width);
    min-width: var(--profix-sidebar-width);
    flex-shrink: 0;
    transition: min-width .2s ease-out;
}

/* Ingeklapt is er geen kolom meer om de kopbalk op uit te lijnen: de merkregel krimpt tot wat hij
   zelf nodig heeft (profix-modern.css pint hem anders op de kolombreedte) en het logo blijft staan
   - dat hoort bij de kopbalk, niet bij de navigatie, terwijl XAF het samen met de kolom verstopt.
   Onder 576px verbergt XAF het logo bewust (geen ruimte op een telefoon); dat laten we met rust. */
@media (min-width: 576px) {
    .app.collapse-toggle .header .header-left-side {
        min-width: 0 !important;
    }

    .app.collapse-toggle .header .header-logo-wrapper .header-logo {
        display: block !important;
    }
}

/* Onder 576px verstopt XAF de hele linkerkant van de kopbalk zodra er een terug-knop staat. Daar
   zit de hamburger in, en zonder die knop is een ingeklapte kolom niet meer terug te halen. */
@media (max-width: 575.98px) {
    .app .header.xaf-detail-view-header.xaf-show-navigate-back-action .header-left-side {
        display: flex !important;
    }
}

/* Wie bewegende beelden in Windows heeft uitgezet, krijgt de kolom zonder schuiven. */
@media (prefers-reduced-motion: reduce) {
    .xaf-sidebar,
    .app.collapse-toggle .xaf-sidebar,
    .header-left-side {
        transition: none;
    }
}

/* Greep om de kolom breder of smaller te slepen (js/nav-collapse.js). Een smalle strook over de
   rand tussen kolom en inhoud: de negatieve marges houden hem uit de opmaak, zodat de inhoud er niet
   voor opschuift. Pas bij aanwijzen verschijnt er een lijntje, anders is het een rand als een ander. */
.pfx-nav-resizer {
    flex: 0 0 6px;
    margin: 0 -3px;
    position: relative;
    z-index: 3;
    cursor: col-resize;
    touch-action: none;
}

.pfx-nav-resizer::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2px;
    width: 2px;
    background: transparent;
    transition: background-color .15s;
}

.pfx-nav-resizer:hover::after,
html.pfx-nav-resizing .pfx-nav-resizer::after {
    background: var(--bs-primary, #f07d00);
}

/* Ingeklapt valt er niets te verbreden, en op een telefoon is slepen aan een rand van een paar pixels
   geen doen. */
.app.collapse-toggle .pfx-nav-resizer {
    display: none;
}

@media (max-width: 575.98px) {
    .pfx-nav-resizer {
        display: none;
    }
}

/* Tijdens het slepen geen overgang op de breedte, anders sukkelt de kolom achter de muis aan. */
html.pfx-nav-resizing .xaf-sidebar,
html.pfx-nav-resizing .header-left-side {
    transition: none !important;
}

.xaf-sidebar .dxbl-accordion-item-text-container .dxbl-text,
.xaf-sidebar .xaf-nav-link span {
    font-size: 12px;
}

.xaf-sidebar .dxbl-group-header {
    min-height: 28px !important;
}

/* Een menu-item dat op slot zit grijs maken.

   XAF blokkeert het item wel (klikken doet niets) maar zet er geen dxbl-disabled op. Het enige
   verschil in de opmaak is dat de klasse xaf-action op het klikvlak WEGVALT. Daarop mikken we dus.
   Nagekeken in de DOM: een werkend item heeft "xaf-action xaf-navigation-link-click-area", een
   geblokkeerd item alleen "xaf-navigation-link-click-area".

   :has() is nodig omdat we vanaf het klikvlak naar het hele item omhoog moeten. Alle browsers die
   Blazor Server ondersteunen kennen dat inmiddels.

   Groepen moeten er expliciet uit. Een groep heeft ook geen xaf-action - er zit immers geen scherm
   achter - en werd daarom net zo goed grijs. Het onderscheid zit in het uitklappijltje: bij een blad
   staat dat op dxbl-invisible (er valt niets uit te klappen), bij een groep is het zichtbaar.
   aria-expanded is de tweede zekering; dat staat alleen op iets dat open en dicht kan.

   De regel is bewust streng. Een groep die ten onrechte grijs is valt meteen op en is fout; een
   geblokkeerd item dat niet grijs wordt is hooguit een gemiste hint. */
.xaf-sidebar .dxbl-accordion-item-content:not([aria-expanded]):has(.dxbl-group-expand-btn.dxbl-invisible):has(.xaf-navigation-link-click-area:not(.xaf-action)) {
    opacity: .45;
    cursor: default;
}

.xaf-sidebar .dxbl-accordion-item-text-container {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Voorkom dat de horizontale scrollbar over data records heen valt */
#main-view-content .dxbl-grid {
    min-height: 200px;
}

/* 17px alleen reserveren als er GEEN footer-rij is: anders duwt de padding de sticky footer omhoog
   en zweeft 'ie boven de onderkant. De tfoot wordt alleen gerenderd als de footer zichtbaar is. */
.dxbl-grid .dxbl-scroll-viewer-content:not(:has(tfoot)) {
    padding-bottom: 17px;
}

/* Deze klasse hangt op een <span> BINNEN de cel, niet op de cel zelf — zie
   FormattingListviewViewController. Als pseudo-element op de cel sprong het icoon naar de hoek zodra
   het grid de celinhoud bij selectie in een eigen element zette. Als gewone inline-inhoud loopt het
   mee met de tekst, en de cel behoudt zijn uitlijning (getallen blijven rechts). */
.cell-icon {
    display: inline-block;
    white-space: nowrap;
}

.cell-icon::before {
    vertical-align: middle;
    margin-right: 4px;
}

.green-check::before {
    content: '';
    flex-shrink: 0;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('../images/GreenCheck.svg') no-repeat center;
    background-size: contain;
}

.yellow-exclamation::before {
    content: '';
    flex-shrink: 0;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('../images/YellowExclamation.svg') no-repeat center;
    background-size: contain;
}

.red-cross::before {
    content: '';
    flex-shrink: 0;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('../images/RedCross.svg') no-repeat center;
    background-size: contain;
}

.blue-clock::before {
    content: '';
    flex-shrink: 0;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('../images/BlueClock.svg') no-repeat center;
    background-size: contain;
}

/* Betaling staat al bij de bank ingepland (InvoiceBase.PaymentStatus). Het icoon "verwacht" uit de iconenset. */
.green-clock::before {
    content: '';
    flex-shrink: 0;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('../images/GreenClock.svg') no-repeat center;
    background-size: contain;
}

/* Regel die door een promotie is toegevoegd en daarom niet te bewerken is (OrderLine.ProductName). Het
   slotje uit de iconenset: ProfixX.Module/Images/mono/vergrendeling.svg. */
.navy-lock::before {
    content: '';
    flex-shrink: 0;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('../images/NavyLock.svg') no-repeat center;
    background-size: contain;
}

/* Gekleurd status-bolletje in een lijstcel (StatusCircleAttribute). Zit als <span> ÍN de cel, net als
   .cell-icon, zodat het bij selectie niet losspringt. De kleur komt als inline background-color mee. */
.status-circle-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.status-circle {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: middle;
}

/* Hetzelfde symbool of bolletje in een invoerveld van een detailview (CellSymbolDetailViewController). Het
   is een knop van de editor, maar er zit niets achter: geen hover, geen handje. En ook geen grijs bij een
   alleen-lezen veld; DevExpress schakelt de knoppen daar uit, maar dit is een melding, geen actie. */
.profix-cell-symbol,
.profix-cell-symbol:hover,
.profix-cell-symbol:disabled,
.profix-cell-symbol.dxbl-disabled {
    cursor: default;
    background-color: transparent !important;
    opacity: 1 !important;
}

.profix-cell-symbol .cell-icon::before {
    margin-right: 0;
}

/* Hide custom field layout items when field is not applicable */
.dxbl-fl-item:has(.cf-hidden-field) {
    display: none !important;
}

/* Werkitem-schermen (ticket én projecttaak): kopblok met titel/timer bovenin, daaronder de kolommen
   details / omschrijving / checklist. De lucht tussen de timer en de kolommen is opgebouwd uit de
   onderpadding van het kopblok (.wi-hd), de item-padding van het layout-item eromheen en de halve
   DevExpress-rijafstand (.dxbl-col geeft elk rijkind een halve spacing als marge boven én onder, dus
   kopblok-item en body-groep dragen er allebei 6px aan bij). Die worden hier op nul gezet en vervangen
   door één instelbare afstand op de body-groep.
   Doelwit via het kopblok (eigen component) en niet via CustomCSSClassName in het model: een
   layout-snapshot in de tenant-database overschaduwt modelwijzigingen, CSS niet. Actiebalk en kopblok
   zelf worden niet geraakt; binnen de kolommen verandert niets. Het #main-view-content-voorvoegsel is
   nodig om de item-padding uit profix-modern.css (die met id-selector werkt) te overstemmen. */
#main-view-content .main-content .dxbl-fl-item:has(.wi-hd) {
    --wi-body-gap: 6px;
    padding-bottom: 0;
    margin-bottom: 0;
}
#main-view-content .main-content .dxbl-fl-item:has(.wi-hd) .wi-hd {
    padding-bottom: 0;
}
#main-view-content .main-content .dxbl-fl-item:has(.wi-hd) ~ .dxbl-fl-group {
    margin-top: var(--wi-body-gap, 6px);
    padding-top: 0;
}

/* Wrapper om de custom-field-editor: draagt de title-tooltip uit de velddefinitie.
   Breedte expliciet, anders krimpt de editor tot de inhoud i.p.v. het layout-item te vullen. */
.cf-editor {
    width: 100%;
}

/* Sterren-editor voor custom fields van type Rating (RatingEditorComponent). Gevulde sterren in
   de amberkleur die ook Windows/Office voor ratings gebruiken, lege sterren grijs. In de
   weergavecel van de grid staat dezelfde component read-only, zonder hover-effect. */
.cf-rating {
    display: inline-flex;
    gap: 2px;
    line-height: 1;
    vertical-align: middle;
}

.cf-rating-star {
    width: 20px;
    height: 20px;
    color: #c8c8c8;
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
}

.cf-rating-star svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.cf-rating-star-filled {
    color: #f5b301;
}

.cf-rating:not(.cf-rating-readonly) .cf-rating-star:hover {
    transform: scale(1.15);
}

.cf-rating-readonly .cf-rating-star {
    cursor: default;
}

/* Variety generator popup: beide grids het popup-venster laten vullen i.p.v. auto-groeien (popup is 1200x800) */
.variety-generator-grid {
    height: 640px !important;
}

/* "Selecteer facturen"-popup (1200x800): het grid een vaste hoogte geven zodat het zijn eigen schuifbalk
   krijgt. Zonder dit groeit het grid mee met het aantal facturen, wordt de hele popup scrollbaar, en
   verdwijnen het afschriftbedrag en het lopend totaal uit beeld zodra je omlaag scrollt -- precies de
   getallen waar je op zit te kijken. RelativeSize op de layout doet dit niet: die percentages werken pas
   als de container zelf een hoogte heeft, en de popup-body groeit met zijn inhoud mee.
   500px laat ruimte voor de kopvelden, ook als "betaald sinds" zichtbaar is. */
.profix-invoice-selection-grid {
    height: 500px !important;
}

/* FIFO-indicatie op de ExpiryDate-cel in de Lot picker: bijna verlopen = oranje,
   reeds verlopen = rood. Drempel per Product instelbaar via Product.FifoNearExpiryDays. */
.profix-picker-expiry-soon {
    background-color: #ffe0b2 !important;
    color: #8a4d00 !important;
    font-weight: 600;
}

.profix-picker-expiry-expired {
    background-color: #ffcdd2 !important;
    color: #8a0000 !important;
    font-weight: 600;
}

/* Bulk edit filter editor: text box is read-only unless Advanced Mode is active.
   When advancedMode = false the container lacks the "advanced" CSS class, so
   pointer-events are blocked and the editor looks disabled. When the user checks
   "Advanced Mode" DevExpress adds .advanced to the container, restoring editing.
   Scoped to popup-filter-wrapper so it only applies inside the criteria popup. */
.popup-filter-wrapper .dx-filtereditor-text-container:not(.advanced) {
    pointer-events: none;
    opacity: 0.5;
    cursor: default;
}

/* Bulk edit field validation error: red highlight on Field to Edit and New Value editors.
   .profix-field-error is applied via CssClass on DxComboBox/DxTextBox when IsError=true.
   DxComboBox renders as <dxbl-combo-box class="dxbl-text-edit profix-field-error">
   with <input class="dxbl-text-edit-input"> as a direct child (no .dxbl-text-edit-template
   wrapper in standard mode). DxTextBox renders similarly as <dxbl-input-editor>. */
.profix-field-error > input.dxbl-text-edit-input,
.profix-field-error input.dxbl-text-edit-input,
.profix-field-error > textarea {
    background-color: #FFDDDD !important;
    color: #CC0000 !important;
}
/* Fallback for any template-wrapped mode */
.profix-field-error .dxbl-text-edit-template,
.profix-field-error .dxbl-text-edit-template input {
    background-color: #FFDDDD !important;
    color: #CC0000 !important;
}

/* Tab header indicator when a validation error is hidden behind that tab.
   Applied by ValidationTabHighlightController via profix.markTabsWithErrors(). */
dxbl-tab-item.profix-tab-error {
    border-bottom: 2px solid #CC0000 !important;
}
dxbl-tab-item.profix-tab-error .dxbl-text {
    color: #CC0000 !important;
}

/* Warning-variant: zelfde semantische kleur als XAF's .validation-warning-veldmarkering en de
   warning-toast (thema-variabele, met amber-fallback). Fout wint van warning (zie _applyTabErrors). */
dxbl-tab-item.profix-tab-warning {
    border-bottom: 2px solid var(--dxds-color-content-warning-default-rest, var(--warning, var(--bs-warning, #E8A200))) !important;
}
dxbl-tab-item.profix-tab-warning .dxbl-text {
    color: var(--dxds-color-content-warning-default-rest, var(--warning, var(--bs-warning, #E8A200))) !important;
}

/* Vastgezet tabblad (Pin Tab in het tabblad-contextmenu): speld vóór het tabicoon. Gezet door js/pinnedTabs.js.
   Mask + currentColor: de speld krijgt de tekstkleur van het tabblad en werkt zo ook in dark mode. */
.dxbl-tabs-item.profix-tab-pinned .xaf-tab-header-template::before {
    content: "";
    display: inline-block;
    flex: none;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    background-color: currentColor;
    opacity: 0.75;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 1.5C5 1.2 5.2 1 5.5 1h5c.3 0 .5.2.5.5s-.2.5-.5.5H10v4.3l2.4 2.3c.1.1.1.2.1.4v1c0 .3-.2.5-.5.5H8.5v4c0 .3-.2.5-.5.5s-.5-.2-.5-.5v-4H4c-.3 0-.5-.2-.5-.5V9c0-.1.1-.3.1-.4L6 6.3V2h-.5c-.3 0-.5-.2-.5-.5z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 1.5C5 1.2 5.2 1 5.5 1h5c.3 0 .5.2.5.5s-.2.5-.5.5H10v4.3l2.4 2.3c.1.1.1.2.1.4v1c0 .3-.2.5-.5.5H8.5v4c0 .3-.2.5-.5.5s-.5-.2-.5-.5v-4H4c-.3 0-.5-.2-.5-.5V9c0-.1.1-.3.1-.4L6 6.3V2h-.5c-.3 0-.5-.2-.5-.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Qty-cel-markering op orderregels met een product maar zonder aantal — de conditie waarop de
   save geannuleerd wordt ("quantity must be greater than zero"). Rode rand om alléén de cel;
   inset box-shadow i.p.v. border zodat de gridlayout niet verschuift.
   Toegepast door OrderLineZeroQtyHighlightController. */
td.profix-qty-required-cell {
    box-shadow: inset 0 0 0 2px var(--dxds-color-content-danger-default-rest, #CC0000);
}



/* ============================================================================
   X Modern — component-classes voor de gemoderniseerde ListViews
   (gerenderd door RelationListViewModernController; werkt in elk theme)
   ============================================================================ */
.pfx-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pfx-tag {
    display: inline-flex; align-items: center;
    padding: 2px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.pfx-tag-customer { background: #E7EFF8; color: #1A4E86; }
.pfx-tag-supplier { background: #E7F4EC; color: #1F7A46; }
.pfx-tag-carrier  { background: #FBF0E1; color: #8A5A16; }
.pfx-tag-producer   { background: #E6F5F3; color: #1F6F63; }
.pfx-tag-prospect { background: #F0EAF9; color: #5B3E9E; }

.pfx-pill {
    display: inline-flex; align-items: center;
    padding: 2px 10px; border-radius: 7px;
    background: #EEF2F6; color: #334155;
    font-size: 11.5px; font-weight: 700;
}

/* Criteria als pills: een requirement of constraint leesbaar in een kolom.
   Gerenderd door CriteriaPillsListViewController; de tekst komt uit
   CriteriaDescriptionService.

   Het veld staat gedempt, de waarde vet. Geneste groepen krijgen een eigen
   omhulsel met een eigen tint, want "a en (b of c)" betekent iets anders dan
   "a en b of c" -- zonder die groepering is dat verschil niet te zien. Het
   bindwoord kleurt mee met zijn eigen niveau, zodat te zien is bij welke groep
   het hoort. */
.pfx-crit { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }

.pfx-crit-pill {
    display: inline-flex; align-items: baseline; gap: 4px;
    padding: 2px 9px; border-radius: 7px;
    font-size: 11.5px; line-height: 1.6; white-space: nowrap;
}
.pfx-crit-field { color: #64748B; font-weight: 600; }
.pfx-crit-op    { color: #94A3B8; font-weight: 700; }
.pfx-crit-value { color: #17406B; font-weight: 700; }

/* Het omhulsel van een geneste groep: de haakjes zijn vervangen door een vlak,
   dat leest sneller dan tekens tellen. */
.pfx-crit-group {
    display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center;
    padding: 3px 6px; border-radius: 9px;
}

/* Bindwoorden zijn geen voorwaarde en krijgen dus geen pill: ze mogen de rij
   niet even zwaar maken als de voorwaarden zelf. */
.pfx-crit-join {
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; padding: 0 1px;
}

/* Tinten per nestingsniveau. Eén rustige reeks: neutraal, blauw, paars, groen.
   Dieper dan vier niveaus hergebruikt de laatste tint (zie TintCount). */
.pfx-crit-p0 { background: #EEF2F6; border: 1px solid #DDE4EC; }
.pfx-crit-p1 { background: #E9F0FA; border: 1px solid #D3E1F4; }
.pfx-crit-p2 { background: #F0EAF9; border: 1px solid #E0D5F2; }
.pfx-crit-p3 { background: #E7F4EC; border: 1px solid #D2E9DA; }

.pfx-crit-g0 { background: transparent; }
.pfx-crit-g1 { background: #F4F8FD; box-shadow: inset 0 0 0 1px #DFEAF7; }
.pfx-crit-g2 { background: #F8F5FC; box-shadow: inset 0 0 0 1px #E8DFF6; }
.pfx-crit-g3 { background: #F3F9F5; box-shadow: inset 0 0 0 1px #DCEDE3; }

.pfx-crit-j0 { color: #8A96A5; }
.pfx-crit-j1 { color: #2F6BB0; }
.pfx-crit-j2 { color: #6A4BA8; }
.pfx-crit-j3 { color: #2F7D52; }

/* Niet te ontleden criteria: laat staan wat er staat, maar wel zichtbaar afwijkend
   zodat het opvalt dat hier iets niet klopt. */
.pfx-crit-raw {
    padding: 2px 8px; border-radius: 7px;
    background: #FBF0E1; color: #8A5A16;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11px; white-space: nowrap;
}

.pfx-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pfx-avatar {
    width: 28px; height: 28px; flex: none; border-radius: 8px;
    color: #fff; font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.pfx-name-text { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pfx-contact { line-height: 1.35; }
.pfx-contact-email { color: #17406B; font-weight: 600; }
.pfx-contact-phone { color: #8A96A5; font-size: 12px; }

/* ---------------------------------------------------------------------------
   Loading-indicator: exact hetzelfde beeld als het splashscreen bij het opstarten
   — het X-logo met een pulserende ring eromheen. Kleuren, maten en timing komen
   uit ProfixSplashScreen.razor, zodat opstarten en laden één geheel zijn.

   XAF rendert dit in LoadingIndicatorComponent (DevExpress.ExpressApp.Blazor):
     <div id="xaf-loading" class="xaf-loading">
       <div class="xaf-loading-content"><div class="spinner-border"></div><span>Loading</span></div>
     </div>
   Alles staat in de light DOM, dus de pill, de tekst en de spinner zijn puur met
   CSS te vervangen. Het voordeel boven een eigen overlay: DevExpress toont de
   indicator pas na 200 ms, dus korte serverrondjes geven geen flits.

   Niet aankomen:
   - visibility op .xaf-loading-content — die zet DevExpress inline en gebruikt
     hij om te tonen/verbergen; overschrijven laat de indicator permanent staan.
   - de class op #xaf-loading — isShowing() vergelijkt className exact, dus een
     extra class laat DevExpress denken dat de indicator uit staat.
   Volgorde: site.css wordt ná het DevExpress-stylesheet geladen, dus gelijke
   specificiteit is genoeg om de spinner-regels te overschrijven.
   --------------------------------------------------------------------------- */

/* De pill eromheen weg: geen kader, geen schaduw, geen achtergrond. De
   achtergrondkleur zet DevExpress inline op de body-kleur — vandaar !important,
   want een inline declaratie wint anders van het stylesheet. */
.xaf-loading-content {
    background: transparent !important;
    border: none;
    box-shadow: none;
    height: auto;
}

/* De tekst "Loading" weg: dat er iets laadt blijkt al uit de vervaagde
   achtergrond en het pulserende logo. */
.xaf-loading-content > span {
    display: none;
}

/* De spinner-div wordt de houder voor ring plus logo. Het logo staat als
   achtergrond op het element zelf, de ring is een ::before — zo pulseert alléén
   de ring en blijft het logo stil staan, net als in het splashscreen. */
.xaf-loading-content .spinner-border {
    position: relative;
    width: 58px;
    height: 58px;
    margin: 0;
    border: none;
    border-radius: 0;
    animation: none;
    background: url('../images/profix-x.svg') center / 26px 26px no-repeat;
}

.xaf-loading-content .spinner-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid rgba(15, 45, 91, 0.2);
    animation: pfx-loader-pulse 1.5s ease-in-out infinite;
}

@keyframes pfx-loader-pulse {
    0%, 100% { transform: scale(0.9); border-color: rgba(15, 45, 91, 0.2); }
    50%      { transform: scale(1.1); border-color: rgba(15, 45, 91, 0.8); }
}

/* Brickx: eigen logo en eigen ringkleur, zelfde als in het splashscreen. */
html[data-pfx-brand="brickx"] .xaf-loading-content .spinner-border {
    background-image: url('../images/brickx-x.svg');
}

html[data-pfx-brand="brickx"] .xaf-loading-content .spinner-border::before {
    animation-name: pfx-loader-pulse-brickx;
}

@keyframes pfx-loader-pulse-brickx {
    0%, 100% { transform: scale(0.9); border-color: rgba(18, 40, 76, 0.2); }
    50%      { transform: scale(1.1); border-color: rgba(18, 40, 76, 0.8); }
}

/* Donker thema: een donkerblauwe ring valt weg tegen een donkere achtergrond.
   Staat ná de brickx-regel, dus geldt voor beide merken in dark mode. */
html[data-pfx-theme="dark"] .xaf-loading-content .spinner-border::before {
    animation-name: pfx-loader-pulse-dark;
}

@keyframes pfx-loader-pulse-dark {
    0%, 100% { transform: scale(0.9); border-color: rgba(255, 255, 255, 0.18); }
    50%      { transform: scale(1.1); border-color: rgba(255, 255, 255, 0.75); }
}

/* Geen schaalanimatie voor wie beweging heeft uitgezet; alleen nog rustig aan/uit. */
@media (prefers-reduced-motion: reduce) {
    .xaf-loading-content .spinner-border::before {
        animation: pfx-loader-fade 2s ease-in-out infinite;
    }

    @keyframes pfx-loader-fade {
        0%, 100% { opacity: 0.45; }
        50%      { opacity: 1; }
    }
}

/* ==================== Regelgroepen: maatboog en schijventarief ==================== */
/* Het orderregelgrid toont per groep één kopregel; de andere regels van de groep bestaan wel maar zijn
   verborgen (ze staan onder de kop in het uitgeklapte detail). De uitklapknop alleen op koppen. */
.dxbl-grid tr.pfx-group-member { display: none !important; }
.dxbl-grid tr.pfx-group-head td { font-weight: 600; }
.pfx-deviating-flag { display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; margin-left: 6px; border-radius: 50%; background: #f59f00; color: #fff; font-size: 0.8em; font-weight: 700; line-height: 1; cursor: help; vertical-align: middle; }
.dxbl-grid tr.pfx-no-detail .dxbl-grid-expand-button { visibility: hidden; }.pfx-group-value { display: inline-block; width: 100%; }

.pfx-group-detail { padding: 6px 10px 10px 10px; }
.pfx-group-detail-empty { color: #888; }
.pfx-group-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.pfx-group-detail-title { font-weight: 600; }
.pfx-group-detail-sub { color: #777; }
/* Maatboog: rechts van de matrix de bewerking per maat. */
.pfx-matrix-with-production { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.pfx-matrix-production { display: flex; flex-direction: column; gap: 6px; min-width: 420px; }
.pfx-group-detail-qty { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
/* Het tredendetail is precies zo breed als zijn tabel, zodat het aantal en de knop Toepassen rechts
   uitkomen boven de kolom Bedrag. De kop krijgt breedte 0 met min-width 100%: dan telt hij niet mee
   voor de natuurlijke breedte van het blok (anders zou een lange producttitel de tabel meetrekken)
   maar vult hij die wel helemaal. */
.pfx-group-detail-tiers { width: fit-content; max-width: 100%; }
.pfx-group-detail-tiers .pfx-group-detail-head { width: 0; min-width: 100%; }
.pfx-group-detail-qty label { color: #777; }
.pfx-group-qty { width: 110px; }
/* De aantaleditor in de cel van een staffelkop: die bewerkt het bestelde aantal van de groep en
   moet de cel vullen zoals de gewone celeditors van het grid. */
.pfx-group-qty-cell { width: 100%; }

.pfx-tier-table { border-collapse: collapse; min-width: 420px; }
.pfx-tier-table th, .pfx-tier-table td { padding: 3px 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.pfx-tier-table th { text-align: left; font-weight: 600; }
.pfx-tier-table .pfx-num { text-align: right; }
.pfx-tier-table tfoot td, .pfx-tier-table tfoot th { border-bottom: none; font-weight: 600; }

/* De maatboog-tabel: kolommen zijn maten, rijen kleuren, cellen aantallen. Kleuren volgen het
   Bootstrap-thema (--bs-primary) zodat de matrix meekleurt met de rest van de applicatie. */
.pfx-matrix-wrap { overflow-x: auto; padding: 6px 2px 2px 2px; --pfx-accent: var(--bs-primary, #0d6efd); --pfx-accent-rgb: var(--bs-primary-rgb, 13, 110, 253); }
.pfx-matrix-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px 2px; flex-wrap: wrap; }
.pfx-matrix-head .pfx-matrix-title { font-weight: 700; font-size: 1.05em; }
.pfx-matrix-head .pfx-matrix-axes { color: #6c757d; font-size: 0.9em; }
.pfx-matrix-head .pfx-matrix-badge { background: var(--pfx-accent); color: #fff; border-radius: 999px; padding: 2px 12px; font-weight: 700; font-size: 0.9em; box-shadow: 0 2px 6px rgba(var(--pfx-accent-rgb), 0.35); }
.pfx-matrix { border-collapse: separate; border-spacing: 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 10px; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); }
.pfx-matrix th, .pfx-matrix td { border-right: 1px solid rgba(0, 0, 0, 0.07); border-bottom: 1px solid rgba(0, 0, 0, 0.07); padding: 5px 8px; text-align: center; vertical-align: middle; transition: background-color 0.12s ease; }
.pfx-matrix tr > :last-child { border-right: none; }
.pfx-matrix tbody tr:last-child td, .pfx-matrix tbody tr:last-child th { border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.pfx-matrix thead th { background: rgba(var(--pfx-accent-rgb), 0.10); color: var(--pfx-accent); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.82em; white-space: nowrap; padding: 8px 10px; }
.pfx-matrix .pfx-matrix-corner { text-align: left; text-transform: none; letter-spacing: 0; color: #6c757d; font-weight: 500; font-size: 0.85em; }
.pfx-matrix .pfx-matrix-axis-sep { margin: 0 5px; opacity: 0.6; }
.pfx-matrix .pfx-matrix-row { text-align: left; font-weight: 600; white-space: nowrap; background: rgba(var(--pfx-accent-rgb), 0.04); padding-left: 12px; padding-right: 14px; }
.pfx-matrix tbody tr:nth-child(even) td.pfx-matrix-cell { background: rgba(0, 0, 0, 0.015); }
.pfx-matrix tbody tr:hover td.pfx-matrix-cell, .pfx-matrix tbody tr:hover th.pfx-matrix-row { background: rgba(var(--pfx-accent-rgb), 0.06); }
.pfx-matrix .pfx-matrix-cell { min-width: 72px; }
.pfx-matrix .pfx-matrix-missing { background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.035) 0 6px, transparent 6px 12px); }
.pfx-matrix .pfx-matrix-filled { background: rgba(25, 135, 84, 0.10) !important; }
.pfx-matrix .pfx-matrix-filled .pfx-matrix-input { border-color: rgba(25, 135, 84, 0.55); font-weight: 700; color: #146c43; }
.pfx-matrix .pfx-matrix-input { width: 62px; height: 30px; text-align: center; padding: 2px 6px; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 7px; background: #fff; font-size: 1em; transition: box-shadow 0.12s ease, border-color 0.12s ease; }
.pfx-matrix .pfx-matrix-input:hover { border-color: rgba(var(--pfx-accent-rgb), 0.6); }
.pfx-matrix .pfx-matrix-input:focus { outline: none; border-color: var(--pfx-accent); box-shadow: 0 0 0 3px rgba(var(--pfx-accent-rgb), 0.25); }
.pfx-matrix .pfx-matrix-na { color: #c3c7cc; font-size: 1.1em; }
.pfx-matrix .pfx-matrix-value { display: inline-block; min-width: 24px; font-weight: 600; }
.pfx-matrix .pfx-matrix-stock { display: block; font-size: 0.72em; color: #8a929a; line-height: 1.2; margin-top: 2px; }
.pfx-matrix .pfx-matrix-stock::before { content: '\25CF'; font-size: 0.7em; margin-right: 3px; color: #20c997; vertical-align: middle; }
.pfx-matrix .pfx-matrix-stock-short { color: #dc3545; }
.pfx-matrix .pfx-matrix-stock-short::before { color: #dc3545; }
.pfx-matrix .pfx-matrix-total { font-weight: 700; background: rgba(var(--pfx-accent-rgb), 0.06); color: #343a40; }
.pfx-matrix tfoot .pfx-matrix-total { text-transform: uppercase; font-size: 0.82em; letter-spacing: 0.03em; }
.pfx-matrix tfoot td.pfx-matrix-total { font-size: 1em; text-transform: none; letter-spacing: 0; }
.pfx-matrix .pfx-matrix-grand { background: var(--pfx-accent) !important; color: #fff !important; font-size: 1.05em !important; }
.pfx-matrix-readonly .pfx-matrix { box-shadow: none; }
.pfx-matrix-readonly .pfx-matrix th, .pfx-matrix-readonly .pfx-matrix td { padding: 3px 8px; }
.pfx-matrix-readonly .pfx-matrix .pfx-matrix-cell { min-width: 48px; }
.pfx-matrix-empty { color: #888; padding: 8px; }
html[data-pfx-theme="dark"] .pfx-matrix { border-color: rgba(255, 255, 255, 0.12); box-shadow: none; }
html[data-pfx-theme="dark"] .pfx-matrix th, html[data-pfx-theme="dark"] .pfx-matrix td { border-color: rgba(255, 255, 255, 0.1); }
html[data-pfx-theme="dark"] .pfx-matrix .pfx-matrix-row, html[data-pfx-theme="dark"] .pfx-matrix .pfx-matrix-total { color: inherit; background: rgba(255, 255, 255, 0.06); }
html[data-pfx-theme="dark"] .pfx-matrix tbody tr:nth-child(even) td.pfx-matrix-cell { background: rgba(255, 255, 255, 0.02); }
html[data-pfx-theme="dark"] .pfx-matrix .pfx-matrix-missing { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 6px, transparent 6px 12px); }
html[data-pfx-theme="dark"] .pfx-matrix .pfx-matrix-input { background: rgba(255, 255, 255, 0.06); color: inherit; border-color: rgba(255, 255, 255, 0.25); }
html[data-pfx-theme="dark"] .pfx-matrix .pfx-matrix-filled .pfx-matrix-input { color: #6fd39a; }

/* Meldingenlijst in het belvenster (NotificationListEditor).
   Kleuren via de Bootstrap-thematokens zodat de kaartjes meekleuren met de rest van de applicatie,
   net als de matrix hierboven. */
.pfx-notification-list { display: flex; flex-direction: column; }

/* Elke melding is klikbaar: aanklikken zet hem op gelezen en opent wat erachter zit — het
   onderliggende object, of anders de melding zelf met haar rapport. Vandaar het handje op de hele rij,
   en geen tekstselectie: die gaf een tekstcursor en liet de rij dood aanvoelen. */
.pfx-notification { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--bs-border-color, #e3e6ea); cursor: pointer; user-select: none; }

.pfx-notification:last-child { border-bottom: 0; }

.pfx-notification:hover { background: var(--bs-tertiary-bg, #f6f7f9); }

.pfx-notification-icon { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: inline-block; position: relative; }

/* Het pictogram is een vorm in de cirkel: een uitroepteken voor waarschuwing en fout, een punt voor
   informatie. Geen lettertype-iconen, zodat dit niet afhangt van een geladen icon-set. */
.pfx-notification-icon::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.pfx-notification-icon-info { background: var(--bs-secondary-bg, #eef0f3); }
.pfx-notification-icon-info::after { width: 7px; height: 7px; border-radius: 50%; background: var(--bs-secondary-color, #6c757d); }

.pfx-notification-icon-warning { background: rgba(var(--bs-warning-rgb, 255, 193, 7), 0.18); }
.pfx-notification-icon-warning::after { width: 3px; height: 13px; border-radius: 2px; background: var(--bs-warning-text-emphasis, #a5670a); box-shadow: 0 8px 0 -1px var(--bs-warning-text-emphasis, #a5670a); }

.pfx-notification-icon-error { background: rgba(var(--bs-danger-rgb, 220, 53, 69), 0.15); }
.pfx-notification-icon-error::after { width: 3px; height: 13px; border-radius: 2px; background: var(--bs-danger, #dc3545); box-shadow: 0 8px 0 -1px var(--bs-danger, #dc3545); }

.pfx-notification-body { flex: 1; min-width: 0; }

.pfx-notification-head { display: flex; align-items: baseline; gap: 10px; }

.pfx-notification-subject { font-weight: 600; font-size: 14px; flex: 1; min-width: 0; }

.pfx-notification-age { font-size: 12px; color: var(--bs-secondary-color, #6c757d); white-space: nowrap; }

.pfx-notification-description { font-size: 13px; color: var(--bs-body-color, #495057); line-height: 1.45; margin-top: 2px; }

.pfx-notification-more { font-size: 12px; color: var(--bs-primary, #0d6efd); margin-top: 4px; }

.pfx-notification-empty { padding: 24px 16px; text-align: center; color: var(--bs-secondary-color, #6c757d); font-size: 13px; }

/* Werkitem-scherm: drie kolommen (Details | werk | Uren), altijd naast elkaar. profixHoursDock
   (fitHeight.js) markeert de rij (wi-dock-row) en de kolommen (wi-dock-left/-main/-side). De formlayout
   zet kolombreedtes als flex:none + width:% en laat die onder 768px los (alles onder elkaar); dat gebeurt
   bij flink inzoomen en is hier niet gewenst, dus de verdeling staat hier vast op elke breedte. De
   middenkolom rekt mee, zodat de urenkolom bij inklappen (klasse wi-hours-collapsed op de rij) zijn
   ruimte aan het midden afstaat. */
.wi-dock-row { flex-wrap: nowrap !important; }
.wi-dock-row > .wi-dock-left { flex: none !important; width: 25% !important; max-width: 25%; }
.wi-dock-row > .wi-dock-main { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0; }
.wi-dock-row > .wi-dock-side { flex: none !important; width: 25% !important; max-width: 25%; }
/* Ingeklapt is de urenkolom helemaal weg; de knop om hem terug te halen zit in de kop (WorkItemHeader). */
.wi-hours-collapsed > .wi-dock-side { display: none !important; }

/* Detailkolom (CustomCSSClassName wi-details-col in het model): de formlayout zet het label links van
   het veld (dxbl-fl-item-horizontal), en op een smalle kolom blijft er dan nauwelijks veld over. Onder
   350px kolombreedte gaat het label boven het veld en krijgt het veld de volle breedte. Gemeten aan de
   kolom zelf (container query) en niet aan het venster, zodat inzoomen en een klein venster hetzelfde
   doen. De labelbreedte zet DevExpress inline (gelijke labelbreedte per groep), vandaar !important. */
.wi-details-col { container-type: inline-size; }
@container (max-width: 350px) {
    .wi-details-col .dxbl-fl-item-horizontal { flex-flow: column !important; }
    .wi-details-col .dxbl-fl-item-horizontal > .dxbl-fl-cpt { width: auto !important; max-width: none !important; padding-bottom: 2px; }
}

/* Datumactie die bij elke wijziging zelf uitvoert (BlazorExecuteOnValueChangeController): het uitvoerknopje
   ernaast heeft dan geen functie. Het knopmodel van XAF kent geen Visible, vandaar deze klasse. */
.pfx-execute-on-change-button { display: none !important; }

/* Afbeelding vergroten (profixImageZoom in fitHeight.js). Binnen een element met data-img-zoom krijgt een
   afbeelding een vergrootglas als cursor en opent een klik hem in de overlay. Niet bij een plaatje in een
   link: daar gaat de klik naar de link. */
[data-img-zoom] img { cursor: zoom-in; }
[data-img-zoom] a[href] img { cursor: pointer; }

.profix-img-zoom { position: fixed; inset: 0; z-index: 150000; display: flex; align-items: center; justify-content: center; background: rgba(20, 20, 35, .8); }
.profix-img-zoom-box { display: flex; flex-direction: column; max-width: 94vw; max-height: 94vh; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
/* Centreren met margin:auto en niet met justify-content: op ware grootte is de afbeelding groter dan het
   vak, en justify-content schuift dan de linker- en bovenkant buiten bereik van de schuifbalken. */
.profix-img-zoom-stage { display: flex; flex: 1 1 auto; min-height: 0; overflow: auto; background: #111; }
.profix-img-zoom-img { display: block; margin: auto; max-width: 94vw; max-height: calc(94vh - 48px); object-fit: contain; }
.profix-img-zoom-scalable .profix-img-zoom-img { cursor: zoom-in; }
.profix-img-zoom-actual .profix-img-zoom-img { max-width: none; max-height: none; cursor: zoom-out; }
.profix-img-zoom-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; }
.profix-img-zoom-name { flex: 1; min-width: 0; font-size: 13px; color: #2b2b3a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profix-img-zoom-download { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: #5b52d9; color: #fff; text-decoration: none; font-size: 13px; }
.profix-img-zoom-download:hover { background: #4f47c4; color: #fff; }
.profix-img-zoom-close { border: none; background: none; font-size: 16px; color: #8a8a9a; cursor: pointer; }
.profix-img-zoom-close:hover { color: #2b2b3a; }

/* Bel-/mail-/linkicoon in een lijstcel (LinkButtonStringPropertyEditorBase). */
.profix-link-cell { display: inline-flex; align-items: center; gap: 6px; }
.profix-link-cell-button { display: inline-flex; color: inherit; opacity: .6; text-decoration: none; }
.profix-link-cell-button:hover { opacity: 1; color: var(--bs-primary, inherit); }

/* Hoofdtabbladen op de achtergrond niet laten meerekenen in de layout.
   XAF/DevExpress verbergt een niet-actief tabblad niet met display:none, maar met visibility:hidden en
   een positie buiten beeld (left -10000px). De browser rekent zo'n tabblad dus bij élke layout volledig
   mee. Elke maatmeting (de adaptieve werkbalk, alignCaptionWidths, de werklijstlade) dwingt dan een
   layout van alle open tabbladen af: gemeten op 15-10-2026 kostte een tabwissel of het openen van een
   ticket met 15 tabbladen open ~1,2 s layout, met 3 tabbladen een fractie daarvan.
   content-visibility:hidden slaat de inhoud over in de layout, maar laat hem in de DOM en houdt de
   toestand vast (scrollpositie, ingetypte tekst). Positie en afmeting van het tabblad zelf blijven gelijk,
   dus autoPageSize.js herkent een tabblad op de achtergrond nog steeds aan zijn positie.
   Alleen de directe tabbladen van de MDI (.xaf-tabbed-mdi), niet de tabgroepen binnen een scherm.
   Bij een DevExpress-update nakijken of deze klassen nog bestaan; zo niet, dan werkt de regel stil niet
   meer en komt de traagheid terug. */
.xaf-tabbed-mdi > .dxbl-tabs-content-panel > .dxbl-tabs-content:not(.dxbl-active) {
    content-visibility: hidden;
}

/* ===== Donkere modus (X Modern) =====
   De klassen hierboven zijn voor licht ontworpen: pastel vlakken met donkere tekst, navy tekst,
   wit dialoogvlak. Hier per onderdeel een donkere variant: doorschijnende tint van dezelfde kleur
   met lichtere tekst, zodat de betekenis (klant/leverancier, AND/OR-niveau, verloopt bijna, fout)
   herkenbaar blijft. Tokens (--pfx-*) komen uit profix-modern.css. */
html[data-pfx-theme="dark"] .pfx-tag-customer { background: rgba(96, 150, 230, .18); color: #9DC0F0; }
html[data-pfx-theme="dark"] .pfx-tag-supplier { background: rgba(47, 170, 100, .18); color: #7DD3A0; }
html[data-pfx-theme="dark"] .pfx-tag-carrier  { background: rgba(224, 164, 0, .16); color: #E8C15A; }
html[data-pfx-theme="dark"] .pfx-tag-producer   { background: rgba(44, 170, 148, .18); color: #7FD3C2; }
html[data-pfx-theme="dark"] .pfx-tag-prospect { background: rgba(139, 124, 240, .2); color: #B8ACFA; }
html[data-pfx-theme="dark"] .pfx-pill { background: rgba(255, 255, 255, .08); color: var(--pfx-text-soft); }

html[data-pfx-theme="dark"] .pfx-crit-field { color: var(--pfx-muted); }
html[data-pfx-theme="dark"] .pfx-crit-op    { color: var(--pfx-label); }
html[data-pfx-theme="dark"] .pfx-crit-value { color: var(--pfx-ink); }
html[data-pfx-theme="dark"] .pfx-crit-p0 { background: rgba(255, 255, 255, .07); border-color: var(--pfx-line); }
html[data-pfx-theme="dark"] .pfx-crit-p1 { background: rgba(96, 150, 230, .16); border-color: rgba(96, 150, 230, .35); }
html[data-pfx-theme="dark"] .pfx-crit-p2 { background: rgba(139, 124, 240, .18); border-color: rgba(139, 124, 240, .38); }
html[data-pfx-theme="dark"] .pfx-crit-p3 { background: rgba(47, 170, 100, .16); border-color: rgba(47, 170, 100, .35); }
html[data-pfx-theme="dark"] .pfx-crit-g1 { background: rgba(96, 150, 230, .07); box-shadow: inset 0 0 0 1px rgba(96, 150, 230, .28); }
html[data-pfx-theme="dark"] .pfx-crit-g2 { background: rgba(139, 124, 240, .07); box-shadow: inset 0 0 0 1px rgba(139, 124, 240, .3); }
html[data-pfx-theme="dark"] .pfx-crit-g3 { background: rgba(47, 170, 100, .07); box-shadow: inset 0 0 0 1px rgba(47, 170, 100, .28); }
html[data-pfx-theme="dark"] .pfx-crit-j1 { color: #8DB4F0; }
html[data-pfx-theme="dark"] .pfx-crit-j2 { color: #B8ACFA; }
html[data-pfx-theme="dark"] .pfx-crit-j3 { color: #7DD3A0; }
html[data-pfx-theme="dark"] .pfx-crit-raw { background: rgba(224, 164, 0, .16); color: #E8C15A; }

html[data-pfx-theme="dark"] .pfx-contact-email { color: #8FB8E4; }

/* Lot-picker (FIFO): de cel zou anders door het dekkende gridvlak van het thema overgeschilderd worden. */
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.profix-picker-expiry-soon {
    background-color: rgba(255, 152, 0, .22) !important;
    color: #FFC27A !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)) > td.profix-picker-expiry-expired {
    background-color: rgba(229, 72, 62, .24) !important;
    color: #FF9C94 !important;
}

/* Bulk edit: veld met validatiefout. */
html[data-pfx-theme="dark"] .profix-field-error :is(input.dxbl-text-edit-input, textarea, .dxbl-text-edit-template, .dxbl-text-edit-template input) {
    background-color: rgba(214, 69, 80, .18) !important;
    color: #F08A92 !important;
}

/* Afbeelding vergroten: dialoogbalk was wit. */
html[data-pfx-theme="dark"] .profix-img-zoom-box { background: var(--pfx-surface); }
html[data-pfx-theme="dark"] .profix-img-zoom-name { color: var(--pfx-ink); }
html[data-pfx-theme="dark"] .profix-img-zoom-close { color: var(--pfx-muted); }
html[data-pfx-theme="dark"] .profix-img-zoom-close:hover { color: var(--pfx-ink); }

/* Voortgangsbalken (ProgressBarPropertyEditor, PercentageProgressBarEditor): spoor en tekst staan inline
   licht; hier een donker spoor en lichte tekst met een schaduwrand, leesbaar op het donkere spoor én
   op de groene/oranje vulling. */
html[data-pfx-theme="dark"] .pfx-progress {
    background: var(--pfx-surface-3) !important;
    border-color: var(--pfx-line) !important;
}
html[data-pfx-theme="dark"] .pfx-progress-label {
    color: var(--pfx-ink) !important;
    text-shadow: 0 0 3px rgba(0, 0, 0, .75);
}

/* Componenten die alleen inline stijlen hebben (geen eigen <style>), op hun vaste kenmerken:
   - "Gegevens gewijzigd"-banner (DataChangedBannerComponent): lichtoranje vlak.
   - Sleep-/upload-overlays van de bestands-dropzones: wit kader en witte waas over de lijst.
   - Suggestielijsten van de servicepunt-/transporthub-zoekers: lichte scheidingslijnen en grijze tekst. */
html[data-pfx-theme="dark"] [role="status"][style*="#fff4e5"] {
    background: rgba(240, 160, 42, .14) !important;
    color: #F5C77A !important;
}
html[data-pfx-theme="dark"] :is(.grid-file-drop-zone, .document-drop-zone-wrapper) [style*="background: white"] {
    background: var(--pfx-surface) !important;
    color: #8DB4F0 !important;
}
html[data-pfx-theme="dark"] :is(.grid-file-drop-zone, .document-drop-zone-wrapper) [style*="rgba(255, 255, 255, 0."] {
    background: rgba(20, 27, 36, .6) !important;
}
html[data-pfx-theme="dark"] :is(#servicepoint-autocomplete-container, #transporthub-autocomplete-container) [style*="border-bottom: 1px solid #eee"] {
    border-bottom-color: var(--pfx-line-soft) !important;
}
html[data-pfx-theme="dark"] :is(#servicepoint-autocomplete-container, #transporthub-autocomplete-container) [style*="color: #666"] {
    color: var(--pfx-text-soft) !important;
}
html[data-pfx-theme="dark"] :is(#servicepoint-autocomplete-container, #transporthub-autocomplete-container) [style*="color: #999"] {
    color: var(--pfx-muted) !important;
}

/* Kleine grijzen die op donker te zwaar of te zwak zijn. */
html[data-pfx-theme="dark"] .cf-rating-star { color: var(--pfx-line); }
html[data-pfx-theme="dark"] .cf-rating-star-filled { color: #f5b301; }
html[data-pfx-theme="dark"] :is(.pfx-group-detail-empty, .pfx-group-detail-sub, .pfx-group-detail-qty label) { color: var(--pfx-muted); }
html[data-pfx-theme="dark"] .pfx-tier-table :is(th, td) { border-bottom-color: var(--pfx-line-soft); }