/* The design language: one charcoal ramp, one accent per brand, Montserrat,
roomy rounded. The charcoal steps come from the colour proposal and are the
same whichever brand the interface is dressed as, so they live here where a
browser can cache them. Only --acc* is written per user, on . */
:root {
--charcoal-700:#2A2324; --charcoal-600:#42393A; --charcoal-500:#6B5E60;
--charcoal-200:#D4CCCE; --charcoal-100:#EBE5E6; --charcoal-50:#F6F3F3;
/* The names the rest of the stylesheet uses, mapped onto that ramp. */
--cream:var(--charcoal-50); --cream-soft:var(--charcoal-100); --surface:#FFFFFF;
--ink:var(--charcoal-700); --ink2:#1A1515;
--muted:var(--charcoal-500); --muted-soft:var(--charcoal-200);
--line:var(--charcoal-100); --line-soft:var(--charcoal-50);
/* Verwijderen is rood, in welk merk je ook kijkt: een destructieve actie
mag niet de kleur van de huisstijl aannemen en daarmee wegvallen. */
--notaris-800:#A60F0E; --notaris-700:#C50C0B; --notaris-50:#FFF1F1;
/* The width of the form's own content column: .layout (1280) minus the
side nav, its gap and the page padding. The builder's canvas takes the
same figure, so what you build is the width you get — dus schuift dit
getal mee met `.sidenav`, of de bouwer tekent breder dan een dossier.
Let op wélke `.sidenav`: binnen de shell geldt de regel in denotaris.css
(`.dn-body > .layout .sidenav`), en die is het getal dat telt. */
--form-column:940px;
--acc:#E42826; --acc-soft:#C50C0B; --acc-tint:#FBD9D7;
--sage:#2D5A3D; --sage-tint:#E3EBE5;
--bd:var(--line); --mut:var(--muted);
}
* { box-sizing: border-box; }
body { margin:0; font:14px/1.5 "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--ink); background:var(--cream); }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size:.92em; }
/* Dezelfde kleur als de pagina, uit hetzelfde teken. Hier stond
`rgba(250,248,245,.9)` -- een kleur van vóór de charcoal-ramp, en sinds
`--cream` op `#F6F3F3` staat is dat een lichtere band bovenaan het scherm
waarvan de randen als strepen lezen. Twee plekken die dezelfde kleur
spellen is hoe dat gebeurt, dus spelt deze hem niet meer. */
header { position:sticky; top:0; z-index:5;
background:color-mix(in srgb, var(--cream) 90%, transparent);
backdrop-filter:saturate(140%) blur(8px);
border-bottom:1px solid var(--line); color:var(--ink); padding:16px 28px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
header h1 { font-size:19px; margin:0; font-weight:800; letter-spacing:-.01em; color:var(--ink2); }
header h1 .dot { color:var(--acc); font-weight:900; }
header h1 .sub2 { color:var(--muted); font-weight:600; font-size:14px; }
header .muted { color:var(--muted-soft); font-size:12px; font-weight:500; }
.dn-savestate { font-size:11px; font-weight:600; color:var(--muted-soft); white-space:nowrap; }
header label { color:var(--muted); font-size:12px; font-weight:600; display:flex; gap:6px; align-items:center; cursor:pointer; }
.layout { display:flex; gap:24px; align-items:flex-start; max-width:1280px; margin:0 auto; padding:24px 28px 48px; }
@media (max-width:820px){ .layout { flex-direction:column; } .sidenav { position:static; width:100%; flex-direction:row; flex-wrap:wrap; top:auto; max-height:none; overflow:visible; } }
/* left entity menu */
/* Het menu draagt sinds de secties erin staan meer dan het aantal
onderdelen, dus mag het langer worden dan het scherm: het schuift dan zelf
in plaats van onder de rand te verdwijnen — sticky heeft geen eigen bodem. */
/* Breder dan een menu van onderdeelnamen hoefde te zijn: sinds een plek naar
een veld kan heten (`titleField`) staat er "Kramer Holding B.V." in het
menu in plaats van "Bedrijf 1", en dat is een naam en geen label. En sinds
de secties erin staan draagt het menu ook de kop van een lijst
("VERTEGENWOORDIGERS", in kapitalen en gespatieerd) plus een stap
inspringen — dus 300 en niet 272: wat er in staat is tekst geworden. */
.sidenav { position:sticky; top:78px; width:260px; flex-shrink:0; display:flex; flex-direction:column; gap:4px;
max-height:calc(100vh - 96px); overflow-y:auto;
background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:10px; box-shadow:0 1px 2px rgba(45,38,39,.03); }
.navitem { text-align:left; background:transparent; color:var(--ink); border:0; border-radius:12px;
padding:11px 14px; font:inherit; font-weight:600; font-size:13px; letter-spacing:0; cursor:pointer; transition:background .12s,color .12s; }
.navitem:hover { background:var(--cream-soft); color:var(--ink); }
.navitem.active { background:var(--ink); color:var(--surface); }
.navitem.active:hover { background:var(--ink2); color:var(--surface); }
/* Een lijst betrokkenen staat één keer in het menu: een kop met de rijen
eronder. De kop is geen knop — er valt niets te openen — dus draagt hij het
gewicht van een opschrift en niet van een menu-item, en de rijen springen
in zodat te zien is dat ze bij hem horen. */
.sidenav .navgroup { padding:12px 14px 4px; font-size:11px; font-weight:700;
letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.navitem.navrow { padding-left:26px; }
/* "＋ Kind toevoegen": onder de laatste rij van een lijst. Geen sectie maar
een handeling, dus zonder de nadruk van een menu-item — en nooit `active`,
want er valt niets te openen. */
.navitem.navadd { padding-left:26px; color:var(--muted); font-weight:600; font-size:12.5px; }
.navitem.navadd:hover { background:var(--acc-tint); color:var(--acc); }
.content { flex:1; min-width:0; }
.entsec { display:none; }
.entsec.active { display:block; }
/* Het sectiemenu staat in het menu links, onder het onderdeel waar het bij
hoort: de ruimte tussen twee menu-items groeit met de secties van het
onderdeel dat open staat, en valt weer dicht als je verder gaat. Eén boom
dus, in plaats van een menu links en een tweede menu in de kaart.
Alle bomen staan in de DOM en alleen de open is te zien — een regel zet de
knop van een sectie op display:none en `settleSections` leest dat weer
uit, dus mag wisselen van onderdeel het menu niet opnieuw tekenen.
**De ruimte groeit, hij springt niet.** Naar `display:none` valt niet te
animeren en naar `height:auto` evenmin, dus is de boom een raster van één
rij die van `0fr` naar `1fr` gaat — dat interpoleert wél, en het kind
(`.navtreebody`) knipt af wat nog niet past. Vandaar dat dat kind er is.
`visibility` doet het sluiten van de deur: hij gaat meteen open en pas aan
het eind van de overgang weer dicht (dat is hoe een niet-interpoleerbare
eigenschap in een transition loopt), en houdt een dichtgevallen boom
ondertussen uit de tabvolgorde — een knop die niet te zien is en wel te
bereiken met de tab-toets is de reden dat `display:none` hier ooit stond.
De negatieve `margin-top` is de gap van het menu zelf: een dichtgevallen
boom is nul hoog en zou er alsnog twee keer 4px bij zetten, dus stond er
tussen twee items met een boom meer ruimte dan tussen twee zonder. Hij
loopt mee in de overgang, dus valt de ruimte in één beweging dicht. */
.navtree { display:grid; grid-template-rows:0fr; visibility:hidden; opacity:0;
margin:-4px 0 0;
transition:grid-template-rows .2s ease, opacity .14s ease,
margin .2s ease, visibility .2s; }
/* Krap erboven en ruim eronder: de secties hangen aan het onderdeel waar ze
bij horen en staan los van het volgende. Even veel ruimte boven als onder
maakte er een blok van dat net zo goed bij het onderdeel eronder had
kunnen horen. */
.navtree.active { grid-template-rows:1fr; visibility:visible; opacity:1;
margin:2px 0 14px; }
/* En één stap naar rechts, die zegt dat dit de kinderen van het onderdeel
erboven zijn. Ruimte alleen zei "hier begint iets anders" en niet "dit
hoort bij die daarboven".
**Eén stap voor de hele boom en niet één per niveau** — dat was de
inspringing die eruit ging — dus kost een niveau erbij geen breedte, hoe
diep de nesting ook gaat. De stap staat op de body en niet op de knoppen,
want dan is het één regel voor de hele boom in plaats van één per soort
knop. */
.navtree > .navtreebody { display:flex; flex-direction:column; gap:2px;
min-height:0; overflow:hidden; margin-left:8px; }
/* Wie geen beweging wil, krijgt het oude gedrag: er staat wel of er staat niet. */
@media (prefers-reduced-motion: reduce) {
.navtree { transition:none; }
}
/* **De diepte kost geen breedte.** Een entiteit in een sectie van een
entiteit legt haar secties hierin (`entities/nesting.py`), en dat kan
drie, vier niveaus diep gaan. Per niveau een stap naar rechts was dan
vooral marge, en het knijpt precies de breedte af waar de namen in moeten
staan — een lijst betrokkenen heet sinds `titleField` "Kramer Holding
B.V." en niet "Bedrijf 1".
Dus staat er **één** stap voor de hele boom, hoe diep hij ook gaat: elke
knop erin staat op dezelfde rand, één stap voorbij het onderdeel waar de
boom bij hoort. Binnen die boom zegt de **ruimte** boven een kop dat
daaronder een niveau lager begint — dezelfde vorm als een lijst bovenaan
het menu, een kop in kapitalen met zijn items eronder (`.navgroup`).
Binnen die boom springt elk niveau een stap verder in (`data-depth`), zodat
een kind onder zijn ouder hangt in plaats van ernaast. */
.navtree .subnavitem { text-align:left; background:transparent; color:var(--muted);
border:0; border-radius:10px; font:inherit;
padding:7px 14px 7px calc(14px + var(--secdepth, 0) * 8px);
font-size:12.5px; font-weight:600; cursor:pointer;
transition:background .12s,color .12s; }
/* Eén stap per niveau, uitgerekend uit `--secdepth` in plaats van per diepte
opgeschreven: `nesting.MAX_DEPTH` en het aantal regels hier zijn niet
hetzelfde getal, en de vergeten regel zou het niveau zijn dat naast zijn
ouder komt te staan in plaats van eronder. `sectionNav` zet hem, want het
is de boom die de diepte kent. */
.navtree .subnavitem:hover { background:var(--cream-soft); color:var(--ink); }
/* De tint en niet het zwart van `.navitem.active`: twee niveaus die om
dezelfde nadruk vragen laten niet zien welk van de twee je hebt gekozen. */
.navtree .subnavitem.active { background:var(--acc-tint); color:var(--acc); }
/* Een sectie die een entiteit draagt houdt zelf geen vragen over zodra de
tabbladen van die entiteit eronder staan: dan is haar knop een kop. Hij is
te klikken — hij opent het eerste tabblad eronder — maar krijgt nooit
`.active`, dus zegt het lettertype waar hij voor staat. */
.navtree .subnavitem.subnavhead { color:var(--ink2); font-weight:700;
font-size:11.5px; letter-spacing:.02em; text-transform:uppercase;
/* De ruimte tussen het niveau erboven en het niveau dat hier begint. Bij
de gap van `.navtreebody` op, dus staat een kop duidelijk verder van wat
erboven staat dan twee knoppen van hetzelfde niveau van elkaar. */
margin-top:10px; }
/* Behalve als hij bovenaan staat: dan is er geen niveau erboven om ruimte
van te houden, en zou de boom bij het opengaan een gat aan de bovenkant
hebben. */
.navtree .subnavitem.subnavhead:first-child { margin-top:0; }
/* Een rij van een lijst staat zelf ingesprongen onder haar kop (`navrow`),
dus zet haar boom de stap vanaf *die* rand: één stap voorbij de tekst van
de rij waar ze bij hoort, en niet voorbij die van de kop erboven. */
.navtree.inrow > .navtreebody { margin-left:24px; }
/* De vragen die in geen sectie staan, als een onderdeel er verder geen heeft:
dan zijn ze de inhoud van de kaart en valt er niets te kiezen, dus geen
`display`-schakelaar zoals een paneel heeft en geen knop ernaast. Staan er
wél secties naast, dan is dit blok het eerste tabblad en een gewone
`.subsec` (`docdigi-form.entitySection`) — anders stonden de eigen velden
van een onderdeel boven elk tabblad dat je opent. De scheidingslijn die
hier stond was voor dat geval en is daarmee weg. */
.subsec { display:none; }
.subsec.active { display:block; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:20px 22px; margin-bottom:18px; box-shadow:0 1px 2px rgba(45,38,39,.03); }
.card > h2 { font-size:16px; margin:0 0 14px; font-weight:700; letter-spacing:-.01em; color:var(--ink2); }
/* De kop van een kaart is een regel met twee kanten: de naam links, en
rechtsboven wat er met deze betrokkene te doen is. */
.card > .cardhead { display:flex; align-items:flex-start; gap:14px;
margin:0 0 14px; }
.card > .cardhead > h2 { margin:0; flex:1; min-width:0; }
.cardacts { display:flex; align-items:center; gap:8px; flex-shrink:0; }
/* Het teken dat het record buiten dit formulier is gewijzigd. Náást de knop
en niet in de strook eronder: dit is wat je bij het openen van een dossier
wil weten, en niet nadat je langs een regel tekst hebt gelezen.
De accenttint en geen statuskleur: er is niets mis, er staat iets klaar. */
.cardacts .bt-nieuw { display:inline-flex; align-items:center; gap:6px;
font-size:11.5px; font-weight:700; letter-spacing:.02em;
color:var(--acc); background:var(--acc-tint); border-radius:999px;
padding:3px 10px; white-space:nowrap; }
.cardacts .bt-nieuw::before { content:""; width:6px; height:6px;
border-radius:50%; background:var(--acc); }
.computed { font-size:12px; color:var(--sage); background:var(--sage-tint); border:1px solid #CFE0D4; border-radius:12px; padding:8px 12px; margin:8px 0; font-weight:500; }
.computed b { color:#1F3F2B; font-weight:700; }
fieldset { border:1px solid var(--line); border-radius:16px; margin:12px 0; padding:10px 14px 12px; }
legend { font-size:12px; font-weight:700; color:var(--ink2); padding:0 6px; letter-spacing:.01em; }
/* meter overlay (?perf=1) — separate from the form and must cost nothing */
#perfOverlay { position:fixed; right:12px; bottom:12px; z-index:80; white-space:pre;
font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:11px; line-height:1.5;
background:rgba(26,21,21,.92); color:#F4F0EB; padding:9px 12px; border-radius:10px;
pointer-events:none; box-shadow:0 4px 16px rgba(45,38,39,.25); }
#perfOverlay.over { background:rgba(196,12,11,.94); }
/* ---- the grid of twelve columns ----------------------------------------
Elke container is een eigen raster: een sectie tussen twee koppen, een
groep, een blok, een lijstrij. Dat is bewust klein gehouden. In één raster
van driehonderd velden schuift bij het verbergen van één regel alles
erachter op, en `contain:layout` plus een korte container houdt dat werk bij
de tien à twintig velden die er werkelijk staan.
De breedte gaat als klasse mee (`sp1`…`sp12`), niet als inline stijl: dat
scheelt vijftienhonderd losse stijlobjecten en laat de browser stijl
hergebruiken. */
.fieldgroup, fieldset.fieldgrid, .typePanel {
display:grid; grid-template-columns:repeat(12, minmax(0,1fr));
gap:2px 12px; align-items:start; contain:layout; }
/* `auto / span 12` and not `1 / -1`: the latter also pins the start column,
waardoor élk veld links begint en dus zijn eigen regel krijgt — ook een veld
van vier kolommen. Met een automatische start schuiven velden achter elkaar
aan zolang er ruimte is, en begint pas een nieuwe regel als de twaalf vol
zijn. Dat is wat een raster hoort te doen. */
.fieldgroup > *, fieldset.fieldgrid > *, .typePanel > * { grid-column:auto / span 12; }
.sp1{grid-column-end:span 1} .sp2{grid-column-end:span 2} .sp3{grid-column-end:span 3}
.sp4{grid-column-end:span 4} .sp5{grid-column-end:span 5} .sp6{grid-column-end:span 6}
.sp7{grid-column-end:span 7} .sp8{grid-column-end:span 8} .sp9{grid-column-end:span 9}
.sp10{grid-column-end:span 10} .sp11{grid-column-end:span 11} .sp12{grid-column-end:span 12}
.nr{grid-column-start:1}
.of1{grid-column-start:2} .of2{grid-column-start:3} .of3{grid-column-start:4}
.of4{grid-column-start:5} .of5{grid-column-start:6} .of6{grid-column-start:7}
.of7{grid-column-start:8} .of8{grid-column-start:9} .of9{grid-column-start:10}
.of10{grid-column-start:11} .of11{grid-column-start:12}
@media (max-width:820px) { .fieldgroup > *, fieldset.fieldgrid > *, .typePanel > * { grid-column:1 / -1 !important; } }
.row { display:grid; grid-template-columns:200px 1fr; gap:10px; align-items:center; padding:4px 0; }
/* No two-hundred-pixel label column fits beside a four-column field
pixels; narrower than the full width therefore means: label above it. */
.row.above { grid-template-columns:minmax(0,1fr); gap:2px; align-items:start; padding:2px 0 6px; }
.row.above > label { font-size:11.5px; }
.row > label { color:var(--muted); font-size:12px; font-weight:500; }
/* An explanation behind an icon, and a hint under the field itself. */
.infoicon { display:inline-grid; place-items:center; width:14px; height:14px;
margin-left:5px; vertical-align:middle; border:0; border-radius:50%;
background:var(--line); color:var(--muted); font:inherit; font-size:9.5px;
font-weight:800; font-style:italic; line-height:1; cursor:help; padding:0; }
.infoicon:hover { background:var(--acc-tint); color:var(--acc); }
.fieldwrap { display:grid; gap:3px; min-width:0; }
.fieldwrap > .hint { color:var(--muted-soft); font-size:11px; line-height:1.35; }
/* Every input in a row that is not a checkbox, rather than a list of the
types that exist. The list was `text`, `date` and `number`, so `email` and
`tel` — the controls a form's e-mail and telephone fields draw — arrived
unstyled: a browser's own bare box beside fifteen rounded ones, on the
dossier form and on the betrokkene screen both. A list of types is a pair
with makeInput() that nothing keeps in step, and the next type added would
land the same way. The checkbox is left out because it is drawn as a
switch (.switch below) and must keep its own size. */
/* `.cellwrap` erbij: een cel van een tabel (`entities/tables.py`) is een veld
zonder rij eromheen — er is geen labelkolom, want het label staat in de kop
van de kolom. Dezelfde regel en geen tweede: een invoer die er in een tabel
anders uitziet dan in een formulier is dezelfde besturing die zich anders
voordoet. */
.row input:not([type=checkbox]), .row select, .row textarea,
.cellwrap input:not([type=checkbox]), .cellwrap select, .cellwrap textarea {
width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:10px; font:inherit; background:var(--surface); color:var(--ink); }
.row textarea, .cellwrap textarea { resize:vertical; min-height:36px; }
.row input:focus, .row select:focus, .row textarea:focus,
.cellwrap input:focus, .cellwrap select:focus, .cellwrap textarea:focus {
outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-tint); }
/* A value that cannot be right: the border says it and the line under the
field says what is wrong. Red and not the accent, because this carries
meaning — in the green brand too. */
.row input[aria-invalid=true] { border-color:var(--notaris-700); background:var(--notaris-50); }
.row input[aria-invalid=true]:focus { border-color:var(--notaris-700); box-shadow:0 0 0 3px var(--notaris-50); }
.fieldwrap > .problem { color:var(--notaris-700); font-size:11px; line-height:1.35; }
.fieldwrap > .problem[hidden] { display:none; }
/* A field that searches a register: the magnifier sits in the box, on the
left, exactly as it does in the search box above the dossier list — one
magnifier in the interface, in one position, so it reads as the same
gesture. The icon is inert; the padding is the only thing the input
itself gives up for it. */
.searchwrap { position:relative; display:flex; align-items:center; min-width:0; }
.searchwrap svg { position:absolute; left:10px; width:15px; height:15px;
color:var(--muted-soft); pointer-events:none; }
.searchwrap input { padding-left:31px !important; }
.searchwrap:focus-within svg { color:var(--acc); }
/* money field: € prefix + euro-only numeric input */
.moneywrap { display:flex; align-items:stretch; }
.moneywrap .euro { display:flex; align-items:center; padding:0 9px; border:1px solid var(--line); border-right:0;
border-radius:10px 0 0 10px; background:var(--cream-soft); color:var(--muted); font-weight:700; font-size:13px; }
.moneywrap input { border-radius:0 10px 10px 0 !important; width:100%; }
.moneywrap input::-webkit-outer-spin-button, .moneywrap input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.moneywrap input[type=number] { -moz-appearance:textfield; }
.moneywrap:focus-within .euro { border-color:var(--acc); }
/* percentage field: numeric input with a % suffix */
.pctwrap { display:flex; align-items:stretch; }
.pctwrap input { border-radius:10px 0 0 10px !important; width:100%; }
.pctwrap .pct { display:flex; align-items:center; padding:0 9px; border:1px solid var(--line); border-left:0;
border-radius:0 10px 10px 0; background:var(--cream-soft); color:var(--muted); font-weight:700; font-size:13px; }
.pctwrap input::-webkit-outer-spin-button, .pctwrap input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.pctwrap input[type=number] { -moz-appearance:textfield; }
.pctwrap:focus-within .pct { border-color:var(--acc); }
.row.check { grid-template-columns:200px 1fr; }
/* A switch in a narrow column: its label belongs above it, as with every
other field. Without this rule `.row.check` beats `.row.above` — equally
specifiek, maar later in dit bestand — en houdt de rij zijn labelkolom van
tweehonderd pixels. In een cel van vier kolommen past die niet, en dan
schuift het label over de schakelaar heen. */
.row.check.above { grid-template-columns:minmax(0,1fr); gap:3px 0; justify-items:start; }
/* slider / toggle switch (replaces bare checkboxes) */
.switch { position:relative; display:inline-flex; align-items:center; width:42px; height:24px; cursor:pointer; flex:0 0 auto; }
.switch input { position:absolute; opacity:0; width:0; height:0; margin:0; }
.switch .slider { position:absolute; inset:0; width:42px; height:24px; background:var(--line); border:1px solid var(--line);
border-radius:999px; transition:background .15s, border-color .15s; }
.switch .slider::before { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
background:#fff; box-shadow:0 1px 2px rgba(45,38,39,.25); transition:transform .15s; }
.switch input:checked + .slider { background:var(--acc); border-color:var(--acc); }
.switch input:checked + .slider::before { transform:translateX(18px); }
.switch input:focus-visible + .slider { box-shadow:0 0 0 3px var(--acc-tint); }
.switch:hover .slider { border-color:var(--muted-soft); }
.switch input:checked + .slider:hover { background:var(--acc-soft); }
/* disabled-by-rule fields (the engine returned enabled:false) */
.disabledField > label { color:var(--muted-soft); }
.disabledField input, .disabledField select, .disabledField textarea {
background:var(--cream-soft); color:var(--muted-soft); cursor:not-allowed; }
.disabledField input:focus, .disabledField select:focus, .disabledField textarea:focus { border-color:var(--line); box-shadow:none; }
.disabledField .euro, .disabledField .pct { color:var(--muted-soft); }
.disabledField .switch { cursor:not-allowed; }
.disabledField .switch .slider { opacity:.5; }
.disabledField:hover .switch .slider { border-color:var(--line); }
/* Eén regel boven de velden van een partij: wat van haar is staat op slot en
wordt bij Partijen beheerd. Boven en niet onder, want uitleg die pas komt
als je er al langs hebt gelezen leest als niets — en grijs en klein, want
het is uitleg en geen waarschuwing. */
.beheerdnote { margin:0 0 14px; padding-top:12px; border-top:1px solid var(--line);
color:var(--muted); font-size:13px; line-height:1.5; }
/* hidden-by-rule fields */
.metpensioen { display:none; }
.hiddenField { display:none; }
/* Een sectie — of een hele entiteit — waarin niets zichtbaars is overgebleven.
Zelfde middel als .hiddenField en met opzet dezelfde plek: het tabblad, het
paneel, het navigatie-item en de kaart dragen hem allemaal, want een tab die
opent op niets leest als een pagina die niet laadde.
`!important`, en dat is hier geen luiheid: .entsec.active en .subsec.active
zetten display:block met twee klassen, dus zonder dit wint "geopend" van
"leeg" en blijft precies de lege kaart staan die dit weghaalt. Wat er niet
is, is er niet — ongeacht of het toevallig het geopende paneel was.
Alleen actief op pagina's die HIDE_EMPTY_SECTIONS aanzetten. */
.emptySection { display:none !important; }
/* ---- een tabel met betrokkenen (`entities/tables.py`) -------------------
Eén entiteit per rij, naast elkaar, met de samenvatting eronder. Vijf
leningdelen als vijf kaarten onder elkaar is wat een plek ervan maakt; dit
is wat iemand ervan wil zien.
Twee dingen zijn hier geen opmaak maar gedrag. De tabel schuift in haar
eigen omhulsel (`overflow-x:auto`), want een tabel met acht kolommen is
breder dan de kolom waar ze in staat en de pagina zelf mag nooit
horizontaal schuiven. En `hiddenField` staat op de cel en niet op de `| `
— een verborgen ` | ` zou de kolom laten inklappen en de rij eronder onder
de verkeerde kop zetten. */
.tablefield { min-width:0; }
.tablefield .tablename { font-size:12px; font-weight:700; color:var(--muted);
letter-spacing:.04em; text-transform:uppercase; margin:2px 0 8px; }
.tablefield > .pills { margin:8px 0 0; }
.entitytable { width:100%; border-collapse:collapse; display:block;
overflow-x:auto; }
.entitytable thead th { text-align:left; font-size:11px; font-weight:700;
color:var(--muted); letter-spacing:.03em; padding:0 8px 6px 0;
white-space:nowrap; }
.entitytable td { padding:3px 8px 3px 0; vertical-align:top; }
.entitytable tbody tr + tr td { padding-top:5px; }
/* De kolom met de knoppen draagt geen gegevens: zo smal als haar knop. */
.entitytable .rowtools { width:1%; white-space:nowrap; padding-right:0;
text-align:right; }
.entitytable tbody .rowtools button { padding:4px 9px; color:var(--muted); }
.entitytable tbody .rowtools button:hover { color:var(--notaris-700);
border-color:var(--notaris-700); background:var(--notaris-50); }
/* De voet is de samenvatting: een streep erboven, want dit is niet nog een
rij maar wat de rijen bij elkaar zeggen. */
.entitytable tfoot .totals td { border-top:1px solid var(--line);
padding-top:7px; font-size:13px; font-weight:700; color:var(--ink); }
.entitytable tfoot .totals .rowtools { font-weight:600; color:var(--muted); }
.entitytable .tallybit { display:block; font-weight:600; font-size:12px;
color:var(--muted); white-space:nowrap; }
.entitytable .tallybit b { color:var(--ink); }
/* Een cel léést: een tabel is een overzicht, en een rij invoervakken naast
elkaar heeft geen ruimte voor een label, een uitleg of een lang antwoord.
Invullen gebeurt in de strook achter "Bewerken", waar een veld die ruimte
wel heeft. */
.entitytable .cellview { display:block; padding:6px 0; min-width:0;
overflow-wrap:anywhere; }
.entitytable .cellview:empty::before { content:"—"; color:var(--muted-soft); }
.entitytable tbody .rowtools button + button { margin-left:4px; }
/* De stroken staan buiten de tabel en zijn dicht tot er een opengaat. De
breedte staat in denotaris.css, bij de dialoog waar ze er een van is. */
.rowpanels { display:contents; }
dialog.rowedit h2 { margin:0 0 16px; font-size:16px; font-weight:700; }
/* Een rij met veel kolommen mag langer zijn dan het scherm: dan schuift de
inhoud en blijven de kop en de knop staan. */
dialog.rowedit { display:none; flex-direction:column; max-height:86vh; }
dialog.rowedit[open] { display:flex; }
dialog.rowedit .fieldgroup { margin:0; overflow-y:auto; min-height:0; }
dialog.rowedit .dn-dialogbar { margin-top:18px; display:flex;
justify-content:flex-end; gap:8px; }
.cellwrap { min-width:0; }
.cellwrap > b { display:inline-block; padding:7px 0; }
button { background:var(--ink); color:var(--surface); border:0; border-radius:999px; padding:9px 18px; font:inherit; font-weight:600; letter-spacing:.01em; cursor:pointer; transition:background .12s; }
button:hover { background:var(--ink2); }
/* type / item pickers (pills) */
.pills { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
button.pill { background:var(--surface); border:1px solid var(--line); color:var(--ink); border-radius:999px;
padding:5px 13px; font-size:12px; font-weight:600; line-height:1.3; transition:all .12s; }
button.pill:hover { border-color:var(--acc); color:var(--acc); background:var(--surface); }
button.pill.on { background:var(--acc); border-color:var(--acc); color:#fff; }
button.pill.on:hover { background:var(--acc-soft); color:#fff; }
button.pill.sub { padding:3px 10px; font-size:11px; }
.typePanel { border:1px solid var(--line); border-radius:14px; margin:10px 0; padding:10px 14px; background:var(--cream-soft); }
.typePanel > .tname { font-size:12px; font-weight:700; color:var(--acc); margin:2px 0 6px; }
.subhead { font-size:11px; font-weight:700; color:var(--muted); margin:10px 0 2px; letter-spacing:.02em; text-transform:uppercase; }
#status { font-size:12px; color:var(--muted); font-weight:600; }
details { margin-top:18px; } details summary { cursor:pointer; color:var(--muted); font-size:12px; font-weight:600; }
pre { background:var(--ink2); color:#EDE6E3; padding:14px; border-radius:14px; overflow:auto; font-size:12px; max-height:380px; margin-top:10px; }
/* ==========================================================================
Shared chrome — same design language as the dossier form, applied to the
rest of the app (dossier list, sign-in) so it reads as one program.
========================================================================== */
header a.backlink { color:var(--muted); font-size:12px; font-weight:600; text-decoration:none; }
header a.backlink:hover { color:var(--acc); }
header .spacer { flex:1 1 0; min-width:0; }
/* Keep the chrome on one row at laptop widths: tighten the header's own
metrics, and let the two prose bits (subtitle, eval status) give way first. */
header { gap:12px; padding:14px 22px; }
header > .muted, header #status { flex:0 1 auto; min-width:0;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
header button { padding:8px 15px; }
header form.inline { margin:0; }
header button.ghost { background:transparent; color:var(--muted); border:1px solid var(--line);
font-size:12px; padding:7px 14px; }
header button.ghost:hover { background:var(--cream-soft); color:var(--ink); border-color:var(--muted-soft); }
/* a page with no left-hand entity menu */
.layout.single { display:block; }
/* search bar */
.toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.search { position:relative; flex:1; min-width:220px; max-width:460px; display:flex; align-items:center; }
.search svg { position:absolute; left:12px; width:16px; height:16px; color:var(--muted-soft); pointer-events:none; }
.search input { width:100%; padding:9px 12px 9px 36px; border:1px solid var(--line); border-radius:999px;
font:inherit; font-size:13px; background:var(--surface); color:var(--ink); }
.search input:focus { outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-tint); }
.count { font-size:12px; color:var(--muted); font-weight:600; }
/* htmx activity indicator */
.indicator { opacity:0; transition:opacity .15s ease-in; width:14px; height:14px; border-radius:50%;
border:2px solid var(--line); border-top-color:var(--acc); animation:spin .6s linear infinite; }
.htmx-request .indicator, .htmx-request.indicator { opacity:1; }
@keyframes spin { to { transform:rotate(360deg); } }
/* status chips */
/* pagination */
.pager { display:flex; align-items:center; justify-content:space-between; gap:10px;
padding-top:14px; margin-top:4px; border-top:1px solid var(--line-soft); }
.pager .pos { font-size:12px; color:var(--muted); font-weight:600; }
.pager button[disabled] { opacity:.4; cursor:not-allowed; }
.pager button[disabled]:hover { border-color:var(--line); color:var(--ink); }
/* empty state */
.empty { text-align:center; color:var(--muted); padding:44px 16px; font-size:13px; }
/* sign-in */
.signin { max-width:420px; margin:64px auto; text-align:center; }
.signin h2 { font-size:17px; font-weight:700; color:var(--ink2); margin:0 0 8px; }
.signin p { color:var(--muted); margin:0 0 18px; }
.signin a.cta { display:inline-block; background:var(--ink); color:var(--surface); text-decoration:none;
border-radius:999px; padding:10px 22px; font-weight:600; font-size:13px; transition:background .12s; }
.signin a.cta:hover { background:var(--ink2); }
/* Melding dat het dossier met een oudere versie van de dataset is ingevuld. */
.dn-versienote { display:flex; align-items:center; justify-content:space-between; gap:18px;
flex-wrap:wrap; margin:0 0 16px; padding:12px 16px; border-radius:14px;
background:var(--cream-soft); border:1px solid var(--line); font-size:13px;
line-height:1.5; color:var(--ink2); }
.dn-versienote form { margin:0; }
/* Een niet-vrijgegeven versie is geen fout maar wel iets om te weten: dezelfde
melding, in de kleur die deze interface voor "let op" gebruikt. Niet het rood
van verwijderen — er gaat niets stuk, er staat alleen iets onder je handen. */
.dn-versienote.unreleased { background:#FDF3E7; border-color:#F0D9B5; color:#7A4A08; }
/* De versiekiezer: wie formulieren mag bewerken zet een dossier hiermee op een
andere versie van zijn eigen formulier. Een eigen select-opmaak omdat deze
pagina alleen docdigi.css en de merkopmaak laadt; `.sj-select` bestaat alleen
in layout-editor.css en zou hier dus onopgemaakt aankomen. */
.dn-versionpick { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
margin:0 0 16px; font-size:13px; color:var(--muted); }
.dn-versionpick label { font-weight:600; }
.dn-versionpick select { font:inherit; font-size:13px; padding:6px 11px;
border:1px solid var(--line); border-radius:999px; background:var(--surface);
color:var(--ink); max-width:100%; }
.dn-versionpick select:focus { outline:none; border-color:var(--acc);
box-shadow:0 0 0 3px var(--acc-tint); }
/* Waarop een workflow wacht, per voorwaarde. Geen eigen kleuren: .dn-dot heeft
de drie statuskleuren al, en die zijn met opzet merk-onafhankelijk — "nog
niet betaald" is amber in elk merk.
Hier en niet in workflow.css: deze lijst wordt ook op de dossierkaart en in
het klantportaal getekend, en die twee laden alleen dit bestand en de
merkopmaak. */
.dw-blockers { list-style:none; margin:9px 0 0; padding:0; display:flex;
flex-wrap:wrap; gap:4px 16px; }
.dw-blockers li { display:flex; align-items:center; gap:7px; font-size:12px;
color:var(--muted); }
/* ---- de workflowkaart op het dossier --------------------------------------
Hier en niet in workflow.css, om de reden die er één alinea hoger al staat:
die kaart hangt op het dossierdashboard, en dat scherm laadt workflow.css
niet. Zolang zij daar wél stond kwam de kaart ongestileerd aan -- alles onder
elkaar in bronvolgorde, knoppen los onder de naam.
Eén regel per run: links wie het is, rechts wat je ermee kunt. Wat er
tussenin gebeurt staat op het scherm van de run zelf en niet hier: een kaart
is een overzicht, en een overzicht dat alles vertelt is er geen. */
.dw-runs { list-style:none; margin:0; padding:0; display:flex;
flex-direction:column; gap:8px; }
.dw-run { padding:13px 14px; border-radius:14px; border:1px solid var(--line-soft);
background:var(--charcoal-50); }
.dw-run.settled { opacity:.6; }
.dw-runtop { display:flex; align-items:center; gap:11px; }
.dw-runtop .do-who { min-width:0; }
.dw-runtop .grow { flex:1; }
.dw-runtop .dn-status { flex:none; }
.dw-inline { display:inline; }
/* De knoppen staan aan de rechterkant en bij elkaar: ze horen bij de run en
niet bij de tekst ernaast, en uit elkaar gezet over de hele regel is elke
knop een losse vondst. `flex-end` zodat ze tegen de rand blijven staan als er
er maar één is. */
.dw-actions { display:flex; align-items:center; justify-content:flex-end;
gap:6px; flex:none; }
.dw-actions form { margin:0; }
/* De naam is de weg naar de run zelf. Onderstreept pas bij aanwijzen: een regel
vol strepen leest als een lijst links en niet als een lijst runs. */
.dw-runname { color:inherit; text-decoration:none; }
.dw-runname:hover { text-decoration:underline; }
/* De runs van één bestand, onder de rij van dat bestand. Een `` zonder rij-
opmaak: hij draagt de lijst en is zelf niets. De rand die `.do-row + .do-row`
tussen twee bestanden zet hoort hier niet -- die scheidt bestanden, en dit
hoort nog bij het bestand erboven. */
.do-rowruns { padding:0 0 10px 34px; }
.do-rowruns + .do-row { border-top:1px solid var(--line-soft); }
/* Ingesprongen staat er al; het streepje ervoor zegt waar het bij hoort. De
inspringing alleen is te stil zodra er twee bestanden onder elkaar staan --
de lijn maakt van "eronder" een "hieraan vast". */
.dw-run.fromfile { position:relative; }
.dw-run.fromfile::before { content:""; position:absolute; left:-12px; top:22px;
width:8px; height:1px; background:var(--line); }
/* Er gebeurt iets. Een draaier en geen balk met een percentage: de stappen zijn
niet even lang -- uitschrijven duurt minuten en wegschrijven een seconde --
dus een balk die op 50% staat belooft een halvering die niet bestaat. Dit
zegt alleen "er wordt gewerkt", en dat is wat er te weten valt.
Het is de `.indicator` die hierboven al staat: dezelfde maat, dezelfde rand,
dezelfde `spin`. Die hoort bij htmx en is onzichtbaar buiten een lopend
verzoek, en dit draait op een heel andere voorwaarde -- vandaar `.working`,
dat hem gewoon laat zien. Een tweede draaier met eigen keyframes ernaast is
twee dingen die hetzelfde horen te betekenen. */
.indicator.working { opacity:1; }
.dw-working { flex:none; align-items:center; gap:7px; white-space:nowrap; }
/* Wie beweging uitzet krijgt een ring die stilstaat maar wel opvalt: het punt
is dat er iets loopt, niet dat het ronddraait. */
@media (prefers-reduced-motion: reduce) {
.indicator { animation:none; border-color:var(--acc); opacity:.55; }
.indicator.working { opacity:.55; }
}
/* ---- de betrokkene boven een sectie ---------------------------------------
Een sectie die voor een betrokkene staat vraagt eerst wie dat is. Eén strook
onder de naam van de sectie: gekoppeld staat er wie het is, met de knoppen
die het overnemen of losmaken; niet gekoppeld staat er een zoekveld.
De kaart met een sectiemenu is een raster, dus de strook moet zeggen dat ze
de hele breedte neemt — anders belandt ze in de kolom van het menu. En dan
schuiven het menu en de panelen een rij op; met `grid-row` op naam, want
`auto` zou ze niet dezelfde rij laten delen. */
.betrokkene {
display:flex; flex-wrap:wrap; align-items:center; gap:8px;
margin:0 0 16px; padding:10px 12px;
border:1px solid var(--line-soft); border-radius:10px;
background:var(--surface-soft, rgba(0,0,0,.02));
}
.betrokkene > .grow { flex:1; }
.betrokkene .bt-vraag { font-size:12.5px; color:var(--muted); }
.betrokkene .bt-who { font-size:13px; }
.betrokkene .bt-who strong { font-weight:650; }
/* De naam als weg naar het record zelf. Onderstreept pas bij aanwijzen: in een
strook vol knoppen is een altijd onderstreepte naam het derde ding dat om
aandacht vraagt, en het is er het minst dringende van. */
.betrokkene .bt-naar { font-size:13px; font-weight:650; color:var(--ink);
text-decoration:none; }
.betrokkene .bt-naar:hover { color:var(--acc); text-decoration:underline; }
/* Een `hidden` invoerveld blijft in de opmaak staan zolang iets anders het
weer op `display` zet; `[hidden]` verliest van een klasse die display zegt,
en dit vak krijgt er een van `.bt-zoek`. */
.betrokkene .bt-zoek[hidden] { display:none; }
.betrokkene .bt-zoek {
flex:0 1 260px; min-width:160px; padding:6px 10px; font:inherit; font-size:13px;
border:1px solid var(--line); border-radius:8px; background:var(--surface);
color:inherit;
}
/* De treffers nemen de hele breedte onder de strook: een lijst naast een
zoekveld van 260 pixels knijpt de namen af, en een naam die je niet kunt
lezen is geen treffer. */
.betrokkene .bt-treffers { flex:1 0 100%; display:flex; flex-direction:column; gap:2px; }
/* Het opzoeken staat in een dialoog: het zoekveld hoort bij de handeling en
niet bij de kaart, en zeven betrokkenen op één formulier waren zeven
zoekvelden die er niets deden. Dezelfde `.dn-dialog` als elders. */
.bt-dialoog { min-width:min(460px, 92vw); }
.bt-dialoog .bt-zoek { width:100%; box-sizing:border-box; margin:0 0 10px; }
.bt-dialoog .bt-treffers { display:flex; flex-direction:column; gap:2px;
max-height:min(50vh, 340px); overflow-y:auto; }
.betrokkene .bt-treffer {
display:flex; align-items:baseline; gap:8px; width:100%;
padding:6px 8px; border:0; border-radius:8px; background:transparent;
font:inherit; font-size:13px; color:inherit; text-align:left; cursor:pointer;
}
.betrokkene .bt-treffer:hover { background:var(--acc-tint); }
.betrokkene .bt-treffer em { font-style:normal; font-size:11.5px; color:var(--muted); }
.betrokkene .bt-leeg { font-size:12.5px; color:var(--muted-soft); padding:6px 8px; }
|