/* ==========================================================================
   DeNotaris shell, applied across the app.

   Ported from the design project's lib/denotaris-system.jsx and
   lib/screen-home.jsx. The colour tokens already live in docdigi.css and are
   identical to the design's `dn` palette, so this file adds structure only.

   Density note: the design canvas is drawn at presentation scale (44px page
   titles, 24px card padding, 40px avatars). Everything here is tightened to the
   dossier form's working scale instead — 14px body, 12-13px controls, ~22px
   card radius — so a screen full of data stays readable without scrolling.
   ========================================================================== */

/* ---- shell ---- */
.dn-shell { display:flex; min-height:100vh; background:var(--cream); }

/* De balk blijft staan waar hij staat. Zonder de eigen hoogte rekt hij als
   flex-kind mee met het hele document, en dan duwt .grow het accountrondje naar
   de onderkant van een lijst van duizend dossiers in plaats van naar de
   onderkant van het scherm. overflow-y vangt het geval op dat er ooit meer
   pictogrammen zijn dan er passen. */
/* Geen rand rechts. De rail staat op de room ernaast en niet op een lijn: de
   kaarten in het werkvlak hebben hun eigen rand, en een streep erbij is een
   scheiding die twee keer gezegd wordt. */
.dn-rail { width:70px; flex-shrink:0; padding:18px 14px; display:flex; flex-direction:column;
  align-items:center; gap:9px;
  position:sticky; top:0; height:100vh; overflow-y:auto; }
.dn-rail a { width:38px; height:38px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; text-decoration:none; color:var(--ink); transition:background .12s; }
.dn-rail a:hover { background:var(--cream-soft); }
.dn-rail a.active { background:var(--ink); color:var(--surface); }
.dn-rail svg { width:19px; height:19px; }
.dn-rail .grow { flex:1; }
.dn-rail .dn-me { width:37px; height:37px; border-radius:50%; background:var(--ink);
  color:var(--surface); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12.5px; letter-spacing:.02em; }

.dn-main { flex:1; min-width:0; display:flex; flex-direction:column; }

/* ---- topbar ---- */
/* En geen rand onder. Wat de kop van de inhoud scheidt is de kop zelf: hij is
   sticky met een doorschijnende achtergrond, dus wat eronder doorschuift blijft
   zichtbaar als kleur in plaats van als streep. */
/* De kop heeft dezelfde kleur als de pagina, en haalt hem uit hetzelfde teken.
   Hier stond `rgba(250,248,245,.92)`, een kleur van vóór de charcoal-ramp:
   `--cream` is `#F6F3F3` en dit was `#FAF8F5`, dus de kop stond als een lichtere
   balk op de pagina en allebei zijn randen lazen als een streep. Daar hielp geen
   rand weghalen aan -- de streep wás het kleurverschil. Doorschijnend blijft hij,
   want wat eronder doorschuift hoort als kleur mee te bewegen. */
/* `border-bottom:0` en niet "de rand weggelaten": de kop is een <header>, en
   docdigi.css geeft *elke* <header> een rand onder. Die regel staat er voor de
   bouwerschermen, dus hem daar weghalen verandert schermen die hier niets mee te
   maken hebben -- en hem hier alleen niet zetten doet niets, want dan wint het
   element nog steeds. Dit is de plek waar deze kop over die regel heen gaat. */
.dn-topbar { display:flex; align-items:center; gap:11px; padding:14px 24px;
  background:color-mix(in srgb, var(--cream) 92%, transparent);
  border-bottom:0;
  backdrop-filter:saturate(140%) blur(8px); position:sticky; top:0; z-index:5; }
.dn-topbar .grow { flex:1; }
.dn-wordmark { font-weight:800; font-size:17px; color:var(--ink); letter-spacing:-.01em;
  text-decoration:none; white-space:nowrap; }
.dn-wordmark .dot { color:var(--acc); font-weight:900; }
.dn-search { flex:1; background:var(--surface); border:1px solid var(--line); border-radius:999px;
  height:40px; display:flex; align-items:center; padding:0 5px 0 16px; gap:9px; min-width:0; }
.dn-search:focus-within { border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-tint); }
.dn-search svg { width:16px; height:16px; color:var(--muted-soft); flex-shrink:0; }
.dn-search input { flex:1; border:0; outline:none; background:transparent; font:inherit;
  font-size:13.5px; color:var(--ink); min-width:0; }
.dn-search input::placeholder { color:var(--muted-soft); }
.dn-searchgo { width:31px; height:31px; border-radius:50%; background:var(--ink); border:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.dn-searchgo svg { width:16px; height:16px; color:var(--surface); }

/* ---- page header (compact, replaces the design's tall greeting block) ---- */
/* Full width on every page: the title sits against the left edge and the page
   actions against the right, regardless of how the content column is laid out. */
/* De paginakop, voor elke pagina dezelfde: kruimelpad boven, labels, de titel
   groot, de regel eronder, en de acties rechtsboven. Eén raster met twee
   kolommen, zodat een lange titel de volle breedte houdt in plaats van achter
   de knoppen door te lopen. Dit was de kop van het dossierdashboard. */
/* De zijmarge zit op de binnenkant, net als bij .dn-body: zo begint de titel op
   dezelfde pixel als de inhoud eronder. Met de marge op de buitenkant stond de
   kop vierentwintig pixels naar links. */
.dn-pagehead { padding:18px 0 20px; border-bottom:1px solid var(--line-soft); }
.dn-pagehead-inner { display:grid; grid-template-columns:minmax(0, 1fr) auto;
  align-items:start; gap:6px 18px; width:100%; max-width:1240px;
  padding-inline:24px; margin-inline:auto; }
.dn-pagehead .grow { flex:1; }

/* Het kruimelpad loopt over de volle breedte, boven titel en knoppen. */
.dn-crumbs { grid-column:1 / -1; display:flex; align-items:center; gap:8px;
  flex-wrap:wrap; font-size:12.5px; color:var(--muted); font-weight:500;
  margin:0 0 10px; }
.dn-crumbs a { color:var(--muted); text-decoration:none; display:inline-flex;
  align-items:center; gap:5px; }
.dn-crumbs a:hover { color:var(--ink); }
.dn-crumbs svg { width:13px; height:13px; }
.dn-crumbs [aria-current] { color:var(--ink); font-weight:600; }

.dn-pagetitle { grid-column:1; display:flex; flex-direction:column;
  align-items:flex-start; min-width:0; }
.dn-pagetitle h1 { font-size:34px; font-weight:800; letter-spacing:-.02em;
  color:var(--ink2); line-height:1.12; margin:0; overflow-wrap:anywhere; }
.dn-pageactions { grid-column:2; grid-row:2; display:flex; align-items:center;
  gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.dn-pagemeta { font-size:13px; color:var(--muted); font-weight:500;
  margin:8px 0 0; display:flex; flex-wrap:wrap; }
.dn-pagemeta strong { color:var(--ink); font-weight:600; }
.dn-pagemeta > * + *::before { content:"•"; margin:0 9px; color:var(--charcoal-200); }

/* Labels boven de titel, zoals het soort dossier en zijn nummer. */
.dn-pagetags { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0 0 10px; }

@media (max-width:700px) {
  .dn-pagehead-inner { grid-template-columns:minmax(0, 1fr); }
  .dn-pageactions { grid-column:1; grid-row:auto; justify-content:flex-start;
    margin-top:12px; }
}

.dn-pagehead label { color:var(--muted); font-size:12.5px; font-weight:600; display:flex;
  gap:6px; align-items:center; cursor:pointer; white-space:nowrap; }
.dn-pagehead #status { font-size:12.5px; color:var(--muted); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* One centred column on every page, with the page header lined up above it, so
   the content sits in the same place wherever you are. */
.dn-body { padding:18px 24px 36px; max-width:1240px; width:100%; margin-inline:auto; }
.dn-body.narrow { max-width:820px; }
/* Wide enough that the builder's canvas is the width the form really is. */
.dn-body.wide { max-width:1640px; }

/* ---- buttons ----
   Vier niveaus uit het buttonvoorstel, en de bestaande namen erop:

     1 primair      donker, gevuld. Eén per pagina of sectie.
     2 secundair    wit, met rand. Naast de primaire knop.
     3 tertiair     geen rand, gedempte kleur. Navigatie en minder urgente links.
     4 destructief  rood, met rand. Alleen onomkeerbaar, nooit naast een primaire.

   `.primary` is niveau 1, `.ghost` niveau 2, `.quiet` niveau 3 en `.danger`
   niveau 4. `.accent` bestaat nog omdat de merkkleur ergens moet kunnen: het is
   een primaire knop in de huisstijl in plaats van in charcoal. */
.dn-btn { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:999px;
  border:0; font-family:inherit; font-weight:600; font-size:13px; letter-spacing:.01em;
  cursor:pointer; text-decoration:none; white-space:nowrap; }
.dn-btn svg { width:15px; height:15px; }
.dn-btn.primary { background:var(--ink); color:var(--surface); }
.dn-btn.primary:hover { background:var(--ink2); }
.dn-btn.accent { background:var(--acc); color:#fff; }
.dn-btn.accent:hover { background:var(--acc-soft); }
.dn-btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); }
.dn-btn.ghost:hover { border-color:var(--muted-soft); background:var(--cream-soft); }
.dn-btn.ghostdark { background:transparent; color:var(--surface); border:1px solid rgba(255,255,255,.25); }

/* Niveau 2 is wit met rand, niet doorzichtig: naast een primaire knop op een
   gekleurd vlak moet hij zijn eigen vorm houden. */
.dn-btn.ghost { background:var(--surface); }

/* Niveau 3: geen rand, gedempt. Leest als een link, niet als een knop. */
.dn-btn.quiet { background:transparent; color:var(--muted); border:0; }
.dn-btn.quiet:hover { color:var(--ink); background:var(--cream-soft); }

/* Niveau 4: rood met rand. Gevuld rood is voor de bevestiging zelf, zodat de
   knop die het echt doet er anders uitziet dan de knop die ernaartoe leidt. */
.dn-btn.danger { background:var(--surface); color:var(--notaris-700); border:1px solid var(--notaris-700); }
.dn-btn.danger:hover { background:var(--notaris-50); }
.dn-btn.danger.filled { background:var(--notaris-700); color:#fff; border-color:var(--notaris-700); }
.dn-btn.danger.filled:hover { background:var(--notaris-800); border-color:var(--notaris-800); }

.dn-btn.sm { padding:6px 13px; font-size:12px; }
.dn-btn[disabled] { opacity:.45; cursor:not-allowed; }

/* ---- cards ---- */
.dn-grid { display:grid; grid-template-columns:1.55fr 1fr; gap:16px; align-items:start; }
@media (max-width:1040px) { .dn-grid { grid-template-columns:1fr; } }
.dn-col { display:flex; flex-direction:column; gap:16px; }

/* Het partijenscherm. Breed en niet zo breed als het scherm: het zijn regels
   van twee dingen naast elkaar, en een dialoog die tot de rand loopt is een
   pagina die zich voordoet als iets anders. */
.dn-dialog.wide { max-width:min(760px, calc(100vw - 48px)); width:100%; }
.pt-rows { list-style:none; margin:14px 0 0; padding:0; display:flex;
  flex-direction:column; gap:6px; max-height:60vh; overflow-y:auto; }
.pt-row { display:grid; grid-template-columns:200px 1fr; gap:14px;
  align-items:center; padding:8px 10px; border-radius:12px; }
.pt-row:hover { background:var(--charcoal-50); }
.pt-role strong { font-size:13.5px; font-weight:600; color:var(--ink2); }
.pt-who { position:relative; min-width:0; }

/* Wie erin zit: een naam met een kruisje, en verder niets. Wat er over die
   persoon bekend is staat bij Betrokkenen -- dat is wat koppelen betekent, en
   het hier herhalen maakt van deze regel een formulier. */
.pt-chip { display:inline-flex; align-items:center; gap:7px; max-width:100%;
  padding:5px 6px 5px 10px; border-radius:999px; background:var(--surface);
  border:1px solid var(--line); font-size:13px; font-weight:600;
  color:var(--ink2); }
.pt-chip .do-rowico { width:15px; height:15px; flex:none; color:var(--muted-soft); }
.pt-chip .js-ptname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt-x { border:0; background:none; cursor:pointer; padding:0 2px; line-height:1;
  font-size:16px; color:var(--muted); }
.pt-x:hover { color:var(--notaris-700); }
/* De twee gezichten van één regel: een naam, of een zoekveld. Nooit allebei. */
.pt-chip.pt-empty { display:none; }
.pt-chip.pt-empty ~ .pt-find { display:block; }
.pt-find { display:none; }

.pt-find input { width:100%; padding:7px 12px; border:1px solid var(--line);
  border-radius:999px; font:inherit; font-size:13px; background:var(--surface);
  color:var(--ink); }
.pt-find input:focus { outline:none; border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-tint); }

/* De treffers hangen over de regel eronder heen: de lijst hoort bij dit
   zoekveld en mag de andere rollen niet omlaag duwen terwijl je typt. */
.pt-hits { position:absolute; z-index:3; left:0; right:0; top:100%; margin:4px 0 0;
  padding:4px; list-style:none; max-height:210px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.12); }
.pt-hits li { padding:7px 10px; border-radius:8px; font-size:13px; }
.pt-hits .js-pthit { cursor:pointer; }
.pt-hits .js-pthit:hover { background:var(--charcoal-50); }
.pt-hits .pt-none { color:var(--muted); }

@media (max-width:820px) { .pt-row { grid-template-columns:1fr; } }
.dn-card { background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:18px 20px; box-shadow:0 1px 2px rgba(45,38,39,.03); }
.dn-card.flush { padding:0; }
.dn-card.dark { background:var(--ink); color:var(--surface); border-color:var(--ink); padding:20px 22px; }

.dn-head { display:flex; align-items:center; gap:10px; margin-bottom:13px; }
.dn-card.flush .dn-head { margin:0; padding:17px 20px 11px; }
.dn-head .badge { width:32px; height:32px; border-radius:50%; background:var(--ink);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dn-head .badge svg { width:17px; height:17px; color:var(--surface); }
.dn-head .badge.accent { background:var(--acc); }
.dn-head h2 { font-weight:700; font-size:16px; letter-spacing:-.01em; margin:0; color:inherit; }
.dn-head .grow { flex:1; }
.dn-head .more { font-size:12px; color:var(--muted); font-weight:600; text-decoration:none;
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.dn-head .more:hover { color:var(--acc); }
.dn-head .more svg { width:14px; height:14px; }

/* ---- dossier rows ---- */
.dn-row { display:grid; grid-template-columns:36px 1fr auto auto; align-items:center; gap:13px;
  padding:11px 20px; border-top:1px solid var(--line-soft); text-decoration:none; color:inherit; }
.dn-row:hover { background:var(--cream-soft); }
.dn-avatar { width:34px; height:34px; border-radius:50%; background:var(--ink); color:var(--surface);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px;
  flex-shrink:0; }
.dn-avatar.alt { background:#42393A; }
.dn-rowmain { min-width:0; }
.dn-rowtitle { display:flex; align-items:baseline; gap:6px; }
.dn-rowtitle .name { font-weight:700; font-size:14px; color:var(--ink); }
.dn-rowtitle .sep { color:var(--muted-soft); font-size:11px; }
.dn-rowtitle .kind { font-weight:400; font-size:13px; color:var(--muted); }
.dn-rowmeta { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted);
  font-weight:500; margin-top:1px; }
.dn-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--muted-soft); }
.dn-dot.ok { background:var(--sage); }
.dn-dot.warning { background:#B45309; }
.dn-dot.overdue { background:var(--acc-soft); }
.dn-when { font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px;
  white-space:nowrap; background:var(--line-soft); color:var(--muted); }
.dn-when.ok { background:var(--sage-tint); color:var(--sage); }
.dn-when.warning { background:#FDF3E7; color:#B45309; }
.dn-when.overdue { background:var(--acc-tint); color:var(--acc-soft); }
.dn-row .chev { width:16px; height:16px; color:var(--muted-soft); }

/* Wie het dossier aanmaakte, met de datum eronder: twee dingen over dezelfde
   handeling, dus één blok. Rechts uitgelijnd, zodat de kolom leest als kolom
   ook al is de rij geen tabel meer. */
.dn-rowwho { display:flex; flex-direction:column; align-items:flex-end; gap:1px;
  text-align:right; white-space:nowrap; }
.dn-rowwho .who { font-size:12.5px; font-weight:600; color:var(--ink2); }
.dn-rowwho .when { font-size:11.5px; color:var(--muted-soft); }
/* De titel is een link maar leest als de kop van de rij, niet als een link. */
.dn-rowtitle a.name { text-decoration:none; }
.dn-rowtitle a.name:hover { text-decoration:underline; }

/* ---- quick actions ---- */
.dn-label { font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:.07em;
  text-transform:uppercase; margin-bottom:12px; }
.dn-quick { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dn-tile { display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:14px;
  border:1px solid var(--line); background:transparent; font:inherit; text-align:left;
  cursor:pointer; text-decoration:none; color:var(--ink); }
.dn-tile:hover { border-color:var(--acc); background:var(--cream-soft); }
.dn-tile .ico { width:25px; height:25px; border-radius:50%; background:var(--acc-tint);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dn-tile .ico svg { width:13px; height:13px; color:var(--ink); }
.dn-tile .lbl { font-size:12.5px; font-weight:600; }

/* ---- dark focus card ---- */
.dn-card.dark .eyebrow { font-size:11px; font-weight:700; color:#FFB199; letter-spacing:.07em;
  text-transform:uppercase; }
.dn-card.dark h3 { font-size:20px; font-weight:800; letter-spacing:-.01em; margin:6px 0 0;
  line-height:1.3; }
.dn-card.dark p { font-size:12.5px; color:rgba(255,255,255,.72); line-height:1.52; margin:12px 0 15px; }

.dn-empty { padding:34px 20px; text-align:center; color:var(--muted); font-size:13px; }

/* ---- new-dossier form ---- */
.dn-newform { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.dn-newform select { flex:1; min-width:170px; padding:8px 14px; border:1px solid var(--line);
  border-radius:999px; font:inherit; font-size:13px; background:var(--surface); color:var(--ink); }
.dn-newform select:focus { outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-tint); }

/* ---- sign-in ---- */
.dn-card.signin { max-width:420px; margin:56px auto; text-align:center; padding:28px; }
.dn-card.signin h2 { font-size:16px; font-weight:700; color:var(--ink2); margin:0 0 6px; }
.dn-card.signin p { color:var(--muted); font-size:13.5px; margin:0 0 16px; }

/* ---- the dossier form's own canvas, hosted inside the shell ----
   .layout carries its own page padding and centring from docdigi.css, which
   would double up on .dn-body. Neutralise it here rather than in docdigi.css,
   so the form still stands alone if it is ever rendered outside the shell. */
.dn-body > .layout { padding:0; margin:0; max-width:none; gap:18px; }
/* En de breedte van het menu, **hier**: dit is de regel die geldt zodra het
   formulier in de shell staat, en dat is overal waar het staat. Een breedte in
   docdigi.css alleen verandert er niets aan, hoe overtuigend die er ook uitziet
   — daar staat het getal voor het formulier dat op zichzelf wordt getekend, en
   die twee horen hetzelfde te zijn. De namen zijn langer geworden sinds een
   plek naar een veld genoemd kan worden: "Kramer Holding B.V." en niet
   "Bedrijf 1". */
.dn-body > .layout .sidenav { top:62px; width:260px; }

/* Keep the entity menu beside the form.
   docdigi.css stacks .layout into a column below 820px of *viewport* width, but
   inside the shell the rail already takes 60px of that, so the menu was jumping
   above the form on ordinary laptop widths. Hold the two-column layout down to
   a genuinely narrow window, and only then fall back to the stacked row. */
@media (min-width:700px) {
  .dn-body > .layout { flex-direction:row; }
  .dn-body > .layout .sidenav { position:sticky; width:260px; flex-direction:column;
    flex-wrap:nowrap; top:62px; }
}

/* the document editor column */
.dn-doc { display:flex; flex-direction:column; gap:12px; }

/* ---- dossier table, tightened to the form's scale ---- */
.dn-card .toolbar { margin-bottom:2px; }
.dn-card .search input { padding:8px 13px 8px 34px; font-size:13px; }
.dn-card .search svg { left:11px; width:14px; height:14px; }
.dn-card .pager { padding-top:12px; }

/* ---- account ------------------------------------------------------------- */
/* One column of labelled fields. The account page is a form, not a table, so
   the label sits above its input the way a form reads. */
.dn-form { display:grid; gap:12px; justify-items:start; }
.dn-form.row { grid-auto-flow:column; grid-auto-columns:max-content; align-items:center; }
.dn-field { display:grid; gap:4px; width:100%; max-width:420px; }
.dn-field.narrow { max-width:160px; }
.dn-field > label { color:var(--muted); font-size:12px; font-weight:600; }
/* `email` staat erbij omdat Django's PasswordResetForm een EmailInput rendert:
   zonder deze selector was dat het enige invoerveld in de hele interface zonder
   rand — het paar uit CLAUDE.md, waar de klasse in de markup staat en de regel
   hier. */
.dn-field input[type=text], .dn-field input[type=password],
.dn-field input[type=email], .dn-field select {
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:10px;
  font:inherit; font-size:13px; background:var(--surface); color:var(--ink); }
.dn-field input:focus, .dn-field select:focus { outline:none; border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-tint); }
.dn-field .hint, .dn-form .helptext { color:var(--muted-soft); font-size:11px; line-height:1.4; }
.dn-field ul { margin:0; padding-left:16px; color:var(--muted-soft); font-size:11px; }

/* Het oogje in het wachtwoordvak. De klassen worden door password-eye.js
   geschreven en hier opgemaakt -- het paar uit CLAUDE.md. De knop staat bínnen
   de rand, dus het vak houdt rechts ruimte vrij; zonder die ruimte loopt een
   lang wachtwoord onder het icoon door. Bij het tonen wordt het veld een
   `text`, wat de selectors hierboven al dekken, zodat de rand niet verspringt. */
.dn-pw { position:relative; display:block; width:100%; }
.dn-pw > input { padding-right:38px; }
.dn-pw-eye { position:absolute; top:1px; right:1px; bottom:1px; width:34px;
  display:grid; place-items:center; padding:0; border:0; border-radius:0 9px 9px 0;
  background:none; color:var(--muted); cursor:pointer; }
.dn-pw-eye:hover { color:var(--ink); }
.dn-pw-eye svg { width:16px; height:16px; }
.dn-pw-eye:focus-visible { outline:2px solid var(--acc); outline-offset:-2px; }

.dn-note { color:var(--muted); font-size:12.5px; margin:0 0 10px; max-width:60ch; }

/* The accent choice shows the colour it sets, because a name for a colour is
   worth less than the colour. */
.dn-swatches { display:flex; gap:10px; flex-wrap:wrap; }
.dn-swatch { display:grid; justify-items:center; gap:4px; cursor:pointer; }
.dn-swatch input { position:absolute; opacity:0; pointer-events:none; }
.dn-swatch > span { width:26px; height:26px; border-radius:50%; background:var(--swatch);
  border:2px solid transparent; box-shadow:0 0 0 1px var(--line); }
.dn-swatch > em { font-style:normal; font-size:11px; color:var(--muted); }
.dn-swatch.chosen > span, .dn-swatch input:focus-visible + span {
  border-color:var(--surface); box-shadow:0 0 0 2px var(--swatch); }
.dn-swatch.chosen > em { color:var(--ink); font-weight:600; }

.dn-flash { border-left:3px solid var(--muted-soft); font-size:13px;
  display:flex; align-items:flex-start; gap:12px; }
.dn-flash > span { flex:1; }
.dn-flash.success { border-left-color:var(--sage); }
.dn-flash.error { border-left-color:var(--notaris-700); }
.dn-flash-close { flex:none; margin:-2px -4px 0 0; padding:0 4px; border:0;
  background:none; cursor:pointer; font-size:18px; line-height:1;
  color:var(--muted); }
.dn-flash-close:hover { color:var(--ink); }
.dn-flash-close:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }

/* ---- sign in ------------------------------------------------------------- */
/* Geen rail en geen kop (login.html laat die blokken leeg), dus .dn-main is de
   hele pagina. .dn-shell staat al op min-height:100vh en .dn-main is al een
   kolom-flexbox, dus centreren is hier een kwestie van die twee assen zetten:
   justify-content voor verticaal, align-items voor horizontaal. Vandaar dat de
   kaart zelf geen `margin:8vh auto 0` meer nodig heeft — dat zette hem bijna
   in het midden en op een korte viewport te laag.

   De modifier heet `bare` en niet `signin`, want `.signin` bestaat al: een los
   klassenaam in docdigi.css (`max-width:420px; margin:64px auto;
   text-align:center`) van een oudere inlogpagina. `class="dn-shell signin"`
   pakte die mee, en dan is de shell 420px breed met 64px marge bovenaan — de
   kaart staat dan precies een halve marge te laag en niets zegt waarom. Een
   klassenaam is een gedeelde ruimte, ook als je hem met een basisklasse
   bedoelt te scopen. */
.dn-shell.bare .dn-main { justify-content:center; align-items:center; }
.dn-shell.bare .dn-body { display:grid; justify-items:center; gap:16px;
    max-width:380px; padding:24px; }

.dn-signin-brand { font-size:27px; font-weight:800; color:var(--ink);
    letter-spacing:-.02em; line-height:1; }
.dn-signin-brand .dot { color:var(--acc); font-weight:900; }

.dn-signin { max-width:380px; width:100%; margin:0; }
.dn-signin h2 { margin:0 0 14px; font-size:19px; font-weight:800; color:var(--ink2); }
.dn-signin .dn-field { max-width:none; }
.dn-signin .dn-btn { width:100%; justify-content:center; }
.dn-signin-error { color:var(--acc); font-size:12.5px; margin:0 0 12px; }
/* De weg naar het wachtwoordscherm en terug. Stil, want het is de uitweg en
   niet de handeling: de knop eronder is de primaire. */
.dn-signin-aside { margin:14px 0 0; font-size:12.5px; }
.dn-signin-aside a { color:var(--muted); text-decoration:none; }
.dn-signin-aside a:hover { color:var(--acc); text-decoration:underline; }
.dn-signin .dn-btn.ghost { width:100%; justify-content:center; }
.dn-signin .dn-note { margin:0 0 14px; }

/* Rijknoppen en de dialogen op de dossierlijst. */
.dn-card > .pager { padding:12px 4px 2px; }
.rowbtn { display:inline-flex; align-items:center; justify-content:center; width:28px;
  height:28px; padding:0; border:1px solid transparent; border-radius:8px;
  background:transparent; color:var(--muted); cursor:pointer; }
.rowbtn:hover { border-color:var(--line); background:var(--cream-soft); color:var(--ink); }
.rowbtn svg { width:16px; height:16px; }
/* De knoppen van één versie, op de regel van de versie zelf (templatedetail).
   `display:contents` op het formulier eromheen, zodat de knop erin gewoon
   meedoet in deze rij in plaats van eronder te gaan staan — een <form> is een
   blok, en dat was precies waarom deze drie onder elkaar stonden. */
.fm-acties { display:flex; align-items:center; gap:4px; }
.fm-acties form { display:contents; }
/* Activeren is de nadruk van zo'n rij. De accentkleur zit op de handeling en
   niet op een status, wat CLAUDE.md over kleur met betekenis zegt. */
.rowbtn.accent { color:var(--acc); }
.rowbtn.accent:hover { border-color:var(--acc); background:var(--acc-tint); color:var(--acc); }

.dn-dialog { border:1px solid var(--line); border-radius:18px; padding:22px 24px;
  min-width:340px; max-width:min(440px, 92vw); background:var(--surface); color:var(--ink); }
/* Eén rij van een tabel invullen gebeurt op de breedte van het formulier zelf
   (`--form-column`), en niet op die van een gewone dialoog. De velden erin
   liggen op hetzelfde raster van twaalf kolommen als op het scherm eronder, dus
   een smaller venster hertekent die indeling: een veld van vier kolommen wordt
   een veld van twaalf, en wat de bouwer naast elkaar heeft gezet staat onder
   elkaar. Dezelfde maat die de canvas van de bouwer neemt, om dezelfde reden. */
.dn-dialog.rowedit { max-width:min(var(--form-column), calc(100vw - 48px));
  width:min(var(--form-column), calc(100vw - 48px)); }
.dn-dialog::backdrop { background:rgba(20,18,16,.38); }
.dn-dialog h3 { margin:0 0 14px; font-size:16px; font-weight:700; }
.dn-dialog p { margin:0 0 16px; font-size:13px; line-height:1.55; color:var(--ink2); }
/* Niet in `.rowedit`: daar staat een stuk van het formulier zelf in — de rij
   van een tabel, met haar eigen velden op hetzelfde raster van twaalf kolommen
   (`docdigi-form.rowPanel`). Deze twee regels zijn voor een dialoog met een
   handvol losse vragen erin, en ze zouden dat raster overnemen: het label boven
   in plaats van ernaast, en elk veld over de volle breedte. Uitgezonderd en niet
   overschreven, want een regel die een andere regel terugdraait is twee plekken
   die het over dezelfde opmaak oneens kunnen worden. */
.dn-dialog:not(.rowedit) label { display:block; margin:0 0 12px; font-size:12px;
  font-weight:600; color:var(--muted); }
.dn-dialog:not(.rowedit) input, .dn-dialog:not(.rowedit) select { display:block;
  width:100%; margin-top:5px;
  padding:8px 11px; border:1px solid var(--line); border-radius:10px;
  font:inherit; font-weight:400; color:var(--ink); background:var(--surface); }
/* Een `hidden` in een dialoog moet ook echt verbergen. De twee regels hierboven
   zetten display op label en p, en een auteursregel wint van de browserregel
   voor [hidden] — dus een weggelaten veld bleef gewoon staan. Dat is de reden
   dat het bestandsveld verdwijnt bij een workflow die geen bestand leest. */
.dn-dialog [hidden] { display:none; }
.dn-dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }

/* ---- tags ----
   Drie families uit het voorstel, en ze mogen niet op elkaar lijken:

     .dn-status    pil met stip en tekst. Altijd beide: nooit een losse stip,
                   geen iconen. Niet klikbaar — dit is informatie, geen knop.
     .dn-deadline  rechthoekig, met klokje. De vorm onderscheidt hem van een
                   statustag; de kleur volgt urgentie: groen, oranje, rood.
     .dn-meta      neutraal grijs, Charcoal 100. Puur context, dus geen kleur
                   en geen vorm.

   De statuskleuren zijn opzettelijk vast en niet de accentkleur: "actie
   vereist" moet rood zijn in elk merk, ook in het groene. */
.dn-status { display:inline-flex; align-items:center; gap:6px; padding:3px 10px;
  border-radius:999px; font-size:11.5px; font-weight:600; white-space:nowrap;
  background:var(--charcoal-50); color:var(--charcoal-600); }
.dn-status::before { content:""; width:6px; height:6px; border-radius:50%;
  background:currentColor; flex:none; }
.dn-status.action  { background:#FFF1F1; color:#C50C0B; }
.dn-status.busy    { background:#FFF4E5; color:#9A5B00; }
.dn-status.waiting { background:var(--charcoal-50); color:var(--charcoal-500); }
.dn-status.review  { background:#EDF7FF; color:#0E3980; }
.dn-status.done    { background:#EFFFEE; color:#0A710B; }

/* Rechthoekig, zodat vorm alleen al zegt dat dit over tijd gaat. */
.dn-deadline { display:inline-flex; align-items:center; gap:5px; padding:3px 8px;
  border-radius:5px; font-size:11.5px; font-weight:600; white-space:nowrap;
  background:var(--charcoal-50); color:var(--charcoal-500); }
.dn-deadline svg { width:12px; height:12px; flex:none; }
.dn-deadline.ample { background:#EFFFEE; color:#0A710B; }
.dn-deadline.near  { background:#FFF4E5; color:#9A5B00; }
.dn-deadline.late  { background:#FFF1F1; color:#C50C0B; }

/* Geen achtergrond, geen vorm: context leest mee zonder aandacht te vragen. */
.dn-meta { display:inline-flex; gap:12px; flex-wrap:wrap;
  font-size:11.5px; color:var(--charcoal-500); }
.dn-meta > * { white-space:nowrap; }

/* ---- het dossierdashboard ----
   Eén kolom, links uitgelijnd en smaller dan de pagina: het gaat om één
   dossier, en een kaart die de volle breedte pakt leest als een tabel. */
/* Dezelfde breedte als de rest van de app, zodat het kruimelpad erboven en de
   kaarten eronder op één lijn beginnen. Het ontwerp tekende 1180; die dertig
   pixels verschil wegen niet op tegen een kop die niet uitlijnt. */
.dn-body.overview { max-width:1240px; }


/* De titelregel: tags boven, titel groot, acties rechtsboven op dezelfde hoogte
   als de tags. Grid in plaats van floats, zodat de titel de volle breedte houdt
   en niet achter de knoppen doorloopt. */
.do-head { display:grid; grid-template-columns:1fr auto; align-items:start;
  gap:6px 18px; margin:0 0 22px; }
.do-tags { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.do-actions { display:flex; align-items:center; gap:8px; grid-row:1; grid-column:2; }
.do-head h1 { grid-column:1 / -1; margin:8px 0 0; font-size:34px; font-weight:800;
  letter-spacing:-.02em; color:var(--ink2); line-height:1.12; }
.do-meta { grid-column:1 / -1; margin:8px 0 0; }
.do-meta strong { color:var(--ink); font-weight:600; }
.do-meta > * + *::before { content:"•"; margin:0 9px 0 0; color:var(--charcoal-200); }

.do-kind { display:inline-flex; padding:4px 12px; border-radius:999px;
  background:var(--acc-tint); color:var(--acc-soft); font-size:12px; font-weight:600; }
.do-ref { display:inline-flex; padding:4px 12px; border-radius:999px;
  background:var(--charcoal-100); color:var(--charcoal-500);
  font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }

.do-card { padding:20px 22px; margin:0 0 18px; }
.do-cardhead { display:flex; align-items:center; gap:11px; margin:0 0 16px; }
.do-cardhead h2 { margin:0; font-size:17px; font-weight:700; color:var(--ink2); }
.do-cardhead .grow { flex:1; }
.do-ico { width:32px; height:32px; border-radius:50%; background:var(--ink);
  color:var(--surface); display:inline-flex; align-items:center;
  justify-content:center; flex:none; }
.do-ico svg { width:16px; height:16px; }

.do-avatar { width:36px; height:36px; border-radius:50%; flex:none;
  background:var(--charcoal-600); color:var(--surface); display:inline-flex;
  align-items:center; justify-content:center; font-size:12px; font-weight:700;
  letter-spacing:.02em; }
.do-avatar.accent { background:var(--acc); }
.do-who { display:flex; flex-direction:column; min-width:0; }
.do-who strong { font-size:13.5px; font-weight:600; color:var(--ink2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.do-who em { font-style:normal; font-size:12px; color:var(--muted); }

.do-docs { list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:2px; }
.do-docs a { display:flex; align-items:center; gap:12px; padding:9px 11px;
  border-radius:12px; text-decoration:none; color:inherit; }
.do-docs a:hover { background:var(--charcoal-50); }
.do-docico { width:18px; height:18px; flex:none; color:var(--muted); }
.do-docs .dn-status { margin-left:auto; }

/* ---- dossierdashboard: rijen, menu, notities ---- */
.do-rows { list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; }
.do-row { display:flex; align-items:center; gap:6px; border-radius:10px;
  padding:2px 4px; margin:0 -4px; }
.do-row + .do-row { border-top:1px solid var(--line-soft); }
.do-row:hover { background:var(--charcoal-50); }
.do-rowmain { display:flex; align-items:center; gap:11px; flex:1; min-width:0;
  padding:8px 6px; border-radius:8px; text-decoration:none; color:inherit; }
.do-rowico { width:18px; height:18px; flex:none; color:var(--muted); }

/* De rijknoppen verschijnen bij hover, maar blijven bestaan: wie met het
   toetsenbord werkt moet erbij kunnen, dus focus laat ze ook zien. */
.do-rowbtn { width:30px; height:30px; flex:none; border:0; border-radius:9px;
  background:transparent; color:var(--muted); cursor:pointer; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .12s ease, background .12s ease; }
.do-row:hover .do-rowbtn, .do-rowbtn:focus-visible { opacity:1; }
.do-rowbtn:hover { background:var(--charcoal-100); color:var(--ink); }
.do-rowbtn svg { width:15px; height:15px; }

.do-menu { position:absolute; z-index:30; min-width:180px; padding:6px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 32px -12px rgba(26,20,21,.18), 0 2px 4px rgba(26,20,21,.04); }
.do-menu a, .do-menu button { display:flex; align-items:center; gap:10px;
  width:100%; padding:8px 10px; border:0; border-radius:8px; cursor:pointer;
  background:transparent; font:inherit; font-size:13px; font-weight:500;
  color:var(--ink); text-align:left; text-decoration:none; }
.do-menu a:hover, .do-menu button:hover { background:var(--charcoal-50); }
.do-menu svg { width:15px; height:15px; color:var(--muted); }
/* Verwijderen is rood in elk merk; zie de losse --notaris-tokens. */
.do-menu .danger { color:var(--notaris-700); }
.do-menu .danger svg { color:var(--notaris-700); }
.do-menu .danger:hover { background:var(--notaris-50); }
/* De regel hierboven zet `display:flex` op elke knop in het menu, en een
   auteursregel wint van de browserregel voor [hidden] -- dus "Bekijken" bleef
   staan bij een bestand dat niet te bekijken is. Dezelfde val als in
   `.dn-dialog [hidden]`. */
.do-menu [hidden] { display:none; }

/* Een rij die de kijker opent is een knop waar een link stond. Alles wat de
   browser er zelf van maakt moet eraf, want hij hoort er precies zo uit te
   zien als de link ernaast. */
button.do-rowmain { border:0; background:transparent; font:inherit; color:inherit;
  text-align:left; cursor:pointer; }

/* ---- de kijker ----
   Een pdf op de 440px van een gewone dialoog is geen pdf meer, dus deze neemt
   bijna het hele scherm. `.dn-dialog` geeft rand, achtergrond en backdrop; hier
   staan alleen de maat en de indeling. */
.do-viewer { width:min(1100px, 94vw); max-width:94vw; height:92vh;
  padding:14px 16px 16px; }
/* `display` op `[open]` en niet op de dialoog zelf: de browser verbergt een
   dichte <dialog> met `dialog:not([open]) { display:none }` uit zijn eigen
   stijlblad, en een regel van ons wint daarvan altijd -- de kijker zou dan open
   en wel onder het dossier staan, met een pdf erin, zonder dat iemand hem heeft
   aangeklikt. */
.do-viewer[open] { display:flex; flex-direction:column; gap:10px; }
.do-viewhead { display:flex; align-items:center; gap:8px; }
.do-viewhead strong { font-size:14px; font-weight:700; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.do-viewhead .grow { flex:1; }
/* `min-height:0` omdat een flexitem anders niet kleiner wordt dan zijn inhoud,
   en de inhoud hier een pdf van dertig pagina's is: zonder deze regel groeit de
   dialoog eruit in plaats van dat het vak gaat scrollen. */
.do-viewbody { flex:1; min-height:0; overflow:hidden; border-radius:12px;
  border:1px solid var(--line-soft); background:var(--charcoal-50); }
.do-viewobj { display:block; width:100%; height:100%; border:0; }
.do-viewobj p { margin:0; padding:22px; font-size:13px; line-height:1.55;
  color:var(--ink2); }

.do-notes { display:flex; flex-direction:column; gap:12px; }
.do-noteitem { padding:13px 14px; border-radius:14px;
  background:var(--charcoal-50); border:1px solid var(--line-soft); }
.do-notehead { display:flex; align-items:center; gap:8px; margin:0 0 6px; }
.do-notehead strong { font-size:12px; font-weight:700; color:var(--ink2); }
.do-notehead em { font-style:normal; font-size:12px; color:var(--muted); }
.do-noteitem p { margin:0; font-size:13px; line-height:1.55; color:var(--ink); }

/* Kleine varianten voor de avatars die in een regel meelopen. */
.do-avatar.sm { width:22px; height:22px; font-size:9px; }
.do-avatar.xs { width:18px; height:18px; font-size:8px; }

/* Een bestandsveld is standaard breder dan de dialoog. */
.dn-dialog input[type="file"] { padding:7px 9px; font-size:12.5px; }
.dn-dialog textarea { display:block; width:100%; margin-top:5px; padding:8px 11px;
  border:1px solid var(--line); border-radius:10px; font:inherit;
  font-weight:400; color:var(--ink); background:var(--surface); resize:vertical; }

/* ---- taken op het hoofddashboard ----
   Een notitie met een naam eraan is werk; dit is de lijst daarvan. De hele rij
   is de link, want er valt niets anders te doen dan het dossier openen. */
.dn-tasks { display:flex; flex-direction:column; min-width:0; }

/* De tags staan boven, niet gecentreerd: zodra de tekst meer dan één regel is,
   hoort de status bij het begin ervan en niet halverwege. */
.dn-task { display:flex; align-items:flex-start; gap:12px; padding:10px 8px;
  margin:0 -8px; border-radius:10px; text-decoration:none; color:inherit;
  min-width:0; }
.dn-task + .dn-task { border-top:1px solid var(--line-soft); }
.dn-task:hover { background:var(--charcoal-50); }

/* `min-width:0` op elke schakel van de keten. Een flex-item is standaard
   `min-width:auto` en groeit dan met zijn inhoud mee: één lange notitie maakte
   zo de hele kaart breder dan de kolom. */
.dn-taskbody { display:flex; flex-direction:column; min-width:0; flex:1; }

/* De notitie mag afbreken en doorlopen, tot vijf regels; daarna kapt de browser
   hem af met een puntje. `-webkit-line-clamp` is nog steeds de enige manier die
   overal werkt, `line-clamp` staat erbij voor als dat verandert.
   `overflow-wrap:anywhere` is er voor het geval dat: een plakte URL zonder
   spaties heeft geen afbreekpunt en zou de kaart alsnog openduwen. */
.dn-taskbody strong { font-size:13px; font-weight:600; color:var(--ink2);
  line-height:1.45; display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:5; line-clamp:5; overflow:hidden;
  overflow-wrap:anywhere; }
.dn-taskmeta { font-size:11.5px; color:var(--muted); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* De tags wikkelen mee in plaats van de rij op te rekken. */
.dn-tasktags { display:flex; align-items:center; gap:6px; flex:none;
  flex-wrap:wrap; justify-content:flex-end; max-width:45%; }

/* Een afgeronde notitie blijft staan, maar vraagt geen aandacht meer. */
.do-noteitem.done { opacity:.6; }
.do-notetags { display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin:8px 0 0; }
.do-notehead .grow { flex:1; }
.do-noteitem .do-rowbtn { opacity:0; }
.do-noteitem:hover .do-rowbtn, .do-noteitem .do-rowbtn:focus-visible { opacity:1; }

/* ---- formulier en zijn documenten ----
   Eén versie, meerdere schermen: de strook zegt welk tabblad je bekijkt en wat
   er nog meer bij deze versie hoort. Geen accentkleur — welk tabblad actief is
   is navigatie, geen betekenis. */
.dn-formtabs { display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  margin:0 0 18px; border-bottom:1px solid var(--line-soft); padding-bottom:0; }
.dn-formtab { display:inline-block; padding:8px 14px; font-size:13px; font-weight:600;
  color:var(--muted); text-decoration:none; border-bottom:2px solid transparent;
  margin-bottom:-1px; white-space:nowrap; }
.dn-formtab:hover { color:var(--ink); }
.dn-formtab.active { color:var(--ink); border-bottom-color:var(--ink); }
/* Uit gebruik, maar nog wel te openen: archiveren neemt weg dat er een nieuw
   document op begonnen kan worden, niet dat de tekst er is. De strook is de
   enige lijst die een document heeft, dus blijft het staan — lichter, en met
   "· gearchiveerd" erachter, want een kleurverschil alleen is geen zin. */
.dn-formtab.archived { font-weight:500; font-style:italic; opacity:.65; }
.dn-formtab.archived.active { opacity:1; }
.dn-formtab-add { display:flex; align-items:center; gap:5px; margin-left:6px; }
.dn-formtab-add input { width:150px; padding:5px 11px; font:inherit; font-size:12px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface); }
.dn-formtab-add input:focus { outline:none; border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-tint); }

/* ---- een bundel inlezen -------------------------------------------------
   Twee stappen op één pagina: het bestandsveld, en daarna wat erin zit. De
   kaarten zijn de gewone dn-card; hier staat alleen wat die niet al kan. */
.tf-uitleg { font-size:13px; color:var(--muted); line-height:1.55; margin:0 0 14px; }
.tf-upload { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.tf-upload input[type=file] { flex:1; min-width:240px; font-size:13px; color:var(--muted);
    padding:10px 12px; border:1px dashed var(--line); border-radius:12px; background:var(--surface); }
.tf-apply { display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.tf-veld { display:flex; flex-direction:column; gap:5px; width:100%; max-width:460px; }
.tf-veld > span { font-size:12px; font-weight:700; color:var(--ink); }
.tf-veld small { font-size:11px; color:var(--muted); line-height:1.5; }
.tf-veld .select { width:100%; padding:9px 13px; border:1px solid var(--line);
    border-radius:12px; font-size:13px; font-family:inherit; background:var(--surface); }

/* Een geweigerde bundel is rood en heeft geen knop: de lijst is het antwoord.
   Rood en niet het accent, omdat de kleur hier betekenis heeft. */
.tf-error { border-color:#F3C9C4; background:#FEF6F5; }
.tf-error strong, .tf-error p { color:#8C2F26; }
.tf-error p { font-size:12px; line-height:1.55; margin:7px 0 11px; }
.tf-error ul, .tf-notes ul { margin:0 0 12px; padding-left:19px; font-size:12px;
    line-height:1.7; color:var(--muted); }
.tf-error li { color:#8C2F26; }
.tf-notes { border-color:#F0DFC2; background:#FDF9F1; }
.tf-notes strong { color:#8A6118; }