(FocusOnNavigate — de schermlezer leest de titel voor).
De AppKit onderdrukt de muis-focusrand, maar bij een VOLLEDIGE paginalaad (bv. het startscherm net na login) telt
die focus als :focus-visible en toont de browser een zwart kader rond de titel. Een titel is niet-interactief →
nooit een zichtbare focusrand (ook niet bij :focus-visible). */
h1:focus,
h1:focus-visible { outline: none; }
/* Help-lade: de "Volledige handleiding"-knop volle breedte. Enkel binnen het help-paneel. */
.help-panel .prefs-footer .prefs-chip {
display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
padding: 8px; border-radius: 8px;
}
.help-panel .prefs-footer .prefs-chip:hover { background: var(--bs-secondary-bg); }
/* Bedrijfsfiche: kaart-raster (2 kolommen, responsief) + logo-sleepvak (CreditSoft-patroon, 1:1). */
/* ⚠️⚠️ KOLOMSTROOM EN GEEN GRID, 12/09/2026 — en het verschil is precies waar de hoogte in zat.
Hier stond `display: grid` met `repeat(auto-fit, minmax(340px, 1fr))` en `max-width: 1000px`. Twee
gevolgen, allebei gemeten op /administration/company-profile in een main van 1490px:
· Een grid legt RIJEN, en de hoogste kaart van een rij bepaalt de rijhoogte. Contact was 615px en
Identiteit 259 → 356px wit onder Identiteit. Na het splitsen van Contact verschoof dat wit naar
onder Adres (244px): het probleem was niet die ene kaart maar de rij-indeling zelf.
· `max-width: 1000px` kapte het aantal kolommen op twee af. auto-fit had er vier kunnen leggen;
er bleef ~500px ongebruikt rechts.
`columns` vult kolom na kolom op HOOGTE, dus korte en lange kaarten schuiven in elkaar en er is geen
rij die een hoogte oplegt. De breedtewaarde (en niet `columns: 3`) houdt het responsief: de browser
legt zoveel kolommen van minstens 440px als er passen — één op een telefoon, drie op dit venster.
⚠️ `break-inside: avoid` is GEEN detail maar de voorwaarde: zonder die regel knipt de browser een
kaart middendoor over twee kolommen, en dan staat de helft van Bank onder Adres.
⚠️ En de LEESORDE wijzigt: een grid leest horizontaal per rij, kolomstroom verticaal per kolom. Voor
een formulier is dat eerder een winst — je leest een kaart af en gaat naar de volgende — maar wie de
orde van de kaarten wijzigt, wijzigt hiermee ook waar ze belanden. */
.fiche-grid {
columns: 440px;
column-gap: 1rem;
}
/* `gap` bestaat niet tussen items van een kolomstroom — de ruimte tussen twee kaarten komt van hun
eigen ondermarge. */
.fiche-grid > .adm-card {
break-inside: avoid;
margin-bottom: 1rem;
}
/* ⚠️⚠️ EEN LANG VELDLABEL LIEP OVER ZIJN BUUR HEEN — gemeten op 12/09/2026, niet geraden.
DevExpress zet op zijn eigen caption `white-space: nowrap` met `overflow: hidden`. Het label krijgt
dan zijn VOLLE tekstbreedte, ook wanneer de kolom smaller is, en schuift over het veld ernaast.
De meting op deze fiche, twee ColSpanMd="6"-velden naast elkaar:
"Dagen na de vervaldag vóór de eerste aanmaning" links 769 rechts 1088 (319px breed)
"Dagen tussen twee aanmaningen" links 1004 rechts 1218
→ 84px overlap, en de eerste tekst liep zichtbaar door de tweede.
⚠️ `overflow: hidden` maakt dit ERGER dan een gewone overloop: er komt geen beletselteken en geen
schuifbalk, dus er is niets dat zegt dat er tekst mist. Wie dit ooit terugdraait naar nowrap moet
weten dat de labels op deze fiche daar niet in passen — het zijn hele zinnen, met opzet (zie de
nota bij bedrijf.rappeleerste: twee beslissingen, geen verfijning van één).
Binnen .fiche-grid en niet globaal: dit is de opmaak van ONZE kaarten. Dat DevExpress hier nowrap
zet is gemeld aan de ADM One-sessie — als de hele vloot hierop stuit, hoort de regel in de
fundering en niet in vier apps. */
/* ⚠️⚠️ `!important` IS HIER GEMETEN NOODZAAK, geen luiheid — en dat hoort erbij te staan, want een
!important zonder reden is het volgende dat iemand weghaalt.
Zonder de vlaggen bleef de computed style `nowrap` staan terwijl deze regel WEL geserveerd werd
(nagemeten met curl op app..css: ze staat erin). Er is geen inline style op het element,
de ouder staat op `normal`, en een zoektocht door document.styleSheets vond geen enkele andere regel
die white-space op een .dxbl-fl-* zet. Waar die nowrap vandaan komt heb ik dus NIET gevonden — mijn
recursie over @media/@layer-blokken was zelf stuk, en ik ben gestopt met zoeken toen de proef beneden
uitwees dat de oplossing werkt.
⚠️ Dat "niet gevonden" staat er met opzet in plaats van een aannemelijke verklaring. Wie dit later
opruimt: meet eerst opnieuw zonder de vlaggen, want als DevExpress die nowrap ooit laat vallen, mag
deze regel weg.
GEMETEN op /administration/company-profile, de twee aanmaningsvelden naast elkaar:
zonder: label 1 tot x=1088, label 2 vanaf x=1004 → 84px OVERLAP, tekst door tekst
met: label 1 tot x= 992, label 2 vanaf x=1004 → 12px ruimte, label 1 wordt twee regels
(22px → 42px hoog) */
.fiche-grid .dxbl-fl-cpt {
white-space: normal !important;
overflow: visible !important;
}
.logo-preview { max-height: 64px; max-width: 200px; object-fit: contain; }
/* Logo-sleepvak (DxUpload ExternalDropZone): grote streepjesrand, slepen of klikken. */
.logo-drop {
border: 2px dashed var(--bs-border-color); border-radius: 8px; padding: 1.5rem 1rem;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
text-align: center; cursor: pointer; color: var(--bs-secondary-color); min-height: 130px;
transition: border-color .12s ease, background .12s ease;
}
.logo-drop:hover, .logo-drop.logo-drop-hover {
border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle);
}
.logo-drop .logo-drop-title { font-weight: 600; color: var(--bs-body-color); }
/* ── Pijplijnbord (kanban) ───────────────────────────────────────────────────────────────────────
Kolommen als lanes, kaarten sleepbaar. Vanaf lg vult het bord de viewport en scrollt elke kolom
intern; daaronder gewone pagina-scroll met horizontaal schuivende kolommen. Alle kleuren via
var(--bs-*) zodat licht/donker vanzelf volgt. Patroon overgenomen van het DAMC-dealsbord en
uitgebreid met sleepbaarheid (native HTML5 drag-and-drop, geen eigen JS). */
.pijplijn-bord { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; }
.pijplijn-kolom {
flex: 1 1 0; min-width: 230px; min-height: 0; display: flex; flex-direction: column;
background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: 12px;
transition: background .12s ease, border-color .12s ease;
}
/* Doelkolom tijdens het slepen: opvallend maar niet schreeuwerig. */
.pijplijn-kolom.is-doel { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.pijplijn-kolom-kop { padding: 10px 12px 8px; }
.pijplijn-kolom-titel {
display: flex; align-items: center; justify-content: space-between; gap: .4rem;
font-weight: 600; min-width: 0;
}
.pijplijn-kolom-som { font-size: .78rem; font-weight: 400; color: var(--bs-secondary-color); margin-top: 1px; }
/* padding-top geeft kaarten ruimte om bij hover op te tillen zonder dat overflow-y de rand afsnijdt. */
.pijplijn-kolom-body {
flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
padding: 6px 8px 10px;
}
.pijplijn-kaart {
display: block; text-decoration: none; background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color); border-left: 3px solid var(--bs-border-color);
border-radius: 10px; padding: 10px 12px; cursor: grab;
/* Zonder dit selecteert een sleepbeweging de tekst op de kaart i.p.v. de kaart te verslepen. */
user-select: none; -webkit-user-select: none;
transition: box-shadow .12s ease, transform .08s ease, border-color .12s ease;
}
.pijplijn-kaart:hover {
box-shadow: 0 2px 10px rgba(0, 0, 0, .08); border-color: var(--bs-secondary-color);
transform: translateY(-1px);
}
.pijplijn-kaart.is-sleept { opacity: .45; cursor: grabbing; }
/* Vraagt aandacht: verlopen next step, verstreken heractivatie- of geldigheidsdatum. Kleur draagt de
boodschap niet alleen — er staat ook een icoon met tekst op de kaart (toegankelijkheid). */
.pijplijn-kaart.is-aandacht { border-left-color: var(--bs-warning); }
.pijplijn-kaart-titel {
font-weight: 600; color: var(--bs-body-color);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pijplijn-kaart-meta {
display: flex; justify-content: space-between; gap: .5rem;
font-size: .78rem; color: var(--bs-secondary-color); margin-top: 2px;
}
.pijplijn-kaart-waarde { font-weight: 600; color: var(--bs-body-color); margin-top: 6px; }
.pijplijn-kaart-voet {
display: flex; align-items: center; gap: .3rem;
font-size: .75rem; color: var(--bs-warning-text-emphasis); margin-top: 6px;
}
.pijplijn-kolom-leeg { color: var(--bs-secondary-color); font-size: .8rem; font-style: italic; padding: 6px 4px; }
@media (min-width: 992px) {
.content:has(.pijplijn-bord) { display: flex; flex-direction: column; overflow: hidden; }
.content:has(.pijplijn-bord) > .content-inner {
flex: 1; min-height: 0; max-width: none; display: flex; flex-direction: column; overflow: hidden;
}
.pijplijn-bord { flex: 1; min-height: 0; }
}
/* Bord/lijst-schakelaar. Gebruikt de ghost-knoppen van de fundering (.adm-filter-btn); enkel de actieve stand
krijgt hier een eigen accent, want de standaard-actiefstand is dezelfde tint als hover en dan zie je niet in
welke weergave je staat.
⚠️ color-mix met transparant, géén vaste kleur: dat volgt licht/donker vanzelf. Een Bootstrap .btn-primary
deed dat níét — die draait in donkere modus zijn tekst naar zwart omdat de primaire kleur oplicht, en dat was
precies de melding van Dominique (10/08/2026). */
.pijplijn-schakelaar { display: inline-flex; gap: 2px; }
.pijplijn-schakelaar .adm-filter-btn.active {
background: color-mix(in srgb, var(--adm-accent, #2563eb) 14%, transparent);
font-weight: 500;
}
/* Leadfiche: drie blokken met een kop, i.p.v. negentien velden onder elkaar. De rand is subtiel — het gaat om
groeperen, niet om kaders tekenen. */
.fiche-blok { margin-bottom: 1.1rem; }
.fiche-blok + .fiche-blok { padding-top: .9rem; border-top: 1px solid var(--bs-border-color); }
.fiche-blok-kop {
font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
color: var(--bs-secondary-color); margin-bottom: .45rem;
}
/* Hulplade (AdmKit HelpPanel): onze intro's zijn HTML, maar de fundering zet enkel de tekstgrootte. Het
paneel is 330px breed, dus de browserstandaard van 40px inspringing voor een
vreet een achtste van de
ruimte op. Compacter, en lucht tussen de blokken zodat de opsomming leest als een opsomming. */
.help-body p { margin-bottom: .6rem; }
.help-body ul { padding-left: 1.15rem; margin-bottom: .6rem; }
.help-body li { margin-bottom: .3rem; }
.help-body li::marker { color: var(--bs-secondary-color); }
.help-body :last-child { margin-bottom: 0; }
.help-body em { color: var(--bs-secondary-color); font-style: normal; }
.help-body code {
font-size: .85em; padding: .1rem .3rem; border-radius: .25rem;
background: var(--bs-secondary-bg); color: var(--bs-body-color);
}
/* Contacten-tab in het journaal. Het paneel is 440px, dus een kaartje per persoon en géén raster: op die
breedte snijdt een tabel elke kolom af.
⚠️ Géén horizontale padding: .adm-journaal-content (fundering) heeft er zelf al géén, dus alles wat we hier
toevoegen zet de kaartjes verder naar binnen dan de scheidingslijn onder de tabkop. */
.journaal-contacten { display: flex; flex-direction: column; gap: .5rem; }
.journaal-contact {
border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .6rem .7rem; font-size: .875rem;
}
.journaal-contact-kop { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .15rem; }
.journaal-contact-naam { font-weight: 600; }
.journaal-contact-functie { color: var(--bs-secondary-color); font-size: .8rem; margin-bottom: .35rem; }
.journaal-contact a { text-decoration: none; }
.journaal-contact a:hover { text-decoration: underline; }
.journaal-contact .adm-icon { color: var(--bs-secondary-color); vertical-align: -2px; margin-right: .2rem; }
/* Het hele kaartje opent de fiche — dus ook zo laten voelen. De links erin behouden hun eigen aanwijzer. */
.journaal-contact-klikbaar { cursor: pointer; }
.journaal-contact-klikbaar:hover { border-color: var(--bs-primary); }
/* Koppelrijen op een fiche: contactpersonen bij een relatie, bedrijven bij een persoon. Bewust flex en géén
12-kolomsraster — met kolommen kreeg de knop een vaste breuk van de breedte, en bij een lange naam duwde
dat "Loskoppelen" buiten het venster. Nu krimpt de naam (met ellipsis) en houdt de knop altijd zijn plaats. */
.fiche-koppelrij { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.fiche-koppelrij > .naam { flex: 1 1 8rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fiche-koppelrij > .veld { flex: 1 1 9rem; min-width: 0; }
.fiche-koppelrij > .bijschrift { flex: 0 1 7rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fiche-koppelrij > .actie { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 767.98px) {
.fiche-koppelrij { flex-wrap: wrap; }
.fiche-koppelrij > .naam { flex-basis: 100%; }
}
/* ── Bijlagen-tab in het journaal ─────────────────────────────────────────────────────────────────────
Het paneel is 440px, dus een regel per bestand in plaats van een raster. De miniatuur staat vast op
40px: variabele hoogtes maken van een lijst foto's een trapje. */
.journaal-bijlagen .adm-bijlage-knop {
display: flex; align-items: center; justify-content: center; gap: 6px;
width: 100%; padding: 6px 10px; cursor: pointer;
border: 1px dashed var(--bs-border-color); border-radius: 6px;
color: var(--bs-secondary-color); font-size: .875rem;
}
.journaal-bijlagen .adm-bijlage-knop:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.journaal-bijlagen .adm-bijlage-knop.bezig { opacity: .6; cursor: progress; }
/* De echte invoer verbergen maar bereikbaar houden voor het toetsenbord en schermlezers — display:none
zou hem uit de tabvolgorde halen. */
.journaal-bijlagen .adm-bijlage-knop input[type=file] {
position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
}
.journaal-bijlagen .bijlage-rij {
display: flex; align-items: flex-start; gap: 8px;
padding: 8px 0; border-bottom: 1px solid var(--bs-border-color-translucent);
}
.journaal-bijlagen .bijlage-rij:last-child { border-bottom: 0; }
.journaal-bijlagen .bijlage-mini {
flex: 0 0 40px; width: 40px; height: 40px; border-radius: 4px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
background: var(--bs-tertiary-bg); color: var(--bs-secondary-color);
}
.journaal-bijlagen .bijlage-mini img { width: 100%; height: 100%; object-fit: cover; }
/* min-width:0 — zonder dit weigert een flex-kind te krimpen en duwt een lange bestandsnaam de
verwijderknop buiten het paneel. Precies wat er bij de contactenkaartjes misging. */
.journaal-bijlagen .bijlage-tekst { flex: 1 1 auto; min-width: 0; }
.journaal-bijlagen .bijlage-naam {
display: block; font-size: .875rem; text-decoration: none;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.journaal-bijlagen .bijlage-omschrijving,
.journaal-bijlagen .bijlage-meta { font-size: .75rem; color: var(--bs-secondary-color); }
/* ── Offerteregels ────────────────────────────────────────────────────────────────────────────────────
Een aannemersofferte is een document met blokken, geen lijst artikelen: koppen boven groepen werken,
witregels ertussen, en alternatieven die niet meetellen. Zonder dit verschil in beeld leest een offerte
van 40 regels als één ononderbroken muur. */
.offerte-regels .regel-titel td {
font-weight: 600; padding-top: .75rem;
border-bottom: 1px solid var(--bs-border-color);
}
.offerte-regels .regel-subtitel td { font-weight: 600; color: var(--bs-secondary-color); }
/* Een witregel is opmaak: geen randen, geen hoogte-sprong. */
.offerte-regels .regel-wit td { border: 0; height: .5rem; padding: 0; }
/* Een optie is een alternatief, geen extra post — gedempt zodat het oog het onderscheid meteen maakt. */
.offerte-regels .regel-optie td { color: var(--bs-secondary-color); font-style: italic; }
.offerte-regels .regel-memo {
font-size: .8125rem; color: var(--bs-secondary-color); white-space: pre-line; margin-top: .125rem;
}
/* Bewerkmodus van het offertedocument. De invoervelden zijn bewust gewone HTML en geen DevExpress-
componenten: bij 90 regels × 6 velden zou dat honderden componenten in het circuit zetten, en een
offerte van die lengte is bij Thomadak geen uitzondering. */
.offerte-regels .regel-grepen { white-space: nowrap; }
.offerte-regels .regel-grepen .btn { width: 1.5rem; line-height: 1; }
.offerte-regels .regel-memo-invoer { font-size: .8125rem; resize: vertical; }
/* Een titelregel blijft ook in bewerkmodus als kop leesbaar. */
.offerte-regels .regel-titel input { border-color: transparent; background: transparent; }
.offerte-regels .regel-titel input:focus { border-color: var(--bs-border-color); background: var(--bs-body-bg); }
/* Sectiekaarten in het offertedocument. Een blok is een geheel — eigen kop, eigen regels, eigen subtotaal —
en niet een vetgedrukte rij tussen de andere. */
.sectie-onder { margin-left: 1.5rem; }
.sectie-naam { border-color: transparent; background: transparent; }
.sectie-naam:hover { border-color: var(--bs-border-color); }
.sectie-naam:focus { border-color: var(--bs-primary); background: var(--bs-body-bg); }
/* ⚠️ 420 en niet 320, sinds 02/09/2026. Met de btw-voet per tarief staat er nu "Btw 6% (over
€ 22.970,95)" in plaats van enkel "Btw", en bij drie tarieven plus een wettelijke vermelding liep dat
over. Gezien door Dominique op een echte offerte in productie. */
.offerte-totalen { max-width: 420px; }
/* ⚠️ Een gat tussen label en bedrag. Zonder dit plakt het euroteken tegen de tekst zodra het label lang
is — "Opties (incl. btw, niet in het totaal)€ 65,13", gezien in productie. justify-content-between
duwt ze uit elkaar tot ze samen de breedte vullen, en dán raken ze elkaar. */
.offerte-totalen .d-flex > span:last-child,
.offerte-totalen .d-flex > span:first-child { min-width: 0; }
.offerte-totalen .d-flex { gap: 1.25rem; }
.offerte-totalen .d-flex > span:last-child { white-space: nowrap; }
/* ── De naam in de kop van een fiche ────────────────────────────────────────────────────────────────
Eén regel, en afkappen wat niet past. Zonder dit loopt een lange naam over twee regels en duwt hij de
tabbalk eronder weg — bij artikelen gebeurt dat snel: de langste naam bij Thomadak is 85 tekens
("1-laagse roofing Soprema Garden OPSTANDEN tot 1m — Leveren en plaatsen…").
⚠️ De volledige naam blijft bereikbaar via het title-attribuut. Afkappen zonder tooltip zou informatie
wegnemen; dit verbergt ze alleen tot je erover zweeft. */
.fiche-koptitel {
display: inline-block;
max-width: min(62ch, 100%);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
/* ── De stock-tab van het journaal ──────────────────────────────────────────────────────────────────
Dezelfde vorm als de contactkaartjes hierboven: regels met een rand, geen tabel. Een AdmGrid in een
paneel van 440px leest als een ander scherm — en dat was precies de klacht (26/08/2026). */
.journaal-stock { display: flex; flex-direction: column; gap: .5rem; }
.journaal-stock-stand {
font-size: .95rem; padding-bottom: .25rem;
border-bottom: 1px solid var(--bs-border-color);
}
.journaal-stock-stand strong { font-size: 1.15rem; margin-left: .35rem; }
.journaal-stock-boeken {
border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .7rem; margin-bottom: .25rem;
}
.journaal-stock-regel {
border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .5rem .7rem; font-size: .875rem;
}
.journaal-stock-kop { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.journaal-stock-soort { font-weight: 600; }
/* Het teken zegt de richting; de kleur herhaalt dat zodat je het ziet zonder te lezen. */
.journaal-stock-aantal { font-variant-numeric: tabular-nums; font-weight: 600; }
.journaal-stock-aantal.bij { color: var(--bs-success); }
.journaal-stock-aantal.af { color: var(--bs-danger); }
.journaal-stock-datum { color: var(--bs-secondary-color); font-size: .8rem; }
.journaal-stock-notitie { margin-top: .25rem; }
/* Notities-tab. Dezelfde kaartvorm als de stockregels hiernaast: in een paneel van 440px leest een tabel
met kolomkoppen als een ander scherm, en een notitie is vrije tekst — die hoort in een kaartje.
De inhoud mag regeleindes houden (pre-wrap): wie een lijstje typt, wil dat als lijstje terugzien. */
.journaal-notities { display: flex; flex-direction: column; gap: .5rem; }
.journaal-notitie {
border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .5rem .7rem; font-size: .875rem;
}
.journaal-notitie-kop { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.journaal-notitie-titel { font-weight: 600; }
.journaal-notitie-datum { color: var(--bs-secondary-color); font-size: .8rem; white-space: nowrap; }
.journaal-notitie-inhoud { margin-top: .25rem; white-space: pre-wrap; }
.journaal-notitie-door { color: var(--bs-secondary-color); font-size: .78rem; margin-top: .25rem; }
/* Bewerken/verwijderen onder een notitie. Bewust klein en rustig: ze staan onder élke notitie, en bij een
record met twintig notities trekken twee blauwe links per kaartje meer aandacht dan de tekst zelf. */
.journaal-notitie-acties { display: flex; gap: .75rem; margin-top: .35rem; font-size: .8rem; }
/* Het "+ toelichting"-knopje onder een offerteregel. Bewust onopvallend: het staat onder élke regel, en een
blauwe link elf keer herhaald trekt meer aandacht dan de offerte zelf. Bootstrap's .btn-link wint van
.text-muted, vandaar een eigen klasse in plaats van hulpklassen stapelen. */
.regel-memo-knop {
background: none; border: 0; padding: 0; margin-top: .15rem;
font-size: .75rem; color: var(--bs-secondary-color); opacity: .7;
}
.regel-memo-knop:hover { opacity: 1; text-decoration: underline; }
/* Een afgesloten offerte: readonly-velden zien er standaard uit als gewone velden, en dan lijkt het alsof je
kan typen tot je het probeert. De melding bovenaan zegt waarom; deze demping zegt wélke velden het betreft. */
.offerte-afgesloten input[readonly],
.offerte-afgesloten textarea[readonly] {
background-color: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
border-color: transparent;
}
/* Het offertetotaal in de kop van de fiche.
⚠️ Mét kader en achtergrond, niet als losse tekst. De rechterrand viel al samen met die van de blokken
eronder (gemeten 1296 = 1296), maar in de grijze kopzone leest kale tekst als iets dat er per ongeluk
staat: "buiten het blok, de alignering is niet correct" (26/08/2026). Een omkaderd blokje hoort ergens
bij; zwevende tekst niet. */
.offerte-kop-totaal {
margin-left: auto;
display: inline-flex;
align-items: baseline;
gap: .5rem;
padding: .3rem .7rem;
border: 1px solid var(--bs-border-color);
border-radius: .5rem;
background: var(--bs-body-bg);
}
.offerte-kop-totaal strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
/* De resultatenlijst van de artikelzoeker. Elke treffer is één blok met code + prijs op één regel, de
omschrijving eronder en familie/eenheid als voetregel — zo zie je in één oogopslag wélk artikel je kiest.
Dat was het hele punt: op de naam alleen zijn 39 artikelen bij Thomadak niet uit elkaar te houden. */
.artikelzoeker-lijst { max-height: 420px; overflow-y: auto; }
.artikelzoeker-rij { padding: .5rem .75rem; }
.artikelzoeker-kop { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; }
.artikelzoeker-code { font-weight: 600; font-size: .8125rem; color: var(--bs-secondary-color); }
.artikelzoeker-prijs { font-variant-numeric: tabular-nums; font-weight: 600; flex-shrink: 0; }
.artikelzoeker-naam { margin-top: .1rem; }
.artikelzoeker-meta { font-size: .75rem; color: var(--bs-secondary-color); display: flex; gap: .35rem; }
/* De regeltabel draait sinds 26/08/2026 op DevExpress-editors in plaats van kale inputs. Deze regels zetten
ze compact genoeg voor een tabel met honderd regels: DevExpress rekent standaard op formulieren met lucht
eromheen, een offerteregel niet. */
.offerte-regels .dxbl-edit { margin: 0; }
.offerte-regels td { padding: .25rem .3rem; }
.regel-getal input { text-align: right; }
/* ⚠️ .regel-optie-VAK en niet .regel-optie — die naam droeg TWEE dingen (gemeten 02/09/2026):
de
van een optieregel (regel ~431, gedempt en cursief) én dit vinkje-vakje in een cel.
Deze regel raakte dus ook de RIJ, en een
met display:inline-flex is geen tabelrij meer:
de cellen schuiven in elkaar, de kolommen verdwijnen en de prijzen komen verticaal te staan.
Gezien door Dominique op een echte offerte in productie — een blok met drie optieregels was
onleesbaar. Nagemeten door een
in de DOM te zetten en zijn computed
display te lezen: inline-flex, uit precies deze regel. */
.regel-optie-vak { display: inline-flex; align-items: center; }
.regel-optie-vink { font-size: .8125rem; color: var(--bs-secondary-color); }
.sectie-naam-veld input { font-weight: 600; }
/* ── Grenzen aan de breedte van een offerteregel ────────────────────────────────────────────────────────
De fiche gebruikt sinds 26/08/2026 de volle breedte (AdmFichePagina Breed). Dat was nodig: het
omschrijvingsveld hield maar 382 px over en 4.450 van de 8.520 Thomadak-regels zijn langer dan dat.
Maar zonder grens slaat het door de andere kant uit. Op 2560 px werd datzelfde veld 1622 px, terwijl de
langste omschrijving 148 tekens telt (~1000 px) en de gemiddelde 50. Dan staat er een half scherm leegte
tussen de omschrijving en het aantal, en moet je oog die afstand elke regel overbruggen.
1000 px vangt de langste omschrijving; wat overblijft gaat naar de marge, niet naar het veld.
⚠️ De grens hoort op het VELD, niet op de
. In een tabel met table-layout:auto bepaalt de inhoud de
celbreedte en wordt max-width op een cel genegeerd — gemeten: de cel bleef 1622 px op een 2560-scherm. */
.offerte-regels td .dxbl-text-edit { max-width: 1000px; }
/* De bloknaam idem: hij mag meegroeien tot de langste naam past (121 tekens bij Thomadak), niet verder. */
.sectie-naam { max-width: 900px; }
/* Een verlopen geldigheidsdatum in de lijst.
⚠️ nowrap, want een kolombreedte is GEEN garantie. DxGridDataColumn Width is voor DevExpress een wens: is
er minder ruimte, dan krimpt de kolom en breekt "16/08/2026 10 dagen" tussen het getal en het woord — die
ene rij wordt dan hoger dan de rest. Ik mat dat eerst op 1600 px, zag één regel, en concludeerde te vroeg
dat het opgelost was; op een smaller venster brak het nog steeds (26/08/2026). Een breedte raden werkt
niet, niet-breken wel. */
.offerte-verlopen { color: var(--bs-danger); white-space: nowrap; }
/* ⚠️ Met een spatie ervóór en niet enkel een marge. De datum en de duur staan in twee 's die Razor
zonder witruimte achter elkaar zet; in de gerenderde tekst werd dat "21/08/20265 dagen" — een datum met
een cijfer eraan geplakt. De marge duwt ze wel uit elkaar op het scherm, maar wie de lijst kopieert of
exporteert, krijgt de plakversie (gemeten 26/08/2026). */
.offerte-verlopen-sinds { margin-left: .4rem; font-size: .75rem; opacity: .8; }
.offerte-verlopen-sinds::before { content: " "; }
/* ⚠️ Vaste breedte voor de laatste kolom (het ✕ van een regel).
Zonder dit stonden de kruisjes 5 px uit elkaar: een witregel voegt zes cellen samen met colspan, en die
samenvoeging slokt de tussenliggende celranden op — de laatste cel begint dan net iets verder. Vijf pixels
valt niet op als je ernaar zoekt, wél als je een lijst van dertig regels overloopt (gemeld 26/08/2026). */
.offerte-regels td:last-child,
.offerte-regels th:last-child { width: 34px; padding-left: 0; padding-right: .3rem; }
/* Idem voor het offertenummer: OFF-2026-0005-B mag niet tussen de streepjes breken. */
.dxbl-grid-table td:first-child { white-space: nowrap; }
/* ⚠️ Ondergrens voor de offertelijst. DevExpress zet de tabelbreedte gelijk aan de container en verdeelt
de rest over de kolom zonder Width (Klant). Bij een smal venster is die rest nul: op een viewport van
1000 px werd Klant tot breedte 0 geknepen en brak elke rij over drie regels. MinWidth op de kolom helpt
daar niet — de tabel groeit niet mee. Een min-width op de tabel wél: de scroll-viewer van DevExpress
staat al op overflow-x:auto en toont dan zelf een horizontale schuifbalk.
Afgebakend op de pijplijn-schakelaar, want alleen de offertelijst draagt die in haar werkbalk. */
.adm-grid:has(.pijplijn-schakelaar) .dxbl-grid-table { min-width: 910px; }
/* ── De AdmFormulier-schil mag de hoogteketen niet breken ──────────────────────────────────────────────
AdmFormulier (AppKit 0.302.0) rendert een gewone
om zijn inhoud. Zet je die
schil om een AdmFichePagina — en dat is precies wat je doet zodra een fiche moet melden wat er ontbreekt —
dan zit er een block-element tussen .content-inner en .adm-fiche.
.adm-fiche is `display:flex; flex:1; min-height:0`, en dat werkt alleen als de OUDER een flex-container met
hoogte is. Een block ertussen breekt dat: gemeten op 31/08/2026 vulde de relatiefiche nog 539px van een
venster van 800px — 67%, met wit eronder. FicheHoogteTests ving het; zonder die test was het "de fiche ziet
er wat kort uit" geweest.
⚠️ Dit is eigenlijk een funderingskwestie: élke app die AdmFormulier om een fiche zet, krijgt hetzelfde.
Gemeld aan Dominique voor de AppKit; deze regel houdt het hier ondertussen recht. Verdwijnt hij daar
opgelost, dan mag dit blok weg — de test hierboven merkt het meteen als dat te vroeg gebeurt. */
.adm-formulier:has(> .adm-fiche) {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
/* Kleine icoonknop in tabellen/lijsten (de afvinkknop op het takenoverzicht).
⚠️ Niet .icon-btn — dat is de AppKit-topbar.
Stond in de razor zonder dat deze regels bestonden: de browser viel dan terug op zijn eigen
knop-opmaak (border: 2px outset, grijze vulling) en het vinkje leek een invoervakje. Overgenomen
uit adm-creditsoft/src/Host/CreditSoft.Host.Web/wwwroot/app.css, waar dezelfde klasse al leeft. */
.row-icon-btn {
display: inline-flex; align-items: center; justify-content: center; padding: 2px;
border: 0; background: transparent; color: var(--bs-secondary-color); cursor: pointer; border-radius: 4px;
}
.row-icon-btn:hover { color: var(--bs-body-color); background: var(--bs-secondary-bg); }
/* Toetsenbordfocus op een icoonknop in een rij. ⚠️ Zonder deze regel tekent de BROWSER zijn eigen kader —
een dikke zwarte doos die niets met de app te maken heeft. Gemeld door Dominique op 09/09/2026, met een
foto van het kruisje op de werkbon.
Géén `outline: none` zonder vervanging: dan is er helemaal geen focus meer te zien en weet wie met het
toetsenbord werkt niet waar hij staat. Dat is erger dan lelijk.
De vorm is overgenomen van de schil zelf (`adm-shell.css`, .avatar-btn:focus-visible) zodat dit geen
eigen variant wordt: 2px in de primaire kleur, met wat lucht ertussen. */
.row-icon-btn:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
/* De PDF-viewer in het afdrukvenster. ⚠️ De hoogte MOET via een CssClass — DxPdfViewer heeft geen
style-parameter, en zonder hoogte rendert hij als een streepje. Zelfde oplossing als in CreditSoft. */
.afdruk-pdf-viewer { width: 100%; height: 70vh; }
/* Een invoerveld dat iets ongeldigs bevat. ⚠️ Het VELD kleurt, niet alleen de melding bovenaan: op een
fiche die langer is dan het scherm stuurt "zie het blok Bedrijven" je naar iets wat je niet ziet.
Gemeten op 02/09/2026 — een contactpersoon met "info" als e-mailadres bij zijn bedrijf.
⚠️ De regel moet de IN de DevExpress-wrapper raken: CssClass landt op de buitenste div, en de
rand die je ziet is die van het invoerveld eronder. Een border op de wrapper alleen is onzichtbaar.
De AppKit heeft hier (nog) niets voor — enkel .adm-badge-fout voor badges en .adm-req voor het sterretje. */
/* ⚠️ De klasse landt op , NIET op de — gemeten in de DOM, niet aangenomen:
input.dxbl-text-edit-input < dxbl-input-editor.adm-veld-fout.dxbl-text-edit < div.veld
Vandaar de afstammelingsselector. En `!important` op BEIDE eigenschappen: zonder dat op de achtergrond
won een DevExpress-regel en bleef het veld doorzichtig — enkel de rand kleurde, en dat viel niet op. */
.adm-veld-fout,
.adm-veld-fout input {
border-color: var(--bs-danger, #dc3545) !important;
background-color: var(--bs-danger-bg-subtle, #f8d7da) !important;
}
/* Een openstaande taak waarvan de vervaldag voorbij is. Zelfde toon als .offerte-verlopen hierboven:
twee lijsten die hetzelfde bedoelen, horen er hetzelfde uit te zien. */
.taak-verlopen { color: var(--bs-danger); font-weight: 500; white-space: nowrap; }
/* ── Een memo dat de kolom VULT ─────────────────────────────────────────────────────────────────────
Op een fiche met twee kolommen eindigt de korte kolom hoger dan de lange, en dan staat er een gat.
Gemeld door Dominique op 03/09/2026 op de projectfiche: de omschrijving stopte 136 px boven het einde
van het werfadres ernaast.
⚠️ EEN VAST AANTAL REGELS LOST DIT NIET OP. Rows="9" klopt vandaag en morgen niet meer, want de andere
kolom groeit mee met wat erin staat — het werfadres kreeg er vandaag nog twee velden bij. Daarom vult
het memo de RESTHOOGTE, wat er ook naast staat.
⚠️ De keten is zes lagen diep en elke laag moet meedoen; dat is geen overdaad maar gemeten in de DOM.
De DevExpress-schil (dxbl-fl-ctrl) staat op display:block en geeft de hoogte anders niet door: het item
groeide wél mee (95 → 230 px) terwijl het tekstvak op 70 bleef staan. */
.adm-kolom-vullend { display: flex; }
.adm-kolom-vullend > .dxbl-fl { flex: 1; display: flex; flex-direction: column; }
/* ⚠️ Van RIJ naar KOLOM, en dat is de kern. De rij van DevExpress wikkelt HORIZONTAAL; `flex: 1` op een
kind groeit daar in de BREEDTE en niet in de hoogte. Gemeten: met de rij als rij bleef het memo op 71 px
staan terwijl er 223 px onder vrij was. Als kolom stapelen de items verticaal en groeit het memo wél.
⚠️ Daardoor werkt deze schil alleen voor een kolom waarvan élk item ColSpanMd="12" draagt — items die
naast elkaar horen te staan, komen hier onder elkaar. Dat is precies de afspraak van Kolommen2. */
.adm-kolom-vullend > .dxbl-fl > .dxbl-row { flex: 1; display: flex; flex-direction: column; }
/* ⚠️ ALLEEN het memo groeit. Zonder deze regel staat élk item op flex:1 1 0% — dat is de standaard van
DevExpress — en dan verdelen ze de resthoogte GELIJK: gemeten op 03/09/2026 stonden Nummer, Naam en
Klant plots 120 px uit elkaar. Het gat verhuisde van onderaan naar tussen de velden, wat erger is. */
.adm-kolom-vullend > .dxbl-fl > .dxbl-row > .dxbl-fl-item { flex: 0 0 auto; }
/* ⚠️ De volledige keten in de selector, en dat is nodig: de regel hierboven telt vier klassen en zou
`.adm-kolom-vullend .adm-memo-vullend` (twee) overschrijven. Gemeten met de BEREKENDE stijl — op het
beeld zag je alleen dat er niets veranderde, niet waarom. */
.adm-kolom-vullend > .dxbl-fl > .dxbl-row > .dxbl-fl-item.adm-memo-vullend { flex: 1 1 auto; }
.adm-kolom-vullend .adm-memo-vullend > .dxbl-fl-ctrl { display: flex; height: 100%; }
.adm-kolom-vullend .adm-memo-vullend > .dxbl-fl-ctrl > dxbl-memo-editor { flex: 1; }
.adm-kolom-vullend .adm-memo-vullend textarea { height: 100%; }
/* ── De kleur van een tenant-lijstwaarde ────────────────────────────────────────────────────────
Een klein gekleurd staaltje NAAST de tekst, nooit eronder. De kleur komt van de klant en kan dus
alles zijn; tekst óp die kleur zetten maakt de leesbaarheid afhankelijk van een keuze die wij niet
beheren. Een staaltje ernaast leest in licht én donker even goed.
⚠️ Dit is bewust GEEN badge. AdmBadge draagt de vaste tonen (info/succes/fout) en BadgeEenVormTests
bewaakt dat een badge overal dezelfde soort ding is. Een tenant-kleur is iets anders: geen status-
oordeel maar een herkenningsmerk. Zie docs/projectfiche-herziening.md (11/09/2026). */
.adm-kleurstaal {
display: inline-block;
width: .75rem;
height: .75rem;
border-radius: 3px;
vertical-align: -1px;
margin-right: .4rem;
/* Een randje, anders verdwijnt wit op wit en zwart op donker. */
box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .45);
flex: none;
}
.adm-kleurstaal-tekst { font-variant-numeric: tabular-nums; }
.adm-kleurkiezer { display: flex; flex-direction: column; gap: .5rem; }
.adm-kleurkiezer-gekozen { display: flex; align-items: center; min-height: 1.25rem; }