/* Scope Compass - design system
   Modern, clean, light. One indigo accent plus a semantic status palette.
   Geen externe fonts of libraries, alles lokaal. */

:root {
  /* Licht-only ontwerp: dwing native UI (keuzelijsten, datalist-popups, date-pickers,
     scrollbars) in lichte variant, ook als het systeem in dark mode staat. */
  color-scheme: light;

  /* Hoogte van de sticky topbar; sticky elementen eronder rekenen hiermee. De mobiele
     media query overschrijft dit met zijn eigen waarde. */
  --topbar-h: 58px;

  /* Neutrals, licht gekoeld richting de indigo-hue */
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --surface-2: #FAFAFC;
  --sunken: #F3F4F6;
  --border: #ECEDF0;
  --border-2: #E4E5EA;
  --border-3: #DADCE2;
  --text: #1E1F26;
  --text-2: #5C5F6B;
  --text-3: #8A8D98;
  --text-faint: #A4A7B0;

  /* Primair: indigo */
  --pri: #4F46E5;
  --pri-hover: #4338CA;
  --pri-soft: #EEF0FE;
  --pri-text: #4338CA;
  --ring: rgba(79, 70, 229, .30);

  /* Semantische statuskleuren (zacht vlak + donkere tekst uit dezelfde familie) */
  --green: #2FA060;
  --green-strong: #0F7A3D;
  --green-soft: #E6F6EC;
  --amber: #E0A93B;
  --amber-strong: #8A5A00;
  --amber-soft: #FBF0D9;
  --red: #D64550;
  --red-strong: #B42A33;
  --red-soft: #FCEBEC;
  --slate-soft: #F0F1F4;
  --slate-text: #565A66;
  --blue-soft: #E7F0FF;
  --blue-text: #1B5FB8;
  --violet-soft: #F1EAFE;
  --violet-text: #6A35C9;

  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --r-pill: 999px;
  --sh: 0 1px 2px rgba(16, 24, 40, .05);
  --sh-2: 0 4px 16px rgba(16, 24, 40, .10);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: "Cascadia Code", "Consolas", ui-monospace, monospace;

  --maxw: 1320px;

  /* Motion. Codificeert wat de app feitelijk al deed (.12s/.15s ease op ~90 plekken) zodat
     nieuwe bewegingen niet per plek geïmproviseerd worden. Bewust kort: dit is een dichte
     werk-app die de hele dag gebruikt wordt — daar wint snel van showy. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 150ms;
  --dur-ui: 200ms;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }

button { font-family: inherit; }

a { color: var(--pri-text); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--pri-soft); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

.muted { color: var(--text-3); }
.faint { color: var(--text-faint); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: var(--r);
  border: 1px solid var(--border-2); background: var(--surface);
  color: #33363F; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--sunken); }
.btn:active { transform: translateY(.5px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.btn .ic { font-size: 16px; color: var(--text-3); line-height: 1; }
.btn-primary { background: var(--pri); border-color: var(--pri); color: #fff; }
.btn-primary:hover { background: var(--pri-hover); border-color: var(--pri-hover); }
.btn-primary .ic { color: #fff; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--sunken); }
.btn-danger { color: var(--red-strong); border-color: var(--red-soft); background: var(--surface); }
.btn-danger:hover { background: var(--red-soft); }
.btn-sm { padding: 5px 9px; font-size: 12.5px; }
.btn-icon { padding: 7px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Vera AI: opvallende primaire actie (gevulde accent-gradient i.p.v. neutrale knop) */
.vera-btn {
  border: none; color: #fff; font-weight: 600;
  background: linear-gradient(135deg, var(--accent, #6366f1), #8b5cf6);
  box-shadow: 0 2px 8px rgba(99, 102, 241, .38);
}
.vera-btn:hover { background: linear-gradient(135deg, #5457e6, #7c4ddb); box-shadow: 0 3px 12px rgba(99, 102, 241, .5); }
.vera-btn .ic { color: #fff; }
.vera-btn-ico { width: 18px; height: 18px; border-radius: 5px; flex: none;
  background: rgba(255, 255, 255, .22); padding: 1px; box-sizing: border-box; }

/* icon-only square control (reorder, delete) */
.icontile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: transparent; color: var(--text-3);
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.icontile:hover { background: var(--sunken); color: var(--text); }
.icontile:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.icontile.danger:hover { background: var(--red-soft); color: var(--red-strong); }
.icontile[disabled] { opacity: .35; cursor: not-allowed; }
.icontile .ic { font-size: 17px; }

/* ---------------------------------------------------------------- forms */
.input, .select, .textarea {
  width: 100%; font: inherit; color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-2); border-radius: var(--r);
  padding: 8px 11px; transition: border-color .15s ease, box-shadow .15s ease;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px var(--ring);
}
.textarea { resize: vertical; min-height: 64px; line-height: 1.55; }
.select { appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8D98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center; cursor: pointer;
}

/* Inline-bewerkbare velden: rustig tot hover/focus */
.inline {
  border: 1px solid transparent; background: transparent; border-radius: var(--r-sm);
  padding: 5px 7px; margin: -5px -7px; width: 100%; font: inherit; color: var(--text);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.inline:hover { background: var(--sunken); }
.inline:focus { outline: none; background: var(--surface); border-color: var(--pri); box-shadow: 0 0 0 3px var(--ring); }
.inline::placeholder { color: var(--text-faint); }
textarea.inline { resize: vertical; line-height: 1.55; }
.inline-h1 { font-size: 22px; font-weight: 600; letter-spacing: -.015em; }

.label {
  display: block; font-size: 11.5px; font-weight: 600; color: var(--text-3);
  margin-bottom: 5px;
}

/* ---------------------------------------------------------------- tags / pills */
/* Tags wikkelen als er te weinig ruimte is, in plaats van hun container uit te duwen.
   Met white-space:nowrap werd een lange tag (bv. een procesnaam in een smalle rechterkolom)
   breder dan zijn panel, en omdat .panel overflow:hidden heeft werd hij AFGEKAPT - de tekst
   was dan gewoon weg. Afkappen mag nooit; wikkelen wel.
   break-word en niet anywhere: anywhere telt ook mee in de min-content-breedte, waardoor een
   tag in een smalle tabelkolom letter voor letter zou stapelen (gemeten: 23px -> 115px hoog). */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 500; line-height: 1.3;
  white-space: normal; overflow-wrap: break-word; min-width: 0;
}
/* In een tabel blijft een tag wel op een regel: die zit altijd in een scroll-wrapper
   (.tbl-wrap, invariant in test/run.mjs), dus daar leidt breedte tot scrollen, niet tot
   afkappen - en blijven de rijen strak. */
.dz-table .tag { white-space: nowrap; overflow-wrap: normal; }
.tag .ic { font-size: 13px; }
.tag-slate  { background: var(--slate-soft);  color: var(--slate-text); }
.tag-blue   { background: var(--blue-soft);   color: var(--blue-text); }
.tag-violet { background: var(--violet-soft); color: var(--violet-text); }
.tag-green  { background: var(--green-soft);  color: var(--green-strong); }
.tag-amber  { background: var(--amber-soft);  color: var(--amber-strong); }
.tag-red    { background: var(--red-soft);    color: var(--red-strong); }
.tag-dashed { background: transparent; color: var(--text-3); border: 1px dashed var(--border-3); }

/* select gestyled als een tag (voor scope-/statuskeuze inline) */
.tag-select {
  appearance: none; border: 1px solid var(--border-2); border-radius: var(--r-sm);
  padding: 4px 26px 4px 10px; font: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer; color: var(--text-2); background-color: var(--surface);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A8D98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 7px center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tag-select:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px var(--ring); }
.tag-select.is-green  { background-color: var(--green-soft);  color: var(--green-strong);  border-color: transparent; }
.tag-select.is-amber  { background-color: var(--amber-soft);  color: var(--amber-strong);  border-color: transparent; }
.tag-select.is-red    { background-color: var(--red-soft);    color: var(--red-strong);    border-color: transparent; }
.tag-select.is-blue   { background-color: var(--blue-soft);   color: var(--blue-text);     border-color: transparent; }
.tag-select.is-violet { background-color: var(--violet-soft); color: var(--violet-text);   border-color: transparent; }
.tag-select.is-slate  { background-color: var(--slate-soft);  color: var(--slate-text);    border-color: transparent; }

/* ---------------------------------------------------------------- scope meter */
.meter { height: 6px; border-radius: var(--r-pill); background: var(--sunken); display: flex; overflow: hidden; }
.meter .seg { height: 100%; }
.meter .seg.in  { background: var(--green); }
.meter .seg.de  { background: var(--amber); }
.meter .seg.bu  { background: #B7BAC2; }
.meter-lg { height: 8px; }
.meter-label { font-size: 11px; color: var(--text-3); margin-top: 5px; }

/* ---------------------------------------------------------------- app shell */
.app { display: flex; flex-direction: row; min-height: 100vh; }

/* ---------------------------------------------------------------- zijbalk-navigatie */
.sidebar {
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; flex: none; width: 232px; z-index: 20; box-sizing: border-box;
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--border);
  padding: 14px 12px;
}
.side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; }
.side-brand .brandtext { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.side-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.side-nav .navtab { width: 100%; justify-content: flex-start; padding: 9px 11px; font-size: 13.5px; }
.side-toggle {
  position: absolute; top: 22px; right: -13px; z-index: 21;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border-2); color: var(--text-3);
  box-shadow: var(--sh); cursor: pointer; transition: color .15s ease, background .15s ease;
}
.side-toggle:hover { color: var(--text); background: var(--sunken); }
.side-toggle .ti { font-size: 15px; transform: rotate(-90deg); transition: transform .18s ease; }

/* ingeklapt: smalle rail met alleen iconen */
.app.side-collapsed .sidebar { width: 64px; }
.app.side-collapsed .side-brand { justify-content: center; padding: 4px 0 14px; }
.app.side-collapsed .side-brand .brandtext { display: none; }
.app.side-collapsed .side-nav .navtab { justify-content: center; padding: 9px 0; }
.app.side-collapsed .side-nav .navtab span { display: none; }
.app.side-collapsed .side-toggle .ti { transform: rotate(90deg); }

/* eerste keer (nog geen data): geen chrome tonen */
.app.no-chrome .sidebar { display: none; }

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

.topbar {
  position: sticky; top: 0; z-index: 15;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; row-gap: 10px;
  padding: 11px 20px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.topbar-l { display: flex; align-items: center; gap: 16px; flex-shrink: 0; min-width: 0; }
.page-title { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
/* Contextregel onder de titel: alleen mobiel. Op desktop staat de klant al in de zijbalk, daar zou
   hij dubbelop zijn. Bewust NIET .page-sub genoemd: die klasse is al in gebruik als paginabeschrijving
   (Activiteit). De wrapper blijft neutraal zodat de bestaande topbalk-flex niet verschuift. */
.topbar-titles { min-width: 0; }
.topbar-sub { display: none; }
/* kruimelpad op de titelregel van detailpagina's (procesdetail, deliverable) */
.tbcrumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-3); min-width: 0; }
.tbcrumb-sep { color: var(--border-3); }
.tbcrumb-l { color: var(--text-3); white-space: nowrap; }
a.tbcrumb-l:hover { color: var(--pri-text); }
.tbcrumb-cur { color: var(--text); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 9px; }
.mark {
  width: 28px; height: 28px; border-radius: 7px; object-fit: cover; display: block; flex: none;
}
.brandtext { display: flex; flex-direction: column; line-height: 1.12; }
.wordmark { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.brandsub { font-size: 11px; color: var(--text-3); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav { display: flex; gap: 3px; }
.navtab {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
  border-radius: var(--r); color: var(--text-2); font-weight: 500; font-size: 13px;
  cursor: pointer; border: none; background: transparent; transition: background .15s ease, color .15s ease;
}
.navtab:hover { background: var(--sunken); color: var(--text); }
.navtab.active { background: var(--pri-soft); color: var(--pri-text); }
.navtab .ic { font-size: 17px; flex: none; }
.topbar-r { display: flex; align-items: center; gap: 9px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

/* globale zoekbalk in de topbalk (opent het commandopalet) */
.topbar-search {
  display: inline-flex; align-items: center; gap: 8px; min-width: 220px; max-width: 320px;
  padding: 7px 10px; border: 1px solid var(--border-2); border-radius: var(--r);
  background: var(--surface-2); color: var(--text-3); font: inherit; font-size: 13px; cursor: text;
  transition: border-color .15s ease, background .15s ease;
}
.topbar-search:hover { border-color: var(--border-3); background: var(--surface); }
.topbar-search .ic { font-size: 16px; flex: none; }
.topbar-search .ts-text { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-search .ts-kbd {
  flex: none; font-family: inherit; font-size: 10.5px; color: var(--text-faint);
  border: 1px solid var(--border-2); border-radius: 5px; padding: 1px 6px; background: var(--surface);
}
@media (max-width: 880px) { .topbar-search .ts-text, .topbar-search .ts-kbd { display: none; } .topbar-search { min-width: 0; } }

/* save status pill */
.status {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-pill); padding: 5px 11px; font-size: 12.5px; color: var(--text-2);
}
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.status.saved   .dot { background: var(--green); }
.status.saving  .dot { background: var(--amber); animation: pulse 1s ease-in-out infinite; }
.status.dirty   .dot { background: var(--pri); }
.status.error   .dot { background: var(--red); }
.status.error   { color: var(--red-strong); border-color: var(--red); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.breadcrumb {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 20px; background: var(--surface); border-bottom: 1px solid var(--border);
  color: var(--text-3); font-size: 12.5px;
}
.breadcrumb a, .crumb { color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.breadcrumb a:hover { color: var(--text); text-decoration: none; }
.crumb-nav { display: inline-flex; gap: 6px; }
.crumb-nav .icontile[disabled] { opacity: .4; cursor: default; }

.content { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 20px; }
/* Bredere pagina waar een brede tabel anders horizontaal zou scrollen (bv. Processen-overzicht). */
.content-wide { max-width: min(1720px, 97vw); }

/* Groepeer-knop op het Tabellen-overzicht (proces <-> proces-kolom). */
.group-toggle {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px;
  border: 1px solid var(--border-2); border-radius: var(--r); background: var(--surface);
  color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.group-toggle:hover { background: var(--sunken); color: var(--text); border-color: var(--border-3); }
.group-toggle i.ti { font-size: 15px; color: var(--text-3); }

/* Weergavewissel in de paneelkop: domein | L1-groep | vlakke lijst. Segmentknoppen, want
   het is een wissel in weergave (zichtbare stand) en geen filter tussen de andere filters. */
.ov-groupseg { display: inline-flex; gap: 2px; background: var(--sunken); border-radius: var(--r); padding: 2px; }
.ov-groupseg-b { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: none;
  border-radius: var(--r-sm); background: transparent; font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--text-3); cursor: pointer; white-space: nowrap; }
.ov-groupseg-b:hover { color: var(--text); }
.ov-groupseg-b.is-on { background: var(--surface); color: var(--pri-text); font-weight: 600; box-shadow: var(--sh); }
.ov-groupseg-b .ic { font-size: 15px; }

/* ---------------------------------------------------------------- toolbar (overview) */
.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px;
}
/* Alleen op telefoons zichtbaar (zie de filterbalk in de patroonsectie). */
.mob-filterbtn { display: none; }
.toolbar-l { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.toolbar-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.search {
  display: flex; align-items: center; gap: 8px; background: var(--surface);
  border: 1px solid var(--border-2); border-radius: var(--r); padding: 0 11px;
  min-width: 240px; transition: border-color .15s ease, box-shadow .15s ease;
}
.search:focus-within { border-color: var(--pri); box-shadow: 0 0 0 3px var(--ring); }
.search .ic { font-size: 17px; color: var(--text-3); }
.search input { border: none; outline: none; background: transparent; font: inherit; padding: 9px 0; width: 100%; color: var(--text); }
.filter-select {
  appearance: none; border: 1px solid var(--border-2); border-radius: var(--r);
  padding: 9px 30px 9px 11px; font: inherit; font-size: 13px; color: var(--text-2);
  background-color: var(--surface); cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8D98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center;
}
.filter-select:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px var(--ring); }

/* Formuliervelden nooit breder dan hun container. Een <select> gaat standaard mee met zijn
   LANGSTE optie; met een lange keuzelijst duwt hij zich zo buiten het panel, en omdat .panel
   overflow:hidden heeft wordt hij afgekapt. Zelfde geldt voor een input met een breed
   min-width. Dit is een vangnet voor de hele app, niet voor een enkel scherm. */
select, input, textarea, .select, .input, .textarea, .filter-select, .search { max-width: 100%; }
.search { min-width: 0; }

/* ---------------------------------------------------------------- panel + table */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); overflow: hidden; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.panel-title { font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 9px; }
.count-chip { font-size: 11px; color: var(--text-2); background: var(--slate-soft); border-radius: var(--r-pill); padding: 2px 9px; font-weight: 500; }

.dz-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dz-table.wide { min-width: 920px; }
.panel .tbl-wrap { overflow-x: auto; }
.dz-table th {
  text-align: left; font-size: 11px; font-weight: 600; color: var(--text-3);
  padding: 9px 16px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.dz-table td { padding: 12px 16px; border-bottom: 1px solid var(--sunken); vertical-align: middle; }
.dz-table tbody tr.proc-row { cursor: pointer; transition: background .12s ease; }
.dz-table tbody tr.proc-row:hover { background: var(--surface-2); }
.group-row td {
  background: var(--surface-2); padding: 8px 16px; border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 12px; color: #33363F;
}
.group-row .count-chip { margin-left: 8px; }
.proc-name { font-weight: 500; color: var(--text); }
.proc-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.cell-meter { min-width: 120px; }
.mvp-yes { display: inline-flex; align-items: center; gap: 5px; color: var(--green-strong); font-weight: 500; }
.mvp-yes .ic { font-size: 15px; }
.mvp-no { color: var(--text-faint); }

/* sorteerbare, sticky tabellen (processen- en tabellen-overzicht) */
.proc-stats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.sticky-tbl { overflow: auto; max-height: calc(100vh - 300px); min-height: 240px; }
.sticky-tbl > table { border-collapse: separate; border-spacing: 0; }
.sticky-tbl thead th { position: sticky; top: 0; z-index: 3; background: var(--surface); box-shadow: inset 0 -1px 0 var(--border); }
.sticky-tbl tbody .group-row td { position: sticky; top: 34px; z-index: 2; box-shadow: inset 0 -1px 0 var(--border); }
.th-sort { cursor: pointer; user-select: none; white-space: nowrap; transition: background .12s ease, color .12s ease; }
.th-sort:hover { background: var(--surface-2); color: var(--text-2); }
.th-sort .th-in { display: inline-flex; align-items: center; gap: 5px; }
.th-sort .sort-ic { font-size: 13px; color: var(--text-faint); }
.th-sort.active { color: var(--text); }
.th-sort.active .sort-ic { color: var(--pri); }

/* full-bleed content (bv. Beslissingen, zodat alle kolommen passen) */
.content.full-width { max-width: none; }

/* Beslissingen: sorteerbare kolomkoppen (sticky via .sticky-tbl). Filteren gebeurt in de
   .toolbar boven de tabel. */
.dec-th-sort { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; transition: color .12s ease; }
.dec-th-sort:hover { color: var(--text-2); }
.dec-th-sort.active { color: var(--text); }
.dec-th-sort .sort-ic { font-size: 13px; color: var(--text-faint); }
.dec-th-sort.active .sort-ic { color: var(--pri); }
.dec-filter {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 12px; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r); padding: 4px 7px;
}
.dec-filter:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px var(--ring); }

/* empty state */
.empty { padding: 48px 24px; text-align: center; color: var(--text-3); }
.empty .ic { font-size: 30px; color: var(--text-faint); }
.empty h3 { margin: 12px 0 6px; color: var(--text-2); font-weight: 600; }

/* ---------------------------------------------------------------- process page */
.sheet { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); overflow: hidden; }
.pr-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 13px; }
.pr-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pr-block-title { font-size: 13px; font-weight: 600; }
.pr-block-meta { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-sub { font-size: 12px; color: var(--text-3); margin: 6px 0 10px; }
.pr-seg { margin-bottom: 9px; }
.pr-seg .seg-btn { font-size: 12.5px; }
.pr-note { width: 100%; resize: vertical; font-size: 12.5px; }
.pr-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
.pr-help { font-size: 11px; flex: 1; min-width: 140px; }
.pr-stamp-row { font-size: 11px; margin-top: 8px; }
.pr-lock { display: flex; align-items: center; gap: 6px; font-size: 11.5px; margin-top: 4px; }
.pr-lock .ic { font-size: 13px; }
.pr-seg.is-disabled { opacity: .6; }
.pr-seg.is-disabled .seg-btn { cursor: not-allowed; }
.pr-block.is-locked .pr-note { background: var(--sunken); color: var(--text-2); cursor: not-allowed; }
.pr-reviewer { display: inline-flex; align-items: center; gap: 6px; }
.pr-reviewer-name { font-size: 12px; color: var(--text-2); }
.pr-avatar {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--pri); color: #fff;
  font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}

.content.proc-page { max-width: none; }
/* alle Projectplan-tabs vol-breedte met dezelfde buitenrand (consistente breedte tussen de tabs) */
.content.report-wide { max-width: none; }
/* brede tabellen (Onderbouwing, Overhead): alleen krappere celpadding zodat ze binnen
   dezelfde breedte passen; de paginabreedte blijft gelijk aan de andere tabs */
.content.report-dense .dz-table th, .content.report-dense .dz-table td { padding-left: 8px; padding-right: 8px; }
/* De tabrij staat in een eigen wrapper zodat hij op mobiel kan blijven plakken. */
.proc-tabs-wrap { min-width: 0; }
.panel-foot { padding: 0 16px 14px; }

/* Klikbare/selecteerbare stap-knopen in het SVG-schema. */
.flow-node { cursor: pointer; }
.flow-node:focus { outline: none; }
.flow-node:hover rect, .flow-node:hover polygon { stroke-width: 2.4px; }
.flow-node.is-selected rect, .flow-node.is-selected polygon { stroke: var(--pri, #6366f1); stroke-width: 3px; }
.flow-node:focus-visible rect, .flow-node:focus-visible polygon { stroke: var(--pri, #6366f1); stroke-width: 3px; }

/* Build-badges met hover/klik (focus)-popover die de volledige beschrijving toont. */
.flow-badge-wrap { position: relative; display: inline-flex; max-width: 100%; }
.flow-badge { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 1px solid var(--border, #e2e6ec); background: var(--surface, #fff); border-radius: 20px; padding: 3px 10px; font: inherit; font-size: 12px; color: var(--text, #0f172a); cursor: pointer; }
.flow-badge:hover, .flow-badge:focus { border-color: var(--pri, #6366f1); }
.flow-badge-code { font-weight: 700; font-size: 11px; white-space: nowrap; }
.flow-badge--req .flow-badge-code { color: var(--blue-text, #1d4ed8); }
.flow-badge--us .flow-badge-code { color: var(--violet-text, #6d28d9); }
.flow-badge-txt { color: var(--text-2, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
/* Popover rechts uitgelijnd (blijft in de rechterkolom), zonder dode zone (top:100%) en zichtbaar bij
   hover én focus-within — zo blijft hij open terwijl je een keuzelijst erin bedient. */
.flow-badge-pop { position: absolute; z-index: 60; right: 0; left: auto; top: 100%; width: 264px; max-width: 82vw;
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e6ec); border-radius: 10px; box-shadow: 0 14px 38px rgba(15, 23, 42, .20);
  padding: 11px 13px; display: none; flex-direction: column; gap: 5px; }
.flow-badge-wrap:hover .flow-badge-pop, .flow-badge-wrap:focus-within .flow-badge-pop { display: flex; }
/* Onderaan de pagina viel de helft van de popover buiten beeld; onDocBadgeHover meet de ruimte
   en zet deze klassen, zodat hij omhoog (of naar links) uitklapt. */
.flow-badge-wrap.pop-up .flow-badge-pop { top: auto; bottom: 100%; }
.flow-badge-wrap.pop-left .flow-badge-pop { right: auto; left: 0; }
.flow-badge-pop-code { font-size: 10.5px; font-weight: 700; color: var(--text-2, #64748b); }
.flow-badge-pop-title { font-weight: 650; font-size: 13px; }
.flow-badge-pop-desc { font-size: 12.5px; color: var(--text-2, #475569); line-height: 1.5; }
/* Bewerkbare fase/prioriteit/status in de popover + bewerkbaar beschrijvingsveld in het detailpaneel. */
.flow-pop-edit { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border, #eceef2); }
.flow-pop-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.flow-pop-lbl { font-size: 11.5px; color: var(--text-2, #64748b); }
.flow-pop-field .filter-select { max-width: 150px; font-size: 12px; }
.select-sm { padding: 6px 28px 6px 10px; font-size: 12.5px; }

.add-row {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  color: var(--pri-text); font-size: 13px; font-weight: 500; padding: 8px 13px; cursor: pointer;
  border: 1px dashed var(--border-3); border-radius: var(--r); background: var(--surface);
  transition: background .15s ease, border-color .15s ease;
}
.add-row:hover { background: var(--pri-soft); border-color: var(--pri); }
.add-row .ic { font-size: 16px; }

/* improvements — als kaart met rand zodat elk voorstel op zichzelf staat */
.imp { padding: 13px 14px; border: 1px solid var(--border-2); border-radius: var(--r); background: var(--surface); margin-bottom: 10px; transition: border-color .15s ease, box-shadow .15s ease; }
.imp:hover { border-color: var(--border-3); box-shadow: var(--sh); }
.imp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.imp-title { font-size: 13.5px; font-weight: 500; }
.imp-tags { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
/* Richting + omvang lezen als een paar ("laaghangend fruit, maat M") en breken dus niet uiteen. */
.imp-tagpair { display: inline-flex; gap: 7px; align-items: center; flex-wrap: nowrap; }
/* Meegroeiende omschrijving: geen sleepgreep meer nodig om de tekst te kunnen lezen. */
.imp-desc { font-size: 12.5px; color: var(--text-2); margin-top: 8px; overflow: hidden; }
/* AI-voorstel: paarse rand + wegklikbare badge, gelijk aan de requirement- en user-story-kaarten. */
.imp.is-ainew { border-color: #c4b5fd; }
.imp-ai-ok { background: #ede9fe; border-color: #c4b5fd; color: #5b21b6; white-space: nowrap; }
/* Sectiepaneel "AI features & input data" onder de verbetervoorstellen. */
.aif-section { margin-top: 14px; }
.aif-section-head { align-items: flex-start; }
.aif-section-sub { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 4px; font-weight: 400; }
.aif-section-body { padding: 14px 16px; }
.aif-section-body .req-layout { margin: 0; }
.db-vera { flex-wrap: wrap; }
.db-vera .select-sm { max-width: 220px; }
.imp-onder { font-size: 12px; color: var(--text-3); margin-top: 6px; font-style: italic; }
.imp-tools { display: flex; gap: 2px; }
.size-chip { font-size: 11px; padding: 1px 7px; font-weight: 700; }

/* process footer */
.proc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; background: var(--surface); border-top: 1px solid var(--border); flex-wrap: wrap; }

/* ================================================================ procesdetail
   Drie zones: kop (identiteit + AI-kaarten), statusbalk, tabbladen. Het Proces-tabblad
   is een driekolommenwerkblad: stappen | stroomschema | detail van de gekozen stap. */
.pd-page { display: flex; flex-direction: column; gap: 14px; }
.pd-spacer { flex: 1; }

/* ---- kop: identiteitskaart + AI-kaarten ---- */
.pd-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: stretch; }
.pd-ident {
  min-width: 0; display: flex; gap: 22px; align-items: flex-start; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh);
}
.pd-ident-ic {
  flex: none; width: 44px; height: 44px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--pri-soft); color: var(--pri-text);
}
.pd-ident-ic .ic { font-size: 22px; }
.pd-ident-main { flex: 1; min-width: 0; }
.pd-ident-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pd-ident-row .inline-h1 { flex: 1 1 420px; min-width: 0; font-size: 24px; }
/* de werkfase-schakelaar staat rechts; de titel krijgt alle overige ruimte (nooit afkappen) */
.pd-wf { margin-left: auto; }
.pd-ident-oms { display: block; width: 100%; margin: 6px 0 14px; font-size: 13.5px; color: var(--text-2); resize: vertical; }

/* segmentknoppen (werkfase, omvang, staptype) */
.pd-seg { display: inline-flex; gap: 3px; background: var(--sunken); border-radius: var(--r-pill); padding: 3px; }
.pd-seg-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid transparent;
  border-radius: var(--r-pill); background: transparent; font: inherit; font-size: 12px; color: var(--text-3);
  cursor: pointer; white-space: nowrap;
}
.pd-seg-btn .ic { font-size: 14px; color: inherit; }
.pd-seg-btn:hover { color: var(--text); }
.pd-seg-btn.active { background: var(--surface); border-color: var(--pri-soft); color: var(--pri-text); font-weight: 500; box-shadow: var(--sh); }
.pd-seg-btn.is-blocked { opacity: .55; }
.pd-seg-sm { border-radius: var(--r); padding: 3px; }
.pd-seg-sm .pd-seg-btn { min-width: 32px; justify-content: center; padding: 4px 8px; border-radius: var(--r-sm); font-weight: 600; }
.pd-seg-wide { display: flex; width: 100%; border-radius: var(--r); padding: 4px; }
.pd-seg-wide .pd-seg-btn { flex: 1; justify-content: center; border-radius: var(--r-sm); font-size: 12.5px; }

/* meta-velden onder de omschrijving */
.pd-meta { display: grid; grid-template-columns: 1fr 1fr .9fr 1.3fr .9fr; gap: 12px; }
.pd-meta.no-groep { grid-template-columns: repeat(4, 1fr); }
.pd-mf { min-width: 0; }
.pd-mf-l { display: block; font-size: 11.5px; color: var(--text-3); margin-bottom: 5px; }
.pd-mf-ctl {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px 0 10px;
  border: 1px solid var(--border-2); border-radius: var(--r); background: var(--surface);
}
.pd-mf-ctl:hover { border-color: var(--border-3); }
.pd-mf-ctl:focus-within { border-color: var(--pri); box-shadow: 0 0 0 3px var(--ring); }
.pd-mf-ctl select { flex: 1; min-width: 0; border: none; background: transparent; padding: 0 24px 0 0; font-size: 13px; height: 100%; }
.pd-mf-ctl select:focus { outline: none; box-shadow: none; }
.pd-mf-ctl .pr-avatar { width: 20px; height: 20px; font-size: 9.5px; background: var(--pri-soft); color: var(--pri-text); }

/* AI-kaarten rechts van de kop */
.pd-aicol { display: flex; flex-direction: column; gap: 10px; }
.pd-aicard {
  flex: 1; display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 13px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh); font: inherit; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.pd-aicard:hover { background: var(--surface-2); }
.pd-aicard.is-open { border-color: var(--pri); }
.pd-aicard-ic {
  flex: none; width: 30px; height: 30px; border-radius: var(--r); color: #fff;
  background: var(--brand-gradient, linear-gradient(135deg, #6366F1, #8B5CF6));
  display: inline-flex; align-items: center; justify-content: center;
}
.pd-aicard-ic .ic { font-size: 16px; color: #fff; }
.pd-aicard-txt { flex: 1; min-width: 0; }
.pd-aicard-t { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.pd-aicard-s { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.pd-aicard-chev { color: var(--text-faint); display: flex; }

/* uitgeklapt AI-paneel (vol-breedte, onder de kop) */
.pd-aipanel { background: var(--surface); border: 1px solid var(--pri-soft); border-radius: var(--r-lg); box-shadow: var(--sh); padding: 14px 18px 4px; }
.pd-aipanel-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.pd-aipanel-ic {
  width: 28px; height: 28px; border-radius: var(--r); color: #fff;
  background: var(--brand-gradient, linear-gradient(135deg, #6366F1, #8B5CF6));
  display: inline-flex; align-items: center; justify-content: center;
}
.pd-aipanel-ic .ic { font-size: 15px; color: #fff; }
.pd-aipanel-t { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
/* de bestaande DZ.ai.box zit al in een kaart met eigen kop: die summary is hier dubbelop */
.pd-aipanel .ai-gen { border: none; background: none; padding: 0; }
.pd-aipanel .ai-gen > summary { display: none; }
.pd-aipanel .ai-gen-body { padding: 0 0 12px; }

/* ---- statusbalk ---- */
.pd-status {
  display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh);
}
.pd-st-cell { display: flex; flex-direction: column; gap: 7px; padding: 0 22px; border-left: 1px solid var(--border); justify-content: flex-start; }
.pd-st-cell:first-child { padding-left: 0; border-left: none; }
.pd-st-l { font-size: 11.5px; color: var(--text-3); }
.pd-st-l b { color: var(--text); font-weight: 500; }
.pd-st-scope { min-width: 210px; flex: 0 1 260px; }
.pd-st-scope .meter { width: 100%; }
.pd-st-sub { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-st-appr { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 8px; padding-left: 22px; border-left: 1px solid var(--border); }

.pd-appr { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.pd-appr.is-open { border-color: var(--border-3); }
.pd-appr-head { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; border: none; background: none; font: inherit; text-align: left; cursor: pointer; }
.pd-appr-head:hover { background: var(--surface-2); }
.pd-appr-l { font-size: 11.5px; color: var(--text-3); min-width: 128px; }
.pd-appr-ic { display: inline-flex; }
.pd-appr-ic .ic { font-size: 16px; }
.pd-appr-ic.is-green { color: var(--green); }
.pd-appr-ic.is-amber { color: var(--amber); }
.pd-appr-ic.is-slate { color: var(--text-3); }
.pd-appr-s { font-size: 13px; flex: 1; }
.pd-appr-chev { color: var(--text-faint); display: flex; }
/* Uitgeklapt akkoord zweeft als popover boven de pagina: de statusbalk houdt zo zijn hoogte.
   Rechts uitgelijnd (de rij staat rechts in de balk) en sluitend bij een klik ernaast (zie
   onDocClickClose in process.js). */
.pd-appr { position: relative; overflow: visible; }
.pd-appr-pop {
  position: absolute; z-index: 70; top: calc(100% + 6px); right: 0; width: 460px; max-width: min(92vw, 560px);
  max-height: min(70vh, 640px); overflow: auto;
  border: 1px solid var(--border-2); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: 0 18px 46px rgba(15, 23, 42, .22); padding: 12px;
}
.pd-appr-pop .pr-block { border-color: var(--border-2); }
/* Pijltje naar de rij waar de popover bij hoort. */
.pd-appr-pop::before {
  content: ''; position: absolute; top: -6px; right: 18px; width: 10px; height: 10px;
  background: var(--surface); border-left: 1px solid var(--border-2); border-top: 1px solid var(--border-2);
  transform: rotate(45deg);
}

/* ---- werkblad: stappen | stroomschema | detailpaneel ---- */
.pd-work { display: grid; grid-template-columns: 340px minmax(0, 1fr) 520px; gap: 14px; align-items: start; }
.pd-steps, .pd-canvas, .pd-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); min-width: 0;
}
.pd-steps { display: flex; flex-direction: column; padding: 12px; }
.pd-steps-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px; }
.pd-steps-t { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.pd-steps-mvp { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-3); }
.pd-steps-body { display: flex; flex-direction: column; }
.pd-steps-empty { font-size: 12.5px; padding: 18px 4px; }
.pd-step {
  display: flex; align-items: center; gap: 9px; padding: 10px 9px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
}
.pd-step:hover { border-color: var(--border-3); }
.pd-step.is-active { background: var(--pri-soft); border-color: var(--pri); }
.pd-step-n {
  flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--sunken); color: var(--text-2);
  font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}
.pd-step.is-active .pd-step-n { background: var(--pri); color: #fff; }
.pd-step-t { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.35; }
.pd-step.is-active .pd-step-t { font-weight: 600; }
.pd-step-type { font-size: 13px; color: var(--text-3); }
.pd-step-warn { display: flex; color: var(--amber-strong); }
.pd-step-warn .ic { font-size: 15px; }
.pd-step-state { display: flex; }
.pd-step-state .ic { font-size: 15px; }
.pd-step-state.is-in { color: var(--green); }
.pd-step-state.is-deels { color: var(--amber); }
.pd-step-state.is-buiten { color: var(--text-faint); }
.pd-step-state.is-onb { color: var(--border-3); }
.pd-step-grip { display: flex; color: var(--border-3); cursor: grab; }
.pd-step-grip .ic { font-size: 15px; }
/* invoegregel tussen twee stappen: subtiel, vol zichtbaar op hover */
.pd-insert { height: 22px; display: flex; align-items: center; gap: 7px; padding: 0 2px; opacity: .22; cursor: pointer; }
.pd-insert:hover { opacity: 1; }
.pd-insert-ic {
  flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--pri-soft);
  background: var(--pri-soft); color: var(--pri-text); display: inline-flex; align-items: center; justify-content: center;
}
.pd-insert-ic .ic { font-size: 12px; }
.pd-insert-line { flex: 1; height: 1px; background: var(--pri-soft); }
.pd-insert-l { font-size: 11px; color: var(--pri-text); font-weight: 500; }
.pd-addstep {
  display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 6px; padding: 8px 9px;
  border: 1px dashed var(--pri-soft); border-radius: var(--r); background: none; font: inherit;
  font-size: 12.5px; font-weight: 500; color: var(--pri-text); cursor: pointer;
}
.pd-addstep:hover { background: var(--pri-soft); border-color: var(--pri); }

/* stroomschema-canvas */
.pd-canvas { position: relative; padding: 12px; overflow: hidden; }
.pd-canvas-bar { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; }
.pd-zoom { display: inline-flex; align-items: center; border: 1px solid var(--border-2); border-radius: var(--r); height: 32px; }
.pd-zoom-b, .pd-zoom-l { border: none; background: none; font: inherit; font-size: 12.5px; color: var(--text-2); cursor: pointer; height: 100%; padding: 0 11px; }
.pd-zoom-l { min-width: 64px; color: var(--text); }
.pd-zoom-b:hover, .pd-zoom-l:hover { color: var(--pri-text); }
.pd-zoom-l.is-fit { font-weight: 600; }
/* Het schema is een kijkvenster: het handje zegt "je kunt me slepen", scrollen zoomt (zie
   flowOnDown/flowOnWheel in process.js). max-content laat de wrap meegroeien met een ingezoomde
   SVG, zodat er echt iets te scrollen valt; min-width houdt het passende schema gecentreerd. */
.pd-canvas-body {
  background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 18px 18px;
  border-radius: var(--r); padding: 10px 0 24px;
  overflow: auto; overscroll-behavior: contain; cursor: grab; max-height: 62vh;
}
.pd-canvas-body.is-panning { cursor: grabbing; }
.pd-canvas-body.is-panning .flow-node { pointer-events: none; }
.pd-canvas-body .flow-wrap { margin: 0; background: none; border: none; padding: 0; }
/* Alleen ingezoomd mag de wrap breder worden dan de kolom; in "Passend" moet de SVG juist
   krimpen (max-width:100% van de wrap), anders scrollt een passend schema toch. */
.pd-canvas-body .flow-wrap.is-zoom { width: max-content; min-width: 100%; }
.pd-canvas-body::-webkit-scrollbar { width: 9px; height: 9px; }
.pd-canvas-body::-webkit-scrollbar-thumb { background: var(--border-3); border-radius: 6px; }
.pd-canvas-body::-webkit-scrollbar-track { background: transparent; }
.pd-canvas-body .flow-node { cursor: pointer; }
/* minimap linksonder: hetzelfde schema, klein en niet-interactief */
.pd-mini {
  position: absolute; left: 12px; bottom: 12px; width: 118px; height: 120px; overflow: hidden;
  border: 1px solid var(--border-2); border-radius: var(--r); background: var(--surface);
  display: flex; align-items: center; justify-content: center; padding: 6px; cursor: pointer;
  box-shadow: var(--sh);
}
/* Het schema in de minimap is puur beeld; alle muisacties horen bij de minimap zelf. */
.pd-mini-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.pd-mini svg { max-width: 100%; max-height: 100%; height: auto; }
/* Het kader: welk deel van het schema staat er in beeld. Sleepbaar (zie flowOnMiniDown). */
.pd-mini-vp {
  position: absolute; z-index: 2; pointer-events: none;
  border: 1.5px solid var(--pri); border-radius: 3px; background: color-mix(in srgb, var(--pri) 12%, transparent);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset;
}
/* Staat alles al in beeld, dan valt er niets te verplaatsen: kader gedempt. */
.pd-mini-vp.is-all { opacity: .35; }

/* detailpaneel rechts */
.pd-panel { display: flex; flex-direction: column; }
.pd-panel-head { display: flex; align-items: center; gap: 8px; padding: 14px 18px 10px; flex-wrap: wrap; }
.pd-panel-n { font-size: 12.5px; color: var(--text-3); }
.pd-stepmenu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; }
.pd-ptabs { display: flex; gap: 20px; padding: 0 18px; border-bottom: 1px solid var(--border); }
.pd-ptab {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 2px 11px; margin-bottom: -1px;
  border: none; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 13px;
  color: var(--text-2); cursor: pointer;
}
.pd-ptab:hover { color: var(--text); }
.pd-ptab.active { color: var(--pri-text); border-bottom-color: var(--pri); font-weight: 600; }
.pd-ptab-chip { font-size: 10.5px; font-weight: 600; border-radius: var(--r-pill); padding: 2px 7px; }
.pd-ptab-chip.is-amber { background: var(--amber-soft); color: var(--amber-strong); }
.pd-ptab-chip.is-green { background: var(--green-soft); color: var(--green-strong); }
.pd-panel-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.pd-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pd-field-l { font-size: 11.5px; color: var(--text-3); display: flex; align-items: center; gap: 8px; }
.pd-steptitle { font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; }
.pd-stepdesc { width: 100%; min-height: 92px; font-size: 13.5px; line-height: 1.55; resize: vertical; background: var(--surface-2); border-color: var(--border-2); }
.pd-fielderr { font-size: 12px; color: var(--red-strong); display: flex; align-items: flex-start; gap: 5px; }
.pd-scopenote { width: 100%; margin-top: 6px; font-size: 12.5px; }
.pd-relgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-rel { border: 1px solid var(--border); border-radius: var(--r); padding: 11px 12px; min-width: 0; }
.pd-rel-head { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 9px; border: none; background: none; font: inherit; padding: 0; cursor: pointer; }
.pd-rel-head:hover { color: var(--pri-text); }
.pd-rel-head .ic { font-size: 15px; color: var(--text-3); }
.pd-rel-l { flex: 1; text-align: left; font-size: 12.5px; font-weight: 500; }
.pd-endnote { display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); padding: 12px 13px; font-size: 13px; color: var(--text-2); }
.pd-endnote .ic { font-size: 16px; color: var(--text-3); }
.pd-branch { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); padding: 11px 12px; }
.pd-branch .pd-field-l { margin-bottom: 0; }
.pd-branch-in, .pd-branch-sel { background: var(--surface); }
.pd-branch-del { align-self: end; margin-bottom: 1px; }
.pd-branch .pd-fielderr { grid-column: 1 / -1; }
.pd-addlink { display: inline-flex; align-items: center; gap: 7px; border: none; background: none; padding: 2px; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--pri-text); cursor: pointer; align-self: flex-start; }
.pd-addlink:hover { text-decoration: underline; }

/* notities / vragen / aannames */
.pd-notes .pd-nb { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.pd-nb-head { display: flex; align-items: center; gap: 9px; padding: 11px 13px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.pd-nb-ic { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }
.pd-nb-ic .ic { font-size: 15px; }
.pd-nb-ic.is-indigo { background: var(--pri-soft); color: var(--pri-text); }
.pd-nb-ic.is-amber { background: var(--amber-soft); color: var(--amber-strong); }
.pd-nb-ic.is-green { background: var(--green-soft); color: var(--green-strong); }
.pd-nb-t { flex: 1; font-size: 13px; font-weight: 600; }
.pd-nb-body { padding: 11px 13px; display: flex; flex-direction: column; gap: 7px; }
.pd-notitie { width: 100%; min-height: 120px; font-size: 13px; line-height: 1.55; resize: vertical; }
/* align-items:flex-start zodat de knoppen bij de eerste regel blijven als de tekst terugloopt */
.pd-li { display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); padding: 6px 8px; }
.pd-li.is-done { background: var(--surface-2); }
.pd-li.is-done .pd-li-in { color: var(--text-3); text-decoration: line-through; }
.pd-li-check { border: none; background: none; padding: 0; margin-top: 4px; display: flex; color: var(--text-faint); cursor: pointer; flex: none; }
.pd-li-check .ic { font-size: 17px; }
.pd-li.is-done .pd-li-check { color: var(--green); }
/* Tekst als meegroeiende textarea: langere vragen/aannames lopen over meerdere regels i.p.v. afgekapt. */
.pd-li-in { flex: 1; min-width: 0; font-size: 13px; }
textarea.pd-li-in { resize: none; overflow: hidden; line-height: 1.45; }
.pd-li > .icontile { flex: none; margin-top: 1px; }
/* Genummerde aannames (1, 2, 3…) i.p.v. een afvinkbolletje. */
.pd-li-num .pd-li-no { flex: none; margin-top: 5px; min-width: 16px; text-align: right; font-size: 12px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* Klikbare statusbadge: wisselt tussen "te verifiëren" en "geverifieerd". */
.pd-li-pill { flex: none; margin-top: 2px; border: 1px solid transparent; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.pd-li-pill.is-open { background: var(--amber-soft); color: var(--amber-strong); border-color: var(--amber-soft); }
.pd-li-pill.is-open:hover { border-color: var(--amber-strong); }
.pd-li-pill.is-ok { background: var(--green-soft); color: var(--green-strong); border-color: var(--green-soft); }
.pd-li-pill.is-ok:hover { border-color: var(--green-strong); }
/* Antwoord-icoontje op een vraagkaart: kleurt groen zodra er een antwoord is. */
.pd-li-answer-btn.has-answer { color: var(--green-strong); }
.pd-li-answer-btn.has-answer:hover { background: var(--green-soft); }
.pd-li-answer-btn.answer-open { background: var(--sunken); }
/* Uitklapbaar antwoordblok onder een vraag. */
.pd-vq { display: flex; flex-direction: column; gap: 6px; }
.pd-vq-answer { margin-left: 26px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); padding: 9px 11px; display: flex; flex-direction: column; gap: 7px; }
.pd-vq-answer-h { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.pd-vq-answer-h .ic { font-size: 14px; color: var(--green-strong); }
.pd-vq-answer-in { font-size: 13px; line-height: 1.5; resize: none; overflow: hidden; min-height: 46px; }
.pd-vq-answer-read { font-size: 13px; line-height: 1.55; white-space: pre-wrap; color: var(--text); }

/* tabblad-inhoud buiten het Proces-tabblad */
.pd-tabbody { display: flex; flex-direction: column; gap: 14px; }
.pd-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.pd-list { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
/* auto-fit i.p.v. auto-fill: bij 1 of 2 voorstellen klappen de lege sporen dicht en worden de
   kaarten breder; grid-stretch houdt kaarten in dezelfde rij gelijk hoog als een titel wikkelt. */
.pd-impgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; padding: 14px 16px; }
.pd-impgrid .imp { margin: 0; min-width: 0; }
.pd-impgrid .imp-head .inline { flex: 1; min-width: 0; }
.imp-titel { font-weight: 500; resize: none; overflow: hidden; line-height: 1.35; }

/* process tabs + best practices */
/* Elf tabbladen passen niet altijd naast elkaar: de strip scrolt horizontaal met een edge-fade,
   zodat er nooit iets wordt afgekapt en de pagina zelf niet breder wordt dan het scherm. */
.proc-tabs {
  display: flex; gap: 18px; padding: 0 18px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh);
  overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.proc-tabs::-webkit-scrollbar { display: none; }
.proc-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 2px; border: none; background: none;
  font: inherit; font-size: 13.5px; color: var(--text-2); cursor: pointer; flex: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.proc-tab .ic { font-size: 16px; color: var(--text-3); }
.proc-tab:hover { color: var(--text); }
.proc-tab.active { color: var(--pri-text); border-bottom-color: var(--pri); font-weight: 500; }
.proc-tab.active .ic { color: var(--pri); }
.proc-tab.is-dim { color: var(--text-faint); }
.proc-tab-ai { font-size: 11px; font-weight: 600; color: var(--violet-text); background: var(--violet-soft); border-radius: var(--r-pill); padding: 2px 7px; display: inline-flex; align-items: center; gap: 3px; }
.proc-tab-ai .ic { font-size: 12px; color: inherit; }

/* Werkfase implementatie: de Delivery-tab is dan de plek waar het gebeurt. */
.pd-page.is-impl .proc-tab[data-tab="delivery"] { color: var(--pri-text); }

@media (max-width: 1500px) {
  .pd-work { grid-template-columns: 300px minmax(0, 1fr); }
  .pd-work .pd-panel { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .pd-top { grid-template-columns: 1fr; }
  .pd-aicol { flex-direction: row; }
  .pd-aicard { flex: 1; }
  .pd-meta, .pd-meta.no-groep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bp { padding: 20px 24px; }
.bp-bron { font-size: 12px; margin-bottom: 8px; }
.bp-summary { font-size: 14px; color: var(--text); line-height: 1.6; max-width: 80ch; margin: 0 0 6px; }
.bp-prompt { background: var(--sunken); border: 1px solid var(--border); border-radius: var(--r); padding: 12px; font-family: var(--mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; max-height: 230px; overflow: auto; margin: 0 0 14px; }
.bp-steps { margin: 6px 0 0; padding-left: 22px; }
.bp-steps li { margin-bottom: 14px; }
.bp-step-title { font-weight: 500; }
.bp-step-toe { font-size: 13px; color: var(--text-2); margin-top: 3px; }
.bp-step-letop { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: var(--amber-strong); background: var(--amber-soft); border-radius: var(--r-sm); padding: 6px 9px; margin-top: 7px; }
.bp-step-letop .ic { font-size: 14px; margin-top: 1px; flex: none; }
.bp-dromers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 10px; }
.bp-dromer { border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 14px; background: var(--surface); }
.bp-dromer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bp-dromer-title { font-weight: 600; }
.bp-dromer-desc { font-size: 13px; color: var(--text-2); margin: 8px 0 12px; }
.bp-error { color: var(--red-strong); background: var(--red-soft); border-radius: var(--r); padding: 9px 12px; margin-top: 10px; font-size: 13px; }
.bp-error:empty { display: none; }
.bp-replace { margin-top: 18px; border-top: 1px solid var(--sunken); padding-top: 14px; }
.bp-replace summary { cursor: pointer; color: var(--text-2); font-size: 13px; font-weight: 500; }
/* Best practices — snelkoppelingen, samenvattingskaart, praktijkvoorbeelden, verifieer-badge */
.bp-jumpbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.bp-summary-card { background: var(--pri-soft); border: 1px solid var(--border-2); border-left: 3px solid var(--pri); border-radius: var(--r-lg); padding: 14px 16px; margin: 0 0 4px; }
.bp-summary-lead { font-size: 14.5px; font-weight: 600; color: var(--text); line-height: 1.5; margin: 0; max-width: 80ch; }
.bp-kernpunten { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.bp-kernpunten li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text); line-height: 1.45; }
.bp-kernpunten .ic { color: var(--pri); font-size: 15px; margin-top: 1px; flex: none; }
.bp-steunt { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 500; color: var(--amber-strong); background: var(--amber-soft); border-radius: var(--r-pill); padding: 1px 8px; margin-left: 8px; white-space: nowrap; vertical-align: middle; }
.bp-steunt .ic { font-size: 12px; }
.bp-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 10px; }
.bp-case { border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 14px; background: var(--surface); }
.bp-case-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bp-case-bedrijf { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.bp-case-why { font-size: 12px; margin-top: 6px; }
.bp-case-desc { font-size: 13px; color: var(--text-2); margin: 8px 0 10px; line-height: 1.5; }
.bp-case-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--pri-text); text-decoration: none; }
.bp-case-link:hover { text-decoration: underline; }
/* User-story bouw-informatie (data-scope / statusovergangen / bedrijfsregels) */
.bi-block { margin-bottom: 12px; }
.bi-block:last-child { margin-bottom: 0; }
.bi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-3); margin-bottom: 6px; }
.bi-trans { font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.bi-trans:last-child { border-bottom: 0; }
.bi-ent { font-weight: 600; }
.bi-flow { color: var(--text); }
.bi-flow .ic { font-size: 13px; vertical-align: -2px; color: var(--text-3); }
.bi-cond { font-size: 12px; margin-top: 2px; }
.bi-rules { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text); }
.bi-rules li { margin-bottom: 4px; line-height: 1.45; }
/* Kolomrij: PK-indicator + relatie/kardinaliteit-hint */
.kol-pk { display: inline-flex; align-items: center; color: var(--amber-strong); flex: none; }
.kol-pk .ic { font-size: 14px; }
.kol-rel { font-size: 11.5px; white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 3px; }
.kol-rel .ic { font-size: 12px; }

/* ---------------------------------------------------------------- decisions */
.toggle {
  position: relative; width: 38px; height: 22px; border-radius: var(--r-pill);
  background: var(--border-3); border: none; cursor: pointer; transition: background .15s ease; flex: none;
}
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .18s cubic-bezier(.4,.0,.2,1); box-shadow: var(--sh); }
.toggle.on { background: var(--pri); }
.toggle.on::after { transform: translateX(16px); }
.toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

.dec-onder { width: 100%; min-width: 160px; }

/* ---------------------------------------------------------------- dashboard */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); padding: 16px 18px; }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stat-ic { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--pri-soft); color: var(--pri-text); font-size: 17px; flex: none; }
.stat-label { font-size: 12px; color: var(--text-3); font-weight: 500; }
.stat-num { font-size: 27px; font-weight: 600; letter-spacing: -.02em; margin-top: 10px; line-height: 1.1; }
.stat-sub { font-size: 12px; color: var(--text-3); margin-top: 5px; }

.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.bar-row { padding: 11px 0; border-bottom: 1px solid var(--sunken); }
.bar-row:last-child { border-bottom: none; }
.bar-row.clickable { cursor: pointer; margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: var(--r); transition: background .12s ease; }
.bar-row.clickable:hover { background: var(--surface-2); }
.bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.bar-name { font-size: 13px; font-weight: 500; color: var(--text); }
.bar-meta { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.bar { height: 7px; border-radius: var(--r-pill); background: var(--sunken); overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--green); border-radius: var(--r-pill); }
.bar-fill.open { background: var(--amber); }

/* drie-koloms paneelrij (knelpunten / verbeterkansen / gereedheid) */

/* lijstrijen in dashboard-panelen */
.list-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--sunken); }
.list-row:last-child { border-bottom: none; }
.list-row.clickable { cursor: pointer; margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: var(--r); transition: background .12s ease; }
.list-row.clickable:hover { background: var(--surface-2); }
.list-main { flex: 1; min-width: 0; }
.list-title { font-size: 13px; color: var(--text); font-weight: 500; }
.list-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.opp-tag { flex: none; align-self: center; font-size: 11px; color: var(--text-2); background: var(--slate-soft); border-radius: var(--r-pill); padding: 3px 9px; white-space: nowrap; }

/* ernst-badges (severity) */
.sev { flex: none; font-size: 11px; font-weight: 600; border-radius: var(--r-pill); padding: 3px 9px; margin-top: 1px; }
.sev-hoog { background: var(--red-soft); color: var(--red-strong); }
.sev-mid  { background: var(--amber-soft); color: var(--amber-strong); }
.sev-laag { background: var(--slate-soft); color: var(--slate-text); }

/* scope-gereedheid */
.ready-row { padding: 8px 0; }
.ready-row .bar-head { margin-bottom: 6px; }
.ready-cta { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 11px 13px; background: var(--pri-soft); border-radius: var(--r); font-size: 12.5px; color: var(--text-2); }
.ready-cta .btn { margin-left: auto; flex: none; }
.ready-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }

/* dashboard: ruimere stat-kaarten met gekleurd icoon vooraan + grotere sectietitels */
.dash > .panel { margin-bottom: 20px; }
.dash .dash-grid { grid-template-columns: repeat(auto-fit, minmax(192px, 1fr)); }
.dash-cols-solo { grid-template-columns: 1fr; }
.dash-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-bottom: 20px; }
.dash-rstack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash-title { font-size: 15.5px; gap: 10px; }
.dash-title i.ti { font-size: 21px; color: var(--text-3); }
.panel-head-right { display: inline-flex; align-items: center; gap: 8px; }

.stat-card.stat-lead { display: flex; align-items: center; gap: 14px; }
.stat-lead .stat-ic { width: 46px; height: 46px; border-radius: 12px; font-size: 23px; }
.stat-lead .stat-body { min-width: 0; }
.stat-lead .stat-label { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.stat-lead .stat-num { font-size: 26px; margin-top: 2px; }
.stat-lead .stat-sub { margin-top: 2px; }
.stat-ic--indigo { background: var(--pri-soft);    color: var(--pri-text); }
.stat-ic--green  { background: var(--green-soft);  color: var(--green-strong); }
.stat-ic--blue   { background: var(--blue-soft);   color: var(--blue-text); }
.stat-ic--violet { background: var(--violet-soft); color: var(--violet-text); }
.stat-ic--amber  { background: var(--amber-soft);  color: var(--amber-strong); }
.stat-ic--red    { background: var(--red-soft);    color: var(--red-strong); }

/* staafgrafiek (open werk per key user) */
.chart-legend { display: inline-flex; align-items: center; gap: 16px; }
.chart-legend .lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.chart-legend .sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; }
.chart-scroll { overflow-x: auto; }
.bar-chart { display: block; min-width: 560px; }
.bar-chart .grid { stroke: var(--border); stroke-width: 1; }
.bar-chart .axis { stroke: var(--border-3); stroke-width: 1; }
.bar-chart .ylab { fill: var(--text-faint); font-size: 11px; text-anchor: end; }
.bar-chart .xlab { fill: var(--text-2); font-size: 11px; text-anchor: end; }
.bar-chart .vlab { fill: var(--text-3); font-size: 11px; font-weight: 600; text-anchor: middle; }
.bar-chart .b-steps { fill: var(--amber); }
.bar-chart .b-imps { fill: var(--pri); }
.bar-chart .bar-group.clickable { cursor: pointer; }
.bar-chart .bar-group.clickable:hover .b-steps { fill: var(--amber-strong); }
.bar-chart .bar-group.clickable:hover .b-imps { fill: var(--pri-hover); }

/* ============ dashboard (herontwerp) ============ */
.panel .panel-pad { padding: 12px 16px 14px; }

/* begroeting + fase/MVP-controls */
.dash-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.dash-hello { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.dash-subtitle { color: var(--text-3); font-size: 13.5px; margin-top: 4px; }
.dash-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.dash-filter { position: relative; }
.dash-filter-btn .caret { font-size: 15px; color: var(--text-faint); }
.dash-filter-btn.active { border-color: var(--pri); color: var(--pri-text); background: var(--pri-soft); }
.dash-filter-count { background: var(--pri); color: #fff; border-radius: var(--r-pill); font-size: 11px; padding: 0 6px; margin-left: 2px; }
.dash-fasemenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 230px;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 8px; }
.dfm-title { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px 6px; }
.dfm-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border: none; background: transparent;
  border-radius: var(--r); cursor: pointer; font-size: 13px; color: var(--text); text-align: left; }
.dfm-row:hover { background: var(--surface-2); }
.dfm-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-3); display: inline-flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.dfm-check .ic { font-size: 13px; opacity: 0; }
.dfm-row.on .dfm-check { background: var(--pri); border-color: var(--pri); }
.dfm-row.on .dfm-check .ic { opacity: 1; }
.dfm-clear { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 4px; padding: 8px 9px; border: none; border-top: 1px solid var(--border);
  background: transparent; cursor: pointer; font-size: 12.5px; color: var(--text-2); border-radius: 0 0 var(--r) var(--r); }
.dfm-clear:hover { color: var(--text); }

.dz-switch { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--border-2); background: var(--surface);
  border-radius: var(--r-pill); padding: 6px 13px 6px 8px; cursor: pointer; font-size: 13px; color: var(--text-2); }
.dz-switch-track { width: 32px; height: 18px; border-radius: 999px; background: var(--border-3); position: relative; transition: background .15s ease; flex: none; }
.dz-switch-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s ease; }
.dz-switch.on { color: var(--text); border-color: var(--pri); }
.dz-switch.on .dz-switch-track { background: var(--pri); }
.dz-switch.on .dz-switch-thumb { left: 16px; }

/* stat-kaart met bevestigd-voortgang */
.stat-prog-card .stat-body { flex: 1; min-width: 0; }
.stat-prog { margin-top: 10px; }
.stat-prog .bar { height: 6px; }
.stat-prog-label { font-size: 11.5px; color: var(--text-3); margin-top: 5px; }

/* twee-koloms rij (intake + AI-taken) en drie-koloms rij (domein/review/verifiëren) */
.dash-split-intake { grid-template-columns: 1.2fr 1fr; }
.dash-tri { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: start; margin-bottom: 20px; }

/* intake-volledigheid */
.intake-row { padding: 10px 0; border-bottom: 1px solid var(--sunken); }
.intake-row:last-child { border-bottom: none; }
.intake-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.intake-name { font-weight: 500; font-size: 13px; }
.intake-meta { font-size: 12px; color: var(--text-3); }

/* openstaande AI-taken */
.ai-task { display: flex; align-items: center; gap: 11px; padding: 10px 4px; margin: 0 -4px; border-bottom: 1px solid var(--sunken); border-radius: var(--r); }
.ai-task:last-child { border-bottom: none; }
.ai-task.clickable { cursor: pointer; transition: background .12s ease; }
.ai-task.clickable:hover { background: var(--surface-2); }
.ai-task-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--violet-soft); color: var(--violet-text);
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex: none; }
.ai-task-body { flex: 1; min-width: 0; }
.ai-task-title { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-task-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.ai-task-actions { display: flex; gap: 6px; flex: none; }
.btn.ai-accept { background: var(--green-soft); border-color: transparent; color: var(--green-strong); }
.btn.ai-accept:hover { background: #d6f0e0; }
.ai-task-more { padding: 12px 0 2px; font-size: 12.5px; }
.dash-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 26px 10px; color: var(--text-3); }
.dash-empty .ic { font-size: 26px; color: var(--green-strong); }

/* voortgang per domein — gekleurde balken */
.bar-fill.b-hi { background: var(--green); }
.bar-fill.b-mid { background: var(--amber); }
.bar-fill.b-lo { background: var(--red); }
.bar-name { font-weight: 500; font-size: 13px; }
.bar-meta { font-size: 12px; color: var(--text-3); }

/* review-kwaliteit — grote donut + regels met toelichting (vult de hoogte van Te verifiëren) */
.rq-caption { font-size: 12.5px; color: var(--text-3); margin-bottom: 12px; }
.rq-wrap { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.rq-donut { flex: none; align-self: center; }
.rq-pct { font: 600 30px var(--font); fill: var(--text); letter-spacing: -.02em; }
.rq-cap { font: 500 10px var(--font); fill: var(--text-3); }
.rq-rows { display: flex; flex-direction: column; gap: 9px; }
.rq-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); }
.rq-row.clickable { cursor: pointer; transition: background .12s ease; }
.rq-row.clickable:hover { background: var(--surface-2); border-color: var(--border-2); }
.rq-dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.rq-text { display: flex; flex-direction: column; min-width: 0; }
.rq-label { font-size: 13px; font-weight: 500; color: var(--text); }
.rq-desc { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.rq-num { font-weight: 600; font-size: 17px; margin-left: auto; }
.rq-arrow { color: var(--text-faint); font-size: 15px; }

/* te-verifiëren lijst */
.verify-row { display: flex; align-items: center; gap: 11px; padding: 11px 10px; margin: 0 -10px; border-bottom: 1px solid var(--sunken); border-radius: var(--r); }
.verify-row:last-child { border-bottom: none; }
.verify-row.clickable { cursor: pointer; transition: background .12s ease; }
.verify-row.clickable:hover { background: var(--surface-2); }
.verify-ic { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.verify-ic--amber { background: var(--amber-soft); color: var(--amber-strong); }
.verify-ic--red { background: var(--red-soft); color: var(--red-strong); }
.verify-ic--green { background: var(--green-soft); color: var(--green-strong); }
.verify-label { flex: 1; font-size: 13px; color: var(--text-2); }
.verify-count { font-weight: 600; font-size: 15px; }
.verify-arrow { color: var(--text-faint); font-size: 15px; }

/* gefilterd-op chip op de Processen-pagina */
.pids-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--pri-soft); color: var(--pri-text);
  border-radius: var(--r-pill); padding: 5px 11px; font-size: 12.5px; font-weight: 500; }
.pids-chip .ic { font-size: 14px; }

@media (max-width: 1100px) {
  .dash-tri { grid-template-columns: 1fr; }
  .dash-split-intake { grid-template-columns: 1fr; }
}

/* ============ Beslissingen (herontwerp) ============ */
.dec-header { margin-bottom: 20px; }
.dec-header .dash-hello { font-size: 24px; }
.dec-stats { margin-bottom: 20px; }

.dec-main { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: stretch; margin-bottom: 16px; }
.dec-bottom { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: stretch; }
.dec-bottom-3 { grid-template-columns: 1.2fr 1fr 1fr; }

/* proceslijst */
.dec-listpanel { display: flex; flex-direction: column; }
.dec-filterbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.dec-search { flex: 1 1 160px; min-width: 140px; }
.dec-filterbar .filter-select { flex: 0 0 auto; }
#dz-dec-listwrap { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dec-tbl-scroll { overflow-x: auto; flex: 1; }
.dec-table2 { width: 100%; border-collapse: collapse; font-size: 13px; }
.dec-table2 th { text-align: left; font-size: 11px; font-weight: 600; color: var(--text-3); padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.dec-table2 td { padding: 9px 12px; border-bottom: 1px solid var(--sunken); vertical-align: middle; white-space: nowrap; }
.dec-table2 .tc-center, .dec-table2 th.tc-center { text-align: center; }
.dec-table2 .tc-right, .dec-table2 th.tc-right { text-align: right; }
.dec-row { cursor: pointer; transition: background .12s ease; }
.dec-row:hover { background: var(--surface-2); }
.dec-row.selected { background: var(--pri-soft); box-shadow: inset 3px 0 0 var(--pri); }
.dec-row.selected:hover { background: var(--pri-soft); }
.dec-proc { font-weight: 500; color: var(--text); }
.dec-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--border); font-size: 12px; flex-wrap: wrap; }
.dec-pager-ctrl { display: inline-flex; align-items: center; gap: 4px; }
.dec-pagenum { min-width: 26px; height: 26px; border: 1px solid var(--border-2); background: var(--surface); border-radius: var(--r-sm); font-size: 12px; cursor: pointer; color: var(--text-2); }
.dec-pagenum:hover { background: var(--surface-2); }
.dec-pagenum.active { background: var(--pri); border-color: var(--pri); color: #fff; }

/* toggle "alleen open besluiten" (label links, schakelaar rechts) */
.dec-openswitch { margin-left: auto; }

/* procesbesluit-detail */
.dec-detail .panel-pad { display: flex; flex-direction: column; gap: 12px; }
.dec-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dec-detail-title { font-size: 16px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 6px; }
.dec-box { border: 1px solid var(--border); border-radius: var(--r); padding: 11px 12px; background: var(--surface-2); }
.dec-box-title { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.dec-box-title--row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.dec-mvp-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; border-radius: var(--r-pill); padding: 2px 9px; }
.dec-mvp-badge .ic { font-size: 14px; }
.dec-mvp-badge.yes { background: var(--green-soft); color: var(--green-strong); }
.dec-mvp-badge.no { background: var(--slate-soft); color: var(--text-3); }
/* Procesnotities: inklapbaar. De kop is een knop; de hint maakt duidelijk of er tekst is. */
.dec-notitie-toggle { border: none; background: transparent; cursor: pointer; padding: 0; margin: 0; }
.dec-notitie-toggle:hover { color: var(--text-2); }
.dec-notitie-hint { display: inline-flex; align-items: center; gap: 7px; }
.dec-notitie-hint .ic { font-size: 15px; color: var(--text-faint); }
.dec-notitie { margin-top: 8px; }
.dec-sum-row { display: flex; gap: 10px; justify-content: space-between; padding: 3px 0; font-size: 12.5px; }
.dec-sum-k { color: var(--text-3); flex: none; }
.dec-sum-v { color: var(--text); text-align: right; }
.dec-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dec-notitie { font-size: 12.5px; color: var(--text-2); line-height: 1.55; white-space: pre-wrap; max-height: 160px; overflow-y: auto; }
.dec-besluit-box { background: var(--surface); }
.dec-besluit { display: flex; border: 1px solid var(--border-2); border-radius: var(--r); overflow: hidden; }
.seg-btn { flex: 1; padding: 8px 6px; border: none; border-right: 1px solid var(--border); background: var(--surface); cursor: pointer;
  font-size: 12.5px; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; gap: 5px; transition: background .12s ease; }
.seg-btn:last-child { border-right: none; }
.seg-btn:hover { background: var(--surface-2); }
.seg-btn.active { font-weight: 600; }
.seg-btn.active.is-green { background: var(--green-soft); color: var(--green-strong); }
.seg-btn.active.is-amber { background: var(--amber-soft); color: var(--amber-strong); }
.seg-btn.active.is-slate { background: var(--slate-soft); color: var(--slate-text); }
.dec-op-label { display: block; font-size: 11.5px; color: var(--text-3); margin: 12px 0 5px; }
.dec-op { width: 100%; resize: vertical; font-family: inherit; font-size: 12.5px; }

/* beslispunten */
.dec-agenda-body { display: flex; }
.dec-agenda-list { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.dec-agenda-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; color: var(--text-2); }
.dec-agenda-n { width: 22px; height: 22px; border-radius: 50%; background: var(--pri-soft); color: var(--pri-text); font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }

/* sfeerbeeld (login-afbeelding) */
.dec-hero { overflow: hidden; padding: 0; min-height: 180px; }
.dec-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* open acties op dit proces */
.dec-actions { display: flex; flex-direction: column; gap: 8px; }
.dec-action { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); cursor: pointer; transition: background .12s ease; }
.dec-action:hover:not(.done) { background: var(--surface-2); border-color: var(--border-2); }
.dec-action.done { cursor: default; opacity: .8; }
.dec-action-ic { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.dec-action-ic--violet { background: var(--violet-soft); color: var(--violet-text); }
.dec-action-ic--amber { background: var(--amber-soft); color: var(--amber-strong); }
.dec-action-ic--blue { background: var(--blue-soft); color: var(--blue-text); }
.dec-action-ic--indigo { background: var(--pri-soft); color: var(--pri-text); }
.dec-action-ic--green { background: var(--green-soft); color: var(--green-strong); }
.dec-action-label { flex: 1; font-size: 13px; color: var(--text-2); }
.dec-action-count { font-weight: 600; font-size: 15px; }
.dec-action-arr { color: var(--text-faint); font-size: 15px; }

@media (max-width: 1100px) {
  .dec-main { grid-template-columns: 1fr; }
  .dec-bottom, .dec-bottom-3 { grid-template-columns: 1fr; }
}

.chart-wrap { padding: 8px 4px 0; }
.chart-empty { padding: 26px 8px; color: var(--text-3); }
.session-pts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.session-pt { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-pill); padding: 4px 7px 4px 11px; font-size: 11.5px; color: var(--text-2); }
.session-pt .rm { display: inline-flex; cursor: pointer; color: var(--text-faint); }
.session-pt .rm:hover { color: var(--red-strong); }

/* ---------------------------------------------------------------- settings */
.list-editor { display: flex; flex-direction: column; }
.list-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.list-input { flex: 1; min-width: 0; }
.list-tools { display: flex; gap: 2px; flex: none; }
.list-add { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.list-add .input { max-width: 300px; }
.pw-wrap { position: relative; }
.pw-wrap .input { width: 100%; padding-right: 38px; }
.list-add .pw-wrap { flex: 1; min-width: 0; max-width: 300px; }
.pw-toggle { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-3); cursor: pointer; padding: 5px; border-radius: 6px; line-height: 0; }
.pw-toggle:hover { color: var(--text-2); background: var(--sunken); }
.pw-toggle .ic { font-size: 16px; }

/* ---- avatars (initialen) ---- */
.dz-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font-size: 12.5px; font-weight: 600; flex: none; letter-spacing: .01em; }
.dz-avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.dz-avatar-slate  { background: var(--slate-soft);  color: var(--slate-text); }
.dz-avatar-blue   { background: var(--blue-soft);   color: var(--blue-text); }
.dz-avatar-violet { background: var(--violet-soft); color: var(--violet-text); }
.dz-avatar-green  { background: var(--green-soft);  color: var(--green-strong); }
.dz-avatar-amber  { background: var(--amber-soft);  color: var(--amber-strong); }
.dz-avatar-red    { background: var(--red-soft);    color: var(--red-strong); }

/* ---- live presence-indicator (wie zit ook op dit proces) ---- */
.presence-slot { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 4px; border-radius: 999px;
  background: var(--amber-soft); color: var(--amber-strong); font-size: 12.5px; font-weight: 500; white-space: nowrap; min-width: 0; }
.presence-slot[hidden] { display: none; }
.presence-avs { display: inline-flex; align-items: center; }
.presence-avs .dz-avatar-sm { width: 24px; height: 24px; font-size: 10px; box-shadow: 0 0 0 2px var(--amber-soft); }
.presence-avs .dz-avatar-sm + .dz-avatar-sm { margin-left: -8px; }
.presence-txt { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 880px) { .presence-txt { display: none; } }

/* ---- Platform admin ---- */
/* Herbouwd naar het ontwerp "Platform admin.dc.html": actiebalk, statstrip, en een twee-koloms
   werkblad met links een scrollende tenantlijst en rechts een detailpaneel met tabbladen. */
.pa-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; }
.pa-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 10px; margin-bottom: 12px; }
.pa-stat { padding: 11px 13px; }
.pa-stat .stat-num { font-size: 22px; margin-top: 6px; }
.pa-stat .stat-sub { font-size: 11.5px; }
.pa-stat .stat-ic { width: 26px; height: 26px; font-size: 15px; }
.pa-bar { height: 5px; border-radius: 999px; background: var(--sunken); margin-top: 7px; overflow: hidden; }
.pa-bar > span { display: block; height: 100%; border-radius: 999px; }
.pa-av-row { display: flex; align-items: center; margin-top: 8px; min-height: 24px; }
.pa-av-stack { margin-left: -8px; }
/* Werkblad: de twee panelen delen de hoogte en scrollen ieder van binnen, zodat de kop en de
   statstrip in beeld blijven terwijl je door tenants loopt. */
/* VASTE hoogte, niet inhoud-gestuurd: anders rekt de tenantlijst links mee met het tabblad dat
   rechts openstaat (lang bij Versies, kort bij Fouten). Beide panelen krijgen dezelfde hoogte en
   scrollen van binnen, dus links staat stil terwijl je rechts van tabblad wisselt. */
.pa-work { display: grid; grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); gap: 12px; align-items: stretch;
  height: clamp(520px, calc(100dvh - 300px), 860px); }
.pa-work > .panel { display: flex; flex-direction: column; min-height: 0; height: 100%; }
@media (max-width: 1100px) {
  .pa-work { grid-template-columns: 1fr; height: auto; }
  .pa-work > .panel { height: auto; max-height: 70dvh; }
}
/* linkerkolom: zoek + statuspillen + rijen */
.pa-tenants-filter { padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--border); }
.pa-tenants-filter .phase-filter { margin: 0; }
.pa-tenants-list { flex: 1; min-height: 0; overflow-y: auto; }
.pa-trow {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  width: 100%; text-align: left; padding: 9px 14px; border: none; border-bottom: 1px solid var(--sunken);
  background: transparent; cursor: pointer; font: inherit;
}
.pa-trow:hover { background: var(--surface-2); }
.pa-trow.sel { background: var(--pri-soft); box-shadow: inset 3px 0 0 var(--pri); }
.pa-trow-main { min-width: 0; display: block; }
.pa-trow-naam { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pa-trow-naam .proc-name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-trow-naam .ti-crown { font-size: 13px; color: var(--amber-strong); flex: none; }
.pa-trow-r { display: flex; align-items: center; gap: 8px; flex: none; }
.pa-trow-ai { font-size: 11.5px; color: var(--text-3); text-align: right; }
/* rechterkolom: kop, tabrij, body */
.pa-detail-head { padding: 10px 14px; gap: 10px; }
.pa-detail-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-detail-slug { font-size: 11.5px; color: var(--text-faint); font-weight: 400; }
.pa-tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); overflow-x: auto; }
.pa-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: none; background: transparent;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--text-3); border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
}
.pa-tab .ic { font-size: 16px; }
.pa-tab:hover { color: var(--text); }
.pa-tab.on { font-weight: 600; color: var(--pri-text); border-bottom-color: var(--pri); }
.pa-detail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; }
/* tab Overzicht */
.pa-kvgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 14px; }
.pa-kv { padding: 9px 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); min-width: 0; }
.pa-overzicht { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1180px) { .pa-overzicht { grid-template-columns: 1fr; } }
/* tab Feature flags */
.pa-flags { display: flex; flex-direction: column; gap: 8px; }
.pa-flag { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.pa-flag-ic { font-size: 17px; color: var(--text-3); flex: none; }
.pa-flag-main { min-width: 0; flex: 1; }
/* tab Fouten */
.pa-fouten-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
/* ---- Gebruikers (ontwerp "Gebruikers.dc.html") ----
   Hergebruikt het werkblad van Platform admin (.pa-work / .pa-trow / .pa-tabs); hieronder alleen
   wat deze pagina extra heeft: de actiebalk met periodekiezer, de kostenkolom in de lijst, en de
   staafjes/uitsplitsing op het Kosten-tabblad. */
.gb-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.gb-spacer { flex: 1; min-width: 10px; }
.gb-periode { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-pill); }
.gb-periode .muted { font-size: 11.5px; }
.gb-kosten { text-align: right; line-height: 1.25; }
.gb-kosten .mono { display: block; font-size: 12.5px; font-weight: 500; }
.gb-kosten-sub { display: block; font-size: 10.5px; color: var(--text-faint); }
/* detail: twee kolommen op het Profiel- en Kosten-tabblad */
.gb-2col { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.gb-2col-k { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .85fr); gap: 16px; align-items: start; }
@media (max-width: 1180px) { .gb-2col, .gb-2col-k { grid-template-columns: 1fr; } }
.gb-sec-t { font-size: 11.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 9px; display: flex; align-items: center; gap: 8px; }
.gb-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 11px 12px; }
.gb-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gb-f .label { margin: 0; }
.gb-ro { font-size: 13.5px; padding: 7px 0; color: var(--text-2); overflow-wrap: anywhere; }
.gb-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; padding: 7px 0; }
.gb-rows { display: flex; flex-direction: column; gap: 8px; }
.gb-card { padding: 12px 13px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.gb-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.gb-big { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.gb-proj { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--sunken); }
.gb-proj .ti-folder { font-size: 16px; color: var(--text-3); flex: none; }
/* Kosten-tab: staafjes per maand + uitsplitsing per AI-functie */
.gb-bars { display: flex; align-items: flex-end; gap: 12px; height: 132px; }
.gb-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; min-width: 0; }
.gb-bar-v { font-size: 11px; color: var(--text-3); }
.gb-bar-b { width: 100%; max-width: 38px; border-radius: 6px 6px 0 0; display: block; }
.gb-bar-l { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.gb-bars-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--sunken); font-size: 11.5px; }
.gb-fn { display: grid; grid-template-columns: minmax(0, 1fr) 120px 74px; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.gb-fn-n { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-fn-bar { height: 6px; border-radius: 999px; background: var(--sunken); overflow: hidden; display: block; }
.gb-fn-bar > span { display: block; height: 100%; background: var(--pri); }
.gb-fn-c { font-size: 12.5px; text-align: right; }
.gb-mini { width: 74px; height: 6px; border-radius: 999px; background: var(--sunken); overflow: hidden; display: block; flex: none; }
.gb-mini > span { display: block; height: 100%; }
.gb-recht { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-2); }
.gb-rechten { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 14px; }
@media (max-width: 1180px) { .gb-fn { grid-template-columns: minmax(0, 1fr) 74px; } .gb-fn-bar { display: none; } }

/* tab Feature-agent: velden naast elkaar i.p.v. een keuzelijst over de volle breedte. */
.pa-agent { display: flex; flex-direction: column; gap: 12px; }
.pa-agent-note { display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px; margin-bottom: 12px;
  background: var(--blue-soft); color: var(--blue-text); border-radius: var(--r); font-size: 12.5px; line-height: 1.45; }
.pa-agent-note .ic { flex: none; margin-top: 1px; }
.pa-agent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.pa-agent-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pa-agent-f .select, .pa-agent-f .input { width: 100%; }
.pa-agent-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px; }

.pa-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.pa-head-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.pa-cols { display: grid; grid-template-columns: minmax(340px, 0.85fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .pa-cols { grid-template-columns: 1fr; } }
.pa-row { cursor: pointer; transition: background .12s ease; }
.pa-row:hover { background: var(--surface-2); }
.pa-row.sel { background: var(--pri-soft); }
.pa-row.sel td:first-child { box-shadow: inset 3px 0 0 var(--pri); }
.pa-section-title { font-size: 11.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.pa-detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.pa-detail-grid.pa-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .pa-detail-grid, .pa-detail-grid.pa-grid-3 { grid-template-columns: repeat(2, 1fr); } }
.pa-kv-l { font-size: 11px; color: var(--text-3); font-weight: 600; margin-bottom: 3px; }
.pa-kv-v { font-size: 13.5px; color: var(--text); }
.pa-projpick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); }
.pa-proj { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--sunken); }
.pa-proj:last-of-type { border-bottom: none; }
.pa-proj .ic { color: var(--text-3); }
.pa-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pa-pager-btns { display: flex; gap: 4px; }
.pa-page { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid var(--border-2); background: var(--surface); border-radius: var(--r-sm); font: inherit; font-size: 12.5px; color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pa-page:hover { background: var(--sunken); }
.pa-page.on { background: var(--pri); border-color: var(--pri); color: #fff; }
.pa-page[disabled] { opacity: .4; cursor: not-allowed; }
.mono { font-family: var(--mono); font-size: 12.5px; }

/* ---- Platform admin: gebruikers per rol (secties met kaarten) ---- */
.pa-user-group { margin: 0 0 16px; }
.pa-group-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.pa-user-list { display: flex; flex-direction: column; gap: 8px; }
.pa-user { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.pa-user-id { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 2 1 220px; }
.pa-user-name { font-weight: 600; font-size: 13.5px; padding: 1px 0; width: 100%; }
.pa-user-status { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: 0 0 auto; }
.pa-user-act { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.pa-create { margin-top: 18px; padding: 14px 14px; border: 1px dashed var(--border-2); border-radius: var(--r); background: var(--surface-2); }
.pa-create .pa-section-title { margin-top: 0; }
@media (max-width: 640px) {
  .pa-user { flex-wrap: wrap; }
  .pa-user-act { margin-left: 0; }
}

/* ---- sidebar BEHEER-sectie + gebruikersblok ---- */
.side-section { font-size: 10.5px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; padding: 14px 10px 5px; }
.side-user { display: flex; align-items: center; gap: 4px; padding: 6px; margin-top: auto; border-top: 1px solid var(--border); }
.side-user-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 6px; border: none; background: none; cursor: pointer; border-radius: var(--r); text-align: left; color: inherit; font: inherit; }
.side-user-main:hover { background: var(--sunken); }
.side-user-body { flex: 1; min-width: 0; line-height: 1.2; }
.side-user-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user-role { font-size: 11px; color: var(--text-3); }
.side-user-logout { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: var(--text-3); cursor: pointer; border-radius: var(--r); }
.side-user-logout:hover { background: var(--sunken); color: var(--red-strong); }
.app.side-collapsed .side-section { display: none; }
.app.side-collapsed .side-user { justify-content: center; }
.app.side-collapsed .side-user-body, .app.side-collapsed .side-user-logout { display: none; }
.app.side-collapsed .side-user-main { justify-content: center; }
.subsection { margin-bottom: 18px; }
.subsection:last-child { margin-bottom: 0; }
.subsection-title { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 7px; }
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--sunken); }
.opt-row:last-child { border-bottom: none; }
.opt-row span { font-size: 13.5px; color: var(--text); }
.cost-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

/* settings: sub-navigatie (tabs) + paginakop */
.settings-nav { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.settings-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px;
  border: none; background: none; font: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s ease;
}
.settings-tab:hover { color: var(--text); }
.settings-tab.active { color: var(--pri-text); border-bottom-color: var(--pri); }
.settings-tab .ic { font-size: 17px; color: var(--text-3); }
.settings-tab.active .ic { color: var(--pri-text); }
.settings-head { margin-bottom: 16px; }
.settings-h2 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
/* AI-instellingen: 2-koloms layout */
.ai-settings-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.ais-col { min-width: 0; }
.ais-section-h { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; margin: 22px 2px 10px; color: var(--text); }
.ais-section-h:first-child { margin-top: 2px; }
.ais-section-h .ic { color: var(--pri-text); font-size: 17px; }
.ais-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 0 0 8px; }
@media (max-width: 1100px) { .ai-settings-grid { grid-template-columns: 1fr; } }
/* Afgeschermd verbruik (rol Consultant): geblurde facsimile met slot-overlay — laat zien DÁT er data is. */
.ais-locked { position: relative; margin-bottom: 12px; }
.ais-locked-content { filter: blur(5px); opacity: 0.5; pointer-events: none; user-select: none; }
.ais-locked-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; text-align: center; padding: 16px; }
.ais-locked-badge { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh); color: var(--text-2); }
.ais-locked-badge .ic { font-size: 21px; }
.ais-locked-title { font-weight: 600; font-size: 14px; color: var(--text); }
.ais-locked-sub { font-size: 12.5px; color: var(--text-3); max-width: 340px; }
/* instructiekaarten */
.ais-instr-head { display: flex; align-items: center; gap: 10px; }
.ais-instr-ico, .ais-ctx-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; flex: none; }
.ais-instr-ico .ic, .ais-ctx-ico .ic { font-size: 18px; }
.ais-instr-body { margin-top: 10px; }
.ais-instr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ais-prompt-full { font-size: 12.5px; line-height: 1.5; white-space: pre-line; background: var(--bg-2, #f8fafc); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; color: var(--text-2); max-height: 230px; overflow: auto; }
@media (max-width: 880px) { .ais-instr-cols { grid-template-columns: 1fr; } }
/* verbruik-tabellen + grafiek */
.ais-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 1100px) { .ais-two { grid-template-columns: 1fr; } }
.ais-tbl { width: 100%; border-collapse: collapse; }
.ais-tbl th, .ais-tbl td { padding: 6px 8px; font-size: 12.5px; border-bottom: 1px solid var(--border, #eceef2); text-align: left; }
.ais-tbl th { font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.ais-tbl .num { text-align: right; white-space: nowrap; }
.ais-tbl tbody tr:last-child td { border-bottom: none; }
.ais-viewall, .ais-link { background: none; border: none; color: var(--pri-text); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; padding: 2px 0; display: inline-flex; align-items: center; gap: 4px; }
.ais-viewall:hover, .ais-link:hover { text-decoration: underline; }
/* tenant-context rijen */
.ais-ctx-row { display: flex; gap: 11px; padding: 11px 0; border-top: 1px solid var(--border, #eceef2); }
.ais-ctx-row:first-child { border-top: none; }
.ais-ctx-body { min-width: 0; flex: 1; }
.ais-ctx-label { font-size: 11.5px; color: var(--text-3); margin-bottom: 2px; }
.ais-ctx-value { font-size: 13px; line-height: 1.4; }
.ais-inp { width: 100%; }
.ais-ta { width: 100%; border: 1px solid var(--border, #ddd); border-radius: 8px; padding: 8px; font: inherit; font-size: 12.5px; resize: vertical; }
.settings-lead { color: var(--text-2); font-size: 13.5px; margin: 4px 0 0; max-width: 86ch; line-height: 1.55; }

/* keuzelijsten: kaart per dropdown, met grote vette titel */
.enum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.enum-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); padding: 16px 18px; }
.enum-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.enum-card-title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.enum-card-hint { font-size: 11px; color: var(--text-3); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.enum-card-hint i { font-size: 13px; }
.enum-card-desc { font-size: 12px; color: var(--text-3); margin: 3px 0 12px; }

/* kleurstip + kiezer voor een badge-waarde */
.swatch-wrap { position: relative; flex: none; display: inline-flex; }
.swatch {
  width: 18px; height: 18px; border-radius: 50%; padding: 0; cursor: pointer; display: block;
  border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border-3);
  transition: box-shadow .12s ease, transform .12s ease;
}
.swatch:hover { transform: scale(1.08); }
.swatch:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--border-3), 0 0 0 4px var(--ring); }
.swatch.open { box-shadow: 0 0 0 1px var(--border-3), 0 0 0 3px var(--ring); }
.swatch-slate  { background: #6B7280; }
.swatch-blue   { background: #2F6FD6; }
.swatch-violet { background: #7C3AED; }
.swatch-green  { background: #2FA060; }
.swatch-amber  { background: #E0A93B; }
.swatch-red    { background: #D64550; }
.swatch-pop {
  position: absolute; top: 26px; left: -6px; z-index: 30; display: flex; gap: 7px;
  padding: 8px; background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r); box-shadow: var(--sh-2);
}
.swatch-pop .swatch { width: 20px; height: 20px; }
.swatch-pop .swatch.sel { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--pri); }

/* ---------------------------------------------------------------- projectplan / report */
.report-actions { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 8px; }
.report-title { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.report-sub { color: var(--text-2); font-size: 14px; margin-top: 4px; }
.report-complete { color: var(--text-3); font-size: 12.5px; margin-top: 8px; }
.report-head { margin-bottom: 18px; }
.report-narr { color: var(--text-2); max-width: 90ch; margin: 0 0 18px; line-height: 1.6; }
.report-note { font-size: 12px; padding: 10px 16px 14px; max-width: 92ch; margin: 0; }
.report-list { margin: 0; padding-left: 18px; color: var(--text-2); }
.report-list li { margin: 5px 0; }

/* projectplan > Kosten: modelparameter-tegels + berekeningslijst */
.param-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.param-tile { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; }
.param-label { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.param-val { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin-top: 4px; line-height: 1.2; }
.param-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 3px; }

.calc-list { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.calc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 14px; border-bottom: 1px solid var(--sunken); font-size: 13.5px; }
.calc-row:last-child { border-bottom: none; }
.calc-label { color: var(--text-2); }
.calc-val { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; color: var(--text); }
.calc-row.calc-sub { background: var(--surface-2); }
.calc-row.calc-sub .calc-label, .calc-row.calc-sub .calc-val { color: var(--text); font-weight: 600; }
.calc-row.calc-total { background: var(--pri-soft); }
.calc-row.calc-total .calc-label, .calc-row.calc-total .calc-val { color: var(--pri-text); font-weight: 600; }
.calc-row.calc-cost { background: var(--pri); }
.calc-row.calc-cost .calc-label { color: #fff; font-weight: 600; }
.calc-row.calc-cost .calc-val { color: #fff; font-weight: 700; font-size: 16px; }

/* projectplan > Kosten: twee kolommen (links invoer/onderbouwing, rechts samenvatting + berekening) */
.kosten-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.kosten-main, .kosten-side { min-width: 0; }
.sec-num { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 6px; background: var(--pri-soft); color: var(--pri-text); font-size: 11.5px; font-weight: 700; margin-right: 3px; vertical-align: 1px; }
.summary-cards { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.summary-cards .stat-card { border-color: var(--border-2); }
.imp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: 1px; margin-right: 4px; }
.dz-table th.ta-right, .dz-table td.ta-right { text-align: right; }
.inline.ta-right { text-align: right; }
.int-table td:nth-child(2), .int-table th:nth-child(2),
.int-table td:nth-child(3), .int-table th:nth-child(3),
.int-table td:nth-child(4), .int-table th:nth-child(4) { width: 86px; }
.int-table td:nth-child(5), .int-table th:nth-child(5) { width: 34px; }
@media (max-width: 1100px) { .kosten-layout { grid-template-columns: 1fr; } }

/* Controle: raming-gezondheid (checklist vóór offerte) op de Kosten-pagina */
.ctrl-summary { display: inline-flex; gap: 6px; align-items: center; }
.ctrl-issues { display: flex; flex-direction: column; }
.ctrl-issue { display: flex; gap: 10px; align-items: flex-start; padding: 11px 16px; }
.ctrl-issue + .ctrl-issue { border-top: 1px solid var(--border); }
.ctrl-issue.ctrl-seen { opacity: .55; }
.ctrl-seen-btn { margin-left: auto; align-self: center; flex: none; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.ctrl-seen-btn:hover { background: var(--sunken); }
.ctrl-seen-btn.is-on { border-color: var(--green-strong); color: var(--green-strong); }
.ctrl-seen-btn[disabled] { cursor: default; opacity: .7; }
.ctrl-seen-by { font-size: 11.5px; margin-top: 3px; }
.ctrl-ic { flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 15px; }
.ctrl-error .ctrl-ic { background: var(--red-soft); color: var(--red-strong); }
.ctrl-warn .ctrl-ic { background: var(--amber-soft); color: var(--amber-strong); }
.ctrl-info .ctrl-ic { background: var(--pri-soft); color: var(--pri-text); }
.ctrl-title { font-weight: 600; font-size: 13px; color: var(--text); }
.ctrl-detail { color: var(--text-3); font-size: 12px; margin-top: 2px; }
.ctrl-clear { padding: 14px 16px; color: var(--text-2); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.ctrl-clear .ti { color: var(--green-strong); font-size: 16px; }
.int-rate-table { max-width: 380px; }
.int-rate-table th:nth-child(2), .int-rate-table td:nth-child(2) { width: 120px; }

/* projectplan: fase-filter (pill badges boven de stat-kaarten, op elke tab) */
.phase-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.phase-filter-label { font-size: 12px; font-weight: 600; color: var(--text-3); display: inline-flex; align-items: center; gap: 5px; }
.phase-filter-label .ic { font-size: 15px; }
.phase-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--border-2); background: var(--surface); color: var(--text-3); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.phase-pill:hover { border-color: var(--border-3); color: var(--text-2); }
.phase-pill.on { background: var(--pri-soft); border-color: transparent; color: var(--pri-text); }
.phase-pill .phase-count { font-size: 11px; background: rgba(20,24,40,.07); border-radius: var(--r-pill); padding: 0 6px; font-weight: 600; }
.phase-pill.on .phase-count { background: rgba(79,70,229,.16); }
.phase-pill.phase-all { font-weight: 600; }

/* MVP-fasen gegroepeerd in een box met een "In MVP" select-all-kop */
.phase-group { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; border: 1px solid var(--border-2); border-radius: var(--r-pill); background: var(--surface-2); }
.phase-group-head { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); border: none; background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .12s ease, color .12s ease; }
.phase-group-head .ic { font-size: 15px; }
.phase-group-head:hover { background: var(--sunken); color: var(--text); }
.phase-group-head.on { background: var(--pri); color: #fff; }
.phase-group-head.on .ic { color: #fff; }
.phase-group-pills { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* procespagina: integraties in de rechter rail */
.pint-item { padding: 8px 0; border-bottom: 1px solid var(--sunken); }
.pint-item:first-child { padding-top: 0; }
.pint-item:last-child { border-bottom: none; padding-bottom: 0; }
.pint-desc { font-size: 13px; font-weight: 500; }
.pint-row2 { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.pint-row2 .tag-select { flex: 1; min-width: 0; }
/* Koppelvlak-verrijking (applicatielandschap): van/naar-applicatie + stap, optioneel. */
.pint-row3 { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.pint-row3 .pint-appsel { flex: 1; min-width: 110px; font-size: 12px; }
.pint-row3 .pint-arrow { flex: 0 0 auto; font-size: 13px; color: var(--text-3); }

/* onderbouwing: filterbalk + weergave-toggle */
.ob-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ob-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.ob-toggle { display: inline-flex; background: var(--sunken); border-radius: var(--r); padding: 3px; gap: 2px; }
.ob-tab { padding: 6px 13px; border: none; background: transparent; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text-2); cursor: pointer; border-radius: var(--r-sm); }
.ob-tab:hover { color: var(--text); }
.ob-tab.active { background: var(--surface); color: var(--pri-text); box-shadow: var(--sh); }
.dz-table tr.sub td { font-weight: 600; background: var(--surface-2); border-top: 1px solid var(--border-2); }

/* projectplan > Kosten: projectinstellingen-sectie met tabs (factor / verbeteringen / integraties) */
.kosten-tabs { display: flex; gap: 2px; padding: 8px 14px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.kosten-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: none; background: none; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s ease; }
.kosten-tab:hover { color: var(--text); }
.kosten-tab.active { color: var(--pri-text); border-bottom-color: var(--pri); }
.kosten-tab .ic { font-size: 15px; color: var(--text-3); }
.kosten-tab.active .ic { color: var(--pri-text); }
.kosten-tabpane { padding: 14px 16px; }
.kosten-tabpane > .field { max-width: 280px; margin-bottom: 14px; }

/* integraties-tab: horizontale uurprijs-per-type (gebruikt de breedte) + max-3 lijst met uitklap */
.irate-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.irate { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r); padding: 6px 10px; }
.irate-lab { white-space: nowrap; }
.irate-inp { width: 74px; text-align: right; padding: 6px 8px; }
.irate-u { font-size: 11.5px; color: var(--text-3); }
.int-expand-bar { display: flex; justify-content: flex-end; padding: 10px 0 2px; }

/* onderbouwing > Per domein: rij-uitklap per domein, subrijen per omvang */
.row-toggle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; margin-right: 4px; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: var(--surface); color: var(--text-3); cursor: pointer; vertical-align: -5px; transition: background .12s ease, color .12s ease; }
.row-toggle:hover { background: var(--surface-2); color: var(--text); }
.row-toggle .ic { font-size: 14px; }
.dz-table tr.subrow td { background: var(--surface-2); color: var(--text-2); border-bottom: 1px solid var(--sunken); }
.dz-table tr.subrow td.sub-omv { padding-left: 44px; }

/* commandopalet (Ctrl/Cmd + K) */
.cmdp-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(20,24,40,.34); display: flex; align-items: flex-start; justify-content: center; padding: 12dvh 16px 16px; }
.cmdp-box { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; display: flex; flex-direction: column; max-height: 70dvh; }
.cmdp-search { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.cmdp-search .ic { font-size: 18px; color: var(--text-3); }
.cmdp-search input { flex: 1; border: none; outline: none; background: transparent; font: inherit; font-size: 15px; color: var(--text); }
.cmdp-list { overflow-y: auto; padding: 6px; }
.cmdp-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--r); cursor: pointer; }
.cmdp-item .ic { font-size: 16px; color: var(--text-3); flex: none; }
.cmdp-item.sel { background: var(--pri-soft); }
.cmdp-item.sel .ic { color: var(--pri-text); }
.cmdp-label { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdp-hint { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; flex: none; }
.cmdp-empty { padding: 22px; text-align: center; color: var(--text-3); font-size: 13px; }
.cmdp-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-faint); }
.cmdp-foot .ic { font-size: 13px; vertical-align: -2px; }

/* projectplan > Voorstel: klantgericht document (leesbare breedte, ook bij vol-breedte tabs) */
.voorstel { max-width: 880px; margin: 0 auto; }
.vs-section { margin: 0 0 30px; }
.vs-h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--border); }
.vs-section .dz-table { border: 1px solid var(--border); border-radius: var(--r); }
.vs-invest { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; padding: 18px 20px; background: var(--pri-soft); border: 1px solid var(--border-2); border-radius: var(--r-lg); }
.vs-invest-main { flex: 1; min-width: 240px; }
.vs-invest-label { font-size: 12.5px; font-weight: 600; color: var(--pri-text); }
.vs-invest-val { font-size: 32px; font-weight: 700; letter-spacing: -.02em; color: var(--text); line-height: 1.1; margin-top: 2px; }
.vs-invest-band { font-size: 13px; color: var(--text-2); margin-top: 5px; display: inline-flex; align-items: center; gap: 5px; }
.vs-invest-band .ic { font-size: 15px; color: var(--text-3); }
.vs-invest-meta { display: flex; flex-direction: column; gap: 7px; }
.vs-invest-meta > div { display: flex; justify-content: space-between; gap: 20px; font-size: 13px; }
.vs-invest-meta span { color: var(--text-3); }
@media print { .vs-section { break-inside: avoid; page-break-inside: avoid; } .vs-invest { background: #f3f3fb; } }

/* projectplan > Kosten: gevoeligheids-tornado (+10% per factor) */
.sens-list { display: flex; flex-direction: column; gap: 9px; }
.sens-row { display: grid; grid-template-columns: 160px 1fr 150px; align-items: center; gap: 12px; }
.sens-label { font-size: 12.5px; color: var(--text-2); }
.sens-track { height: 14px; background: var(--sunken); border-radius: var(--r-pill); overflow: hidden; }
.sens-bar { height: 100%; background: var(--pri); border-radius: var(--r-pill); min-width: 4px; }
.sens-bar.down { background: var(--amber); }
.sens-val { font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) { .sens-row { grid-template-columns: 1fr; gap: 3px; } .sens-val { text-align: left; } }
/* gevoeligheids-regelaar in de paneelkop */
.sens-ctrl { display: inline-flex; align-items: center; gap: 9px; }
.sens-slider { width: 140px; accent-color: var(--pri); cursor: pointer; }
.sens-ctrl-val { font-size: 12.5px; font-weight: 600; color: var(--pri-text); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }

/* projectplan: stat-kaart met onzekerheidsband (onder- en bovengrens onder de hoofdwaarde) */
.stat-range { font-size: 12px; color: var(--text-2); margin-top: 4px; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.stat-range .ic { font-size: 14px; color: var(--text-3); }
.stat-lead .stat-range { margin-top: 3px; }
.stat-unit { font-size: 14px; font-weight: 500; color: var(--text-3); letter-spacing: 0; }

/* projectplan > Kosten: klikbare berekening-rij (opent de overhead-tab) */
.calc-row.calc-click { cursor: pointer; }
.calc-row.calc-click:hover { background: var(--surface-2); }
.calc-row.calc-click .calc-label { color: var(--pri-text); }

/* per-omvang beschrijving inline naast de waarde (Instellingen + Kosten-tabs); vaste rijhoogte */
.size-desc { font-size: 12px; padding: 6px 9px; color: var(--text-2); }
.size-inline { display: flex; gap: 8px; align-items: center; }
.size-inline .size-num { width: 84px; flex: none; }
.size-inline .size-desc { flex: 1; min-width: 0; }
.kosten-tabpane td .size-desc { min-width: 150px; }

/* projectplan > Overhead: master-schakelaar + matrix per fase */
.ovh-toggle-row { display: flex; align-items: flex-start; gap: 12px; }
.ovh-toggle-title { font-size: 14px; font-weight: 600; }
.ovh-name { display: flex; align-items: center; gap: 7px; }
.ovh-grip { display: inline-flex; cursor: grab; color: var(--text-faint); flex: none; }
.ovh-grip:active { cursor: grabbing; }
.ovh-grip .ic { font-size: 16px; }
.ovh-naam { flex: 1; min-width: 130px; }
.ovh-check { width: 16px; height: 16px; flex: none; cursor: pointer; accent-color: var(--pri); }
.ovh-pct-cell { white-space: nowrap; }
.ovh-pct { width: 56px; text-align: right; }
.ovh-pct-sign { color: var(--text-3); margin-left: 2px; }
.ovh-door { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--border-2); background: var(--surface); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.ovh-door:hover { border-color: var(--border-3); }
.ovh-door.door-thinkwise { background: var(--pri-soft); color: var(--pri-text); border-color: transparent; }
.ovh-door.door-customer { background: var(--amber-soft); color: var(--amber-strong); border-color: transparent; }
.ovh-door.door-external { background: var(--slate-soft); color: var(--slate-text); border-color: transparent; }
.dz-table tr.ovh-row td { vertical-align: middle; }
.dz-table tr.ovh-off td { color: var(--text-faint); }
.dz-table tr.ovh-off .ovh-naam { color: var(--text-faint); }
.gantt { display: flex; gap: 3px; height: 30px; }
.gantt-seg { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; border-radius: var(--r-sm); }
.gantt-seg-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.gantt-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); margin-top: 6px; }
.report-cover { display: none; }
.cover-logo { width: 64px; height: 64px; border-radius: 15px; margin-bottom: 22px; }
.cover-kicker { font-size: 12.5px; color: var(--pri-text); font-weight: 600; letter-spacing: .02em; }
.cover-title { font-size: 32px; font-weight: 600; letter-spacing: -.02em; margin: 6px 0 2px; }
.cover-client { font-size: 16px; color: var(--text); }
.cover-date { font-size: 13px; color: var(--text-3); margin-top: 4px; }
.cover-stats { font-size: 13px; color: var(--text-2); margin-top: 22px; max-width: 70ch; line-height: 1.6; }

/* ---------------------------------------------------------------- first run */
.firstrun { min-height: 78vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.firstrun-card { max-width: 840px; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); overflow: hidden; display: flex; }
.firstrun-art { flex: 0 0 320px; align-self: stretch; background: var(--sunken); }
.firstrun-art img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; display: block; }
.firstrun-main { flex: 1; min-width: 0; padding: 38px 36px; }
.firstrun-main .mark { width: 50px; height: 50px; border-radius: 13px; margin-bottom: 18px; }
.firstrun-main h1 { font-size: 23px; }
.firstrun-main p { color: var(--text-2); margin: 10px 0 24px; max-width: 44ch; }
.firstrun-actions { display: flex; flex-direction: column; gap: 10px; }
.firstrun-actions .btn { justify-content: center; padding: 12px; font-size: 14px; }
.firstrun-hint { margin-top: 20px; font-size: 12px; color: var(--text-3); }
@media (max-width: 880px) {
  .firstrun-card { flex-direction: column; }
  .firstrun-art { flex: none; }
  .firstrun-art img { min-height: 0; height: 170px; }
}

/* ---------------------------------------------------------------- dropdown menu */
.haspop { position: relative; display: inline-flex; }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 230px; background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r); box-shadow: var(--sh-2); padding: 5px; overflow: hidden;
  /* Groeit uit zijn knop (staat rechtsboven) i.p.v. te verschijnen. allow-discrete stelt de
     display-wissel uit tot de exit klaar is, zodat het [hidden]-attribuut kan blijven werken
     zoals het is — geen refactor van closeMenus() en de toggles nodig. */
  transform-origin: top right;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              display var(--dur-fast) allow-discrete;
}
@starting-style { .menu:not([hidden]) { opacity: 0; transform: scale(.97); } }
.menu[hidden] { display: none; opacity: 0; transform: scale(.97); }
.menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 9px 11px; border: none; background: transparent; border-radius: var(--r-sm);
  font: inherit; font-size: 13px; color: var(--text); cursor: pointer;
}
.menu-item:hover { background: var(--sunken); }
.menu-item .ic { font-size: 16px; color: var(--text-3); }
.menu-head {
  padding: 8px 11px 3px; margin-top: 3px; border-top: 1px solid var(--border-2);
  font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text-3);
}
.menu-head:first-child { border-top: none; margin-top: 0; }

/* ---------------------------------------------------------- belletje (meldingen) */
.bell-btn { position: relative; }
.bell-btn.has-unread { color: var(--text); }
.bell-btn.has-unread .ic { color: var(--pri-text); }
.bell-badge {
  position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--red, #dc2626); color: #fff; font-size: 10px; font-weight: 700;
  line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--surface);
}
.bell-menu { min-width: 300px; max-width: 360px; max-height: 60vh; overflow-y: auto; }
.bell-item { flex-direction: column; align-items: flex-start; gap: 2px; }
.bell-item .bell-q { font-size: 13px; font-weight: 500; color: var(--text); white-space: normal; }
.bell-item .bell-meta { font-size: 11.5px; color: var(--text-3); white-space: normal; }
.bell-empty { padding: 12px 11px; font-size: 12.5px; color: var(--text-3); }

/* ---------------------------------------------------------------- toast */
.toast-wrap { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  display: inline-flex; align-items: center; gap: 9px; background: var(--text);
  color: #fff; border-radius: var(--r); padding: 10px 15px; font-size: 13px; box-shadow: var(--sh-2);
  /* Komt aan zoals hij vertrekt: van onderen. Was asymmetrisch (hard erin, zacht eruit),
     waardoor de belangrijkste bevestiging van de app makkelijk te missen was. */
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
@starting-style { .toast { opacity: 0; transform: translateY(8px); } }
.toast.is-weg { opacity: 0; transform: translateY(8px); }
.toast .ic { font-size: 17px; }
.toast.ok .ic { color: #7BE0A6; }
.toast.err { background: var(--red-strong); }
.toast-action { margin-left: 4px; background: rgba(255,255,255,.16); color: #fff; border: none; border-radius: var(--r-sm); padding: 4px 10px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.toast-action:hover { background: rgba(255,255,255,.28); }

/* =====================================================================================
   Motion-basis. Vier eerlijke signalen, geen versiering:
   een spinner die draait, een dialoog die niet in je klik springt, en (elders in dit
   bestand) een toast die aankomt zoals hij vertrekt en een menu dat uit zijn knop groeit.
   Bewust NIET geanimeerd: paginawissels, tabs en lijst-entrees — die lopen allemaal door
   renderContent() en zouden bij elke klik opnieuw afspelen.
   ===================================================================================== */
@keyframes dz-spin { to { transform: rotate(360deg); } }
/* Elk laad-icoon in de app is <i class="ti ti-loader">; iconHydrate vult alleen de SVG
   erbinnen, dus het element zelf is een geldig animatiedoel. Linear: continue rotatie. */
.ti-loader { animation: dz-spin .9s linear infinite; transform-origin: 50% 50%; }

/* Bevestigingsdialoog (app.js pub.confirm; overlay is inline gestyled, opacity is vrij). */
.dz-confirm-ov { transition: opacity 160ms var(--ease-out); }
.dz-confirm { transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); }
@starting-style {
  .dz-confirm-ov { opacity: 0; }
  .dz-confirm { opacity: 0; transform: scale(.97); }
}

/* Drop-zones lichtten hard op tijdens slepen; dit maakt het rustig zonder trager te voelen. */
.pk .pk-drophint, .ls .ls-lane.ls-drophint { transition: background .12s ease, border-color .12s ease; }

@media (prefers-reduced-motion: reduce) {
  /* Zachter, niet uit: een stilstaande spinner liegt over of de app nog werkt. */
  .ti-loader { animation-duration: 1.8s; }
  .toast, .menu, .dz-confirm, .dz-confirm-ov { transition-duration: .01ms; }
  .toast, .menu, .dz-confirm { transform: none !important; }
}

/* stap verslepen (handvat = de greep in de stappenlijst) */
.pd-step-grip:active { cursor: grabbing; }

/* procesvoet: nav-groep links, verwijderen rechts */
.foot-nav { display: flex; gap: 10px; flex-wrap: wrap; }
.btn.danger-text { color: var(--red-strong); }
.btn.danger-text:hover { background: var(--red-soft); border-color: var(--red); }

/* indicatief / concept + bandbreedte op het Projectplan */
.concept-badge { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: var(--r-pill); background: var(--amber-soft); color: var(--amber-strong); font-size: 11.5px; font-weight: 600; vertical-align: 2px; }
.cost-band { background: var(--sunken); border: 1px solid var(--border); border-radius: var(--r); padding: 9px 13px; font-size: 13px; color: var(--text); }
.cost-band strong { color: var(--pri-text); }

/* branche-profiel (dashboard) */
.profile-row { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--sunken); }
.profile-row:first-child { border-top: none; }
.profile-k { flex: none; width: 110px; font-weight: 600; font-size: 12.5px; color: var(--text-2); }
.profile-v { flex: 1; font-size: 13.5px; color: var(--text); line-height: 1.55; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 880px) {
  .pd-meta, .pd-meta.no-groep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-2col, .pd-relgrid { grid-template-columns: 1fr; }
  .dash-cols { grid-template-columns: 1fr; }
  .dash-split { grid-template-columns: 1fr; }
  /* De zijbalk zelf wordt hier een off-canvas lade: zie de mobiele-shell-sectie achteraan. */
}
@media (max-width: 640px) {
  .pd-meta, .pd-meta.no-groep { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- Rollen & rechten */
.roles-cols { display: grid; grid-template-columns: minmax(280px, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .roles-cols { grid-template-columns: 1fr; } }

.role-list { display: flex; flex-direction: column; gap: 8px; }
.role-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--border-2); border-radius: var(--r-lg); background: var(--surface); cursor: pointer; transition: background .12s ease, border-color .12s ease, box-shadow .12s ease; }
.role-card:hover { background: var(--surface-2); border-color: var(--border-3); }
.role-card.sel { background: var(--pri-soft); border-color: transparent; box-shadow: inset 3px 0 0 var(--pri); }
.role-card-ic { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; flex: none; }
.role-card-body { flex: 1; min-width: 0; }
.role-card-top { display: flex; align-items: center; gap: 6px; }
.role-card-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.role-lock { font-size: 13px; color: var(--text-faint); }
.role-card-desc { font-size: 12px; color: var(--text-3); margin: 2px 0 8px; line-height: 1.4; }
.role-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.role-card-count { font-size: 11.5px; color: var(--text-3); white-space: nowrap; flex: none; align-self: center; }

/* rol-editor: scope-kaarten */
.scope-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0; }
@media (max-width: 640px) { .scope-cards { grid-template-columns: 1fr; } }
.scope-card { border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; background: var(--surface-2); }
.scope-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.scope-card-h .ic { font-size: 16px; color: var(--text-3); }
.scope-card-l { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.scope-card-v { font-size: 14px; color: var(--text); font-weight: 500; }

/* rol-editor: genummerde secties */
.perm-section { margin-top: 22px; }
.perm-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.perm-num { width: 22px; height: 22px; border-radius: 50%; background: var(--pri-soft); color: var(--pri-text); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.perm-section-title { font-size: 14px; font-weight: 600; color: var(--text); }
.perm-section.danger .perm-num { background: var(--red-soft); color: var(--red-strong); }
.perm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; align-items: start; margin-top: 22px; }
/* min-width:0 is hier niet cosmetisch: een grid-kind heeft standaard min-width:auto en groeit
   dus mee met zijn breedste inhoud. De rechten-matrix (407px) duwde de kolom daardoor breder
   dan het panel, en .perm-mtx-wrap (overflow-x:auto) kwam nooit aan bod - de matrix werd
   afgekapt in plaats van scrollbaar. Met min-width:0 mag de kolom krimpen en scrollt de matrix. */
.perm-cols > .perm-section { margin-top: 0; min-width: 0; }
@media (max-width: 880px) { .perm-cols { grid-template-columns: 1fr; } }

/* toegangsbereik: 4 kolommen label-boven-waarde */
.perm-access { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 880px) { .perm-access { grid-template-columns: repeat(2, 1fr); } }
.perm-acc-item { display: flex; flex-direction: column; gap: 7px; }
.perm-acc-l { font-size: 12px; color: var(--text-2); }

/* Ja/Nee-regels (kosten, gebruikersbeheer, gevaarlijke acties) */
.perm-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--sunken); }
.perm-row:last-child { border-bottom: none; }
.perm-row-l { font-size: 13px; color: var(--text); }
.perm-row-v { flex: none; }

/* Ja/Nee/Beperkt-indicator (read-only) of klikbaar (aangepaste rol) */
.perm-ind { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: var(--r-pill); border: none; font-family: inherit; }
.perm-ind .ic { font-size: 14px; }
.perm-ind.yes { background: var(--green-soft); color: var(--green-strong); }
.perm-ind.no { background: var(--red-soft); color: var(--red-strong); }
.perm-ind.partial { background: var(--amber-soft); color: var(--amber-strong); }
.perm-ind.clickable { cursor: pointer; }
.perm-ind.clickable:hover { filter: brightness(.97); }

/* projectdata: radiokeuze */
.perm-radio-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
@media (max-width: 640px) { .perm-radio-row { grid-template-columns: 1fr; } }
.perm-radio { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border-2); border-radius: var(--r); background: var(--surface); }
.perm-radio.clickable { cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.perm-radio.clickable:hover { border-color: var(--border-3); background: var(--surface-2); }
.perm-radio.on { border-color: var(--pri); background: var(--pri-soft); }
.perm-radio-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-3); flex: none; margin-top: 2px; position: relative; }
.perm-radio-dot.on { border-color: var(--pri); }
.perm-radio-dot.on::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--pri); }
.perm-radio-t { font-size: 13px; font-weight: 500; color: var(--text); }
.perm-radio-s { font-size: 11.5px; color: var(--text-3); margin-top: 2px; line-height: 1.4; }

/* projectdata: rechten-matrix */
.perm-mtx-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); }
.perm-mtx { font-size: 12.5px; }
.perm-mtx th, .perm-mtx td { padding: 9px 8px; }
.perm-mtx th { text-transform: none; font-size: 11px; }
.perm-mtx th:not(:first-child), .perm-mtx td.perm-mtx-cell { text-align: center; width: 70px; }
.perm-mtx-name { font-weight: 500; color: var(--text); white-space: nowrap; padding-left: 14px !important; }
.perm-mtx tbody tr:last-child td { border-bottom: none; }
.perm-mtx-cell.clickable { cursor: pointer; }
.perm-mtx-cell.clickable:hover { background: var(--surface-2); }
.perm-cell { display: inline-flex; align-items: center; justify-content: center; }
.perm-cell.yes { color: var(--green-strong); }
.perm-cell.yes .ic { font-size: 17px; }
.perm-cell.no { color: var(--red); }
.perm-cell.no .ic { font-size: 16px; }
.perm-cell.dash { color: var(--text-faint); }

/* preview van toegang */
.preview-foot { margin-top: 22px; padding: 16px 18px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); }
.preview-h { font-size: 11.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.preview-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); padding: 4px 0; }
.preview-line .ic { color: var(--green-strong); font-size: 16px; flex: none; }

/* ---------------------------------------------------------------- tabel-kolommen */
.tbl-name-cell { display: flex; align-items: center; gap: 6px; }
.tbl-expand { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: none; background: transparent; color: var(--text-3); cursor: pointer; border-radius: var(--r-sm); flex: none; }
.tbl-expand:hover { background: var(--sunken); color: var(--text); }
.tbl-expand .ic { font-size: 16px; }
.kol-chip { background: var(--blue-soft); color: var(--blue-text); }
.kol-detail > td { background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 10px 16px 12px 40px !important; }
/* editor (procespagina) */
.kol-box { display: flex; flex-direction: column; gap: 6px; }
.kol-head { font-size: 11.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; display: flex; align-items: center; gap: 8px; }
.kol-row { display: flex; align-items: center; gap: 8px; }
.kol-naam { flex: 1 1 auto; min-width: 0; }
.kol-type { flex: 0 0 150px; min-width: 0; }
/* read-only weergave (Tabellen-overzicht) */
.kol-view { display: flex; flex-wrap: wrap; gap: 7px; }
/* kolommen onder elkaar in 2 kolommen: compacte rijen met rechts uitgelijnde types */
.kol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-content: start; }
.kol-grid .kol-pill { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  border: none; border-radius: 0; background: none; overflow: visible; padding: 5px 0; border-bottom: 1px solid var(--sunken); }
.kol-grid .kol-pill-n { padding: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kol-grid .kol-pill-t { justify-self: end; border-left: none; border-radius: var(--r-sm); padding: 1px 7px; }
/* unieke-tabel-detail: kolommen links, "gebruikt in processen" (als proces-pills) rechts */
.utbl-detail { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 20px; align-items: start; }
.utbl-usage { border-left: 1px solid var(--border); padding-left: 18px; }
.utbl-usage-h { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.kol-pill { display: inline-flex; align-items: stretch; border: 1px solid var(--border-2); border-radius: var(--r-sm); overflow: hidden; font-size: 12px; background: var(--surface); }
.kol-pill-n { padding: 3px 8px; font-weight: 500; color: var(--text); }
.kol-pill-t { padding: 3px 8px; background: var(--sunken); color: var(--text-2); font-family: var(--mono); font-size: 11.5px; border-left: 1px solid var(--border-2); }

/* Tabellen-tabblad (procesdetail): accordeon van tabelkaarten */
.tbl-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.tbl-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); overflow: hidden; }
.tbl-card-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
.tbl-card-num { width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); background: var(--sunken); color: var(--text-2); font-size: 12px; font-weight: 600; }
.tbl-card-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 14px; }
.tbl-card-head .tag-select { flex: none; }
.tbl-card-kol { flex: none; }
.tbl-card-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; padding: 4px 14px 16px; border-top: 1px solid var(--sunken); }
.tbl-card-main { min-width: 0; padding-top: 12px; }
.tbl-card-side { padding-top: 12px; }
.kol-tbl th { font-size: 11px; }
.kol-tbl td { padding: 6px 10px; }
.kol-tbl .inline { width: 100%; }
.tbl-usage { background: var(--surface-2); border: 1px solid var(--sunken); border-radius: var(--r); padding: 12px; }
.tbl-usage-head { font-size: 11.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tbl-use-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.tbl-use-chip { display: inline-flex; align-items: center; max-width: 100%; padding: 4px 10px; border: 1px solid var(--border-2); border-radius: var(--r-pill); background: var(--surface); color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color .12s ease, color .12s ease; }
.tbl-use-chip:hover { border-color: var(--border-3); color: var(--text); }
.tbl-use-chip.on { background: var(--pri-soft); border-color: transparent; color: var(--pri-text); font-weight: 600; cursor: default; }
.tbl-usage-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 0; border: none; background: transparent; color: var(--pri-text); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.tbl-usage-more:hover { text-decoration: underline; }
/* Domeinen: vaste waardenset als chips (i.p.v. tabel) */
.dom-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 10px; border: 1px solid var(--border-2); border-radius: var(--r-pill); background: var(--surface); color: var(--text); font-size: 12px; white-space: nowrap; }
.dom-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; }
.dom-chip-x:hover { background: var(--slate-soft); color: var(--text); }
.dom-chip-x .ic { font-size: 12px; }
.dom-add { display: inline-flex; align-items: center; gap: 4px; }
.dom-add-input { width: 150px; font-size: 12px; }
.tbl-usage-more .ic { font-size: 15px; }
/* tabblad-container krijgt ademruimte zodat toolbar/knoppen niet tegen de rand plakken */
.proc-tabellen { padding: 16px; }
.proc-tabellen .ai-gen { margin-bottom: 14px; }
@media (max-width: 1100px) { .tbl-card-body { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- requirements + user stories */
.req-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .req-layout { grid-template-columns: 1fr; } }
.req-panel-body, .us-panel-body { padding: 14px 16px; }
.req-list, .us-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 4px; }

.ai-gen { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.ai-gen > summary { cursor: pointer; padding: 9px 12px; font-size: 12.5px; font-weight: 500; color: var(--text-2); display: flex; align-items: center; gap: 7px; list-style: none; }
.ai-gen > summary::-webkit-details-marker { display: none; }
.ai-gen > summary .ic { color: var(--pri-text); font-size: 15px; }
.ai-gen[open] > summary { border-bottom: 1px solid var(--border); }
.ai-gen-body { padding: 10px 12px; }

.req-card, .us-card { border: 1px solid var(--border-2); border-radius: var(--r); padding: 11px 12px; background: var(--surface); }
.req-card-top, .us-card-top { display: flex; align-items: center; gap: 8px; }
.us-card-top { align-items: flex-start; }
.req-titel { font-weight: 600; font-size: 13.5px; }
/* Bewerkbaar "Niet verwarren met"-veld op de requirement-kaart. */
.req-nv { display: flex; align-items: center; gap: 6px; margin: 3px 0 4px; }
.req-nv-l { font-size: 11.5px; color: var(--amber-strong, #b45309); white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.req-nv-in { flex: 1; min-width: 0; font-size: 12px; }
.req-oms, .us-oms { margin-top: 6px; font-size: 13px; }
.req-chips-row { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }

/* AI Features-tabblad: kaarten hergebruiken .req-card/.req-panel; alleen het nummer + het
   labeled veldenraster (prioriteit/fase/… + In MVP) en de Vereist/Optioneel-knop zijn nieuw. */
.aif-layout { margin-top: 16px; }
.aif-num { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.aif-fields { display: flex; gap: 10px 14px; flex-wrap: wrap; margin-top: 10px; align-items: flex-end; }
.aif-field { display: flex; flex-direction: column; gap: 4px; }
.aif-lbl { font-size: 11px; font-weight: 600; color: var(--text-3); }
.aif-req-toggle { border: none; cursor: pointer; font: inherit; }

.us-code { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--pri-text); background: var(--pri-soft); border-radius: var(--r-sm); padding: 3px 7px; flex: none; }
/* Titel als textarea die naar max 2 regels groeit, zodat lange titels niet achter de story-points verdwijnen. */
.us-titel { font-weight: 500; font-size: 13.5px; flex: 1 1 auto; min-width: 0; resize: none; overflow: hidden; line-height: 1.35; max-height: 3.6em; white-space: pre-wrap; word-break: break-word; field-sizing: content; }
.us-pt { flex: none; width: 74px; margin-top: 1px; }
.us-sum { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.us-sum.muted { color: var(--text-faint); }
.us-detail { margin-top: 10px; border-top: 1px solid var(--sunken); padding-top: 10px; }
.us-sub-head { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; margin: 12px 0 6px; }
.acc-row { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.acc-row > .ic { color: var(--green-strong); font-size: 16px; flex: none; }
.acc-input { font-size: 13px; }
.add-row.sm { font-size: 12px; }
/* given-when-then triple (verhaal B) */
.acc-row.acc-gwt { align-items: flex-start; }
.acc-row.acc-gwt > .ic { margin-top: 6px; }
.gwt-grid { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.gwt-fld { display: flex; align-items: center; gap: 6px; }
.gwt-k { flex: none; width: 46px; font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-3); }
/* developer-vertaling (verhaal C) */
.dev-steps { margin: 4px 0 8px; padding-left: 20px; }
.dev-steps li { margin-bottom: 8px; }
.dev-step-title { font-weight: 600; font-size: 13px; }
.dev-section .col-title .ic { font-size: 15px; color: var(--text-3); }

.link-row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.link-row-l { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; flex: none; padding-top: 3px; }
.link-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.link-chip { font: inherit; font-size: 11.5px; padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--border-2); background: var(--surface); color: var(--text-2); cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; white-space: nowrap; }
.link-chip:hover { border-color: var(--border-3); background: var(--surface-2); }
.link-chip.on { background: var(--pri-soft); border-color: transparent; color: var(--pri-text); font-weight: 500; }

/* AI-resultaten-inbox (overlay via Ctrl/Cmd+K) */
.cmdp-box.ai-inbox { padding: 16px 18px; max-width: 560px; }
.ai-inbox-head { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.ai-inbox-head .ic { color: var(--pri-text); font-size: 18px; }

/* ---------------------------------------------------------------- Project control */
.ctrl-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; margin-bottom: 20px; }
@media (max-width: 1100px) { .ctrl-cols { grid-template-columns: 1fr; } }
.ctrl-rstack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ctrl-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--amber-soft); border: 1px solid var(--amber); border-radius: var(--r-lg); padding: 12px 16px; margin-bottom: 18px; font-size: 13px; color: var(--text); }
.ctrl-cta .ic { color: var(--amber-strong); font-size: 17px; vertical-align: -2px; }
.ctrl-bar { height: 12px; margin-bottom: 16px; }
.meter .seg.ov { background: var(--red); }
.ctrl-legs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 640px) { .ctrl-legs { grid-template-columns: repeat(2, 1fr); } }
.ctrl-leg { display: flex; gap: 8px; }
.ctrl-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 4px; }
.ctrl-dot.in { background: var(--green); } .ctrl-dot.de { background: var(--amber); } .ctrl-dot.bu { background: #B7BAC2; } .ctrl-dot.ov { background: var(--red); }
.ctrl-leg-l { font-size: 12px; color: var(--text-3); }
.ctrl-leg-v { font-size: 16px; font-weight: 600; color: var(--text); margin-top: 1px; }
.ctrl-leg-s { font-size: 11.5px; color: var(--text-faint); }
.ctrl-note { margin-top: 14px; font-size: 12.5px; color: var(--text-2); background: var(--surface-2); border-radius: var(--r); padding: 9px 12px; }
.ctrl-cr { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--sunken); cursor: pointer; }
.ctrl-cr:last-child { border-bottom: none; } .ctrl-cr:hover { background: var(--surface-2); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: var(--r-sm); }
.ctrl-cr-eur { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.ctrl-statusdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.ctrl-statusdot.green { background: var(--green); } .ctrl-statusdot.amber { background: var(--amber); } .ctrl-statusdot.red { background: var(--red); } .ctrl-statusdot.slate { background: #B7BAC2; }
.ctrl-scope-row { padding: 7px 0; } .ctrl-scope-row .bar-head { margin-bottom: 5px; }
.ctrl-risk { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13px; color: var(--text); }
.ctrl-risk .ctrl-statusdot { margin-top: 0; }
.ctrl-events { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px; padding: 12px 16px; }
.ctrl-event { display: flex; gap: 10px; padding: 8px; }
.ctrl-event-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--text-3); }

/* ---------------------------------------------------------------- Delivery (tab + board) */
.del-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--sunken); border-radius: var(--r-lg); margin-bottom: 16px; }
.del-meter { flex: 1; min-width: 200px; }
.del-stat { display: flex; flex-direction: column; gap: 1px; }
.del-stat-l { font-size: 11.5px; color: var(--text-3); }
.del-stat b { font-size: 15px; color: var(--text); }
.del-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: start; }
.del-list { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 7px; }
.del-row { display: flex; align-items: center; gap: 10px; }
.del-row .tag-select { flex: none; }
.del-row-l { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.del-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(238px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 10px; align-items: start; }
.del-col { background: var(--surface-2); border: 1px solid var(--sunken); border-radius: var(--r-lg); display: flex; flex-direction: column; min-width: 0; }
.del-col-head { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--sunken); }
.del-col-title { font-weight: 600; font-size: 13px; color: var(--text); }
.del-col-done { margin-left: auto; font-size: 11.5px; color: var(--text-3); }
.del-col-body { padding: 10px; display: flex; flex-direction: column; gap: 9px; min-height: 30px; }
.del-card { background: var(--surface); border: 1px solid var(--sunken); border-radius: var(--r); padding: 10px; }
.del-card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.del-card-top .ic { color: var(--text-3); font-size: 15px; flex: none; }
.del-card-l { font-size: 13px; font-weight: 550; color: var(--text); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.del-card-l:hover { color: var(--pri-text); text-decoration: underline; }
.del-card-meta { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---- Delivery (Overzicht): stats, board met type-splitsing, tabel, sprints ---- */
.del-stats { grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); }
.del-board-panel { margin-bottom: 20px; }
.del-board-tools { display: inline-flex; align-items: center; gap: 14px; }
.del-board-tools .filter-select { min-width: 150px; }
.del-board-wrap { padding: 14px 16px; }
/* user-story-kaarten: titel + punten + eigenaar + sprint */
.del-card { cursor: grab; transition: box-shadow .12s ease, border-color .12s ease; }
.del-card:hover { border-color: var(--border-3); box-shadow: var(--sh); }
.del-card--dragging { opacity: .5; }
.del-card-top .del-card-l { flex: 1; min-width: 0; }
.del-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.del-sprint-badge { flex: none; font-size: 10.5px; padding: 1px 8px; }
.del-punten { flex: none; margin-left: auto; min-width: 21px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: var(--blue-soft); color: var(--blue-text); font-size: 11.5px; font-weight: 700; }
.del-eigenaar { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; color: var(--text-2); }
.del-eig-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.del-eig-none { color: var(--text-faint); }
.del-eig-none .ic { font-size: 14px; }
.dz-avatar-xs { width: 20px; height: 20px; font-size: 9px; }
.del-showmore { width: 100%; margin-top: 2px; padding: 5px; border: 1px dashed var(--border-2); border-radius: var(--r); background: transparent; color: var(--text-2); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.del-showmore:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-3); }
/* overige (niet-US) werk-items als uitklapbare counter */
.del-otherrow { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 4px; padding: 7px 8px; border: 1px solid var(--sunken); border-radius: var(--r); background: var(--surface); color: var(--text-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.del-otherrow:hover { border-color: var(--border-3); }
.del-otherrow .count-chip { margin-left: auto; }
.del-otherlist { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.del-otheritem { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border: 1px solid var(--sunken); border-radius: var(--r-sm); background: var(--surface); cursor: grab; }
.del-otheritem .ic { font-size: 14px; color: var(--text-3); flex: none; }
.del-oi-l { flex: 1; min-width: 0; font-size: 12px; color: var(--text); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.del-oi-l:hover { color: var(--pri-text); text-decoration: underline; }
.del-typehead { display: flex; align-items: center; gap: 6px; padding: 5px 2px 2px; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text-3); }
.del-typehead .ic { font-size: 14px; color: var(--text-faint); }
.del-typehead .count-chip { margin-left: auto; }
.del-col--over { outline: 2px dashed var(--pri); outline-offset: -2px; background: var(--pri-soft); }
.del-col-empty { font-size: 11.5px; color: var(--text-faint); text-align: center; padding: 14px 6px; border: 1px dashed var(--border-2); border-radius: var(--r); }
/* tabel: titel-cel met type-icoon */
.del-titcell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.del-tit-ic { font-size: 16px; color: var(--text-3); flex: none; }
.del-tit-l { color: var(--text); cursor: pointer; font-weight: 550; }
.del-tit-l:hover { color: var(--pri-text); text-decoration: underline; }
.del-table-panel .toolbar { padding: 12px 16px; border-bottom: 1px solid var(--sunken); }
.del-table-panel .tag-select, .del-row-sprint { min-width: 0; }
.del-row-sprint { max-width: 150px; }
/* paginering onder de tabel */
.del-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; }
.del-pager-btns { display: inline-flex; align-items: center; gap: 8px; }
.del-page-cur { font-size: 12.5px; color: var(--text-2); min-width: 54px; text-align: center; }
.del-pager .btn[disabled] { opacity: .4; cursor: default; }
/* schakelaar met label (board + tabel) */
.switch-row { display: inline-flex; align-items: center; gap: 8px; }
.switch-label { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
/* Sprints-tab */
.inp-date { max-width: 160px; }
.del-active-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: var(--surface); color: var(--text-faint); cursor: pointer; transition: color .12s ease, border-color .12s ease, background .12s ease; }
.del-active-btn:hover { color: var(--text-2); border-color: var(--border-3); }
.del-active-btn.on { color: var(--green-strong); border-color: transparent; background: var(--green-soft); }
.del-active-btn .ic { font-size: 17px; }
tr.del-sprint-active td { background: var(--pri-soft); }
tr.del-sprint-active td:first-child { box-shadow: inset 3px 0 0 var(--pri); }

/* ============================ Deliverables (overzicht + detailpagina) ============================ */
.dlv-hero { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dlv-row { cursor: pointer; }
.dlv-row:hover td { background: var(--surface-2); }
.dlv-row.sel td { background: var(--pri-soft); }
.dlv-row.sel td:first-child { box-shadow: inset 3px 0 0 var(--pri); }
.dlv-id { font-weight: 600; white-space: nowrap; cursor: pointer; }
.dlv-id:hover, .dlv-tit:hover { color: var(--pri); text-decoration: underline; }
.dlv-tit { cursor: pointer; }
.dlv-eig { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* rechter detail-preview */
.dlv-preview { position: sticky; top: 70px; }
@media (max-width: 880px) { .dlv-preview { position: static; } }
.dlv-prev-body { padding: 14px 16px; }
.dlv-prev-title { font-weight: 600; font-size: 14px; line-height: 1.4; margin-bottom: 6px; }
.dlv-prev-text { font-size: 12.5px; line-height: 1.5; margin-bottom: 12px; }
.dlv-prev-sub { font-weight: 600; font-size: 12px; margin: 14px 0 6px; color: var(--text-2); }
.dlv-meta { margin-top: 4px; }
.dlv-meta-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.dlv-meta-row:last-child { border-bottom: 0; }
.dlv-meta-l { color: var(--text-3); flex: none; }
.dlv-meta-v { text-align: right; min-width: 0; }
/* detailpagina */
.dlv-title { font-size: 22px; font-weight: 600; line-height: 1.3; margin: 2px 0 4px; }
.dlv-section { margin-top: 18px; }
.dlv-sec-title { font-weight: 600; font-size: 13px; margin-bottom: 8px; color: var(--text-2); }
.dlv-acc { margin: 0; padding-left: 20px; }
.dlv-acc li { margin-bottom: 8px; font-size: 13px; line-height: 1.5; }
/* overzicht-toolbar: niet strak tegen de panelranden */
.dlv-toolbar { padding: 12px 16px 0; }
/* brede tabel: smallere rail + compacte cellen + truncatie zodat alle kolommen binnen de
   paginabreedte passen (geen horizontale scroll). De preview stapelt onder de tabel op laptops. */
.dlv-layout { grid-template-columns: minmax(0, 1fr) 320px; }
/* onder ~1500px stapelt de preview onder de tabel, zodat de brede tabel de volle breedte krijgt (geen scroll) */
@media (max-width: 1500px) { .dlv-layout { grid-template-columns: 1fr; } }
.dlv-table th, .dlv-table td { padding: 9px 10px; vertical-align: middle; }
.dlv-table .dlv-tit { display: inline-block; max-width: 240px; }
.dlv-table .dlv-proc { display: inline-block; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.dlv-table .dlv-eig { max-width: 128px; }
.dlv-table .dlv-eig > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* detailpagina: padding binnen het blad + bewerkbare titel/velden */
.dlv-sheet { padding: 20px 22px; }
.dlv-title-input { width: 100%; font-size: 20px; font-weight: 600; line-height: 1.35; padding: 6px 8px; }
.dlv-field { width: 100%; }

/* ===== User story detail — document-layout (mockup) ===== */
.dlv-doc { padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.dlv-doc-tags { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.dlv-doc .dlv-title-input { font-size: 23px; font-weight: 700; padding: 2px 6px; }
.dlv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 12px; }
.dlv-meta-2 { margin-top: 8px; }
.dlv-mf { display: inline-flex; align-items: center; gap: 8px; }
.dlv-mf-l { font-size: 11.5px; color: var(--text-3); }
.dlv-mf-v { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.dlv-own { display: inline-flex; align-items: center; gap: 6px; }
.dlv-link { font: inherit; font-size: 13px; color: var(--pri-text); background: none; border: none; cursor: pointer; padding: 0; }
.dlv-link:hover { text-decoration: underline; }

.est-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); }
.est-cell { flex: 1; min-width: 130px; }
.est-l { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .02em; }
.est-v { font-size: 14px; font-weight: 600; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.est-num { font-size: 18px; }
.est-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.est-inp { width: 62px; }

.dlv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; align-items: start; }
@media (max-width: 1100px) { .dlv-cols { grid-template-columns: 1fr; } }
.dlv-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dlv-right { min-width: 0; }
.dlv-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; }
.dlv-card-head { margin-bottom: 10px; }
.dlv-card-title { font-size: 14px; font-weight: 600; color: var(--text); }

/* afvinkbare acceptatiecriteria */
.acc-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.acc-item:last-child { border-bottom: none; }
.acc-item.is-done .acc-body { opacity: .5; }
.acc-check { flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 6px; border: 1.5px solid var(--border-3); background: var(--surface); color: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .12s ease; }
.acc-check .ic { font-size: 14px; }
.acc-check:hover { border-color: var(--green-strong); }
.acc-check.on { background: var(--green-strong); border-color: var(--green-strong); color: #fff; }
.acc-body { flex: 1; min-width: 0; }
.acc-del { opacity: 0; transition: opacity .12s ease; }
.acc-item:hover .acc-del { opacity: 1; }
.gwt-box { display: flex; flex-direction: column; gap: 6px; }
.gwt-line { display: flex; align-items: center; gap: 8px; }
.gwt-tag { flex: none; width: 58px; text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 4px 0; border-radius: var(--r-sm); }
.gwt-given { background: var(--green-soft); color: var(--green-strong); }
.gwt-when { background: var(--blue-soft); color: var(--blue-text); }
.gwt-then { background: var(--slate-soft); color: var(--slate-text); }
.gwt-inp { flex: 1; font-size: 13px; min-width: 0; }
.acc-add { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }

/* gekoppelde requirements met hover-preview */
.req-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }
.req-chip-wrap { position: relative; display: inline-block; }
.req-chip { font-family: var(--mono); font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid transparent; background: var(--blue-soft); color: var(--blue-text); cursor: pointer; }
.req-chip:hover { filter: brightness(.97); }
.req-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; display: none; flex-direction: column; gap: 3px; width: min(300px, 72vw); padding: 10px 12px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r); box-shadow: 0 8px 24px rgba(16, 18, 32, .12); }
.req-chip-wrap:hover .req-pop, .req-chip-wrap:focus-within .req-pop { display: flex; }
.req-pop-code { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.req-pop-title { font-size: 13px; font-weight: 600; }
.req-pop-desc { font-size: 12px; color: var(--text-2); line-height: 1.45; }
.req-edit { margin-top: 10px; }
.req-edit summary { font-size: 12px; color: var(--text-3); cursor: pointer; }

/* stakeholders */
.stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.stk { display: flex; align-items: center; gap: 9px; min-width: 0; }
.stk-txt { min-width: 0; }
.stk-naam { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stk-rol { font-size: 11.5px; color: var(--text-3); }

/* nacalculatie & afwijking */
.dev-cmp { display: flex; flex-wrap: wrap; gap: 16px; }
.dev-cmp-c { display: flex; flex-direction: column; gap: 3px; }
.dev-cmp-l { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .02em; }
.dev-cmp-v { font-size: 14px; font-weight: 600; }
.dev-flag { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 10px; background: var(--amber-soft); color: var(--amber-strong); border-radius: var(--r); font-size: 12.5px; }

/* Thinkwise developer guide */
.tw-guide { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; }
.tw-guide-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.tw-guide-h-l { display: flex; gap: 10px; }
.tw-guide-ico { flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--pri-soft); color: var(--pri-text); display: inline-flex; align-items: center; justify-content: center; }
.tw-guide-ico .ic { font-size: 18px; }
.tw-guide-title { font-size: 15px; font-weight: 700; }
.tw-guide-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.tw-guide-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.tw-guide-total { margin-left: auto; font-size: 12.5px; color: var(--text-2); }
.tw-guide-total b { color: var(--text); }
.tw-guide-disc { font-size: 12px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; }
.tw-secs { display: flex; flex-direction: column; gap: 10px; }
.tw-sec { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.tw-sec-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.tw-ico { flex: none; width: 26px; height: 26px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.tw-ico .ic { font-size: 15px; }
.tw-ico-blue { background: var(--blue-soft); color: var(--blue-text); }
.tw-ico-violet { background: var(--violet-soft); color: #7c3aed; }
.tw-ico-green { background: var(--green-soft); color: var(--green-strong); }
.tw-ico-amber { background: var(--amber-soft); color: var(--amber-strong); }
.tw-ico-slate { background: var(--slate-soft); color: var(--slate-text); }
.tw-sec-title { font-size: 13.5px; font-weight: 600; }
.tw-sec-est { font-size: 11.5px; font-weight: 600; color: var(--text-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 2px 8px; }
.tw-sec-link { margin-left: auto; font: inherit; font-size: 12px; color: var(--pri-text); background: none; border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.tw-sec-link:hover { text-decoration: underline; }
.tw-sec-link .ic { font-size: 13px; }
.tw-tasks { list-style: none; margin: 0; padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 9px; }
.tw-task-top { display: flex; align-items: baseline; gap: 8px; }
.tw-task-title { font-size: 13px; font-weight: 500; flex: 1; min-width: 0; }
.tw-task-title::before { content: "•"; color: var(--text-3); margin-right: 7px; }
.tw-est { flex: none; font-size: 11.5px; color: var(--text-3); white-space: nowrap; display: inline-flex; align-items: center; }
.tw-est-inp { width: 34px; border: none; background: transparent; font: inherit; font-size: 11.5px; color: var(--text-2); text-align: right; padding: 0 1px; }
.tw-est-inp:hover, .tw-est-inp:focus { background: var(--surface); border-radius: 4px; outline: 1px solid var(--border-2); }
.tw-task-toe { font-size: 12px; color: var(--text-2); margin-top: 2px; padding-left: 14px; }
.tw-task-empty { list-style: none; font-size: 12.5px; }

/* code-blok met kopieerknop + regelnummers */
.code-block { margin-top: 8px; border: 1px solid var(--border-2); border-radius: var(--r); overflow: hidden; }
.code-bar { display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.code-lang { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: var(--text-3); }
.code-copy { border: none; background: none; cursor: pointer; color: var(--text-3); padding: 2px 4px; border-radius: 5px; }
.code-copy:hover { background: var(--sunken); color: var(--text-2); }
.code-body { font-family: var(--mono); font-size: 11.5px; line-height: 1.55; padding: 8px 0; max-height: 220px; overflow: auto; background: var(--sunken); }
.cl { display: flex; gap: 10px; padding: 0 12px; }
.cl-n { flex: none; width: 16px; text-align: right; color: var(--text-3); user-select: none; }
.cl-t { white-space: pre-wrap; word-break: break-word; }

/* swimlanes: rij per ontwikkelaar × statuskolommen */
.del-swim-wrap { overflow-x: auto; padding: 14px 16px; }
.del-swim { display: grid; grid-template-columns: 180px repeat(var(--dlv-cols, 4), minmax(190px, 1fr)); gap: 1px; background: var(--sunken); border: 1px solid var(--sunken); border-radius: var(--r-lg); min-width: 760px; overflow: hidden; }
@media (max-width: 880px) { .del-swim { grid-template-columns: 120px repeat(var(--dlv-cols, 4), minmax(150px, 1fr)); } }
.del-swim-corner { position: sticky; left: 0; z-index: 3; background: var(--surface-2); }
.del-swim-colhead { padding: 9px 12px; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--text-2); }
.del-swim-rowhead { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--text); }
.del-swim-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.del-swim-cell { padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 46px; background: var(--surface-2); }
.del-swim-cell.del-col--over { outline: 2px dashed var(--pri); outline-offset: -2px; background: var(--pri-soft); }
/* sleep-handle in de werk-items-tabel */
.del-row-grip { width: 30px; text-align: center; }
.del-drag-handle { display: inline-flex; cursor: grab; color: var(--text-faint); padding: 4px; border-radius: 5px; }
.del-drag-handle:hover { color: var(--text-2); background: var(--sunken); }
.del-drag-handle .ic { font-size: 16px; }
/* Sprints-dashboard: details (meta + mini-staafjes) + sprint health */
.sp-details { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 16px; }
.sp-meta { display: flex; flex-direction: column; gap: 12px; }
.sp-meta-row { display: flex; flex-direction: column; gap: 4px; }
.sp-meta-l { font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.sp-meta-v .select, .sp-meta-v .inp { width: 100%; }
.sp-cap { display: flex; align-items: center; gap: 8px; }
.sp-cap .inp { max-width: 90px; }
.sp-bars { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.sp-bar-row { display: grid; grid-template-columns: 92px 1fr 28px; align-items: center; gap: 8px; }
.sp-bar-l { font-size: 12px; color: var(--text-2); }
.sp-bar { height: 8px; background: var(--sunken); border-radius: var(--r-pill); overflow: hidden; }
.sp-bar-fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--pri); }
.sp-bar-fill.b-plan { background: var(--violet-text); }
.sp-bar-fill.b-done { background: var(--green-strong); }
.sp-bar-fill.b-prog { background: var(--blue-text); }
.sp-bar-fill.b-rev { background: var(--amber-strong); }
.sp-bar-fill.b-rest { background: var(--border-3); }
.sp-bar-n { font-size: 12px; font-weight: 600; color: var(--text-2); text-align: right; }
.sp-health { padding: 10px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.sp-health-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); }
.sp-health-ic { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sp-health-ic .ic { font-size: 15px; }
.sp-health-ic.red { background: var(--red-soft); color: var(--red-strong); }
.sp-health-ic.amber { background: var(--amber-soft); color: var(--amber-strong); }
.sp-health-ic.green { background: var(--green-soft); color: var(--green-strong); }
.sp-health-ic.blue { background: var(--blue-soft); color: var(--blue-text); }
@media (max-width: 880px) { .sp-details { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Wijzigingen (change requests) */
.cr-pane { padding: 0; overflow: hidden; }
.pa-list-filters { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--sunken); }
.pa-list-filters .filter-select { flex: 1; min-width: 0; }
.cr-list { max-height: 72dvh; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.cr-li { text-align: left; width: 100%; background: var(--surface); border: 1px solid var(--sunken); border-radius: var(--r); padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 5px; }
.cr-li:hover { border-color: var(--text-faint); }
.cr-li.active { border-color: var(--pri); background: var(--blue-soft); }
.cr-li-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cr-code { font-size: 12px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cr-li-titel { font-size: 13px; font-weight: 550; color: var(--text); }
.cr-li-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--text-3); }
.cr-li-eur { color: var(--text-2); white-space: nowrap; }
.cr-detail { padding: 18px; }
.cr-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cr-titel-input { width: 100%; font-size: 17px; font-weight: 600; border: none; border-bottom: 1px solid transparent; padding: 5px 0; color: var(--text); background: transparent; }
.cr-titel-input:hover { border-bottom-color: var(--sunken); }
.cr-titel-input:focus { outline: none; border-bottom-color: var(--pri); }
.cr-field { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.cr-field-l { font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.cr-textarea { width: 100%; resize: vertical; padding: 8px 10px; border: 1px solid var(--sunken); border-radius: var(--r-sm); font: inherit; font-size: 13px; color: var(--text); background: var(--surface); }
.cr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 14px; margin-top: 4px; }
.inp { width: 100%; padding: 7px 10px; border: 1px solid var(--sunken); border-radius: var(--r-sm); font: inherit; font-size: 13px; color: var(--text); background: var(--surface); }
.cr-textarea:focus, .inp:focus { outline: none; border-color: var(--pri); }
.cr-proc { margin-top: 14px; font-size: 12.5px; color: var(--text-2); }
.link-btn { background: none; border: none; padding: 0; color: var(--pri-text); cursor: pointer; font: inherit; font-size: 12.5px; }
.link-btn:hover { text-decoration: underline; }
.cr-budget { margin-top: 16px; background: var(--surface-2); border: 1px solid var(--sunken); border-radius: var(--r-lg); padding: 12px 14px; }
.cr-budget-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: var(--text-2); padding: 4px 0; }
.cr-budget-row b { color: var(--text); font-variant-numeric: tabular-nums; }
.cr-budget-na { border-top: 1px solid var(--sunken); margin-top: 4px; padding-top: 8px; }
.cr-budget-route { margin-top: 10px; font-size: 12px; color: var(--text-2); }
.cr-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.cr-log-head { margin-top: 20px; margin-bottom: 8px; font-size: 11.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }
.cr-log { display: flex; flex-direction: column; gap: 8px; }
.cr-log-row { display: flex; gap: 9px; }
.cr-log-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pri); margin-top: 5px; flex: none; }
.cr-log-act { font-size: 12.5px; color: var(--text); }
.cr-log-meta { font-size: 11.5px; color: var(--text-3); }

/* ---------------------------------------------------------------- wijziging-detail (/wijzigingen/[id]) */
.wz-detail { max-width: 1240px; }
.wz-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.wz-top-titles { min-width: 0; }
.wz-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wz-code { font-size: 14px; }
.wz-title { font-size: 21px; font-weight: 650; color: var(--text); margin: 0; line-height: 1.25; }
.wz-title-input { font-size: 21px; font-weight: 650; color: var(--text); border: none; border-bottom: 1px solid transparent; background: transparent; padding: 1px 0; min-width: 280px; flex: 1; }
.wz-title-input:hover { border-bottom-color: var(--sunken); }
.wz-title-input:focus { outline: none; border-bottom-color: var(--pri); }
.wz-sub { font-size: 13px; color: var(--text-3); margin-top: 5px; }
.wz-badges { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.wz-top-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; flex: none; }
.wz-stats { margin-bottom: 18px; }

.wz-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .wz-cols { grid-template-columns: 1fr; } }
.wz-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wz-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; position: sticky; top: 16px; }
@media (max-width: 1100px) { .wz-rail { position: static; } }
.wz-section .panel-head { padding: 12px 16px; }
.wz-section-body { padding: 14px 16px 16px; }
.wz-readtext { font-size: 13px; color: var(--text-2); line-height: 1.6; white-space: pre-wrap; }

/* wijzigingsverzoek: meta-rooster */
.wz-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin-top: 14px; }
@media (max-width: 640px) { .wz-meta { grid-template-columns: 1fr; } }
.wz-meta-item { display: flex; gap: 9px; align-items: flex-start; }
.wz-meta-item > .ic { color: var(--text-faint); font-size: 16px; margin-top: 2px; flex: none; }
.wz-meta-body { min-width: 0; }
.wz-meta-l { font-size: 11.5px; color: var(--text-3); }
.wz-meta-v { font-size: 13px; color: var(--text); margin-top: 1px; }
.wz-meta-v .tag-select { margin-top: 1px; }
.wz-impact-edit { margin-top: 12px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .wz-impact-edit { grid-template-columns: 1fr; } }
.wz-check { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--text-2); cursor: pointer; }

/* geraakte onderdelen */
.wz-od { padding: 4px 16px 12px; }
.wz-od-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--sunken); }
.wz-od-row:last-of-type { border-bottom: none; }
.wz-od-l { font-size: 12.5px; font-weight: 550; color: var(--text-2); display: inline-flex; align-items: center; gap: 7px; padding-top: 4px; white-space: nowrap; }
.wz-od-l .ic { color: var(--text-faint); font-size: 16px; }
.wz-od-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex: 1; min-width: 0; }
.wz-od-r .filter-select { max-width: 260px; }
.wz-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.wz-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--blue-soft); color: var(--blue-text); border-radius: var(--r-pill); padding: 3px 9px; font-size: 12px; max-width: 100%; }
.wz-chip-rm { background: none; border: none; cursor: pointer; color: var(--blue-text); opacity: .6; font-size: 14px; line-height: 1; padding: 0 0 0 2px; }
.wz-chip-rm:hover { opacity: 1; }
.wz-od-add { flex: none; }
.wz-od-add.on { background: var(--sunken); }
.wz-picker { border: 1px solid var(--border-2); border-radius: var(--r); background: var(--surface-2); padding: 8px; margin: 2px 0 10px; }
.wz-pick-list { max-height: 220px; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.wz-pick-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--sunken); border-radius: var(--r-sm); padding: 7px 10px; cursor: pointer; font: inherit; }
.wz-pick-item:hover { border-color: var(--text-faint); }
.wz-pick-item.on { border-color: var(--pri); background: var(--blue-soft); }
.wz-pick-item .ic { color: var(--text-3); flex: none; }
.wz-pick-item.on .ic { color: var(--pri-text); }
.wz-pick-label { font-size: 13px; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-pick-proc { font-size: 11.5px; color: var(--text-3); flex: none; }

/* opmerkingen */
.wz-comments { display: flex; flex-direction: column; gap: 14px; }
.wz-comment { display: flex; gap: 10px; }
.wz-comment-main { min-width: 0; flex: 1; }
.wz-comment-head { display: flex; align-items: center; gap: 8px; }
.wz-comment-who { font-size: 13px; font-weight: 600; color: var(--text); }
.wz-comment-date { font-size: 11.5px; color: var(--text-3); }
.wz-comment-del { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text-faint); font-size: 15px; line-height: 1; }
.wz-comment-del:hover { color: var(--red-strong); }
.wz-comment-body { font-size: 13px; color: var(--text-2); line-height: 1.55; margin-top: 2px; white-space: pre-wrap; }
.wz-comment-new { margin-top: 16px; border-top: 1px solid var(--sunken); padding-top: 14px; }

/* rechter rail: besluit, route, impact */
.wz-decision-q { background: var(--amber-soft); border: 1px solid var(--amber); border-radius: var(--r); padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.4; }
.wz-steps { display: flex; flex-direction: column; gap: 0; }
.wz-step { display: flex; align-items: flex-start; gap: 11px; position: relative; padding-bottom: 16px; }
.wz-step:last-child { padding-bottom: 0; }
.wz-step-dot { width: 26px; height: 26px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; z-index: 1; border: 2px solid var(--border-3); background: var(--surface); color: var(--text-3); }
.wz-step:not(:last-child) .wz-step-dot::after { content: ""; position: absolute; left: 12px; top: 26px; bottom: 0; width: 2px; background: var(--border-2); z-index: 0; }
.wz-step.done .wz-step-dot { background: var(--green-strong); border-color: var(--green-strong); color: #fff; }
.wz-step.done:not(:last-child) .wz-step-dot::after { background: var(--green-strong); }
.wz-step.cur .wz-step-dot { background: var(--amber-strong); border-color: var(--amber-strong); color: #fff; }
.wz-step.rej .wz-step-dot { background: var(--red-strong); border-color: var(--red-strong); color: #fff; }
.wz-step-l { font-size: 13px; color: var(--text); padding-top: 4px; }
.wz-step.todo .wz-step-l { color: var(--text-3); }
.wz-step-now { color: var(--amber-strong); font-size: 11.5px; font-weight: 600; }
.wz-impact-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.wz-impact-list li { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.wz-decision-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.wz-decision-actions .btn { justify-content: center; }
.btn.wz-reject { color: var(--red-strong); border-color: var(--red-soft); background: var(--surface); }
.btn.wz-reject:hover { background: var(--red-soft); border-color: var(--red); }
.meter .seg.ov { background: var(--red); }

/* ---------------------------------------------------------------- wijziging-overzicht (/wijzigingen) */
.wz-filters { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 18px; }
.wz-search { flex: 1; min-width: 200px; }
.wz-filter-check { white-space: nowrap; }
.wz-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wz-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.wz-tab { border: none; background: transparent; color: var(--text-3); font: inherit; font-size: 12.5px; font-weight: 550; padding: 5px 11px; border-radius: var(--r-pill); cursor: pointer; }
.wz-tab:hover { background: var(--surface-2); color: var(--text-2); }
.wz-tab.active { background: var(--pri-soft); color: var(--pri-text); }
.wz-cell-titel { font-size: 13px; color: var(--text); }
.bar-fill.eur { background: var(--pri); }
.wz-overview-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-top: 16px; }
@media (max-width: 1100px) { .wz-overview-cols { grid-template-columns: 1fr; } }

/* scope-ontwikkeling grafiek */
.wz-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wz-seg { display: inline-flex; border: 1px solid var(--border-2); border-radius: var(--r-sm); overflow: hidden; }
.wz-seg-btn { border: none; background: var(--surface); color: var(--text-3); font: inherit; font-size: 12px; font-weight: 550; padding: 4px 12px; cursor: pointer; }
.wz-seg-btn:hover { background: var(--surface-2); }
.wz-seg-btn.on { background: var(--pri); color: #fff; }
.wz-chart-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.wz-chip-toggle { cursor: pointer; border: none; font: inherit; font-size: 11.5px; }
.wz-chip-toggle.off { opacity: .38; }
.wz-chart { width: 100%; height: auto; display: block; }
.wz-chart .b-add { fill: var(--green); }
.wz-chart .b-red { fill: var(--red); }
.wz-chart .cum-line { fill: none; stroke: var(--pri); stroke-width: 2; stroke-linejoin: round; }
.wz-chart .cum-dot { fill: var(--pri); }
.wz-chart .zero-line { stroke: var(--border-3); stroke-width: 1; }
.wz-chart .x-lab { fill: var(--text-3); font-size: 10px; text-anchor: middle; }
.wz-chart .y-lab { fill: var(--text-faint); font-size: 9.5px; text-anchor: end; }
.wz-chart-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 11.5px; color: var(--text-3); }
.wz-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wz-lg { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.wz-lg.add { background: var(--green); }
.wz-lg.red { background: var(--red); }
.wz-lg.cum { background: var(--pri); border-radius: 50%; width: 8px; height: 8px; }

@media print {
  .topbar, .breadcrumb, .no-print, .toast-wrap, .sidebar, .side-toggle { display: none !important; }
  body { background: #fff; }
  .content { max-width: none; padding: 0; }
  .panel, .stat-card { box-shadow: none; border-color: #d5d7de; }
  .panel, .dz-table, .stat-card, .report-head { break-inside: avoid; page-break-inside: avoid; }
  .dash-grid { gap: 8px; }
  .report-title { font-size: 20px; }
  .report-cover { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 88vh; page-break-after: always; }
}

/* ================================================================ mobiel (fase A)
   Navigatie-lade + onderbalk, opgeschoonde topbalk, grotere tikdoelen en
   16px-invoer (geen iOS-zoom). Tabellen blijven horizontaal scrollen (kaart-
   weergave volgt in fase B/C). Desktop ongewijzigd; alles hieronder is mobiel. */
.topbar-hamburger { display: none; }
.bottom-nav { display: none; }
.dz-scrim { display: none; }

@media (max-width: 640px) {
  /* De shell (lade, scrim, topbalk, onderbalk, tikdoelen, 16px-invoer, bottom-sheet-menu's)
     staat in de mobiele-shell-sectie achteraan dit bestand; hier alleen view-specifieke regels. */

  /* ---- brede tabellen: laat ze binnen het paneel horizontaal scrollen i.p.v. de layout te breken;
          vermijd de 100vh-rekensom die op mobiel een minitabel oplevert ---- */
  .sticky-tbl { max-height: none; overflow-x: auto; }

  /* ---- procespagina: de drie kolommen stapelen; het detailpaneel blijft de werkplek ---- */
  .pd-work { display: flex; flex-direction: column; }
  .pd-steps, .pd-canvas, .pd-panel { width: 100%; }
  .pd-branch { grid-template-columns: 1fr; }
  .pd-branch-del { justify-self: end; }
  /* kaart-selects (scope, status, prioriteit) app-breed iets compacter dan de 16px-basis suggereert */
  .tag-select { padding: 5px 26px 5px 9px; }

  /* ---- Processenlijst: kaartmodus via het generieke .dz-cards-patroon (shell-sectie);
          hier alleen wat proc-specifiek is ---- */
  .proc-table td .proc-name { font-size: 15px; font-weight: 600; }

  /* ---- procespagina-subtab-eigenheden (het scrollen zelf doet .hscroll-tabs) ---- */
  .proc-tabs { padding: 0 12px; }
  .proc-tab { white-space: nowrap; flex: none; }

  /* ---- unieke-tabel-detail: stapel kolommen (1 kolom) en zet de processen eronder ---- */
  .kol-grid { grid-template-columns: 1fr; }
  .utbl-detail { grid-template-columns: 1fr; gap: 14px; }
  .utbl-usage { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 12px; }
}

/* ===================== Roadmap (Frontier 1) ===================== */
.rm { max-width: 1080px; }
.rm .panel { margin-bottom: 16px; }

.rm-hero { display: flex; gap: 24px; align-items: center; padding: 28px; background: linear-gradient(135deg, var(--pri-soft), var(--surface) 62%); }
.rm-hero-l { flex: 1 1 auto; min-width: 0; }
.rm-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--pri-text); text-transform: uppercase; letter-spacing: .05em; }
.rm-title { font-size: 27px; line-height: 1.2; margin: 10px 0 12px; color: var(--text); }
.rm-lead { font-size: 15px; line-height: 1.62; color: var(--text-2); max-width: 70ch; margin: 0; }
.rm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rm-chip { font-size: 12.5px; font-weight: 600; color: var(--pri-text); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-pill); padding: 4px 12px; }
.rm-note { margin-top: 16px; display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--text-2); background: var(--amber-soft); border: 1px solid var(--border-2); border-radius: var(--r); padding: 10px 12px; }
.rm-note .ic { color: var(--amber-strong); flex: none; margin-top: 1px; }
.rm-hero-r { flex: none; }
.rm-hero-badge { width: 96px; height: 96px; border-radius: 24px; background: var(--pri); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-2); }
.rm-hero-badge .ic { font-size: 46px; }

.rm-figure { padding: 8px 4px 2px; }
.rm-bridge { display: block; width: 100%; height: auto; }
.rm-figcap { font-size: 13px; color: var(--text-2); padding: 6px 6px 2px; line-height: 1.55; }
.rm-print .ic { font-size: 15px; }

.rm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.rm-card, .rm-ask-item { display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 16px; }
.rm-card { box-shadow: var(--sh); }
.rm-ico { flex: none; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.rm-ico .ic { font-size: 21px; }
.rm-card-b { min-width: 0; }
.rm-card-t { font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 4px; }
.rm-card-x { font-size: 13.5px; line-height: 1.55; color: var(--text-2); }

.rm-ask-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 4px; }
.panel-title .ti-flag, .panel-title .ti-shield, .panel-title .ti-trending-up { color: var(--pri-text); margin-right: 4px; vertical-align: -2px; }

.rm-phases { display: flex; flex-direction: column; gap: 2px; padding: 4px; }
.rm-phase { display: flex; gap: 16px; padding: 14px 6px; border-bottom: 1px solid var(--border); }
.rm-phase:last-child { border-bottom: none; }
.rm-phase-n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--pri-soft); color: var(--pri-text); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.rm-phase-b { min-width: 0; flex: 1 1 auto; }
.rm-phase-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.rm-phase-t { font-weight: 700; font-size: 15px; color: var(--text); }
.rm-phase-tag { font-size: 11.5px; font-weight: 600; color: var(--slate-text); background: var(--slate-soft); border-radius: var(--r-pill); padding: 2px 10px; }
.rm-phase-g { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.rm-phase-g > div { font-size: 13px; line-height: 1.5; color: var(--text-2); }
.rm-l { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin-bottom: 2px; }

.rm-value-list { list-style: none; margin: 0; padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.rm-value-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.rm-value-list .ic { color: var(--green-strong); flex: none; margin-top: 2px; }

@media (max-width: 880px) {
  .rm-cards, .rm-ask-grid, .rm-value-list { grid-template-columns: 1fr; }
  .rm-phase-g { grid-template-columns: 1fr; }
  .rm-hero { flex-direction: column; align-items: flex-start; }
  .rm-title { font-size: 23px; }
}

/* Print / PDF: alleen de roadmap-inhoud, zonder app-chrome (om te delen met Thinkwise). */
@media print {
  .sidebar, .topbar, #dz-crumb, .bottom-nav, .side-toggle, .rm-print { display: none !important; }
  .app, .main-area, #dz-content { display: block !important; margin: 0 !important; padding: 0 !important; }
  .rm { max-width: none; }
  .rm .panel { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  .rm-hero { background: none; }
  body { background: #fff; }
}

/* ------------------------------------------------------------------ back-up-preview (alleen-lezen)
   Terwijl een beheerder een back-up bekijkt (DZ.app.previewInfo gezet) krijgt #dz-content de klasse
   .dz-preview-ro. Invoervelden worden dan zichtbaar uitgeschakeld: je kunt de back-up wél doorbladeren
   (navigatie, tabs en uitklappen blijven werken), maar niets wijzigen. Opslag is sowieso bevroren, en
   de zoek-/paletvelden (buiten #dz-content) blijven bruikbaar. */
.dz-preview-ro input,
.dz-preview-ro select,
.dz-preview-ro textarea,
.dz-preview-ro [contenteditable="true"] {
  pointer-events: none !important;
  opacity: .55 !important;
  cursor: not-allowed !important;
  background: var(--surface-2) !important;
  box-shadow: none !important;
}
.dz-preview-ro input[type="checkbox"],
.dz-preview-ro input[type="radio"] { filter: grayscale(1); }

/* ------------------------------------------------------------------ doorkijkmodus (rol bekijken)
   Een super-admin kijkt tijdelijk met de bril van een andere rol (Rollen & rechten -> "Bekijk als
   deze rol"). Anders dan de back-up-preview worden velden hier NIET uitgezet: juist zien wat die rol
   wel en niet mag bewerken is het doel. Daarom moet de balk bovenin des te duidelijker zijn — vandaar
   het volvlak-accent in plaats van een subtiele tag. Opslaan is intussen geblokkeerd (storage.js). */
.dz-rp-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 4px 3px 10px; border-radius: var(--r-pill, 999px);
  background: var(--violet-text, #6A35C9); color: #fff;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.dz-rp-pill .ic { width: 14px; height: 14px; stroke: #fff; flex: none; }
.dz-rp-pill strong { font-weight: 700; }
/* Afsluitknop zit IN de pil, zodat de topbalk niet naar een tweede regel breekt. */
.dz-rp-exit {
  margin-left: 3px; padding: 2px 9px; border: 0; cursor: pointer;
  border-radius: var(--r-pill, 999px);
  background: rgba(255, 255, 255, .22); color: #fff;
  font: inherit; font-size: 11.5px; font-weight: 600;
}
.dz-rp-exit:hover { background: rgba(255, 255, 255, .34); }
/* Smal scherm: het voorvoegsel valt weg, de rolnaam en "Sluiten" blijven staan. */
@media (max-width: 880px) {
  .dz-rp-pill { font-size: 11px; padding-left: 8px; }
  .dz-rp-txt { display: none; }
}

/* ---- AI-taken: goedkeurlijst (reviewkaarten) ----
   Eén reviewkaart per voorstel, alles direct leesbaar (geen accordeons); de kop van een item
   draagt proceslink, voortgangsbalk en bulk-acties. */
.ait-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; padding: 10px 14px; border: 1px solid var(--accent, #6366f1); background: var(--surface, #fff); border-radius: 10px; font-size: 13px; }
@supports (background: color-mix(in srgb, red 8%, white)) { .ait-banner { background: color-mix(in srgb, var(--accent, #6366f1) 8%, var(--surface, #fff)); } }
.ait-item { border: 1px solid var(--border, #eceef2); border-radius: 12px; padding: 12px 14px; margin: 10px 0; background: var(--surface, #fff); }
.ait-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ait-item-title { font-weight: 600; font-size: 14px; }
.ait-proc-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; cursor: pointer; text-decoration: underline; color: var(--accent, #6366f1); }
.ait-progress { flex: 0 1 160px; height: 6px; border-radius: 3px; background: var(--sunken, #eef0f4); overflow: hidden; margin-left: auto; }
.ait-progress > span { display: block; height: 100%; background: var(--accent, #6366f1); }
.ait-hint { font-size: 12.5px; color: var(--text-3, #6b7280); margin: 6px 0 2px; }
.ait-steps { font-size: 12.5px; color: var(--text-2, #475569); background: var(--sunken, #f7f8fb); border-radius: 8px; padding: 8px 10px; margin: 8px 0; line-height: 1.6; }
/* Feedback op een enkel voorstel: opvallend genoeg om te zien dat je iets openzette, rustig
   genoeg om niet met de voorstellen zelf te concurreren. */
.ait-feedback { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--pri, #6366f1); border-radius: 8px; background: var(--pri-soft, #eef2ff); }
.ait-feedback .textarea { background: var(--surface, #fff); }
.ait-cat-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 2px; font-weight: 600; font-size: 13px; }
.ait-el { border: 1px solid var(--border, #eceef2); border-radius: 10px; padding: 10px 12px; margin: 6px 0; }
.ait-el-beslist { opacity: .65; background: var(--sunken, #f7f8fb); }
.ait-el-head { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
.ait-el-acts { white-space: nowrap; flex: none; }
.ait-el-body { font-size: 12.5px; color: var(--text-2, #475569); margin-top: 4px; }
.ait-el-why { font-size: 12px; color: var(--text-3, #6b7280); margin-top: 4px; }
.ait-acc { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--text-2, #475569); }
.ait-acc li { margin: 2px 0; }
.ait-kol { font-size: 12px; color: var(--text-2, #475569); margin-top: 4px; }

/* ---- Procesdetail: tab-tellers + inline AI-voorstel-kaarten ---- */
.proc-tab-badges { display: inline-flex; flex-direction: column; gap: 2px; margin-left: 7px; vertical-align: middle; align-items: flex-start; }
.proc-tab-badges-row { display: inline-flex; gap: 4px; }
.proc-tab-badges .count-chip { font-size: 10.5px; }
.proc-tab-ai { display: inline-flex; align-items: center; gap: 3px; background: #ede9fe; color: #5b21b6; border-radius: 999px; padding: 0 7px; font-size: 10.5px; font-weight: 600; line-height: 16px; }
.proc-tab-ai .ic { font-size: 11px; }
.prop-card { border: 1.5px dashed #c4b5fd; background: #fbfaff; border-radius: 10px; padding: 8px 11px; margin: 6px 0; }
.prop-label { display: inline-block; background: #ede9fe; color: #5b21b6; border-radius: 999px; padding: 0 8px; font-size: 10.5px; font-weight: 600; line-height: 17px; margin-right: 4px; vertical-align: 1px; }

/* ---- Datamodel > Model (ERD): interactief relationeel model ---- */
.erd-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.erd-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border, #eceef2); background: var(--surface, #fff); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; color: var(--text-2, #475569); }
.erd-chip:hover { background: var(--sunken, #f7f8fb); }
.erd-chip.active { border-color: var(--pri, #6366f1); color: var(--pri-text, #4f46e5); background: var(--ring, #eef0fe); font-weight: 600; }
.erd-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.erd-wrap { display: flex; height: calc(100dvh - 190px); min-height: 480px; }
.erd-stage { flex: 1; position: relative; overflow: hidden; background: var(--surface, #fff); border: 1px solid var(--border, #eceef2); border-radius: var(--r-lg, 14px); cursor: grab; min-width: 0; }
.erd-stage.erd-panning { cursor: grabbing; }
.erd-stage svg { display: block; width: 100%; height: 100%; }
.erd-node { cursor: grab; }
.erd-node text { pointer-events: none; user-select: none; }
.erd-node rect { transition: opacity .15s; }
.erd-node.erd-sel rect:first-of-type { stroke-width: 2.5; filter: drop-shadow(0 2px 6px rgba(0,0,0,.18)); }
.erd-dim { opacity: .13; }
.erd-edge { stroke: #b9bdc7; stroke-width: 1.2; fill: none; stroke-opacity: .45; }
.erd-edge.erd-hl { stroke: var(--pri, #6366f1); stroke-width: 2; stroke-opacity: 1; }
.erd-edge.erd-dim { stroke-opacity: .06; }
/* Inschuifpaneel (Vera-patroon): vast rechts over de pagina, open bij selectie, resize-greep links. */
.erd-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 94vw; z-index: 1100; border-left: 1px solid var(--border, #eceef2); background: var(--surface, #fff); box-shadow: -10px 0 30px rgba(0, 0, 0, .12); transform: translateX(105%); transition: transform .22s ease; display: flex; }
.erd-panel.erd-open { transform: none; }
.erd-resize { flex: none; width: 8px; cursor: ew-resize; }
.erd-resize:hover { background: var(--sunken, #f7f8fb); }
.erd-panel-body { flex: 1; min-width: 0; overflow-y: auto; padding: 14px 16px 12px 8px; }
.erd-panel-lege { text-align: center; padding: 30px 12px; }
.erd-legenda { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; text-align: left; }
.erd-leg-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2, #475569); }
.erd-panel-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.erd-claim { font-size: 12.5px; color: var(--text-2, #475569); margin-bottom: 6px; }
.erd-sectie { font-weight: 600; font-size: 12.5px; margin: 12px 0 5px; color: var(--text-2, #475569); }
.erd-proc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.erd-proc-chip { border: 1px solid var(--border, #eceef2); background: var(--surface, #fff); border-radius: 999px; padding: 2px 9px; font-size: 11.5px; cursor: pointer; color: var(--text-2, #475569); }
.erd-proc-chip:hover { background: var(--sunken, #f7f8fb); }
.erd-proc-chip.erd-bouwt { border-color: var(--pri, #6366f1); color: var(--pri-text, #4f46e5); font-weight: 600; }
.erd-kolgrid { display: flex; flex-direction: column; gap: 2px; }
.erd-kolrij { display: grid; grid-template-columns: 1.3fr .8fr 22px 1.1fr 26px; gap: 4px; align-items: center; }
.erd-kolrij .inline { font-size: 12px; padding: 3px 6px; min-width: 0; }
.erd-kolkop { font-size: 10.5px; color: var(--text-3, #6b7280); text-transform: uppercase; letter-spacing: .04em; padding: 0 6px; }
.erd-addrij { display: flex; gap: 6px; margin-top: 6px; }
.erd-addrij .inline { flex: 1; font-size: 12px; }
.erd-rel-kop { font-weight: 600; font-size: 12.5px; margin: 12px 0 4px; color: var(--text-2, #475569); }
.erd-rel-item { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: 1px solid var(--border, #eceef2); background: var(--surface, #fff); border-radius: 8px; padding: 4px 9px; font-size: 12px; cursor: pointer; color: var(--text-2, #475569); margin: 2px 0; }
.erd-rel-item:hover { background: var(--sunken, #f7f8fb); }
@media (max-width: 1100px) { .erd-wrap { height: calc(100dvh - 230px); } .erd-panel { width: 100vw !important; max-width: 100vw; } .erd-stage { min-height: 380px; } }
@media (max-width: 640px) { .erd-wrap { height: calc(100dvh - 230px - var(--bottomnav-h) - var(--safe-b)); min-height: 360px; } }

/* ================================================================ Bijlagen (attachments) */
.att-panel { margin-bottom: 14px; }
.panel-body { padding: 14px 16px; }
.att-card { display: flex; flex-direction: column; gap: 12px; }
.att-loading { display: flex; align-items: center; gap: 8px; color: var(--text-2, #475569); font-size: 13px; padding: 8px 2px; }
.att-loading .ti, .att-preview-empty .ti { opacity: .7; }

/* dropzone */
.att-dropzone { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  border: 1.5px dashed var(--border, #dfe3ea); border-radius: var(--r-lg, 12px); padding: 18px 14px;
  color: var(--text-2, #475569); background: var(--sunken, #f8fafc); transition: border-color .15s, background .15s; }
.att-dropzone.is-drag { border-color: var(--pri, #6366f1); background: var(--pri-soft, #eef2ff); color: var(--pri-text, #4338ca); }
.att-dropzone > .ti { font-size: 22px; opacity: .6; }
.att-dz-main { font-size: 13px; }
.att-dz-hint { font-size: 11.5px; color: var(--text-2, #64748b); opacity: .8; }
.att-pick-link { background: none; border: none; padding: 0; color: var(--pri, #4f46e5); font: inherit; cursor: pointer; text-decoration: underline; }

/* lijst + preview naast elkaar */
.att-split { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 880px) { .att-split { grid-template-columns: 1fr; } }
.att-list { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.att-empty { font-size: 12.5px; padding: 6px 2px; }
.att-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--border, #eceef2);
  border-radius: 10px; background: var(--surface, #fff); cursor: pointer; text-align: left; }
.att-item:hover { background: var(--sunken, #f7f8fb); }
.att-item.active { border-color: var(--pri, #6366f1); box-shadow: 0 0 0 1px var(--pri, #6366f1) inset; }
.att-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.att-name { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-sub { font-size: 11px; color: var(--text-2, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-item .icontile { flex: none; }

/* icoon-vlak per bestandstype (spiegelt .stat-ic--*) */
.att-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none;
  border-radius: 8px; font-size: 16px; }
.att-ic--slate  { background: var(--slate-soft, #f1f5f9);  color: var(--text-2, #475569); }
.att-ic--blue   { background: var(--blue-soft, #eff6ff);   color: var(--blue-text, #1d4ed8); }
.att-ic--violet { background: var(--violet-soft, #f5f3ff); color: var(--violet-text, #6d28d9); }
.att-ic--green  { background: var(--green-soft, #ecfdf5);  color: var(--green-strong, #047857); }
.att-ic--amber  { background: var(--amber-soft, #fffbeb);  color: var(--amber-strong, #b45309); }
.att-ic--red    { background: var(--red-soft, #fef2f2);    color: var(--red-strong, #dc2626); }

/* preview-paneel */
.att-preview { border: 1px solid var(--border, #eceef2); border-radius: var(--r-lg, 12px); overflow: hidden; background: var(--surface, #fff); min-height: 260px; display: flex; flex-direction: column; }
.att-preview-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; flex: 1; padding: 30px; color: var(--text-2, #64748b); font-size: 12.5px; }
.att-preview-empty .ti { font-size: 26px; }
.att-prev-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border, #eceef2); background: var(--sunken, #f8fafc); }
.att-prev-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-prev-actions { display: inline-flex; gap: 6px; flex: none; }
.att-prev-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px; background: var(--sunken, #f8fafc); min-height: 240px; }
.att-img { max-width: 100%; max-height: 460px; object-fit: contain; border-radius: 6px; }
.att-frame { width: 100%; height: 480px; border: none; background: #fff; border-radius: 6px; }

/* rijke kaart voor Word/Excel/overig (geen inline-preview mogelijk) */
.att-filecard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 22px; max-width: 340px; }
.att-filecard-ic { width: 52px; height: 52px; border-radius: 12px; font-size: 28px; }
.att-filecard-name { font-weight: 600; font-size: 14px; word-break: break-word; }
.att-filecard-meta { font-size: 12px; }
.att-filecard-hint { font-size: 11.5px; max-width: 260px; }
.att-filecard-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }

/* alleen-lezen aggregatielijst (req/us-bijlagen op de proces-tab) */
.att-ref-list { display: flex; flex-direction: column; gap: 10px; }
.att-ref { border: 1px solid var(--border, #eceef2); border-radius: 10px; padding: 8px 10px; background: var(--surface, #fff); }
.att-ref-ent { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; font: inherit; font-weight: 600; font-size: 12.5px; color: var(--text, #0f172a); cursor: pointer; }
.att-ref-ent:hover { color: var(--pri, #4f46e5); }
.att-ref-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.att-ref-file { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border, #eceef2); background: var(--sunken, #f7f8fb); border-radius: 8px; padding: 3px 8px; font-size: 11.5px; cursor: pointer; color: var(--text-2, #475569); }
.att-ref-file:hover { background: var(--pri-soft, #eef2ff); color: var(--pri-text, #4338ca); }
.att-ref-file .att-ic { width: 20px; height: 20px; font-size: 12px; border-radius: 5px; }

/* ================================================================ Activiteit (feed) */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.page-h { font-size: 17px; font-weight: 650; margin: 0; }
.page-sub { font-size: 12.5px; color: var(--text-2, #64748b); margin: 3px 0 0; }
.act-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.act-search { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border, #dfe3ea); border-radius: 9px; padding: 0 8px; background: var(--surface, #fff); min-width: 220px; flex: 1; max-width: 360px; }
.act-search .ti { color: var(--text-2, #94a3b8); font-size: 15px; }
.act-search input { border: none; background: none; outline: none; padding: 7px 2px; font: inherit; font-size: 13px; width: 100%; }
.act-day { font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2, #94a3b8); margin: 14px 0 6px; }
.act-day:first-child { margin-top: 0; }
.act-feed { display: flex; flex-direction: column; }
.act-row { display: flex; gap: 11px; padding: 10px 2px; border-bottom: 1px solid var(--border, #f1f2f5); }
.act-row:last-child { border-bottom: none; }
.act-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 8px; font-size: 16px; }
.act-ic--slate  { background: var(--slate-soft, #f1f5f9);  color: var(--text-2, #475569); }
.act-ic--blue   { background: var(--blue-soft, #eff6ff);   color: var(--blue-text, #1d4ed8); }
.act-ic--violet { background: var(--violet-soft, #f5f3ff); color: var(--violet-text, #6d28d9); }
.act-ic--green  { background: var(--green-soft, #ecfdf5);  color: var(--green-strong, #047857); }
.act-ic--amber  { background: var(--amber-soft, #fffbeb);  color: var(--amber-strong, #b45309); }
.act-ic--red    { background: var(--red-soft, #fef2f2);    color: var(--red-strong, #dc2626); }
.act-body { min-width: 0; flex: 1; }
.act-line { display: flex; align-items: center; gap: 7px; }
.act-summary { font-size: 13px; color: var(--text, #0f172a); }
.act-sub { font-size: 11.5px; color: var(--text-2, #64748b); margin-top: 2px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.act-actor { font-weight: 500; }
.act-link { display: inline-flex; align-items: center; gap: 3px; background: none; border: none; padding: 0; font: inherit; font-size: 11.5px; color: var(--pri, #4f46e5); cursor: pointer; }
.act-link:hover { text-decoration: underline; }
.act-link .ti { font-size: 13px; }
.act-ent { color: var(--text-2, #475569); }

/* ================================================================ ERP-dekking (Business Central) */
.erp-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.erp-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.erp-edited { color: var(--amber-strong, #b45309); font-weight: 600; }
.erp-missdom { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; padding: 10px 14px; border: 1px solid var(--red-strong, #dc2626); background: var(--red-soft, #fef2f2); color: var(--red-strong, #b91c1c); border-radius: 10px; font-size: 13px; }
.erp-missdom-btn { display: inline-flex; align-items: center; gap: 4px; margin: 2px 4px 2px 0; border: 1px solid var(--red-strong, #dc2626); background: var(--surface, #fff); color: var(--red-strong, #b91c1c); border-radius: 7px; padding: 2px 9px; font-size: 12px; cursor: pointer; }
.erp-missdom-btn:hover { background: var(--red-strong, #dc2626); color: #fff; }

.erp-mod { margin-bottom: 10px; overflow: hidden; }
.erp-mod-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; }
.erp-mod-head:hover { background: var(--sunken, #f8fafc); }
.erp-caret { color: var(--text-2, #94a3b8); flex: none; }
.erp-mod-title { font-weight: 600; font-size: 14px; flex: none; }
.erp-mod-title .muted { font-weight: 400; font-size: 12px; }
.erp-mod-count { font-size: 12px; color: var(--text-2, #475569); flex: none; white-space: nowrap; }
.erp-mod-dom { margin-left: auto; font-size: 11.5px; color: var(--text-2, #64748b); text-align: right; }
.erp-nodom { color: var(--red-strong, #dc2626); }
.erp-mod-body { padding: 4px 14px 12px; border-top: 1px solid var(--border, #eceef2); }
.erp-sub { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2, #94a3b8); margin: 10px 0 4px; }

.erp-bar { flex: none; width: 90px; height: 7px; border-radius: 4px; background: var(--sunken, #eef1f5); overflow: hidden; }
.erp-bar-fill { display: block; height: 100%; }
.erp-bar--green { background: var(--green-strong, #16a34a); }
.erp-bar--amber { background: var(--amber-strong, #d97706); }
.erp-bar--red { background: var(--red-strong, #dc2626); }

.erp-row, .erp-flow { display: flex; align-items: center; gap: 8px; padding: 5px 2px; flex-wrap: wrap; border-bottom: 1px solid var(--border, #f1f2f5); }
.erp-row:last-child, .erp-flow:last-child { border-bottom: none; }
.erp-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.erp-dot.ok { background: var(--green-strong, #16a34a); }
.erp-dot.miss { background: var(--red-strong, #dc2626); }
.erp-tname { font-size: 13px; }
.erp-en { color: var(--text-2, #94a3b8); font-size: 11.5px; }
.erp-kern { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--violet-text, #6d28d9); background: var(--violet-soft, #f5f3ff); border-radius: 4px; padding: 1px 5px; vertical-align: 1px; }
.erp-match { font-size: 12px; color: var(--green-strong, #047857); }
.erp-warn { color: var(--amber-strong, #b45309); }
.erp-mk { flex: none; }
.erp-link-sel { max-width: 190px; }
/* ERP-dekking checklist-weergave */
.erp-listmod-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border, #f1f2f5); flex-wrap: wrap; }
.erp-listmod .dz-table td { vertical-align: top; }
.erp-list-nl { font-size: 13px; font-weight: 550; }
.erp-shallow { font-size: 12px; color: var(--amber-strong, #b45309); white-space: nowrap; }
.erp-list-flows { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--border, #f1f2f5); }
.erp-flowchip { font-size: 11.5px; border-radius: 999px; padding: 2px 8px; white-space: nowrap; border: 1px solid var(--border, #e5e7eb); }
.erp-flowchip.ok { color: var(--green-strong, #047857); background: var(--green-soft, #ecfdf5); border-color: var(--green-soft, #d1fae5); }
.erp-flowchip.miss { color: var(--red-strong, #b91c1c); background: var(--red-soft, #fef2f2); border-color: var(--red-soft, #fee2e2); }
/* AI-koppelvoorstellen (BC <-> project) */
.erp-match-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 2px; border-top: 1px solid var(--border, #f1f2f5); }
.erp-match-row:first-of-type { border-top: none; }
.erp-match-bc { font-size: 13px; font-weight: 550; }
.erp-match-proj { font-size: 13px; color: var(--green-strong, #047857); font-weight: 600; }
.erp-match-btns { margin-left: auto; display: flex; gap: 6px; }
.erp-match-reden { flex-basis: 100%; font-size: 12px; }
/* Registratie-dekking (Datamodel > Analyse) */
.reg-group { margin-top: 6px; }
.reg-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 2px; border-top: 1px solid var(--border, #f1f2f5); font-size: 13px; }
.reg-row .link-btn { font-weight: 550; }
.reg-miss { font-size: 12px; color: var(--red-strong, #b91c1c); }
.reg-fixbtn { margin-left: auto; white-space: nowrap; }

.erp-chips { display: inline-flex; gap: 4px; margin-left: auto; flex: none; }
.erp-chip { border: 1px solid var(--border, #dfe3ea); background: var(--surface, #fff); border-radius: 20px; padding: 2px 10px; font-size: 11.5px; cursor: pointer; color: var(--text-2, #475569); }
.erp-chip:hover { border-color: var(--text-3, #94a3b8); }
.erp-chip.is-mvp.on { background: var(--green-soft, #ecfdf5); border-color: var(--green-strong, #16a34a); color: var(--green-strong, #047857); }
.erp-chip.is-later.on { background: var(--amber-soft, #fffbeb); border-color: var(--amber-strong, #d97706); color: var(--amber-strong, #b45309); }
.erp-chip.is-neg.on { background: var(--sunken, #f1f5f9); border-color: var(--text-3, #94a3b8); color: var(--text-2, #475569); text-decoration: line-through; }

.erp-edit-ctl { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }
.erp-alias-inp { width: 220px; font-size: 12px; }
.icontile.on { background: var(--violet-soft, #f5f3ff); color: var(--violet-text, #6d28d9); }
.erp-addrow { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.erp-addrow .inline { flex: 1; min-width: 160px; font-size: 12.5px; }
.erp-map-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.erp-map-dom { flex: 1; font-size: 13px; }

/* -- zij-aan-zij-weergave: links dit project, rechts de BC-referentie, per module uitgelijnd -- */
.erp-viewtoggle { display: inline-flex; gap: 0; flex: none; }
.erp-viewtoggle .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.erp-viewtoggle .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.erp-sbs-hint { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; padding: 9px 13px; border: 1px solid var(--border, #dfe3ea); background: var(--sunken, #f8fafc); border-radius: 10px; font-size: 12.5px; color: var(--text-2, #475569); }
.erp-sbs-headrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px; position: sticky; top: 0; z-index: 5; background: var(--bg, #f5f6f8); padding: 6px 0; }
.erp-sbs-col-h { font-weight: 650; font-size: 13.5px; display: flex; align-items: center; gap: 7px; color: var(--text, #0f172a); }
.erp-sbs-mod { margin-bottom: 14px; }
.erp-sbs-modhead { display: flex; align-items: center; gap: 10px; padding: 7px 2px; }
.erp-sbs-modtitle { font-weight: 650; font-size: 13.5px; }
.erp-sbs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.erp-sbs-cell { background: var(--surface, #fff); border: 1px solid var(--border, #eceef2); border-radius: var(--r-lg, 12px); padding: 10px 12px; min-height: 64px; }
.erp-sbs-left.erp-drop-over, .erp-sbs-proc.erp-drop-over { outline: 2px dashed var(--pri, #6366f1); outline-offset: -2px; background: var(--pri-soft, #eef2ff); }
.erp-sbs-proc { border: 1px solid var(--border, #eceef2); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: var(--sunken, #fafbfc); }
.erp-sbs-proc:last-child { margin-bottom: 0; }
.erp-sbs-proc-h { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 0 0 5px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--text, #0f172a); }
.erp-sbs-proc-h:hover { color: var(--pri, #4f46e5); }
.erp-sbs-none { font-size: 12.5px; color: var(--text-2, #64748b); padding: 12px 6px; border: 1.5px dashed var(--border, #dfe3ea); border-radius: 10px; text-align: center; }
.erp-sbs-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.erp-sbs-tag { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border, #e2e6ec); background: var(--surface, #fff); border-radius: 7px; padding: 2px 8px; font-size: 12px; color: var(--text-2, #475569); }
.erp-sbs-tag.is-matched { background: var(--green-soft, #ecfdf5); border-color: var(--green-strong, #16a34a); color: var(--green-strong, #047857); }
.erp-sbs-ref { cursor: grab; }
.erp-sbs-ref:active { cursor: grabbing; }
.erp-sbs-ref:not(.is-matched):hover { border-color: var(--pri, #6366f1); color: var(--pri-text, #4338ca); background: var(--pri-soft, #eef2ff); }
.erp-sbs-ref.is-kern:not(.is-matched) { border-color: var(--violet-text, #8b5cf6); }
.erp-sbs-flow { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border, #e2e6ec); background: var(--surface, #fff); border-radius: 8px; padding: 5px 9px; margin-bottom: 5px; font-size: 12.5px; cursor: grab; color: var(--text-2, #475569); }
.erp-sbs-flow:active { cursor: grabbing; }
.erp-sbs-flow.is-matched { background: var(--green-soft, #ecfdf5); border-color: var(--green-strong, #16a34a); color: var(--green-strong, #047857); cursor: default; }
.erp-sbs-flow .ti-grip-vertical { color: var(--text-3, #cbd5e1); }
@media (max-width: 1100px) { .erp-sbs-row, .erp-sbs-headrow { grid-template-columns: 1fr; } }

/* Activiteit-layout: gevulde kaart + smalle, sticky "Nu online"-kolom rechts.
   Deze regel staat NA de @media(max-width:1180px) die .proc-layout naar een kolom zet, en won
   daardoor ook op mobiel: het grid bleef "1fr 260px", waardoor de hoofdkolom op 375px tot 75px
   werd platgedrukt en de inhoud werd afgekapt. Daarom hier zelf de mobiele val herhalen. */
.act-layout { grid-template-columns: minmax(0, 1fr) 260px; }
@media (max-width: 1180px) {
  .act-layout { grid-template-columns: 1fr; }
  .act-online { position: static; }
}
.act-sheet { padding: 8px 18px 18px; }
.act-online { position: sticky; top: 70px; }
.act-online .panel-body { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; }
.act-online-row { display: flex; align-items: center; gap: 9px; padding: 6px 6px; border-radius: 8px; }
.act-online-row:hover { background: var(--sunken, #f7f8fb); }
.act-online-name { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-online-you { color: var(--text-2, #94a3b8); font-size: 11.5px; }
.act-online-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green-strong, #16a34a); box-shadow: 0 0 0 3px var(--green-soft, #dcfce7); }
@media (max-width: 1100px) { .act-online { position: static; } }

/* Bijlage-rij: acties (hernoemen + verwijderen) en inline hernoem-modus */
.att-item-actions { display: inline-flex; gap: 4px; flex: none; }
.att-item-rename { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border: 1px solid var(--pri, #6366f1); border-radius: 10px; background: var(--surface, #fff); }
.att-rename-field { display: flex; align-items: center; flex: 1; min-width: 0; gap: 1px; }
.att-rename-input { flex: 1; min-width: 0; font-size: 12.5px; }
.att-rename-ext { color: var(--text-2, #64748b); font-size: 12.5px; flex: none; }

/* ================================================================ mobiel (fase D)
   Verfijning bovenop het fase A/B/C-blok (regel ~2325): de drie kernschermen (processen-
   overzicht, procesdetail, tabellen-tab), app-brede tikdoelen/polish en het native-app-gevoel
   (pressed-states, PWA-safe-areas). Staat bewust ONDERAAN het bestand: bron-volgorde wint.
   Base-regels hieronder verbergen uitsluitend de mobiel-only elementen; desktop ongewijzigd. */
.ov-mobilebar { display: none; }
.dlv-statusbtn { display: none; }
.erd-zoombtns { display: none; }
.ppl-move { display: none; }
/* Navigatie-secties als groep: display:contents = layout-identiek aan de oude platte lijst.
   De sectiekop is overal een in-/uitklap-knop (chevron), zodat de navigatie ook op korte
   schermen binnen beeld past; de voorkeur wordt lokaal bewaard (Beheer start ingeklapt). */
.side-group { display: contents; }
.side-section { display: flex; align-items: center; gap: 6px; width: 100%; cursor: pointer;
  font: inherit; font-size: 10.5px; font-weight: 600; color: var(--text-faint); text-transform: uppercase;
  letter-spacing: .06em; background: none; border: 0; text-align: left;
  -webkit-user-select: none; user-select: none; border-radius: var(--r-sm); }
.side-section:hover { color: var(--text-2); }
.side-section:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.side-sec-ic { display: inline-block; margin-left: auto; font-size: 15px; color: var(--text-3);
  transition: transform .15s ease; }
.side-group.collapsed .side-sec-ic { transform: rotate(-90deg); }
.side-group.collapsed .navtab { display: none; }
/* De navigatie zelf scrollt als er meer items zijn dan hoogte (merk + gebruikersblok blijven staan). */
.side-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* Ingeklapte (64px) zijbalk: geen sectiekoppen, dus ook geen inklap-gedrag nodig. */
.app.side-collapsed .side-group.collapsed .navtab { display: flex; }

@media (max-width: 640px) {
  /* De navigatielade-regels staan in de mobiele-shell-sectie achteraan dit bestand. */

  /* ---- A1 processen-overzicht: sorteerbalk (tabelkop is verborgen op mobiel) + nette filters ---- */
  /* filterbalk: een regel (zoeken + Filters-knop), vastgeplakt onder de topbalk;
     selects/switches/wisknop klappen uit onder de balk. De knop zelf is desktop onzichtbaar. */
  .toolbar, .dec-filterbar { position: sticky; top: calc(var(--topbar-h) - 1px); z-index: 13;
    background: var(--bg); margin: 0 -12px 10px; padding: 8px 12px; }
  /* Staat er een tabrij boven, dan parkeert de filterbalk daaronder in plaats van erachter. */
  .settings-nav.hscroll-tabs ~ .toolbar { top: calc(var(--topbar-h) + 44px); }
  /* Die -12px is een bewuste full-bleed voor een filterbalk die direct op de paginaachtergrond
     ligt. Zit de balk IN een panel (Delivery, Deliverables), dan bleedt hij niet naar de
     schermrand maar botst hij tegen overflow:hidden en wordt hij afgekapt. Daar dus geen bleed. */
  .panel > .toolbar, .panel .toolbar { margin-left: 0; margin-right: 0; }
  .toolbar-l { display: flex; flex-wrap: nowrap; gap: 8px; width: 100%; }
  .toolbar-l .search { flex: 1; min-width: 0; }
  /* de input zelf mag krimpen; zijn intrinsieke breedte (~270px) duwde anders het paneel breder dan het scherm */
  .toolbar .search input, .dec-search input { min-width: 0; width: 0; flex: 1 1 auto; }
  .mob-filterbtn { display: inline-flex; align-items: center; gap: 6px; flex: none; }
  .toolbar.filters-open .mob-filterbtn { background: var(--pri-soft); color: var(--pri-text); border-color: transparent; }
  .dec-filterbar.filters-open .mob-filterbtn { background: var(--pri-soft); color: var(--pri-text); border-color: transparent; }
  .toolbar-l .filter-select, .toolbar-l .switch-row, .toolbar-l .dz-switch, .toolbar-l .pids-chip,
  .toolbar-l .btn:not(.mob-filterbtn),
  .dec-filterbar .filter-select, .dec-filterbar .dec-openswitch { display: none; }
  .toolbar.filters-open .toolbar-l, .dec-filterbar.filters-open { flex-wrap: wrap; }
  /* uitgeklapt: zoekveld houdt de eerste regel (met de knop), selects eronder in twee kolommen */
  .toolbar.filters-open .toolbar-l .search, .dec-filterbar.filters-open .dec-search { min-width: calc(100% - 112px); }
  /* pager: alleen vorige/volgende en de actieve pagina (tien nummerknoppen duwden de pagina breed) */
  .dec-pager { flex-wrap: wrap; row-gap: 6px; }
  .dec-pager .dec-pagenum { display: none; }
  .dec-pager .dec-pagenum.active { display: inline-flex; }
  .toolbar.filters-open .toolbar-l .filter-select, .dec-filterbar.filters-open .filter-select { display: block; flex: 1 1 calc(50% - 8px); min-width: 0; width: auto; }
  .toolbar.filters-open .toolbar-l .switch-row, .toolbar.filters-open .toolbar-l .dz-switch,
  .toolbar.filters-open .toolbar-l .pids-chip, .dec-filterbar.filters-open .dec-openswitch { display: inline-flex; }
  .toolbar.filters-open .toolbar-l .btn:not(.mob-filterbtn):not([hidden]) { display: inline-flex; }
  .toolbar-r { width: 100%; }
  .toolbar-r .btn { flex: 1; justify-content: center; }
  /* sorteerbalk hoort bij de uitgeklapte filters */
  .ov-mobilebar { display: none; align-items: center; gap: 8px; margin: 0 0 10px; }
  .toolbar.filters-open + .ov-mobilebar { display: flex; }
  .ov-mobilebar span { font-size: 12px; color: var(--text-3); flex: none; }
  .ov-mobilebar .filter-select { flex: 1; min-width: 0; display: block; }
  /* statcards: compacte, horizontaal scrollende strip; de pagina begint bij de inhoud,
     niet bij een schermvullende KPI-stapel */
  .dash-grid, .dash .dash-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 46%);
    overflow-x: auto; gap: 8px; margin-bottom: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent 100%); }
  .dash-grid::-webkit-scrollbar { display: none; }
  .stat-card { padding: 9px 11px; }
  .stat-card.stat-lead { gap: 9px; }
  .stat-lead .stat-ic { width: 30px; height: 30px; font-size: 15px; border-radius: 8px; }
  .stat-num, .stat-lead .stat-num { font-size: 19px; margin-top: 1px; }
  .stat-label, .stat-lead .stat-label { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stat-sub { display: none; }

  /* ---- A2 procesdetail: bewerkbare velden zichtbaar op touch (hover bestaat niet) + tikdoelen ---- */
  .inline { background: var(--sunken, #f4f5f7); border-color: var(--border, #e5e7eb); }
  .inline-h1 { background: transparent; }
  /* panel-koppen (o.a. AI-box met kopieer/plak-knoppen) mogen wrappen i.p.v. de pagina op te rekken */
  .panel-head { flex-wrap: wrap; row-gap: 6px; }
  .panel-head > div { flex-wrap: wrap; min-width: 0; }
  /* Header: titel op een eigen volle regel (werd samengeperst naast de chip en Ask AI-knop),
     omschrijving volle breedte, sier-icoon weg — elke pixel telt op 375px. */
  .pd-ident { padding: 14px 12px; gap: 12px; }
  .pd-ident-ic { display: none; }
  .pd-ident-row .inline-h1 { flex: 1 1 100%; min-width: 0; font-size: 19px; }
  .pd-ident-oms { width: 100%; }
  /* minimap kost op een telefoon alleen ruimte; het schema zelf blijft scrollbaar */
  .pd-mini { display: none; }
  /* Dashboard AI-taken: titel niet meer afkappen tot een paar tekens; knoppen op een eigen regel */
  .ai-task { flex-wrap: wrap; }
  .ai-task-body { flex: 1 1 calc(100% - 45px); }
  .ai-task-title { white-space: normal; }
  .ai-task-actions { flex-basis: 100%; justify-content: flex-end; }
  /* ---- A3 tabellen-tab: kolommen-tabel scrolt i.p.v. onleesbaar samen te persen ---- */
  .kol-tbl { min-width: 560px; }
  .tbl-card-head { flex-wrap: wrap; }
  .tbl-card-head .inline { flex: 1 1 55%; min-width: 140px; }

  /* ---- B app-breed: hover-only knoppen altijd zichtbaar ---- */
  .acc-item .acc-del, .wz-chip-rm { opacity: 1; }
  .wz-title-input { min-width: 0; max-width: 100%; }
  .tbl-wrap, .sticky-tbl, .del-board { -webkit-overflow-scrolling: touch; }
  .del-board { scroll-snap-type: x proximity; }
  .del-col { scroll-snap-align: start; }

  /* ---- D touch-alternatieven zichtbaar maken ---- */
  .dlv-statusbtn { display: inline-flex; margin-left: auto; }
  .erd-zoombtns { display: flex; gap: 6px; }
  .ppl-move { display: inline-flex; gap: 2px; }
}

/* ERD: pointer events sturen pan/drag zelf aan; zonder dit kaapt de browser touch voor scrollen.
   Op desktop (muis) heeft touch-action geen effect. */
.erd-stage svg { touch-action: none; }

/* In geïnstalleerde (standalone) modus loopt de app tot in de statusbalk: safe-area respecteren. */
@media (display-mode: standalone) {
  .topbar { padding-top: calc(9px + env(safe-area-inset-top)); }
  .sidebar { padding-top: env(safe-area-inset-top); }
}

/* ===================== Intake-wizard (begeleide proces-intake) =====================
   Tablet-first: een kolom, grote klikdoelen, chatweergave. Bewust rustig gehouden;
   de doelgroep is de werkvloer, niet de consultant. */
.iw .iw-wrap { max-width: 760px; margin: 0 auto; padding: 8px 0 40px; }
.iw-h { font-size: 22px; margin: 0 0 4px; }
.iw-lead { color: var(--text-2); margin: 0 0 18px; }
.iw-pads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.iw-pad { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 16px 14px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-lg); cursor: pointer; font: inherit; transition: border-color .12s, box-shadow .12s; }
.iw-pad:hover { border-color: var(--border-3); box-shadow: var(--sh); }
.iw-pad.active { border-color: var(--pri); box-shadow: 0 0 0 3px var(--ring); }
.iw-pad-titel { font-weight: 600; }
.iw-pad-uitleg { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.iw-startform, .iw-resume { margin-bottom: 14px; }
.iw-resume-row { display: flex; align-items: center; gap: 8px; padding: 10px 4px; border-top: 1px solid var(--border); text-decoration: none; color: inherit; }
.iw-resume-row:first-of-type { border-top: 0; }
.iw-resume-row:hover { color: var(--pri); }
.iw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.iw-dekking { margin-bottom: 12px; font-size: 12.5px; }
.iw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.iw-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 12px; }
.iw-chip.done { border-color: var(--green-strong, #15803d); background: var(--green-soft, #f0fdf4); color: var(--green-strong, #15803d); }
.iw-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.iw-msg { display: flex; }
.iw-msg.vera { justify-content: flex-start; }
.iw-msg.jij { justify-content: flex-end; }
.iw-bubble { max-width: 84%; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); line-height: 1.55; font-size: 14px; white-space: pre-wrap; }
.iw-msg.jij .iw-bubble { background: var(--pri-soft, #eef2ff); border-color: transparent; }
.iw-msg.jij .iw-bubble.skip { color: var(--text-2); font-style: italic; }
.iw-toelichting { margin-top: 6px; font-size: 12.5px; color: var(--text-2); }
.iw-busy { color: var(--text-2); }
.iw-dots { display: inline-flex; gap: 3px; margin-right: 4px; }
.iw-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--text-2); animation: iwdot 1.2s infinite; }
.iw-dots span:nth-child(2) { animation-delay: .2s; }
.iw-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes iwdot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.iw-error { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--red-strong, #dc2626); background: var(--red-soft, #fef2f2); color: var(--red-strong, #b91c1c); border-radius: var(--r); font-size: 13px; }
.iw-input .textarea { font-size: 15px; }
.iw-input-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.iw-example { padding: 8px 12px; margin-bottom: 8px; border-radius: var(--r); background: var(--amber-soft, #fffbeb); border: 1px solid var(--amber-strong, #d97706); color: var(--amber-strong, #92400e); font-size: 13px; }
.iw-summary .iw-summary-text { line-height: 1.6; }
.iw-open { margin-top: 10px; font-size: 13px; }
.iw-open ul { margin: 6px 0 0 18px; }
.iw-intro p { margin: 0 0 8px; line-height: 1.55; }
.iw-simple-q { margin-bottom: 12px; }
@media (max-width: 880px) {
  .iw-pads { grid-template-columns: 1fr; }
  .iw-bubble { max-width: 92%; }
  .iw .iw-wrap { padding: 4px 2px 40px; }
}

/* ===================== Tenant- & project-intake (#/tenantintake) =====================
   Hergebruikt de iw-* chatstijlen; eigen toevoegingen: het zekerheidsdashboard (chips met
   scorebalkjes + totaalscore), de fase-kruimel, de review-kolommen en de inricht-checklist. */
/* .iw .iw-wrap (0-2-0) zou anders van .tin-wrap winnen en alles op 760px houden; daarom hier
   dezelfde specificiteit. De brede variant is voor de fases met tabellen en twee kolommen. */
.tin-wrap { max-width: 980px; }
.iw .tin-wrap { max-width: 980px; }
.iw .tin-wrap.tin-wide { max-width: 1240px; }
.tin-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 4px; font-size: 12.5px; color: var(--text-3); }
.tin-crumb { padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--border); }
.tin-crumb.on { border-color: var(--pri); color: var(--pri); font-weight: 600; }
.tin-crumb.done { border-color: var(--green-strong, #15803d); color: var(--green-strong, #15803d); }
.tin-crumb-sep { font-size: 12px; }
.tin-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
/* Sticky: het zekerheidsdashboard blijft in beeld terwijl het gesprek doorloopt.
   z-index 5 blijft onder de topbar (15) en de mobiele toolbars (25). */
.tin-dash { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); position: sticky; top: calc(var(--topbar-h, 58px) + 8px); z-index: 5; }
.tin-score { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 66px; height: 66px; flex: none; border-radius: 50%; border: 3px solid var(--border-3); }
.tin-score.done { border-color: var(--green-strong, #15803d); }
.tin-score-n { font-size: 20px; font-weight: 700; line-height: 1; }
.tin-score-l { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.tin-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Chips zijn buttons (klik = popup met wat er over dat gebied bekend is); font/cursor-reset
   omdat de browser-defaults van button anders doorschemeren. */
.tin-chip { display: inline-flex; flex-direction: column; gap: 3px; padding: 4px 10px 5px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 11.5px; font-family: inherit; cursor: pointer; text-align: left; transition: border-color .12s ease, box-shadow .12s ease; }
button.tin-chip:hover { border-color: var(--pri); box-shadow: var(--sh); }
.tin-chip.done { border-color: var(--green-strong, #15803d); color: var(--green-strong, #15803d); }
.tin-gebied-body { max-height: 40dvh; overflow: auto; font-size: 13px; line-height: 1.5; }
.tin-gebied-q { margin-top: 8px; }
.tin-gebied-a { color: var(--text-2); margin: 2px 0 2px 10px; padding-left: 8px; border-left: 2px solid var(--border); }
.tin-mic-aan { color: var(--red-strong, #dc2626); border-color: var(--red-strong, #dc2626); animation: pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tin-mic-aan { animation: none; } }
.tin-chip-bar { display: block; width: 74px; height: 3px; border-radius: 2px; background: var(--border); overflow: hidden; }
.tin-chip-bar span { display: block; height: 100%; background: var(--pri); }
.tin-chip.done .tin-chip-bar span { background: var(--green-strong, #15803d); }
/* Rechterkolom breder (was 300px): daar staan nu ook de gekoppelde processen en de user
   stories, met procesnamen en keuzelijsten die in 300px niet pasten. minmax(0, ...) op beide
   kolommen zodat een grid-kind mag krimpen (zonder min-width:0 groeit een grid-kind mee met
   zijn inhoud en duwt het de layout uit elkaar). */
.tin-review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 14px; align-items: start; }
.tin-review-main, .tin-review-rail { min-width: 0; }
.tin-review-main .panel { margin-bottom: 14px; }
.tin-review-rail { position: sticky; top: 12px; }
/* Formuliervelden in de rail nooit breder dan de rail zelf. */
.tin-review-rail .select, .tin-review-rail .input, .tin-review-rail .textarea { max-width: 100%; }
.tin-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.tin-domain { margin-bottom: 14px; }
.tin-domain-head { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 6px; }
.tin-domain-head .btn { margin-left: auto; }
.tin-proc { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 8px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.tin-proc-oms { flex-basis: 100%; font-size: 12.5px; }
.tin-issue { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; margin-bottom: 6px; border-radius: var(--r); font-size: 12.5px; line-height: 1.45; }
.tin-issue.ok { background: var(--green-soft, #f0fdf4); color: var(--green-strong, #15803d); }
.tin-issue.blok { background: var(--red-soft, #fef2f2); color: var(--red-strong, #b91c1c); }
.tin-issue.letop { background: var(--amber-soft, #fffbeb); color: var(--amber-strong, #92400e); }
.tin-step { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 9px 10px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: var(--r); font-size: 13px; }
.tin-step.ok { border-color: var(--green-strong, #15803d); color: var(--green-strong, #15803d); }
.tin-step.bezig { border-color: var(--pri); color: var(--pri); }
.tin-step.fout { border-color: var(--red-strong, #dc2626); }
.tin-step-err { flex-basis: 100%; font-size: 12.5px; color: var(--red-strong, #b91c1c); }
.tin-step-pw { flex-basis: 100%; font-size: 12.5px; color: var(--amber-strong, #92400e); background: var(--amber-soft, #fffbeb); border-radius: var(--r); padding: 5px 8px; }
/* Blauwdruk-voortgang: het icoon van het domein dat nu wordt gegenereerd pulseert zacht. */
.tin-step .ic.pulsing { animation: pulse 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tin-step .ic.pulsing { animation: none; } }
/* Kerncijfers op het klaar-scherm. */
.tin-kern { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--sunken, var(--surface)); }
.tin-kern .tin-chip { flex-direction: row; align-items: center; gap: 6px; }
.tin-kern-groot { font-size: 13.5px; color: var(--text-2); }
.tin-kern-n { font-size: 18px; font-weight: 700; color: var(--text); }
/* ---- Demo-modus: bedrijfskaart met foto, autoplay-pauzeknop en keuzemomenten ---- */
/* De foto (bronnen.foto) heeft een gradient-fallback voor als het bestand (nog) ontbreekt. */
.tin-demo-kaart { display: flex; gap: 14px; align-items: stretch; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.tin-demo-kaart.compact { margin: 8px 0 10px; }
.tin-demo-cover { position: relative; flex: none; width: 220px; min-height: 130px; background: var(--sunken, var(--surface)); }
.tin-demo-cover.klein { width: 132px; min-height: 96px; }
.tin-demo-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tin-cover-fallback { position: absolute; inset: 0; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--pri) 0%, #1e3a8a 100%); }
.tin-cover-fallback .ic { font-size: 34px; opacity: .9; }
.tin-demo-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 12px 0; min-width: 0; }
.tin-demo-oms { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.tin-demo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tin-demo-chip { padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--border); font-size: 11.5px; color: var(--text-2); background: var(--surface); }
/* Pauze/hervat rechts in het sticky zekerheidsdashboard. */
.tin-demo-pauze { margin-left: auto; flex: none; }
.tin-demo-pauze.hervat { border-color: var(--pri); color: var(--pri); }
/* Keuzemoment: twee grote antwoordkaarten in de plaats van het antwoordveld. */
.tin-keuze-kop { font-weight: 600; margin-bottom: 8px; font-size: 13.5px; }
.tin-keuze-optie { display: block; width: 100%; text-align: left; margin-bottom: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--text); font-family: inherit; font-size: 13.5px; line-height: 1.5; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.tin-keuze-optie:hover { border-color: var(--pri); box-shadow: var(--sh); transform: translateY(-1px); }
/* Enter-animatie van het nieuwste chatbericht (alleen dat ene; zie lastAnimKey in de view). */
@keyframes tin-bubble-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.iw-msg-in { animation: tin-bubble-in .22s ease-out; }
@media (prefers-reduced-motion: reduce) { .iw-msg-in { animation: none; } .tin-keuze-optie { transition: none; } }
/* Ademruimte onder het nieuwste bericht bij de autoscroll (scrollIntoView block: end). */
.iw-msg { scroll-margin-bottom: 16px; }
@media (max-width: 880px) {
  .tin-grid2 { grid-template-columns: 1fr; }
  .tin-review { grid-template-columns: 1fr; }
  .tin-review-rail { position: static; }
  .tin-dash { flex-direction: column; align-items: flex-start; position: static; }
  .tin-demo-kaart { flex-direction: column; }
  .tin-demo-cover, .tin-demo-cover.klein { width: 100%; height: 140px; }
  .tin-demo-body { padding: 0 12px 12px; }
  .tin-demo-pauze { margin-left: 0; }
}

/* ---- Proces-intake: statusbalk + beoordelingstab ---- */
.proc-intakebar { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); }
.pib-main { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13.5px; }
.pib-afgewezen { padding: 8px 12px; border-radius: var(--r); background: var(--red-soft, #fef2f2); border: 1px solid var(--red-strong, #dc2626); color: var(--red-strong, #b91c1c); font-size: 13px; }
.pib-rows { display: flex; flex-direction: column; gap: 6px; }
.pib-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.pib-status { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pib-reject { width: 100%; max-width: 480px; }
.pib-sheet .panel { margin-bottom: 14px; }
.pib-sam { line-height: 1.6; }
.pib-stappen li, .pib-list li { margin-bottom: 10px; line-height: 1.5; }
.pib-stappen { padding-left: 20px; }
.pib-list { padding-left: 20px; }
.pib-takken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* ---- Vragenpakketten-editor (AI-instellingen -> Vragenpakketten) ---- */
.vp-row { display: grid; grid-template-columns: 2fr 2fr 160px 36px; gap: 8px; margin-bottom: 8px; align-items: center; }
.vp-defaults { padding-left: 20px; }
.vp-defaults li { margin-bottom: 8px; line-height: 1.5; }
.ov-hervat { border: 0; cursor: pointer; font: inherit; }
.dash-reviewqueue { margin-bottom: 18px; }
@media (max-width: 880px) { .vp-row { grid-template-columns: 1fr; } }

/* ---- Verfijn-snelkoppelingen op de stappeneditor (intake-concepten) ---- */
.steps-refine { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 0; }
.pib-chainerr { color: var(--red-strong, #b91c1c); }

/* ---- Platformfuncties (AI-instellingen): feature-flag-schakelaars ---- */
.ais-feat { margin-bottom: 18px; }
.ais-feat-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ais-feat-main { max-width: 60ch; }

/* ERP-mapping: tik-om-te-koppelen (touch-alternatief voor de drag) */
.erp-armedbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--safe-b, 0px)); z-index: 80;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px;
  background: var(--pri-soft); border: 1px solid var(--pri); border-radius: var(--r-lg);
  box-shadow: var(--sh-2, 0 8px 24px rgba(15, 23, 42, .16)); font-size: 13.5px; }
.erp-armedbar .btn { margin-left: auto; }
.erp-armed-src { outline: 2px solid var(--pri); outline-offset: 2px; border-radius: var(--r-sm); }

/* Ketenbalk op de procespagina (voorheen inline gestyled) */
.chain-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }

/* ---- Voorheen inline gestylede invoervelden (G1: inline font-size wint van elke media-query,
        dus de mobiele 16px-regel kon niet grijpen; als klassen kan de shell-sectie ze overschrijven). ---- */
.ais-inp-sub { margin-top: 4px; font-size: 12px; }
.ais-mono-ta { font-family: var(--mono, monospace); font-size: 12px; }
.domctx-ta { width: 100%; font-size: 12.5px; }

/* ================================================================
   Mobiele shell. EEN sectie, bewust achteraan: alles hier wint op
   bronvolgorde van de basis- en view-stijlen hierboven, zodat er geen
   verspreide volgorde-trucs meer nodig zijn.
   Model: <=880px lade + scrim + hamburger (de oude 64px-rail is weg,
   dat was de dode zone 641-880); <=640px onderbalk + compacte topbalk
   + ruimere tikdoelen + 16px-tekstinvoer. */
:root { --bottomnav-h: 64px; --safe-b: env(safe-area-inset-bottom, 0px); --touch: 44px; --topbar-h: 63px; }

@media (max-width: 880px) {
  /* ---- off-canvas navigatielade ---- */
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100dvh; width: 270px; max-width: 84vw;
    transform: translateX(-100%); transition: transform .22s ease; z-index: 60;
    box-shadow: 0 12px 40px rgba(0,0,0,.28);
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding-left: max(12px, env(safe-area-inset-left)); padding-bottom: max(14px, var(--safe-b));
  }
  .app.nav-open .sidebar { transform: translateX(0); }
  .side-toggle { display: none; }
  /* De lade toont altijd de volledige navigatie, iets ruimer dan op desktop. */
  .side-brand { padding: 14px 8px 16px; }
  .side-nav .navtab { justify-content: flex-start; padding: 12px 12px; font-size: 15px; }
  .side-section { padding: 14px 10px 8px; }
  .side-sec-ic { font-size: 16px; }
  /* De desktopvoorkeur "zijbalk ingeklapt" (.side-collapsed) mag de lade nooit tot rail maken. */
  .app.side-collapsed .sidebar { width: 270px; max-width: 84vw; }
  .app.side-collapsed .side-brand { justify-content: flex-start; padding: 14px 8px 16px; }
  .app.side-collapsed .side-brand .brandtext { display: flex; }
  .app.side-collapsed .side-nav .navtab { justify-content: flex-start; padding: 12px 12px; }
  .app.side-collapsed .side-nav .navtab span { display: inline; }
  .app.side-collapsed .side-section { display: flex; }
  .app.side-collapsed .side-user { justify-content: flex-start; }
  .app.side-collapsed .side-user-body { display: block; }
  .app.side-collapsed .side-user-logout { display: inline-flex; }
  .app.side-collapsed .side-user-main { justify-content: flex-start; }

  /* ---- scrim achter de geopende lade ---- */
  .dz-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.42);
    z-index: 55; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .app.nav-open .dz-scrim { opacity: 1; pointer-events: auto; }
  .app.no-chrome .dz-scrim { display: none; }

  /* ---- hamburger in de topbalk (opent de lade) ---- */
  .topbar-hamburger { display: inline-flex; align-items: center; justify-content: center;
    width: var(--touch); height: var(--touch); flex: none; border: none; background: transparent;
    color: var(--text-2); border-radius: var(--r); cursor: pointer; }
  .topbar-hamburger .ic { font-size: 23px; }

  /* Geopende lade: de pagina eronder scrollt niet mee (body krijgt .dz-navlock via app.js). */
  body.dz-navlock { overflow: hidden; }
}

@media (max-width: 640px) {
  /* ---- compacte topbalk: titel + icoon-acties ---- */
  .topbar { padding: 9px 12px; gap: 8px; flex-wrap: nowrap; min-height: var(--topbar-h); box-sizing: border-box;
    padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .topbar-l { gap: 8px; flex: 1; min-width: 0; }
  /* Titel + contextregel als één blok, zoals in het mobiele ontwerp. De contextregel vertelt in
     welk project (of op welk proces) je zit — op mobiel is de zijbalk weg, dus dat staat nergens
     anders. Beide regels kappen af met een ellips in plaats van de balk uit elkaar te duwen. */
  .topbar-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
  .page-title { font-size: 17px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-sub { display: block; font-size: 11.5px; line-height: 1.35; color: var(--text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-search { display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; min-width: 0; padding: 0; flex: none; }
  .topbar-search span, .topbar-search kbd { display: none; }
  .topbar-r { gap: 6px; flex-wrap: nowrap; }
  /* De opslagindicator is in rust een groene stip in een kadertje: die leest als een knop die
     niets doet, en kost ruimte die de titel beter kan gebruiken. Op een telefoon tonen we hem
     daarom alleen als er iets te melden is — bezig, onopgeslagen of mislukt. */
  .topbar-r .status .txt { display: none; }
  .topbar-r .status.saved { display: none; }
  .topbar-r .status.error .txt { display: inline; }
  .topbar-r .btn { padding: 9px 10px; }
  .topbar-r .btn span { display: none; }
  .topbar-r .btn .ic, .topbar-r .btn img { margin-right: 0 !important; }

  /* ---- inhoud: minder randmarge + ruimte voor de onderbalk ---- */
  .content { padding: 16px 16px calc(var(--bottomnav-h) + 16px + var(--safe-b));
    padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }

  /* ---- onderbalk ---- */
  .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--surface); border-top: 1px solid var(--border); justify-content: space-around;
    padding: 4px max(4px, env(safe-area-inset-right)) calc(4px + var(--safe-b)) max(4px, env(safe-area-inset-left)); }
  .bottom-nav .bn-item { flex: 1; min-width: 0; min-height: 48px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px; padding: 4px 2px; border: none; background: transparent;
    color: var(--text-3); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
    border-radius: var(--r); }
  .bottom-nav .bn-item .ic { font-size: 21px; }
  .bottom-nav .bn-item.active { color: var(--pri-text); }
  .bottom-nav .bn-item span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app.no-chrome .bottom-nav { display: none; }

  /* ---- tikdoelen (44px-richtlijn; dichte tabellen blijven compact) ---- */
  .icontile { width: 40px; height: 40px; }
  .crumb-nav .icontile { width: 40px; height: 40px; }
  .tbl-expand { width: 40px; height: 40px; }
  .menu-item { padding: 12px 14px; font-size: 15px; }
  .seg-btn { min-height: 40px; }
  .btn { min-height: 40px; }
  .btn-sm, .btn.btn-sm { min-height: 36px; }
  .toggle { width: 44px; height: 26px; }
  .toggle::after { width: 22px; height: 22px; }
  .toggle.on::after { transform: translateX(18px); }

  /* ---- 16px alleen op tekstinvoer (voorkomt iOS-zoom). Selects openen een native picker en
          hebben dit niet nodig; compact houden zodat ze niet als enorme knoppen ogen. ---- */
  .input, .textarea, textarea, input.inline, textarea.inline,
  .search input, .cmdp-search input { font-size: 16px; }
  /* hogere-specificiteit of view-lokale invoer die anders sub-16px bleef (G1-sweep) */
  .iw-input .textarea, .erd-kolrij .inline, .flow-pop-field .filter-select, .filter-select,
  .select-sm, .pd-mf-ctl select, .dom-add-input, .acc-input,
  .cr-textarea, .act-search input, .att-rename-input, .tag-select { font-size: 16px; }

  /* ---- dropdown-menu's als bottom sheet (kunnen niet van het scherm vallen) ---- */
  .menu { position: fixed; left: 0; right: 0; bottom: 0; top: auto; border-radius: var(--r-lg) var(--r-lg) 0 0;
    min-width: 0; max-height: 70dvh; overflow: auto; z-index: 62; padding-bottom: var(--safe-b); }

  /* ---- toasts boven de onderbalk ---- */
  .toast-wrap { bottom: calc(var(--bottomnav-h) + 20px + var(--safe-b)); z-index: 70; }
  .toast { max-width: calc(100vw - 24px); }

  /* ---- besluitknoppen op de wensenpagina: duimformaat, één per regel ----
     Hier land je vanuit een pushmelding, vaak staand met één hand. Vier knoppen naast elkaar
     worden dan miskliks; onder elkaar met 52px hoogte niet. */
  .wn-acties { flex-direction: column; }
  .wn-acties .btn { width: 100%; min-height: 52px; justify-content: center; font-size: 16px; }

  /* ---- native gevoel ---- */
  * { -webkit-tap-highlight-color: transparent; }
  html, body { overscroll-behavior-x: none; }
  body { font-size: 15px; }
  .panel-title { font-size: 15px; }
  .btn:active, .bn-item:active, .icontile:active { transform: scale(.96); }
  .dz-cards tr:active, .tbl-card-head:active { background: var(--sunken, #f4f5f7); }
}

/* ---- Generieke mobiele patronen (fase 2); consumenten zetten de klasse in hun markup ---- */
@media (max-width: 640px) {
  /* .dz-cards: opt-in kaartmodus voor tabellen. data-label op de td wordt het kaartlabel;
     td.card-title is de titelregel, td.card-hide vervalt op de kaart. */
  table.dz-cards, .dz-table.wide.dz-cards { min-width: 0; }
  .dz-cards thead { display: none; }
  .dz-cards, .dz-cards tbody, .dz-cards tr, .dz-cards td { display: block; width: auto; }
  .dz-cards tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    margin: 0 0 10px; padding: 14px; box-shadow: var(--sh); }
  .dz-cards td { border: none; padding: 6px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; white-space: normal; }
  .dz-cards td::before { content: attr(data-label); font-size: 11px; font-weight: 600; color: var(--text-3); flex: none; }
  .dz-cards td.card-title { display: block; padding: 0 0 8px; margin-bottom: 6px; border-bottom: 1px solid var(--sunken);
    font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
  .dz-cards td.card-title::before { display: none; }
  .dz-cards td.card-hide { display: none; }
  .dz-cards td .cell-meter { flex: 1; min-width: 0; }
  .dz-cards tr.group-row { margin: 10px 0 6px; background: transparent; border: none; padding: 4px 2px; }
  .dz-cards tr.group-row td, .dz-cards td[colspan] { display: block; background: transparent; border: none; padding: 4px 2px; }
  .dz-cards tr.group-row td::before, .dz-cards td[colspan]::before { display: none; }
  /* ---- .dz-cards-chips: compacte kaartmodus voor lange lijsten ----
     De standaard kaartmodus zet elk veld op een eigen regel met een label ervoor. Bij een lijst met
     tien velden is één kaart dan een half scherm hoog en scrol je je suf. Deze variant volgt het
     mobiele ontwerp: titel bovenaan, daaronder de velden als wrappende chips, en wat van nature
     breed is (een meter, een voortgangsbalk) op een eigen regel. Alle informatie blijft staan —
     alleen de vorm verandert. */
  .dz-cards.dz-cards-chips tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .dz-cards-chips td { display: inline-flex; width: auto; padding: 0; gap: 5px; justify-content: flex-start; }
  .dz-cards-chips td::before { font-size: 11px; font-weight: 500; color: var(--text-faint); }
  .dz-cards-chips td.card-title { flex: 1 0 100%; padding: 0 0 8px; margin: 0 0 2px;
    border-bottom: 1px solid var(--sunken); }
  /* Een meter zegt niets in een chip: die krijgt zijn eigen volle regel onderaan de kaart. */
  .dz-cards-chips td:has(.cell-meter) { flex: 1 0 100%; order: 2; gap: 8px; }
  .dz-cards-chips td .cell-meter { flex: 1; min-width: 0; }
  .dz-cards-chips tr.group-row { display: block; }

  /* kaart-panelen: geen dubbele container/schaduw rond de kaarten */
  .cardpanel { background: transparent; border: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .cardpanel .panel-head { padding: 0 2px 10px; border-bottom: none; }
  .cardpanel .sticky-tbl, .cardpanel .tbl-wrap, .cardpanel .dec-tbl-scroll { overflow: visible; }

  /* .hscroll-tabs: horizontale tabstrip met edge-fade in plaats van wrappen of afkappen */
  .hscroll-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
  .hscroll-tabs::-webkit-scrollbar { display: none; }
  .hscroll-tabs > * { flex: none; white-space: nowrap; }

  /* .dz-composer: invoer die boven de onderbalk blijft plakken (intake, chat) */
  .dz-composer { position: sticky; bottom: calc(var(--bottomnav-h) + var(--safe-b) + 8px); z-index: 30;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--sh-2, 0 8px 24px rgba(15, 23, 42, .12)); padding: 10px 12px; }

  /* ---- panelen met een vaste binnenmaat die op een telefoon niet past ----
     Deze drie hadden al te weinig ruimte; met de ruimere randmarge van het mobiele ontwerp valt dat
     harder op. Overal dezelfde oplossing: laten wikkelen en krimpen in plaats van afkappen. */
  .dec-detail-head { flex-wrap: wrap; }
  .dec-detail-head .btn { flex: 1 1 100%; justify-content: center; }
  .act-sheet { padding: 8px 12px 14px; }
  .act-sheet > * { min-width: 0; }
  .act-toolbar { flex-wrap: wrap; }
  .act-search { min-width: 0; max-width: none; flex: 1 1 100%; }
  .rm-hero { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 16px; }
  .rm-hero-l { width: 100%; }
  .rm-hero-l b { overflow-wrap: anywhere; }
  .rm-hero-badge { width: 64px; height: 64px; border-radius: 18px; }

  /* ---- procespagina: tabrij blijft staan ----
     De tabrij zit onderin de proceskop-kaart. Die kaart klipt zijn inhoud (.sheet heeft
     overflow:hidden), waardoor sticky er niet werkt; op mobiel zetten we dat uit zodat de tabrij
     onder de topbalk blijft plakken in plaats van halverwege de pagina te verdwijnen. */
  .proc-tabs-wrap { position: sticky; top: calc(var(--topbar-h) - 1px); z-index: 12;
    border-radius: 0; margin-left: -16px; margin-right: -16px; border-left: none; border-right: none; }

  /* ---- processtappen: de lijst blijft compact, bewerken gebeurt in het detailpaneel ----
     De inline stapkaart met uitklapchevron is vervallen: sinds de herbouw is de linkerkolom al
     een leeslijst (nummer, titel, status) en staat het formulier in het paneel eronder. */
  .pd-steps-head { flex-wrap: wrap; row-gap: 6px; }
  .pd-step { padding: 12px 10px; }
  /* De invoegregels tussen stappen zijn een hover-affordance; op touch bestaat hover niet en
     kosten ze alleen ruimte. Toevoegen kan met de knop onderaan de lijst. */
  .pd-insert { display: none; }

  /* ---- werkvloerflow (fase 4): intake, procespagina ---- */
  .iw-head { flex-wrap: wrap; }
  .iw-input-btns .btn-primary { flex: 1 1 100%; justify-content: center; }
  .iw-chips { margin-top: 8px; padding-bottom: 2px; }
  .pd-status { padding: 12px; }
  .pd-st-cell { padding: 0; border-left: none; flex: 1 1 100%; }
  .pd-st-appr { padding-left: 0; border-left: none; }
  .pd-aicol { flex-direction: column; }
  .chain-btn-long, .chain-hint { display: none; }

  /* ---- delivery en projectplan (fase 5) ---- */
  .del-bydev-switch { display: none; }   /* kanban is de mobiele modus; swimlanes zijn desktop */
  .report-actions { flex-wrap: wrap; justify-content: flex-start; }
  .calc-row { flex-wrap: wrap; row-gap: 2px; }

  /* ---- complexe tools (fase 6): ERD-kolomrijen stapelen; armed-balk boven de onderbalk ---- */
  .erd-kolrij { grid-template-columns: 1.4fr 1fr 26px; grid-auto-rows: auto; row-gap: 3px; }
  .erd-kolrij input[list="dz-erd-tables"] { grid-column: 1 / 3; }
  .erd-kolrij .btn { grid-column: 3; }
  .erd-kolkop span:nth-child(4), .erd-kolkop span:nth-child(5) { display: none; }
  .erp-armedbar { bottom: calc(var(--bottomnav-h) + 12px + var(--safe-b)); }

  /* bottom-sheet-patroon (zelfde als .menu in de shell) geldt ook voor het dashboard-fasemenu */
  .dash-fasemenu { position: fixed; left: 0; right: 0; bottom: 0; top: auto; border-radius: var(--r-lg) var(--r-lg) 0 0;
    min-width: 0; max-height: 70dvh; overflow: auto; z-index: 62; padding-bottom: var(--safe-b); }

  /* ---- tabrijen blijven staan tijdens het scrollen ----
     Op een telefoon scrolt een tabblad al na een halve schermhoogte buiten beeld, en dan weet je
     niet meer waar je bent. De tabrij plakt daarom bovenaan. Alleen de rij zelf plakt, niet de hele
     kop: die kost te veel van de 800 pixels die je hebt.
     Alleen tabrijen die direct in .content staan; de procestabs zitten in een eigen kaart met
     overflow:hidden, waar sticky niet werkt en een uitloop over de rand valt. */
  .content > .settings-nav.hscroll-tabs {
    position: sticky; top: calc(var(--topbar-h) - 1px); z-index: 14; background: var(--bg);
    margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px;
    box-shadow: 0 1px 0 var(--border);
  }
  /* Tikdoel van een tab op ontwerpmaat (44px) zodat je hem raakt zonder in te zoomen. */
  .settings-nav .settings-tab, .proc-tabs .proc-tab { min-height: 44px; font-size: 13.5px; }

  /* ---- bottom sheets: greep bovenaan, zoals in het mobiele ontwerp ----
     Het streepje maakt zonder woorden duidelijk dat het paneel van onderen komt en weg kan. */
  .menu::before, .dash-fasemenu::before {
    content: ""; display: block; width: 36px; height: 4px; margin: 2px auto 10px;
    border-radius: var(--r-pill); background: var(--border-3, var(--border));
  }

  /* ---- bevestigingsvraag als bottom sheet ----
     Een dialoog midden op het scherm is op een telefoon lastig te raken met één hand; onderaan
     staat hij binnen duimbereik. Zelfde vorm als de andere sheets. */
  .dz-confirm-ov { align-items: flex-end !important; padding: 0 !important; }
  .dz-confirm { max-width: none !important; border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
    padding-bottom: var(--safe-b); animation: dzSheetUp .18s ease; }
  .dz-confirm::before {
    content: ""; display: block; width: 36px; height: 4px; margin: 10px auto 2px;
    border-radius: var(--r-pill); background: var(--border-3, var(--border));
  }
  /* De knoppen vullen de breedte: makkelijker raken en duidelijker welke de bevestiging is. */
  .dz-confirm [data-cf] { flex: 1; min-height: 46px; font-size: 15px; }
}

@keyframes dzSheetUp { from { transform: translateY(24px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }


/* =====================================================================================
   Proceskaart (roadmap 2.4): L0-waardeketens + L1-groepen + L2-processen.
   Weergavetoggles werken via data-attributen op de .pk-container; bewerkmodus via
   [data-editing]. Niets wordt ooit afgekapt: chips en namen wrappen, alleen de
   primaire ketenband scrolt horizontaal binnen zijn eigen container. */

.pk .pk-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pk .pk-toolbar-lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.pk .pk-toolbar-spacer { flex: 1; }
.pk .pk-wchip { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-dim); border-radius: var(--r-pill); padding: 4px 12px 4px 8px; font: inherit; font-size: 12.5px; font-weight: 600; }
.pk .pk-wdot { width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid var(--text-faint); display: grid; place-items: center; }
.pk .pk-wdot .ic { width: 9px; height: 9px; stroke: #fff; display: none; }
.pk .pk-wchip[aria-pressed="true"] { background: var(--pri-soft); border-color: transparent; color: var(--pri-text); }
.pk .pk-wchip[aria-pressed="true"] .pk-wdot { background: var(--pri); border-color: var(--pri); }
.pk .pk-wchip[aria-pressed="true"] .pk-wdot .ic { display: block; }
.pk .pk-legend { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-dim); flex-wrap: wrap; }
.pk .pk-legend .lg { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; }
.pk[data-scope="0"] .pk-legend { display: none; }

/* ---- zones ---- */
.pk .pk-zone { margin-bottom: 22px; }
.pk .pk-zone-title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 9px 2px; display: flex; align-items: center; gap: 9px; }
.pk .pk-zone-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.pk .pk-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; align-items: stretch; }

/* ---- blokken (besturend/ondersteunend) en chevrons (primaire keten) ---- */
.pk .pk-wrap { display: flex; min-width: 0; }
.pk .pk-blok, .pk .pk-chev { font: inherit; color: var(--text); text-align: left; cursor: pointer; width: 100%;
  display: flex; flex-direction: column; gap: 7px; min-height: 128px; padding: 12px 14px; }
.pk .pk-blok { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); }
.pk .pk-blok:hover { border-color: var(--pri); }
.pk .pk-band { overflow-x: auto; padding: 4px 0 8px; }
.pk .pk-band-inner { display: flex; align-items: stretch; min-width: 900px; }
.pk .pk-band-inner > .pk-wrap { flex: 1 1 0; min-width: 205px; margin-right: -14px; position: relative; filter: drop-shadow(0 1px 1.5px rgba(16,24,40,.10)); }
.pk .pk-band-inner > .pk-wrap:last-of-type { margin-right: 0; }
.pk .pk-chev { border: 0; background: var(--surface); min-height: 165px; padding: 13px 30px 12px 34px;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%); }
.pk .pk-band-inner > .pk-wrap:first-of-type .pk-chev { clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
  padding-left: 18px; border-radius: 8px 0 0 8px; }
.pk button.pk-chev:hover { background: var(--pri-soft); }

/* naam + standaardtype: altijd gestapeld */
.pk .pk-bloktop { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.pk .pk-bloktop b { font-size: 14px; letter-spacing: -.005em; overflow-wrap: anywhere; }
.pk .pk-naamloos { color: var(--text-faint); font-style: italic; font-weight: 500; }
.pk .pk-stdtype { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--violet-soft); color: var(--violet-text); border-radius: var(--r-pill); padding: 2px 8px; }

/* L1-chips (max 3 + Toon alles) */
.pk .pk-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pk .pk-chip { font-size: 11.5px; color: var(--slate-text); background: var(--slate-soft); border-radius: var(--r-pill); padding: 2px 9px; overflow-wrap: anywhere; }
.pk .pk-chip-stip { background: transparent; border: 1px dashed var(--text-faint); color: var(--text-faint); }
.pk .pk-toonmeer { font-size: 11.5px; font-weight: 600; color: var(--pri-text); cursor: pointer; align-self: flex-start; border-radius: var(--r-sm); }
.pk .pk-toonmeer:hover { text-decoration: underline; }
.pk .pk-toonmeer .ic { width: 12px; height: 12px; }

/* onderkant: scope-mix + voortgang + aantallen vast onderin het blok */
.pk .pk-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; width: 100%; }
.pk .pk-mix { display: flex; height: 5px; border-radius: 3px; overflow: hidden; width: 100%; background: var(--slate-soft); }
.pk .pk-mix i { display: block; height: 100%; }
.pk .pk-mix .g { background: var(--green); } .pk .pk-mix .a { background: var(--amber); }
.pk .pk-mix .s { background: var(--text-faint); opacity: .45; } .pk .pk-mix .o { background: transparent; }
.pk .pk-vg { display: flex; align-items: center; gap: 7px; width: 100%; }
.pk .pk-vg-bar { flex: 1; height: 4px; border-radius: 3px; background: var(--slate-soft); overflow: hidden; }
.pk .pk-vg-bar i { display: block; height: 100%; background: var(--pri); border-radius: 3px; }
.pk .pk-vg-pct { font-size: 11px; font-weight: 600; color: var(--pri-text); font-variant-numeric: tabular-nums; }
.pk .pk-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pk .pk-aantal { font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pk .pk-warn { color: var(--amber-strong); font-weight: 600; }
.pk .pk-vw-chip { border: 1px dashed var(--text-faint); border-radius: var(--r-pill); padding: 1px 8px; color: var(--text-faint); }

/* weergavetoggles */
.pk[data-scope="0"] .pk-mix, .pk[data-scope="0"] .pk-scopepill { display: none; }
.pk[data-vg="0"] .pk-vg { display: none; }
.pk[data-wit="0"] .pk-wit { display: none !important; }
.pk[data-num="0"] .pk-aantal { display: none; }

/* ---- bewerkmodus ---- */
.pk .pk-editrow { display: flex; align-items: center; gap: 6px; width: 100%; }
.pk .pk-grip { color: var(--text-faint); cursor: grab; flex: 0 0 auto; }
.pk .pk-naam-in { font-weight: 600; flex: 1; min-width: 0; }
.pk .pk-std-in { font-size: 12px; width: 100%; }
.pk .pk-openbtn { align-self: flex-start; }
.pk .pk-bloktop-edit { gap: 6px; width: 100%; }
.pk .pk-dragging { opacity: .45; }
.pk .pk-addtile { border: 1.5px dashed var(--border); background: transparent; border-radius: var(--r-lg);
  color: var(--text-faint); font: inherit; font-size: 22px; min-height: 128px; min-width: 120px; cursor: pointer;
  display: grid; place-items: center; opacity: .55; transition: opacity .15s ease, border-color .15s ease; }
.pk .pk-row:hover .pk-addtile, .pk .pk-addtile:hover, .pk .pk-addtile:focus-visible { opacity: 1; }
.pk .pk-addtile:hover { border-color: var(--pri); color: var(--pri-text); }
.pk .pk-gap { flex: 0 0 26px; margin: 0 -13px; z-index: 6; display: flex; align-items: center; justify-content: center; position: relative; }
.pk .pk-plus { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--pri); color: #fff;
  padding: 0; cursor: pointer; display: grid; place-items: center; opacity: 0; transform: scale(.75);
  transition: opacity .12s ease, transform .12s ease; box-shadow: 0 1px 5px rgba(16,24,40,.30); }
.pk .pk-plus .ic { width: 14px; height: 14px; stroke: #fff; }
.pk .pk-gap:hover .pk-plus, .pk .pk-plus:focus-visible { opacity: 1; transform: scale(1); }
.pk .pk-plus:hover { background: var(--pri-hover); }
@media (prefers-reduced-motion: reduce) { .pk .pk-plus, .pk .pk-addtile { transition: none; } }

/* ---- nog in te delen (L0) ---- */
.pk .pk-los { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--r-lg); padding: 12px 14px; }
.pk .pk-los-kop { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.pk .pk-los-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.pk .pk-los-hint { font-size: 12.5px; }

/* ---- L1-weergave (een keten) ---- */
.pk .pk-l1kop { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.pk .pk-l1titel { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pk .pk-l1titel h2 { margin: 0; font-size: 19px; letter-spacing: -.01em; line-height: 1.2; }
.pk .pk-groepen { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; align-items: start; }
.pk .pk-groep { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pk .pk-groepkop { filter: drop-shadow(0 1px 1.5px rgba(16,40,40,.10)); }
.pk .pk-groepkop-in { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  background: var(--pri-soft); color: var(--pri-text); padding: 9px 26px 9px 13px; display: flex; flex-direction: column; gap: 5px; }
.pk .pk-groepkop-in .pk-bloktop b { font-size: 13.5px; }
.pk .pk-groepkop-in .pk-vg-bar { background: rgba(127,127,127,.22); }
.pk .pk-groepkop-in .pk-aantal { color: inherit; opacity: .8; }
.pk .pk-groepkop-los { background: var(--slate-soft); color: var(--slate-text); }
.pk .pk-groep-los .pk-groep-body { background: var(--sunken); border-radius: var(--r); padding: 8px; }
.pk .pk-groep-body { display: flex; flex-direction: column; gap: 8px; min-height: 40px; border-radius: var(--r); }
.pk .pk-groep-leeg { border: 1px dashed var(--text-faint); border-radius: var(--r); color: var(--text-faint);
  font-size: 12.5px; font-style: italic; padding: 10px 12px; text-align: center; }
.pk .pk-drophint { outline: 2px dashed var(--pri); outline-offset: 3px; border-radius: var(--r); }

/* L2-kaartjes */
.pk .pk-l2 { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border);
  border-radius: var(--r); box-shadow: var(--sh); padding: 9px 12px; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px; }
.pk .pk-l2:hover { border-color: var(--pri); }
.pk[data-scope="1"] .pk-l2-in { border-left-color: var(--green); }
.pk[data-scope="1"] .pk-l2-deels { border-left-color: var(--amber); }
.pk[data-scope="1"] .pk-l2-buiten { border-left-color: var(--text-faint); opacity: .78; }
.pk .pk-l2-naam { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; overflow-wrap: anywhere; }
.pk .pk-scopepill { font-size: 10.5px; font-weight: 700; border-radius: var(--r-pill); padding: 1px 8px; }
.pk .pk-sp-in { background: var(--green-soft); color: var(--green-strong); }
.pk .pk-sp-deels { background: var(--amber-soft); color: var(--amber-strong); }
.pk .pk-sp-buiten, .pk .pk-sp-onbepaald { background: var(--slate-soft); color: var(--slate-text); }
.pk .pk-l2-wit { border-style: dashed; border-left-width: 1px; border-color: var(--text-faint); background: transparent; box-shadow: none; color: var(--text-dim); cursor: default; }
.pk .pk-vw-naam { font-weight: 500; font-style: italic; }
.pk .pk-vw-tag { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: var(--text-faint); }
.pk .pk-vw-acties { display: flex; align-items: center; gap: 6px; }
.pk .pk-vw-add { display: flex; align-items: center; gap: 6px; }
.pk .pk-vw-add .inline { flex: 1; min-width: 0; font-size: 12.5px; }
.pk .pk-addtile-groep { min-height: 90px; }

/* =====================================================================================
   Weergavemodus-schakelaar + de twee extra zichten van de proceskaart.
   .pk-modes  = segmented control (Kaart / Keten / Boom)
   .pk-6b     = chevronketen met niveauzoom (L0/L1/L2)
   .pk-6c     = inspringende boomtabel op .dz-table
   ===================================================================================== */
.pk .pk-modes { display: inline-flex; border: 1px solid var(--border-2); border-radius: var(--r); overflow: hidden; background: var(--surface); margin: 0 0 16px; }
.pk .pk-mode-b { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 0; border-right: 1px solid var(--border); background: none; color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .12s ease, color .12s ease; }
.pk .pk-mode-b:last-child { border-right: 0; }
.pk .pk-mode-b:hover { background: var(--surface-2); }
.pk .pk-mode-b.is-on { background: var(--pri-soft); color: var(--pri-text); font-weight: 600; }
.pk .pk-mode-b .ic { font-size: 15px; }

/* ---- 6b: keten-zoom ---- */
.pk .pk-6b { display: flex; flex-direction: column; gap: 14px; }
.pk .pk-chev-z { min-height: 150px; }
.pk .pk-band-sm .pk-band-inner { min-width: 0; flex-wrap: wrap; }
.pk .pk-band-sm > .pk-band-inner > .pk-wrap { min-width: 190px; }
.pk .pk-chev-g { min-height: 84px; padding: 10px 26px 10px 30px; }
.pk .pk6b-sub { font-size: 11px; color: var(--text-3); }
.pk .pk-chev.is-sel { background: var(--pri); }
.pk .pk-chev.is-sel b, .pk .pk-chev.is-sel .pk6b-sub, .pk .pk-chev.is-sel .pk-vg-pct, .pk .pk-chev.is-sel .pk-stdtype { color: #fff; }
.pk .pk-chev.is-sel .pk-vg-bar { background: rgba(255,255,255,.30); }
.pk .pk-chev.is-sel .pk-vg-bar i { background: #fff; }
.pk .pk-chev.is-sel:hover { background: var(--pri); filter: brightness(1.05); }
.pk .pk-tier .panel-head { padding: 10px 14px; }
.pk .pk-tier-hint { font-size: 11.5px; color: var(--text-3); }
.pk .pk-tier-body { padding: 12px 14px 14px; }
.pk .pk-l2grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 10px; }

/* ---- 6c: boomtabel ---- */
.pk .pk-6c { display: flex; flex-direction: column; gap: 14px; }
.pk .pk-tree-tools { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pk .pk-tree-tools .pk-toolbar-spacer { flex: 1; }
.pk .pk-tree th { white-space: nowrap; }
.pk .pk-tree td { padding: 7px 14px; }
.pk .pk-tree tr.pk-tr-l0 td { background: var(--surface-2); border-top: 1px solid var(--border-2); }
.pk .pk-tree tr.pk-tr-click { cursor: pointer; }
.pk .pk-tree tr.pk-tr-click:hover td { background: var(--pri-soft); }
.pk .pk-tree-name { min-width: 0; }
.pk .pk-tn { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.pk .pk-tn-lbl { color: var(--text); overflow-wrap: anywhere; }
.pk .pk-tw { font-size: 15px; color: var(--text-3); flex: 0 0 auto; width: 15px; }
.pk .pk-tw-none { visibility: hidden; }
.pk .pk-niv { font-size: 10px; font-weight: 700; letter-spacing: .03em; border-radius: var(--r-sm); padding: 2px 6px; }
.pk .pk-td-std { color: var(--text-3); font-size: 12.5px; }
.pk .pk-td-num { color: var(--text-2); font-variant-numeric: tabular-nums; }
.pk .pk-dash { color: var(--text-faint); }
.pk .pk-vg-cell { min-width: 104px; }
.pk .pk-td-open { font-variant-numeric: tabular-nums; }
.pk .pk-open-warn { color: var(--amber-strong); font-weight: 600; }
.pk .pk-open-none { color: var(--text-faint); }
.pk .pk-tree-foot { padding: 9px 16px; border-top: 1px solid var(--sunken); font-size: 11.5px; color: var(--text-3); }

/* leeg-toestand */
.pk .pk-empty { max-width: 520px; margin: 40px auto; }

/* ---- mobiel: alles wrapt of scrolt in de eigen container, nooit afkappen ---- */
@media (max-width: 640px) {
  .pk .pk-row { grid-template-columns: 1fr; }
  .pk .pk-groepen { grid-template-columns: 1fr; }
  .pk .pk-band-inner { min-width: 720px; }
  .pk .pk-legend { display: none; }
  .pk .pk-l1kop { gap: 10px; }
  /* Nieuwe zichten: schakelaar mag wrappen, L2-kaarten één kolom, de boomtabel scrolt in .tbl-wrap. */
  .pk .pk-modes { display: flex; width: 100%; }
  .pk .pk-mode-b { flex: 1; justify-content: center; }
  .pk .pk-l2grid { grid-template-columns: 1fr; }
  .pk .pk-band-sm .pk-band-inner { min-width: 0; }
}

/* =====================================================================================
   Applicatielandschap (.ls-*) — src/views/landschap.js
   Banen (koppelkaart, absolute layout in .ls-canvas), Matrix (dz-table) en Register.
   ===================================================================================== */
.ls .ls-toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; }
.ls .ls-toolbar-sp { flex: 1; }
.ls .ls-legend { font-size: 11.5px; color: var(--text-3); }
.ls .ls-hint { font-size: 11.5px; color: var(--text-3); }
.ls .ls-foot { font-size: 11.5px; margin-top: 8px; }
.ls .ls-dash { color: var(--text-faint); }
.ls .ls-num { font-variant-numeric: tabular-nums; color: var(--text-2); }

/* ---- banenkaart ---- */
.ls .ls-wrap { overflow: auto; padding: 0; }
.ls .ls-canvas { position: relative; background-image: radial-gradient(circle, #DADCE2 1px, transparent 1px); background-size: 18px 18px; }
.ls .ls-lane { position: absolute; left: 0; background: rgba(250, 250, 252, .72); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ls .ls-lane-rest { background: rgba(250, 246, 235, .6); }
.ls .ls-lane-lbl { position: absolute; left: 12px; top: 10px; width: 122px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); line-height: 1.35; }
.ls .ls-lane-lbl i { display: block; font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.ls .ls-lane.ls-drophint { background: var(--pri-soft); border-color: var(--pri); }
.ls .ls-card { position: absolute; width: 188px; height: 62px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border-2); border-left: 4px solid var(--text-faint); border-radius: var(--r); box-shadow: var(--sh); padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.ls .ls-card b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.ls .ls-card span { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls .ls-card:hover { border-color: var(--pri); }
.ls .ls-card[draggable="true"] { cursor: grab; }
.ls .ls-card.ls-dragging { opacity: .45; }
.ls .ls-dropbar { position: absolute; width: 4px; border-radius: 3px; background: var(--pri); box-shadow: 0 0 0 3px var(--ring); pointer-events: none; z-index: 3; }
.ls .ls-card-open { font-size: 10px; font-weight: 700; background: var(--amber-soft); color: var(--amber-strong); border-radius: var(--r-pill); padding: 1px 6px; flex: 0 0 auto; }
.ls .ls-svg { position: absolute; inset: 0; pointer-events: none; }
.ls .ls-svg g[data-act] { pointer-events: auto; cursor: pointer; }
.ls .ls-svg path { stroke-width: 1.5; }
.ls .ls-svg g[data-act]:hover path { stroke-width: 2.5; }
.ls .ls-kv-label { font-size: 10px; fill: var(--text-3); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.ls .ls-kvform .ls-kvform-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px 12px; }
.ls .ls-kvform { margin-bottom: 12px; }

/* ---- matrix ---- */
.ls .ls-th-keten { text-align: center; }
.ls .ls-td-keten { text-align: center; }
.ls .ls-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; background: var(--pri); cursor: pointer; }
.ls .ls-dot:hover { box-shadow: 0 0 0 3px var(--ring); }
.ls .ls-dot-leeg { background: var(--sunken); border: 1px solid var(--border); box-sizing: border-box; cursor: default; }
.ls .ls-cell-app { display: inline-flex; align-items: center; gap: 8px; }
.ls .ls-cell-app b { cursor: pointer; }
.ls .ls-cell-app b:hover { color: var(--pri-text); }
.ls .ls-appdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.ls .ls-chip { cursor: pointer; }
.ls .ls-open { font-weight: 700; color: var(--amber-strong); cursor: pointer; }
.ls .ls-open:hover { text-decoration: underline; }
.ls .ls-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 14px; align-items: start; }
.ls .ls-panelbody { padding: 6px 14px 12px; }
.ls .ls-listrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--sunken); }
.ls .ls-listrow:last-child { border-bottom: none; }
.ls .ls-listrow[data-act] { cursor: pointer; }
.ls .ls-listrow[data-act]:hover .ls-listmain b { color: var(--pri-text); }
.ls .ls-listmain { flex: 1; min-width: 0; }
.ls .ls-listmain b { display: block; font-size: 13px; font-weight: 600; }
.ls .ls-listmain span { display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 1px; }
.ls .ls-dublijst { font-size: 11.5px; color: var(--text-2); text-align: right; }
.ls .ls-bar-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; }
.ls .ls-bar-lbl { flex: 0 0 150px; font-size: 12.5px; overflow-wrap: anywhere; }
.ls .ls-bar { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--sunken); overflow: hidden; }
.ls .ls-bar i { display: block; height: 100%; border-radius: var(--r-pill); }
.ls .ls-bar-meta { flex: 0 0 auto; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ---- register ---- */
.ls .ls-naam-in { min-width: 170px; }
.ls .ls-volg-in { width: 64px; text-align: right; }
.ls .ls-kleurcel { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ls .ls-kleurcel input[type="color"] { width: 30px; height: 24px; border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 1px; background: var(--surface); cursor: pointer; }
.ls .ls-swatch { width: 15px; height: 15px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .12); cursor: pointer; padding: 0; }
.ls .ls-swatch:hover { transform: scale(1.15); }
.ls .ls-gebruik { cursor: pointer; color: var(--text-2); font-size: 12.5px; }
.ls .ls-gebruik:hover { color: var(--pri-text); }
.ls .ls-duppanel { margin-bottom: 12px; border-color: var(--amber); }

@media (max-width: 640px) {
  .ls .ls-toolbar { gap: 6px; }
  .ls .ls-bar-lbl { flex-basis: 110px; }
  .ls .ls-panels { grid-template-columns: 1fr; }
}

/* =====================================================================================
   Procesdetail op mobiel (.pm-*)
   Hoort bij src/views/procesmobiel.js. Alles staat bewust in EEN <=640-blok: die view
   rendert alleen op een telefoon, dus deze regels kunnen desktop per definitie niet raken.
   ===================================================================================== */
@media (max-width: 640px) {
  /* De pagina vult het scherm onder de topbalk; de actiebalk staat vast boven de app-onderbalk. */
  .pm-page { padding: 0; display: flex; flex-direction: column; gap: 0; }
  .pm-body { padding: 14px 14px calc(var(--bottomnav-h) + 74px + var(--safe-b));
    display: flex; flex-direction: column; gap: 12px; }

  /* ---- kop en subbalk ---- */
  .pm-kop { position: sticky; top: calc(var(--topbar-h) - 1px); z-index: 14;
    display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 6px;
    background: var(--surface); border-bottom: 1px solid var(--border); }
  .pm-kop-ic { width: 44px; height: 44px; flex: none; border: none; background: transparent;
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    color: var(--text-2); cursor: pointer; }
  .pm-kop-ic:hover { background: var(--sunken); }
  .pm-kop-ic .ic { font-size: 21px; }
  .pm-kop-txt { flex: 1; min-width: 0; }
  .pm-kop-t { font-size: 16px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pm-kop-s { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pm-kop-vera { height: 38px; padding: 0 11px; font-size: 12.5px; flex: none; margin-right: 6px; }

  .pm-sub { position: sticky; top: calc(var(--topbar-h) + 53px); z-index: 13;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 9px 12px; display: flex; align-items: center; gap: 9px; }
  .pm-segwrap { flex: 1; display: flex; gap: 2px; background: var(--sunken); border-radius: var(--r-pill); padding: 3px; }
  .pm-seg { flex: 1; height: 34px; border: none; border-radius: var(--r-pill); background: transparent;
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-3); cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px; }
  .pm-seg.is-on { background: var(--surface); color: var(--text); }
  .pm-rail { gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .pm-rail::-webkit-scrollbar { display: none; }
  .pm-railnr { flex: none; width: 34px; height: 34px; border-radius: var(--r); font: inherit; font-size: 12.5px;
    font-weight: 600; cursor: pointer; border: 1px solid var(--border-2); background: var(--surface); color: var(--text-2); }
  .pm-railnr.is-on { background: var(--pri-soft); color: var(--pri-text); border-color: var(--pri); }

  /* ---- akkoordrij: uitklapbaar met wie, wanneer en welke opmerking ---- */
  .pm-akkrij { border-bottom: 1px solid var(--border); }
  .pm-akkrij:last-of-type { border-bottom: none; }
  .pm-akkrij .pm-akk { border-bottom: none; }
  .pm-akkrij.is-open { background: var(--surface-2); }
  .pm-akk-body { padding: 0 13px 13px; display: flex; flex-direction: column; gap: 9px; }
  .pm-akk-log { display: flex; flex-direction: column; gap: 3px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r); padding: 10px 11px; }
  .pm-akk-log-w { font-size: 12.5px; font-weight: 600; }
  .pm-akk-log-b { font-size: 11.5px; color: var(--text-3); }
  .pm-akk-log-o { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin-top: 3px; }
  .pm-akk-keuze { display: flex; gap: 6px; }
  .pm-akk-lock { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); }

  /* ---- schakelrij (in MVP, als AI-feature) ---- */
  .pm-schakel { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 44px; padding: 0 11px; background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--r); }
  .pm-schakel-l { font-size: 13px; color: var(--text-2); }

  /* ---- verbetering: kop tikbaar, body uitgeklapt ---- */
  .pm-verb-kop { width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 0;
    background: transparent; border: none; text-align: left; cursor: pointer; font: inherit; }
  .pm-verb-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .pm-verb-onder { font-size: 12px; color: var(--text-3); font-style: italic; line-height: 1.5; }
  .pm-verb.is-open { border-color: var(--pri); }

  /* ---- koppeling/document: naam en type direct bewerkbaar ---- */
  .pm-koppel-in { flex: 1; min-width: 0; font-family: inherit; font-size: 16px; font-weight: 600;
    border: none; background: transparent; color: var(--text); outline: none; padding: 4px 0; }
  .pm-koppel-in:focus { border-bottom: 1px solid var(--pri); }
  .pm-koppel-f { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
  .pm-koppel-lbl { font-size: 11.5px; color: var(--text-3); flex: none; }
  .pm-koppel-del { margin-left: auto; }

  /* ---- onderpanelen (procesdetails, beoordelen) ---- */
  .pm-detail-body { display: flex; flex-direction: column; gap: 11px; max-height: 56dvh; overflow-y: auto; }
  .pm-detail, .pm-beoordeel { max-height: 82dvh; overflow-y: auto; }

  /* ---- gedeelde kaart ---- */
  .pm-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--sh); padding: 13px; display: flex; flex-direction: column; gap: 11px; }
  .pm-card-l { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
  .pm-leeg { padding: 26px 14px; text-align: center; font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
  .pm-tagrij { display: flex; gap: 6px; flex-wrap: wrap; }
  .pm-hint { font-size: 11.5px; color: var(--text-3); }

  /* ---- hub ---- */
  .pm-oms { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
  .pm-metagrid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .pm-meta-cel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .pm-meta-l { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
  .pm-meta-v { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pm-scope { display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--border); padding-top: 11px; }
  .pm-scope-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .pm-scope-t { font-size: 13px; font-weight: 600; }
  .pm-scope-s { font-size: 11.5px; color: var(--text-3); }

  .pm-akkoorden { padding: 0; gap: 0; overflow: hidden; }
  .pm-akk { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 13px;
    border: none; border-bottom: 1px solid var(--border); background: transparent; text-align: left; cursor: pointer; font: inherit; }
  .pm-akk:hover { background: var(--surface-2); }
  .pm-akk-ic { display: flex; }
  .pm-akk-ic .ic { font-size: 17px; }
  .pm-akk-ic.is-amber { color: var(--amber-strong); }
  .pm-akk-ic.is-green { color: var(--green-strong); }
  .pm-akk-ic.is-slate { color: var(--text-3); }
  .pm-akk-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .pm-akk-l { font-size: 13.5px; font-weight: 600; }
  .pm-akk-s { font-size: 11.5px; color: var(--text-3); }
  .pm-akk-chev { color: var(--text-faint); font-size: 16px; }
  .pm-vera { width: 100%; height: 48px; justify-content: center; border-radius: 0; font-size: 13.5px; }

  .pm-tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .pm-tegel { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 12px; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; gap: 9px;
    cursor: pointer; box-shadow: var(--sh); font: inherit; }
  .pm-tegel:hover { background: var(--surface-2); }
  .pm-tegel.is-pri { border-color: var(--pri); }
  .pm-tegel-top { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; gap: 8px; }
  .pm-tegel-ic { width: 32px; height: 32px; flex: none; border-radius: var(--r); display: flex; align-items: center; justify-content: center; }
  .pm-tegel-ic .ic { font-size: 18px; }
  .pm-tegel-ic.is-pri { background: var(--pri-soft); color: var(--pri-text); }
  .pm-tegel-ic.is-violet { background: var(--violet-soft); color: var(--violet-text); }
  .pm-tegel-ic.is-blue { background: var(--blue-soft); color: var(--blue-text); }
  .pm-tegel-ic.is-amber { background: var(--amber-soft); color: var(--amber-strong); }
  .pm-tegel-ic.is-green { background: var(--green-soft); color: var(--green-strong); }
  .pm-tegel-ic.is-slate { background: var(--sunken); color: var(--text-2); }
  .pm-tegel-txt { display: flex; flex-direction: column; gap: 2px; }
  .pm-tegel-l { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
  .pm-tegel-s { font-size: 11.5px; color: var(--text-3); }

  /* ---- stappen: kaartweergave op een puntenraster ---- */
  .pm-kaart { align-items: center;
    background-image: radial-gradient(var(--border-2) 1px, transparent 1px); background-size: 16px 16px; gap: 0; }
  .pm-term { padding: 8px 20px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; }
  .pm-term.is-start { background: var(--pri-soft); border: 1px solid var(--pri); color: var(--pri-text); }
  .pm-term.is-eind { background: var(--green-soft); border: 1px solid var(--green); color: var(--green-strong); }
  .pm-lijn { width: 1px; height: 18px; background: var(--border-3); }
  .pm-pijl { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 6px solid var(--border-3); margin-bottom: 2px; }
  .pm-node { width: 100%; max-width: 300px; text-align: left; background: var(--green-soft);
    border: 1.5px solid var(--green); border-radius: 10px; padding: 11px 12px; cursor: pointer;
    display: flex; align-items: center; gap: 9px; font: inherit; }
  .pm-node.is-buiten { background: var(--surface-2); border-color: var(--border-3); color: var(--text-3); }
  .pm-node.is-beslissing { background: var(--amber-soft); border-color: var(--amber);
    flex-direction: column; align-items: stretch; gap: 8px; }
  .pm-node.is-sel { background: var(--pri-soft); border-color: var(--pri); box-shadow: 0 4px 16px rgba(16, 24, 40, .10); }
  .pm-node-nr { width: 22px; height: 22px; flex: none; border-radius: var(--r-pill); background: var(--surface);
    color: var(--text-2); font-size: 11.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
  .pm-node.is-sel .pm-node-nr { background: var(--pri); color: #fff; }
  .pm-node-t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; line-height: 1.4; }
  .pm-node-x { color: var(--text-faint); font-size: 15px; }
  .pm-node-kop { display: flex; align-items: center; gap: 8px; width: 100%; color: var(--amber-strong); }
  .pm-node-kop .pm-node-t { font-weight: 600; }
  .pm-takken { display: flex; gap: 6px; width: 100%; }
  .pm-tak { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--amber); border-radius: 7px;
    padding: 6px 8px; font-size: 11.5px; color: var(--text-2); display: flex; flex-direction: column; gap: 1px; }
  .pm-tak-l { font-weight: 600; color: var(--amber-strong); }

  /* ---- stappen: lijstweergave ---- */
  .pm-lijst { gap: 7px; }
  .pm-lijst-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 0 2px 2px; font-size: 12.5px; color: var(--text-2); }
  .pm-link { background: transparent; border: none; font: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--pri-text); cursor: pointer; padding: 0; }
  .pm-stap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--sh); overflow: hidden; }
  .pm-stap.is-open { border-color: var(--pri); }
  .pm-stap-kop { width: 100%; text-align: left; display: flex; align-items: flex-start; gap: 10px;
    padding: 12px; background: transparent; border: none; cursor: pointer; font: inherit; }
  .pm-stap-nr { width: 24px; height: 24px; flex: none; border-radius: var(--r-pill); background: var(--sunken);
    color: var(--text-2); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
  .pm-stap.is-open .pm-stap-nr { background: var(--pri); color: #fff; }
  .pm-stap-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
  .pm-stap-t { font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; }
  .pm-stap-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  .pm-stap-chev { color: var(--text-faint); font-size: 18px; padding-top: 3px; }
  .pm-stap-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 11px; border-top: 1px solid var(--border); }
  .pm-vol { height: 44px; justify-content: center; font-size: 13px; }
  .pm-dashed { height: 46px; border: 1px dashed var(--border-3); background: transparent; border-radius: var(--r-lg);
    color: var(--text-2); font: inherit; font-size: 13.5px; font-weight: 600; display: flex; align-items: center;
    justify-content: center; gap: 7px; cursor: pointer; margin-top: 3px; }
  .pm-dashed:hover { background: var(--sunken); }

  /* ---- velden (lijst + editor) ---- */
  .pm-veld { display: flex; flex-direction: column; gap: 5px; }
  /* font: inherit is nodig: een kale textarea valt anders terug op monospace. */
  .pm-ta, .pm-input, .pm-select { font-family: inherit; font-size: 16px; border: 1px solid var(--border-2); border-radius: var(--r);
    background: var(--surface); color: var(--text); outline: none; width: 100%; }
  .pm-ta { padding: 10px; resize: none; line-height: 1.5; }
  .pm-input { height: 48px; padding: 0 12px; }
  .pm-select { height: 46px; }
  .pm-ta:focus, .pm-input:focus, .pm-select:focus { border-color: var(--pri); box-shadow: 0 0 0 3px var(--ring); }
  .pm-ed-titel { height: 50px; font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
  .pm-keuzerij { display: flex; gap: 6px; }
  .pm-keuzegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .pm-choice { flex: 1; min-height: 44px; border-radius: var(--r); font: inherit; font-size: 12.5px; font-weight: 600;
    cursor: pointer; border: 1px solid var(--border-2); background: var(--surface); color: var(--text-2);
    display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; }
  .pm-choice:hover { background: var(--sunken); }
  .pm-choice.is-on { border-color: var(--pri); background: var(--pri-soft); color: var(--pri-text); }
  .pm-choice.is-on.is-green { border-color: var(--green); background: var(--green-soft); color: var(--green-strong); }
  .pm-choice.is-on.is-amber { border-color: var(--amber); background: var(--amber-soft); color: var(--amber-strong); }
  .pm-choice.is-on.is-red { border-color: var(--red); background: var(--red-soft); color: var(--red-strong); }
  .pm-choice.is-on.is-slate { border-color: var(--border-3); background: var(--sunken); color: var(--text-2); }
  .pm-takrij { display: flex; align-items: center; gap: 8px; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: var(--r); padding: 9px 11px; }
  .pm-takrij-l { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; }
  .pm-takrij-n { font-size: 11.5px; color: var(--text-3); }
  .pm-rel { width: 100%; display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 11px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); cursor: pointer;
    text-align: left; font: inherit; color: var(--text-2); }
  .pm-rel:hover { background: var(--sunken); }
  .pm-rel-l { flex: 1; font-size: 13px; }
  .pm-rel-n { font-size: 12px; font-weight: 600; color: var(--text); }
  .pm-ed-kop { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
  .pm-ed-wie { margin-left: auto; font-size: 11.5px; color: var(--text-faint); }

  /* ---- bottomsheet ---- */
  .pm-sheet { position: fixed; left: 0; right: 0; bottom: calc(var(--bottomnav-h) + var(--safe-b)); z-index: 45;
    background: var(--surface); border-top: 1px solid var(--border); border-radius: 14px 14px 0 0;
    box-shadow: 0 4px 16px rgba(16, 24, 40, .10); padding: 10px 14px 12px;
    display: flex; flex-direction: column; gap: 10px; animation: pmSheet .18s ease; }
  .pm-greep { align-self: center; width: 60px; height: 22px; border: none; background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center; }
  .pm-greep span { width: 36px; height: 4px; border-radius: var(--r-pill); background: var(--border-3); }
  .pm-sheet-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .pm-sheet-teller { font-size: 11.5px; color: var(--text-3); }
  .pm-sheet-t { font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; }
  .pm-sheet-o { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
  .pm-sheet-acties { display: flex; gap: 8px; }

  /* ---- actiebalk boven de app-onderbalk ---- */
  .pm-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--bottomnav-h) + var(--safe-b)); z-index: 44;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 9px 12px; display: flex; gap: 8px; align-items: center; }
  .pm-bar-main { flex: 1; height: 46px; justify-content: center; font-size: 14px; font-weight: 600; }
  .pm-bar-tweede { height: 46px; padding: 0 14px; justify-content: center; font-size: 13.5px; flex: none; }
  .pm-btn { flex: 1; height: 44px; justify-content: center; font-size: 13px; }
  .pm-btn-auto { flex: none; padding: 0 12px; height: 44px; }
  .pm-btn-sm { height: 36px; padding: 0 11px; font-size: 12px; }
  .pm-icobtn { width: 46px; height: 46px; flex: none; justify-content: center; padding: 0; }

  /* ---- verbeteringen ---- */
  /* Kop boven, uitgeklapte body eronder: sinds het vinkje weg is, is dit geen rij meer. */
  .pm-verb { flex-direction: column; gap: 11px; padding: 12px; }
  .pm-verb.is-on { border-color: var(--pri); }
  .pm-verb-body { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 9px;
    border-top: 1px solid var(--border); padding-top: 11px; }
  .pm-verb-t { font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; }
  .pm-dashedkaart { background: var(--surface-2); border: 1px dashed var(--border-3); border-radius: var(--r-lg);
    padding: 13px; display: flex; flex-direction: column; gap: 5px; text-align: left; cursor: pointer; font: inherit; }
  .pm-dashedkaart:hover { background: var(--sunken); }
  .pm-dk-t { font-size: 13px; font-weight: 600; }
  .pm-dk-s { font-size: 12px; color: var(--text-3); line-height: 1.5; }

  /* ---- sticky filterbalken ---- */
  .pm-sticky { position: sticky; top: calc(var(--topbar-h) + 53px); z-index: 12;
    background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 12px;
    display: flex; flex-direction: column; gap: 9px; }
  .pm-voortgang { height: 6px; border-radius: var(--r-pill); background: var(--sunken); overflow: hidden; }
  .pm-voortgang span { display: block; height: 100%; background: var(--green); }
  .pm-pills { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
  .pm-pills::-webkit-scrollbar { display: none; }
  .pm-pill { flex: none; height: 34px; padding: 0 13px; border-radius: var(--r-pill); font: inherit; font-size: 12.5px;
    font-weight: 500; cursor: pointer; border: 1px solid var(--border-2); background: var(--surface); color: var(--text-2); }
  .pm-pill.is-on { border-color: var(--pri); background: var(--pri-soft); color: var(--pri-text); }

  /* ---- requirements ---- */
  .pm-groep { display: flex; flex-direction: column; gap: 7px; }
  .pm-groep-kop { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
  .pm-groep-kop2 { display: flex; align-items: baseline; gap: 8px; padding: 0 2px; }
  .pm-groep-nr { width: 22px; height: 22px; flex: none; border-radius: var(--r-pill); background: var(--sunken);
    color: var(--text-2); font-size: 11.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
  .pm-groep-t { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text-2); line-height: 1.4; }
  .pm-groep-n { font-size: 11.5px; color: var(--text-3); }
  .pm-reqs { gap: 14px; }
  .pm-req { gap: 9px; padding: 12px; }
  .pm-req-kop { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
  .pm-mos { width: 26px; height: 26px; flex: none; border-radius: 7px; font-size: 11px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; }
  .pm-mos.is-red { background: var(--red-soft); color: var(--red-strong); }
  .pm-mos.is-amber { background: var(--amber-soft); color: var(--amber-strong); }
  .pm-mos.is-slate { background: var(--sunken); color: var(--text-2); }
  .pm-req-code { margin-left: auto; font-size: 11px; color: var(--text-faint); }
  .pm-req-t { font-size: 13.5px; line-height: 1.5; }
  .pm-req-o { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
  .pm-req-acties { display: flex; gap: 7px; }

  /* ---- user stories ---- */
  .pm-kolommen { flex-direction: row; gap: 2px; padding: 0 8px; }
  .pm-kol { flex: 1; height: 44px; border: none; background: transparent; font: inherit; font-size: 12.5px;
    font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; color: var(--text-3);
    display: flex; align-items: center; justify-content: center; gap: 6px; }
  .pm-kol.is-on { border-bottom-color: var(--pri); color: var(--pri-text); }
  .pm-kol-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--sunken);
    color: var(--text-2); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
  .pm-kol.is-on .pm-kol-n { background: var(--pri-soft); color: var(--pri-text); }
  .pm-board { background: var(--surface-2); gap: 8px; }
  .pm-story { gap: 8px; padding: 11px 12px; border-radius: 10px; }
  .pm-story-kop { display: flex; align-items: center; gap: 7px; }
  .pm-story-p { margin-left: auto; font-size: 11.5px; color: var(--text-faint); }
  .pm-story-t { font-size: 13.5px; font-weight: 500; line-height: 1.45; }
  .pm-story-foot { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
  .pm-story-m { flex: 1; min-width: 0; font-size: 11.5px; color: var(--text-3); }
  .pm-dashedleeg { background: var(--surface); border: 1px dashed var(--border-3); border-radius: var(--r-lg);
    padding: 22px 14px; text-align: center; font-size: 12.5px; color: var(--text-2); line-height: 1.55; }

  /* ---- datamodel ---- */
  .pm-tabel { padding: 0; gap: 0; overflow: hidden; }
  .pm-tabel.is-open { border-color: var(--pri); }
  .pm-tabel-kop { width: 100%; text-align: left; display: flex; align-items: center; gap: 10px; padding: 12px;
    background: transparent; border: none; cursor: pointer; font: inherit; }
  .pm-tabel-kop:hover { background: var(--surface-2); }
  .pm-tabel-ic { width: 30px; height: 30px; flex: none; border-radius: var(--r); background: var(--sunken);
    color: var(--text-2); display: flex; align-items: center; justify-content: center; }
  .pm-tabel-ic.is-violet { background: var(--violet-soft); color: var(--violet-text); }
  .pm-tabel-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .pm-tabel-n { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
  .pm-tabel-m { font-size: 11.5px; color: var(--text-3); }
  .pm-tabel-chev { color: var(--text-faint); font-size: 17px; }
  .pm-tabel-body { border-top: 1px solid var(--border); display: flex; flex-direction: column; }
  .pm-veldrij { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .pm-veldrij-n { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pm-veldrij-t { font-size: 11.5px; color: var(--text-3); }
  .pm-tabel-acties { display: flex; gap: 8px; padding: 11px 12px; }

  /* ---- integraties ---- */
  .pm-integr { gap: 14px; }
  .pm-koppel { gap: 8px; padding: 12px; border-radius: 11px; }
  .pm-koppel-kop { display: flex; align-items: center; gap: 8px; }
  .pm-koppel-ic { width: 28px; height: 28px; flex: none; border-radius: 7px; background: var(--pri-soft);
    color: var(--pri-text); display: flex; align-items: center; justify-content: center; }
  .pm-koppel-ic.is-slate { background: var(--sunken); color: var(--text-2); }

  /* ---- best practices ---- */
  .pm-bp { gap: 9px; }
  .pm-bp-kop { display: flex; align-items: flex-start; gap: 10px; }
  .pm-bp-ic { width: 32px; height: 32px; flex: none; border-radius: var(--r); background: var(--blue-soft);
    color: var(--blue-text); display: flex; align-items: center; justify-content: center; }
  .pm-bp-ic.is-violet { background: var(--violet-soft); color: var(--violet-text); }
  .pm-bp-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .pm-bp-t { font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; }
  .pm-bp-h { font-size: 11.5px; color: var(--text-3); }
  .pm-bp-o { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
  .pm-bp-let { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: var(--amber-strong);
    background: var(--amber-soft); border-radius: var(--r-sm); padding: 8px 10px; }
  .pm-bp-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .pm-bp-btn { margin-left: auto; }
  .pm-bp-al { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12.5px;
    font-weight: 600; color: var(--green-strong); }

  /* ---- bijlagen ---- */
  .pm-galerij { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
  .pm-bijl { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; overflow: hidden;
    display: flex; flex-direction: column; box-shadow: var(--sh); }
  .pm-bijl-vlak { height: 96px; display: flex; align-items: center; justify-content: center; }
  .pm-bijl-vlak .ic { font-size: 26px; }
  .pm-bijl-vlak.is-red { background: var(--red-soft); color: var(--red-strong); }
  .pm-bijl-vlak.is-green { background: var(--green-soft); color: var(--green-strong); }
  .pm-bijl-vlak.is-blue { background: var(--blue-soft); color: var(--blue-text); }
  .pm-bijl-vlak.is-violet { background: var(--violet-soft); color: var(--violet-text); }
  .pm-bijl-vlak.is-amber { background: var(--amber-soft); color: var(--amber-strong); }
  .pm-bijl-vlak.is-slate { background: var(--sunken); color: var(--text-2); }
  .pm-bijl-txt { padding: 10px; display: flex; flex-direction: column; gap: 3px; }
  .pm-bijl-n { font-size: 12.5px; font-weight: 600; line-height: 1.35; word-break: break-word; }
  .pm-bijl-b { font-size: 11px; color: var(--text-3); }
  .pm-bijl-add { border: 1px dashed var(--border-3); background: transparent; border-radius: 11px; min-height: 150px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    color: var(--text-3); cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
  .pm-bijl-add:hover { background: var(--sunken); }
  .pm-bijl-add .ic { font-size: 22px; }
}
@keyframes pmSheet { from { transform: translateY(18px); opacity: .5; } to { transform: translateY(0); opacity: 1; } }

/* =====================================================================================
   Instellingen herbouwd naar het ontwerp (Instellingen.dc.html): vijf tabbladen.
   Gedeelde 2-koloms layout (hoofdkolom + zijbalk), acceptatie-optiekaarten, data-kaarten,
   domeinrijen op Organisatie, keuzelijsten master-detail en het kosten-rekenvoorbeeld.
   Alles klapt onder 1100px naar één kolom; tabellen scrollen in hun .tbl-wrap (geen afkapping). */
.st-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr); gap: 16px; align-items: start; }
.st-main, .st-rail { min-width: 0; }
.st-rail { position: sticky; top: 0; }
.st-rail-title { font-size: 11.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.ais-rail-title { font-size: 11.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.st-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.st-addbar { display: flex; gap: 8px; padding: 11px 16px; border-top: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }

/* acceptatiemodel: twee optiekaarten */
.acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.acc-opt { display: flex; gap: 11px; align-items: flex-start; text-align: left; padding: 12px 13px;
  border-radius: var(--r); border: 1px solid var(--border-2); background: var(--surface); cursor: pointer; font: inherit; }
.acc-opt:hover { border-color: var(--border-3); }
.acc-opt.on { border-color: var(--pri); background: var(--pri-soft); }
.acc-opt-ic { font-size: 18px; color: var(--text-3); flex: none; margin-top: 1px; }
.acc-opt.on .acc-opt-ic { color: var(--pri-text); }
.acc-opt-title { font-size: 13.5px; font-weight: 600; }

/* data in- en uitvoer: drie actiekaarten + rode importstrook */
.data-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.data-card { display: flex; flex-direction: column; gap: 7px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); min-width: 0; }
.danger-strip { margin-top: 14px; padding: 12px 13px; border: 1px solid var(--red-soft); background: var(--red-soft);
  border-radius: var(--r); display: flex; gap: 11px; align-items: flex-start; flex-wrap: wrap; }

/* organisatie: domeinrijen */
.org-domrow { border-bottom: 1px solid var(--sunken); }
.org-domrow:last-of-type { border-bottom: none; }
.org-domgrid { display: grid; grid-template-columns: minmax(140px, 1fr) 230px auto auto; align-items: center; gap: 12px; padding: 11px 16px; }

/* keuzelijsten: master-detail */
.kz-grid { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.kz-list { overflow: hidden; position: sticky; top: 0; }
.kz-scroll { max-height: calc(100dvh - 290px); overflow-y: auto; }
.kz-grouphead { padding: 10px 14px 5px; font-size: 10.5px; font-weight: 600; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .06em; background: var(--surface-2); border-bottom: 1px solid var(--sunken); }
.kz-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; width: 100%;
  text-align: left; padding: 9px 14px; border: none; border-bottom: 1px solid var(--sunken); background: transparent; cursor: pointer; font: inherit; }
.kz-item:hover { background: var(--sunken); }
.kz-item.on { background: var(--pri-soft); box-shadow: inset 3px 0 0 var(--pri); }
.kz-item-label { font-size: 13px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kz-item.on .kz-item-label { font-weight: 600; color: var(--pri-text); }
.kz-valrow { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }

/* kostenmodel */
.kost-basis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.conf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.conf-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); min-width: 0; }

/* AI › Generatie en model: hero-schakelaar en optie-rijen */
.ais-hero { display: flex; align-items: center; gap: 14px; padding: 15px 16px; flex-wrap: wrap; }
.ais-hero-ic { width: 38px; height: 38px; font-size: 20px; flex: none; }
.ais-optrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); margin-bottom: 7px; }
.ais-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

@media (max-width: 1100px) {
  .st-grid, .kz-grid { grid-template-columns: 1fr; }
  .st-rail, .kz-list { position: static; }
  .kz-scroll { max-height: 320px; }
  .kost-basis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .org-domgrid { grid-template-columns: minmax(140px, 1fr) minmax(160px, 230px); }
  .org-domgrid > .count-chip { justify-self: start; }
  /* de actieknoppen (Context + omhoog/omlaag/verwijderen) krijgen op smal de hele rij en mogen wikkelen */
  .org-domgrid > span:last-child { grid-column: 1 / -1; flex-wrap: wrap; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .st-2col, .acc-grid, .data-cards, .conf-grid, .kost-basis, .ais-2col { grid-template-columns: 1fr; }
  .org-domgrid { grid-template-columns: 1fr; gap: 8px; }
}

/* =====================================================================================
   Beveiliging & privacy (trust-pagina, src/views/beveiliging.js). Statische, klant-veilige
   uitleg; grid van kaarten + een AI-call-stappenstroom. Alles wikkelt onder 900/640px. */
.bv-page { max-width: 1180px; }
.bv-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; flex: none; }
.bv-ico .ic { font-size: 18px; }
.bv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; align-items: start; }
.bv-card { padding: 16px 18px; margin: 0; }
.bv-card-head { display: flex; gap: 12px; align-items: flex-start; }
.bv-card-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin: 2px 0 0; }
.bv-card-lead { font-size: 12.5px; color: var(--text-2); margin: 4px 0 0; line-height: 1.5; }
.bv-list { margin: 12px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.bv-list li { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.bv-list li b { color: var(--text); font-weight: 600; }

/* hero-strip met vier geruststellende kerntegels */
.bv-hero { padding: 16px 18px; margin-bottom: 14px; }
.bv-hero-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bv-hero-cell { display: flex; gap: 11px; align-items: center; min-width: 0; }
.bv-hero-t { font-size: 13.5px; font-weight: 600; }
.bv-hero-s { font-size: 11.5px; color: var(--text-3); line-height: 1.4; margin-top: 1px; }

/* AI-call als stappenstroom */
.bv-flow { display: flex; gap: 8px; margin: 14px 0 4px; align-items: stretch; flex-wrap: wrap; }
.bv-flow-step { display: flex; gap: 10px; align-items: center; flex: 1 1 180px; min-width: 0;
  padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); position: relative; }
.bv-flow-txt { min-width: 0; }
.bv-flow-t { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.bv-flow-s { font-size: 11px; color: var(--text-3); line-height: 1.35; margin-top: 2px; }
.bv-flow-arrow { position: absolute; right: -13px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--text-faint); z-index: 1; }

/* wat gaat wel / niet mee */
.bv-wn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.bv-wn-col { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); padding: 12px 14px; }
.bv-wn-kop { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.bv-wn-col .bv-list { margin-top: 9px; }
.bv-eerlijk { margin-top: 14px; border-color: var(--amber-soft); background: var(--amber-soft); }
.bv-eerlijk .bv-list li { color: var(--text); }
.bv-foot { font-size: 12px; margin: 16px 2px 0; }

@media (max-width: 880px) {
  .bv-grid { grid-template-columns: 1fr; }
  .bv-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bv-flow-arrow { display: none; }
  .bv-flow-step { flex-basis: 100%; }
}
@media (max-width: 640px) {
  .bv-hero-grid, .bv-wn { grid-template-columns: 1fr; }
}

/* Beveiliging: "laatst bijgewerkt"-strip (eenmalige nieuw-melding, seen-once via localStorage) */
.bv-changelog { padding: 12px 14px; margin-bottom: 14px; }
.bv-changelog.bv-cl-nieuw { border-color: var(--amber-soft); background: var(--amber-soft); }
.bv-cl-row { display: flex; gap: 11px; align-items: flex-start; }
.bv-cl-ic { flex: none; }
.bv-cl-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bv-cl-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.bv-cl-date { font-size: 12px; color: var(--text-2); font-weight: 500; }
.bv-cl-tekst { font-size: 12.5px; color: var(--text); line-height: 1.5; margin: 4px 0 0; }
.bv-cl-more { margin-top: 8px; }
.bv-cl-more summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--pri-text); }
.bv-changelog .btn { flex: none; align-self: center; }

/* =====================================================================================
   Stap-verrijking (5a): applicatie + document-in/uit in de rechterrail-editor (process.js). */
.pd-field-hint { font-size: 11px; font-weight: 400; color: var(--text-faint); margin-left: 6px; }
.pd-appinput { width: 100%; }
/* Document-in/uit: een veld-achtige doos met chips + een invoer, zodat zichtbaar is dat hier iets in kan. */
.pd-docchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 40px;
  border: 1px solid var(--border-2); border-radius: var(--r); background: var(--surface); padding: 6px 8px; }
.pd-docchips:focus-within { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-soft); }
.pd-docchip { display: inline-flex; align-items: center; gap: 4px; background: var(--sunken); border: 1px solid var(--border-2);
  border-radius: var(--r-sm); padding: 2px 4px; font-size: 12px; color: var(--text-2); max-width: 100%; }
.pd-docchip-name { border: none; background: transparent; cursor: pointer; font: inherit; color: var(--text); display: inline-flex;
  align-items: center; gap: 5px; padding: 1px 3px; border-radius: var(--r-sm); max-width: 240px; }
.pd-docchip-name .ic { font-size: 13px; color: var(--text-3); flex: none; }
.pd-docchip-name:hover { color: var(--pri-text); text-decoration: underline; }
.pd-docchip-flag { border: 1px solid var(--border-2); background: var(--surface); cursor: pointer; font: inherit; font-size: 10.5px;
  font-weight: 600; color: var(--text-faint); padding: 1px 7px; border-radius: var(--r-pill); white-space: nowrap; }
.pd-docchip-flag.is-bouw { color: var(--blue-text); background: var(--blue-soft); border-color: var(--blue-soft); }
.pd-docchip-x { border: none; background: transparent; cursor: pointer; color: var(--text-faint); padding: 1px; display: inline-flex; border-radius: var(--r-sm); }
.pd-docchip-x:hover { color: var(--red-strong); background: var(--red-soft); }
.pd-docchip-x .ic { font-size: 13px; }
.pd-docadd { flex: 1; min-width: 120px; border: none; background: transparent; font-size: 12.5px; padding: 3px 2px; outline: none; }
/* Documentenlijst op de tab "Integraties & documenten" (bewerkbaar: bestandstype, kostentype, bouwen, voorbeeld). */
.pd-doclist { display: flex; flex-direction: column; gap: 6px; }
.pd-docrow { border: 1px solid var(--border-2); border-radius: var(--r); padding: 8px 10px; background: var(--surface); }
.pd-docrow.is-bouw { border-left: 3px solid var(--blue); }
.pd-docrow.is-flash { animation: pdDocFlash 1.3s ease; }
@keyframes pdDocFlash { 0%, 40% { background: var(--amber-soft); } 100% { background: var(--surface); } }
.pd-docrow-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-docrow-naam { font-size: 12.5px; font-weight: 600; flex: 1; min-width: 120px; }
.pd-docrow-bouw { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); }
.pd-docrow-att { margin-top: 8px; }
/* Afgeleid documentoverzicht (alleen-lezen rij, elders hergebruikt). */
.pd-listrow { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--sunken); }
.pd-listrow:last-child { border-bottom: none; }

/* Documenten-tab (Datamodel): uitklapbare voorbeeld-bijlage onder een te-bouwen document. */
.doc-att-row td { background: var(--surface-2); }
.doc-att { padding: 12px 14px; }