:root {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  --primary: #ec682a;       /* Multiminded oranje */
  --primary-dark: #cf5925;
  --accent: #1d6fa5;        /* steunkleur (blauw) — voor 'nieuw'/info-accenten */
  --accent-soft: #e7f1f8;
  /* Design-tokens die de framework-modules (custom-select/overlay) verwachten */
  --color-bg: #ffffff;
  --color-bg-elev: #ffffff;      /* dropdown-paneel: solide achtergrond */
  --color-border: #cbd0d6;
  --color-border-strong: #9aa3ad;
  --color-fg: #1a1a1a;
  --color-fg-muted: #6b7280;
  --color-primary: #ec682a;
  --color-primary-fg: #ffffff;
  --form-radius: 6px;
  --radius-sm: 6px;
  --radius-lg: 10px;
  --overlay-backdrop: rgba(0, 0, 0, .4);
  --overlay-sheet-radius: 12px;
  --overlay-sheet-max-h: 80vh;
}
/* custom-select control: compacter dan de framework-default */
.select-display {
  box-sizing: border-box;
  padding: .35rem .6rem;
  font-size: .9rem;
}
/* rij met een smalle dropdown + knop (status/prioriteit), met ruimte ertussen */
.control-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.control-row:last-child { margin-bottom: 0; }
.control-field { flex: 0 0 13rem; max-width: 13rem; }
/* titel-rij met actie rechts */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.page-head__action { flex-shrink: 0; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
/* doc-weergave: punten als blokken */
.doc-block { display: flex; gap: .8rem; align-items: flex-start; }
.doc-block__order { display: flex; flex-direction: column; gap: .3rem; flex-shrink: 0; }
.doc-block__main { flex: 1; min-width: 0; position: relative; }
/* De titelregel draagt links de titel en rechts de kenmerken. Het vinkje en
   archiveren stonden hier absoluut rechtsboven; die zitten nu bij Openen/reageren
   in de voetregel, waar de rest van de handelingen ook staat. */
.doc-block__titlerow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.doc-block__tags { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: #6b7280; }
.doc-block__tags .sep { color: #cbd0d6; }
.doc-block__tags-status { color: #374151; font-weight: 600; }
.doc-block__foot--start { gap: .5rem; align-items: center; }
.doc-block__meta { font-size: .85rem; margin: .1rem 0 .5rem; }
.doc-block__head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; flex-wrap: wrap; margin-bottom: .5rem; }
.doc-block__actions { flex-shrink: 0; display: flex; gap: .4rem; }
.doc-block__foot { display: flex; justify-content: flex-end; margin-top: .5rem; }
.doc-block__body { border-top: 1px solid #eef0f2; padding-top: .5rem; }
/* De lijst beslaat sinds het vervallen van de zijbalk de volle containerbreedte.
   Lopende tekst zou dan ~128 tekens per regel worden; beeld, tabellen en code
   mogen die extra ruimte juist wél gebruiken. */
.doc-block__body > p, .doc-block__body > ul, .doc-block__body > ol,
.doc-block__body > blockquote, .doc-block__body > h1, .doc-block__body > h2,
.doc-block__body > h3, .doc-block__body > h4 { max-width: 72ch; }
.doc-block.doc-selected { outline: 2px solid var(--primary); outline-offset: 2px; }
/* titel-link: hover-achtergrond met ademruimte, negatieve marge houdt de layout stabiel */
.doc-title { border-radius: 5px; text-decoration: none; transition: background .12s; }
.doc-title:hover { background: var(--accent-soft); padding: .12rem .4rem; margin: 0 -.4rem; text-decoration: none; }
.btn-icon { padding: .15rem .45rem; line-height: 1; font-size: 1rem; }
button[disabled], .btn-primary[disabled], .btn-secondary[disabled], .btn-neutral[disabled], .btn-danger[disabled] { opacity: .4; cursor: not-allowed; }
body { margin: 0; color: #1a1a1a; background: #f6f7f9; }
/* Ingelogd is de pagina zelf precies zo hoog als het venster; het scrollen gebeurt
   binnen de contentkolom. `dvh` en niet `vh`, want op mobiel verandert de zichtbare
   hoogte met de adresbalk mee en zou `vh` de onderkant afknippen. */
body.has-shell { height: 100dvh; overflow: hidden; }
/* Zonder shell (login, wachtwoord instellen) is er geen grid dat de voetregel
   onderaan houdt. Een kolom met een groeiende `main` doet dat wel, zonder dat de
   voetregel weer over de inhoud hoeft te hangen. */
body:not(.has-shell) { min-height: 100dvh; display: flex; flex-direction: column; }
/* `width: 100%` is hier geen ruis: `.container` heeft `margin: 2rem auto`, en een
   auto-marge op de dwarsas van een flexbox zet `stretch` uit. Zonder een eigen
   breedte kromp de login-kaart daardoor naar z'n tekstbreedte (290px i.p.v. 1040).
   Met een vaste breedte klemt `max-width` weer en centreren de auto-marges de rest.
   `border-box` erbij omdat de app geen globale border-box heeft en de 1rem padding
   er anders bovenop komt. */
body:not(.has-shell) > main { flex: 1; width: 100%; box-sizing: border-box; }
/* ── Zijbalk + hoofdgedeelte ─────────────────────────────────────────────
   Eén grid: zijbalk links, inhoud rechts, voetregel eronder over de volle breedte.
   De rij `minmax(0, 1fr) auto` geeft de voetregel z'n eigen hoogte en de rest aan
   de inhoud, dus niemand hoeft die hoogte te kennen. Dat scheelt de `calc(100vh -
   footer)` die hier eerst stond en die op 11-08-2026 de hele pagina liet scrollen
   omdat de padding er bij een content-box nog bovenop kwam. */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; height: 100dvh; }
.nav { grid-row: 1; grid-column: 1; }
.shell__main { grid-row: 1; grid-column: 2; min-width: 0; overflow-y: auto; }
.shell > .site-foot { grid-row: 2; grid-column: 1 / -1; }
.nav { box-sizing: border-box; background: #1b1f27; color: #cbd0d6; padding: 1rem .75rem; display: flex; flex-direction: column; gap: 1rem; min-height: 0; z-index: 50; }
/* Dunne, meekleurende scrollbalk in plaats van de kale browser-default; hij
   verschijnt alleen als de lijst echt niet past. */
.nav__scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .1rem; scrollbar-width: thin; scrollbar-color: #3a4149 transparent; overscroll-behavior: contain; }
.nav__scroll::-webkit-scrollbar { width: 8px; }
.nav__scroll::-webkit-scrollbar-track { background: transparent; }
.nav__scroll::-webkit-scrollbar-thumb { background: #3a4149; border-radius: 999px; }
.nav__scroll::-webkit-scrollbar-thumb:hover { background: #4d555f; }
.shell__main { scrollbar-width: thin; scrollbar-color: #c3c9d0 transparent; }
.shell__main::-webkit-scrollbar { width: 10px; }
.shell__main::-webkit-scrollbar-track { background: transparent; }
.shell__main::-webkit-scrollbar-thumb { background: #c3c9d0; border-radius: 999px; }
.shell__main::-webkit-scrollbar-thumb:hover { background: #9aa3ad; }
.nav__brand { display: block; padding: .2rem .5rem .4rem; }
.nav__logo { height: 22px; width: auto; display: block; }
.nav__label { padding: 0 .5rem .35rem; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #6b7480; }
.nav__label--spaced { padding-top: .8rem; }
.nav__item { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .32rem .5rem; border: 0; border-radius: 7px; background: none; color: #cbd0d6; text-decoration: none; font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.nav__item:hover, .nav__item--button:hover, .nav__item--button:focus { background: #262b34; color: #fff; }
.nav__item.is-active { background: #2f3641; color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--primary); }
.nav__item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.nav__item--all { color: #8a919b; font-size: .84rem; }
.nav__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Kaal getal, geen rondje: een bolletje om elk cijfer maakt van een rustige lijst
   alsnog een rij badges. */
.nav__n { font-size: .8rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.nav__n--none { color: #6b7480; font-weight: 400; }
.nav__foot { border-top: 1px solid #2b313a; padding-top: .6rem; flex-shrink: 0; display: flex; flex-direction: column; gap: .1rem; }
.navtoggle { display: none; }
.nav__scrim { display: none; }
.container { max-width: 1040px; margin: 2rem auto; padding: 0 1rem; }
/* Smalle auth-kaart (login/wachtwoord) binnen de bredere container. */
.card--auth { max-width: 420px; margin: 2rem auto; }

/* ── Puntenlijst: één kolom over de volle breedte ───────────────────────── */
.board { display: block; }
.board__listhead { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 0 .8rem; flex-wrap: wrap; }
.board__empty {
  padding: 1.5rem 1rem;
  text-align: center;
  background: var(--accent-soft);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-fg-muted);
}
.dropzone {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .35rem;
  padding: 1rem;
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  transition: background .15s, border-color .15s;
}
.dropzone.is-drag {
  border-color: var(--primary);
  background: var(--accent-soft);
}
.dropzone__hint { color: var(--color-fg-muted); font-size: .9rem; }
.doc-block__foot--start { justify-content: flex-start; }
@media (max-width: 820px) {
  .doc-search input { width: 100%; }
  .filter-toggle { padding: .28rem .5rem; }
}
/* Zoekveld in de filterbalk. Geen `margin-left: auto` meer: het zit nu in
   `.stats-bar__tools`, en die duwt zichzelf al naar rechts. */
.doc-search { display: inline-flex; }
.doc-search input { width: 200px; padding: .3rem .7rem; border: 1px solid #cbd0d6; border-radius: 999px; font: inherit; font-size: .85rem; box-sizing: border-box; }
.doc-search input:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
/* Kopjes boven de filtergroepen */
.panel__title { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a90a0; }
/* Filters (categorie + prioriteit) achter de knop in de balk. Categorie is een rij
   die afbreekt, prioriteit staat eronder — zes categorieën naast elkaar leest sneller
   dan zes onder elkaar, en het paneel blijft twee regels hoog in plaats van acht. */
.board-filters { display: flex; flex-direction: column; gap: .9rem; padding: .9rem 1rem; margin-bottom: .8rem; }
/* `hidden` is maar `display: none` uit de browser-stylesheet en verliest van de
   `display: flex` hierboven; zonder deze regel gaat het paneel nooit dicht. */
.board-filters[hidden] { display: none; }
/* Eigen knopje naast het zoekveld, bewust géén pil zoals de statuschips: het filtert
   niet zelf maar opent iets. */
.stats-bar__tools { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; }
.filter-toggle { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .6rem; border: 1px solid #cbd0d6; border-radius: 6px; background: #fff; color: #374151; font: inherit; font-size: .82rem; cursor: pointer; }
.filter-toggle:hover { border-color: var(--primary); color: var(--primary); background: #fff; }
.filter-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.filter-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.filter-toggle__icon { width: 1em; height: 1em; flex-shrink: 0; }
.filter-toggle__n { display: inline-block; min-width: 1.15em; padding: 0 .25em; border-radius: 999px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.5; text-align: center; }
.sidefilter, .priofilter { display: flex; flex-wrap: wrap; gap: .35rem; }
.sidefilter__item { display: inline-flex; align-items: center; gap: .4rem; padding: 0 .55rem; border: 1px solid transparent; border-radius: 8px; background: none; font: inherit; font-size: .9rem; color: #374151; cursor: pointer; text-align: left; }
.sidefilter__item:hover { background: #f3f4f6; }
.sidefilter__item:has(input:checked) { background: var(--accent-soft); border-color: #cfe2f0; }
.sidefilter__item input { width: auto; margin: 0; }
.sidefilter__item .cat__icon { width: 1.05em; height: 1.05em; color: var(--cat-fg); flex-shrink: 0; }
.sidefilter__n, .priofilter__n { font-weight: 700; color: #6b7280; font-variant-numeric: tabular-nums; }
.priofilter__item { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .55rem; border: 1px solid transparent; border-radius: 8px; font-size: .9rem; color: #374151; cursor: pointer; }
.priofilter__item:hover { background: #f3f4f6; }
.priofilter__item:has(input:checked) { background: var(--accent-soft); border-color: #cfe2f0; }
.priofilter__item input { width: auto; margin: 0; }
/* Smal scherm: terug naar de lijstvorm die de zijbalk had — elk filter op een eigen
   regel over de volle breedte, met de telling rechts uitgelijnd. Naast elkaar wordt
   het daar een prakje van halve chips. */
@media (max-width: 640px) {
  .sidefilter, .priofilter { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .sidefilter__item, .priofilter__item { width: 100%; }
  .sidefilter__label, .priofilter__label { flex: 1; }
}
/* Footer */
.site-foot { z-index: 40;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .3rem 1rem;
  background: rgba(246, 247, 249, .94); backdrop-filter: blur(6px);
  border-top: 1px solid #e6e9ed; color: #9aa3ad; font-size: .78rem; padding: .45rem 1rem; }
.site-foot__heart { color: var(--primary); }
.board__selectall { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: #5a6672; cursor: pointer; }
.board__selectall input { width: auto; margin: 0; }
.doc-select { width: 16px; height: 16px; margin: 0 .35rem 0 0; cursor: pointer; vertical-align: middle; accent-color: var(--primary); }
button[data-export-go]:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.site-foot__presence { color: #5a6672; display: inline-flex; align-items: center; gap: .4rem;
  padding-left: 1rem; border-left: 1px solid #dfe3e8; }
.site-foot__pdot { width: 8px; height: 8px; border-radius: 50%; background: #2fbf71;
  box-shadow: 0 0 0 3px rgba(47, 191, 113, .18); flex: 0 0 auto; }
@media (max-width: 640px) { .site-foot__presence { padding-left: 0; border-left: 0; } }
.card { background: #fff; border: 1px solid #e2e5e9; border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
a { color: var(--primary); }
label { display: block; font-weight: 600; margin: .6rem 0 .2rem; }
input, textarea, select { width: 100%; padding: .5rem; border: 1px solid #cbd0d6; border-radius: 6px; font: inherit; box-sizing: border-box; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
button, .btn-primary, .btn-secondary, .btn-neutral, .btn-danger { display: inline-block; padding: .3rem .7rem; border: 1px solid var(--primary); border-radius: 6px; background: var(--primary); color: #fff; font: inherit; font-size: .85rem; cursor: pointer; text-decoration: none; line-height: 1.35; }
button:hover, .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
/* subtiel: secundaire/utility-acties (opslaan, opnieuw sturen, koppelen) */
.btn-secondary { background: #fff; color: #374151; border-color: #cbd0d6; }
.btn-secondary:hover { background: #f3f4f6; color: #111; border-color: #9aa3ad; }
/* neutraal-donker: navigatie/utility naast een primaire actie (bv. Gebruikers) */
.btn-neutral { background: #374151; border-color: #374151; color: #fff; }
.btn-neutral:hover { background: #2a333f; border-color: #2a333f; }
/* gevaar: verwijderen/loskoppelen */
.btn-danger { background: #fff; color: #b91c1c; border-color: #e3b3b3; }
.btn-danger:hover { background: #fdecec; border-color: #b91c1c; }
.status { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; background: #f6e6dd; color: #a24316; }
.prio1 { background: #fde2e1; color: #b91c1c; }
.prio2 { background: #fdecd8; color: #b25e09; }
.prio3 { background: #e6eaef; color: #475569; }
.error { color: #b91c1c; } .muted { color: #6b7280; }
/* per-project puntreferentie T{N} */
.point-ref { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-weight: 700; font-size: .85em; color: var(--accent); background: var(--accent-soft); padding: .05rem .35rem; border-radius: 4px; }
.flash-ok { background: #e7f6ec; color: #166534; border: 1px solid #bfe6cd; border-radius: 8px; padding: .6rem 1rem; margin-bottom: 1rem; }
/* 'Gemeld vanaf de site'-context bovenaan het nieuw-punt-formulier */
.meld-context { display: flex; gap: .6rem; align-items: flex-start; background: var(--accent-soft); border: 1px solid #cfe2f0; border-radius: 8px; padding: .7rem .9rem; margin-bottom: 1rem; font-size: .9rem; color: #1e3a52; }
.meld-context__icon { font-size: 1.1rem; line-height: 1.3; }
.meld-context a { color: var(--accent); word-break: break-all; }
.stats-bar { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; padding: .7rem 1rem; }
.stats-bar .status { background: #eef1f4; color: #374151; }
.badge-new { display: inline-block; background: var(--accent-soft); color: var(--accent); font-size: .72rem; font-weight: 700; padding: .08rem .4rem; border-radius: 4px; vertical-align: middle; }
.badge-warn { display: inline-block; background: #fdecc8; color: #92600a; font-size: .72rem; font-weight: 700; padding: .08rem .4rem; border-radius: 4px; vertical-align: middle; }
.badge-ok { display: inline-block; background: #d8f3e0; color: #146c37; font-size: .72rem; font-weight: 700; padding: .08rem .4rem; border-radius: 4px; vertical-align: middle; }
/* Kleurafspraak (11-08-2026): oranje is alleen de primaire actie, blauw is selectie
   en 'nieuw', grijs is telling en informatie. Oranje deed die vier dingen tegelijk -
   actieve pil, knop, tellers en de rand van elke secundaire knop - en een kleur die
   alles aanwijst, wijst niets meer aan. */
.filter-chip { display: inline-block; padding: .18rem .6rem; border: 1px solid #cbd0d6; border-radius: 999px; background: #fff; color: #374151; font: inherit; font-size: .82rem; cursor: pointer; }
.filter-chip:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.filter-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.filter-chip.is-active:hover { background: #185d8b; border-color: #185d8b; color: #fff; }
/* Categorieën: zachte kleur + eigen SVG-icoon (bug/idee/verbetering/vraag/overig). */
.cat--bug         { --cat-fg: #c0362c; --cat-bg: #fde3e0; }
.cat--idea        { --cat-fg: #9a6b00; --cat-bg: #fbeecb; }
.cat--concept     { --cat-fg: #0d9488; --cat-bg: #d5f2ee; }
.cat--improvement { --cat-fg: #6d4bd0; --cat-bg: #ece8fb; }
.cat--question    { --cat-fg: #1d6fb8; --cat-bg: #ddeefb; }
.cat--other       { --cat-fg: #475569; --cat-bg: #eef1f4; }
.cat { display: inline-flex; align-items: center; gap: .28rem; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; line-height: 1.4; background: var(--cat-bg, #eef1f4); color: var(--cat-fg, #475569); vertical-align: middle; }
.cat__icon { width: 1em; height: 1em; flex-shrink: 0; }
.cat__label { white-space: nowrap; }
/* Categorie-optie in de custom-select (via data-html): icoon in de categoriekleur. */
.cat-opt { display: inline-flex; align-items: center; gap: .4rem; }
.cat-opt .cat__icon { color: var(--cat-fg); }
.select-html { display: inline-flex; align-items: center; }
/* Categorie-chips (filterbalk + set-row): inline-flex met icoon in de categoriekleur. */
.filter-chip--cat, .cat-chip { display: inline-flex; align-items: center; gap: .3rem; }
.filter-chip--cat .cat__icon, .cat-chip .cat__icon { color: var(--cat-fg); }
.filter-chip--cat.is-active .cat__icon, .cat-chip.is-active .cat__icon { color: inherit; }
/* Verticale scheiding tussen status- en categorie-filters in de balk. */
.stats-bar__sep { width: 1px; align-self: stretch; min-height: 1.2em; background: #e2e5e9; margin: 0 .15rem; }
.muted a { color: var(--primary); }
/* status/prioriteit als losse klik-knopjes (puntpagina) */
.set-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.set-row form { margin: 0; display: inline; }
.set-row__label { font-size: .8rem; color: #6b7280; min-width: 5.5rem; }
.set-row.is-busy button { pointer-events: none; opacity: .6; }
.set-row.is-busy::after { content: ''; width: .9rem; height: .9rem; border: 2px solid #cbd0d6; border-top-color: var(--primary); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* actie-rij boven de punten */
.toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* modal (native <dialog>) */
dialog.modal { border: none; border-radius: 10px; padding: 1.2rem 1.4rem; max-width: 440px; width: 92vw; box-shadow: 0 10px 50px rgba(0,0,0,.25); color: #1a1a1a; }
dialog.modal::backdrop { background: rgba(0,0,0,.45); }
.modal__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .4rem; }
.modal__head h2 { margin: 0; font-size: 1.15rem; }
.modal__close { background: none; border: none; color: #6b7280; font-size: 1.5rem; line-height: 1; padding: 0 .2rem; cursor: pointer; }
.modal__close:hover { background: none; border: none; color: #111; }
.modal__foot { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.2rem; }
dialog.modal--confirm { max-width: 400px; }
.modal__msg { margin: 0; font-size: .95rem; line-height: 1.5; }
/* toast-meldingen (i.p.v. alert) */
.toast-host { position: fixed; top: 1rem; right: 1rem; z-index: 3000; display: flex; flex-direction: column; gap: .5rem; max-width: min(90vw, 360px); }
.toast { background: #1e2a3a; color: #fff; padding: .7rem 1rem; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.18); font-size: .9rem; line-height: 1.4; animation: toast-in .2s ease-out; }
.toast--error { background: #b91c1c; }
.toast--ok { background: #166534; }
.toast--out { opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
/* rich editor */
.rich-editor { background: #fff; border-radius: 6px; }
.rich-editor .ql-toolbar.ql-snow, .rich-editor .ql-container.ql-snow { border-color: #cbd0d6; }
.rich-editor .ql-toolbar.ql-snow { border-radius: 6px 6px 0 0; }
.rich-editor .ql-container.ql-snow { border-radius: 0 0 6px 6px; }
.rich-editor .ql-editor { min-height: 8rem; font: inherit; }
.rich-editor .ql-editor img { max-width: 100%; height: auto; }
.rich-editor__status { padding: .3rem .7rem; font-size: .8rem; color: var(--primary); background: #fdf1ea; border-top: 1px solid #cbd0d6; }
.rich-editor .ql-snow.ql-toolbar button:hover .ql-stroke, .rich-editor .ql-snow .ql-toolbar button:hover .ql-stroke { stroke: var(--primary); }
.rich-editor .ql-snow .ql-toolbar button.ql-active .ql-stroke { stroke: var(--primary); }
/* gerenderde HTML-content (body/reacties) */
.rich-content img { max-width: 100%; max-height: 360px; width: auto; height: auto; border: 1px solid #e2e5e9; border-radius: 6px; padding: 3px; background: #fff; cursor: zoom-in; vertical-align: top; }
.rich-content p { margin: .4rem 0; }
/* Lange ononderbroken tokens (inline `code`, URL's, bestandsnamen) liepen buiten de kaart:
   gewone zinnen wrappen vanzelf, maar een token zonder spatie niet — vandaar dat het alleen
   bij sommige punten opviel. `anywhere` breekt alleen als het echt niet past. */
.rich-content { overflow-wrap: anywhere; }
.rich-content code, .rich-content pre { overflow-wrap: anywhere; white-space: pre-wrap; }
.rich-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: .8rem 0; }
.rich-content th, .rich-content td { border: 1px solid #d7dce2; padding: .4rem .6rem; text-align: left; vertical-align: top; }
.rich-content th { background: #f4f6f8; font-weight: 700; }
/* schermvullende afbeelding-viewer (klik op afbeelding) */
.img-viewer { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 2vmin; cursor: zoom-out; overflow: hidden; }
.img-viewer img { max-width: 96vw; max-height: 96vh; border-radius: 4px; box-shadow: 0 8px 40px rgba(0,0,0,.5); transform-origin: center center; will-change: transform; touch-action: none; user-select: none; }
.img-viewer__hint { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(0,0,0,.5); font-size: .78rem; padding: .3rem .7rem; border-radius: 999px; pointer-events: none; }
/* Framework-releaseoverzicht */
.hours-chart__day i{height:var(--bar-height)!important;background:hsl(calc(120 - var(--heat) * 1.2),75%,55%)!important}.hours-chart__day b{display:none!important}.hours-legend__base{background:hsl(120,75%,55%)!important}.hours-legend__activity{background:hsl(0,75%,55%)!important}
.hours-chart__day:before{content:"";position:absolute;inset:-1.5rem -2px -1.4rem;border-radius:5px 5px 0 0;pointer-events:none}.hours-chart__day--weekday:before{background:rgba(198,226,120,.08)}.hours-chart__day--weekend:before{background:rgba(255,255,255,.025)}.hours-chart__day i,.hours-chart__day small,.hours-chart__day .chart-tooltip{position:relative;z-index:1}.hours-chart__day small b{display:inline!important;position:static!important;width:auto!important;height:auto!important;margin-right:.18rem;color:#f1f5ed;font-weight:700}.hours-week-heading{display:flex;align-items:baseline;gap:.75rem;padding:0 2rem .55rem;color:#d9ef91}.hours-week-heading span{font:700 .65rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em}.hours-week-heading strong{font:400 1rem Georgia,serif;color:#f7f2e8}.hours-weeks{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:.55rem;padding:.4rem 2rem 1rem}.hours-week{display:grid;grid-template-columns:1fr auto;gap:.25rem .65rem;padding:.7rem .8rem;border:1px solid rgba(198,226,120,.16);border-radius:9px;background:rgba(255,255,255,.035)}.hours-week strong{color:#d9ef91;font:700 .7rem ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}.hours-week span,.hours-week small{color:#9fb0a2;font:.65rem ui-monospace,SFMono-Regular,Menlo,monospace}.hours-week b{grid-column:1/-1;color:#fff;font:400 1.15rem Georgia,serif}.hours-week small{grid-column:1/-1}.hours-week-key{display:flex;gap:1rem;flex-wrap:wrap;padding:0 2rem .8rem;color:#9fb0a2;font:.68rem ui-monospace,SFMono-Regular,Menlo,monospace}.hours-week-key span{display:inline-flex;align-items:center;gap:.35rem}.hours-week-key i{width:10px;height:10px;border-radius:2px;display:inline-block}.hours-week-key__weekday{background:rgba(198,226,120,.2)}.hours-week-key__weekend{background:rgba(255,255,255,.08)}
.release-page{width:100vw;margin-left:calc(50% - 50vw);padding:0 clamp(1rem,4vw,4rem) 4rem;box-sizing:border-box}.release-page>*{width:100%;box-sizing:border-box}
.release-hero{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:3rem;align-items:center;margin:2rem 0 1.25rem;padding:3.5rem 3.5rem 3.25rem;border-radius:28px;background:#17231f;color:#f7f2e8;overflow:hidden;position:relative}
.release-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 35%,rgba(190,219,104,.12),transparent 75%);pointer-events:none}
.release-kicker{font:700 .68rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;color:#91ad63;text-transform:uppercase}
.release-hero h1{font:clamp(2.3rem,5vw,5rem)/.98 Georgia,serif;font-weight:400;letter-spacing:-.045em;max-width:780px;margin:1rem 0 1.25rem}
.release-hero__intro{max-width:650px;margin:0;color:#c7d0c6;font:1.05rem/1.7 system-ui,sans-serif}
.release-hero__meta{margin:2rem 0 0;color:#8d9b90;font:.75rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.release-hero__orb{width:220px;height:220px;border:1px solid rgba(198,226,120,.35);border-radius:50%;display:grid;place-items:center;position:relative;color:#c6e278;font:700 2rem ui-monospace,SFMono-Regular,Menlo,monospace;justify-self:end}.release-hero__orb:before,.release-hero__orb:after{content:"";position:absolute;border:1px solid rgba(198,226,120,.2);border-radius:50%}.release-hero__orb:before{inset:23px}.release-hero__orb:after{inset:53px}.release-hero__orb i{position:absolute;width:7px;height:7px;background:#c6e278;border-radius:50%;box-shadow:0 0 18px #c6e278}.release-hero__orb i:nth-of-type(1){top:13px;left:52px}.release-hero__orb i:nth-of-type(2){right:15px;bottom:61px}.release-hero__orb i:nth-of-type(3){left:26px;bottom:38px}
.release-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1rem 0 1.25rem}.release-stat{background:#fff;border:1px solid #e4e7df;border-radius:18px;padding:1.4rem 1.5rem;box-shadow:0 8px 24px rgba(27,42,35,.04)}.release-stat strong{display:block;color:#17231f;font:400 clamp(1.8rem,3.3vw,3rem)/1 Georgia,serif;letter-spacing:-.04em}.release-stat span{display:block;margin-top:.35rem;color:#34423b;font-weight:700}.release-stat small{display:block;color:#8b958c;margin-top:.45rem;font:.73rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}.release-stat--accent{background:#c6e278;border-color:#c6e278}.release-stat--accent strong,.release-stat--accent span{color:#17231f}.release-stat--accent small{color:#52613d}
.hours-panel{background:#17231f;color:#f7f2e8;border-color:#17231f}.hours-panel h2{color:#f7f2e8}.hours-panel__badge{color:#17231f;background:#c6e278;border-radius:999px;padding:.45rem .7rem;font:700 .68rem ui-monospace,SFMono-Regular,Menlo,monospace}.hours-panel__intro{display:flex;justify-content:space-between;gap:2rem;padding:.2rem 2rem 1.2rem;color:#b9c5ba;font:.85rem/1.5 system-ui,sans-serif}.hours-panel__intro strong{color:#f7f2e8}.hours-panel__intro span{max-width:470px}.hours-chart{display:flex;align-items:end;gap:4px;height:185px;padding:1.5rem 2rem 1.4rem;background:linear-gradient(to bottom,transparent 0,transparent calc(100% - 48px),rgba(198,226,120,.22) calc(100% - 48px),rgba(198,226,120,.22) calc(100% - 47px),transparent calc(100% - 47px));overflow:hidden}.hours-chart__day{height:100%;min-width:5px;flex:1;position:relative;display:flex;align-items:end;justify-content:center}.hours-chart__day i{height:75%;width:100%;max-width:22px;display:block;background:#496054;border-radius:4px 4px 2px 2px}.hours-chart__day b{position:absolute;bottom:75%;width:100%;max-width:22px;height:max(3px,var(--activity));background:#c6e278;border-radius:4px 4px 0 0;display:block;transform-origin:bottom}.hours-chart__day small{position:absolute;bottom:-1.1rem;color:#84988a;font:.58rem ui-monospace,SFMono-Regular,Menlo,monospace}.hours-panel__legend{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;padding:.1rem 2rem 1.5rem;color:#84988a;font:.68rem ui-monospace,SFMono-Regular,Menlo,monospace}.hours-panel__legend span{display:inline-flex;align-items:center;gap:.35rem}.hours-panel__legend i{display:inline-block;width:10px;height:10px;border-radius:2px}.hours-legend__base{background:#496054}.hours-legend__activity{background:#c6e278}.hours-panel__legend em{margin-left:auto;color:#c6e278;font-style:normal}
.pulse-panel{border-radius:0;background:#f7f9f3}.pulse-panel .release-panel__head{padding-left:clamp(1rem,3vw,3rem);padding-right:clamp(1rem,3vw,3rem)}.release-pulse{padding:0 clamp(1rem,3vw,3rem) 2rem;position:relative}.release-pulse svg{display:block;width:100%;height:320px;background:radial-gradient(circle at 50% 45%,rgba(198,226,120,.2),transparent 60%)}.release-pulse path{stroke:#cbd7c4;stroke-width:1}.release-pulse circle{fill:#91ad63;opacity:.76}.release-pulse circle:hover{fill:#17231f;opacity:1;r:4}.release-pulse__times{position:absolute;top:0;left:clamp(1rem,3vw,3rem);bottom:3.5rem;display:flex;flex-direction:column;justify-content:space-between;color:#6f7d73;font:700 .78rem ui-monospace,SFMono-Regular,Menlo,monospace}.release-pulse__labels{display:flex;justify-content:space-between;margin-left:3.2rem;color:#6f7d73;font:700 .82rem ui-monospace,SFMono-Regular,Menlo,monospace}
.release-panel{background:#fff;border:1px solid #e4e7df;border-radius:22px;margin:1.25rem 0;box-shadow:0 8px 24px rgba(27,42,35,.04);overflow:hidden}.release-panel__head{display:flex;justify-content:space-between;align-items:end;gap:1rem;padding:1.8rem 2rem 1rem}.release-panel h2{margin:.45rem 0 0;color:#17231f;font:400 clamp(1.45rem,3vw,2.1rem)/1.1 Georgia,serif;letter-spacing:-.025em}.release-panel__range{color:#8b958c;font:.72rem ui-monospace,SFMono-Regular,Menlo,monospace}.release-chart{display:flex;align-items:end;gap:3px;height:250px;padding:1.5rem 2rem 1.6rem;overflow:hidden;background:linear-gradient(to bottom,transparent 0,transparent calc(100% - 50px),#eff1eb calc(100% - 50px),#eff1eb calc(100% - 49px),transparent calc(100% - 49px))}.release-chart__bar{height:100%;min-width:5px;flex:1;position:relative;display:flex;align-items:end;justify-content:center}.release-chart__bar i{display:block;width:100%;max-width:20px;height:var(--bar);min-height:3px;background:linear-gradient(#a7c867,#d1e88d);border-radius:5px 5px 2px 2px;transition:filter .2s}.release-chart__bar:hover i{filter:saturate(1.7) brightness(.94)}.release-chart__bar span{position:absolute;bottom:calc(var(--bar) + 7px);color:#657254;font:.6rem ui-monospace,SFMono-Regular,Menlo,monospace;opacity:0}.release-chart__bar:hover span{opacity:1}.release-chart__bar small{position:absolute;bottom:-1.1rem;color:#9ba49b;font:.58rem ui-monospace,SFMono-Regular,Menlo,monospace;transform:rotate(-45deg);transform-origin:top left}
.release-time-panel .release-chart__bar i{background:linear-gradient(#6e8f58,#b9d77a)}
.release-panel--timeline{padding-bottom:1.5rem}.release-panel__head--timeline{align-items:center}.release-search{display:flex;align-items:center;border-bottom:1px solid #cfd7c9;color:#657254}.release-search input{border:0;padding:.6rem 0;width:min(260px,35vw);font:inherit;color:#17231f;background:transparent;outline:none}.release-search span{font-size:1.35rem}.release-list{padding:0 2rem}.release-row{display:grid;grid-template-columns:115px 24px minmax(0,1fr);gap:1rem;min-height:104px}.release-row[hidden]{display:none}.release-row__date{text-align:right;padding-top:1.25rem;color:#829087;font:.7rem ui-monospace,SFMono-Regular,Menlo,monospace}.release-row__date strong{display:block;color:#34423b;font-weight:600}.release-row__date span{display:block;margin-top:.2rem}.release-row__line{position:relative}.release-row__line:before{content:"";position:absolute;top:0;bottom:0;left:11px;border-left:1px solid #d9e0d5}.release-row:first-child .release-row__line:before{top:1.5rem}.release-row:last-child .release-row__line:before{bottom:auto;height:1.5rem}.release-row__line i{position:absolute;top:1.35rem;left:5px;width:13px;height:13px;border:3px solid #fff;border-radius:50%;background:#a7c867;box-shadow:0 0 0 1px #a7c867}.release-row__body{padding:1.1rem 0 1.35rem;border-bottom:1px solid #eef0eb}.release-row__top{display:flex;align-items:baseline;gap:.8rem}.release-row h3{margin:0;color:#17231f;font:600 1.05rem ui-monospace,SFMono-Regular,Menlo,monospace}.release-row__top span{color:#9ba49b;font:.68rem ui-monospace,SFMono-Regular,Menlo,monospace}.release-row p{margin:.45rem 0 .6rem;color:#58645c;font: .9rem/1.5 system-ui,sans-serif}.release-row a{color:#657b35;font:.7rem ui-monospace,SFMono-Regular,Menlo,monospace;text-decoration:none}.release-row a:hover{text-decoration:underline}.release-empty{padding:2rem;text-align:center;color:#829087}.release-error{margin:3rem 0;padding:3rem;border-radius:22px;background:#fff;border:1px solid #e4e7df}.release-error h1{font:400 2.3rem Georgia,serif;color:#17231f}.release-error p{color:#657254}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:800px){.release-hero{grid-template-columns:1fr;padding:2.2rem 1.4rem}.release-hero__orb{width:150px;height:150px;justify-self:start;font-size:1.35rem}.release-stat-grid{grid-template-columns:repeat(2,1fr)}.release-panel__head{padding:1.4rem 1.2rem .9rem;align-items:start;flex-direction:column}.release-chart,.hours-chart{padding-left:1.2rem;padding-right:1.2rem}.release-list{padding:0 1.2rem}.release-row{grid-template-columns:76px 18px minmax(0,1fr);gap:.65rem}.release-row__date{font-size:.61rem}.release-search input{width:220px}.release-panel--timeline .release-panel__head--timeline{flex-direction:row;align-items:center}.release-panel--timeline .release-search{max-width:45%}.hours-panel__intro{padding-left:1.2rem;padding-right:1.2rem;display:block}.hours-panel__intro span{display:block;margin-top:.6rem}.hours-panel__legend{padding-left:1.2rem;padding-right:1.2rem}.hours-panel__legend em{margin-left:0}}
.release-page .release-kicker{font-size:.78rem;color:#5e743f}
.release-page .release-panel__range{font-size:.78rem;color:#59655a}
.release-page .release-chart__bar small{font-size:.7rem;color:#52604f}
.release-page .release-chart__bar small{white-space:nowrap;transform:none;transform-origin:top left}
.release-page .release-chart__bar span{font-size:.72rem;color:#34452f}
.release-page .hours-panel__intro{font-size:.95rem;color:#d0dbd1}
.release-page .hours-panel__intro strong{color:#fff}
.release-page .hours-panel__intro{color:#5f6a61}
.release-page .hours-panel__intro strong{color:#34423b}
.release-page .hours-week span,.release-page .hours-week small{color:#5d685f;font-size:.78rem;font-weight:600}
.release-page .hours-week strong{color:#526b37}
.release-page .hours-chart__day small{font-size:.7rem;color:#c4d2c5}
.release-page .hours-panel__legend{font-size:.75rem;color:#b9c9ba}
.release-page .hours-panel__legend em{color:#d9ef91}
.release-page .hours-chart__day small{white-space:nowrap;color:#d5e1d6;font-size:.72rem}
.release-page .hours-chart__day i{background:hsl(calc(120 - var(--heat) * .8),50%,30%)!important}
.release-page .hours-panel__legend em{color:#9fb36b}
.release-page .hours-chart{overflow:visible}
.release-page .hours-chart__day--weekday:before{inset:auto 0 -.6rem;height:.35rem;border-radius:2px;background:rgba(120,130,110,.72)}
.release-page .hours-chart__day--weekend:before{inset:auto 0 -.6rem;height:.35rem;border-radius:0;background:#f0f0f0}
.chart-tooltip{position:absolute;z-index:5;left:50%;bottom:calc(var(--bar-height, var(--bar)) + 1.5rem);display:none;width:max-content;max-width:220px;padding:.55rem .7rem;border:1px solid #405446;border-radius:7px;background:#17231f;color:#f7f2e8;box-shadow:0 5px 18px rgba(0,0,0,.22);font:600 .75rem/1.45 system-ui,sans-serif;transform:translateX(-50%);pointer-events:none;text-align:left;white-space:nowrap}
.chart-tooltip strong{color:#d9ef91;font-weight:700}
.hours-chart__day:hover .chart-tooltip,.release-chart__bar:hover .chart-tooltip{display:block}
/* Tellingen per bak in het beheeroverzicht. Openstaand krijgt gewicht en kleur,
   de rest blijft grijs: je scant hier op "waar ligt nog werk". */
.project-counts { margin-top: .35rem; font-size: .9rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem; }
.project-counts__open { font-weight: 700; color: #1a1a1a; }
.project-counts__clear { color: #16794a; }
/* Tips-knop in de menubalk. Zelfde toon als de uitlog-knop ernaast: een randje op
   donker, geen vol vlak, zodat hij niet met de primaire actie concurreert. */
/* Uitleg-dialog: definitielijst, want elk kopje hoort bij precies één uitleg. */
dialog.modal--tips { max-width: 560px; }
.tips { margin: 0; }
.tips dt { margin-top: .9rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a90a0; }
.tips dt:first-child { margin-top: .2rem; }
.tips dd { margin: .15rem 0 0; font-size: .92rem; line-height: 1.55; color: #374151; }

/* Smal scherm: 232px vaste breedte past niet naast een leesbare lijst, dus schuift
   de zijbalk eruit achter een knop. Het scherm erachter vangt de klik om te sluiten. */
@media (max-width: 900px) {
  /* Smal scherm: geen twee kolommen en geen gepinde hoogte. De pagina scrollt weer
     zelf, en de zijbalk schuift eroverheen achter een knop. */
  body.has-shell { height: auto; overflow: visible; }
  .shell { display: block; height: auto; }
  .shell__main { overflow: visible; }
  .navtoggle { display: inline-flex; position: fixed; top: .6rem; left: .6rem; z-index: 60; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 1px solid #2b313a; border-radius: 8px; background: #1b1f27; color: #cbd0d6; cursor: pointer; }
  .navtoggle svg { width: 1.1rem; height: 1.1rem; }
  .nav { position: fixed; top: 0; left: 0; width: 232px; height: 100dvh; transform: translateX(-100%); transition: transform .18s ease; }
  .nav.is-open { transform: none; }
  .nav__scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,.4); }
  .nav__scrim[hidden] { display: none; }
  .container { margin-top: 3.4rem; }
}
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }