html, body { height: 100%; margin: 0; }
.shell { display: flex; flex-direction: column; height: 100vh; }
.topbar {
display: flex; align-items: center; gap: 12px;
height: 52px; padding: 0 16px; flex: 0 0 auto;
border-bottom: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--bs-body-color); }
.shell-body { display: flex; flex: 1; min-height: 0; }
.sidebar {
flex: 0 0 220px; overflow-y: auto; padding: 12px 8px;
border-right: 1px solid var(--bs-border-color);
background: var(--bs-tertiary-bg);
}
.nav-menu { display: flex; flex-direction: column; gap: 2px; }
.nav-menu .nav-link {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; border-radius: 8px;
color: var(--bs-body-color); text-decoration: none; font-size: .92rem;
}
.nav-menu .nav-link:hover { background: var(--bs-secondary-bg); }
.nav-menu .nav-link.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); font-weight: 600; }
/* ⚠️ min-height: 0 is niet optioneel. Zonder die regel krimpt dit flex-item niet onder zijn inhoudshoogte:
het contentgebied groeit voorbij de viewport en de HELE pagina scrollt in plaats van enkel dit vak.
Zet ze op .content ZELF — enkel op .content-inner (zoals de :has-regels verderop) repareert de binnenkant
en laat de buitenkant stuk. */
.content { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; }
/* De max-width is een bewuste LEESCAP voor formulieren en tekstpagina's: regels van 2000px lezen niet.
Pagina's die de ruimte moeten vullen (grid, tweekoloms-werkscherm) ontsnappen eraan via de
:has(.adm-grid-fill)- en :has(.adm-page-fill)-regels verderop. Schrap deze cap dus niet — voeg een
uitzondering toe als je een nieuw vol-formaat patroon bouwt. */
.content-inner { padding: 20px 24px; max-width: 1100px; }
#blazor-error-ui {
display: none; position: fixed; bottom: 0; left: 0; right: 0;
padding: 10px 16px; background: #fee; border-top: 1px solid #f5c2c7; z-index: 1100;
}
#blazor-error-ui .reload, #blazor-error-ui .dismiss { margin-left: 12px; cursor: pointer; }
/* === AdmGrid (overgezet uit ADM One — playbook §6) ============================================ */
/* Accentkleur voor o.a. de selectie-balk; overschrijfbaar per thema/tenant. */
:root { --adm-accent: #2563eb; }
/* AdmGrid: uniforme toolbar (zoek + kolomselector + export) boven elke grid. */
.adm-grid-bar {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.adm-grid-bar-spacer {
flex: 1 1 auto;
}
.adm-grid-search {
width: 300px;
max-width: 100%;
}
.adm-grid-empty {
padding: 18px;
color: var(--bs-secondary-color);
font-style: italic;
}
/* Laadfase: grid verbergen (layout wordt nog toegepast) en een spinner tonen, zodat de gebruiker
geen herformattering ("flikker") ziet. */
.adm-grid-body { position: relative; }
.adm-grid-veil { visibility: hidden; }
.adm-grid-fill .adm-grid-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.adm-grid-loading {
position: absolute;
inset: 0;
min-height: 180px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.adm-spinner {
width: 34px;
height: 34px;
border: 3px solid var(--dx-color-border, #e0e0e0);
border-top-color: var(--dx-color-primary, #2563eb);
border-radius: 50%;
animation: adm-spin .7s linear infinite;
}
@keyframes adm-spin { to { transform: rotate(360deg); } }
/* FullHeight: de grid vult de beschikbare hoogte (toolbar vast, grid scrollt intern). De :has-regels
koppelen aan de layout-wrapper (.content/.content-inner — aanwezig in deze app). */
.content:has(.adm-grid-fill) {
display: flex;
flex-direction: column;
}
.content:has(.adm-grid-fill) > .content-inner {
flex: 1;
min-height: 0;
max-width: none; /* grid-pagina's vullen de volle breedte, niet de 1100px-leescap */
display: flex;
flex-direction: column;
}
.content:has(.adm-grid-fill) > .dxbl-btn {
align-self: flex-start;
}
.adm-grid-fill {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.adm-grid-fill .adm-grid-bar { flex: 0 0 auto; }
/* Vol-hoogte WERKSCHERM (bv. boom links + grid rechts). `.adm-grid-fill` regelt enkel de grid zelf; dit
regelt de pagina eromheen, zodat de rij op de VIEWPORT eindigt in plaats van op zijn inhoud.
Gebruik: `adm-page-fill` op de buitenste div, `adm-fill-row` op de rij, `adm-fill-panel` op een paneel
dat zijn kolom moet vullen. Ontsnapt automatisch aan de 1100px-leescap.
(Vorm overgenomen uit de Damc-sessie, 21/07 — zie de opmerkingen hieronder voor de valkuilen.) */
.content:has(.adm-page-fill) { display: flex; flex-direction: column; overflow: hidden; }
.content:has(.adm-page-fill) > .content-inner {
flex: 1; min-height: 0; max-width: none;
display: flex; flex-direction: column; overflow: hidden;
}
/* Enkel vanaf lg. Daaronder stapelen de kolommen en hoort de pagina gewoon te scrollen: twee panelen van
elk een halve schermhoogte is op een telefoon onbruikbaar. */
@media (min-width: 992px) {
.adm-page-fill { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Zet `adm-fill-row` op de rij die moet meerekken — bewust een eigen klasse en niet elke `.row`,
zodat een gewone rij ergens op de pagina niet ongewild flex wordt.
`nowrap` in plaats van een hoogte op de kolommen: met wrap rekken die op tot hun INHOUD (een grid
van 296 rijen wordt dan 1345px hoog in een vak van 669px), en een expliciete hoogte zet de
verticale gutter er 16px naast. */
.adm-page-fill .adm-fill-row { flex: 1; min-height: 0; flex-wrap: nowrap; }
.adm-page-fill .adm-fill-row > [class*="col-"] { display: flex; flex-direction: column; min-height: 0; }
/* Paneel dat zijn kolom vult; de inhoud scrollt intern. */
.adm-page-fill .adm-fill-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.adm-page-fill .adm-fill-panel > .card-body { flex: 1; min-height: 0; overflow: auto; }
}
/* Onder lg grijpt `adm-page-fill` niet: de kolommen stapelen en de pagina scrollt, en dat hoort zo.
Maar een lang EERSTE paneel eet dan het halve scherm op vóór je het tweede ziet — een categorieboom met
honderd takken duwt de lijst volledig onder de vouw. Vandaar een cap: het paneel scrollt intern, de
pagina blijft bruikbaar. Is het paneel kort, dan doet deze regel niets (het is een maximum, geen hoogte).
(Gemeten door de Damc-sessie op een boom met 117 takken.) */
@media (max-width: 991.98px) {
.adm-page-fill .adm-fill-panel > .card-body { max-height: 40vh; overflow: auto; }
}
.adm-grid-fill .dxbl-grid { flex: 1; min-height: 0; }
/* Rijmarkering (selectie + focus) staat sinds AppKit 0.19.0 in adm-shell.css — AdmGrid komt uit het
pakket, dus hoort zijn stijl daar ook. Zet ze hier NIET opnieuw: een app-regel wint van de fundering
en je krijgt stil afwijkend gedrag per app. */
/* Login-scherm: de stijl komt uit de FUNDERING (.login-page/.login-card in adm-shell.css van
Adm.AppKit.Web), niet uit dit bestand. Nagemeten 02/09/2026.
Hier stond tot dan "de scoped LoginPanel.razor.css in Huisjacobs.AppKit.Web". Dat klopte twee keer niet:
het pakket heet Adm.AppKit.Web (een te brede scaffold-hernoeming CreditSoft -> Huisjacobs), en die scoped
CSS bestaat niet — LoginPanel.razor heeft er geen. De scaffold-template draagt dezelfde fout. */
/* Nav: gebruiker + afmelden onderaan. */
.nav-spacer { flex: 1 1 auto; min-height: 12px; }
.nav-user { padding: 8px 12px; font-size: .82rem; color: var(--bs-secondary-color); font-weight: 600; }
.nav-section { padding: 12px 12px 4px; font-size: .72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--bs-secondary-color); }
/* === Release notes ("Wat is nieuw") ============================================================ */
.release-notes { max-width: 760px; }
.rn-item { padding: 16px 0; border-bottom: 1px solid var(--bs-border-color); }
.rn-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.rn-version { font-weight: 700; }
.rn-date { color: var(--bs-secondary-color); font-size: .85rem; }
.rn-cat { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
padding: 2px 8px; border-radius: 10px; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.rn-title { font-size: 1.05rem; margin: 2px 0 6px; }
.rn-body { color: var(--bs-body-color); }
.rn-body :last-child { margin-bottom: 0; }
.rn-body img { max-width: 100%; height: auto; border-radius: 6px; }
/* === Referentiegegevens ======================================================================== */
/* Kleurstip bij een werkbonstatus. De rand houdt een lichte kleur zichtbaar op een witte
achtergrond — zonder rand verdwijnt bijvoorbeeld #ffffff volledig.
⚠️ De rand STOND er al met var(--bs-border-color), en die is #dee2e6: contrast 1,30:1 tegen wit.
Dat is de rand zien met je ogen dicht. Gemeten op 08/09/2026 met Dominique erbij, op de statussen
"Afgewerkt", "Afspraak bevestigd" en "Ingepland" — die dragen alle drie #FFFFFF uit de legacy, en de
stip was in de praktijk onzichtbaar. Een nota die zegt dat iets opgelost is, is geen meting.
--bs-secondary-color (#6c757d) geeft 4,69:1, ruim boven de 3:1 die WCAG 1.4.11 vraagt voor
niet-tekstuele onderdelen. Bij een donkere vulling verdwijnt de rand in de kleur zelf, en dan is er
ook niets te onderscheiden. */
.adm-kleurstip {
display: inline-block; width: 14px; height: 14px; border-radius: 50%;
border: 1px solid var(--bs-secondary-color); flex: 0 0 auto;
}
/* === Klantfiche =============================================================================== */
/* Een veld met gegevens uit de oude toepassing: leesbaar, maar zichtbaar anders dan een veld waar
je in werkt. Zonder dit verschil lijkt het een gewoon invulveld dat toevallig niet meewerkt. */
.adm-legacy-veld textarea {
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
font-size: .9rem;
}
/* === Planning ================================================================================== */
/* Kaartjes per dagdeel. Geen tijdraster: de legacy plant op dagdeel en niet op uur, en een raster met
uren zou een precisie suggereren die er niet is. */
/* ⚠️ min(320px, 100%) en niet 320px. Een `minmax(320px, 1fr)` heeft een HARDE ondergrens: past er in de
container geen kolom van 320px, dan maakt auto-fill er tóch één van 320px en die loopt eruit. Gemeten op
08/09/2026 met Dominique erbij, in weekweergave: kolom 190px breed, kaart 320px, dus 142px over de
buurkolom heen. Zijn woorden: "de blokjes zitten niet echt in de kolom, ze overlappen de andere kolommen."
Met min(320px, 100%) zakt de ondergrens mee met de container. In dagweergave verandert er niets — daar is
de container ruim boven 320px. */
.adm-planning-groep {
display: grid; gap: 8px;
grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}
/* Eén kaart per rij op het PLANBORD, want daar staat een route en die lees je van boven naar onder.
Het dashboard houdt het raster hierboven: daar staat een greep uit de dag en geen volgorde.
⚠️ Dit raakt ook de weekweergave, en dat is geen bijwerking maar de bedoeling: daar was het al één
kolom omdat een dagkolom smaller is dan 320px. De regel maakt dat expliciet in plaats van het aan de
breedte over te laten. */
.adm-planning-groep.hj-planlijst { grid-template-columns: 1fr; }
.adm-planning-kaart {
display: flex; overflow: hidden; cursor: pointer;
border: 1px solid var(--bs-border-color); border-radius: 8px;
background: var(--bs-body-bg); transition: box-shadow .12s ease, border-color .12s ease;
}
.adm-planning-kaart:hover,
.adm-planning-kaart:focus-visible { border-color: var(--bs-primary); box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.adm-planning-kaart.is-uitgevoerd { opacity: .62; }
/* ⚠️ Dezelfde val als bij .adm-kleurstip, en hier stond zelfs GEEN rand: een kaart met een witte
statuskleur toonde een balkje dat niet van de kaart te onderscheiden was. Een rand rondom zou 2 van
de 6 pixels opeten, dus enkel rechts — dat scheidt de kleur van de inhoud, wat het balkje moet doen. */
.adm-planning-kleur { flex: 0 0 6px; box-shadow: inset -1px 0 var(--bs-secondary-color); }
.adm-planning-inhoud { padding: 10px 12px; min-width: 0; }
.adm-planning-inhoud .text-truncate { max-width: 100%; }
/* === Huisstijl ================================================================================= */
/* Drie plekken mogen het klantmerk dragen, en niet meer: het logo linksboven, het aanmeldvenster en de
favicon. Zo is het vloot-breed afgesproken (i.o.m. ADM One, terug te vinden in DAMC's app.css). De
avatar, de accentkleur en de rest van de schil blijven fundering — een app die overal zijn eigen kleur
zet, wijkt bij elke AppKit-versie verder af zonder dat iemand het beslist. */
/* ── Logo linksboven ── */
/* Het fundering-icoon (een generiek raster van puntjes) verbergen en vervangen door het merk-icoon.
Het VOLLEDIGE icoon — met verloop en kader — en niet enkel de H-vorm als masker.
Dat was eerst wel zo, en het zag er niet uit: een kale letter H pal naast de tekst "Huis Jacobs" leest
niet als een logo maar als een losse letter, en hij staat er dubbelop. Met kader en kleur wordt het een
herkenbaar merkje, zoals de favicon in een browsertab. CreditSoft doet het net zo.
Prijs van die keuze: dit kleurt NIET mee met het donkere thema. Dat is aanvaard — het icoon draagt zijn
eigen kleuren, precies zoals op de telefoon van de monteur. De masker-variant (img/huisjacobs-logo.svg)
blijft in gebruik op het aanmeldvenster, waar hij wit op het verloop moet staan. */
.topbar .brand > svg.adm-icon { display: none; }
.topbar .brand::before {
content: "";
width: 26px; height: 26px; flex: 0 0 auto;
background: url("/brand/favicon.svg") center / contain no-repeat;
border-radius: 6px;
}
/* ── Aanmeldvenster: merkpaneel links, het fundering-LoginPanel rechts ── */
/* Bewust ENKEL layout. De aanmelding zelf, inclusief tweestapsverificatie, blijft volledig in de fundering
(LoginPanel rendert .login-page). Hier staat geen wachtwoordlogica. */
.hj-login { display: flex; min-height: 100vh; }
.hj-login-merk {
flex: 1 1 46%;
/* Hetzelfde verloop als het app-icoon, in dezelfde richting: linksonder licht, rechtsboven donker.
Vaste kleuren en geen tokens — dit paneel hoort er in licht én donker thema gelijk uit te zien,
net als het icoon op de telefoon van de monteur. */
background: linear-gradient(to top right, #4D6CD2 0%, #374D9A 100%);
color: #fff;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 1.5rem; padding: 2rem; text-align: center;
}
/* De H, wit, uitvergroot. Zelfde masker-truc als in de topbar. */
.hj-login-logo {
width: 104px; height: 120px;
background-color: #fff;
-webkit-mask: url("/img/huisjacobs-logo.svg") center / contain no-repeat;
mask: url("/img/huisjacobs-logo.svg") center / contain no-repeat;
}
.hj-login-titel {
font-size: 2.2rem; font-weight: 300; letter-spacing: .16em; text-transform: uppercase; margin: 0;
}
.hj-login-tagline {
font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
color: rgba(255, 255, 255, .72); margin: 0; max-width: 22rem; line-height: 1.8;
}
.hj-login .login-page { flex: 1 1 54%; background: var(--bs-body-bg); }
/* Op een telefoon naast elkaar zetten laat voor geen van beide helften ruimte over: het merkpaneel gaat
dan boven het aanmeldvenster staan, laag genoeg om de invoervelden zichtbaar te houden. */
@media (max-width: 767.98px) {
.hj-login { flex-direction: column; }
.hj-login-merk { flex: 0 0 30vh; gap: .9rem; padding: 1.25rem; }
.hj-login-logo { width: 52px; height: 60px; }
.hj-login-titel { font-size: 1.4rem; }
.hj-login-tagline { display: none; } /* op 30vh is er geen plaats voor drie regels tekst */
.hj-login .login-page { min-height: auto; }
}
/* ── Planbord: werkvoorraad naast de dagplanning (06/09/2026) ──────────────────────────────────────────
Patroon overgenomen van DAMC (Planbord.razor + .pb-*): een backlog links, de planning rechts, en werk
dat je van links naar rechts verplaatst. ⚠️ Bij DAMC gaat dat naar een DxScheduler op TIJDSTIP; hier
naar een DAGDEEL, want zo plant deze zaak — en zo plande de legacy. Vandaar drop-zones per dagdeel in
plaats van een agenda-raster.
⚠️ Slepen is NIET de enige weg. Een kaart aanklikken selecteert hem, en dan plaats je hem met een klik
op een dagdeel. Dat werkt op een tablet, met een toetsenbord, en wanneer slepen mislukt — DAMC doet het
net zo, en dat is geen franje: een planbord waar je moet kunnen slepen om te werken, sluit mensen uit. */
.hj-planbord { display: flex; gap: 14px; align-items: flex-start; }
/* In weekweergave zit het planbord in een .adm-page-fill-wikkel: dan rekt het mee met de viewport in
plaats van met zijn inhoud, en moeten de kolommen zich strekken in plaats van bovenaan te hangen. */
.adm-page-fill > .hj-planbord { flex: 1; min-height: 0; align-items: stretch; }
/* ⚠️ De voorraad is ook een DROPZONE: een kaart hierheen slepen haalt haar van de kalender. De rand
verschijnt pas tijdens het slepen — een vak dat er altijd uitziet als een doel, nodigt uit tot klikken
waar niets gebeurt. */
.hj-voorraad-doel { border-color: var(--bs-primary) !important; box-shadow: inset 0 0 0 1px var(--bs-primary); }
.hj-voorraad {
flex: 0 0 270px;
background: var(--bs-tertiary-bg, #f1f3f6);
border: 1px solid var(--bs-border-color, #e5e8ef);
border-radius: 12px;
padding: 12px;
display: flex; flex-direction: column; gap: 8px;
max-height: calc(100vh - 230px);
overflow-y: auto;
}
.hj-voorraad-kop { font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.hj-voorraad-telling {
font-size: 11px; font-weight: 700;
background: var(--bs-secondary-bg, #e5e8ef); color: var(--bs-body-color, #212529);
border-radius: 9px; padding: 1px 8px;
}
.hj-vkaart {
background: var(--bs-body-bg, #fff);
border: 1px solid var(--bs-border-color, #e5e8ef);
border-left: 3px solid var(--soort, #0e7490);
border-radius: 10px; padding: 8px 10px;
cursor: grab; box-shadow: 0 1px 2px rgba(20, 22, 28, .05);
}
.hj-vkaart:active { cursor: grabbing; }
.hj-vkaart-gekozen { border-color: #185fa5; box-shadow: 0 0 0 2px rgba(24, 95, 165, .35); }
.hj-vkaart-titel { font-size: 13px; font-weight: 600; }
.hj-vkaart-sub { font-size: 11.5px; color: var(--bs-secondary-color, #8a909d); }
/* ⚠️⚠️ DRIE RIJEN DIE MEEGROEIEN — en dit is de OMKERING van wat hier tot 11/09/2026 stond.
Geen dagkop-rij hier; die staat al in de datumkiezer bovenaan.
Hier stond `repeat(3, 1fr)`: drie dagdelen die de hoogte gelijk verdelen, elk met een eigen schuifbalk.
Dat kwam er op 08/09/2026 op vraag van Dominique — "ik zou graag hebben dat de 3 tijdsdelen de volledige
hoogte innemen" — en het loste toen een echt probleem op: een leeg dagdeel was een streepje van 54px
waar je niets naartoe kon slepen.
⚠️ MAAR OP EEN KLEINER SCHERM BEET DIE VORM TERUG. Drie vakken van elk een derde van de hoogte tonen
samen maar een handvol kaarten, en de rest zit achter drie aparte schuifbalken. Wie de VOLGORDE moet
aanpassen — kaarten verslepen binnen een dagdeel — sleept dan tegen een schuifbalk in. Gemeld door de
klant via Dominique op 11/09/2026.
Nu: elk dagdeel neemt de hoogte die zijn inhoud vraagt, en er is ÉÉN schuifbalk voor het geheel (op
.hj-plankalender). Je ziet dus altijd alle kaarten van een dagdeel zonder erin te scrollen.
⚠️ DE PRIJS IS BESPROKEN EN AANVAARD: bij een volle voormiddag staat de namiddag onder de vouw. De klant
heeft dat expliciet verkozen boven scrollen binnen een dagdeel. Draai dit niet terug zonder haar te
vragen — het is geen vergetelheid maar een afweging.
⚠️ `minmax(54px, auto)` en niet kaal `auto`: een LEEG dagdeel moet een sleepdoel blijven. Dat was de hele
reden van de vorige vorm, en die reden geldt nog steeds. 54px is dezelfde ondergrens als
.hj-dropzone-leeg hieronder. */
.hj-plankolom {
flex: 1 1 auto; min-width: 0;
display: grid; grid-template-rows: repeat(3, minmax(54px, auto)); gap: 8px;
}
/* Zelfde regel als in de week: de zone vult haar vak en scrollt intern. */
/* ⚠️ GEEN eigen schuifbalk meer (11/09/2026). Hier stond `overflow-y: auto`, waardoor elk dagdeel zijn
kaarten wegstopte achter een eigen balk. De ene balk voor het geheel staat nu op .hj-plankalender. */
.hj-plankolom .hj-dropzone { min-height: 0; }
/* De drop-zone staat er ALTIJD, ook wanneer het dagdeel leeg is — anders kan je niets naar een lege
voormiddag slepen, en dat is net het geval waarvoor een planbord bestaat. */
.hj-dropzone { border: 1px dashed transparent; border-radius: 10px; padding: 4px; transition: background .12s; }
.hj-dropzone-actief { border-color: #185fa5; background: rgba(24, 95, 165, .06); }
.hj-dropzone-leeg { min-height: 54px; display: flex; align-items: center; }
/* === Weekweergave ============================================================================== */
/* Zeven dagkolommen naast elkaar. ⚠️ minmax(0, 1fr) en niet 1fr: een grid-kolom krijgt anders `auto` als
minimum, en dan duwt één lange klantnaam de hele week breder dan het scherm. Met 0 als minimum knipt
text-truncate binnen de kolom in plaats van het raster op te rekken. */
/* ⚠️ VIER RIJEN (dagkop + drie dagdelen) en subgrid op de kolommen. Zonder dat stroomt elke dagkolom
apart: "NM" staat op dinsdag veel lager dan op donderdag, waar niets boven staat. Dominique op
08/09/2026: "dat stoort in ieder geval". In de oude kalender waren de dagdelen KOLOMMEN, dus daar lag
alles per definitie op één raster — dat is wat we hier terugwinnen.
Met subgrid erven de dagkolommen de rijhoogtes van het weekraster: elke voormiddag staat op dezelfde
hoogte, ook wanneer er in de ene drie kaarten staan en in de andere geen. */
/* ⚠️⚠️ `auto` + DRIE MEEGROEIENDE RIJEN — de omkering van 11/09/2026, zie de lange nota bij .hj-plankolom.
De dagkop neemt wat hij nodig heeft; elk dagdeel neemt de hoogte van zijn VOLSTE dag.
Hier stond `auto 1fr 1fr 1fr` met een schuifbalk per dagdeel per dag. Op een kleiner scherm toonde dat
maar een paar kaarten per vak, en verslepen ging tegen een schuifbalk in.
⚠️ Subgrid doet hier het zware werk: de zes dagkolommen erven deze rijhoogtes, dus elke voormiddag staat
op dezelfde hoogte ook al heeft de ene drie kaarten en de andere geen. Dat blijft zo met `auto` — de rij
groeit naar de VOLSTE dag, niet per kolom.
⚠️ `height: 100%` is WEG. Met meegroeiende rijen moet dit raster hoger kunnen worden dan zijn wikkel;
anders knijpt het zichzelf terug samen en is er niets gewonnen. De schuifbalk staat op
.hj-plankalender. */
.hj-planweek {
min-width: 940px;
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-rows: auto repeat(3, minmax(54px, auto)); gap: 8px;
}
.hj-weekdag {
min-width: 0; border: 1px solid var(--bs-border-color, #e5e8ef); border-radius: 10px; padding: 6px;
display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 0;
}
/* Elk dagdeel is ÉÉN rij-item (kopje + zone samen), anders telt subgrid er zeven in plaats van vier.
⚠️ En het is zelf een flex-kolom met min-height: 0, zodat de ZONE erin kan krimpen tot onder haar
inhoud. Zonder die nul groeit het vak mee met de kaarten en scrollt de hele pagina in plaats van het
dagdeel — dezelfde val als bij .content in de schil. */
.hj-dagdeelvak { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
/* ⚠️ De zone binnen een weekkolom vult haar vak en scrollt INTERN. Dominique: "indien er teveel blokjes
zijn per tijdsdeel zou ieder tijdsdeel een scrolbalk moeten tonen."
Dat lost meteen het slepen op: er blijft altijd zone over om iets naartoe te brengen, ook wanneer het
dagdeel vol staat — anders is elke pixel een kaart en vangt díe de klik. */
/* ⚠️ GEEN eigen schuifbalk meer (11/09/2026) — zie .hj-plankolom. `flex: 1` blijft: de zone vult haar
vak, zodat een halflege dag nog steeds over de volle rijhoogte sleepbaar is. */
.hj-weekdag .hj-dropzone { flex: 1; min-height: 0; }
/* ⚠️ De tooltip van het planbord. `position: fixed` en op BODY-niveau (zie app.js), want de dagdeelzones
hebben `overflow-y: auto` en zouden hem afkappen.
`white-space: pre-line` draagt de structuur: de tekst komt met echte regeleindes uit Tooltipregels(),
met een kopje boven elke waarde. Zonder deze regel wordt het één lange zin.
z-index boven de DevExpress-popups (1050) maar onder de foutbalk van Blazor (1100): een tooltip mag
nooit een storingsmelding verbergen. */
.hj-tip {
position: fixed; z-index: 1060; max-width: 380px;
padding: 8px 10px; border-radius: 8px;
background: var(--bs-body-bg); color: var(--bs-body-color);
border: 1px solid var(--bs-border-color);
box-shadow: 0 4px 16px rgba(0,0,0,.18);
font-size: .82rem; line-height: 1.35;
white-space: pre-line; pointer-events: none;
}
/* De opgepakte kaart, zodat je ziet wát je aan het verplaatsen bent. */
.adm-planning-kaart-gekozen { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
/* De invoeglijn: waar de gesleepte kaart terechtkomt (ticket 0928c2a6, sortering binnen een tijdsdeel).
Een LIJN erboven en geen kader eromheen — een kader leest als "hierin", en dat is precies de verkeerde
belofte: de kaart komt ervoor te staan, niet erin. */
.adm-planning-kaart.hj-invoegdoel { box-shadow: inset 0 3px 0 0 var(--bs-primary); }
/* Lange tekst in een lijstcel LOOPT OM, en de rij groeit mee.
Gevraagd door de klant op 08/09/2026: de omschrijving en de opmerkingen moeten volledig leesbaar zijn
zonder de bon te openen.
⚠️ Hier stond eerst `nowrap` met afkappen en de volle tekst in een tooltip. Die keuze kwam van mij, niet
van een meting: de cel van DevExpress staat zelf al op `white-space: normal` — gemeten in de DOM — dus
het was MIJN klasse die de omloop tegenhield. Er viel niets te forceren, alleen iets weg te halen.
⚠️ `vertical-align: top` op de cel hoort erbij. Bij rijen van ongelijke hoogte zwemt tekst die verticaal
gecentreerd staat; met de bovenkant uitgelijnd beginnen alle kolommen van een rij op dezelfde lijn. */
.hj-lijsttekst { display: block; white-space: normal; overflow-wrap: anywhere; }
.hj-lijsttekst:not(:last-child) { margin-bottom: 2px; }
/* ⚠️ De rij die zo'n cel draagt, lijnt BOVENAAN uit — en alle cellen van die rij mee, niet alleen de cel
met de lange tekst. Gemeten in de DOM: rijhoogtes lopen hier van 36 tot 133px, en met `middle` zweeft de
klantnaam dan halverwege een rij waarvan de omschrijving bovenaan begint.
`:has()` en geen klasse op de tabel: de rij weet zelf of ze lange tekst draagt, en rijen zonder zo'n cel
houden hun gecentreerde uitlijning. Zo raakt dit geen enkele andere lijst in de app. */
tr:has(.hj-lijsttekst) > td { vertical-align: top; }
/* Vandaag valt op — in een week van zeven gelijke kolommen is "waar sta ik" anders een rekensom met de
datums eronder.
⚠️ NIET MEER MET DE PRIMAIRE KLEUR, en dat is een correctie van 08/09/2026. Hier stond
`border-color: var(--bs-primary)` met een blauwe binnenrand. Dominique las dat als een FOCUSRAND en
vroeg waarom dinsdag geselecteerd leek.
Hij had gelijk: in deze app betekent blauw SELECTIE. Een aangeklikte planningskaart krijgt
`outline: 2px solid var(--bs-primary)` — dezelfde kleur, één regel verderop. Twee betekenissen aan één
kleur hangen betekent dat de bekendste wint, en dat is niet degene die je bedoelde.
⚠️ Zachte tint plus een accentstreep bovenaan, in amber. Dat is de vlootlijn: DAMC markeert "vandaag"
in `bel-card.bel-today` met `border-left: 3px solid #f0ad4e` en een zachte achtergrond — een kleur die
nergens anders selectie betekent.
⚠️ De tint werkt in beide thema's: `color-mix` met de achtergrond in plaats van een vaste lichte kleur,
anders wordt de kolom in donkere modus een felle vlek. */
.hj-weekdag-vandaag {
border-top: 3px solid #f0ad4e;
background: color-mix(in srgb, #f0ad4e 7%, var(--bs-body-bg));
}
.hj-weekdag-vandaag .hj-weekdag-datum { color: #b8860b; font-weight: 600; }
.hj-weekdag-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 4px;
padding: 2px 4px 6px; border-bottom: 1px solid var(--bs-border-color, #e5e8ef); margin-bottom: 4px; }
.hj-weekdag-naam { font-weight: 600; text-transform: capitalize; }
.hj-weekdag-datum { font-size: .8rem; color: var(--bs-secondary-color); }
/* Het dagdeel-kopje binnen een weekkolom: klein, want het staat er 21 keer. In dagweergave blijft het
de gewone h6 — daar is er ruimte en zijn het er drie. */
.hj-weekdagdeel { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
color: var(--bs-secondary-color); margin: 6px 0 2px; }
/* ⚠️⚠️ ZEVEN KOLOMMEN OF NIETS — en dat is een gemeten conclusie, geen luiheid.
Hier stond eerst `@media (max-width: 1200px)` met vier kolommen, daarna een container-query. Beide
waren fout, elk op een eigen manier, en samen vormen ze de les:
1 · De MEDIA-query keek naar het scherm. Deze kolommen krijgen hun breedte van het planbord, en daar
gaan eerst de zijbalk (220px), de werkvoorraad (270px) en de marges af. Gemeten 08/09/2026:
viewport 1920 -> kolom 186px viewport 1440 -> kolom 118px
viewport 1600 -> kolom 141px viewport 1280 -> kolom 95px
Op 1280 grepen zeven kolommen dus gewoon door, want 1280 > 1200.
2 · De CONTAINER-query stond eerst op .hj-planweek ZELF. Een container-query bevraagt de container en
geldt voor haar afstammelingen — een element reageert nooit op zijn eigen query. Verplaatst naar
een wikkel, en toen bleek het echte bezwaar:
3 · INKLAPPEN EN UITLIJNEN SLUITEN ELKAAR UIT. De dagkolommen staan op `grid-row: 1 / -1` met subgrid,
zodat VM/VM-NM/NM op alle zeven dagen op dezelfde hoogte staan. Zakt het raster naar vier kolommen,
dan blijven het zeven dagen in één rij en verzint het grid er drie impliciete bij:
109.6 109.6 109.6 109.6 · 72.6 76.6 77.2
Vier brede en drie smalle kolommen. Erger dan zeven gelijke.
Dominique koos 1920 als ondersteunde ondergrens (08/09/2026), en daar is 186px per kolom ruim genoeg —
"Opdebeeck Julie" past er volledig op. Onder die breedte SCHUIFT de kalender horizontaal in plaats van
te vermorzelen: voorspelbaar, en de rijen blijven uitgelijnd. */
/* ⚠️ min-height: 0 en display:flex — anders geeft deze wikkel de hoogte niet door aan het raster en
valt `height: 100%` daarbinnen terug op de inhoud. */
/* ⚠️ HIER STAAT DE ENE SCHUIFBALK (11/09/2026). Tot dan scrollde elk dagdeel apart en had deze wikkel
enkel `overflow-x`. De klant vroeg één balk voor de hele planning, zodat alle kaarten van een dagdeel
zichtbaar zijn en verslepen niet tegen een balk in gaat. `overflow: auto` dekt beide richtingen: de
week is 940px breed en schuift al horizontaal. */
.hj-plankalender { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
/* 6 x 150px + 5 x 8px gap = 940 — de min-width hierboven. Onder die breedte komt er een schuifbalk in
plaats van kolommen die te smal worden; 150 is de gemeten ondergrens waarop een klantnaam nog leest.
⚠️ ZES en geen zeven: zondag is eruit (nooit gepland in de hele historiek, zaterdag wél drie keer). */
@media (max-width: 900px) {
.hj-planbord { flex-direction: column; }
.hj-voorraad { flex-basis: auto; max-height: none; width: 100%; }
}
/* ── Te factureren: twee lijsten die samen de resterende hoogte vullen ───────────────────────────
Gevraagd door Dominique op 08/09/2026: volle breedte, en werkbonnen en onderhouden elk de helft van
wat er overblijft, met de lijst zelf op de vrije hoogte.
`.adm-page-fill` (fundering) maakt van de pagina al een flex-kolom die op de viewport eindigt en de
leescap van 1100px opheft. Deze regels verdelen wat er dan overblijft.
⚠️ `min-height: 0` is geen sierregel maar de kern. Een flex-item krijgt standaard `min-height: auto`,
en dan weigert het kleiner te worden dan zijn inhoud — een lijst met veertig rijen duwt zijn vak dan
gewoon open en de tweede lijst schuift uit beeld. Precies wat je NIET wil en wat er zonder deze regel
gebeurt, zonder dat iets het meldt.
⚠️ `1 1 0` en niet `1 1 auto`: met `auto` verdelen ze naar rato van hun INHOUD, dus de lijst met de
meeste rijen krijgt de meeste ruimte. Met basis nul krijgen ze elk de helft, ook wanneer de ene leeg is. */
.hj-factuurvlakken { gap: 16px; }
.hj-factuurvlak { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
.hj-factuurvlak > .adm-grid { flex: 1 1 0; min-height: 0; }