/* ============================================================
   C·ERP — "Compositie" thema-laag
   Brengt het hele platform naar richting D: warm bento (zachte,
   zwevende kaarten) × redactionele structuur (mono-labels,
   pill-navigatie, navy mono-merk, donkere live-kaart).
   Laadt ná cerp/styles.css + platform/platform.css en overschrijft
   gedeelde tokens + signatuur-componenten. Datadichte werkschermen
   (calculatieblad, Gantt, tabellen) behouden hun dichtheid.
   ============================================================ */

:root {
  --bg: #EFE7D6;
  --bg-2: #E5DBC8;
  --line: rgba(12,48,55,.07);
  --line-strong: rgba(12,48,55,.14);
  --radius: 22px;
  --shadow: 0 1px 2px rgba(12,48,55,.05), 0 4px 10px rgba(12,48,55,.05), 0 18px 40px rgba(12,48,55,.07);
  --shadow-lg: 0 2px 8px rgba(12,48,55,.07), 0 14px 32px rgba(12,48,55,.10), 0 40px 80px rgba(12,48,55,.16);
  --sheen: rgba(255,255,255,.55);
  --edge: rgba(255,255,255,.85);
  --mono: 'Roboto Mono', 'Roboto', monospace;
  /* semantische cijfers: groen = positief, rood = negatief */
  --pos: #1B8C54;  --pos-soft: rgba(27,140,84,.13);
  --neg: #C2202E;  --neg-soft: rgba(194,32,46,.13);
  /* tekstvarianten van amber en groen (h137, vraag 346), gelijk aan platform/tokens.css; hier ook omdat
     het portaal tokens.css niet laadt. Alleen voor tekst. */
  --amber-tekst: color-mix(in srgb, var(--amber) 55%, var(--text));
  --pos-tekst: color-mix(in srgb, var(--pos) 55%, var(--text));
}
[data-theme="dark"] {
  /* hoog-contrast donker: bijna-zwarte achtergrond, lichtere kaarten */
  --bg: #070B0E;
  --bg-2: #121C23;
  --surface: #18242C;
  --line: rgba(255,255,255,.12);
  --line-strong: rgba(255,255,255,.24);
  --text: #F3F8F7; --text-2: rgba(243,248,247,.72); --text-3: rgba(243,248,247,.52); /* DESIGNSYSTEEM-14: 4,5:1, gelijk aan platform/tokens.css */
  --track: rgba(255,255,255,.10); --glass: rgba(255,255,255,.05);
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.42), 0 20px 48px rgba(0,0,0,.5);
  --shadow-lg: 0 4px 14px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.55), 0 40px 90px rgba(0,0,0,.66);
  --sheen: rgba(255,255,255,.06);
  --edge: rgba(255,255,255,.08);
  --pos: #43D08A;  --pos-soft: rgba(67,208,138,.16);
  --neg: #FF6B79;  --neg-soft: rgba(255,107,121,.16);
  --amber-tekst: color-mix(in srgb, var(--amber) 80%, var(--text));
  --pos-tekst: color-mix(in srgb, var(--pos) 80%, var(--text));
}

/* ---------------- Bovenbalk — navy + mono-merk + pill-nav -------- */
.tb {
  background: #13284A; height: 62px; padding: 0 28px; gap: 22px;
  box-shadow: 0 1px 0 rgba(0,0,0,.18);
}
.tb__brand { font-family: var(--mono); font-weight: 500; letter-spacing: .05em; }
.tb__nav { gap: 4px; background: rgba(255,255,255,.07); padding: 4px; border-radius: 13px; }
.tb__navitem { padding: 8px 15px; border-radius: 9px; font-weight: 500; }
.tb__navitem:hover { background: rgba(255,255,255,.08); }
.tb__navitem.is-on,
.tb__navitem.is-on:hover { background: #fff; color: #13284A; }
.tb__cmd { border-radius: 999px; padding: 9px 16px; }
.tb__theme { border-radius: 999px; }
.tb__avatar { border-radius: 999px; background: #4ED7A8; color: #06343b; font-weight: 700; }
.tb__live i { background: #4ED7A8; box-shadow: 0 0 0 3px rgba(78,215,168,.22); }

/* ---------------- Projectbalk -------------------------------- */
.pjbar { padding-top: 16px; }
.pjbar__title b { font-weight: 400; }
.pjbar__title.is-cur { border-radius: 12px; }
.phbtn { border-radius: 11px; }
.phbtn--active .phbtn__mark { border-color: var(--brand); }
.spine__gate span { border-radius: 999px; }

/* ---------------- Knoppen → pill ----------------------------- */
.btn { border-radius: 999px; padding: 12px 19px; }
.btn--brand { box-shadow: 0 4px 14px rgba(0,98,113,.26); }
.btn--brand:hover { box-shadow: 0 8px 22px rgba(0,98,113,.30); }
.btn--ghost { background: var(--surface); border-color: transparent; color: var(--text); box-shadow: 0 1px 3px rgba(12,48,55,.08); }
.btn--ghost:hover { border-color: transparent; box-shadow: 0 6px 18px rgba(12,48,55,.12); }
.chip-btn { border-radius: 999px; }
.icon-btn { border-radius: 999px; border-color: transparent; box-shadow: 0 1px 3px rgba(12,48,55,.07); }
.icon-btn:hover { box-shadow: 0 6px 16px rgba(12,48,55,.12); }
.seg { border-radius: 999px; border-color: transparent; background: var(--bg-2); }
.seg__btn { border-radius: 999px; }
.seg__btn.is-on { box-shadow: 0 1px 3px rgba(12,48,55,.10); }
.link-btn { background: var(--bg-2); color: var(--text-2); padding: 7px 13px; border-radius: 999px; }
.link-btn:hover { color: var(--text); background: var(--bg-2); }

/* ---------------- Kaarten → zwevende bento ------------------- */
.card, .kpi, .proj-card, .pcard2 { border-color: transparent; box-shadow: var(--shadow); }
.proj-summary div, .pd-kpi { border-color: transparent; border-radius: 18px; box-shadow: var(--shadow); }
.insight, .dr-card, .tm-card, .photo-tile { border-color: var(--line); border-radius: 16px; }
.insight:hover { border-color: var(--line-strong); }
.proj-card:hover, .pcard2:hover { border-color: transparent; box-shadow: var(--shadow-lg); }
.empty__icon { border-color: transparent; box-shadow: var(--shadow); }

/* ---------------- Mono-labels & redactionele eyebrows -------- */
.kick { font-family: var(--mono); font-weight: 500; letter-spacing: .14em; color: var(--brand); }
.kpi__label { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.kpi__delta { font-family: var(--mono); font-weight: 500; }
.proj-summary span, .pd-kpi span { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.reg__head span, .deb-head span, .bgt__head span, .doc-cat__head { font-family: var(--mono); }

/* ---------------- Redactionele koppen ------------------------ */
.page-h1 { font-weight: 200; }
.card-title { font-weight: 400; }

/* ---------------- Live-kaart → donker navy ------------------- */
.live-card { background: #13284A; box-shadow: 0 18px 44px rgba(19,40,74,.24); }
.live-card .live-head { border-bottom-color: rgba(255,255,255,.10); }
.live-card .kick { color: rgba(255,255,255,.6); }
.live-card .top__live-dot { background: #4ED7A8; box-shadow: 0 0 0 3px rgba(78,215,168,.25); }
.live-card .live-stats span { color: rgba(255,255,255,.5); }
.live-card .live-stats b { color: #fff; }
.live-card .live-row { border-top-color: rgba(255,255,255,.10); }
.live-card .live-row__t { color: rgba(255,255,255,.45); }
.live-card .live-row__body b { color: #fff; }
.live-card .live-row__body span { color: rgba(255,255,255,.62); }

/* ---------------- Intelligence-kaart ------------------------- */
.intel-card { background: linear-gradient(168deg, var(--brand-soft), transparent 58%), var(--surface); }

/* ---------------- Commandobalk + overlays -------------------- */
.cmd { border-radius: 22px; border-color: transparent; }
.cmd__spark { border-radius: 11px; }
.bvsw__menu { border-radius: 18px; }

/* ---------------- AI-CTA / portaal --------------------------- */
.ai-cta { border-radius: 16px; }
.portal-fab { background: #13284A; }

/* ---------------- Semantische cijfers: groen ↑ / rood ↓ ------ */
/* KPI-delta wordt een zachte pill die meekleurt met de inline kleur */
.kpi__delta {
  padding: 4px 11px; border-radius: 999px; font-weight: 600;
  background: color-mix(in srgb, currentColor 13%, transparent);
}
/* Marge-cijfer in de portfoliolijst krijgt dezelfde pill-tint */
.pf-row__margin {
  padding: 5px 11px 4px; border-radius: 12px;
  background: color-mix(in srgb, currentColor 11%, transparent);
}
.pf-row__margin i { opacity: .7; }
/* Positieve prognose-marge-tegel → groen i.p.v. teal */
.fin-tile--accent { background: linear-gradient(180deg, var(--pos-soft), transparent); border-color: color-mix(in srgb, var(--pos) 32%, var(--line)); }
.fin-tile--accent .fin-tile__v { color: var(--pos-tekst); }
.fin-tile__delta { color: var(--pos-tekst); }
/* Budget-resultaat & vergelijkings-delta blijven via inline JS gekleurd */

/* ============================================================
   Pre-contract: versie-index, uittrek-uitslag, documenten
   ============================================================ */

/* ---- gedeelde terugknop-afstand ---- */
.inko-back { margin-bottom: 14px; }

/* ---- VersieIndex ---- */
.vx-hero { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: var(--gap); }
.vx-hero__l { padding: 26px 28px; }
.vx-hero__tag { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.vx-hero__v { font-family: var(--mono); font-size: 13px; font-weight: 500; color: #fff; background: var(--navy); padding: 4px 11px; border-radius: 999px; }
.vx-hero__cur { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.vx-hero__title { font-size: 27px; font-weight: 300; letter-spacing: -.02em; }
.vx-hero__scope { font-size: 13.5px; color: var(--text-2); margin-top: 6px; }
.vx-hero__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 28px; margin-top: 22px; }
.vx-hero__facts > div span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.vx-hero__facts > div b { font-size: 14px; font-weight: 500; }
.vx-hero__r { padding: 24px 26px; background: linear-gradient(180deg, var(--bg-2), transparent); border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.vx-hero__rh { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.vx-hero__open { margin-top: auto; align-self: flex-start; }

/* wijzigingenlijst */
.vx-delta { display: flex; flex-direction: column; gap: 9px; }
.vx-delta--compact { gap: 6px; }
.vx-delta__row { display: flex; gap: 9px; align-items: flex-start; }
.vx-delta__ic { width: 18px; height: 18px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.vx-delta__t { font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.vx-delta--compact .vx-delta__t { font-size: 11.5px; }
.vx-nodelta { font-size: 11.5px; color: var(--text-3); font-style: italic; }

/* revisielijst */
.vx-list { display: flex; flex-direction: column; }
.vx-list__head { display: grid; grid-template-columns: 90px 2.2fr 2fr 100px 120px 34px; gap: 14px; padding: 13px 20px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.vx-list__head span:nth-child(4) { text-align: right; }
.vx-row { display: grid; grid-template-columns: 90px 2.2fr 2fr 100px 120px 34px; gap: 14px; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--line); text-align: left; width: 100%; transition: background .12s; }
.vx-list .vx-row:last-child { border-bottom: none; }
.vx-row:hover { background: var(--bg-2); }
.vx-row.is-huidig { background: color-mix(in srgb, var(--pos) 5%, transparent); }
.vx-row__v { font-family: var(--mono); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.vx-row__v em { font-style: normal; font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--pos-tekst); background: var(--pos-soft); padding: 2px 6px; border-radius: 999px; }
.vx-row__main { min-width: 0; }
.vx-row__naam { display: block; font-size: 13.5px; font-weight: 500; }
.vx-row__scope { display: block; font-size: 12.5px; color: var(--text-2); }
.vx-row__meta { display: block; font-size: 11px; color: var(--text-3); margin-top: 2px; }
.vx-row__metric { text-align: right; }
.vx-row__metric b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vx-row__metric i { display: block; font-style: normal; font-size: 10px; color: var(--text-3); }
.vx-row__go { color: var(--text-3); display: flex; justify-content: flex-end; }
.vx-row--acties { grid-template-columns: 90px 2.2fr 2fr 100px 120px auto 34px; cursor: pointer; }
.vx-row__acties { display: flex; gap: 6px; justify-content: flex-end; }
.vx-row:hover .vx-row__go { color: var(--brand); }
.vx-group { display: flex; align-items: center; gap: 9px; padding: 13px 20px 9px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.vx-group b { font-size: 13px; font-weight: 600; }
.vx-group span { font-size: 11.5px; color: var(--text-3); }
.vx-foot { padding: 14px 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); }

/* versie-banner boven geopende inhoud */
.vx-banner { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 13px; background: var(--bg-2); margin-bottom: var(--gap); }
.vx-banner__v { font-family: var(--mono); font-size: 12px; font-weight: 600; color: #fff; background: var(--navy); padding: 3px 10px; border-radius: 999px; }
.vx-banner__txt { font-size: 12.5px; color: var(--text-2); }

/* ---- Calculatie breed ---- */
.calc-screen { max-width: none; }
/* Ingebed calculatieblad (meerwerkcalculatie op de post, h18): zelfde regels en kolommen,
   horizontaal scrollbaar in een smalle kaart in plaats van samengedrukt. */
.calc-screen--ingebed { margin: 0; padding: 0; width: 100%; max-width: 100%; contain: inline-size; }
.calc-screen--ingebed .calc-bar { box-shadow: none; }
.calc-screen--ingebed .calc-table { overflow-x: auto; box-shadow: none; }
.calc-screen--ingebed .calc-head, .calc-screen--ingebed .calc-row { grid-template-columns: 50px minmax(140px, 1fr) 52px 28px 44px 40px 72px 74px 72px 72px 72px 82px 36px; gap: 6px; padding-left: 12px; padding-right: 12px; }
.calc-screen--ingebed .calc-head, .calc-screen--ingebed .calc-row, .calc-screen--ingebed .calc-chapter { min-width: 930px; }
.calc-hero__vtag { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.calc-hero__vtag span { font-family: var(--mono); font-size: 12px; font-weight: 600; color: #14273e; background: #fff; padding: 3px 10px; border-radius: 999px; }
.calc-hero__vtag i { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }

/* ---- Uittrek: tabel + uitslag-paneel ---- */
.utk-layout { display: grid; grid-template-columns: 1.75fr 1fr; gap: var(--gap); align-items: start; }
.utk-aside { position: sticky; top: 0; }
.utk__row.is-sel { background: var(--brand-soft); }
.utk__ref--btn { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-2); border: 1px solid transparent; border-radius: 8px; padding: 5px 9px; font-size: 11.5px; color: var(--text-2); cursor: pointer; transition: all .12s; max-width: 100%; }
.utk__ref--btn:hover { border-color: var(--brand); color: var(--brand); }
.utk__ref--btn.is-sel { background: var(--brand); color: #fff; }
.utk__ref-zoom { margin-left: auto; opacity: .5; }
.utk__ref--btn:hover .utk__ref-zoom, .utk__ref--btn.is-sel .utk__ref-zoom { opacity: 1; }
.kbd-ref { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-2); border-radius: 6px; padding: 2px 7px; font-size: 11px; color: var(--text-2); }

.uitslag { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.uitslag--empty { padding: 44px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.uitslag__emptyic { width: 56px; height: 56px; border-radius: 16px; background: var(--bg-2); color: var(--text-3); display: flex; align-items: center; justify-content: center; }
.uitslag--empty b { font-size: 15px; font-weight: 500; }
.uitslag--empty p { font-size: 12.5px; color: var(--text-3); line-height: 1.6; max-width: 280px; }
.uitslag__bar { display: flex; align-items: center; justify-content: space-between; padding: 11px 15px; border-bottom: 1px solid var(--line); }
.uitslag__tabs { display: flex; gap: 4px; }
.uitslag__tabs span { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 4px 9px; border-radius: 7px; }
.uitslag__tabs span.is-on { background: var(--navy); color: #fff; }
.uitslag__loc { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-2); font-family: var(--mono); }
.uitslag__canvas { position: relative; aspect-ratio: 16/10; background: #FBF9F4; overflow: hidden; }
[data-theme="dark"] .uitslag__canvas { background: #0d1a1f; }
.uitslag__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 22px 22px; opacity: .6; }
.uitslag__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.uitslag__tabel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-3); font-size: 12px; }
.uitslag__tag { position: absolute; background: var(--surface); border: 1px solid var(--brand); border-radius: 9px; padding: 6px 11px; box-shadow: var(--shadow); }
.uitslag__tag b { display: block; font-size: 13px; font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }
.uitslag__tag i { font-style: normal; font-size: 9.5px; color: var(--text-3); }
.uitslag__meta { padding: 6px 18px 10px; }
.uitslag__mrow { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.uitslag__mrow:last-child { border-bottom: none; }
.uitslag__mrow > span { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.uitslag__mrow > b { font-size: 13px; font-weight: 500; }
.uitslag__bron { font-style: normal; color: var(--text-3); font-size: 11.5px; font-weight: 400; }
.mono-ref { font-family: var(--mono); font-size: 11.5px; font-weight: 500; }
.uitslag__foot { display: flex; gap: 8px; padding: 13px 18px; border-top: 1px solid var(--line); background: var(--bg-2); }

/* ---- Documenten: tabs + lab + viewer + rechten ---- */
.doctabs { display: flex; gap: 4px; background: var(--bg-2); padding: 4px; border-radius: 13px; margin-bottom: var(--gap); width: fit-content; }
.doctab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--text-2); transition: all .12s; white-space: nowrap; }
.doctab:hover { color: var(--text); }
.doctab.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.doctab em { font-style: normal; font-size: 10.5px; font-family: var(--mono); color: var(--text-3); background: color-mix(in srgb, var(--text) 7%, transparent); padding: 1px 7px; border-radius: 999px; }
.doctab.is-on em { color: var(--brand); background: var(--brand-soft); }

.doclab { display: grid; grid-template-columns: 1fr 1.35fr; gap: var(--gap); align-items: start; }
.doclab__list { overflow: hidden; }
.btn--sm { padding: 7px 12px; font-size: 12px; }
.docrow__lock { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; color: var(--text-3); background: var(--bg-2); border: 1px solid var(--line-strong); flex-shrink: 0; }
.docrow__lock.is-mine { color: var(--brand); background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.docpane__locktag { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; color: var(--text-3); background: var(--bg-2); border: 1px solid var(--line-strong); }
.docpane__locktag.is-mine { color: var(--brand); background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.docpane__versie { padding: 14px 18px 4px; border-top: 1px solid var(--line); margin-top: 14px; }
.docpane__versie .docpane__shareh { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 11px; }
.dvb-lock { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--line-strong); margin-bottom: 11px; }
.dvb-lock.is-mine { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 28%, var(--line)); }
.dvb-lock__ic { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.dvb-lock.is-mine .dvb-lock__ic { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
.dvb-lock b { display: block; font-size: 13px; font-weight: 600; }
.dvb-lock span { font-size: 11.5px; color: var(--text-3); }
.dvb-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dvb-hint { font-size: 11.5px; color: var(--text-3); }
.dvb-ci { padding: 12px 13px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--line-strong); }
.dvb-ci__lbl { display: block; font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.dvb-ci__in { width: 100%; font: inherit; font-size: 13px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--text); margin-bottom: 11px; }
.dvb-ci__in:focus { border-color: var(--brand); outline: none; }
.dvb-ci__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dvb-ci__rev { font-size: 12px; color: var(--text-2); }
.dvb-ci__rev b { color: var(--brand); }
.dvb-ci__btns { display: flex; gap: 8px; }
.dvb-hist { margin-top: 13px; border-top: 1px solid var(--line); padding-top: 11px; display: flex; flex-direction: column; gap: 2px; }
.dvb-hrow { display: grid; grid-template-columns: 54px 1fr; gap: 10px; padding: 7px 0; }
.dvb-hrev { font-size: 11px; font-weight: 700; color: var(--brand); font-family: 'Roboto Mono', monospace; padding-top: 1px; }
.dvb-hmain b { display: block; font-size: 12.5px; font-weight: 500; color: var(--text); }
.dvb-hmain span { font-size: 11px; color: var(--text-3); }

/* documentstatus-workflow + tekeningstempel (#26 / #28) */
.dwf-flow { display: flex; align-items: center; margin-bottom: 12px; }
.dwf-step { display: flex; align-items: center; gap: 7px; }
.dwf-step b { font-size: 11.5px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.dwf-step.is-cur b { color: var(--text); }
.dwf-step.is-done b { color: var(--text-2); }
.dwf-dot { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; background: var(--bg-2); border: 1.5px solid var(--line-strong); color: var(--text-3); flex-shrink: 0; }
.dwf-step.is-cur .dwf-dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.dwf-step.is-done .dwf-dot { background: color-mix(in srgb, var(--pos) 80%, transparent); border-color: transparent; color: #fff; }
.dwf-seg { flex: 1; height: 2px; background: var(--line-strong); margin: 0 8px; border-radius: 2px; }
.dwf-seg.is-done { background: color-mix(in srgb, var(--pos) 70%, transparent); }
.dwf-stamp { display: flex; align-items: center; gap: 14px; padding: 13px 15px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--line-strong); }
.dwf-stamp__grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.dwf-stamp__grid div { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; }
.dwf-stamp__grid span { color: var(--text-3); }
.dwf-stamp__grid b { font-weight: 600; text-align: right; }
.dwf-stampmark { width: 64px; height: 64px; border-radius: 8px; border: 2px solid var(--line-strong); display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--text-3); flex-shrink: 0; transform: rotate(-8deg); }
.dwf-stampmark.is-on { border-color: var(--pos); color: var(--pos-tekst); }
.dwf-distfoot { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; color: var(--text-3); line-height: 1.5; margin: 11px 0 0; }
.dwf-distfoot svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.doclab__search { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.doclab__sbox { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--bg-2); }
.doclab__sbox:focus-within { border-color: var(--brand); }
.doclab__sbox svg { color: var(--text-3); flex-shrink: 0; }
.doclab__sbox input { flex: 1; min-width: 0; border: none; background: none; font: inherit; font-size: 13px; color: var(--text); outline: none; }
.doclab__sclear { color: var(--text-3); display: flex; flex-shrink: 0; }
.doclab__sclear:hover { color: var(--text); }
.doclab__facet { font: inherit; font-size: 12px; color: var(--text-2); padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--bg-2); max-width: 130px; }
.doclab__facet:focus { border-color: var(--brand); outline: none; }
@media (max-width: 1080px) { .doclab__search { flex-wrap: wrap; } .doclab__facet { max-width: none; flex: 1; } }
.doclab__listhead { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.doclab__cmp { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; font-family: 'Roboto', sans-serif; color: var(--text-2); background: var(--bg-2); padding: 6px 11px; border-radius: 999px; }
.doclab__cmp.is-on { background: var(--brand); color: #fff; }
.doclist { display: flex; flex-direction: column; }
.docgrp__head { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 16px; background: var(--bg-2); border-bottom: 1px solid var(--line); text-align: left; transition: background .12s; }
.docgrp:first-child .docgrp__head { border-top: none; }
.docgrp__head:hover { background: color-mix(in srgb, var(--bg-2) 55%, var(--line)); }
.docgrp__chev { color: var(--text-3); flex-shrink: 0; transition: transform .15s; }
.docgrp__dot { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
.docgrp__head b { flex: 1; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
.docgrp__count { font-size: 11px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.docrow { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; width: 100%; transition: background .12s; }
.doclist .docrow:last-child { border-bottom: none; }
.docrow:hover { background: var(--bg-2); }
.docrow.is-on { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.docrow__main { flex: 1; min-width: 0; }
.docrow__main b { display: block; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docrow__sub { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-3); margin-top: 3px; }
.docrow__cmpdot { width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-3); flex-shrink: 0; }
.docrow__cmpdot.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }

.docicon { font-family: var(--mono); font-size: 10px; font-weight: 600; padding: 5px 7px; border-radius: 7px; flex-shrink: 0; letter-spacing: .02em; }

.sharestack { display: inline-flex; align-items: center; }
.sharestack__av { width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; border: 2px solid var(--surface); margin-left: -7px; }
.sharestack__av:first-child { margin-left: 0; }
.sharestack__more { font-size: 10.5px; font-weight: 600; color: var(--text-3); margin-left: 5px; }

.doclab__view { position: sticky; top: 0; }
.doc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.docpane { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.docpane__head { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.docpane__title { flex: 1; min-width: 0; }
.docpane__title b { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docpane__title span { font-size: 11.5px; color: var(--text-3); }
.docpane__slot { width: 22px; height: 22px; border-radius: 7px; background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.docpane__canvas { position: relative; aspect-ratio: 16/9; background: #FBF9F4; overflow: hidden; }
[data-theme="dark"] .docpane__canvas { background: #0d1a1f; }
.docpane__canvas--ifc { background: linear-gradient(135deg, #1a3344, #0f2030); }
.docpane__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 26px 26px; opacity: .5; }
.docpane__canvas--ifc .docpane__grid { background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); opacity: 1; }
.docpane__fmtlabel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 30px; font-weight: 600; letter-spacing: .08em; color: color-mix(in srgb, var(--text-3) 36%, transparent); }
.docpane__canvas--ifc .docpane__fmtlabel { color: rgba(255,255,255,.22); }
.docpane__rev { position: absolute; bottom: 10px; right: 12px; font-family: var(--mono); font-size: 10.5px; color: var(--text-3); background: var(--surface); padding: 3px 8px; border-radius: 6px; }
.docpane__canvas--ifc .docpane__rev { background: rgba(0,0,0,.3); color: rgba(255,255,255,.7); }
.docpane__canvas--live { aspect-ratio: auto; height: 460px; background: #fff; }
[data-theme="dark"] .docpane__canvas--live { background: #10181c; }
.docpane__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.docpane__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--bg-2); }
/* ---- DocCanvas: gedeelde documentviewer (fase 1: raster + eigen navigatie) ---- */
.doccv { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; background: var(--bg-2); }
.doccv__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; background: #2a3340; color: #e8edf2; flex: none; }
.doccv__grp { display: flex; align-items: center; gap: 4px; }
.doccv__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; border: none; border-radius: 7px; background: transparent; color: #dfe6ee; cursor: pointer; font: 600 12.5px/1 'Roboto', sans-serif; }
.doccv__btn:hover:not(:disabled) { background: rgba(255, 255, 255, .14); }
.doccv__btn:disabled { opacity: .35; cursor: default; }
.doccv__btn--txt { min-width: 54px; }
.doccv__pg { font: 600 12.5px/1 'Roboto Mono', monospace; min-width: 52px; text-align: center; color: #e8edf2; }
.doccv__scroll { flex: 1; min-height: 0; overflow: auto; display: flex; justify-content: safe center; align-items: flex-start; padding: 18px; background: repeating-linear-gradient(135deg, var(--bg, #f4f2ee) 0 9px, transparent 9px 18px), var(--bg-2, #efece6); }
.doccv__page { flex: none; background: #fff; box-shadow: 0 6px 26px rgba(20, 30, 45, .16); border-radius: 3px; transform-origin: center top; }
.doccv__state { margin: auto; color: var(--text-3); font-size: 13px; padding: 40px; text-align: center; }
.doccv--msg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--text-3); font-size: 13px; padding: 24px; text-align: center; }

/* ---- mark-up-engine (fase 2/3): gereedschap, invoerkaartje, zijpaneel ---- */
.doccv__body { flex: 1; min-height: 0; display: flex; align-items: stretch; }
.doccv__bar { flex-wrap: wrap; row-gap: 4px; }
.doccv__tools { flex-wrap: wrap; }
.doccv__tool.is-on { background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.doccv__btn.is-on { background: rgba(255, 255, 255, .22); }
.doccv__sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .25); margin: 0 5px; }
.doccv__swatch { width: 17px; height: 17px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.doccv__swatch.is-on { border-color: #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .35); }
.doccv__badge { position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; border-radius: 999px; background: var(--signal, #C6533B); color: #fff; font: 700 9.5px/15px 'Roboto', sans-serif; text-align: center; font-style: normal; padding: 0 3px; }
.doccv__btn { position: relative; }
.doccv__stempels { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: #3a4452; color: #dfe6ee; font-size: 12px; flex: none; flex-wrap: wrap; }
.doccv__stempelkeuze { border: 1.5px solid rgba(255, 255, 255, .4); border-radius: 6px; background: transparent; color: #fff; font: 700 11px/1 'Roboto Mono', monospace; letter-spacing: .12em; padding: 6px 10px; cursor: pointer; }
.doccv__stempelkeuze.is-on { background: rgba(255, 255, 255, .22); border-color: #fff; }
.doccv__vraag { position: absolute; z-index: 5; width: 250px; background: var(--surface, #fff); border: 1px solid var(--line-strong, #d8d4cc); border-radius: 10px; box-shadow: 0 10px 34px rgba(20, 30, 45, .22); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.doccv__vraag b { font-size: 12px; color: var(--text, #1c2430); }
.doccv__vraag textarea { resize: vertical; font: 400 12.5px/1.4 'Roboto', sans-serif; padding: 7px 9px; border: 1px solid var(--line, #e3e0d8); border-radius: 7px; min-height: 44px; color: var(--text, #1c2430); background: var(--bg-2, #faf9f6); }
.doccv__vraagbtns { display: flex; justify-content: flex-end; gap: 8px; }
.doccv__panel { width: 288px; flex: none; border-left: 1px solid var(--line, #e3e0d8); background: var(--surface, #fff); display: flex; flex-direction: column; min-height: 0; }
.doccv__panelhead { padding: 12px 14px 9px; border-bottom: 1px solid var(--line, #e3e0d8); }
.doccv__panelhead b { display: block; font-size: 13px; }
.doccv__panelhead span { font-size: 11.5px; color: var(--text-3); }
.doccv__panellist { flex: 1; min-height: 0; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.doccv__mk { display: flex; gap: 9px; align-items: flex-start; padding: 9px 9px 8px; border: 1px solid var(--line, #e3e0d8); border-radius: 9px; cursor: pointer; background: var(--surface, #fff); }
.doccv__mk:hover { border-color: var(--line-strong, #cfcabf); }
.doccv__mk.is-on { border-color: var(--brand, #3F6178); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--brand, #3F6178) 35%, transparent); }
.doccv__mk.is-af { opacity: .62; }
.doccv__mkic { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.doccv__mkbody { flex: 1; min-width: 0; }
.doccv__mkbody > b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.35; word-break: break-word; }
.doccv__mkbody > span { display: block; font-size: 11px; color: var(--text-3); margin-top: 2px; }
.doccv__mkacts { display: flex; gap: 10px; margin-top: 6px; }
.doccv__mkacts .link-btn { font-size: 11.5px; }
.link-btn--rood { color: var(--signal, #C6533B); }
.doccv__mkstatus { flex: none; font: 700 9.5px/1 'Roboto Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--amber, #B58A2A); padding-top: 3px; }
.doccv__mkstatus.is-af { color: var(--pos, #1B8C54); }
.fsv__canvas--doc { align-items: stretch; justify-content: flex-start; padding: 0; }
.docpane__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.docpane__open { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--brand); background: var(--surface); border: 1px solid var(--line-strong); padding: 6px 12px; border-radius: 7px; text-decoration: none; }
.docpane__meta { padding: 4px 18px 8px; }
.docpane__mrow { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.docpane__mrow > span { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.docpane__mrow > b { font-size: 12.5px; font-weight: 500; }
.docpane__share { padding: 14px 18px; border-top: 1px solid var(--line); background: var(--bg-2); }
.docpane__shareh { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.docpane__shareh em { font-style: normal; color: var(--text-2); }
.docpane__shlist { display: flex; flex-direction: column; gap: 9px; }
.shrow { display: flex; align-items: center; gap: 10px; }
.shrow__av { width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
.shrow__id { flex: 1; min-width: 0; }
.shrow__id b { display: block; font-size: 12.5px; font-weight: 500; }
.shrow__id i { font-style: normal; font-size: 11px; color: var(--text-3); }

/* rechtenmatrix */
.rechten-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.rechten-legend span { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); }
.rechten-legend i { width: 11px; height: 11px; border-radius: 4px; }
.rechten { display: grid; }
.rechten__h { padding: 13px 12px; border-bottom: 2px solid var(--line-strong); text-align: center; }
.rechten__h--doc { text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; }
.rechten__av { width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; color: #fff; margin-bottom: 5px; }
.rechten__h b { display: block; font-family: var(--mono); font-size: 11px; font-weight: 600; }
.rechten__h i { font-style: normal; font-size: 9.5px; color: var(--text-3); }
.rechten__doc { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); }
.rechten__doc b { display: block; font-size: 12px; font-weight: 500; }
.rechten__doc span { font-size: 10.5px; color: var(--text-3); }
.rechten__cell { display: flex; align-items: center; justify-content: center; padding: 12px 8px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.rechten__cell.is-none { background: color-mix(in srgb, var(--bg-2) 50%, transparent); }
.rechten__chip { font-size: 10.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.rechten__dash { color: var(--text-3); opacity: .5; }

@media (max-width: 1200px) {
  .vx-hero { grid-template-columns: 1fr; }
  .utk-layout, .doclab { grid-template-columns: 1fr; }
  .doc-compare { grid-template-columns: 1fr; }
}

/* ---- Takenpop-up ruimer ---- */
.taskmodal { width: min(880px, 94vw) !important; padding: 0 30px 30px !important; }
.taskmodal .herk__head { padding-top: 26px; }
.taskmodal__body { min-height: 360px; }
.taskmodal .tm-fields { grid-template-columns: repeat(3, 1fr); gap: 20px 28px; }
.taskmodal .tm-fields > div span { font-size: 11px; }
.taskmodal .tm-fields > div b { font-size: 15px; }
.taskmodal__ph { padding: 64px 30px !important; }
.taskmodal__ph p { font-size: 14px; max-width: 440px; }

/* ---- Gantt namenkolom in breedte verstelbaar ---- */
.gantt2 { position: relative; }
.gantt2__resizer { position: absolute; top: 0; bottom: 0; width: 12px; transform: translateX(-50%); cursor: col-resize; z-index: 6; display: flex; align-items: stretch; justify-content: center; touch-action: none; }
.gantt2__resizer span { width: 2px; background: var(--line-strong); border-radius: 2px; transition: background .12s, width .12s; }
.gantt2__resizer:hover span, .gantt2__resizer:active span { background: var(--brand); width: 3px; }

/* ---- Calculatie: leesbaarheid + getallen compact rechts ---- */
/* omschrijving = 1fr (vangt ruimte), getalkolommen vast → blijven rechts gegroepeerd i.p.v. uitwaaieren */
.calc-head, .calc-row {
  /* h97 (Q15): omschrijving minimaal 170 (was 240): op 1440 met het zijpaneel viel de kolom met
     eenheidsprijs, info en regel vullen 54 px buiten de (niet scrollende) tabel. */
  grid-template-columns: 58px minmax(170px, 1fr) 56px 30px 50px 46px 76px 80px 76px 78px 80px 90px 40px;
  gap: 8px;
}
/* cijfers beter leesbaar (was te licht) */
.calc-num { color: var(--text); font-weight: 500; }
.calc-tar, .calc-eh { color: var(--text-3); font-weight: 400; }
.calc-box--oa { color: var(--steel); }
.calc-box--stel { color: var(--amber); }
.calc-aant { color: var(--text); }
/* donkere banner-subtekst leesbaarder */
.calc-hero__sub { color: var(--text-2); }
/* informatie-/verwijsregels iets sterker dan haarlicht */
.calc-zero { color: var(--text-3); }

/* zachtere calc-banner + hoofdstukbalken (minder hard contrast) */
.calc-hero { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); border-left: 4px solid var(--brand); }
.calc-hero__title { color: var(--text); }
.calc-hero__vtag span { color: #fff; background: var(--brand); }
.calc-hero__vtag i { color: var(--text-3); }
.calc-chapter { background: var(--bg-2); color: var(--text); box-shadow: inset 3px 0 0 var(--brand); border-top: 1px solid var(--line); text-transform: none; font-weight: 600; }
.calc-chapter b { color: var(--brand); background: var(--brand-soft); }

/* ============================================================
   Offertedocument — papier-stijl aanbieding
   ============================================================ */
.offdoc-screen { max-width: 1180px; }
.offdoc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.offdoc-toolbar__r { display: flex; align-items: center; gap: 12px; }
.offdoc-toolbar__meta { font-family: var(--mono); font-size: 11px; color: var(--text-3); }

.offdoc { background: #fff; color: #16242b; max-width: 840px; margin: 0 auto; border-radius: 6px; box-shadow: var(--shadow-lg); padding: 56px 60px 40px; font-size: 13px; line-height: 1.55; }
[data-theme="dark"] .offdoc { background: #f6f3ec; }
.offdoc__head { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 22px; border-bottom: 2px solid #16242b; }
.offdoc__brand { display: flex; align-items: center; gap: 13px; }
.offdoc__mark { width: 40px; height: 40px; border-radius: 11px; background: #13284A; position: relative; flex-shrink: 0; }
.offdoc__mark i { position: absolute; top: 16px; width: 10px; height: 10px; border-radius: 50%; }
.offdoc__mark i:first-child { left: 9px; background: #fff; }
.offdoc__mark i:last-child { right: 9px; background: #4ED7A8; }
.offdoc__brand b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.offdoc__brand span { font-size: 11.5px; color: #6a7a80; }
.offdoc__doctype { text-align: right; }
.offdoc__doctype b { display: block; font-size: 22px; font-weight: 300; letter-spacing: .12em; color: #006271; }
.offdoc__doctype span { font-family: var(--mono); font-size: 11px; color: #6a7a80; }

.offdoc__addr { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 28px 0; }
.offdoc__lbl { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #97a4a8; display: block; margin-bottom: 7px; }
.offdoc__to b { font-size: 14.5px; font-weight: 600; }
.offdoc__to p { font-size: 12.5px; color: #4a5a60; margin-top: 5px; }
.offdoc__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 18px; align-content: start; }
.offdoc__facts > div span { font-size: 10.5px; color: #97a4a8; display: block; }
.offdoc__facts > div b { font-size: 12.5px; font-weight: 600; }

.offdoc__intro { margin-bottom: 26px; }
.offdoc__intro p { margin-bottom: 10px; }
.offdoc__sec { margin-bottom: 26px; }
.offdoc__sec h3 { display: flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 13px; padding-bottom: 8px; border-bottom: 1px solid #e3ded3; }
.offdoc__sec h3 span { width: 24px; height: 24px; border-radius: 7px; background: #006271; color: #fff; font-size: 12px; font-weight: 700; display: none; align-items: center; justify-content: center; font-family: var(--mono); }
.offdoc__keyfacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 14px; }
.offdoc__keyfacts > div { background: #f6f3ec; border-radius: 9px; padding: 12px 14px; }
.offdoc__keyfacts span { font-size: 10.5px; color: #97a4a8; display: block; }
.offdoc__keyfacts b { font-size: 14px; font-weight: 600; }

.offdoc__tbl { width: 100%; border-collapse: collapse; }
.offdoc__tbl th { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #97a4a8; text-align: left; padding: 7px 10px; border-bottom: 1px solid #e3ded3; }
.offdoc__tbl td { padding: 9px 10px; border-bottom: 1px solid #efeae0; font-size: 12.5px; }
.offdoc__tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.offdoc__tbl .mono { font-family: var(--mono); font-size: 11.5px; color: #6a7a80; }
.offdoc__tbl-sum td { border-top: 2px solid #16242b; border-bottom: none; font-weight: 700; padding-top: 11px; }

.offdoc__build { background: #f6f3ec; border-radius: 11px; padding: 6px 18px; }
.offdoc__bl { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #e3ded3; }
.offdoc__bl:last-child { border-bottom: none; }
.offdoc__bl span { font-size: 13px; color: #4a5a60; }
.offdoc__bl b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.offdoc__bl--sum span, .offdoc__bl--sum b { font-weight: 700; color: #16242b; }
.offdoc__bl--total { margin: 4px -18px 0; padding: 14px 18px; background: #006271; border-radius: 0 0 11px 11px; }
.offdoc__bl--total span { color: rgba(255,255,255,.85); font-weight: 600; font-size: 13.5px; }
.offdoc__bl--total b { color: #fff; font-size: 18px; }
.offdoc__note { font-size: 12px; color: #6a7a80; margin-bottom: 10px; }

.offdoc__vw { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.offdoc__vw li { position: relative; padding-left: 20px; font-size: 12.5px; color: #3a4a50; }
.offdoc__vw li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #006271; }

.offdoc__sign { margin-top: 36px; }
.offdoc__sighead { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #97a4a8; margin-bottom: 14px; }
.offdoc__siggrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.offdoc__sigcard { border: 1px solid #e3ded3; border-radius: 12px; padding: 18px 20px; background: #faf8f3; }
.offdoc__siglbl { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #97a4a8; }
.offdoc__signaam { display: block; font-size: 15px; font-weight: 600; color: #16242b; margin-top: 6px; }
.offdoc__signrole { font-size: 12px; color: #6a7a80; }
.offdoc__sigfields { display: flex; gap: 18px; margin-top: 34px; }
.offdoc__sigfield { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.offdoc__sigfield span { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #97a4a8; }
.offdoc__sigfield i { display: block; height: 30px; border-bottom: 1.5px solid #c4bdae; }
.offdoc__sigcard .offedit--inline { margin-top: 4px; }
.offdoc__foot { margin-top: 34px; padding-top: 14px; border-top: 1px solid #e3ded3; display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; color: #97a4a8; }

.offdoc-preview { display: block; width: 100%; cursor: pointer; }
.offdoc-preview:hover { opacity: .92; }

@media print {
  .tb, .pjbar, .offdoc-toolbar, .portal-fab { display: none !important; }
  .offdoc { box-shadow: none; max-width: none; padding: 0; }
}

/* ============================================================
   Databibliotheek — meerdere kopjes + AI-zoek
   ============================================================ */
.dbib { display: grid; grid-template-columns: 232px 1fr; gap: var(--gap); align-items: start; }
.dbib__nav { position: sticky; top: 0; display: flex; flex-direction: column; gap: 3px; }
.dbib__navbtn { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 11px 13px; border-radius: 11px; transition: background .12s; }
.dbib__navbtn:hover { background: var(--bg-2); }
.dbib__navbtn.is-on { background: var(--brand-soft); }
.dbib__navic { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.dbib__navmain { flex: 1; min-width: 0; }
.dbib__navmain b { display: block; font-size: 12.5px; font-weight: 500; }
.dbib__navmain span { font-size: 10.5px; color: var(--text-3); }
.dbib__navbtn.is-on .dbib__navmain b { color: var(--brand); }
.dbib__count { font-size: 11px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }

.dbib__ai { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 13px; margin-bottom: var(--gap);
  background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 9%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line)); }
.dbib__ai-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dbib__ai input { flex: 1; border: none; outline: none; background: none; font-family: inherit; font-size: 13.5px; color: var(--text); }
.dbib__ai input::placeholder { color: var(--text-3); }
.dbib__ai-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); padding: 4px 9px; border-radius: 999px; flex-shrink: 0; }

.dbib-tbl { width: 100%; }
.dbib-tbl__head, .dbib-tbl__row { display: grid; gap: 14px; align-items: center; }
.dbib-tbl__head { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.dbib-tbl__head span { font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.dbib-tbl__head .num, .dbib-tbl__row .num { text-align: right; }
.dbib-tbl__row { padding: 13px 18px; border-top: 1px solid var(--line); width: 100%; text-align: left; transition: background .12s; }
.dbib-tbl__row:first-of-type { border-top: none; }
.dbib-tbl__row:hover { background: var(--bg-2); }
.dbib-code { font-family: var(--mono); font-size: 11.5px; color: var(--text-2); }
.dbib-nm b { font-size: 13px; font-weight: 500; display: block; }
.dbib-nm span { font-size: 11px; color: var(--text-3); }
.dbib-cell { font-size: 12.5px; color: var(--text-2); }
.dbib-num { text-align: right; font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.dbib-chip { font-size: 10px; font-weight: 600; letter-spacing: .04em; padding: 3px 8px; border-radius: 6px; display: inline-block; }
.dbib-sec__intro { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin-bottom: 14px; }
.dbib-spec { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); }
.dbib-spec i { width: 6px; height: 6px; border-radius: 2px; display: inline-block; }

@media (max-width: 1080px) { .dbib { grid-template-columns: 1fr; } .dbib__nav { position: static; flex-direction: row; overflow-x: auto; } }
/* m1792244450982887: receptenboom (hoofdstuk > paragraaf > recept) en hoofdstukken in de zijbalk */
.dbib__navchev { color: var(--text-3); flex-shrink: 0; transition: transform .12s; }
.dbib__navboom { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 14px; padding-left: 10px; border-left: 1px solid var(--line); max-height: calc(100vh - 330px); min-height: 120px; overflow-y: auto; overscroll-behavior: contain; }
.dbib__navboom-h { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 6px; align-items: center; width: 100%; text-align: left; padding: 5px 8px; border-radius: 7px; font-size: 11.5px; color: var(--text-2); }
.dbib__navboom-h:hover { background: var(--bg-2); color: var(--text); }
.dbib__navboom-h.is-on { background: var(--brand-soft); color: var(--brand); }
.dbib__navboom-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbib-wissel { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; }
.dbib-wissel button { font-size: 12px; font-weight: 600; padding: 6px 11px; color: var(--text-2); background: var(--surface); }
.dbib-wissel button + button { border-left: 1px solid var(--line-strong); }
.dbib-wissel button.is-on { background: var(--brand-soft); color: var(--brand); }
.dbib-boom { border-top: 1px solid var(--line); }
.dbib-boom__tak { scroll-margin-top: 120px; }
.dbib-boom__info { padding: 10px 18px; font-size: 12px; color: var(--text-3); }
.dbib-boom__leeg { padding: 14px 18px; color: var(--text-3); font-size: 13px; }
.dbib-boom__leeg--in { padding-left: 46px; display: flex; align-items: center; gap: 10px; }
.dbib-boom__h, .dbib-boom__p { display: grid; align-items: center; gap: 10px; width: 100%; text-align: left; border-top: 1px solid var(--line); transition: background .12s; }
.dbib-boom__tak:first-of-type > .dbib-boom__h { border-top: none; }
.dbib-boom__h { grid-template-columns: 16px 40px minmax(0, 1fr) auto; padding: 12px 18px; font-size: 13.5px; }
.dbib-boom__h b { font-weight: 600; }
.dbib-boom__h.is-open { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.dbib-boom__p { grid-template-columns: 14px 52px minmax(0, 1fr) auto; padding: 9px 18px 9px 42px; font-size: 12.5px; color: var(--text-2); }
.dbib-boom__pt { overflow-wrap: anywhere; }
.dbib-boom__h:hover, .dbib-boom__p:hover { background: var(--bg-2); }
.dbib-boom__n { font-size: 11px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dbib-tbl__row.dbib-boom__r { grid-template-columns: 92px minmax(0, 1fr) 64px 100px; padding: 10px 18px 10px 70px; border-top: 1px solid var(--line); }
@media (max-width: 1080px) { .dbib__navboom { display: none; } }
@media (max-width: 620px) {
  .dbib-boom__p { padding-left: 26px; }
  .dbib-tbl__row.dbib-boom__r { grid-template-columns: minmax(0, 1fr) auto; padding-left: 34px; row-gap: 2px; }
  .dbib-tbl__row.dbib-boom__r > .dbib-code { grid-column: 1 / -1; }
  .dbib-tbl__row.dbib-boom__r > .dbib-boom__vorm { display: none; }
}

/* leverancier-keuze + meta */
.lev-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 18px 4px; }
.lev-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 12px; font-weight: 500; color: var(--text-2); cursor: pointer; transition: all .14s; }
.lev-chip:hover { border-color: var(--navy); }
.lev-chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.lev-chip span { font-size: 10.5px; font-weight: 700; opacity: .7; font-variant-numeric: tabular-nums; }
.lev-chip.is-on span { opacity: .85; }
.lev-meta { display: flex; flex-wrap: wrap; gap: 26px; margin: 12px 18px 0; padding: 13px 16px; border-radius: 12px; background: var(--bg-2); }
.lev-meta > div { display: flex; flex-direction: column; gap: 3px; }
.lev-meta span { font-size: 10.5px; color: var(--text-3); letter-spacing: .03em; text-transform: uppercase; }
.lev-meta b { font-size: 13.5px; font-weight: 600; }

/* product-opbouw mini-bar */
.prod-opbouw { display: flex; flex-direction: column; gap: 4px; }
.prod-bar { display: flex; width: 100%; height: 7px; border-radius: 4px; overflow: hidden; background: var(--track); }
.prod-bar i { display: block; height: 100%; }
.prod-opbouw em { font-style: normal; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* bibliotheek — klikbare rijen, detail- & create-modals */
.dbib-tbl__row--btn { width: 100%; text-align: left; cursor: pointer; transition: background .12s; }
.dbib-tbl__row--btn:hover { background: var(--bg-2); }
.bib-new { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--line)); border-radius: 9px; padding: 6px 11px; background: var(--surface); }
.bib-new:hover { background: var(--brand-soft); }
.bib-newtag { font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pos-tekst); background: color-mix(in srgb, var(--pos) 14%, transparent); padding: 1px 5px; border-radius: 4px; margin-left: 7px; }

.bibmodal { width: min(620px, 94vw); max-height: 88vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; animation: pop .16s ease; }
.bibmodal--form { width: min(560px, 94vw); }
.bibmodal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
.bibmodal__x { width: 32px; height: 32px; border-radius: 9px; color: var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bibmodal__x:hover { background: var(--bg-2); color: var(--text); }
.bibmodal__body { padding: 18px 22px; overflow-y: auto; }
.bibmodal__price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--brand-soft); margin-bottom: 16px; }
.bibmodal__price span { font-size: 12px; color: var(--text-2); }
.bibmodal__price b { font-size: 26px; font-weight: 300; color: var(--brand); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bibdet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-bottom: 18px; }
.bibdet-grid > div { display: flex; flex-direction: column; gap: 2px; }
.bibdet-grid span { font-size: 10.5px; color: var(--text-3); letter-spacing: .03em; text-transform: uppercase; }
.bibdet-grid b { font-size: 13.5px; font-weight: 600; }
.bibdet-sec { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.bibdet-rows { display: flex; flex-direction: column; }
.bibdet-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.bibdet-row span { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.bibdet-row span i { width: 9px; height: 9px; border-radius: 3px; }
.bibdet-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bibdet-row--tot { border-top: 2px solid var(--line-strong); }
.bibdet-row--tot span { font-weight: 700; color: var(--text); }
.bibdet-row--tot b { color: var(--brand); font-size: 15px; }
.recdet-fase { margin-bottom: 14px; }
.recdet-fase__h { font-size: 11px; font-weight: 700; color: var(--text); background: var(--bg-2); padding: 6px 10px; border-radius: 7px; margin-bottom: 4px; }
.recdet-row { display: grid; grid-template-columns: 1.8fr .8fr .9fr .9fr; gap: 8px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.recdet-row__oms { display: flex; align-items: center; gap: 8px; }
.recdet-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.recdet-dot--materiaal { background: var(--steel); }
.recdet-dot--arbeid { background: var(--brand); }
.recdet-row__cat { font-size: 11px; color: var(--text-3); }
.recdet-row__f, .recdet-row__p { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.bibmodal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); }
/* m1792244386882314: het venster valt niet meer buiten beeld. De overlay begint op 14vh; met
   max-height 88vh liep de voet (Gebruik in calculatie) onder het scherm bij 1440x900 en kleiner.
   Nu: kleinere rand boven, het venster nooit hoger dan wat er overblijft, kop en voet vast,
   alleen de romp scrolt. Onder 600 px neemt werkbank.css het over. */
.cmd__overlay:has(> .bibmodal) { padding: max(16px, 5vh) 16px 16px; overflow: hidden; }
.cmd__overlay > .bibmodal.bibmodal { max-height: calc(100vh - max(16px, 5vh) - 16px); max-height: calc(100dvh - max(16px, 5vh) - 16px); min-height: 0; max-width: 100%; }
.bibmodal__head, .bibmodal__foot { flex-shrink: 0; }
.bibmodal__head > :first-child { min-width: 0; }
.bibmodal__head .card-title { overflow-wrap: anywhere; }
.bibmodal__body { flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
.bibmodal__foot { flex-wrap: wrap; row-gap: 8px; }

.bib-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; }
.bib-field > span { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.bib-field input, .bib-field select, .bib-field textarea { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text); font-size: 13.5px; font-family: inherit; }
.bib-field textarea { resize: vertical; min-height: 64px; line-height: 1.5; width: 100%; box-sizing: border-box; }
.bib-field textarea::placeholder { color: var(--text-3); }
.bib-field input:focus, .bib-field select:focus, .bib-field textarea:focus { outline: none; border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-soft); }
.bib-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bib-calc { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; padding: 13px 16px; border-radius: 12px; background: var(--bg-2); }
.bib-calc span { font-size: 12px; color: var(--text-2); }
.bib-calc b { font-size: 20px; font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }

/* ============================================================
   3D-MODERNISERING — diepte, sheen & lift over de hele app
   ============================================================ */
/* zachte achtergrond-diepte */
.plat .main__scroll {
  background:
    radial-gradient(1200px 520px at 50% -8%, color-mix(in srgb, var(--brand) 6%, transparent), transparent 70%),
    radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--navy) 5%, transparent), transparent 60%);
}

/* kaarten & tegels: sheen-bovenlaag + inset-randlicht + gelaagde schaduw */
.card, .kpi, .fin-tile, .proj-card, .insight,
.taskmodal, .herk, .mailwin, .cmd, .exp-sheet, .offdoc, .pos-bal__net,
.dr-card, .scen-card, .relcard, .lev-card {
  background-image: linear-gradient(180deg, var(--sheen), transparent 42%);
  box-shadow: inset 0 1px 0 var(--edge), var(--shadow);
}
/* live-kaart is donker navy: subtiele donkere sheen i.p.v. de lichte */
.live-card {
  background-image: linear-gradient(180deg, rgba(255,255,255,.05), transparent 38%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px rgba(19,40,74,.24);
}
.fin-tile, .kpi { transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s; will-change: transform; }
.kpi:hover, .fin-tile:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 var(--edge), var(--shadow-lg);
}
.kpi--accent, .fin-tile--accent {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--brand) 14%, transparent), color-mix(in srgb, var(--brand) 5%, transparent));
}

/* accent-tegel cijfers iets meer "embossed" */
.kpi--accent .kpi__num, .fin-tile--accent .fin-tile__v { text-shadow: 0 1px 0 rgba(255,255,255,.35); }
[data-theme="dark"] .kpi--accent .kpi__num, [data-theme="dark"] .fin-tile--accent .fin-tile__v { text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* knoppen: tactiel, met gradient + inset-highlight */
.btn--brand {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--brand) 100%, white 16%), var(--brand));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 5px var(--brand-soft), 0 8px 18px var(--brand-soft);
}
.btn--brand:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 4px 10px var(--brand-soft), 0 12px 26px var(--brand-soft); }
.btn--brand:active { transform: translateY(0); box-shadow: inset 0 2px 5px rgba(0,0,0,.18); }
.btn--ghost {
  background-image: linear-gradient(180deg, var(--sheen), transparent 60%);
  box-shadow: inset 0 1px 0 var(--edge), 0 1px 2px rgba(12,48,55,.05);
}
.btn--ghost:active { transform: translateY(1px); }

/* bovenbalk: gelaagd boven de content */
.tb {
  background-image: linear-gradient(180deg, color-mix(in srgb, #1b3a63 70%, #13284A), #13284A);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 4px 18px rgba(12,24,40,.28);
}
[data-theme="dark"] .tb { background-image: linear-gradient(180deg, #0e161c, #0A1216); }
.tb__navitem.is-on, .tb__navitem.is-on:hover { box-shadow: 0 2px 8px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.6); }

/* projectbalk-fase-knoppen: subtiele pill-diepte op actief */
.phbtn--active, .phbtn.is-cur { box-shadow: inset 0 1px 0 var(--edge), 0 4px 12px rgba(12,48,55,.08); border-radius: 12px; }

/* status-stippen & avatar krijgen lichte bolling */
.tb__avatar, .side__avatar, .mailthread__av { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 6px rgba(0,0,0,.18); }

/* command-palette spark & KPI sparkline-kaart subtieler verzonken track */
.uren__cell, .prod-bar, .pnl__bar, .ord-row__bar, .rea-row__bar, .offcalc-split__bar, .bv-track {
  box-shadow: inset 0 1px 2px rgba(12,48,55,.08);
}
[data-theme="dark"] .uren__cell, [data-theme="dark"] .prod-bar, [data-theme="dark"] .pnl__bar,
[data-theme="dark"] .ord-row__bar, [data-theme="dark"] .rea-row__bar, [data-theme="dark"] .offcalc-split__bar, [data-theme="dark"] .bv-track {
  box-shadow: inset 0 1px 2px rgba(0,0,0,.45);
}

/* reduced-motion: geen lift-animaties */
@media (prefers-reduced-motion: reduce) {
  .kpi:hover, .fin-tile:hover, .btn--brand:hover, .btn--brand:active, .btn--ghost:active { transform: none; }
}

/* h20 punt 2b: postentabel meer- en minderwerk op een telefoon (375 px) zonder horizontaal
   scrollen, zoals de OHW-staat (h14). Onder 640 px verdwijnt de kolomkop en wordt elke post
   een blok: nummer en status bovenaan, de titel over de hele breedte, bedrag en btw naast
   elkaar met hun kop erboven, daaronder route en de knoppen. Breed blijft de tabel gelijk. */
@media (max-width: 640px) {
  .mws-posten table, .mws-posten tbody { display: block; width: 100%; }
  .mws-posten .tbl__kop { display: none; }
  .mws-posten .mws-post { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "kies nr status" "titel titel titel" "excl excl btw" "route route route" "acties acties acties"; row-gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
  .mws-posten .mws-post:first-child { border-top: 0; }
  .mws-posten .mws-post > td { display: block; padding: 0 !important; border-top: 0; min-width: 0; max-width: none !important; width: auto !important; text-align: left; overflow-wrap: anywhere; }
  .mws-posten .mws-post > td.tbl__num { text-align: left !important; white-space: normal; }
  .mws-posten .mws-post > td, .mws-posten .mws-post:hover > td { background: transparent; }
  .mws-posten .mws-post:hover { background: color-mix(in srgb, var(--bg-2) 45%, var(--surface)); }
  .mws-posten .mws-post.is-gekozen { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
  .mws-posten .mws-post > .tbl__kies { grid-area: kies; padding-right: 10px !important; }
  /* h37: de selectiecel is 32 bij 32 px (hele cel klikbaar, zie patronen.jsx); negatieve marges
     houden het vinkje op dezelfde plek en de regel even hoog */
  .mws-posten .mws-post > .tbl__kies:not(:empty) { display: flex; align-items: center; justify-content: center; width: 32px !important; height: 32px; margin: -8px 2px -8px -8px; padding: 0 !important; }
  .mws-posten .mws-post > .tbl__kies:empty { display: none; }
  .mws-posten .mws-post__nr { grid-area: nr; align-self: center; }
  .mws-posten .mws-post__status { grid-area: status; justify-self: end; align-self: center; }
  .mws-posten .mws-post__titel { grid-area: titel; }
  .mws-posten .mws-post__excl { grid-area: excl; }
  .mws-posten .mws-post__btw { grid-area: btw; }
  .mws-posten .mws-post__route { grid-area: route; }
  .mws-posten .mws-post__acties { grid-area: acties; }
  .mws-posten .mws-post__acties:empty { display: none; }
  .mws-posten .mws-post__acties > div { align-items: flex-start !important; }
  .mws-posten .mws-post__acties > div > span { text-align: left !important; max-width: none !important; flex-wrap: wrap; }
  .mws-posten .mws-post > td[data-l]::before { content: attr(data-l); display: block; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
  .mws-posten .mws-post__detail { display: block; }
  .mws-posten .mws-post__detail > td:first-child { display: none; }
  .mws-posten .mws-post__detail > td { display: block; padding: 12px 14px !important; min-width: 0; }
  .mws-posten .mws-post__detail > td > div { grid-template-columns: minmax(0, 1fr); }
  .mws-posten .mws-post__detail > td > div > * { min-width: 0; }
  .mws-posten .mws-post__detail input, .mws-posten .mws-post__detail select { min-width: 0; max-width: 100%; }
  .mws-posten .mws-eigen__rij { grid-template-columns: minmax(0, 1fr) 70px !important; }
  .mws-posten .mws-eigen__rij > :last-child { grid-column: 1 / -1; }
  .mws-posten .calc-screen--ingebed .calc-bar, .mws-posten .calc-screen--ingebed .calc-bar__stats, .mws-posten .calc-screen--ingebed .calc-bar__actions { flex-wrap: wrap; min-width: 0; }
  .mws-posten .mws-post__saldo { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); }
  .mws-posten .mws-post__saldo > td { display: block; padding: 0 !important; border-top: 0; }
  .mws-posten .mws-post__saldo > td:empty { display: none; }
}

/* Meldpunt Max 28-09: in de invulmodus staan Eigen werk, btw, verdieping en bouwdeel rechts naast
   de omschrijving op dezelfde regel, niet eronder. */
/* h97 (Q15): wat niet past schuift binnen de cel (dunne schuifbalk) in plaats van onder de invoer
   van aantal en uren te vallen; zo bleven de btw-keuze, verdieping en bouwdeel onbereikbaar. */
.calc-row--edit .calc-oms { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.calc-row--edit .calc-oms .calc-edit--oms { flex: 1 1 auto; width: auto; min-width: 90px; }
.calc-row--edit .calc-oms > .calc-fxchip,
.calc-row--edit .calc-oms > .calc-back { flex: 0 0 auto; white-space: nowrap; }
/* Toevoegbalk onder de regels van de meerwerkcalculatie. */
.calc-addbar--mmw { gap: 10px; flex-wrap: wrap; }

/* h97 (Q15): in de bibliotheekkiezer stond het kopje tegen de titel aan (UIT DE BIBLIOTHEEKHoofdstuk toevoegen). */
.cpick__head .kick { display: block; margin-bottom: 4px; }
/* h97 (Q15): een lege OA- of stelpostcel in de leesweergave (ook vergrendeld) leek een invoerveld;
   alleen een cel met een bedrag houdt het kader. */
.calc-box:empty { border-color: transparent; background: transparent; }

/* h97 (Q15): Update gehele bibliotheek (Instellingen, Tarieven): een veld per onderdeel,
   proefberekening en de laatste rondes. Alleen bestaande tokens. */
.set-idx { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; }
.set-idx__veld { display: flex; flex-direction: column; gap: 4px; }
.set-idx__veld .set-opslag__input { align-self: flex-start; }
.set-idx__l { display: flex; flex-direction: column; font-size: 12px; }
.set-idx__l i { font-style: normal; color: var(--text-3); font-size: 11px; }
.set-idx__proef, .set-idx__hist { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.set-idx__groep { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.set-idx__groep > span { color: var(--text-3); }
.set-idx__rij { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-variant-numeric: tabular-nums; }
.set-idx__rij > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-idx__rij > span:last-child { flex: 0 0 auto; color: var(--text-2); }
.set-idx__gepind { font-size: 12px; color: var(--text-3); margin: 0; }
@media (max-width: 600px) { .set-idx__rij { flex-direction: column; gap: 0; } .set-idx__rij > span:first-child { white-space: normal; } }

/* Meldpunt m1792244952500924: producttype met leveranciers en prijzen (screens-bibliotheek.jsx) */
.cmd__overlay > .bibmodal.bpt-modal { width: min(860px, 96vw); }
.bpt-wissel { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 18px 12px; }
.bpt-fout { display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin-bottom: 12px; border-radius: 10px; font-size: 12.5px; color: var(--red, #b42318); background: color-mix(in srgb, var(--red, #b42318) 9%, transparent); }
.bpt-leeg p { font-size: 13px; color: var(--text-2); line-height: 1.55; margin: 0 0 12px; }
.bpt-hint { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: var(--text-3); line-height: 1.5; margin: 12px 0 0; }
.bpt-hint svg { flex: 0 0 auto; margin-top: 2px; color: var(--brand); }
.bpt-kop { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.bpt-kv { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.bpt-kv > span { font-size: 11.5px; color: var(--text-3); overflow-wrap: anywhere; }
.bpt-kv > span:first-child { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.bpt-kv > b { font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.bpt-tbl { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.bpt-row { display: grid; grid-template-columns: minmax(130px, 1.1fr) minmax(120px, 1.2fr) 120px 90px 86px 92px; gap: 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--line); font-size: 12.5px; }
.bpt-row:first-child { border-top: 0; }
.bpt-row--h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--text-3); background: var(--glass); }
.bpt-row--u { grid-template-columns: minmax(110px, 160px) 1fr 110px 110px; }
.bpt-row--leeg { padding: 12px 14px; font-size: 12.5px; color: var(--text-3); }
.bpt-row.is-voorkeur { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.bpt-row.is-inactief { opacity: .55; }
.bpt-row .r { text-align: right; }
.bpt-row > span { min-width: 0; overflow-wrap: anywhere; }
.bpt-lev { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bpt-prod { display: flex; flex-direction: column; gap: 2px; }
.bpt-prod i, .bpt-num i { font-style: normal; font-size: 11px; color: var(--text-3); }
.bpt-num { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; font-weight: 600; }
.bpt-cel { color: var(--text-2); }
.bpt-link { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.bpt-badge { display: inline-flex; align-items: center; font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; color: var(--brand); background: var(--brand-soft, color-mix(in srgb, var(--brand) 12%, transparent)); margin-left: 6px; }
.bpt-badge--laag { color: var(--green, #15803d); background: color-mix(in srgb, var(--green, #15803d) 12%, transparent); }
.bpt-hist { padding: 8px 14px 10px; font-size: 12px; color: var(--text-2); line-height: 1.6; background: var(--glass); border-top: 1px dashed var(--line); }
.bpt-form { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: 10px; }
.bpt-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); margin: 8px 0; cursor: pointer; }
.bpt-uitkomst { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.bpt-uitkomst__kop { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.bpt-uitkomst__kop span { color: var(--text-3); }
.bpt-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.bpt-voorb { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.bpt-voorb table { border-collapse: collapse; font-size: 12px; width: 100%; }
.bpt-voorb th, .bpt-voorb td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.bpt-voorb th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); font-weight: 600; }
.bpt-voorb .is-kol { background: color-mix(in srgb, var(--brand) 8%, transparent); }
@media (max-width: 700px) {
  .bpt-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .bpt-row--h { display: none; }
  .bpt-row--u { grid-template-columns: 1fr auto auto; }
  .bpt-row--u > span:nth-child(2) { grid-column: 1 / -1; order: 5; }
  .bpt-modal .bib-row2 { grid-template-columns: 1fr; }
}