/* ==========================================================================
bn-theme.css — BouwNet stijllaag (slice U1)
==========================================================================
Doel: elk raster tegelijk rustiger maken (zie
_docs/plans/2026-08-31-ui-herontwerp.md, canvas "BouwNet Werkscherm-stijl").
Puur CSS: geen gedrag, geen markup-wijziging.
LAADMECHANISME (sinds 2026-09-09): dit bestand hangt NIET meer als vaste
in Pages/_Host.cshtml, maar is de CustomUrls-entry van het custom
theme "BouwNet" (Office White-basis) in de ThemeSwitcher-config van
appsettings.json. BootstrapThemeLink injecteert het in ná de
themabestanden, dus deze regels winnen nog steeds — en wisselen naar een
stock-thema (+ pagina herladen) schakelt deze hele laag uit, als
vergelijkingsbeeld voor styling-diagnose.
Status van elke sectie is expliciet gemarkeerd:
VERIFIED = bevestigd via BatchGridKeyboardController /
grid-behaviors.js (live geverifieerd DOM, zie SEL-constante
aldaar) of via de officiële DevExpress Blazor-documentatie
(docs.devexpress.com, Blazor-technologie, 25.2/26.1).
AANNAME = niet in een browser geverifieerd voor deze app. Elke AANNAME
staat ook genoemd in het U1-rapport.
========================================================================== */
/* --------------------------------------------------------------------------
1. Tokens — design-taal als CSS custom properties
-------------------------------------------------------------------------- */
:root {
/* Oppervlakken */
--bn-surface: #eef0f2; /* werkblad (buiten het raster) */
--bn-panel: #ffffff; /* paneel / raster-achtergrond */
--bn-header-bg: #f6f7f8; /* kopregel */
--bn-input-bg: #ffffff; /* invoerveld */
/* Tekst */
--bn-text-primary: #343a40;
--bn-text-secondary: #6b7278;
--bn-text-muted: var(--bn-text-secondary); /* alias — de .razor.css-bestanden gebruiken
deze naam (viel tot 2026-09-09 stil terug
op hun inline #666-fallback) */
--bn-text-tertiary: #949ba1;
--bn-text-zero: #8d9499; /* nulwaarde-cellen */
/* Lijnen */
--bn-hairline-outer: #dde1e5; /* haarlijn buiten (rand van het raster) */
--bn-hairline-row: #eceff1; /* rijlijn (horizontale scheiding, laag contrast) */
/* Accent */
--bn-accent: #1c60aa; /* merkoranje — alleen focus, primaire knop, actief menu-item */
--bn-accent-surface: #eaf1f9; /* accentvlak */
--bn-modified-mark: #7aa3d0; /* markering wijziging (streepje) */
--bn-modified-row-tint: #f7fafd; /* lichte tint over een gewijzigde rij */
/* Statuskleuren (achtergrond / tekst) — zie sectie 5 voor de klassenamen */
--bn-state-ingaven-bg: #edeeef;
--bn-state-ingaven-fg: #5a6069;
--bn-state-besteld-bg: #e8eff7;
--bn-state-besteld-fg: #3a5f8a;
--bn-state-toegekomen-bg: #e9f2ea;
--bn-state-toegekomen-fg: #3f6b47;
--bn-state-naar-stock-bg: #e6f0ef;
--bn-state-naar-stock-fg: #2f645c;
--bn-state-backorder-bg: #fbeceb;
--bn-state-backorder-fg: #92483f;
--bn-state-retour-bg: #efebf5;
--bn-state-retour-fg: #5d4f80;
/* Maten */
--bn-row-height: 32px; /* comfortabel (default) */
--bn-row-height-compact: 26px;
--bn-header-height: 30px;
--bn-filter-bg: #fbfaf8; /* filterrij -- lichter dan de kopregel */
--bn-filter-height: 27px;
--bn-cell-font-size: 12.5px;
--bn-column-header-font-size: 12px;
--bn-column-header-font-weight: 600;
/* ----------------------------------------------------------------------
Generieke merk-tokens + Bootstrap/DevExpress-koppeling
----------------------------------------------------------------------
Zelfde V1-namen als PAT's boodstrap-extention-theme.css (--brand-*,
--layout-bg, --text-dark), zodat thema's tussen de projecten
uitwisselbaar blijven. De --bs- en --dxbl-regels sturen de kleuren die
de stock-stylesheets zelf via CSS-variabelen lezen — dat is de
duurzame weg (geen DOM-selectors, upgrade-vast). LET OP: schrijf in
CSS-comments nooit een ster direct gevolgd door een schuine streep
(zoals in "--bs-*" + "/"): dat sluit het comment af en de parser eet
dan declaraties op — precies zo verdween --brand-primary hier
geruisloos (live gevonden 2026-09-09). Structurele regels
verderop in dit bestand blijven nodig voor wat DevExpress niet als
variabele aanbiedt (rijhoogte, haarlijnen, pillen). */
--brand-primary: var(--bn-accent);
--brand-primary-hover: #144377; /* ATA donkerblauw (atahout.be) */
--layout-bg: var(--bn-surface);
--text-dark: var(--bn-text-primary);
--bs-primary: var(--brand-primary);
--bs-body-bg: var(--layout-bg);
--bs-body-color: var(--text-dark);
--bs-link-color: var(--brand-primary);
--bs-link-hover-color: var(--brand-primary-hover);
--dxbl-accent-color: var(--brand-primary);
/* Statusbalk (U6): --bs-*-tokens so a theme/skin switch carries the statusbar colors along,
same mechanism as --bs-primary/--dxbl-accent-color above; each falls back to one of this
file's own --bn-*-tokens when the loaded stock skin doesn't define that --bs- variable. */
--bn-statusbar-bg: var(--bs-tertiary-bg, var(--bn-panel));
--bn-statusbar-fg: var(--bs-secondary-color, var(--bn-text-secondary));
--bn-statusbar-border: var(--bs-border-color, var(--bn-hairline-outer));
--bn-statusbar-warn-bg: var(--bs-warning-bg-subtle, var(--bn-accent-surface));
--bn-statusbar-warn-fg: var(--bs-warning-text-emphasis, var(--bn-accent));
--bn-statusbar-error-bg: var(--bs-danger-bg-subtle, var(--bn-state-backorder-bg));
--bn-statusbar-error-fg: var(--bs-danger-text-emphasis, var(--bn-state-backorder-fg));
}
/* Dichtheidsschakelaar (voorbereiding voor U6): [data-bn-density="compact"] op
of herdefinieert --bn-row-height; alle regels hieronder lezen
uitsluitend deze variabele, nooit een hardcoded rijhoogte. Het attribuut
wordt in deze slice nog nergens gezet — dat is U6. */
[data-bn-density="compact"] {
--bn-row-height: var(--bn-row-height-compact);
}
/* --------------------------------------------------------------------------
2. DevExpress-selectors — allemaal hier bij elkaar
-------------------------------------------------------------------------- */
/*
Net als de SEL-constante in wwwroot/js/grid-behaviors.js: alle selectors
die op DevExpress-interne DOM-structuur leunen staan hieronder opgesomd,
met hun herkomst. Her-verifieer deze lijst in de browser dev tools na elke
DevExpress-upgrade.
.dxbl-grid /
table.dxbl-grid-table VERIFIED 2026-09-01 (live DOM, adressenlijst): élk XAF-raster
rendert als met daarin
. De stijllaag hing eerst aan
.bn-batch-grid en raakte daardoor alleen de batch-bewerkbare
schermen; de rest van de app hield het oude uiterlijk. Nu
gescoped op het raster zelf, dus alle lijsten doen mee.
.bn-batch-grid VERIFIED — CssClass gestempeld door
BatchGridKeyboardController.OnViewControlsCreated
op adapter.GridModel.CssClass; landt op het
root-element van de DxGrid.
.bn-col- VERIFIED — CustomizeElement in dezelfde
controller stempelt dit op elke databcel
(GridElementType.DataCell).
tr[data-visible-index] VERIFIED — grid-behaviors.js SEL.dataRow;
live geverifieerd tegen de PurchaseOrder-
batchgrid. Aanwezig op elke datarij, niet op
de kopregel.
td.xaf-grid-modified-value VERIFIED — grid-behaviors.js SEL.modifiedCell;
live geverifieerd door een cel te bewerken en
de class-list te inspecteren.
table > tr (kopregel) AANNAME — DevExpress' eigen documentatie-
voorbeeld voor "Gridline Visibility"
(docs.devexpress.com/Blazor/401740, sectie
"Apply Styles to Inner HTML Elements") gebruikt
`table tr:not(:first-child) > td` om de
horizontale lijn van de kopregel te
onderscheiden — dat impliceert een platte
rijenlijst zonder waarbij de kopregel
de eerste tr is. Niet live bevestigd tegen
déze grid (kolombanden/filterrij zouden dit
kunnen verstoren). Hieronder daarom gebouwd
als "elke tr die geen datarij is" i.p.v.
hard op :first-child, wat iets robuuster is
tegen een eventuele filterrij.
Verticale randen / td-randen AANNAME — geen GridlinesVisible-instelling
gevonden in de XAF-listviews (BouwNet.Blazor
.Server/Model.xafml zet alleen
InlineEditMode="Batch"), dus onbekend of
verticale lijnen standaard aan staan. De
regel hieronder verwijdert ze defensief op elk
niveau (table/th/td) zodat ze in elk geval
niet zichtbaar zijn.
Focus/hover Bewust GEEN DevExpress-klasse gebruikt: de
focusring hieronder leunt op de standaard
CSS-pseudo-klasse :focus-within op de
(werkt ongeacht of DevExpress de input direct
in de cel plaatst of in een wrapper) en hover
op de standaard :hover op tr[data-visible-index].
Dat is geen aanname over DevExpress-interne
classes, wel een aanname dat de actieve editor
een DOM-afstammeling van de
blijft (net
als bij grid-behaviors.js se F3/Enter-logica).
--dxbl-grid-row-bg VERIFIED (als bestaand mechanisme) — CSS-
variabele die DevExpress' eigen "Alternate Row
Style"-voorbeeld gebruikt
(DevExpress.Blazor.DxGrid.CustomizeElement-doc)
om een rij-achtergrond te zetten. Hier NIET
gebruikt (we zetten background-color direct op
td, geen aanname nodig over of deze variabele
in de XAF/Bootstrap-skin al gedefinieerd is —
dat is enkel bevestigd voor de Fluent-theme-
demo's).
*/
/* --------------------------------------------------------------------------
3. Rasterchrome — randen, rijhoogte, kopregel, hover, focusring, gewijzigd
-------------------------------------------------------------------------- */
/* Basis: paneelachtergrond en tekstkleur voor elk batch-raster. */
.dxbl-grid {
background: var(--bn-panel);
color: var(--bn-text-primary);
border: 1px solid var(--bn-hairline-outer);
}
/* Geen verticale rasterlijnen (regel 1). AANNAME, zie sectie 2. !important
omdat DevExpress' eigen regels op tabelcelniveau vaak twee klasse-
selectors gebruiken en dus specifieker zijn dan een enkele .bn-batch-grid-
afstammeling (zie docs.devexpress.com/Blazor/401740, "Why Your Custom
Style Can Be Ignored"). */
.dxbl-grid table.dxbl-grid-table td,
.dxbl-grid table.dxbl-grid-table th {
border-left: none !important;
border-right: none !important;
}
/* Horizontale rijlijn op laag contrast (regel 1) — elke datarij, niet de
kopregel. */
.dxbl-grid table.dxbl-grid-table tr[data-visible-index] > td {
border-top: 1px solid var(--bn-hairline-row) !important;
}
/* Filterrij (auto-filter row). VERIFIED 2026-09-01 in de live DOM: DevExpress
rendert hem als tr.dxbl-grid-filter-row met TD-cellen en ZONDER
data-visible-index -- een :not([data-visible-index])-selector op de kopregel
pakte hem dus mee. Lichter dan de kopregel, conform de stijlgids. */
.dxbl-grid table.dxbl-grid-table tr.dxbl-grid-filter-row > td {
background: var(--bn-filter-bg);
height: var(--bn-filter-height);
border-bottom: 1px solid var(--bn-hairline-row);
font-weight: 400;
}
/* Kopregel: tr.dxbl-grid-header-row met TH-cellen (VERIFIED 2026-09-01, zie
sectie 2). Vaste hoogte 30px, kleinere/vettere tekst, geen kop-onder-
streping in het accent. */
.dxbl-grid table.dxbl-grid-table tr.dxbl-grid-header-row {
background: var(--bn-header-bg);
}
.dxbl-grid table.dxbl-grid-table tr.dxbl-grid-header-row > th,
.dxbl-grid table.dxbl-grid-table tr.dxbl-grid-header-row > td {
height: var(--bn-header-height);
font-size: var(--bn-column-header-font-size);
font-weight: var(--bn-column-header-font-weight);
color: var(--bn-text-secondary);
border-top: none !important;
}
/* Rijhoogte comfortabel/compact (leest --bn-row-height, zie sectie 1) en
celtekst-formaat. */
.dxbl-grid table.dxbl-grid-table tr[data-visible-index] > td {
height: var(--bn-row-height);
font-size: var(--bn-cell-font-size);
}
/* Cijferkolommen: tabular-nums is een no-op op niet-numerieke tekst, dus dit
kan blind op elke datacel — geen aanname nodig over wélke kolom numeriek
is. Rechts uitlijnen laten we aan DevExpress' eigen kolom-uitlijning voor
numerieke velden over (die bestaat al); we forceren dat hier niet, om
tekst- en lookup-kolommen niet per ongeluk mee te verschuiven. */
.dxbl-grid table.dxbl-grid-table tr[data-visible-index] > td {
font-variant-numeric: tabular-nums;
}
/* Nulwaarde-cellen: als een cel expliciet met bn-col-* leeg/0 gerenderd
wordt, is er vandaag geen apart markeerpunt voor "is dit een nulwaarde"
(dat stempelen is geen onderdeel van deze slice). --bn-text-zero staat wel
als token klaar zodat een latere slice 'm kan gebruiken via een class op
de cel. */
/* Rij-hover (regel: rustig, geen kleurexplosie) — standaard :hover, geen
DevExpress-klasse nodig. */
.dxbl-grid table.dxbl-grid-table tr[data-visible-index]:hover > td {
background: var(--bn-header-bg);
}
/* Focus: oranje kader, geen vulling — alleen de cel met focus (regel 2).
:focus-within i.p.v. een gegokte DevExpress-focusklasse (zie sectie 2). */
.dxbl-grid table.dxbl-grid-table tr[data-visible-index] > td:focus-within {
box-shadow: inset 0 0 0 2px var(--bn-accent);
outline: none;
}
/* Gewijzigde cel (regel 3): geen hoekje meer, één streepje links op de rij
plus een lichte tint over de hele rij. td.xaf-grid-modified-value is
VERIFIED (zie sectie 2). We kunnen vanuit CSS niet "de hele rij" selecteren
op basis van een gewijzigde cel elders in diezelfde rij (geen CSS-parent-
selector die zo ver reikt over meerdere kolommen) — daarom passen we de
tint toe op de gewijzigde cel zelf en het streepje op de eerste kolom-cel
van een rij die zelf gewijzigd is. Een rij met een wijziging in een latere
kolom krijgt zo de tint pas vanaf die kolom, niet over de volledige rij;
dat is een bekende beperking van CSS-only en geen aanname — als een latere
slice de rij-brede tint nodig heeft, moet BatchGridKeyboardController zelf
een "rij bevat een wijziging"-marker op de
zetten (vergelijkbaar met
bn-col-*), wat buiten de grenzen van deze CSS-only slice valt. */
/* Terugval als de JS-laag niet draait: dan markeert alleen de gewijzigde cel zelf. */
.dxbl-grid table.dxbl-grid-table td.xaf-grid-modified-value {
background: var(--bn-modified-row-tint) !important;
}
/* Slice U3: grid-behaviors.js stempelt bn-row-modified op elke rij die een gewijzigde cel
bevat, waardoor de markering wél de hele rij kan beslaan -- een streepje links in plaats
van een hoekje per cel. Bij tien gewijzigde rijen scheelt dat een scherm vol driehoekjes. */
.dxbl-grid table.dxbl-grid-table tr.bn-row-modified > td {
background: var(--bn-modified-row-tint) !important;
}
.dxbl-grid table.dxbl-grid-table tr.bn-row-modified > td:first-child {
box-shadow: inset 3px 0 0 0 var(--bn-modified-mark);
}
/* --------------------------------------------------------------------------
3b. Statusbalk (regel U6) — kleuren via token i.p.v. hardcoded hex
-------------------------------------------------------------------------- */
/* Layout/typografie (padding, font-size) blijft in site.css (altijd geladen,
geen themakoppeling nodig) — hier staan uitsluitend de KLEUREN, zodat een
themawissel ze meeneemt (zie de tokens hierboven in sectie 1). Eerder
stonden deze kleuren als vaste hex in site.css, wat een themawissel niet
volgde (het U6-defect). grid-behaviors.js (updateStatusbars()) stempelt
bij elke update precies één van deze modifier-klassen naast de vaste
.bn-grid-statusbar-basisklasse: __ok zolang er geen niet-opgeslagen
wijziging in het raster staat, __warn zodra er minstens één pending-rij
is. __error is hier wél gedefinieerd maar wordt vandaag nergens door JS
gezet — gereserveerd voor een latere mislukte-opslag-melding; er bestaat
nog geen signaal daarvoor in de statusbalk-logica. */
.bn-grid-statusbar__ok,
.bn-grid-statusbar__warn,
.bn-grid-statusbar__error {
background: var(--bn-statusbar-bg);
color: var(--bn-statusbar-fg);
border-top: 1px solid var(--bn-statusbar-border);
}
.bn-grid-statusbar__warn {
background: var(--bn-statusbar-warn-bg);
color: var(--bn-statusbar-warn-fg);
}
.bn-grid-statusbar__error {
background: var(--bn-statusbar-error-bg);
color: var(--bn-statusbar-error-fg);
}
/* --------------------------------------------------------------------------
4. Invoervelden binnen het raster
-------------------------------------------------------------------------- */
/* AANNAME: DevExpress rendert editor-inputs in batch-modus doorgaans als
/