/* ============================================================
   C-ERP Platform — stylesheet (bovenop cerp/styles.css tokens)
   ============================================================ */

/* ---- knoppen: uitgeschakelde staat (geldt voor alle .btn-varianten,
   uiterlijk van actieve knoppen blijft ongewijzigd) ---- */
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* ---- layout ---------------------------------------------- */
.plat { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: var(--bg); }
/* h62: viewport-fit=cover (d0c8b1b) laat de pagina onder de inkeping en de statusbalk lopen; de schil
   houdt die veilige zone vrij, zodat kop en werkvlak er nooit onder vallen. Op de desktop is env() 0. */
.plat { box-sizing: border-box; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
.plat .main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.plat .main__scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.screen--wide { max-width: 1720px; }
.screen, .screen--wide { max-width: none; }

/* ---- bovenbalk (donker) ---------------------------------- */
.tb { display: flex; align-items: center; gap: 18px; height: 56px; flex-shrink: 0; padding: 0 20px;
  background: #122738; color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.2); position: relative; z-index: 40; }
[data-theme="dark"] .tb { background: #0A1216; border-bottom: 1px solid rgba(255,255,255,.08); }
.tb__brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: .04em; color: #fff; }
/* Echt logo, transparant en meekleurend met het thema (28-10): licht = huisstijlkleuren, donker = lichte variant. */
.cerp-logo { display: block; }
.cerp-logo--licht { display: none; }
[data-theme="dark"] .cerp-logo--normaal { display: none; }
[data-theme="dark"] .cerp-logo--licht { display: block; }
.tb__nav { display: flex; gap: 2px; }
.tb__navitem { padding: 7px 13px; border-radius: 8px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.66); transition: color .15s; }
.tb__navitem:hover { color: #fff; background: rgba(255,255,255,.08); }
.tb__navitem.is-on { color: #fff; background: rgba(255,255,255,.14); }
.tb__cmd { flex: 1; max-width: 460px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.62); font-size: 13px; transition: all .15s; }
.tb__cmd:hover { background: rgba(255,255,255,.12); }
.tb__cmd span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb__cmd kbd { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.8); }
.tb__right { display: flex; align-items: center; gap: 14px; }
.tb__theme { width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.78); display: flex; align-items: center; justify-content: center; transition: all .15s; }
.tb__theme:hover { background: rgba(255,255,255,.18); color: #fff; }
.tb__icon { position: relative; width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.78); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; }
.tb__icon:hover { background: rgba(255,255,255,.18); color: #fff; }
.tb__icon.is-on { background: #fff; color: var(--navy, #1d3a4f); border-color: #fff; }
.tb__badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--signal, #C0392B); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1.5px solid var(--navy, #13284A); }
.tb__badge--soft { background: var(--steel, #5a7a8c); }
/* agenda-dropdown */
.agpop { position: relative; display: flex; }
.agpop__panel { position: absolute; top: calc(100% + 12px); right: 0; width: min(380px, calc(100vw - 28px)); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow-lg, 0 18px 50px rgba(0,0,0,.28)); z-index: 60; overflow: hidden; }
.agpop__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 17px 12px; border-bottom: 1px solid var(--line); }
.agpop__head .kick { color: var(--text-3); }
.agpop__head b { font-size: 15px; font-weight: 600; }
.agpop__date { font-size: 11.5px; color: var(--text-3); text-align: right; max-width: 160px; }
.agpop__list { max-height: 340px; overflow-y: auto; padding: 6px 8px; }
.lt-kort.agpop__empty { text-align: center; padding: 22px 0; }
.agpop__row { display: flex; align-items: stretch; gap: 11px; padding: 9px 9px; border-radius: 10px; }
.agpop__row:hover { background: var(--bg-2); }
.agpop__t { font-size: 12px; font-weight: 700; color: var(--text-2); width: 42px; flex-shrink: 0; font-variant-numeric: tabular-nums; padding-top: 1px; }
.agpop__line { width: 3px; border-radius: 3px; flex-shrink: 0; }
.agpop__main { min-width: 0; }
.agpop__main b { display: block; font-size: 13px; font-weight: 500; line-height: 1.35; }
.agpop__main span { font-size: 11.5px; color: var(--text-3); }
.agpop__foot { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 17px; border: none; border-top: 1px solid var(--line); background: none; color: var(--brand); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.agpop__foot:hover { background: var(--bg-2); }
/* ===== volledige agenda / kalender ===== */
.ag-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: var(--gap); }
.ag-title { font-size: clamp(22px, 3vw, 28px); font-weight: 300; letter-spacing: -.02em; margin-bottom: 10px; }
.ag-nav { display: flex; align-items: center; gap: 8px; }
.ag-navbtn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ag-navbtn:hover { border-color: var(--brand); color: var(--brand); }
.ag-today { font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); cursor: pointer; }
.ag-today:hover { border-color: var(--brand); color: var(--brand); }
.ag-period { font-size: 13.5px; font-weight: 600; color: var(--text); margin-left: 6px; }
.ag-head__r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ag-ghostbtn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); cursor: pointer; }
.ag-ghostbtn:hover { border-color: var(--brand); color: var(--brand); }
.ag-ghostbtn svg { color: var(--brand); }
/* fullscreen */
.ag-fsroot { position: fixed; inset: 0; z-index: 300; background: var(--bg); margin: 0 !important; max-width: none !important; padding: 22px 26px; overflow: auto; }
.ag-screen { display: flex; flex-direction: column; min-height: calc(100vh - 64px); padding-bottom: 18px; }
.ag-screen .ag-layout { flex: 1; min-height: 0; align-content: start; }
.ag-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.ag-segbtn { font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 7px; border: none; background: none; color: var(--text-3); cursor: pointer; }
.ag-segbtn.is-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.16); }
.ag-seg--sm .ag-segbtn { padding: 4px 11px; font-size: 11.5px; }
.ag-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--gap); align-items: start; }
@media (max-width: 1080px) { .ag-layout { grid-template-columns: 1fr; } }
.ag-grid { display: grid; grid-template-columns: 56px 1fr; }
/* h64 (h57 P5): de week op een telefoon schuift horizontaal met een vaste tijdkolom, zodat elke dag leesbaar breed blijft. */
@media (max-width: 560px) {
  .ag-weekcard { overflow-x: auto; overscroll-behavior-x: contain; }
  .ag-weekcard .ag-alldaybar, .ag-weekcard .ag-grid { min-width: 620px; }
  .ag-weekcard .ag-times, .ag-weekcard .ag-alldaybar__gut { position: sticky; left: 0; z-index: 5; background: var(--surface); }
  .ag-weekcard .ag-alldaybar__gut { background: var(--bg-2); }
}
.ag-times { display: flex; flex-direction: column; }
.ag-corner { height: 52px; border-bottom: 1px solid var(--line); }
.ag-timecol { position: relative; }
.ag-timelbl { position: absolute; right: 8px; font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ag-body { min-width: 0; }
.ag-colheads { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; border-bottom: 1px solid var(--line); }
.ag-colhead { height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: none; border-left: 1px solid var(--line); background: none; cursor: pointer; }
.ag-colhead:first-child { border-left: none; }
.ag-colhead__d { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.ag-colhead__n { font-size: 17px; font-weight: 600; color: var(--text); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.ag-colhead.is-today .ag-colhead__n { background: var(--brand); color: #fff; }
.ag-colhead.is-today .ag-colhead__d { color: var(--brand); }
.ag-cols { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; }
.ag-col { position: relative; border-left: 1px solid var(--line); }
.ag-col:first-child { border-left: none; }
.ag-col.is-today { background: color-mix(in srgb, var(--brand) 4%, transparent); }
.ag-cell { position: absolute; left: 0; right: 0; border-bottom: 1px solid var(--line); }
.ag-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--signal); z-index: 4; }
.ag-now::before { content: ''; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.ag-ev { position: absolute; left: 3px; right: 3px; border: 1px solid var(--line); border-left: 3px solid; border-radius: 7px; padding: 4px 7px; text-align: left; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; gap: 1px; z-index: 3; }
.ag-ev:hover { box-shadow: var(--shadow); z-index: 5; }
.ag-ev { cursor: grab; }
.ag-ev:active { cursor: grabbing; }
.ag-ev.is-drag { opacity: .9; box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.25)); z-index: 9; outline: 2px solid var(--brand); }
.ag-ev__rz { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.ag-ev__rz:hover { background: color-mix(in srgb, var(--brand) 30%, transparent); border-radius: 0 0 6px 6px; }
.ag-ev__t { font-size: 10px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.ag-ev__ti { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-ev__meta { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 1px; }
.ag-tag { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-3); background: var(--bg-2); padding: 1px 5px; border-radius: 5px; }
.ag-tag--dig { color: var(--brand); background: var(--brand-soft); }
.ag-tag--ai { color: var(--navy); background: color-mix(in srgb, var(--navy) 12%, transparent); }
.ag-rec { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 9px; font-weight: 700; color: var(--signal); }
.ag-rec i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); animation: agblink 1.4s infinite; }
@keyframes agblink { 50% { opacity: .3; } }
.ag-ava { border-radius: 50%; color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ag-side { display: flex; flex-direction: column; gap: var(--gap); }
.ag-legend { display: flex; flex-direction: column; gap: 9px; }
.ag-legend__i { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-2); }
.ag-legend__i i { width: 11px; height: 11px; border-radius: 3px; }
.ag-hint { display: flex; gap: 7px; align-items: flex-start; font-size: 11.5px; color: var(--text-3); margin: 14px 0 0; line-height: 1.5; }
.ag-hint svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.ag-dp { display: flex; flex-direction: column; }
.ag-dp__row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); background: none; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; text-align: left; width: 100%; }
.ag-dp__row:first-child { border-top: none; }
.ag-dp__row:hover { background: var(--bg-2); }
.ag-dp__t { font-size: 12px; font-weight: 700; color: var(--text-2); width: 40px; flex-shrink: 0; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; }
.ag-dp__t i { font-style: normal; font-size: 10px; font-weight: 500; color: var(--text-3); }
.ag-dp__line { width: 3px; align-self: stretch; border-radius: 3px; flex-shrink: 0; }
.ag-dp__main { flex: 1; min-width: 0; }
.ag-dp__main b { display: block; font-size: 12.5px; font-weight: 600; }
.ag-dp__main span { font-size: 11px; color: var(--text-3); }
.ag-dp__avs { display: flex; flex-shrink: 0; }
.ag-dp__avs .ag-ava { margin-left: -6px; border: 1.5px solid var(--surface); }
.ag-dp__empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 0; color: var(--text-3); font-size: 13px; }
.ag-dp__empty svg { color: var(--text-3); }
.ag-dp__empty b { color: var(--text-2); }
.ag-mini, .rel-mini.ag-mini { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--brand); background: var(--brand); color: #fff; cursor: pointer; }
/* agenda-detail */
.ag-det { width: min(540px, 96vw); }
.ag-det__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.ag-det__when { font-size: 12.5px; color: var(--text-2); margin-top: 4px; }
.ag-det__row { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text); padding: 4px 0 2px; }
.ag-det__row svg { color: var(--brand); flex-shrink: 0; }
.ag-link { color: var(--brand); cursor: pointer; text-decoration: underline; }
.ag-det__sec { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 16px 0 9px; }
.ag-det__parts { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-part { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); }
.ag-rec-panel { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ag-recbtn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 12.5px; font-weight: 600; padding: 9px 15px; border-radius: 9px; border: 1px solid var(--signal); background: var(--surface); color: var(--signal); cursor: pointer; }
.ag-recbtn__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); }
.ag-recbtn.is-on { background: var(--signal); color: #fff; }
.ag-recbtn.is-on .ag-recbtn__dot { background: #fff; animation: agblink 1.4s infinite; }
.ag-ai { flex: 1; min-width: 160px; }
.ag-rec-live { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 12px; border-radius: 9px; background: color-mix(in srgb, var(--signal) 9%, transparent); color: var(--signal); font-size: 12px; font-weight: 600; }
.ag-rec-live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); animation: agblink 1.4s infinite; }
/* collega's-panel */
.ag-people__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ag-people__btns { display: flex; gap: 6px; flex-shrink: 0; }
.ag-mini2 { font: inherit; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); cursor: pointer; }
.ag-mini2:hover { border-color: var(--brand); color: var(--brand); }
.ag-people { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.ag-people__uitleg { margin: 8px 0 4px; padding: 8px 10px; border-radius: 8px; background: var(--bg-2); color: var(--text-2); font-size: 12px; line-height: 1.45; }
.ag-person { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 4px; border: none; background: none; cursor: pointer; text-align: left; border-radius: 8px; }
.ag-person:hover { background: var(--bg-2); }
.ag-person__dot { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.ag-person:not(.is-on) { opacity: .5; }
.ag-person__nm { font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.ag-person__nm em { font-style: normal; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); background: var(--brand-soft); padding: 1px 5px; border-radius: 5px; }
.ag-colorby { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ag-colorby > span { font-size: 12px; color: var(--text-3); font-weight: 600; }
/* maandweergave */
.ag-layout--month { grid-template-columns: 1fr 300px; }
.ag-month { padding: 0; }
.ag-mhead { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line); }
.ag-mhead span { padding: 9px 0; text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.ag-mgrid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(104px, 1fr); }
.ag-mcell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 5px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ag-mcell:nth-child(7n) { border-right: none; }
.ag-mcell.is-out { background: var(--bg-2); }
.ag-mcell.is-out .ag-mnum { color: var(--text-3); opacity: .6; }
.ag-mnum { align-self: flex-start; width: 26px; height: 26px; border-radius: 50%; border: none; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.ag-mnum:hover { background: var(--bg-2); }
.ag-mcell.is-today .ag-mnum { background: var(--brand); color: #fff; }
.ag-mchips { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ag-mchip { display: flex; gap: 5px; align-items: baseline; font: inherit; font-size: 10.5px; color: var(--text); padding: 2px 6px; border: none; border-left: 3px solid; border-radius: 4px; cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-mchip b { font-size: 9.5px; color: var(--text-2); flex-shrink: 0; }
.ag-mmore { font: inherit; font-size: 10px; font-weight: 600; color: var(--text-3); background: none; border: none; cursor: pointer; text-align: left; padding: 1px 6px; }
.ag-mmore:hover { color: var(--brand); }
@media (max-width: 1080px) { .ag-layout--month { grid-template-columns: 1fr; } }
/* vrije ruimte */
.ag-vr__none { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--amber-tekst); padding: 6px 0; }
.ag-vr__list { display: flex; flex-direction: column; gap: 8px; }
.ag-vr__slot { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); cursor: pointer; text-align: left; }
.ag-vr__slot:hover { border-color: var(--brand); background: var(--brand-soft); }
.ag-vr__time { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ag-vr__time i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--text-3); }
.ag-vr__free { font-size: 12px; color: var(--pos-tekst); font-weight: 600; }
.ag-vr__go { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--brand); }
.ag-col { cursor: cell; }
.ag-create { position: absolute; left: 4px; right: 4px; border: 1.5px dashed var(--brand); background: color-mix(in srgb, var(--brand) 16%, var(--surface)); border-radius: 7px; padding: 4px 8px; z-index: 6; pointer-events: none; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.ag-create b { font-size: 11px; font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }
.ag-create span { font-size: 10.5px; color: var(--text-2); }
/* ---- search ---- */
.ag-search { position: relative; display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); min-width: 200px; }
.ag-search svg { color: var(--text-3); flex-shrink: 0; }
.ag-search input { border: none; background: none; font: inherit; font-size: 12.5px; color: var(--text); outline: none; width: 100%; }
.ag-search__x { border: none; background: none; color: var(--text-3); cursor: pointer; padding: 0; display: flex; }
.ag-search__res { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 280px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 11px; box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.3)); z-index: 60; overflow: hidden; max-height: 360px; overflow-y: auto; }
.ag-search__none { padding: 14px; font-size: 12.5px; color: var(--text-3); }
.ag-search__row { display: flex; align-items: stretch; gap: 10px; width: 100%; padding: 9px 12px; border: none; background: none; cursor: pointer; text-align: left; border-bottom: 1px solid var(--line); }
.ag-search__row:hover { background: var(--bg-2); }
.ag-search__bar { width: 3px; border-radius: 2px; flex-shrink: 0; }
.ag-search__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-search__main b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-search__main span { font-size: 11px; color: var(--text-3); }
/* ---- all-day band ---- */
.ag-alldaybar { display: grid; grid-template-columns: 56px 1fr; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.ag-alldaybar__gut { display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.ag-alldaybar__cells { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; }
.ag-adcell { display: flex; flex-direction: column; gap: 3px; padding: 5px; border-left: 1px solid var(--line); min-width: 0; }
.ag-adcell:first-child { border-left: none; }
.ag-ad { display: flex; align-items: center; gap: 5px; font: inherit; font-size: 10.5px; font-weight: 600; padding: 3px 7px; border: none; border-left: 3px solid; border-radius: 5px; background: var(--surface); color: var(--text); cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-ad--taak { cursor: pointer; border-left-color: var(--amber); color: var(--text-2); }
.ag-ad--taak:hover { color: var(--text); }
.ag-ad--ev { cursor: pointer; }
.ag-ad--verlof .ag-ava { flex-shrink: 0; }
/* ---- mini-maand navigator ---- */
.ag-cal { width: 100%; box-sizing: border-box; }
.ag-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ag-cal__head span { font-size: 13px; font-weight: 600; }
.ag-cal__nav { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ag-cal__nav:hover { border-color: var(--brand); color: var(--brand); }
.ag-cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 2px; }
.ag-cal__dow span { text-align: center; font-size: 9.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; }
.ag-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.ag-cal__d { position: relative; aspect-ratio: 1; border: none; background: none; font: inherit; font-size: 11.5px; color: var(--text); cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ag-cal__d:hover { background: var(--bg-2); }
.ag-cal__d.is-out { color: var(--text-3); opacity: .45; }
.ag-cal__d.is-today { color: var(--brand); font-weight: 700; }
.ag-cal__d.is-sel { background: var(--brand); color: #fff; font-weight: 600; }
.ag-cal__dot { position: absolute; bottom: 3px; width: 3px; height: 3px; border-radius: 50%; background: var(--brand); }
.ag-cal__d.is-sel .ag-cal__dot { background: #fff; }
/* ---- overlays toggles ---- */
.ag-overlays { display: flex; flex-direction: column; gap: 4px; }
.ag-ovrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 6px; border: none; background: none; cursor: pointer; text-align: left; border-radius: 8px; }
.ag-ovrow:hover { background: var(--bg-2); }
.ag-ovsw { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; opacity: .35; }
.ag-ovrow.is-on .ag-ovsw { opacity: 1; }
.ag-ovlbl { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.ag-ovlbl b { font-size: 12.5px; font-weight: 600; }
.ag-ovlbl i { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.ag-ovtog { width: 34px; height: 19px; border-radius: 10px; background: var(--line-strong); position: relative; transition: background .15s; flex-shrink: 0; }
.ag-ovtog::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .15s; }
.ag-ovtog.is-on { background: var(--brand); }
.ag-ovtog.is-on::after { transform: translateX(15px); }
/* ---- maand-overlay tags ---- */
.ag-mtag { display: flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 600; color: var(--text-2); padding: 1px 6px; border-left: 3px solid var(--steel); border-radius: 4px; background: var(--bg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-mtag--taak { border-left-color: var(--amber); }
/* ---- lijst/schedule ---- */
.ag-lijst { padding: 4px 0; }
.ag-lrow { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.ag-lrow:last-child { border-bottom: none; }
.ag-ldate { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.ag-ldate__n { font-size: 22px; font-weight: 300; line-height: 1; }
.ag-ldate__d { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--text-3); margin-top: 3px; }
.ag-ldate__m { font-size: 10.5px; color: var(--text-3); }
.ag-ldate.is-today .ag-ldate__n, .ag-ldate.is-today .ag-ldate__d { color: var(--brand); }
.ag-litems { display: flex; flex-direction: column; gap: 6px; }
.ag-litem { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); cursor: pointer; text-align: left; }
.ag-litem:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.ag-litem__bar { width: 3px; align-self: stretch; border-radius: 2px; flex-shrink: 0; }
.ag-litem__t { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-2); min-width: 92px; flex-shrink: 0; }
.ag-litem__main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.ag-litem__main b { font-size: 13px; font-weight: 600; }
.ag-litem__main span { font-size: 11.5px; color: var(--text-3); }
.ag-litem__avs { display: flex; gap: -4px; }
.ag-litem__avs .ag-ava { margin-left: -5px; border: 1.5px solid var(--surface); }
/* ---- conflict / kleur / rsvp ---- */
.ag-conflict { display: flex; gap: 10px; padding: 11px 13px; border-radius: 9px; background: color-mix(in srgb, var(--amber) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--line)); margin-top: 4px; }
.ag-conflict svg { color: var(--amber); flex-shrink: 0; margin-top: 1px; }
.ag-conflict b { font-size: 12.5px; display: block; margin-bottom: 3px; }
.ag-conflict span { display: block; font-size: 11.5px; color: var(--text-2); }
.ag-kleurrow { display: flex; gap: 8px; flex-wrap: wrap; }
.ag-kleur { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--line-strong); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; }
.ag-kleur.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }
.ag-kleur__auto { font-size: 9px; font-weight: 700; color: var(--text-3); }
.ag-det__rsvp { display: flex; flex-direction: column; gap: 6px; }
.ag-rsvprow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.ag-you { font-style: normal; font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); padding: 1px 5px; border-radius: 5px; margin-left: 6px; }
.ag-rsvpbtns { display: flex; flex-wrap: wrap; gap: 5px; }
.ag-rsvpb { font: inherit; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); cursor: pointer; }
.ag-rsvpb.is-on { background: var(--bg-2); }
.ag-rsvpst { font-size: 11.5px; font-weight: 600; }
/* afspraak-modal */
.bib-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.ag-typeseg { display: flex; gap: 8px; margin-bottom: 12px; }
.ag-typebtn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-size: 12.5px; font-weight: 600; padding: 10px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); cursor: pointer; }
.ag-typebtn.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.ag-deelgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; }
.ag-deel { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12px; font-weight: 500; padding: 6px 9px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); cursor: pointer; }
.ag-deel.is-on { border-color: var(--brand); background: var(--brand-soft); }
.ag-deel.is-on svg { color: var(--brand); margin-left: auto; }
.tb__live { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: rgba(255,255,255,.6); white-space: nowrap; }
.tb__live i { width: 7px; height: 7px; border-radius: 50%; background: #4ED7A8; box-shadow: 0 0 0 3px rgba(78,215,168,.2); animation: pulse 2s infinite; }
.tb__live.is-storing i { background: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); animation: none; }
.tb__live.is-uit i { background: var(--amber); box-shadow: none; animation: none; }
.tb__avatar { width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.16); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }

/* ---- meldingencentrum (bel + paneel) --------------------- */
.meld { position: relative; display: flex; }
.meld-bel { position: relative; width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.78); display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.meld-bel:hover, .meld-bel.is-open { background: rgba(255,255,255,.20); color: #fff; }
.meld-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--signal, #C0392B); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; border: 2px solid var(--navy, #122738); box-sizing: content-box; }
.meld-panel { position: absolute; top: calc(100% + 12px); right: 0; width: min(400px, calc(100vw - 28px)); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow-lg); z-index: 260; overflow: hidden; display: flex; flex-direction: column; animation: meldIn .16s cubic-bezier(.2,.7,.2,1); }
@keyframes meldIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.meld-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.meld-panel__head h3 { font-size: 15px; font-weight: 600; color: var(--text); margin: 2px 0 0; }
.meld-allebtn { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--brand); padding: 6px 10px; border-radius: 8px; background: var(--brand-soft); border: 1px solid transparent; white-space: nowrap; }
.meld-allebtn:hover:not(:disabled) { border-color: color-mix(in srgb,var(--brand) 30%,transparent); }
.meld-allebtn:disabled { opacity: .4; cursor: default; }
.meld-tabs { display: flex; gap: 4px; padding: 10px 14px 0; }
.meld-tab { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--text-3); padding: 8px 13px; border-radius: 9px 9px 0 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.meld-tab em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--bg-2); color: var(--text-2); }
.meld-tab.is-on { color: var(--text); border-bottom-color: var(--brand); }
.meld-tab.is-on em { background: var(--brand-soft); color: var(--brand); }
.meld-list { max-height: min(60vh, 520px); overflow-y: auto; padding: 6px; border-top: 1px solid var(--line); }
.meld-empty { font-size: 13px; color: var(--text-3); padding: 26px 14px; text-align: center; }
.meld-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 12px 11px; border-radius: 11px; position: relative; transition: background .12s; }
.meld-row:hover { background: var(--bg-2); }
.meld-row.is-unread { background: color-mix(in srgb,var(--brand) 5%,transparent); }
.meld-row.is-unread:hover { background: color-mix(in srgb,var(--brand) 9%,transparent); }
.meld-row__ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.meld-row__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.meld-row__top { display: flex; align-items: center; gap: 8px; }
.meld-row__top b { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.meld-actie { flex-shrink: 0; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--amber-tekst); background: color-mix(in srgb,var(--amber) 14%,transparent); padding: 2px 6px; border-radius: 5px; }
.meld-row__sub { font-size: 12px; color: var(--text-2); line-height: 1.45; }
.meld-row__meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); margin-top: 1px; flex-wrap: wrap; }
.meld-sep { opacity: .5; }
.meld-row__tijd { color: var(--text-3); }
.meld-dot { position: absolute; top: 15px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }
.meld-panel__foot { padding: 10px 14px; border-top: 1px solid var(--line); background: var(--bg-2); }
.meld-foot-link { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--text-2); padding: 4px 2px; }
.meld-foot-link:hover { color: var(--brand); }
.meld-panel__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ---- meldingen-inbox (volledig notificatiecentrum) ------- */
.mi-screen { padding-top: 0; }
.mi { display: grid; grid-template-columns: 240px 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .mi { grid-template-columns: 1fr; } }
.mi__side { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 8px; }
.mi-fbtn { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; font-size: 13px; color: var(--text-2); text-align: left; transition: all .14s; }
.mi-fbtn > svg { color: var(--text-3); flex-shrink: 0; }
.mi-fbtn span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-fbtn .mi-fdot { flex: 0 0 auto; }
.mi-fbtn em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--text-3); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.mi-fbtn:hover { background: var(--bg-2); color: var(--text); }
.mi-fbtn.is-on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.mi-fbtn.is-on > svg { color: var(--brand); }
.mi-fbtn.is-on em { background: var(--surface); color: var(--brand); border-color: color-mix(in srgb,var(--brand) 26%,transparent); }
.mi-fdot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.mi-side__lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); padding: 14px 12px 6px; }

.mi__main { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.mi-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.mi-search { flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0; }
.mi-search > svg { color: var(--text-3); flex-shrink: 0; }
.mi-search input { flex: 1; border: none; background: none; color: var(--text); font-size: 13px; outline: none; min-width: 0; }
.mi-search button { color: var(--text-3); display: flex; }
.mi-allebtn { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 13px; flex-shrink: 0; transition: all .14s; }
.mi-allebtn:hover:not(:disabled) { color: var(--text); border-color: var(--line-strong); }
.mi-allebtn:disabled { opacity: .5; cursor: default; }
.mi-allebtn svg { color: var(--text-3); }

.mi-list { display: flex; flex-direction: column; }
.mi-row { display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid var(--line); position: relative; transition: background .12s; }
.mi-row:last-child { border-bottom: none; }
.mi-row:hover { background: var(--bg-2); }
.mi-row.is-unread { background: color-mix(in srgb,var(--brand) 5%,transparent); }
.mi-row__open { flex: 1; display: flex; align-items: flex-start; gap: 13px; padding: 14px 16px; text-align: left; min-width: 0; }
.mi-row__ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mi-row__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mi-row__top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mi-row__top b { font-size: 13.5px; font-weight: 600; color: var(--text); }
.mi-row.is-unread .mi-row__top b { font-weight: 700; }
.mi-row__sub { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.mi-row__meta { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-3); margin-top: 2px; flex-wrap: wrap; }
.mi-row__tijd { color: var(--text-3); }
.mi-row__acts { display: flex; align-items: center; gap: 4px; padding: 0 14px 0 6px; flex-shrink: 0; }
.mi-iconbtn { display: flex; padding: 8px; border-radius: 8px; color: var(--text-3); }
.mi-iconbtn:hover { color: var(--text); background: var(--surface); }
.mi-iconbtn--go:hover { color: var(--brand); background: var(--brand-soft); }
.mi-iconbtn--done:hover { color: var(--pos); background: color-mix(in srgb,var(--pos) 12%,transparent); }
.mi-row__dot { position: absolute; left: 5px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
/* E47 — snooze / afgehandeld */
.mi-row.is-done { opacity: .62; }
.mi-row.is-done .mi-row__ic { color: var(--pos) !important; background: color-mix(in srgb,var(--pos) 13%,transparent) !important; }
.mi-row.is-snoozed .mi-row__ic { filter: saturate(.5); }
.meld-afg { flex-shrink: 0; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pos-tekst); background: color-mix(in srgb,var(--pos) 13%,transparent); padding: 1px 7px; border-radius: 999px; }
.meld-snz { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; font-size: 10px; font-weight: 600; color: var(--steel); background: color-mix(in srgb,var(--steel) 12%,transparent); padding: 1px 7px 1px 5px; border-radius: 999px; }
.mi-snoozewrap { position: relative; }
.mi-snoozemenu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 148px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 5px; }
.mi-snoozemenu__h { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); padding: 6px 9px 4px; }
.mi-snoozemenu button { display: block; width: 100%; text-align: left; padding: 8px 9px; border-radius: 7px; font-size: 13px; color: var(--text); background: none; border: none; cursor: pointer; }
.mi-snoozemenu button:hover { background: var(--brand-soft); color: var(--brand); }
/* bel quick-actions */
.meld-row { position: relative; }
.meld-row__quick { position: absolute; right: 22px; top: 10px; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.meld-row:hover .meld-row__quick { opacity: 1; }
.meld-qbtn { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line); color: var(--text-3); cursor: pointer; }
.meld-qbtn:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }

/* ---- weekupdate-kaart (dashboard) ------------------------ */
.week-stamp { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.week-list { display: flex; flex-direction: column; }
.week-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.week-row:last-child { border-bottom: 0; }
.week-row__ic { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: var(--bg-2); color: var(--text-3); display: flex; align-items: center; justify-content: center; }
.week-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.week-row__txt { font-size: 12.5px; font-weight: 500; color: var(--text); }
.week-row__delta { font-size: 11px; font-weight: 500; line-height: 1.3; }
.week-row__val { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -.01em; white-space: nowrap; }
.week-cta { display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 14px; padding: 11px 14px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--text); transition: border-color .15s, background .15s; }
.week-cta:hover { border-color: color-mix(in srgb,var(--brand) 32%,transparent); background: var(--brand-soft); color: var(--brand); }
.week-team { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.week-team__h { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.week-team__row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.week-team__av { width: 28px; height: 28px; border-radius: 8px; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.week-team__main { flex: 1; min-width: 0; }
.week-team__main b { font-size: 12.5px; font-weight: 600; display: block; line-height: 1.2; }
.week-team__main span { font-size: 11px; color: var(--text-3); }
.week-team__tag { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.week-team__tag--bday { background: color-mix(in srgb,var(--amber) 15%,transparent); color: var(--amber-tekst); }

/* ---- meldingen-voorkeuren (Instellingen) ----------------- */
.set-meldlayout { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(280px,1fr); gap: var(--gap); align-items: start; }
.set-meldside { display: flex; flex-direction: column; }
.meldpref-head { display: grid; grid-template-columns: 1fr 70px 70px; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.meldpref-head span:not(:first-child) { text-align: center; }
.meldpref-list { display: flex; flex-direction: column; }
.meldpref-row { display: grid; grid-template-columns: 1fr 70px 70px; gap: 12px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--line); }
.meldpref-row:first-child { border-top: 0; }
.meldpref-row > .set-toggle { justify-self: center; }
.meldpref-cat { display: flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 500; color: var(--text); }
.meldpref-ic { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.meldpref-scope { display: flex; flex-direction: column; gap: 9px; }
.meldpref-scopebtn { display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; transition: border-color .15s, background .15s; }
.meldpref-scopebtn:hover { border-color: var(--line-strong); }
.meldpref-scopebtn.is-on { border-color: var(--brand); background: var(--brand-soft); }
.meldpref-radio { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.meldpref-scopebtn.is-on .meldpref-radio { border-color: var(--brand); }
.meldpref-radio i { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); transform: scale(0); transition: transform .15s; }
.meldpref-scopebtn.is-on .meldpref-radio i { transform: scale(1); }
.meldpref-scopebtn b { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.meldpref-scopebtn em { font-style: normal; font-size: 11.5px; color: var(--text-3); }
@media (max-width: 980px) { .set-meldlayout { grid-template-columns: 1fr; } }

/* ============================================================
   Werkbord (taken) — Monday-achtig
   ============================================================ */
.tk-av { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex-shrink: 0; }
.tk-av--none { background: transparent; border: 1.5px dashed var(--line-strong); color: var(--text-3); }
.tk-assignbtn { display: inline-flex; border-radius: 50%; }
.tk-assignbtn.is-open { box-shadow: 0 0 0 2px var(--brand); }

.tk-pop { position: relative; display: inline-flex; }
.tk-pop__menu { position: absolute; top: calc(100% + 6px); z-index: 140; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; max-height: 320px; overflow-y: auto; }
.tk-pop__lbl { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 5px 9px; }
.tk-pop__item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 9px; border-radius: 8px; font-size: 12.5px; color: var(--text-2); }
.tk-pop__item:hover { background: var(--bg-2); color: var(--text); }
.tk-pop__item.is-on { background: var(--brand-soft); }
.tk-pop__who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tk-pop__who b { font-size: 12.5px; font-weight: 500; color: var(--text); }
.tk-pop__who i { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.tk-pop__item--none { color: var(--text-3); }
.tk-statdot { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }

.tk-statpill { display: inline-flex; align-items: center; gap: 5px; justify-content: center; font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 7px; white-space: nowrap; }
.tk-statpill--block { width: 100%; padding: 9px; font-size: 12.5px; }
.tk-dl { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; padding: 4px 9px; border-radius: 7px; white-space: nowrap; color: var(--text-2); background: var(--bg-2); border: 1px solid transparent; }
.tk-dl--none { color: var(--text-3); background: transparent; border-color: var(--line); }
.tk-dl--normaal { color: var(--text-2); }
.tk-dl--soon { color: var(--amber-tekst); background: color-mix(in srgb,var(--amber) 13%,transparent); }
.tk-dl--vandaag { color: #fff; background: var(--amber); }
.tk-dl--over { color: #fff; background: var(--neg); }
.tk-dlpick { padding: 4px; }
.tk-dlpick input { width: 100%; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-2); color: var(--text); font-size: 12.5px; }
.tk-dlclear { margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--neg); padding: 4px; }
.tk-prio { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--text-2); }
.tk-priobar { width: 3px; height: 13px; border-radius: 2px; display: inline-block; flex-shrink: 0; }

.tk-group { margin-bottom: 18px; }
.tk-group__head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.tk-group__chev { width: 22px; height: 22px; border-radius: 6px; color: var(--text-3); display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.tk-group__chev.is-open { transform: rotate(90deg); }
.tk-group__chev:hover { background: var(--bg-2); }
.tk-group__head h4 { font-size: 14.5px; font-weight: 600; color: var(--text); }
.tk-group__count { font-size: 11.5px; color: var(--text-3); }

.tk-table { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: visible; box-shadow: var(--shadow); }
.tk-head, .tk-row { display: grid; grid-template-columns: minmax(0,1fr) 138px 92px 122px 96px; gap: 12px; align-items: center; padding: 10px 16px; }
.tk-head { border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.tk-c--cen { justify-self: center; }
.tk-row { border-top: 1px solid var(--line); cursor: pointer; transition: background .12s; }
.tk-table .tk-row:first-of-type { border-top: 0; }
.tk-row:hover { background: var(--bg-2); }
.tk-row__name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tk-exp { width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--text-3); flex-shrink: 0; transition: transform .15s, background .12s; }
.tk-exp.is-open { transform: rotate(90deg); }
.tk-exp:hover:not(:disabled) { background: color-mix(in srgb,var(--text-3) 14%,transparent); }
.tk-exp:disabled { cursor: default; }
.tk-exp__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }
.tk-row__txt { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tk-row__txt b { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-cmtcount { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--text-3); flex-shrink: 0; }
.tk-subprog { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--text-3); flex-shrink: 0; background: var(--bg-2); padding: 2px 7px; border-radius: 999px; }
.tk-c { min-width: 0; }

.tk-subs { padding: 6px 16px 12px 47px; background: var(--bg-2); border-top: 1px solid var(--line); }
.tk-sub { display: flex; align-items: center; gap: 11px; padding: 6px 0; }
.tk-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-strong); background: var(--surface); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; transition: all .12s; }
.tk-check.is-done { background: var(--pos); border-color: var(--pos); }
.tk-check--ghost { border-style: dashed; background: transparent; }
.tk-sub__txt { flex: 1; font-size: 12.5px; color: var(--text); min-width: 0; }
.tk-sub__txt.is-done { text-decoration: line-through; color: var(--text-3); }
.tk-subadd { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); padding: 6px 0; }
.tk-subadd:hover { color: var(--brand); }

.tk-addrow { display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); }
.tk-addrow input { flex: 1; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-2); color: var(--text); font-size: 13px; }
.tk-addrow input:focus { outline: none; border-color: var(--brand); }
.tk-add { display: flex; align-items: center; gap: 7px; width: 100%; padding: 11px 16px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 500; color: var(--text-3); }
.tk-add:hover { color: var(--brand); background: var(--bg-2); }

.tk-team { display: inline-flex; align-items: center; margin-right: 4px; }
.tk-team .tk-av { margin-left: -8px; border: 2px solid var(--bg); }
.tk-team .tk-av:first-child { margin-left: 0; }
.tk-team__more { margin-left: -8px; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--bg); color: var(--text-2); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* detail-modal (gecentreerd) */
.tk-detail { position: relative; margin: auto; height: min(84vh, 800px); max-height: 88vh; width: min(840px, 94vw); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: tkSlide .2s cubic-bezier(.2,.7,.2,1); }
@keyframes tkSlide { from { transform: translateY(12px) scale(.98); opacity: .3; } to { transform: none; opacity: 1; } }
.cmd__overlay--center { align-items: center; padding-top: 0; }
.tk-detail__head { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.tk-detail__crumb { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-3); }
.tk-detail__x { width: 30px; height: 30px; border-radius: 8px; color: var(--text-3); display: flex; align-items: center; justify-content: center; }
.tk-detail__x:hover { background: var(--bg-2); color: var(--text); }
.tk-detail__body { flex: 1; overflow-y: auto; padding: 20px; }
.tk-detail__title { width: 100%; font-size: 19px; font-weight: 600; color: var(--text); border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; margin: -6px -8px 0; background: transparent; font-family: inherit; }
.tk-detail__title:hover { background: var(--bg-2); }
.tk-detail__title:focus { background: var(--surface); border-color: var(--brand); outline: none; }
.tk-detail__meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 18px; margin: 16px 0 4px; padding: 16px; background: var(--bg-2); border-radius: 12px; }
.tk-meta { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.tk-meta > span { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.tk-detail__sec { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 22px 0 12px; }
.tk-detail__sec em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--bg-2); color: var(--text-2); letter-spacing: 0; }
.tk-detail__oms { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; background: var(--bg-2); color: var(--text); font-size: 13px; line-height: 1.55; resize: vertical; font-family: inherit; }
.tk-detail__oms:focus { outline: none; border-color: var(--brand); }
.tk-detail__subs { display: flex; flex-direction: column; gap: 1px; }
.tk-dsub { display: flex; align-items: center; gap: 11px; padding: 6px 8px; border-radius: 8px; }
.tk-dsub:hover { background: var(--bg-2); }
.tk-dsub__txt { flex: 1; border: none; background: transparent; font-size: 13px; color: var(--text); padding: 3px 0; font-family: inherit; min-width: 0; }
.tk-dsub__txt:focus { outline: none; border-bottom: 1px solid var(--brand); }
.tk-dsub__txt.is-done { text-decoration: line-through; color: var(--text-3); }
.tk-dsub__del { width: 24px; height: 24px; border-radius: 6px; color: var(--text-3); display: flex; align-items: center; justify-content: center; opacity: 0; flex-shrink: 0; }
.tk-dsub:hover .tk-dsub__del { opacity: 1; }
.tk-dsub__del:hover { background: var(--signal-soft); color: var(--neg); }
.tk-dsub--add input { flex: 1; border: none; background: transparent; font-size: 13px; color: var(--text); padding: 3px 0; font-family: inherit; }
.tk-dsub--add input:focus { outline: none; }
.tk-dsub__addbtn { width: 26px; height: 26px; border-radius: 7px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tk-dsub__addbtn:disabled { opacity: .4; }

.tk-thread { display: flex; flex-direction: column; gap: 14px; }
.tk-msg { display: flex; gap: 10px; }
.tk-msg__b { flex: 1; min-width: 0; }
.tk-msg__top { display: flex; align-items: baseline; gap: 8px; }
.tk-msg__top b { font-size: 12.5px; font-weight: 600; color: var(--text); }
.tk-msg__top span { font-size: 11px; color: var(--text-3); }
.tk-msg__b p { font-size: 13px; color: var(--text-2); line-height: 1.5; margin: 4px 0 0; background: var(--bg-2); padding: 9px 12px; border-radius: 10px; border-top-left-radius: 3px; }
.tk-compose { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); position: sticky; bottom: -20px; background: var(--surface); padding-bottom: 4px; }
.tk-compose input { flex: 1; border: 1px solid var(--line-strong); border-radius: 999px; padding: 10px 15px; background: var(--bg-2); color: var(--text); font-size: 13px; }
.tk-compose input:focus { outline: none; border-color: var(--brand); }
.tk-compose__send { width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tk-compose__send:disabled { opacity: .4; }

.tk-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--navy); color: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 13px; font-weight: 500; animation: meldIn .2s; }
.tk-toast svg { color: color-mix(in srgb, var(--brand) 70%, white); }

/* dashboard — Mijn taken */
.mt-list { display: flex; flex-direction: column; gap: 2px; }
.mt-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 10px 8px; border-radius: 9px; transition: background .12s; }
.mt-row:hover { background: var(--bg-2); }
.mt-row__st { width: 4px; height: 32px; border-radius: 3px; flex-shrink: 0; }
.mt-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mt-row__main b { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-row__meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-3); }
.mt-row__sub { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--steel); background: color-mix(in srgb,var(--steel) 14%,transparent); padding: 1px 5px; border-radius: 4px; }
.mt-more { font-size: 11.5px; color: var(--text-3); text-align: center; padding-top: 12px; }

/* ===== taakmanagement v2: labels, tabs, filter, kanban, lijst, kalender ===== */
.tk-labels { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.tk-label { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.tk-label--more { color: var(--text-3); background: var(--bg-2); }
.tk-addlabel { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-3); padding: 4px 9px; border: 1px dashed var(--line-strong); border-radius: 7px; }
.tk-addlabel:hover { color: var(--brand); border-color: var(--brand); }
.tk-mention { color: var(--brand); font-weight: 600; background: var(--brand-soft); padding: 0 3px; border-radius: 4px; }
.tk-detail__labels { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 13px 0 2px; }

.tk-tabs { display: flex; gap: 4px; margin: 24px 0 14px; border-bottom: 1px solid var(--line); }
.tk-tab { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--text-3); padding: 8px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tk-tab em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--bg-2); color: var(--text-2); }
.tk-tab.is-on { color: var(--text); border-bottom-color: var(--brand); }
.tk-tab.is-on em { background: var(--brand-soft); color: var(--brand); }
.tk-activity { display: flex; flex-direction: column; gap: 13px; }
.tk-actrow { display: flex; gap: 10px; align-items: flex-start; }
.tk-actrow__b { flex: 1; min-width: 0; }
.tk-actrow__b span { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.tk-actrow__b b { color: var(--text); font-weight: 600; }
.tk-actrow__b i { display: block; font-style: normal; font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.tk-actmeta { font-size: 11.5px; color: var(--text-3); padding-top: 10px; border-top: 1px solid var(--line); margin-top: 4px; }
.tk-mentionrow { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; }
.tk-mentionbtn { font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); padding: 3px 8px; border-radius: 6px; }
.tk-mentionbtn:hover { color: var(--brand); border-color: var(--brand); }

/* toolbar */
.tk-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: var(--gap); flex-wrap: wrap; }
.tk-search { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0 11px; height: 38px; flex: 0 1 280px; min-width: 200px; }
.tk-search svg { color: var(--text-3); flex-shrink: 0; }
.tk-search input { border: none; background: none; color: var(--text); font-size: 13px; flex: 1; outline: none; min-width: 0; }
.tk-search button { color: var(--text-3); display: flex; }
.tk-minebtn, .tk-filterbtn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; font-weight: 500; color: var(--text-2); background: var(--surface); white-space: nowrap; }
.tk-minebtn.is-on, .tk-filterbtn.is-on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.tk-filterbtn em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--brand); color: #fff; }
.tk-filterpanel { display: flex; flex-direction: column; gap: 2px; max-height: 440px; overflow-y: auto; }
.tk-fwrap { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 4px 8px; }
.tk-fchip { font-size: 11.5px; font-weight: 500; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); padding: 5px 10px; border-radius: 999px; }
.tk-fchip.is-on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.tk-favs { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 4px 8px; }
.tk-favbtn { opacity: .45; border-radius: 50%; transition: opacity .12s; }
.tk-favbtn.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--brand); }
.tk-fclear { font-size: 11.5px; font-weight: 600; color: var(--neg); padding: 8px 6px 4px; text-align: left; border-top: 1px solid var(--line); margin-top: 4px; }
.tk-spacer { flex: 1; }
.tk-viewswitch { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.tk-vbtn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-3); padding: 7px 12px; border-radius: 8px; }
.tk-vbtn:hover { color: var(--text); }
.tk-vbtn.is-on { background: var(--brand); color: #fff; }
.tk-viewport { margin-top: 2px; }

/* taakkaart (kanban/kalender) */
.tk-card { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; box-shadow: var(--shadow); cursor: pointer; transition: border-color .12s; }
.tk-card:hover { border-color: var(--line-strong); }
.tk-card:active { cursor: grabbing; }
.tk-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 16px; }
.tk-card__prio { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.tk-card__title { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.35; }
.tk-card__proj { font-size: 11px; color: var(--text-3); display: flex; align-items: center; gap: 5px; }
.tk-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.tk-card__right { display: flex; align-items: center; gap: 8px; }

/* kanban */
.tk-kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.tk-kcol { flex: 1 0 250px; min-width: 240px; max-width: 340px; background: var(--bg-2); border-radius: 14px; padding: 11px; display: flex; flex-direction: column; gap: 10px; transition: outline-color .12s; outline: 2px dashed transparent; outline-offset: -2px; }
.tk-kcol.is-over { outline-color: var(--brand); }
.tk-kcol__head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text); padding: 2px 4px; }
.tk-kcol__head em { font-style: normal; margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-3); background: var(--surface); padding: 1px 8px; border-radius: 999px; }
.tk-kcol__body { display: flex; flex-direction: column; gap: 9px; min-height: 44px; }
.tk-kempty { font-size: 11.5px; color: var(--text-3); text-align: center; padding: 16px 0; border: 1px dashed var(--line); border-radius: 10px; }

/* lijst */
.tk-listview .tk-lhead, .tk-listview .tk-lrow { grid-template-columns: minmax(0,1fr) 150px 138px 92px 122px 96px; }
.tk-listview--np .tk-lhead, .tk-listview--np .tk-lrow { grid-template-columns: minmax(0,1fr) 138px 92px 122px 96px; }
.tk-listview--sel .tk-lhead, .tk-listview--sel .tk-lrow { grid-template-columns: 30px minmax(0,1fr) 150px 138px 92px 122px 96px; }
.tk-listview--sel.tk-listview--np .tk-lhead, .tk-listview--sel.tk-listview--np .tk-lrow { grid-template-columns: 30px minmax(0,1fr) 138px 92px 122px 96px; }
.tk-selcell { display: flex; align-items: center; justify-content: center; }
.tk-selcell input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.tk-lrow.is-sel { background: var(--brand-soft); }
.tk-sla { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--signal); padding: 1px 6px; border-radius: 5px; flex-shrink: 0; }
.tk-bulkbar { display: flex; align-items: center; gap: 14px; padding: 9px 14px; margin-bottom: 8px; border-radius: 11px; background: var(--text); color: var(--surface); position: sticky; top: 0; z-index: 5; }
.tk-bulkbar__l { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.tk-bulkbar__l b { font-size: 14px; }
.tk-bulkbar__r { display: flex; align-items: center; gap: 7px; margin-left: auto; flex-wrap: wrap; }
.tk-bulkbtn { font: inherit; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--surface) 30%, transparent); background: transparent; color: var(--surface); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.tk-bulkbtn:hover { background: color-mix(in srgb, var(--surface) 16%, transparent); }
.tk-bulkbtn--ghost { opacity: .8; }
.tk-bulkass { position: relative; }
.tk-bulkass__pop { position: absolute; right: 0; top: calc(100% + 5px); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; min-width: 190px; z-index: 20; display: flex; flex-direction: column; gap: 2px; }
.tk-bulkass__pop button { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px; border: none; background: transparent; font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer; text-align: left; }
.tk-bulkass__pop button:hover { background: var(--bg-2); }
.tk-dep { display: flex; flex-direction: column; gap: 9px; }
.tk-dep__pick { display: flex; align-items: center; gap: 10px; }
.tk-dep__pick > span { font-size: 12px; color: var(--text-3); flex: 0 0 70px; }
.tk-dep__pick select { flex: 1; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-2); font: inherit; font-size: 12.5px; color: var(--text); }
.tk-dep__state { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; line-height: 1.5; color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 10%, transparent); padding: 8px 11px; border-radius: 9px; }
.tk-dep__state.is-ok { color: var(--pos-tekst); background: color-mix(in srgb, var(--pos) 10%, transparent); }
.rel-dupbanner { display: flex; align-items: center; gap: 13px; padding: 12px 16px; margin-bottom: 16px; border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--amber) 8%, transparent); }
.rel-dupbanner__ic { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.rel-dupbanner__main { flex: 1; line-height: 1.35; }
.rel-dupbanner__main b { display: block; font-size: 13.5px; }
.rel-dupbanner__main span { font-size: 12px; color: var(--text-3); }
.rel-dupbanner__act { display: flex; align-items: center; gap: 8px; }
.rel-dupbanner__x { width: 28px; height: 28px; border-radius: 7px; border: none; background: transparent; color: var(--text-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rel-dupbanner__x:hover { background: color-mix(in srgb, var(--text-2) 12%, transparent); }
.rel-merge { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 14px; }
.rel-merge__opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 11px; cursor: pointer; transition: all .15s; }
.rel-merge__opt.is-keep { border-color: var(--brand); background: var(--brand-soft); }
.rel-merge__opt input { width: 16px; height: 16px; accent-color: var(--brand); }
.rel-merge__main b { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.rel-merge__main span { font-size: 11.5px; color: var(--text-3); }
.rel-merge__tag { font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); background: var(--surface); padding: 2px 7px; border-radius: 5px; }
.rel-merge__sum { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; color: var(--text-2); line-height: 1.5; padding: 10px 12px; background: var(--bg-2); border-radius: 9px; }
.bpl-vgtask { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); cursor: pointer; }
.bpl-vgtask:hover { border-color: var(--brand); color: var(--brand); }
.bpl-vgtaskdone { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--pos-tekst); }
.nz-verloop { display: flex; align-items: center; gap: 13px; padding: 12px 16px; margin-bottom: 16px; border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--amber) 8%, transparent); }
.nz-verloop__ic { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.nz-verloop__main { flex: 1; line-height: 1.35; }
.nz-verloop__main b { display: block; font-size: 13.5px; }
.nz-verloop__main span { font-size: 12px; color: var(--text-3); }
.nz-verloopchip { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 5px; border-radius: 50%; background: var(--amber); color: #fff; font-style: normal; font-size: 10px; font-weight: 800; vertical-align: middle; }
.aia-applied { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--pos-tekst); margin-top: 8px; }
.aia-confirm { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.aia-confirm__row { display: flex; gap: 12px; padding: 9px 13px; background: var(--bg-2); align-items: baseline; }
.aia-confirm__row > span { flex: 0 0 70px; font-size: 11.5px; color: var(--text-3); }
.aia-confirm__row > b { font-size: 13px; color: var(--text); }
.aia-confirm__oms { font-size: 12px; color: var(--text-2); line-height: 1.55; margin: 12px 0 0; }
.tk-lh { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.tk-lh.is-sort { color: var(--brand); }
.tk-lproj { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-lname { flex: 1; min-width: 60px; font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-lrow .tk-row__name { gap: 8px; }
.tk-empty-row { padding: 26px; text-align: center; font-size: 13px; color: var(--text-3); }
.tk-empty { text-align: center; padding: 30px 0; color: var(--text-3); }
.tk-empty p { margin-top: 10px; font-size: 13px; }

/* kalender */
.tk-cal { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.tk-cal__bar { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 13px; border-bottom: 1px solid var(--line); }
.tk-cal__bar b { font-size: 15px; font-weight: 600; color: var(--text); min-width: 170px; text-align: center; }
.tk-cal__bar button { width: 30px; height: 30px; border-radius: 8px; color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.tk-cal__bar button:hover { background: var(--bg-2); }
.tk-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.tk-cal__dow { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 9px 8px; text-align: center; border-bottom: 1px solid var(--line); }
.tk-cal__cell { min-height: 106px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.tk-cal__cell:nth-child(7n) { border-right: 0; }
.tk-cal__cell--empty { background: var(--bg-2); }
.tk-cal__num { font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.tk-cal__cell.is-today { background: var(--brand-soft); }
.tk-cal__cell.is-today .tk-cal__num { color: var(--brand); }
.tk-cal__items { display: flex; flex-direction: column; gap: 3px; }
.tk-cal__task { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; font-size: 11px; color: var(--text); background: var(--bg-2); border-radius: 6px; padding: 3px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-cal__task:hover { background: var(--surface); box-shadow: var(--shadow); }
.tk-cal__task.is-over { color: var(--neg); }
.tk-cal__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tk-cal__nodl { padding: 14px 16px; border-top: 1px solid var(--line); background: var(--bg-2); }
.tk-cal__nodl b { font-size: 12px; color: var(--text-2); }
.tk-cal__nodllist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.tk-cal__nodllist .tk-cal__task { width: auto; }
.tk-cal__hint { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 11px; color: var(--text-3); }
.tk-cal__hint svg { color: var(--brand); }
.tk-cal__cell.is-dragover { background: var(--brand-soft); outline: 2px dashed var(--brand); outline-offset: -2px; }
.tk-cal__task--row { position: relative; overflow: visible; cursor: grab; padding: 2px 4px 2px 7px; }
.tk-cal__task--row:active { cursor: grabbing; }
.tk-cal__tasktitle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-cal__tasktitle > :not(.tk-cal__dot):not(.tk-cal__time) { overflow: hidden; text-overflow: ellipsis; }
.tk-cal__time { font-style: normal; font-weight: 700; font-size: 10px; color: var(--brand); flex-shrink: 0; }
.tk-cal__clock { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 0; border-radius: 5px; background: none; color: var(--text-3); cursor: pointer; opacity: .55; }
.tk-cal__task--row:hover .tk-cal__clock { opacity: 1; }
.tk-cal__clock:hover { background: var(--brand-soft); color: var(--brand); }
.tk-cal__clock.is-set { color: var(--brand); opacity: 1; }
.tk-cal__timepop { position: absolute; top: calc(100% + 4px); right: 0; z-index: 40; display: flex; align-items: center; gap: 6px; padding: 7px 8px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 9px; box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.25)); }
.tk-cal__timepop input { font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg-2); color: var(--text); }
.tk-cal__timepop button { font-size: 11px; font-weight: 600; padding: 4px 8px; border: 0; border-radius: 6px; background: var(--bg-2); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.tk-cal__timepop .tk-cal__timeok { background: var(--brand); color: #fff; }

/* nieuwe-taak-modal */
.tk-newmodal { width: min(560px, 94vw); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; max-height: 90vh; }
.tk-newmodal__head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.tk-newmodal__body { padding: 20px 22px; display: flex; flex-direction: column; gap: 15px; overflow-y: auto; }
.tk-newmodal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); }
.tk-nf { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.tk-nf > span { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--text-3); }
.tk-nf input, .tk-nf select { max-width: 100%; min-width: 0; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--bg-2); color: var(--text); font-size: 13px; font-family: inherit; }
.tk-nf input:focus, .tk-nf select:focus { outline: none; border-color: var(--brand); }
.tk-nf2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.tk-nfrow { display: flex; align-items: center; gap: 10px; min-height: 38px; flex-wrap: wrap; }
.tk-nfhint { font-size: 12.5px; color: var(--text-2); }
@media (max-width: 720px) { .tk-nf2 { grid-template-columns: 1fr; } }

/* ===== e-mailkoppeling (postbus, lezer, koppelen) ===== */
.ml-file { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: left; width: 100%; transition: border-color .12s; }
.ml-file:hover { border-color: var(--line-strong); }
.ml-file__ic { width: 30px; height: 30px; border-radius: 7px; color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .03em; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ml-file__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ml-file__meta b { font-size: 12.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-file__meta i { font-style: normal; font-size: 11px; color: var(--text-3); }
.ml-filegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ml-filegrid--docs { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .ml-filegrid { grid-template-columns: 1fr; } }

/* e-maillezer */
.ml-reader { position: fixed; top: 0; right: 0; height: 100vh; width: min(620px, 96vw); background: var(--surface); border-left: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: tkSlide .2s cubic-bezier(.2,.7,.2,1); }
.ml-reader__bar { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.ml-reader__folder { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-3); }
.ml-iconbtn { width: 30px; height: 30px; border-radius: 8px; color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.ml-iconbtn:hover { background: var(--bg-2); color: var(--text); }
.ml-reader__body { flex: 1; overflow-y: auto; padding: 22px; }
.ml-reader__subj { font-size: 20px; font-weight: 600; color: var(--text); line-height: 1.3; margin-bottom: 18px; }
.ml-reader__from { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ml-reader__fromtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ml-reader__fromtxt b { font-size: 13.5px; font-weight: 600; color: var(--text); }
.ml-reader__fromtxt span { font-size: 12px; color: var(--text-2); }
.ml-reader__fromtxt i { font-style: normal; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.ml-reader__date { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.ml-reader__text { padding: 18px 0; }
.ml-reader__text p { font-size: 13.5px; line-height: 1.65; color: var(--text); margin-bottom: 14px; }
.ml-reader__text p:last-child { margin-bottom: 0; }
.ml-reader__att, .ml-reader__linked { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.ml-reader__attlbl { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.ml-reader__nolink { font-size: 12.5px; color: var(--text-3); }
.ml-linktask { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; transition: border-color .12s; }
.ml-linktask:hover { border-color: var(--brand); }
.ml-linktask__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ml-linktask__txt b { font-size: 13px; font-weight: 500; color: var(--text); }
.ml-linktask__txt i { font-style: normal; font-size: 11px; color: var(--text-3); }
.ml-reader__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); flex-shrink: 0; background: var(--bg-2); }

.ml-frommail { display: flex; align-items: center; gap: 11px; padding: 12px 14px; background: var(--bg-2); border-radius: 11px; }
.ml-frommail__ic { width: 32px; height: 32px; border-radius: 8px; background: var(--steel); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ml-frommail b { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.ml-frommail i { font-style: normal; font-size: 11.5px; color: var(--text-3); }

/* mail picker */
.ml-picker { width: min(560px, 94vw); max-height: 86vh; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; }
.ml-picker__search { display: flex; align-items: center; gap: 9px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.ml-picker__search svg { color: var(--text-3); }
.ml-picker__search input { flex: 1; border: none; background: none; color: var(--text); font-size: 13.5px; outline: none; }
.ml-picker__list { overflow-y: auto; padding: 8px; }
.ml-pickrow { display: flex; align-items: stretch; gap: 8px; border-radius: 11px; padding: 4px; }
.ml-pickrow:hover { background: var(--bg-2); }
.ml-pickrow__main { display: flex; gap: 11px; flex: 1; min-width: 0; text-align: left; padding: 8px; }
.ml-pickrow__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ml-pickrow__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ml-pickrow__top b { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-pickrow__date { font-size: 11px; color: var(--text-3); white-space: nowrap; flex-shrink: 0; }
.ml-pickrow__subj { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-pickrow__snip { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-pickrow__clip { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--text-3); margin-top: 1px; }
.ml-pickrow.is-unread .ml-pickrow__top b::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); margin-right: 6px; vertical-align: middle; }
.ml-pickrow__btn { flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-2); border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 11px; white-space: nowrap; }
.ml-pickrow__btn:hover { border-color: var(--brand); color: var(--brand); }
.ml-pickrow__btn.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }

/* gekoppeld in detail */
.ml-linklist { display: flex; flex-direction: column; gap: 8px; }
.ml-linkcard { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; transition: border-color .12s; }
.ml-linkcard:hover { border-color: var(--line-strong); }
.ml-linkcard__ic { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ml-linkcard__b { flex: 1; min-width: 0; }
.ml-linkcard__top { display: flex; align-items: center; gap: 8px; }
.ml-linkcard__top b { font-size: 12.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-linkcard__clip { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--text-3); flex-shrink: 0; }
.ml-linkcard__b i { font-style: normal; font-size: 11px; color: var(--text-3); }
.ml-linkcard__x { width: 24px; height: 24px; border-radius: 6px; color: var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ml-linkcard__x:hover { background: var(--signal-soft); color: var(--neg); }
.ml-linkadd { margin-top: 2px; }
.ml-docwrap { position: relative; }
.ml-doc__x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); color: var(--text-3); display: flex; align-items: center; justify-content: center; opacity: 0; }
.ml-docwrap:hover .ml-doc__x { opacity: 1; }
.ml-doc__x:hover { color: var(--neg); border-color: var(--neg); }
.ml-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px; border: 1.5px dashed var(--line-strong); border-radius: 12px; color: var(--text-3); text-align: center; }
.ml-drop b { font-size: 13px; color: var(--text-2); }
.ml-drop i { font-style: normal; font-size: 11.5px; }

/* project-postbus */
.ml-postbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: var(--gap); flex-wrap: wrap; }
.ml-posttabs { display: flex; gap: 4px; }
.ml-postlist { display: flex; flex-direction: column; gap: 8px; }
.ml-postrow { position: relative; display: flex; align-items: flex-start; gap: 13px; text-align: left; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); transition: border-color .12s; }
.ml-postrow:hover { border-color: var(--line-strong); }
.ml-postrow.is-unread { border-left: 3px solid var(--brand); }
.ml-postrow__dot { position: absolute; top: 17px; left: -1px; }
.ml-postrow__b { flex: 1; min-width: 0; }
.ml-postrow__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ml-postrow__top b { font-size: 13.5px; font-weight: 600; color: var(--text); }
.ml-postrow__date { font-size: 11.5px; color: var(--text-3); white-space: nowrap; flex-shrink: 0; }
.ml-postrow__subj { font-size: 13px; font-weight: 500; color: var(--text); margin-top: 2px; }
.ml-postrow__snip { font-size: 12px; color: var(--text-2); margin-top: 3px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-postrow__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.ml-postrow__tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--text-2); background: var(--bg-2); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.ml-postrow__tag.is-linked { color: var(--brand); background: var(--brand-soft); }
.ml-postrow__tag.is-warn { color: var(--amber-tekst); background: color-mix(in srgb,var(--amber) 13%,transparent); }
.ml-postrow.is-out { border-left: 3px solid var(--steel); }
.ml-outbadge { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--steel); padding: 1px 6px; border-radius: 5px; margin-right: 6px; vertical-align: middle; }

/* e-mail opstellen (composer) */
.ml-compose { width: min(620px, 95vw); max-height: 92vh; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; }
.ml-compose__body { padding: 18px 22px; display: flex; flex-direction: column; gap: 15px; overflow-y: auto; }
.ml-compose__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--bg-2); }
.ml-compose__hint { font-size: 11.5px; color: var(--text-3); }
.ml-recip { display: flex; flex-wrap: wrap; gap: 7px; }
.ml-recipchip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); padding: 5px 11px 5px 5px; border-radius: 999px; }
.ml-recipchip.is-on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.ml-extrato { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); background: var(--bg-2); border: 1px solid var(--line); padding: 4px 6px 4px 10px; border-radius: 999px; margin-top: 7px; margin-right: 6px; }
.ml-extrato button { display: inline-flex; color: var(--text-3); }
.ml-extrato button:hover { color: var(--neg); }
.ml-extrarow { display: flex; gap: 8px; margin-top: 8px; }
.ml-extrarow input { flex: 1; padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); color: var(--text); font-size: 12.5px; }
.ml-extrarow input:focus { outline: none; border-color: var(--brand); }
.ml-extraadd { width: 32px; border-radius: 8px; border: 1px solid var(--line); color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.ml-extraadd:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.ml-extraadd:disabled { opacity: .4; }
.ml-cclink { align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: 5px; }
.ml-subjrow { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; background: var(--bg-2); }
.ml-subjrow:focus-within { border-color: var(--brand); }
.ml-subjcode { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 0 11px; border-right: 1px solid var(--line); white-space: nowrap; letter-spacing: .02em; }
.ml-subjrow input { flex: 1; border: none; background: none; color: var(--text); font-size: 13px; padding: 9px 12px; font-family: inherit; }
.ml-subjrow input:focus { outline: none; }
.ml-bodyarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 14px; background: var(--bg-2); color: var(--text); font-size: 13.5px; line-height: 1.6; resize: vertical; font-family: inherit; }
.ml-bodyarea:focus { outline: none; border-color: var(--brand); }
.ml-attpick { display: flex; flex-wrap: wrap; gap: 7px; }
.ml-attchip { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); padding: 5px 10px 5px 5px; border-radius: 8px; }
.ml-attchip.is-on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.ml-attchip__ic { width: 22px; height: 22px; border-radius: 5px; color: #fff; font-size: 8px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ml-linktoggle { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; background: var(--bg-2); border-radius: 11px; cursor: pointer; }
.ml-linktoggle > span:last-child b { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); }
.ml-linktoggle > span:last-child i { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.ml-linkactions { display: flex; gap: 8px; flex-wrap: wrap; }
.ml-reader__baracts { display: flex; gap: 4px; align-items: center; }
.ml-iconbtn.is-star { color: var(--amber); }

/* ===== geïntegreerde webmail (postbus) ===== */
.gm-screen { padding-top: 14px; }
.gm { display: grid; grid-template-columns: 212px minmax(320px, 400px) 1fr; gap: 14px; height: calc(100dvh - 172px); min-height: 480px; }
.gm__side { display: flex; flex-direction: column; gap: 2px; }
.gm__compose { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; border-radius: 13px; background: var(--brand); color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow); margin-bottom: 10px; flex-shrink: 0; }
.gm__compose:hover { filter: brightness(1.06); }
.gm__folders { display: flex; flex-direction: column; gap: 2px; }
.gm__folder { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; font-size: 13px; color: var(--text-2); text-align: left; }
.gm__folder > svg { color: var(--text-3); flex-shrink: 0; }
.gm__folder span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm__folder:hover { background: var(--bg-2); }
.gm__folder.is-on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.gm__folder.is-on > svg { color: var(--brand); }
.gm__count { font-style: normal; font-size: 11px; color: var(--text-3); }
.gm__badge { font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--brand); padding: 1px 7px; border-radius: 999px; }
.gm__sidefoot { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); padding: 11px 12px 2px; border-top: 1px solid var(--line); }

.gm__list { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.gm__search { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.gm__search > svg { color: var(--text-3); flex-shrink: 0; }
.gm__search input { flex: 1; border: none; background: none; color: var(--text); font-size: 13px; outline: none; min-width: 0; }
.gm__search button { color: var(--text-3); display: flex; }
.gm__listhead { display: flex; align-items: baseline; justify-content: space-between; padding: 9px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.gm__listhead b { font-size: 12.5px; font-weight: 600; color: var(--text); }
.gm__listhead span { font-size: 11px; color: var(--text-3); }
.gm__rows { flex: 1; overflow-y: auto; }

.gm-row { display: flex; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--line); cursor: pointer; align-items: flex-start; }
.gm-row:hover { background: var(--bg-2); }
.gm-row.is-active { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.gm-row__star { color: var(--line-strong); display: flex; padding-top: 2px; flex-shrink: 0; }
.gm-row__star.is-on { color: var(--amber); }
.gm-row__star:hover { color: var(--amber); }
.gm-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gm-row__l1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gm-row__who { font-size: 12.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-row.is-unread .gm-row__who { font-weight: 700; }
.gm-row__sent { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--steel); margin-right: 3px; }
.gm-row__date { font-size: 10.5px; color: var(--text-3); white-space: nowrap; flex-shrink: 0; }
.gm-row.is-unread .gm-row__date { color: var(--brand); font-weight: 600; }
.gm-row__l2 { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-row.is-unread .gm-row__l2 { font-weight: 600; }
.gm-row__l3 { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-3); min-width: 0; }
.gm-row__snip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-row__tags { display: flex; gap: 6px; margin-top: 3px; min-width: 0; }
.gm-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 999px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-tag.is-linked { color: var(--brand); background: var(--brand-soft); }
.gm-tag.is-warn { color: var(--amber-tekst); background: color-mix(in srgb,var(--amber) 13%,transparent); }

.gm__reader { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.gm__reader .ml-reader__body { flex: 1; }
.gm__readerempty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-3); text-align: center; padding: 40px; }
.gm__readeremptyic { width: 76px; height: 76px; border-radius: 50%; background: var(--bg-2); display: flex; align-items: center; justify-content: center; color: var(--text-3); }
.gm__readerempty b { font-size: 15px; color: var(--text-2); }
.gm__readerempty p { font-size: 12.5px; max-width: 280px; line-height: 1.5; }

@media (max-width: 1180px) { .gm { grid-template-columns: 188px minmax(280px, 340px) 1fr; } }
@media (max-width: 920px) { .gm { grid-template-columns: 1fr; height: auto; } .gm__reader { min-height: 460px; } .gm__rows { max-height: 420px; } }

/* ===== persoonlijke postbus (automatisch gesorteerd) ===== */
.pb-screen { padding-top: 0; }
.gm--personal { height: calc(100dvh - 232px); min-height: 460px; }
@media (max-width: 920px) { .gm--personal { height: auto; } }

/* infobalk + filterbeheer-knop */
.pb-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; margin-bottom: 14px; background: var(--brand-soft); border: 1px solid color-mix(in srgb,var(--brand) 22%,transparent); border-radius: 12px; flex-wrap: wrap; }
.pb-bar__txt { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); min-width: 0; }
.pb-bar__txt > svg { color: var(--brand); flex-shrink: 0; }
.pb-bar__txt b { color: var(--text); font-weight: 600; }
.pb-bar__btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: #fff; background: var(--brand); flex-shrink: 0; transition: filter .14s; }
.pb-bar__btn:hover { filter: brightness(1.07); }
.pb-bar__btn svg { color: #fff; }

/* slimme-map secties in de zijbalk */
.pb-sechead { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); padding: 13px 12px 5px; }
.pb-sechead svg { color: var(--text-3); }
.pb-sechead--act { justify-content: space-between; }
.pb-sechead--act > span { display: inline-flex; align-items: center; gap: 7px; }
.pb-sechead--act button { display: flex; color: var(--text-3); padding: 2px; border-radius: 6px; }
.pb-sechead--act button:hover { color: var(--brand); background: var(--brand-soft); }
.pb-folder.is-off { opacity: .5; }
.pb-folder.is-off span { text-decoration: line-through; }
.pb-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.gm__folder .pb-dot { flex: 0 0 auto; margin: 0 3px; }
.gm__sidefoot .pb-me { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 9px; font-weight: 700; margin-right: 6px; }

/* gekleurd slimme-map label op een rij */
.pb-lbl { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; padding: 2px 8px 2px 6px; border-radius: 999px; color: var(--c); background: color-mix(in srgb,var(--c) 14%,transparent); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-lbl i { width: 7px; height: 7px; border-radius: 2px; background: var(--c); flex-shrink: 0; }
[data-theme="dark"] .pb-lbl { color: color-mix(in srgb,var(--c) 62%,white); background: color-mix(in srgb,var(--c) 26%,transparent); }
[data-theme="dark"] .pb-lbl i { background: color-mix(in srgb,var(--c) 62%,white); }

.pb-listsub { display: flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 11px; color: var(--text-3); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.pb-listsub svg { flex-shrink: 0; }

/* ---- filterbeheer-modal ---- */
.pb-beheer { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-lg); width: min(680px, 96vw); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.pb-beheer__intro { display: flex; align-items: flex-start; gap: 9px; padding: 0 22px 14px; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.pb-beheer__intro svg { color: var(--brand); flex-shrink: 0; margin-top: 2px; }
.pb-beheer__intro b { color: var(--text); font-weight: 600; }
.pb-beheer__body { padding: 0 22px; overflow-y: auto; flex: 1; }
.pb-beheer__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-top: 1px solid var(--line); }
.pb-beheer__hint { font-size: 12px; color: var(--text-3); }

.pb-rules { display: flex; flex-direction: column; gap: 9px; padding-bottom: 18px; }
.pb-rule { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); transition: border-color .14s; }
.pb-rule:hover { border-color: var(--line-strong); }
.pb-rule.is-off { opacity: .58; }
.pb-rule__ord { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.pb-rule__ord button { display: flex; color: var(--text-3); padding: 1px; border-radius: 5px; }
.pb-rule__ord button:hover:not(:disabled) { color: var(--brand); background: var(--brand-soft); }
.pb-rule__ord button:disabled { opacity: .3; cursor: default; }
.pb-rule__ic { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.pb-rule__ic svg { color: #fff; }
.pb-rule__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pb-rule__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pb-rule__top b { font-size: 13px; font-weight: 600; color: var(--text); }
.pb-rule__type { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; }
.pb-rule__type--project { color: var(--brand); background: var(--brand-soft); }
.pb-rule__type--algemeen { color: var(--text-2); background: color-mix(in srgb,var(--text-3) 16%,transparent); }
.pb-rule__sys { font-size: 9.5px; font-weight: 600; color: var(--text-3); border: 1px solid var(--line); padding: 0 6px; border-radius: 999px; }
.pb-rule__sum { font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-rule__count { font-size: 11px; color: var(--text-3); }
.pb-rule__acts { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.pb-rule__btn { display: flex; padding: 7px; border-radius: 8px; color: var(--text-3); }
.pb-rule__btn:hover { color: var(--text); background: var(--surface); }
.pb-rule__btn--del:hover { color: var(--neg); background: color-mix(in srgb,var(--neg) 12%,transparent); }

/* ---- filtereditor ---- */
.pb-ed__title { font-size: 13px; font-weight: 600; color: var(--text); margin: 2px 0 14px; }
.pb-editor { display: flex; flex-direction: column; gap: 15px; padding-bottom: 6px; }
.pb-ed__row { display: flex; flex-direction: column; gap: 7px; }
.pb-ed__lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.pb-input, .pb-cond input, .pb-cond select { height: 38px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); font-size: 13px; padding: 0 11px; outline: none; transition: border-color .14s; }
.pb-input:focus, .pb-cond input:focus, .pb-cond select:focus { border-color: var(--brand); }
.pb-seg, .pb-matchseg { display: inline-flex; gap: 3px; padding: 3px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; width: fit-content; }
.pb-seg button, .pb-matchseg button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--text-2); transition: all .14s; white-space: nowrap; }
.pb-seg button svg { color: var(--text-3); }
.pb-seg button.is-on, .pb-matchseg button.is-on { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px rgba(0,0,0,.16); font-weight: 600; }
.pb-seg button.is-on svg { color: var(--brand); }
.pb-matchseg { font-size: 11px; }
.pb-matchseg button { padding: 6px 11px; font-size: 11.5px; }
.pb-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.pb-sw { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; border: 2px solid transparent; transition: transform .1s; }
.pb-sw:hover { transform: scale(1.08); }
.pb-sw.is-on { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; }
.pb-ed__note { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--text-2); padding: 11px 13px; background: var(--bg-2); border-radius: 10px; }
.pb-ed__note svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.pb-ed__note b { color: var(--text); }
.pb-ed__conds { display: flex; flex-direction: column; gap: 9px; }
.pb-ed__condhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pb-cond { display: flex; align-items: center; gap: 7px; }
.pb-cond select { flex-shrink: 0; }
.pb-cond__op { font-size: 11.5px; color: var(--text-3); flex-shrink: 0; white-space: nowrap; }
.pb-cond input { flex: 1; min-width: 0; }
.pb-cond__x { display: flex; padding: 8px; border-radius: 8px; color: var(--text-3); flex-shrink: 0; }
.pb-cond__x:hover { color: var(--neg); background: color-mix(in srgb,var(--neg) 12%,transparent); }
.pb-cond__add { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--brand); padding: 5px 2px; width: fit-content; white-space: nowrap; }
.pb-cond__add:hover { text-decoration: underline; }
.pb-ed__foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 4px; }

/* projectkiezer in opstellen */
.ml-projsel { height: 38px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); font-size: 13px; padding: 0 11px; outline: none; transition: border-color .14s; width: 100%; }
.ml-projsel:focus { border-color: var(--brand); }

/* eigen labels op een e-mail (in de lezer) */
.ml-labels { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 4px 0 14px; }
.ml-lblchip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 3px 6px 3px 9px; border-radius: 999px; color: var(--c); background: color-mix(in srgb,var(--c) 14%,transparent); }
.ml-lblchip i { width: 7px; height: 7px; border-radius: 2px; background: var(--c); }
.ml-lblchip button { display: flex; color: var(--c); opacity: .65; }
.ml-lblchip button:hover { opacity: 1; }
[data-theme="dark"] .ml-lblchip { color: color-mix(in srgb,var(--c) 64%,white); background: color-mix(in srgb,var(--c) 26%,transparent); }
[data-theme="dark"] .ml-lblchip i { background: color-mix(in srgb,var(--c) 64%,white); }
[data-theme="dark"] .ml-lblchip button { color: color-mix(in srgb,var(--c) 64%,white); }
.ml-lbladd { position: relative; }
.ml-lbladd__btn { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text-2); padding: 4px 10px; border: 1px dashed var(--line-strong); border-radius: 999px; transition: all .14s; }
.ml-lbladd__btn:hover, .ml-lbladd__btn.is-on { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.ml-lblpop__veil { position: fixed; inset: 0; z-index: 40; }
.ml-lblpop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 41; width: 246px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 7px; }
.ml-lblpop__hd { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); padding: 5px 8px 7px; }
.ml-lblrow { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px; border-radius: 8px; font-size: 12.5px; color: var(--text); cursor: pointer; text-align: left; }
.ml-lblrow:hover { background: var(--bg-2); }
.ml-lblrow.is-on { font-weight: 600; }
.ml-lbldot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.ml-lblrow__n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-lblrow__del { display: flex; color: var(--text-3); opacity: 0; padding: 2px; border-radius: 5px; flex-shrink: 0; }
.ml-lblrow:hover .ml-lblrow__del { opacity: 1; }
.ml-lblrow__del:hover { color: var(--neg); background: color-mix(in srgb,var(--neg) 12%,transparent); }
.ml-lblrow--new { color: var(--brand); font-weight: 600; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 4px; padding-top: 11px; }
.ml-lblrow--new:hover { background: var(--brand-soft); }
.ml-lblnew { padding: 9px 8px 5px; border-top: 1px solid var(--line); margin-top: 4px; display: flex; flex-direction: column; gap: 9px; }
.ml-lblnew input { height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); color: var(--text); font-size: 12.5px; padding: 0 10px; outline: none; }
.ml-lblnew input:focus { border-color: var(--brand); }
.ml-lblsw { display: flex; gap: 6px; flex-wrap: wrap; }
.ml-lblsw .ml-sw { width: 22px; height: 22px; border-radius: 6px; border: 2px solid transparent; }
.ml-lblsw .ml-sw.is-on { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; }
.ml-lblnew__act { display: flex; justify-content: flex-end; gap: 7px; }
.ml-lblnew__act .btn { padding: 6px 11px; font-size: 12px; }

/* gebruikerslabel op een rij (subtiele variant) */
.pb-lbl--user { font-weight: 500; }
.pb-lbl--user i { border-radius: 50%; }

/* ===== budgetbewaking per hoofdstuk (EAC) ===== */
.bw-signal { display: flex; flex-direction: column; gap: 8px; padding: 12px 15px; margin-bottom: var(--gap); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.bw-signal__item { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.bw-signal__item > svg { color: var(--signal); flex-shrink: 0; margin-top: 2px; }
.bw-signal__item b { color: var(--text); font-weight: 600; }
.bw-signal__item--pos > svg { color: var(--pos); }

.bw-sort { display: inline-flex; gap: 3px; padding: 3px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; }
.bw-sort button { padding: 6px 12px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--text-2); white-space: nowrap; transition: all .14s; }
.bw-sort button.is-on { background: var(--surface); color: var(--brand); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.16); }

.bw { --bwcols: 30px 1.45fr 105px 105px 1.15fr 58px 115px 130px; }
.bw__head { display: grid; grid-template-columns: var(--bwcols); gap: 12px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.bw__head .r, .bw .r { text-align: right; }
.bw__row { display: grid; grid-template-columns: var(--bwcols); gap: 12px; align-items: center; width: 100%; text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); transition: background .12s; }
.bw__row:hover { background: var(--bg-2); }
.bw__row.is-open { background: var(--bg-2); border-bottom-color: transparent; }
.bw__chev { display: flex; color: var(--text-3); }
.bw__name { min-width: 0; }
.bw__name b { display: block; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw__name i { font-style: normal; font-size: 11px; color: var(--text-3); }
.bw__num { font-size: 12.5px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bw__num--mut { color: var(--text-3); }
.bw__viz { min-width: 0; }
.bw__track { position: relative; display: block; height: 14px; background: var(--track); border-radius: 4px; overflow: visible; }
.bw__track i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 4px; display: block; }
.bw__spent { opacity: .9; }
.bw__bmark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text-2); border-radius: 1px; }
.bw__cpi { font-size: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.bw__cpi.is-neg { color: var(--neg); }
.bw__cpi.is-pos { color: var(--pos-tekst); }
.bw__vac { text-align: right; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bw__vac i { display: block; font-style: normal; font-size: 10px; font-weight: 500; color: var(--text-3); }

.bw__detail { padding: 4px 16px 14px 58px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.bw__dethead, .bw__detrow { display: grid; grid-template-columns: 1.2fr 110px 110px 110px 120px; gap: 12px; align-items: center; padding: 6px 0; }
.bw__dethead { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); border-bottom: 1px solid var(--line); }
.bw__detrow { font-size: 12.5px; font-variant-numeric: tabular-nums; border-bottom: 1px dashed var(--line); }
.bw__detrow:last-of-type { border-bottom: none; }
.bw__detname { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--text-2); }
.bw__detname i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.bw__note { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; color: var(--text-2); line-height: 1.5; margin-top: 10px; padding: 9px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }
.bw__note svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }

.bw__foot { display: grid; grid-template-columns: var(--bwcols); gap: 12px; align-items: center; padding: 12px 16px; background: var(--bg-2); border-top: 1px solid var(--line-strong); font-size: 12.5px; }
.bw__method { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--text-3); line-height: 1.55; padding: 12px 16px; border-top: 1px solid var(--line); }
.bw__method svg { color: var(--brand); flex-shrink: 0; margin-top: 2px; }
@media (max-width: 1180px) { .bw { --bwcols: 26px 1.3fr 95px 95px 0.9fr 50px 105px 115px; } }

/* ===== termijnen ↔ planning-mijlpalen ===== */
.bw-signal__item--slip > svg { color: var(--steel); }
.tp { --tpcols: 30px 1.15fr 1.5fr 150px 110px 130px; }
.tp__head { display: grid; grid-template-columns: var(--tpcols); gap: 12px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.tp__head .r, .tp .r { text-align: right; }
.tp__row { display: grid; grid-template-columns: var(--tpcols); gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); transition: background .12s; }
.tp__row:hover { background: var(--bg-2); }
.tp__row.is-open { background: var(--bg-2); border-bottom-color: transparent; }
.tp__name { min-width: 0; }
.tp__name b { display: block; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp__name i { font-style: normal; font-size: 11px; color: var(--text-3); }
.tp__ms { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tp__msbar { position: relative; display: block; height: 7px; background: var(--track); border-radius: 4px; overflow: hidden; flex: none; }
.tp__msbar i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 4px; }
.tp__mstxt { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp__mstxt b { color: var(--text-2); }
.tp__date { min-width: 0; }
.tp__datev { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); }
.tp__datev i { display: block; font-style: normal; font-size: 10.5px; font-weight: 500; color: var(--text-3); }
.tp__amount { font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp__st { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }

.tp__detail { padding: 4px 16px 14px 58px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.tp__dethead, .tp__detrow { display: grid; grid-template-columns: 1.3fr 1fr 150px 150px 90px; gap: 12px; align-items: center; padding: 7px 0; font-size: 12.5px; }
.tp__dethead { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); border-bottom: 1px solid var(--line); }
.tp__detrow { border-bottom: 1px dashed var(--line); }
.tp__detname { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--text); min-width: 0; }
.tp__detname svg { color: var(--text-3); flex-shrink: 0; }
.tp__detprog { display: flex; align-items: center; gap: 9px; }
.tp__detprog .tp__msbar { width: 90px; }
.tp__detprog em { font-style: normal; font-size: 11.5px; color: var(--text-2); font-weight: 600; }
.tp__unlink { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-3); padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; transition: all .14s; }
.tp__unlink:hover:not(:disabled) { color: var(--neg); border-color: var(--neg); }
.tp__unlink:disabled { opacity: .4; cursor: default; }
.tp__linkrow { display: flex; align-items: center; gap: 10px; padding-top: 12px; flex-wrap: wrap; }
.tp__linklbl { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.tp__linksel { height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 12px; padding: 0 9px; outline: none; max-width: 280px; }
.tp__linksel:focus { border-color: var(--brand); }

/* tijdlijn factuurmomenten */
.tp-tl { padding: 18px 24px 16px; }
.tp-tl__band { position: relative; height: 72px; border-bottom: 2px solid var(--line-strong); margin: 0 8px; }
.tp-tl__m { position: absolute; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tp-tl__m i { order: 3; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid var(--surface); box-shadow: 0 0 0 1.5px var(--line-strong); margin-bottom: -7px; }
.tp-tl__m em { order: 1; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--text); }
.tp-tl__m u { order: 2; text-decoration: none; font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.tp-tl__today { position: absolute; top: -6px; bottom: -8px; width: 2px; background: var(--signal); transform: translateX(-50%); }
.tp-tl__today b { position: absolute; top: -4px; left: 7px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--signal); white-space: nowrap; }
.tp-tl__axis { position: relative; height: 22px; margin: 6px 8px 0; }
.tp-tl__axis span { position: absolute; font-size: 10.5px; color: var(--text-3); transform: translateX(-50%); }
.tp-tl__legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 8px 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; color: var(--text-3); }
.tp-tl__legend span { display: inline-flex; align-items: center; gap: 6px; }
.tp-tl__legend i { width: 9px; height: 9px; border-radius: 50%; }

/* ===== uren per calculatieregel (#40) ===== */
.urp { position: relative; display: inline-block; margin-top: 4px; }
.urp__chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--text-3); padding: 2px 8px; border: 1px dashed var(--line-strong); border-radius: 999px; transition: all .14s; }
.urp__chip:hover:not(:disabled) { color: var(--brand); border-color: var(--brand); }
.urp__chip.is-set { color: var(--brand); background: var(--brand-soft); border: 1px solid color-mix(in srgb,var(--brand) 30%,transparent); }
.urp__chip:disabled { opacity: .55; cursor: default; }
.urp__veil { position: fixed; inset: 0; z-index: 60; }
.urp__pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 61; width: 320px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.urp__pop-h { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.urp__sel { height: 36px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-2); color: var(--text); font-size: 12.5px; padding: 0 9px; outline: none; width: 100%; }
.urp__sel:focus { border-color: var(--brand); }
.urp__pop-s { font-size: 11px; color: var(--text-3); line-height: 1.5; }
.urp__pop-s b { color: var(--text-2); }

.ur { --urcols: 1.7fr 95px 95px 1fr 64px 130px 150px; }
.ur__head { display: grid; grid-template-columns: var(--urcols); gap: 12px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.ur__head .r, .ur .r { text-align: right; }
.ur__row { display: grid; grid-template-columns: var(--urcols); gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line); transition: background .12s; }
.ur__row:hover { background: var(--bg-2); }
.ur__name { min-width: 0; }
.ur__name b { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ur__name i { font-style: normal; font-size: 11px; color: var(--text-3); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ur__src { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--steel); background: color-mix(in srgb,var(--steel) 13%,transparent); padding: 1px 7px; border-radius: 999px; }
.ur__src svg { flex-shrink: 0; }
.ur__src--live { color: var(--brand); background: var(--brand-soft); }
.ur__num { font-size: 12.5px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ur__num .ur__delta { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; }
.ur__viz { min-width: 0; }
.ur__track { position: relative; display: block; height: 13px; background: var(--track); border-radius: 4px; overflow: hidden; }
.ur__track i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 4px; }
.ur__earned { background: color-mix(in srgb,var(--text-3) 26%,transparent); }
.ur__spent { height: 7px !important; top: 3px !important; }
.ur__norm { font-size: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.ur__norm.is-over { color: var(--neg); }
.ur__norm.is-under { color: var(--pos-tekst); }
.ur__foot { display: grid; grid-template-columns: var(--urcols); gap: 12px; align-items: center; padding: 12px 16px; background: var(--bg-2); border-top: 1px solid var(--line-strong); font-size: 12.5px; }
@media (max-width: 1180px) { .ur { --urcols: 1.4fr 85px 85px 0.8fr 56px 110px 130px; } }

/* globale toast */
.cerp-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(10px); z-index: 400; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 13px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: 90vw; text-align: center; }
.cerp-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- projectbalk + ruggengraat --------------------------- */
.pjbar { flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: 14px clamp(20px,3vw,40px) 0; }
.pjbar__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.pjbar__identity { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; flex-wrap: wrap; }
.pjbar__head { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; flex-wrap: wrap; }
.pjbar__back { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--text-2); transition: gap .15s; }
.pjbar__back:hover { gap: 10px; color: var(--text); }

/* moderne actie-toolbar in de projectbalk */
.pjbar__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pjbar__viewgrp { display: inline-flex; align-items: center; gap: 4px; padding: 3px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; }
.pjbar__div { width: 1px; height: 22px; background: var(--line); margin: 0 2px; }
.pjact { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 9px; font-size: 12.5px; font-weight: 500; color: var(--text-2); background: transparent; border: 1px solid transparent; transition: all .14s; white-space: nowrap; }
.pjbar__viewgrp .pjact { padding: 7px 12px; }
.pjact svg { color: var(--text-3); transition: color .14s; }
.pjact:hover { color: var(--text); background: var(--surface); }
.pjact:hover svg { color: var(--text-2); }
.pjact.is-cur { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.pjact.is-cur svg { color: var(--brand); }
.pjact--accent { background: var(--brand); color: #fff; border-color: var(--brand); }
.pjact--accent svg { color: #fff; }
.pjact--accent:hover { background: var(--brand); color: #fff; filter: brightness(1.07); }
.pjact--accent:hover svg { color: #fff; }
.pjact:not(.pjbar__viewgrp .pjact):not(.pjact--accent) { border-color: var(--line); }
.pjbar__actions > .pjact:not(.pjact--accent) { background: var(--bg-2); border-color: var(--line); }
.pjbar__actions > .pjact:not(.pjact--accent):hover { background: var(--surface); border-color: var(--line-strong); }

/* subproject-modal */
.sp-parent { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 14px; }
.sp-parent > svg { color: var(--brand); flex-shrink: 0; }
.sp-parent b { display: block; font-size: 13px; font-weight: 600; }
.sp-parent span { font-size: 11.5px; color: var(--text-3); }

/* uitgebreide subproject-modal */
.bibmodal--form.sp-modal { width: min(1180px, 97vw); max-width: 97vw; max-height: 94vh; display: flex; flex-direction: column; }
.sp-body { overflow-y: auto; }
.sp-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 30px; }
.sp-coltitle { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin-bottom: 12px; }
.sp-coltitle svg { color: var(--brand); }
.sp-count { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-3); background: var(--bg-2); border: 1px solid var(--line); border-radius: 99px; padding: 1px 9px; }
.sp-col--list { border-left: 1px solid var(--line); padding-left: 22px; }
.sp-pcthint { font-style: normal; font-size: 11px; color: var(--text-3); margin-top: 5px; }
.sp-treehead { margin-bottom: 8px; }
.sp-tree__root { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.sp-tree__root i { font-style: normal; font-size: 10.5px; font-weight: 500; color: var(--text-3); }
.sp-bullet { width: 9px; height: 9px; border-radius: 3px; background: var(--brand); flex-shrink: 0; }
.sp-list { display: flex; flex-direction: column; gap: 10px; }
.sp-card { display: flex; gap: 0; position: relative; padding-left: 18px; }
.sp-card__connector { position: absolute; left: 4px; top: -6px; bottom: 50%; width: 11px; border-left: 1.5px solid var(--line-strong); border-bottom: 1.5px solid var(--line-strong); border-bottom-left-radius: 7px; }
.sp-card__main { flex: 1; background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; min-width: 0; }
.sp-card.is-new .sp-card__main { border-color: color-mix(in srgb,var(--brand) 45%,var(--line)); background: var(--brand-soft); }
.sp-card__top { display: flex; align-items: center; gap: 8px; }
.sp-card__top b { font-size: 13.5px; font-weight: 600; }
.sp-stat { margin-left: auto; flex-shrink: 0; }
.sp-card__sub { font-size: 12px; color: var(--text-2); margin-top: 3px; }
.sp-card__sub i { font-style: normal; color: var(--text-3); }
.sp-card__oms { font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin: 7px 0 0; }
.sp-card__stats { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.sp-card__stats span { display: flex; flex-direction: column; font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }
.sp-card__stats b { font-size: 13px; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; }
.sp-tot { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-strong); }
.sp-tot > span { font-size: 12px; color: var(--text-2); }
.sp-tot > b { font-size: 15px; font-weight: 600; color: var(--brand); }
.sp-tot > i { font-style: normal; font-size: 10.5px; color: var(--text-3); margin-left: auto; }
.sp-foot { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-3); margin-right: auto; }
@media (max-width: 760px) { .sp-grid { grid-template-columns: 1fr; } .sp-col--list { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 18px; } }
.pjbar__title { text-align: left; padding: 4px 8px; border-radius: 8px; transition: background .15s; }
.pjbar__title:hover { background: var(--bg-2); }
.pjbar__title.is-cur { background: var(--brand-soft); }
.pjbar__title b { display: block; font-size: 19px; font-weight: 400; letter-spacing: -.02em; }
.pjbar__tags { display: flex; gap: 8px; margin-top: 5px; }
.pjtag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pjtag i { width: 7px; height: 7px; border-radius: 50%; }
.pjbar__meta { margin-left: auto; display: flex; gap: 26px; }
.pjbar__meta span { font-size: 10.5px; color: var(--text-3); }
.pjbar__meta b { display: block; font-size: 14px; font-weight: 500; margin-top: 2px; }

.spine { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; padding-bottom: 12px; }
.phbtn { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; border-radius: 9px; min-width: 86px; text-align: left; transition: background .15s; position: relative; flex-shrink: 0; }
.phbtn:hover { background: var(--bg-2); }
.phbtn.is-cur { background: var(--brand-soft); }
.phbtn__mark { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; flex-shrink: 0; }
.phbtn__label { font-size: 12px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.phbtn__num { font-style: normal; color: var(--text-3); }
.phbtn--done .phbtn__mark { background: var(--brand); color: #fff; }
.phbtn--done .phbtn__label { color: var(--text); }
.phbtn--active .phbtn__mark { background: var(--surface); border: 2px solid var(--brand); color: var(--brand); }
.phbtn--active .phbtn__label { color: var(--text); font-weight: 600; }
.phbtn--active .phbtn__mark em { font-style: normal; font-size: 8px; }
.phbtn--todo .phbtn__mark { background: var(--bg-2); border: 1px solid var(--line-strong); color: var(--text-3); }
.phbtn.is-cur .phbtn__label { color: var(--brand); }
.phbtn__bar { height: 3px; border-radius: 3px; background: var(--track); overflow: hidden; }
.phbtn__bar span { display: block; height: 100%; background: var(--brand); border-radius: 3px; }
.spine__gate { display: flex; align-items: center; padding: 0 8px; flex-shrink: 0; }
.spine__gate span { font-size: 9px; font-weight: 700; letter-spacing: .16em; color: var(--signal); writing-mode: horizontal-tb; padding: 4px 8px; border: 1px dashed var(--signal); border-radius: 6px; background: var(--signal-soft); white-space: nowrap; }

/* ---- shared bits ----------------------------------------- */
.kpi-strip--4 { grid-template-columns: repeat(4, 1fr); }
.portal-fab { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px;
  background: var(--navy); color: #fff; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-lg); transition: transform .2s; }
.portal-fab:hover { transform: translateY(-2px); }
.cmd__groups { padding: 8px; max-height: 56vh; overflow-y: auto; }
.cmd__group { margin-bottom: 6px; }

/* register-tabel (generiek) */
.reg { width: 100%; }
.reg__head, .reg__row { display: grid; grid-template-columns: 1.8fr 1.6fr 1fr 1fr .8fr auto; gap: 14px; align-items: center; }
.reg--crm .reg__head, .reg--crm .reg__row { grid-template-columns: 1.8fr 1.2fr 1fr 1.2fr .6fr; }
.reg__row--6 { grid-template-columns: .6fr 2fr 1.1fr 1.4fr 1fr 1fr !important; }
.reg__head { padding: 14px 20px; border-bottom: 1px solid var(--line); }
.reg__head span { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.reg__row { padding: 12px 20px; border-top: 1px solid var(--line); text-align: left; width: 100%; transition: background .12s; }
.reg__row:hover:not(.reg__row--static) { background: var(--bg-2); }
.reg__name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.reg__name b { font-size: 13.5px; font-weight: 500; }
.reg__name i { font-style: normal; font-size: 11px; color: var(--text-3); margin-left: 2px; }
.reg__cell { font-size: 13px; color: var(--text-2); min-width: 0; }
.stage-chip { font-size: 12.5px; font-weight: 600; }

/* macro-pill + portfolio sectie */
.port-sec { margin-top: 26px; }
.port-sec__h { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.port-sec__line { flex: 1; height: 1px; background: var(--line); }
.macro-pill { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.macro-pill--a { color: var(--steel); background: color-mix(in srgb, var(--steel) 12%, transparent); }
.macro-pill--b { color: var(--brand); background: var(--brand-soft); }

.pcard2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: var(--gap); }
.pcard2 { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); transition: all .2s; display: flex; flex-direction: column; gap: 11px; }
.pcard2:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.pcard2__top { display: flex; justify-content: space-between; align-items: center; }
.pcard2__stage { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.pcard2__stage i { width: 7px; height: 7px; border-radius: 50%; }
.pcard2__id { font-size: 11px; color: var(--text-3); font-weight: 500; }
.pcard2__name { font-size: 16.5px; font-weight: 500; letter-spacing: -.01em; }
.pcard2__sub { font-size: 12px; color: var(--text-2); }
.pcard2__foot { display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); }
.pcard2__foot span { font-size: 10.5px; color: var(--text-3); }
.pcard2__foot b { display: block; font-size: 13px; font-weight: 600; margin-top: 2px; }

/* mini-spine */
.mspine { display: flex; gap: 3px; }
.mspine__seg { flex: 1; height: 5px; border-radius: 3px; background: var(--track); overflow: hidden; }
.mspine__seg--done { background: var(--brand); }
.mspine__seg--active { background: var(--track); }
.mspine__seg--active i { display: block; height: 100%; background: var(--brand); border-radius: 3px; }

/* pipeline */
.pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pipe__col { background: var(--bg-2); border-radius: 12px; padding: 12px; }
.pipe__h { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin-bottom: 10px; }
.pipe__h em { font-style: normal; font-size: 10px; background: var(--surface); padding: 1px 7px; border-radius: 999px; color: var(--text-3); }
.pipe__card { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; margin-bottom: 8px; }
.pipe__card b { display: block; font-size: 12.5px; font-weight: 500; }
.pipe__card span { font-size: 11.5px; color: var(--text-3); }

/* leveranciers */
.lev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap); }
.lev-card__top { display: flex; align-items: center; justify-content: space-between; }
.lev-card__top b { font-size: 16px; font-weight: 500; }
.lev-card__cat { font-size: 12.5px; color: var(--text-2); display: block; margin-top: 4px; }
.lev-card__foot { display: flex; gap: 24px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.lev-card__foot span { font-size: 10.5px; color: var(--text-3); }
.lev-card__foot b { display: block; font-size: 16px; font-weight: 300; margin-top: 2px; }

/* instellingen */
.set-list { display: flex; flex-direction: column; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.set-row:first-child { border-top: none; }
.set-chip { width: 36px; height: 36px; border-radius: 9px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.set-row__main b { display: block; font-size: 13.5px; font-weight: 500; }
.set-row__main span { font-size: 11.5px; color: var(--text-3); }
.tarief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; }
.tarief-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.tarief-nr { width: 22px; height: 22px; border-radius: 6px; background: var(--bg-2); font-size: 11px; font-weight: 600; color: var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tarief-type { flex: 1; font-size: 12.5px; color: var(--text-2); }
.tarief-row b { font-size: 12.5px; font-weight: 600; }
.set-kv { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.set-kv span { color: var(--text-2); }
.set-kv b { font-weight: 600; }
.hs-swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hs-sw { display: flex; align-items: center; gap: 9px; }
.hs-sw span { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); }
.hs-sw b { font-size: 12px; font-weight: 500; }

/* ---- bibliotheek ----------------------------------------- */
.bib-filters { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.bib-search { display: flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); min-width: 280px; }
.bib-search input { border: none; outline: none; background: none; font-family: inherit; font-size: 13px; color: var(--text); flex: 1; }
.bib-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: stretch; }
.bib-list__head { display: grid; grid-template-columns: 70px 1fr auto auto; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.bib-row { display: grid; grid-template-columns: 70px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); width: 100%; text-align: left; transition: background .12s; }
.bib-row:hover { background: var(--bg-2); }
.bib-row.is-on { background: var(--brand-soft); }
.bib-row__code { font-family: 'Roboto Mono', monospace; font-size: 12px; font-weight: 500; color: var(--text-2); }
.bib-row__name b { font-size: 13px; font-weight: 500; }
.bib-row__name i { display: block; font-style: normal; font-size: 11px; color: var(--text-3); }
.bib-row__prijs { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.bib-detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.bib-detail__meta { display: flex; gap: 6px; flex-wrap: wrap; }
.bib-fasen { display: flex; flex-direction: column; gap: 16px; }
.bib-fase__h { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin-bottom: 8px; }
.bib-fase__n { width: 20px; height: 20px; border-radius: 6px; background: var(--bg-2); color: var(--text-3); display: flex; align-items: center; justify-content: center; font-size: 11px; }
.recept-row { display: flex; align-items: center; gap: 12px; padding: 9px 0 9px 30px; border-top: 1px solid var(--line); }
.recept-row__soort { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; flex-shrink: 0; width: 46px; text-align: center; }
.recept-row__soort--materiaal { background: color-mix(in srgb,var(--steel) 14%,transparent); color: var(--steel); }
.recept-row__soort--arbeid { background: var(--brand-soft); color: var(--brand); }
.recept-row__main { flex: 1; min-width: 0; }
.recept-row__main b { font-size: 12.5px; font-weight: 500; }
.recept-row__main span { display: block; font-size: 11px; color: var(--text-3); }
.recept-row__keuze { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--text-3); padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; }
.recept-row__prijs { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.bib-detail__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.bib-detail__foot span { font-size: 12px; color: var(--text-3); }
.bib-detail__prijs { font-size: 22px; font-weight: 300; letter-spacing: -.02em; }
.bib-detail__prijs i { font-style: normal; font-size: 13px; color: var(--text-3); }

/* ---- projectstart ---------------------------------------- */
.aandacht { display: flex; flex-direction: column; }
.aandacht__row { display: flex; align-items: center; gap: 13px; padding: 13px 8px; border-top: 1px solid var(--line); text-align: left; width: 100%; border-radius: 8px; transition: background .12s; }
.aandacht__row:first-child { border-top: none; }
.aandacht__row:hover { background: var(--bg-2); }
.aandacht__icon { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.aandacht__main { flex: 1; }
.aandacht__main b { display: block; font-size: 13px; font-weight: 500; }
.aandacht__main span { font-size: 11.5px; color: var(--text-3); }
.fase-list { display: flex; flex-direction: column; }
.fase-row { display: flex; align-items: center; gap: 11px; padding: 9px 8px; border-radius: 8px; width: 100%; text-align: left; transition: background .12s; }
.fase-row:hover { background: var(--bg-2); }
.fase-row__mark { width: 19px; height: 19px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; flex-shrink: 0; background: var(--bg-2); border: 1px solid var(--line-strong); color: var(--text-3); }
.fase-row--done .fase-row__mark { background: var(--brand); border-color: var(--brand); color: #fff; }
.fase-row--active .fase-row__mark { border-color: var(--brand); color: var(--brand); background: var(--surface); }
.fase-row--active .fase-row__mark em { font-style: normal; font-size: 8px; }
.fase-row__label { flex: 1; font-size: 13px; color: var(--text-2); }
.fase-row--done .fase-row__label, .fase-row--active .fase-row__label { color: var(--text); }
.fase-row__bar { width: 60px; height: 4px; border-radius: 4px; background: var(--track); overflow: hidden; }
.fase-row__bar i { display: block; height: 100%; background: var(--brand); }
.fase-row__done { font-size: 10.5px; color: var(--text-3); }
.dashfin { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dashfin__f { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 12px; background: var(--bg-2); }
.dashfin__f span { font-size: 11px; font-weight: 500; color: var(--text-3); letter-spacing: .02em; }
.dashfin__f b { font-size: 25px; font-weight: 200; letter-spacing: -.02em; }
.dashfin__f i { font-style: normal; font-size: 11px; color: var(--text-2); }
.dashfin__f.is-accent { background: var(--brand-soft); }
.dashfin__f.is-accent b { color: var(--brand); font-weight: 300; }
.dinko { display: flex; flex-direction: column; }
.dinko__row { display: grid; grid-template-columns: 1fr 90px 80px 78px; gap: 14px; align-items: center; padding: 12px 8px; border-top: 1px solid var(--line); text-align: left; width: 100%; border-radius: 8px; transition: background .12s; }
.dinko__row:first-child { border-top: none; }
.dinko__row:hover { background: var(--bg-2); }
.dinko__main { min-width: 0; }
.dinko__main b { font-size: 13px; font-weight: 500; display: block; }
.dinko__main span { font-size: 11px; color: var(--text-3); }
.dinko__bar { height: 6px; border-radius: 6px; background: var(--track); overflow: hidden; }
.dinko__bar i { display: block; height: 100%; border-radius: 6px; }
.dinko__bedrag { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.dinko__pct { font-size: 12.5px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; flex-shrink: 0; }
@media (max-width: 1080px) { .dashfin { grid-template-columns: repeat(2, 1fr); } }

/* ---- projectstatusbalk (ruggengraat bovenin) ------------- */
.pstat { display: flex; align-items: center; gap: 22px; padding: 16px 20px; margin-bottom: var(--gap);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.pstat__lead { display: flex; align-items: baseline; gap: 9px; flex-shrink: 0; }
.pstat__pct { font-size: 30px; font-weight: 200; letter-spacing: -.02em; line-height: 1; }
.pstat__lead span { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.pstat__spine { flex: 1; min-width: 0; }
.pstat__segs { display: flex; gap: 3px; }
.pstat__seg { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; text-align: left; }
.pstat__bar { height: 7px; border-radius: 4px; background: var(--track); overflow: hidden; }
.pstat__bar i { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.pstat__seg--done .pstat__bar i { width: 100%; }
.pstat__lab { font-size: 9.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pstat__seg--active .pstat__lab { color: var(--text); font-weight: 600; }
.pstat__seg--active .pstat__bar { box-shadow: 0 0 0 2px var(--brand-soft); }
.pstat__now { flex-shrink: 0; text-align: right; }
.pstat__now b { font-size: 14px; font-weight: 500; display: block; }
.pstat__now span { font-size: 11px; color: var(--text-3); }
@media (max-width: 1080px) { .pstat { flex-wrap: wrap; gap: 14px; } .pstat__lab { display: none; } }

/* ---- financieel: opbouw + kostensoorten ------------------ */
.fcomp { display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 4px; }
.fcat { display: grid; grid-template-columns: 150px 1fr 96px; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.fcat:first-child { border-top: none; }
.fcat__name { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; min-width: 0; }
.fcat__name i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.fcat__track { position: relative; height: 20px; border-radius: 6px; background: var(--track); overflow: hidden; }
.fcat__besteed { position: absolute; left: 0; top: 0; height: 100%; border-radius: 6px; }
.fcat__verwacht { position: absolute; top: 0; height: 100%; background-image: repeating-linear-gradient(45deg, color-mix(in srgb,var(--steel) 38%,transparent) 0 5px, transparent 5px 10px); border-right: 1px dashed var(--line-strong); }
.fcat__amt { text-align: right; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fcat__amt span { display: block; font-size: 10px; font-weight: 400; color: var(--text-3); }
.fcat-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.fcat-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-2); }
.fcat-legend i { width: 12px; height: 8px; border-radius: 2px; display: inline-block; }
.fak { display: flex; align-items: center; gap: 13px; margin-top: 14px; padding: 13px 15px; border-radius: 12px; background: color-mix(in srgb,var(--amber) 8%, var(--surface)); border: 1px solid color-mix(in srgb,var(--amber) 24%, var(--line)); }
.fak__ic { width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb,var(--amber) 16%,transparent); color: var(--amber); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fak__main { flex: 1; }
.fak__main b { font-size: 13.5px; font-weight: 600; display: block; }
.fak__main span { font-size: 11.5px; color: var(--text-2); }

/* ============================================================
   Financiële staat — moderne projectresultaat-overzicht
   ============================================================ */
.fst { --fst-cols: minmax(208px, 1.7fr) repeat(5, minmax(86px, 1fr)) 116px; }
.fst__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.fst__title { display: flex; align-items: baseline; gap: 12px; }
.fst__title h3 { font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.fst__title span { font-size: 11.5px; color: var(--text-3); }
.fst__tools { display: flex; align-items: center; gap: 16px; }
.fst-toggle { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-2); cursor: pointer; user-select: none; }
.fst-toggle__sw { width: 38px; height: 22px; border-radius: 999px; background: var(--line-strong); position: relative; transition: background .18s; flex-shrink: 0; }
.fst-toggle__sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s; }
.fst-toggle.is-on .fst-toggle__sw { background: var(--brand); }
.fst-toggle.is-on .fst-toggle__sw::after { transform: translateX(16px); }

.fst__scroll { overflow-x: auto; }
.fst__grid { min-width: 1080px; }
.fst-sec { display: grid; grid-template-columns: var(--fst-cols); align-items: center; gap: 10px; padding: 11px 20px;
  background: var(--bg-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1; }
.fst-sec__name { display: flex; align-items: center; gap: 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.fst-sec__name i { width: 7px; height: 16px; border-radius: 3px; flex-shrink: 0; }
.fst-sec__col { font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); text-align: right; display: inline-flex; align-items: center; gap: 5px; justify-content: flex-end; }
.fst-sec__col svg { color: var(--text-3); opacity: .6; }
.fst-sec__col.is-key { color: var(--text); }
.fst-sec__last { font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); text-align: center; }

.fst-row { display: grid; grid-template-columns: var(--fst-cols); align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); transition: background .12s; }
.fst-row:hover { background: var(--bg-2); }
.fst-row__name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fst-row__dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.fst-row__name b { font-size: 13px; font-weight: 500; }
.fst-golink { font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 5px; border-radius: 5px; padding: 1px 5px; margin: -1px -5px; transition: color .12s, background .12s; cursor: pointer; }
.fst-golink svg { opacity: 0; transform: translateX(-2px); transition: opacity .12s, transform .12s; color: var(--brand); }
.fst-golink:hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.fst-golink:hover svg { opacity: 1; transform: none; }
.fst-sec__name .fst-golink { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fst-row__name b.fst-golink { font-weight: 500; }
.fst-exp { width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); flex-shrink: 0; transition: background .12s, transform .15s; margin-left: -4px; }
.fst-exp:hover { background: var(--line); color: var(--text); }
.fst-exp.is-open { transform: rotate(90deg); }
.fst-spacer { width: 18px; flex-shrink: 0; margin-left: -4px; }
.fst-num { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.fst-num.is-mut { color: var(--text-3); }
.fst-num.is-zero { color: var(--text-3); opacity: .55; }
.fst-num.is-key { font-weight: 600; }
.fst-num.is-neg { color: var(--neg); }
.fst-mini { height: 9px; border-radius: 5px; background: var(--track); overflow: visible; position: relative; }
.fst-mini i { display: block; height: 100%; border-radius: 5px; position: absolute; left: 0; top: 0; }
.fst-mini__spent { background: rgba(12,48,55,.30) !important; mix-blend-mode: multiply; border-radius: 5px 0 0 5px !important; }
.fst-mini__target { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); border-radius: 1px; transform: translateX(-1px); }

.fst-sub { display: grid; grid-template-columns: var(--fst-cols); align-items: center; gap: 10px; padding: 8px 20px 8px 0; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 55%, transparent); }
.fst-sub .fst-row__name { padding-left: 38px; }
.fst-sub .fst-row__name b { font-size: 12px; font-weight: 400; color: var(--text-2); }
.fst-sub .fst-num { font-size: 12px; color: var(--text-2); }

.fst-tot { display: grid; grid-template-columns: var(--fst-cols); align-items: center; gap: 10px; padding: 12px 20px; border-top: 1.5px solid var(--line-strong); background: var(--bg-2); }
.fst-tot__name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.fst-tot .fst-num { font-weight: 700; }

.fst-result { display: grid; grid-template-columns: var(--fst-cols); align-items: center; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--pos) 9%, var(--surface)); }
.fst-result .fst-row__name b { font-size: 14px; font-weight: 700; }
.fst-result .fst-num { font-size: 14px; font-weight: 700; color: var(--text); }
.fst-result .fst-num.is-key { color: var(--pos-tekst); font-size: 16px; }
.fst-result--neg { background: color-mix(in srgb, var(--neg) 9%, var(--surface)); }
.fst-result--neg .fst-num.is-key { color: var(--neg); }

.fst-marge { display: grid; grid-template-columns: var(--fst-cols); align-items: center; gap: 10px; padding: 14px 20px 16px; border-top: 1px solid color-mix(in srgb, var(--pos) 22%, var(--line));
  background: color-mix(in srgb, var(--pos) 9%, var(--surface)); }
.fst-marge .fst-row__name b { font-size: 13px; font-weight: 700; }
.fst-marge__gauge { grid-column: 2 / -2; display: flex; align-items: center; gap: 12px; }
.fst-marge__track { flex: 1; height: 9px; border-radius: 5px; background: color-mix(in srgb, var(--text-3) 20%, transparent); overflow: hidden; position: relative; }
.fst-marge__track i { display: block; height: 100%; border-radius: 5px; background: var(--pos); }
.fst-marge__track em { position: absolute; top: -3px; width: 2px; height: 15px; background: var(--text-2); }
.fst-marge__pct { font-size: 14px; font-weight: 700; color: var(--pos-tekst); text-align: right; font-variant-numeric: tabular-nums; }
.fst-marge__pct.is-mut { color: var(--text-3); font-weight: 600; font-size: 12px; }

.fst-foot { display: flex; flex-wrap: wrap; gap: 18px; padding: 13px 20px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--text-3); }
.fst-foot span { display: inline-flex; align-items: center; gap: 7px; }
.fst-foot i { width: 12px; height: 8px; border-radius: 2px; display: inline-block; }

/* ============================================================
   Uitvraag-portaal (Cooper-zijde inkoop-cockpit)
   ============================================================ */
.uv-intro { font-size: 13px; color: var(--text-2); line-height: 1.55; margin: -4px 0 16px; max-width: 720px; }
.uv-ov { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.uv-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: left; transition: border-color .15s, box-shadow .15s; }
.uv-card:hover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.uv-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.uv-card__id { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.uv-card__title b { font-size: 15px; font-weight: 500; display: block; margin-top: 3px; }
.uv-card__title span { font-size: 11.5px; color: var(--text-3); }
.uv-card__deadline { text-align: right; flex-shrink: 0; }
.uv-card__deadline b { font-size: 12.5px; font-weight: 600; color: var(--amber-tekst); display: block; }
.uv-card__deadline span { font-size: 10.5px; color: var(--text-3); }
.uv-card__resp { display: flex; align-items: center; gap: 10px; }
.uv-dots { display: flex; gap: 4px; }
.uv-dot { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 700; }
.uv-card__resptxt { font-size: 11.5px; color: var(--text-2); }
.uv-card__resptxt b { font-weight: 600; }
.uv-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 13px; border-top: 1px solid var(--line); }
.uv-card__best span { font-size: 10.5px; color: var(--text-3); display: block; }
.uv-card__best b { font-size: 14px; font-weight: 600; }
.uv-card__best em { font-style: normal; font-size: 11px; margin-left: 6px; }
.uv-card__open { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--brand); }
.uv-card:hover .uv-card__open { gap: 9px; }

/* detail */
.uv-back { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-bottom: 16px; }
.uv-back:hover { color: var(--text); }
.uv-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 16px 0 var(--gap); }
.uv-meta > div { background: var(--surface); padding: 12px 16px; }
.uv-meta span { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); display: block; }
.uv-meta b { font-size: 13px; font-weight: 500; display: block; margin-top: 4px; }
.uv-meta b.is-amber { color: var(--amber-tekst); }

.uv-thead, .uv-prow { display: grid; grid-template-columns: 1.6fr 0.95fr 1.15fr 0.85fr 0.8fr 80px; gap: 11px; align-items: center; }
.uv-thead { padding: 11px 18px; border-bottom: 1px solid var(--line); }
.uv-thead span { font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.uv-thead .r { text-align: right; }
.uv-prow { padding: 13px 18px; border-top: 1px solid var(--line); transition: background .12s; }
.uv-prow:first-of-type { border-top: none; }
.uv-prow:hover { background: var(--bg-2); }
.uv-party { display: flex; align-items: center; gap: 11px; min-width: 0; }
.uv-party .rel-ava { width: 32px; height: 32px; font-size: 11px; border-radius: 9px; }
.uv-party__nm b { font-size: 13px; font-weight: 500; display: block; }
.uv-party__nm span { font-size: 11px; color: var(--text-3); }
.uv-status { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.uv-status__lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; }
.uv-status i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.uv-status__sub { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 10px; color: var(--text-3); }
.uv-status__sub.is-open { color: var(--text-2); }
.uv-status__sub > svg { color: var(--pos); flex-shrink: 0; }
.uv-pprog { display: flex; align-items: center; gap: 9px; }
.uv-pprog__bar { flex: 1; height: 6px; border-radius: 4px; background: var(--track); overflow: hidden; }
.uv-pprog__bar i { display: block; height: 100%; border-radius: 4px; }
.uv-pprog span { font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.uv-bedrag { text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.uv-bedrag.is-empty { color: var(--text-3); font-weight: 400; }
.uv-delta { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.uv-pact { text-align: right; }
.uv-best-banner { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border-radius: 12px; background: var(--brand-soft); margin-top: 14px; }
.uv-best-banner__ic { width: 34px; height: 34px; border-radius: 9px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.uv-best-banner__t { flex: 1; }
.uv-best-banner__t b { font-size: 13.5px; font-weight: 600; display: block; }
.uv-best-banner__t span { font-size: 11.5px; color: var(--text-2); }

.uv-tl { display: flex; flex-direction: column; }
.uv-tl__row { display: flex; gap: 12px; padding: 9px 0; }
.uv-tl__ic { width: 26px; height: 26px; border-radius: 7px; background: var(--bg-2); color: var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.uv-tl__c b { font-size: 12.5px; font-weight: 500; display: block; line-height: 1.35; }
.uv-tl__c span { font-size: 11px; color: var(--text-3); }
.uv-doc { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--line); width: 100%; text-align: left; }
.uv-doc:first-child { border-top: none; }
.uv-doc__ic { width: 28px; height: 28px; border-radius: 7px; background: var(--bg-2); color: var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.uv-doc__m { flex: 1; min-width: 0; }
.uv-doc__m b { font-size: 12px; font-weight: 500; display: block; }
.uv-doc__m span { font-size: 10.5px; color: var(--text-3); }
.uv-doc:hover .uv-doc__dl { color: var(--brand); }
.uv-doc__dl { color: var(--text-3); }

/* vergelijk & gun */
.gun-awards { display: grid; gap: 12px; padding: 16px 18px; }
.gun-card { display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.gun-card.is-best { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.gun-card.is-gegund { border-color: var(--brand); background: var(--brand-soft); }
.gun-card__nm { min-width: 0; }
.gun-card__nm b { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.gun-card__nm b em { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); padding: 2px 6px; border-radius: 5px; }
.gun-card__nm span { font-size: 11.5px; color: var(--text-3); }
.gun-card__fig { text-align: right; }
.gun-card__fig b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gun-card__fig span { font-size: 11px; display: block; }
.gun-card__btn { min-width: 124px; text-align: right; }
.gun-banner { display: flex; align-items: center; gap: 13px; padding: 14px 18px; border-radius: 12px; background: color-mix(in srgb, var(--pos) 11%, var(--surface)); border: 1px solid color-mix(in srgb, var(--pos) 26%, var(--line)); margin: 0 18px 16px; }
.gun-banner__ic { width: 38px; height: 38px; border-radius: 10px; background: var(--pos); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gun-banner__t b { font-size: 14px; font-weight: 600; display: block; }
.gun-banner__t span { font-size: 12px; color: var(--text-2); }

/* ontvangen offerte (Bekijk) + herinner-toast */
.uvoff { width: min(720px, 94vw); max-height: 78vh; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; animation: pop .16s ease; }
.uvoff__head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.uvoff__head .rel-ava { width: 42px; height: 42px; font-size: 14px; border-radius: 12px; }
.uvoff__head-t { flex: 1; min-width: 0; }
.uvoff__head-t b { font-size: 15px; font-weight: 500; display: block; }
.uvoff__head-t span { font-size: 12px; color: var(--text-3); }
.uvoff__close { width: 30px; height: 30px; border-radius: 8px; color: var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; }
.uvoff__close:hover { background: var(--bg-2); color: var(--text); }
.uvoff__body { padding: 6px 22px 18px; overflow-y: auto; }
.uvoff-sec { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 18px 0 6px; }
.uvoff-hrow, .uvoff-row { display: grid; grid-template-columns: 1fr 78px 104px 112px; gap: 12px; align-items: center; }
.uvoff-hrow { padding: 6px 0 8px; }
.uvoff-hrow span { font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.uvoff-hrow .r, .uvoff-row .r { text-align: right; }
.uvoff-row { padding: 9px 0; border-top: 1px solid var(--line); }
.uvoff-row__nm b { font-size: 12.5px; font-weight: 500; display: block; }
.uvoff-row__nm span { font-size: 11px; color: var(--text-3); }
.uvoff-num { text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.uvoff-num.is-mut { color: var(--text-3); }
.uvoff-tot { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13px; }
.uvoff-tot span { color: var(--text-2); }
.uvoff-tot--sum { border-top: 1px solid var(--line-strong); margin-top: 4px; padding-top: 11px; font-weight: 600; }
.uvoff-cond { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 18px; }
.uvoff-cond > div span { font-size: 10.5px; color: var(--text-3); display: block; }
.uvoff-cond > div b { font-size: 13px; font-weight: 500; }
.uvoff-file { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; }
.uvoff-file__ic { width: 30px; height: 30px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.uvoff-file__m b { font-size: 12.5px; font-weight: 500; display: block; }
.uvoff-file__m span { font-size: 11px; color: var(--text-3); }
.uvoff__foot { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-shrink: 0; }
.uvoff__foot-t span { font-size: 11px; color: var(--text-3); display: block; }
.uvoff__foot-t b { font-size: 16px; font-weight: 600; }

.uv-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 220; display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--navy); color: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 13px; font-weight: 500; animation: pop .18s ease; }
.uv-toast svg { color: var(--brand); }
.uv-herinnerd { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--brand); }

@media (max-width: 760px) { .uv-ov { grid-template-columns: 1fr; } .uv-meta { grid-template-columns: repeat(2, 1fr); }
  .uv-thead, .uv-prow { grid-template-columns: 1.5fr 1fr 1fr 80px; } .uv-thead span:nth-child(3), .uv-prow > *:nth-child(3), .uv-thead span:nth-child(5), .uv-prow > *:nth-child(5) { display: none; } }
.fak__amt { text-align: right; }
.fak__amt b { font-size: 16px; font-weight: 500; }
.fak__amt span { font-size: 11px; color: var(--text-3); display: block; }

/* ---- viewer + cov + cat ---------------------------------- */
.viewer { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); display: flex; flex-direction: column; min-height: 420px; }
.viewer__bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.viewer__tabs { display: flex; gap: 4px; }
.viewer__tab { font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 7px; color: var(--text-3); }
.viewer__tab.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.viewer__tools { display: flex; gap: 12px; color: var(--text-3); }
.viewer__canvas { flex: 1; position: relative; background: var(--bg-2); display: flex; align-items: center; justify-content: center; min-height: 360px; }
.viewer__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 32px 32px; opacity: .5; }
.viewer__label { position: relative; font-family: 'Roboto Mono', monospace; font-size: 11px; letter-spacing: .1em; color: var(--text-3); }
.cov { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: var(--gap); padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); }
.cov__item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--text-3); padding: 5px 11px; border-radius: 999px; background: var(--bg-2); }
.cov__item.is-ok { color: var(--brand); background: var(--brand-soft); }
.cov__verdict { margin-left: auto; font-size: 12.5px; color: var(--text-2); }
.catpill { font-size: 10px; font-weight: 700; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid; display: inline-flex; align-items: center; justify-content: center; }
.dcat { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; text-transform: capitalize; }
.dcat i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.docviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-bottom: var(--gap); }
.docview { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.docview__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.docview__head b { font-size: 12.5px; font-weight: 600; }
.docview__head span { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.viewer--compact .viewer__canvas { min-height: 200px; }
.viewer__foot { padding: 9px 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--text-3); background: var(--bg-2); }
.viewer__foot b { color: var(--text-2); font-weight: 600; }
@media (max-width: 1080px) { .docviews { grid-template-columns: 1fr; } }
.doc-split, .uittrek-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--gap); align-items: start; }
.uittrek-split--full { grid-template-columns: 1fr; }
.dcde__head, .dcde__row { display: grid; grid-template-columns: 2fr .9fr .5fr 1.4fr .9fr; gap: 12px; align-items: center; }
.dcde__head { padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.dcde__row { padding: 11px 18px; border-top: 1px solid var(--line); width: 100%; text-align: left; transition: background .12s; }
.dcde__row:hover { background: var(--bg-2); }
.dcde__row.is-on { background: var(--brand-soft); }
.dcde__name { display: flex; align-items: center; gap: 10px; }
.dcde__name b { font-size: 12.5px; font-weight: 500; }
.dcde__name i { display: block; font-style: normal; font-size: 10.5px; color: var(--text-3); }
.dcde__rev { font-family: 'Roboto Mono', monospace; font-size: 12px; color: var(--text-2); }
.dcde__door { font-size: 12px; color: var(--text-2); }

/* uittrek */
.gate-banner { display: flex; align-items: center; gap: 11px; padding: 13px 18px; border-radius: 12px; background: color-mix(in srgb,var(--amber) 8%,transparent); border: 1px solid color-mix(in srgb,var(--amber) 22%,transparent); margin-bottom: var(--gap); font-size: 13px; color: var(--text-2); }
.utk__head, .utk__row { display: grid; grid-template-columns: 80px 1fr 80px 50px 1.25fr 1.15fr 90px; gap: 12px; align-items: center; }
.utk__head { padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.utk__row { padding: 11px 18px; border-top: 1px solid var(--line); }
.utk__ref { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-2); }
/* collapsible STABU-hoofdstuk */
.utk-grp__bar { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--bg-2); cursor: pointer; text-align: left; transition: background .12s; }
.utk-grp__bar:hover { background: color-mix(in srgb, var(--bg-2) 60%, var(--line)); }
.utk-grp__chev { color: var(--text-3); flex-shrink: 0; transition: transform .15s; }
.utk-grp__code { font-family: 'Roboto Mono', monospace; font-size: 12px; font-weight: 600; color: var(--brand); }
.utk-grp__naam { font-size: 13px; font-weight: 600; color: var(--text); }
.utk-grp__count { margin-left: auto; font-size: 11px; color: var(--text-3); }
.utk-grp .utk__row:first-of-type { border-top: 1px solid var(--line); }
.utk__code { font-family: 'Roboto Mono', monospace; font-size: 12px; font-weight: 500; color: var(--text-2); }
/* STABU-kleurstandaard: vast blokje per hoofdstuk en onderdeel */
.utk-stabu { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent); }
.utk-stabu--klein { width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.utk__oms { font-size: 12.5px; }
.utk__num { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.utk__maten { display: block; font-size: 10.5px; font-weight: 400; font-style: normal; color: var(--text-3); white-space: nowrap; }
.utk__maten--afwijk { color: var(--amber-tekst); }
.utk__eh { font-size: 11.5px; color: var(--text-3); }
.utk__bron { display: flex; align-items: center; gap: 8px; }
.utk__bron i { font-style: normal; font-size: 11px; color: var(--text-3); }
.utk__fout { font-size: 12px; text-align: right; font-weight: 500; }
.utk-legend { display: flex; gap: 18px; padding: 12px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.utk-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-3); }

/* ---- calculatieblad -------------------------------------- */
.calc-screen { max-width: 1820px; }
.calc-hero { background: linear-gradient(118deg, #14273e, #0d1a2b); border-radius: 16px; padding: 22px 26px; margin-bottom: 14px; box-shadow: var(--shadow); }
.calc-hero__title { font-size: 20px; font-weight: 500; letter-spacing: -.01em; color: #fff; }
.calc-hero__sub { font-size: 12.5px; color: rgba(255,255,255,.6); margin-top: 7px; max-width: 940px; line-height: 1.55; }
.calc-bar { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; padding: 13px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); }
.calc-bar__stats { display: flex; align-items: center; gap: 26px; }
.calc-stat { display: flex; flex-direction: column; gap: 2px; }
.calc-stat b { font-size: 24px; font-weight: 300; letter-spacing: -.02em; line-height: 1; }
.calc-stat span { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.calc-bar__prog { width: 130px; height: 6px; border-radius: 6px; background: var(--track); overflow: hidden; align-self: center; }
.calc-bar__prog i { display: block; height: 100%; background: var(--brand); }
.calc-bar__actions { margin-left: auto; display: flex; gap: 8px; }
.staart { position: sticky; bottom: 16px; z-index: 20; margin-left: auto; width: 340px; max-width: 100%; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 14px 16px; margin-top: 18px; display: flex; flex-direction: column; gap: 1px; }
.staart__title { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); margin-bottom: 7px; }
.staart__line { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 5px 0; }
.staart__line > span { font-size: 11.5px; font-weight: 500; color: var(--text-2); display: inline-flex; align-items: baseline; gap: 5px; }
.staart__pctlbl { font-style: normal; font-size: 10px; font-weight: 600; color: var(--text-3); }
.staart__line > b { font-size: 15px; font-weight: 400; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.staart__line--sub { margin-top: 2px; padding-top: 6px; border-top: 1px dashed var(--line); }
.staart__line--sub > span, .staart__line--sub > b { font-weight: 600; color: var(--text); }
.staart__line--sum { margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--line-strong); }
.staart__line--sum > span { font-weight: 700; color: var(--text); font-size: 12.5px; }
.staart__line--sum > b { font-weight: 600; color: var(--brand); font-size: 21px; }
.staart__line--kpi { padding: 1px 0; }
.staart__line--kpi > span, .staart__line--kpi > b { font-size: 10.5px; color: var(--text-3); font-weight: 500; }
.staart__cell { display: flex; flex-direction: column; }
.staart__cell span { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.staart__cell b { font-size: 18px; font-weight: 300; letter-spacing: -.01em; }
.staart__cell--sum b { font-weight: 500; color: var(--brand); font-size: 22px; }
.staart__eq { font-size: 18px; color: var(--text-3); font-weight: 300; }
.staart__actions { margin-left: auto; display: flex; gap: 8px; }
.staartbalk { position: sticky; bottom: 0; z-index: 20; margin-top: 18px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px 14px 0 0; box-shadow: var(--shadow-lg); }
.staartbalk__kern { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 26px; padding: 10px 190px 10px 30px; }
.staartbalk__toggle { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); background: none; border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; cursor: pointer; align-self: center; }
.staartbalk__toggle:hover { border-color: var(--brand); color: var(--brand); }
.staartbalk__kv { display: inline-flex; align-items: baseline; gap: 8px; }
.staartbalk__kv i { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.staartbalk__kv b { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.staartbalk__kv--sum { margin-left: auto; }
/* h106: aanneemsom en incl. btw blijven samen; past de regel niet, dan gaan ze samen naar rechts op de volgende regel
   in plaats van dat Incl. btw alleen links onder de balk komt (ruimte voor de zwevende knoppen blijft) */
.staartbalk__som { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 6px 26px; margin-left: auto; min-width: 0; }
.staartbalk__som > .staartbalk__kv--sum { margin-left: 0; }
.staartbalk__kv--sum b { font-size: 19px; font-weight: 600; color: var(--brand); }
.staartbalk__opbouw { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 370px)); gap: 14px 16px; align-items: start; padding: 14px 170px 12px 30px; border-bottom: 1px solid var(--line); max-height: 46vh; overflow: auto; }
.staartbalk__opbouw > .staart__line { grid-column: 1 / -1; }
/* h102 (Q15b): uitleg onder de staart (vaste percentages, afwijkingen) als lopende zin. */
.staartbalk__noot { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--text-2); }
.staartbalk__noot > b { font-weight: 600; color: var(--text); }
.staartbalk__noot ul { flex-basis: 100%; margin: 0; padding-left: 18px; }
/* Meldpunt Max 28-09: de opbouw als drie blokken in rekenvolgorde, elk met een eigen subtotaal. */
.staartblok { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px 8px; background: var(--surface-2, var(--surface)); }
.staartblok--som { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.staartblok__kop { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
.staartblok__nr { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 10px; letter-spacing: 0; }
.staartblok .staart__line--sum { margin-top: 2px; }
.staartblok__kpi { margin-top: 6px; padding-top: 5px; border-top: 1px dashed var(--line); }
/* h35: op de telefoon werd de staartbalk een hoog blok dat de calculatie afdekte; compact houden. */
@media (max-width: 720px) {
  .staartbalk { margin-top: 12px; border-radius: 12px 12px 0 0; }
  .staartbalk__kern { gap: 2px 14px; padding: 6px 12px; }
  .staartbalk__toggle { padding: 3px 8px; font-size: 11px; }
  .staartbalk__kv { gap: 6px; }
  .staartbalk__kv i { font-size: 9.5px; white-space: nowrap; }
  .staartbalk__kv b { font-size: 13px; }
  .staartbalk__kv--sum { margin-left: 0; }
  .staartbalk__som { margin-left: 0; gap: 2px 14px; justify-content: flex-start; }
  /* directe kosten en opslagen staan in de opbouw; dichtgeklapt alleen de aanneemsom en incl. btw */
  .staartbalk__kv--detail { display: none; }
  .staartbalk__kv--sum b { font-size: 15px; }
  .staartbalk__opbouw { grid-template-columns: 1fr; gap: 10px; padding: 10px 12px 6px; max-height: 38vh; }
}
.calc-allin { text-align: center; font-style: italic; color: var(--text-2); background: color-mix(in srgb, var(--amber) 8%, transparent); border-radius: 6px; padding: 2px 6px; }
.calc-lockbanner { background: color-mix(in srgb, var(--pos) 8%, transparent); border-color: color-mix(in srgb, var(--pos) 30%, transparent); }
.btn--ghost.is-on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.calc-table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); font-size: 12.5px; }
.calc-head { display: grid; grid-template-columns: 64px 2.3fr 56px 34px 48px 70px .85fr .9fr .85fr .82fr .82fr .92fr 46px; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--line-strong); background: var(--bg-2); }
.calc-head span { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); text-align: right; }
.calc-head span:first-child { text-align: left; }
.calc-chapter { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: linear-gradient(90deg, #14273e, #20364f); border-top: 1px solid var(--line); font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #fff; text-transform: uppercase; }
.calc-chapter b { font-family: 'Roboto Mono', monospace; color: #fff; background: rgba(255,255,255,.16); padding: 2px 8px; border-radius: 5px; }
.calc-chapter--sub { padding-left: 34px; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--brand) 45%, transparent); font-weight: 500; }
.calc-chapnm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Hoofdstuk in-/uitvouwen */
.calc-chaptoggle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; padding: 0; border: 0; border-radius: 5px; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; transition: background .12s; }
.calc-chaptoggle:hover { background: rgba(255,255,255,.22); }
.calc-chaptoggle svg { transition: transform .15s; }
.calc-chapcount { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.62); background: rgba(255,255,255,.1); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.calc-chapter.is-collapsed { border-bottom: 1px solid var(--line); }
.calc-chapedit { font: inherit; font-size: 12px; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 7px; padding: 4px 9px; min-width: 220px; }
.calc-chapedit:focus { outline: none; border-color: var(--brand); }
.calc-chapadd { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.calc-chapter .calc-chapadd { opacity: 0; transition: opacity .12s; }
.calc-chapter:hover .calc-chapadd { opacity: 1; }
.calc-chapadd button { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 11px; font-weight: 600; color: var(--brand); background: var(--brand-soft); padding: 4px 9px; border-radius: 7px; }
.calc-chapadd button:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.calc-chapadd .calc-chapdel { color: var(--neg); background: transparent; padding: 4px 6px; }
.calc-chapadd .calc-chapdel:hover { background: var(--signal-soft); }
.calc-addbar { display: flex; justify-content: center; padding: 14px 16px; }
.calc-addbar__btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--brand); background: var(--brand-soft); border: 1px dashed color-mix(in srgb, var(--brand) 40%, transparent); border-radius: 10px; padding: 9px 16px; cursor: pointer; }
.calc-addbar__btn:hover { background: color-mix(in srgb, var(--brand) 15%, transparent); }
.calc-edit--oms { width: 100%; min-width: 0; text-align: left; }
.calc-row { display: grid; grid-template-columns: 64px 2.3fr 56px 34px 48px 70px .85fr .9fr .85fr .82fr .82fr .92fr 46px; gap: 8px; padding: 8px 16px; border-top: 1px solid var(--line); align-items: center; }
.calc-row:hover { background: var(--bg-2); }
.calc-oms { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; }
.calc-omsname { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.calc-aant { font-weight: 600; color: var(--text); display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
/* A35 — gekoppelde planning-leveringen in het inkoopcontract (ContractPopup) */
.cpop__lev { display: flex; flex-direction: column; }
.cpop__levrow { display: grid; grid-template-columns: 2.4fr 1fr 1.3fr 0.9fr; gap: 14px; align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.cpop__levrow:last-of-type { border-bottom: 0; }
.cpop__levrow--h { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.cpop__levrow .r { text-align: right; }
.cpop__levnm b { font-weight: 600; }
.cpop__levlt { color: var(--text-3); font-size: 10.5px; font-style: normal; }
.cpop__levnote { display: flex; align-items: center; gap: 7px; margin: 11px 0 0; font-size: 11.5px; color: var(--text-3); }
/* B45 — inkooppakketten uit calculatie */
.ink-pak { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ink-pak__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.ink-pak__stats { display: flex; gap: 20px; font-size: 12px; color: var(--text-3); }
.ink-pak__stats b { color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; margin-right: 4px; }
.ink-pak__list { display: flex; flex-direction: column; }
.ink-pak__row { display: grid; grid-template-columns: 52px 1fr auto 150px; gap: 16px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--line); }
.ink-pak__row:first-child { border-top: 0; }
.ink-pak__row.is-belegd { opacity: .72; }
.ink-pak__code { font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 700; color: #fff; background: var(--navy); padding: 3px 7px; border-radius: 5px; text-align: center; }
.ink-pak__nm { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ink-pak__nm b { font-size: 13px; font-weight: 600; }
.ink-pak__nm i { font-style: normal; font-size: 11px; color: var(--text-3); }
.ink-pak__bedr { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.ink-pak__st { display: inline-flex; align-items: center; gap: 5px; justify-content: flex-end; font-size: 11.5px; font-weight: 600; color: var(--pos-tekst); }
.ink-pak__btn { display: inline-flex; align-items: center; gap: 5px; justify-content: center; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--brand); background: var(--brand-soft); border: 0; padding: 7px 12px; border-radius: 8px; cursor: pointer; }
.ink-pak__btn:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.ink-pak__foot { display: flex; align-items: center; gap: 8px; margin: 0; padding: 13px 20px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--text-3); }
/* B45 — inkooppakket: pakket-scheiding + uitgeklapte detailweergave */
.ink-pak__list .ink-pakw { border-top: 1px solid var(--line); }
.ink-pak__list .ink-pakw:first-child { border-top: 0; }
.ink-pakw.is-open { background: var(--bg-2); }
.ink-pakw.is-open .ink-pak__row { border-bottom: 1px solid var(--line); }
.ink-pakd { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 13px; }
.ink-pakd__sum { display: grid; grid-template-columns: 1fr 286px; gap: 22px; align-items: stretch; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
@media (max-width: 920px) { .ink-pakd__sum { grid-template-columns: 1fr; } }
.ink-pakd__kind { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .03em; padding: 4px 9px; border-radius: 7px; color: var(--brand); background: var(--brand-soft); }
.ink-pakd__kind--mat { color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 13%, transparent); }
.ink-pakd__scope { font-size: 12.5px; line-height: 1.5; color: var(--text-2); margin: 10px 0 12px; max-width: 64ch; text-wrap: pretty; }
.ink-pakd__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: var(--text-3); align-items: center; }
.ink-pakd__meta b { color: var(--text); font-variant-numeric: tabular-nums; }
.ink-pakd__chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 13%, transparent); }
.ink-pakd__chip.is-ok { color: var(--pos-tekst); background: var(--pos-soft); }
.ink-pakd__sumR { border-left: 1px solid var(--line); padding-left: 20px; display: flex; flex-direction: column; }
@media (max-width: 920px) { .ink-pakd__sumR { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 14px; } }
.ink-pakd__bigl { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.ink-pakd__big { display: block; font-size: 26px; font-weight: 300; letter-spacing: -.02em; color: var(--text); margin: 4px 0 12px; font-variant-numeric: tabular-nums; }
.ink-pakd__bar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: var(--track); gap: 1.5px; }
.ink-pakd__bar i { min-width: 3px; }
.ink-pakd__leg { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.ink-pakd__leg span { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-2); }
.ink-pakd__leg i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.ink-pakd__leg b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.ink-pakd__tbl { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.ink-pakd__th, .ink-pakd__row { display: grid; grid-template-columns: 74px 1fr 116px 104px 96px 30px; gap: 12px; align-items: center; padding: 9px 14px; }
.ink-pakd__th { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); background: var(--bg-2); border-bottom: 1px solid var(--line); }
.ink-pakd__th .r { text-align: right; }
.ink-pakd__row { border-top: 1px solid var(--line); font-size: 12.5px; }
.ink-pakd__th + .ink-pakd__row { border-top: 0; }
.ink-pakd__row.is-custom { background: color-mix(in srgb, var(--amber) 5%, transparent); }
.ink-pakd__code { font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.ink-pakd__oms { color: var(--text); min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; line-height: 1.4; }
.ink-pakd__note { font-style: normal; font-size: 11px; color: var(--text-3); flex-basis: 100%; }
.ink-pakd__tag { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .03em; color: var(--steel); background: color-mix(in srgb, var(--steel) 12%, transparent); padding: 1px 6px; border-radius: 5px; }
.ink-pakd__tag--eigen { color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.ink-pakd__q, .ink-pakd__ep { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; text-align: right; }
.ink-pakd__amt { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); text-align: right; }
.ink-pakd__del { width: 24px; height: 24px; border-radius: 7px; border: 1px solid transparent; color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: none; }
.ink-pakd__del:hover { color: var(--neg); background: var(--neg-soft); }
.ink-pakd__empty { display: flex; align-items: center; gap: 9px; padding: 16px 14px; font-size: 12.5px; color: var(--text-3); }
.ink-pakd__empty svg { color: var(--amber); flex-shrink: 0; }
.ink-pakd__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ink-pakd__addbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.ink-pakd__add { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 600; color: var(--brand); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); border-radius: 9px; padding: 7px 12px; cursor: pointer; }
.ink-pakd__add:hover { background: color-mix(in srgb, var(--brand) 15%, transparent); }
.ink-pakd__add--eigen { color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 10%, transparent); border-color: color-mix(in srgb, var(--amber) 28%, transparent); }
.ink-pakd__add--eigen:hover { background: color-mix(in srgb, var(--amber) 16%, transparent); }
.ink-pakd__add--taak { color: var(--steel); background: color-mix(in srgb, var(--steel) 10%, transparent); border-color: color-mix(in srgb, var(--steel) 26%, transparent); }
.ink-pakd__add--taak:hover { background: color-mix(in srgb, var(--steel) 16%, transparent); }
.ink-pakd__reset { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-3); background: none; border: 1px solid var(--line-strong); border-radius: 9px; padding: 7px 11px; cursor: pointer; }
.ink-pakd__reset:hover { color: var(--text); border-color: var(--text-3); }
.ink-pakd__tot { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.ink-pakd__tot b { font-size: 15px; font-weight: 600; color: var(--text); margin-left: 6px; font-variant-numeric: tabular-nums; }
.pakpick__chap { font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--text-2); padding: 10px 14px 5px; background: var(--bg-2); }
.pakpick__row { padding-left: 14px !important; }
.pakpick__amt { font-size: 11.5px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pakpick__amt em { font-style: normal; font-weight: 500; color: var(--text-3); }
.ink-eigen__intro { font-size: 12.5px; line-height: 1.5; color: var(--text-2); margin-bottom: 8px; text-wrap: pretty; }
.ink-eigen__sum { font-size: 12px; color: var(--text-3); }
.ink-plan { font-size: 12.5px; color: var(--text-2); margin: 4px 0 10px; }
.ink-eigen__sum b { color: var(--text); font-variant-numeric: tabular-nums; }
/* A33 — opdracht-bevestiging (gegunde offerte) */
.opdr-banner { display: flex; align-items: center; gap: 13px; padding: 14px 18px; margin-bottom: var(--gap); border-radius: 13px; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); }
.opdr-banner__ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--brand); color: #fff; }
.opdr-banner__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.opdr-banner__t b { font-size: 13.5px; font-weight: 600; color: var(--text); }
.opdr-banner__t span { font-size: 12px; color: var(--text-2); line-height: 1.5; }
/* A36 — koppeling hoeveelhedenstaat → calculatie */
.calc-utkbanner { display: flex; align-items: center; gap: 11px; padding: 11px 16px; margin-bottom: 12px; border-radius: 12px; background: color-mix(in srgb, var(--amber) 8%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent); font-size: 12.5px; color: var(--text-2); }
.calc-utkbanner b { color: var(--text); }
.calc-utkbanner button { margin-left: auto; flex-shrink: 0; }
.calc-utkbadge { display: inline-flex; align-items: center; margin-top: 3px; padding: 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); border: 0; cursor: pointer; white-space: nowrap; }
.calc-utkbadge:hover { color: #fff; background: var(--amber); }
.calc-eh { font-size: 11px; color: var(--text-3); }
.calc-box { border: 1px solid var(--line); border-radius: 6px; min-height: 26px; display: flex; align-items: center; justify-content: flex-end; padding: 0 8px; background: var(--surface); }
.calc-box--oa { color: var(--steel); }
.calc-box--stel { color: var(--amber); }
.calc-code { font-family: 'Roboto Mono', monospace; font-size: 11px; color: var(--text-3); flex-shrink: 0; }
.calc-back { font-size: 10px; color: var(--steel); }
.calc-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.calc-tar { color: var(--text-3); font-size: 11px; }
/* A46 — tarief-modus controls */
.calc-tarcell { display: flex; align-items: center; gap: 3px; justify-content: flex-end; }
.calc-tarsel { width: 40px; flex: 1 1 auto; min-width: 0; font: inherit; font-size: 10.5px; padding: 3px 2px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--text-2); }
.calc-fxbtn { flex: 0 0 auto; width: 20px; height: 22px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--text-3); font-size: 10px; font-weight: 700; cursor: pointer; font-style: italic; }
.calc-fxbtn:hover:not(:disabled) { color: var(--brand); border-color: var(--brand); }
.calc-fxbtn.is-on { background: var(--brand); color: #fff; border-color: var(--brand); }
.calc-fxbtn:disabled { opacity: .35; cursor: not-allowed; }
.calc-fxdot { font-style: italic; font-weight: 700; color: var(--brand); margin-left: 3px; }
.calc-arbfx { color: var(--brand); font-weight: 600; position: relative; }
.calc-arbfx::after { content: 'ƒ'; font-size: 8px; font-style: italic; color: var(--brand); margin-left: 2px; vertical-align: super; }
.calc-fxchip { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); }
/* B44 — staffel/marge per hoofdstuk */
.calc-chapopsl { display: inline-flex; align-items: center; gap: 4px; margin-left: 12px; font-size: 10.5px; color: var(--text-3); }
.calc-chapopsl input { width: 48px; font: inherit; font-size: 12px; text-align: right; padding: 3px 5px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--text); }
.calc-chapopslbadge { margin-left: 12px; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 13%, transparent); color: var(--brand); }
.calc-chapopslbadge.is-neg { background: color-mix(in srgb, var(--pos) 14%, transparent); color: var(--pos); }
.calc-oa-c { color: var(--steel); }
.calc-stel { color: var(--amber); }
.calc-ep { color: var(--text); }
.calc-total b { font-weight: 700; color: var(--text); }
.calc-cmp { display: flex; flex-direction: column; align-items: flex-end; }
.calc-cmp i { font-style: normal; font-size: 10px; font-weight: 600; }
.calc-row--info, .calc-row--xref { background: color-mix(in srgb,var(--text) 2.5%, var(--surface)); }
.calc-row--info .calc-oms, .calc-row--xref .calc-oms { color: var(--text-3); font-style: italic; }
.calc-zero { text-align: right; font-size: 11px; color: var(--text-3); font-style: italic; align-self: center; }
.calc-ref, .calc-back { font-weight: 600; font-style: normal; }
.calc-ref { color: var(--brand); }
.calc-act { display: flex; align-items: center; gap: 4px; justify-content: flex-end; position: relative; }
.calc-info { font-size: 11px; color: var(--text-3); width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.calc-info:hover { background: var(--bg-2); color: var(--brand); }
.calc-vul { width: 22px; height: 22px; border-radius: 6px; color: var(--text-3); display: flex; align-items: center; justify-content: center; }
.calc-vul:hover { background: var(--brand-soft); color: var(--brand); }
.calc-row--oa .calc-oa-c { font-weight: 600; }
.vulmenu { position: absolute; top: 26px; right: 0; z-index: 70; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 11px; box-shadow: var(--shadow-lg); padding: 6px; width: 230px; }
.vulmenu__item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 11px; border-radius: 8px; font-size: 12.5px; color: var(--text-2); }
.vulmenu__item:hover { background: var(--bg-2); color: var(--text); }
.vergelijk-note { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 16px; border-radius: 11px; background: var(--brand-soft); font-size: 12.5px; color: var(--text-2); }

/* herkomst modal */
.herk { width: min(640px, 94vw); max-height: 84vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow-lg); animation: pop .16s ease; }
.herk__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.herk__body { padding: 8px 22px 22px; }
.herk__sec { padding: 14px 0; border-bottom: 1px solid var(--line); }
.herk__lbl { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.herk__sec p { font-size: 13px; color: var(--text-2); line-height: 1.55; }
.herk__alt { padding: 16px; margin-top: 14px; border-radius: 12px; background: var(--brand-soft); }
.herk__cmp { display: flex; align-items: center; gap: 18px; margin-top: 10px; flex-wrap: wrap; }
.herk__cmp > div { display: flex; flex-direction: column; }
.herk__cmp span { font-size: 10.5px; color: var(--text-3); }
.herk__cmp b { font-size: 16px; font-weight: 500; }
.herk__delta b { color: var(--amber-tekst); }

/* regel-opbouw modal */
.regelmodal { width: min(980px, 95vw); max-height: 90vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow-lg); animation: pop .16s ease; overflow: hidden; }
.rm__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 16px; border-bottom: 1px solid var(--line); }
.rm__code { font-family: 'Roboto Mono', monospace; font-size: 13px; font-weight: 600; color: var(--brand); margin-bottom: 6px; }
.rm__title { font-size: 15px; font-weight: 500; line-height: 1.4; max-width: 800px; }
.rm__sub { font-size: 12px; color: var(--text-3); margin-top: 7px; }
.rm__close { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; color: var(--text-3); display: flex; align-items: center; justify-content: center; }
.rm__close:hover { background: var(--bg-2); color: var(--text); }
.rm__body { overflow-y: auto; padding: 18px 24px 24px; }
.rm__ai { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 11px; background: color-mix(in srgb, var(--steel) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--steel) 20%, transparent); margin-bottom: 16px; }
.rm__ai-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rm__ai b { font-size: 12.5px; display: block; }
.rm__ai span { font-size: 11.5px; color: var(--text-2); }
.rm__stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 20px; }
.rm__stat { background: var(--bg-2); border-radius: 11px; padding: 12px 13px; }
.rm__stat b { font-size: 17px; font-weight: 400; letter-spacing: -.01em; display: block; }
.rm__stat span { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.rm__stat.is-strong { background: var(--brand-soft); }
.rm__stat.is-strong b { color: var(--brand); font-weight: 600; }
.rm__bh, .rm__row { display: grid; grid-template-columns: 1fr 78px 46px 66px 66px 76px; gap: 12px; align-items: start; }
.rm__bh { padding: 0 0 10px; border-bottom: 1px solid var(--line-strong); }
.rm__bh span { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.rm__bh .r, .rm__row .rm__n { text-align: right; }
.rm__fase { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); padding: 14px 0 4px; }
.rm__row { padding: 9px 0; border-top: 1px solid var(--line); }
.rm__rmain { min-width: 0; }
.rm__rmain > b { font-size: 12.5px; font-weight: 500; display: block; }
.rm__art { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); margin-top: 4px; }
.rm__art > svg { color: var(--steel); flex-shrink: 0; }
.rm__wijzig { font-style: normal; color: var(--brand); font-size: 10px; margin-left: 2px; cursor: pointer; }
.rm__tar { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.rm__tarsel { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); }
.rm__tar i { font-style: normal; font-size: 11px; color: var(--text-3); }
.rm__n { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-2); padding-top: 1px; }
.rm__n--mut { color: var(--text-3); }
.rm__n--arb { color: var(--amber); }
.rm__n--bed { color: var(--text); font-weight: 600; }
.rm__foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.rm__herk { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); margin-bottom: 16px; flex-wrap: wrap; }
.rm__herk b { color: var(--text-2); font-weight: 600; }
.rm__bestek-h { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 9px; }
.rm__bestek-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.rm__bchip { font-size: 11px; color: var(--text-2); padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.rm__bchip b { font-family: 'Roboto Mono', monospace; color: var(--text); margin-right: 7px; }
.rm__bchip i { font-style: normal; color: var(--text-3); }
@media (max-width: 1080px) { .rm__stats { grid-template-columns: repeat(3, 1fr); } }

/* rm — herkomst & onderbouwing (verdiept) */
.rm__herk-h { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; flex-wrap: wrap; }
.rm__herk-ic { width: 24px; height: 24px; border-radius: 7px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rm__herk-h b { font-size: 13px; font-weight: 600; }
.rm__herk-h > span { font-size: 11.5px; color: var(--text-3); }
.rm__hgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rm__hcard { border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; background: var(--bg-2); }
.rm__hlbl { display: inline-flex; align-items: center; gap: 7px; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.rm__hlbl > svg { color: var(--text-3); }
.rm__htext { font-size: 12px; color: var(--text-2); line-height: 1.55; margin: 0; }
.rm__tek { display: flex; flex-direction: column; gap: 7px; }
.rm__tekchip { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-2); padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.rm__tekchip > svg { color: var(--steel); flex-shrink: 0; }
.rm__meet { display: flex; align-items: center; gap: 12px; }
.rm__cat { width: 30px; height: 30px; border-radius: 8px; border: 1px solid; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.rm__meet-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rm__meet-main b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rm__meet-main span { font-size: 10.5px; color: var(--text-3); }
.rm__meet-fout { display: flex; flex-direction: column; align-items: flex-end; }
.rm__meet-fout b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rm__meet-fout span { font-size: 9.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.rm__meet-ref { font-size: 10.5px; color: var(--text-3); margin-top: 10px; }
.rm__meet-ref i { font-style: normal; color: var(--text-2); }
.rm__alt { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; padding: 16px 18px; border-radius: 13px; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.rm__alt-l { min-width: 0; }
.rm__alt-recept { display: block; font-size: 13px; font-weight: 600; margin: 2px 0 11px; }
/* A38 — centrale prijsbron (databibliotheek) onder het alternatief */
.rm__bibsrc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 11px; padding: 7px 11px; border-radius: 9px; background: color-mix(in srgb, var(--steel) 9%, transparent); font-size: 11.5px; color: var(--text-2); }
.rm__bibsrc-nm b { font-weight: 600; color: var(--text); }
.rm__bibsrc-pr { margin-left: auto; color: var(--text-3); font-variant-numeric: tabular-nums; }
.rm__alt-cmp { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rm__alt-cmp > div { display: flex; flex-direction: column; }
.rm__alt-cmp span { font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.rm__alt-cmp b { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.rm__alt-vs { font-style: normal; font-size: 11px; color: var(--text-3); align-self: flex-end; padding-bottom: 2px; }
.rm__verdict { font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.rm__overnemen { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: #fff; background: var(--brand); padding: 10px 16px; border-radius: 10px; transition: background .15s; }
.rm__overnemen:hover { background: color-mix(in srgb, var(--brand) 88%, black); }
.rm__overnemen.is-done { background: var(--pos); }
@media (max-width: 760px) { .rm__hgrid { grid-template-columns: 1fr; } .rm__alt { flex-direction: column; align-items: stretch; } }

/* ---- vergelijkpagina AI ↔ prijsboek ---------------------- */
.vgl { margin-top: 4px; }
.vgl-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.vgl-title { font-size: 19px; font-weight: 500; letter-spacing: -.01em; margin: 3px 0 6px; }
.vgl-sub { font-size: 13px; color: var(--text-2); line-height: 1.55; max-width: 760px; margin: 0; }
.vgl-trust-bar { height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 16%, transparent); overflow: hidden; margin: 4px 0 2px; }
.vgl-trust-bar i { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.vgl-filters { display: flex; gap: 9px; margin-bottom: 14px; flex-wrap: wrap; }
.vgl-chip { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 7px 13px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); }
.vgl-chip span { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.vgl-chip.is-on { background: var(--bg-2); }
.vgl-table { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.vgl-head, .vgl-row { display: grid; grid-template-columns: 82px minmax(160px, 1.4fr) 92px minmax(150px, 1.3fr) 96px 60px 116px 110px; gap: 12px; align-items: center; }
.vgl-head { padding: 12px 18px; background: var(--bg-2); border-bottom: 1px solid var(--line-strong); }
.vgl-head span { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); text-align: right; }
.vgl-head span:nth-child(2), .vgl-head span:nth-child(4) { text-align: left; }
.vgl-row { padding: 11px 18px; border-top: 1px solid var(--line); width: 100%; text-align: left; background: none; transition: background .12s; }
.vgl-row:first-of-type { border-top: none; }
.vgl-row:hover { background: var(--bg-2); }
.vgl-code { font-family: 'Roboto Mono', monospace; font-size: 11.5px; font-weight: 600; color: var(--navy); }
.vgl-oms { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vgl-omsname { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vgl-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 500; }
.vgl-cat i { width: 7px; height: 7px; border-radius: 9px; flex-shrink: 0; }
.vgl-num { font-size: 12.5px; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.vgl-num--ai { color: var(--text); font-weight: 600; }
.vgl-recept { font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vgl-conf { display: flex; align-items: center; gap: 8px; }
.vgl-conf__track { flex: 1; height: 5px; border-radius: 999px; background: var(--track); overflow: hidden; }
.vgl-conf__track i { display: block; height: 100%; border-radius: 999px; }
.vgl-conf em { font-style: normal; font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; width: 30px; text-align: right; flex-shrink: 0; }
.vgl-verdict-cell { text-align: right; }
.vgl-verdict { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.vgl-foot { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 14px; padding: 0 2px; }
.vgl-foot span { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-3); }
/* Versievergelijking — versiekiezers + lege/laadstaat */
.vgl-verselect { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.vgl-verselect label { display: flex; flex-direction: column; gap: 5px; }
.vgl-verselect label > span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.vgl-verselect select { padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface, #fff); font-size: 12.5px; color: var(--text); min-width: 260px; cursor: pointer; }
@media (max-width: 1180px) { .vgl-head, .vgl-row { grid-template-columns: 70px 1.3fr 80px 70px 56px 96px; } .vgl-head span:nth-child(4), .vgl-row .vgl-recept, .vgl-head span:nth-child(7), .vgl-row .vgl-conf { display: none; } }

/* ---- offerte --------------------------------------------- */
.off-meta-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: stretch; margin-bottom: var(--gap); }
@media (max-width: 1080px) { .off-meta-row { grid-template-columns: 1fr; } }
.off-build { display: flex; flex-direction: column; }
.off-line { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.off-line:first-child { border-top: none; }
.off-line span { color: var(--text-2); }
.off-line b { font-weight: 600; }
.off-line--sum { border-top: 2px solid var(--line-strong); }
.off-line--sum b { color: var(--brand); font-size: 16px; }
.off-line--total b { font-size: 18px; font-weight: 700; }
.off-line--btw span, .off-line--btw b { color: var(--text-3); font-weight: 400; }

/* kpi accent-tegel */
.kpi--accent { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 22%, var(--line)); }
.kpi--accent .kpi__num { color: var(--brand); }

/* ---- calculatie onder de offerte ------------------------- */
.offcalc-split { padding: 16px 18px 6px; }
.offcalc-split__bar { display: flex; width: 100%; height: 14px; border-radius: 7px; overflow: hidden; background: var(--track); }
.offcalc-split__bar i { display: block; height: 100%; }
.offcalc-split__legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; }
.offcalc-split__legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); }
.offcalc-split__legend i { width: 11px; height: 11px; border-radius: 3px; }
.offcalc-split__legend b { font-weight: 600; font-variant-numeric: tabular-nums; }
.offcalc-split__legend em { font-style: normal; color: var(--text-3); font-size: 11px; }

.offcalc { padding: 6px 18px 0; }
.offcalc__head, .offcalc__row { display: grid; gap: 10px; align-items: center; }
.offcalc__head { padding: 10px 6px; border-bottom: 1px solid var(--line-strong); }
.offcalc__head span { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.offcalc__head .r { text-align: right; }
.offcalc__row { padding: 9px 6px; border-bottom: 1px solid var(--line); }
.offcalc__row:hover { background: var(--bg-2); }
.offcalc__code { font-family: 'Roboto Mono', monospace; font-size: 11.5px; color: var(--navy); font-weight: 600; }
.offcalc__nm { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offcalc__num { font-size: 12.5px; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.offcalc__tot { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.offcalc__row--sub { border-top: 2px solid var(--line-strong); border-bottom: none; background: var(--bg-2); margin-top: 2px; }
.offcalc__row--sub .offcalc__nm { font-weight: 700; }
.offcalc__row--sub .offcalc__num { color: var(--text); font-weight: 600; }
.offcalc__row--sub .offcalc__tot { font-size: 14px; font-weight: 700; }

.offcalc-staart { display: flex; flex-direction: column; gap: 0; max-width: 460px; margin-left: auto; padding: 14px 18px 18px; }
.offcalc-staart__row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.offcalc-staart__row:first-child { border-top: none; }
.offcalc-staart__row span { color: var(--text-2); }
.offcalc-staart__row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.offcalc-staart__row--mid { border-top: 1.5px solid var(--line-strong); }
.offcalc-staart__row--mid b { color: var(--text); }
.offcalc-staart__row--sum { border-top: 2px solid var(--line-strong); }
.offcalc-staart__row--sum span { font-weight: 700; color: var(--text); }
.offcalc-staart__row--sum b { color: var(--brand); font-size: 18px; font-weight: 700; }
@media (max-width: 980px) { .offcalc__head span:nth-child(5), .offcalc__row > *:nth-child(5), .offcalc__head span:nth-child(6), .offcalc__row > *:nth-child(6) { display: none; } }

/* ---- inkoop matrix --------------------------------------- */
.percelen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: var(--gap); }
.perceel { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 14px; display: flex; flex-direction: column; gap: 8px; transition: all .15s; }
.perceel:hover { border-color: var(--line-strong); }
.perceel.is-on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.perceel__top { display: flex; align-items: center; justify-content: space-between; }
.perceel__top b { font-family: 'Roboto Mono', monospace; font-size: 12px; color: var(--text-2); }
.perceel__naam { font-size: 13.5px; font-weight: 500; }
.perceel__foot { display: flex; justify-content: space-between; align-items: baseline; }
.perceel__foot span { font-size: 10.5px; color: var(--text-3); }
.perceel__foot b { font-size: 14px; font-weight: 600; }
.perceel__partij { font-size: 11px; color: var(--brand); font-weight: 500; }
.inko-list__head, .inko-list__row { display: grid; grid-template-columns: 92px 1.6fr 130px 90px 130px; gap: 14px; align-items: center; }
.inko-list--oa .inko-list__head, .inko-list--oa .inko-list__row,
.inko-list--mat .inko-list__head, .inko-list--mat .inko-list__row { grid-template-columns: 1.6fr 1fr 1.3fr 90px 130px; }
.inko-list--fin .inko-list__head, .inko-list--fin .inko-list__row { grid-template-columns: 1.7fr 1.1fr 116px 116px 130px 104px; }
.inko-secrow { display: flex; align-items: center; gap: 12px; padding: 14px 20px 10px; }
.inko-secrow__t { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.inko-secrow__line { flex: 1; height: 1px; background: var(--line); }
.inko-secrow__sum { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.inko-res { text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.inko-res i { display: block; font-style: normal; font-size: 10px; font-weight: 500; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; margin-top: 1px; }
.inko-list__row--total { background: var(--bg-2); border-top: 1.5px solid var(--line-strong); }
.inko-list__row--total .inko-list__naam b { font-weight: 600; }
.inko-list__head { padding: 13px 20px; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.inko-list__row { width: 100%; text-align: left; padding: 13px 20px; border-top: 1px solid var(--line); transition: background .12s; }
.inko-list__row:not(.inko-list__row--static) { cursor: pointer; }
.inko-list__row:not(.inko-list__row--static):hover { background: var(--bg-2); }
.inko-list__id { font-family: 'Roboto Mono', monospace; font-size: 12px; font-weight: 600; color: var(--brand); }
.inko-list__naam b { font-size: 13.5px; font-weight: 500; }
.inko-list__naam i { display: block; font-style: normal; font-size: 11px; color: var(--text-3); margin-top: 1px; }
.inko-list__num { text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.inko-list__off { text-align: center; font-size: 13px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.inko-list__door { font-size: 12.5px; color: var(--text-2); }
.inko-back { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-bottom: 16px; transition: gap .15s; }
.inko-back:hover { gap: 10px; color: var(--text); }
.inko-dethead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: var(--gap); }
.inko-dethead__meta { display: flex; gap: 26px; }
.inko-dethead__meta span { font-size: 10.5px; color: var(--text-3); }
.inko-dethead__meta b { display: block; font-size: 15px; font-weight: 500; margin-top: 3px; }
.mtx-head-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.mtx { display: grid; align-items: stretch; }
.mtx__h { padding: 12px 14px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--line-strong); background: var(--bg-2); }
.mtx__h--partij { text-align: center; color: var(--text); border-left: 1px solid var(--line); }
.mtx__post { padding: 13px 14px; border-bottom: 1px solid var(--line); }
.mtx__post b { display: block; font-size: 12.5px; font-weight: 500; }
.mtx__post span { font-size: 11px; color: var(--text-3); }
.mtx__begroot { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: right; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.mtx__cell { padding: 13px 14px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); text-align: center; position: relative; }
.mtx__cell b { display: block; font-size: 13.5px; font-weight: 600; }
.mtx__cell span { font-size: 11px; color: var(--text-3); }
.mtx__cell.is-best { background: var(--brand-soft); }
.mtx__cell.is-best b { color: var(--brand); }
.mtx__beste { position: absolute; top: 6px; right: 8px; font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.mtx__total { border-top: 2px solid var(--line-strong); border-bottom: none; background: var(--bg-2); }
.mtx__total b { font-weight: 700; }
.mtx-los { padding: 16px 20px; border-top: 1px solid var(--line); }
.mtx-los__h { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin-bottom: 10px; }
.mtx-los__row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.mtx-los__row > div { flex: 1; }
.mtx-los__row b { font-size: 12.5px; font-weight: 500; }
.mtx-los__row span { font-size: 11px; color: var(--text-3); }
.mtx-los__partij { font-size: 12px; color: var(--text-2); }
.mtx-los__prijs { font-size: 13px; font-weight: 600; }
.mtx-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-top: 1px solid var(--line-strong); }
.mtx-foot span { font-size: 13px; color: var(--text-2); }

/* ---- planning -------------------------------------------- */
.psub { display: flex; gap: 4px; margin: 0 auto var(--gap); width: fit-content; max-width: 100%; overflow-x: auto; background-color: var(--surface); border: 1px solid var(--line); border-radius: 15px; padding: 5px; box-shadow: inset 0 1px 0 var(--edge), var(--shadow); scrollbar-width: none; }
.psub::-webkit-scrollbar { display: none; }
.psub__tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 11px; font-size: 13px; font-weight: 500; color: var(--text-2); white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.psub__tab svg { color: var(--text-3); transition: color .15s; }
.psub__tab:hover { background: var(--bg-2); color: var(--text); }
.psub__tab.is-on { background-image: linear-gradient(180deg, color-mix(in srgb,var(--brand) 100%, white 14%), var(--brand)); color: #fff; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 3px 10px var(--brand-soft); }
.psub__tab.is-on svg { color: #fff; }
.ptool { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ptool__group { display: flex; gap: 4px; }
.ptool__toggle { font-size: 11.5px; font-weight: 500; padding: 6px 10px; border-radius: 7px; color: var(--text-3); border: 1px solid var(--line); }
.ptool__toggle.is-on { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.ptool__sp { flex: 1; }
.ptool__btn { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; padding: 6px 10px; border-radius: 7px; color: var(--text-2); border: 1px solid var(--line); }
.ptool__btn:hover { background: var(--bg-2); }
.ptool__btn--crit { color: var(--signal); border-color: color-mix(in srgb,var(--signal) 30%,transparent); }

.gantt2 { display: grid; grid-template-columns: 300px 1fr; }
.gantt2__lane { border-right: 1px solid var(--line-strong); }
.gantt2__lane-h { padding: 10px 16px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--line); height: 32px; }
.gantt2__grow { display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); background: var(--bg-2); border-bottom: 1px solid var(--line); }
.gantt2__trow { display: flex; align-items: center; gap: 10px; padding: 0 14px; width: 100%; text-align: left; border-bottom: 1px solid var(--line); }
.gantt2__exp { width: 24px; height: 24px; margin: -4px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--text-3); flex-shrink: 0; } /* h92: aanraakdoel 24 bij 24 (was 16), de negatieve marge houdt de rij even breed */
.gantt2__exp:hover { background: var(--line-strong); color: var(--text); }
.gantt2__expsp { width: 16px; flex-shrink: 0; }
.gantt2__addsub { width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: var(--brand); background: transparent; flex-shrink: 0; opacity: 0; transition: opacity .12s, background .12s; margin-left: 2px; }
.gantt2__trow:hover .gantt2__addsub { opacity: 1; }
.gantt2__addsub:hover { background: var(--brand-soft); }
.gantt2__trow:hover { background: var(--bg-2); }
.gantt2__pct { font-size: 11px; font-weight: 700; width: 34px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.gantt2__tname { flex: 1; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt2__tpartij { font-size: 10.5px; color: var(--text-3); white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.gantt2__lane-hd { float: right; font-size: 9px; color: var(--text-3); letter-spacing: .04em; }
.gantt2__tdates { flex-shrink: 0; font-size: 10px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: 2px; }
.gantt2__warn { width: 16px; height: 16px; border-radius: 5px; background: var(--signal-soft); color: var(--signal); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gantt2__time { overflow-x: auto; position: relative; }
.gantt2__axis { position: relative; height: 32px; border-bottom: 1px solid var(--line); }
.gantt2__tick { position: absolute; top: 10px; font-size: 9.5px; font-weight: 600; color: var(--text-3); transform: translateX(-50%); white-space: nowrap; }
.gantt2__tick--major { color: var(--text-2); font-weight: 700; }
.gantt2__canvas { position: relative; }
.gantt2__gl { position: absolute; top: 0; width: 1px; background: var(--line); opacity: .5; }
.gantt2__gl--major { opacity: .9; }
.gantt2__today { position: absolute; top: 0; width: 1.5px; background: var(--brand); z-index: 3; }
.gantt2__today em { position: absolute; top: 2px; left: 4px; font-style: normal; font-size: 8px; font-weight: 700; color: var(--brand); text-transform: uppercase; }
.gantt2__deps { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 2; }
.gbar2 { position: absolute; height: 20px; border-radius: 5px; display: flex; align-items: center; padding: 0 8px; overflow: hidden; cursor: pointer; z-index: 1; touch-action: none; }
.gbar2__fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,.28); }
.gbar2__lbl { position: relative; font-size: 10px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* h94 (vraag 352): wit op oranje haalde 2,78; --text haalt 5,06 (donker thema: --bg, 7,11). Balken blijven muis-only. */
.gbar2--oranje .gbar2__lbl { color: var(--text); }
[data-theme="dark"] .gbar2--oranje .gbar2__lbl { color: var(--bg); }
/* h36 (h31 nr 14): koppelingen lopen onder de balken door; een naam die niet in de balk past staat ernaast, boven de lijnen. */
.gantt2__deps { z-index: 0; }
.gantt2__deps--sleep { z-index: 4; }
.gbar2__lbl-uit { position: absolute; z-index: 2; height: 20px; display: flex; align-items: center; padding: 0 5px; max-width: 320px; font-size: 10px; font-weight: 600; color: var(--text); background: color-mix(in srgb, var(--surface) 88%, transparent); border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.gbar2--crit { box-shadow: 0 0 0 1.5px var(--signal); }
.gantt2__ms { position: absolute; width: 14px; height: 14px; background: var(--navy); transform: rotate(45deg); border-radius: 3px; z-index: 2; touch-action: none; }

.fte { display: grid; grid-template-columns: 300px 1fr; border-top: 1px solid var(--line-strong); }
.fte__lane { padding: 14px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); border-right: 1px solid var(--line-strong); }
.fte__lane span { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.fte__chart { display: flex; align-items: flex-end; gap: 4px; padding: 14px; overflow-x: auto; }
.fte__col { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 40px; flex: 1; }
.fte__stack { width: 100%; display: flex; flex-direction: column-reverse; border-radius: 4px 4px 0 0; overflow: hidden; justify-content: flex-start; }
.fte__stack span { display: block; }
.fte__wk { font-size: 10px; font-weight: 600; color: var(--text-3); }
.fte__legend { grid-column: 1 / -1; display: flex; gap: 18px; flex-wrap: wrap; padding: 0 14px 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.fte__legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); }
.fte__legend i { width: 11px; height: 11px; border-radius: 3px; }
.fte__legbtn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 11px; color: var(--text-2); padding: 3px 9px 3px 4px; border-radius: 999px; border: 1px solid transparent; transition: background .12s, border-color .12s, opacity .12s; }
.fte__legbtn i { width: 11px; height: 11px; border-radius: 3px; }
.fte__legbtn:hover { background: var(--bg-2); }
.fte__legbtn.is-on { border-color: var(--line-strong); background: var(--bg-2); font-weight: 600; color: var(--text); }
.fte__legbtn.is-dim { opacity: .42; }

/* ---- planning filterbar ---------------------------------- */
.pfil { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--text) 1.5%, var(--surface)); }
.pfil__lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.pfil__lbl > svg { color: var(--text-3); }
.pfil__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pfil-chip { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12px; font-weight: 500; color: var(--text-2); padding: 5px 11px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); transition: background .12s, border-color .12s, color .12s; }
.pfil-chip:hover { border-color: var(--text-3); }
.pfil-chip i { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.pfil-chip em { font-style: normal; font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pfil-chip.is-on { color: #fff; background: var(--chip, var(--brand)); border-color: var(--chip, var(--brand)); }
.pfil-chip.is-on em { color: rgba(255,255,255,.82); }
.pfil__sep { width: 1px; height: 22px; background: var(--line); margin: 0 2px; }
.pfil__res { display: flex; align-items: center; gap: 12px; margin-left: auto; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.pfil__res b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.pfil__clear { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-2); padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 8px; }
.pfil__clear:hover { border-color: var(--neg); color: var(--neg); }
@media (max-width: 980px) { .pfil__sep { display: none; } .pfil__res { margin-left: 0; width: 100%; } }

/* planning status-legenda */
.plegend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.plegend__lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.plegend__it { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-2); }
.plegend__it i { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.plegend__diamond { width: 11px !important; height: 11px !important; border-radius: 2px !important; background: var(--navy); transform: rotate(45deg); }

.taskmodal { width: min(620px, 94vw); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 0 22px 22px; animation: pop .16s ease; }
.taskmodal__body { min-height: 160px; }
.tm-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.tm-fields > div span { font-size: 10.5px; color: var(--text-3); }
.tm-fields > div b { display: block; font-size: 14px; font-weight: 500; margin-top: 2px; }
.tm-editsel { margin-top: 3px; width: 100%; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tm-editsel:focus { outline: none; border-color: var(--brand); }
.tm-editpct { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.tm-editpct input[type=range] { flex: 1; min-width: 0; accent-color: var(--brand); cursor: pointer; }
.tm-editpct b { display: inline; font-size: 14px; font-weight: 600; min-width: 40px; text-align: right; }
.taskmodal__ph { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 30px; color: var(--text-3); }
.taskmodal__ph p { font-size: 13px; max-width: 380px; line-height: 1.5; }
.evm-kpis { display: flex; flex-direction: column; gap: 14px; padding-top: 10px; }
.evm-kpis > div span { font-size: 11px; color: var(--text-3); }
.evm-kpis > div b { display: block; font-size: 22px; font-weight: 300; }

.evm-var { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.evm-var__item { display: flex; flex-direction: column; gap: 3px; }
.evm-var__item > span { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--text-3); text-transform: uppercase; }
.evm-var__item > b { font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; }
.evm-var__item > i { font-style: normal; font-size: 11px; color: var(--text-3); }
.evm-var__note { grid-column: span 1; flex-direction: row; align-items: flex-start; gap: 10px; padding: 13px 15px; border-radius: 12px; background: var(--brand-soft); }
.evm-var__note span { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.evm-var__note b { font-weight: 600; color: var(--text); }
.evm-var__note > svg { flex-shrink: 0; margin-top: 1px; }
@media (max-width: 980px) { .evm-var { grid-template-columns: 1fr 1fr; } .evm-var__note { grid-column: span 2; } }

.evm-bars { display: flex; flex-direction: column; gap: 14px; }
.evm-bar { display: grid; grid-template-columns: 240px 1fr 130px; gap: 16px; align-items: center; }
.evm-bar__l { font-size: 12.5px; color: var(--text-2); }
.evm-bar__track { height: 16px; border-radius: 6px; background: var(--track); overflow: hidden; }
.evm-bar__track i { display: block; height: 100%; border-radius: 6px; transition: width .6s cubic-bezier(.2,.7,.2,1); }
.evm-bar__v { text-align: right; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.evm-bar--vac { border-top: 1px solid var(--line); padding-top: 13px; }
.evm-bar--vac .evm-bar__l { font-weight: 600; color: var(--text); }
.evm-bar--vac .evm-bar__track { background: none; }
@media (max-width: 820px) { .evm-bar { grid-template-columns: 1fr 90px; } .evm-bar__track { grid-column: 1 / -1; order: 3; } }

/* ---- financiën / oplevering / nazorg --------------------- */
.bud-result { text-align: right; }
.bud-result span { font-size: 11px; color: var(--text-3); display: block; }
.bud-result b { font-size: 22px; font-weight: 300; }
.flow { display: flex; align-items: flex-end; gap: 16px; padding-top: 10px; }
.flow__col { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.flow__bar-wrap { height: 130px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.flow__bar { width: 64%; border-radius: 6px 6px 2px 2px; transition: height .6s; }
.flow__col b { font-size: 14px; font-weight: 600; }
.flow__col span { font-size: 11px; color: var(--text-3); }
.flow__arrow { padding-bottom: 40px; }
.flow__result { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 18px; border-radius: 12px; background: var(--brand-soft); align-self: center; }
.flow__result span { font-size: 11px; color: var(--text-3); }
.flow__result b { font-size: 22px; font-weight: 300; color: var(--brand); }
.flow__result i { font-style: normal; font-size: 11px; color: var(--text-2); }

/* ---- financiën (modern) --------------------------------- */
.fin-hero { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-bottom: var(--gap); }
.fin-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.fin-tile__l { font-size: 11.5px; font-weight: 500; color: var(--text-3); letter-spacing: .02em; }
.fin-tile__v { font-size: 33px; font-weight: 200; letter-spacing: -.025em; line-height: 1.04; display: flex; align-items: baseline; gap: 8px; }
.fin-tile__s { font-size: 11.5px; color: var(--text-2); }
.fin-tile__s em { font-style: normal; }
.fin-tile__bar { height: 5px; border-radius: 5px; background: var(--track); overflow: hidden; margin-top: 5px; }
.fin-tile__bar i { display: block; height: 100%; background: var(--brand); border-radius: 5px; }
.fin-tile__delta { font-size: 12px; font-weight: 600; font-style: normal; color: var(--pos-tekst); }
.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--accent .fin-tile__v { color: var(--brand); font-weight: 300; }
.finbar { display: flex; flex-direction: column; gap: 20px; }
.finbar__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 12px; }
.finbar__lab { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.finbar__tot { font-size: 11.5px; color: var(--text-3); }
.finbar__track { display: flex; height: 34px; border-radius: 9px; overflow: hidden; background: var(--track); }
.finbar__seg { display: flex; align-items: center; padding: 0 11px; min-width: 0; }
.finbar__seg b { font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finbar__seg.is-light b { color: var(--text-2); }
.finbar__legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 11px; }
.finbar__legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-2); }
.finbar__legend i { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.uur__head, .uur__row, .uur__foot { display: grid; grid-template-columns: 1.5fr 62px 62px 1.5fr 94px; gap: 14px; align-items: center; }
.uur__head { padding: 0 0 10px; border-bottom: 1px solid var(--line); }
.uur__head span { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.uur__head span.r { text-align: right; }
.uur__row { padding: 11px 0; border-top: 1px solid var(--line); }
.uur__name b { font-size: 13px; font-weight: 500; display: block; }
.uur__name span { font-size: 11px; color: var(--text-3); }
.uur__num { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.uur__num--mut { color: var(--text-3); }
.uur__prog { display: flex; align-items: center; gap: 9px; }
.uur__bar { height: 9px; border-radius: 9px; background: var(--track); overflow: hidden; flex-shrink: 0; }
.uur__bar b { display: block; height: 100%; background: var(--brand); border-radius: 9px; }
.uur__pct { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.uur__kost { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.uur__foot { padding-top: 12px; margin-top: 4px; border-top: 2px solid var(--line-strong); }
.uur__foot .l { font-size: 12.5px; font-weight: 700; }
.uur__foot .v { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.kost { display: flex; flex-direction: column; gap: 15px; }
.kost__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.kost__name { font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.kost__name i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.kost__fig { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.kost__fig b { color: var(--text); font-weight: 600; }
.kost__fig em { font-style: normal; }
.kost__bar { position: relative; height: 13px; border-radius: 7px; background: var(--track); overflow: visible; }
.kost__bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; }
.kost__bar .kost__spent { background: rgba(12,48,55,.32); mix-blend-mode: multiply; border-radius: 7px 0 0 7px; }
.kost__bar em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); transform: translateX(-1px); border-radius: 1px; z-index: 2; }
.kost__bron { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 10.5px; color: var(--pos-tekst); }
.kost__bron svg { flex-shrink: 0; }
.alert-box__link { display: flex; flex-direction: column; gap: 2px; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.alert-box__link:hover b { text-decoration: underline; }
.kost__foot { margin-top: 18px; padding-top: 4px; }
.kost__row--btn { display: block; width: 100%; text-align: left; background: none; border: none; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; transition: background .12s; cursor: pointer; }
.kost__row--btn:hover { background: var(--bg-2); }
.kost__row--btn .kost__name svg { opacity: 0; transition: opacity .12s, transform .12s; transform: translateX(-3px); }
.kost__row--btn:hover .kost__name svg { opacity: 1; transform: none; }

/* ---- kostensoort-verdieping (financiën) ---- */
.kd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: var(--gap); }
.kd-head__kick { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.kd-dot { width: 9px; height: 9px; border-radius: 999px; }
.kd-head__title { font-size: 26px; font-weight: 400; letter-spacing: -.02em; margin: 7px 0 6px; }
.kd-head__sub { font-size: 13px; color: var(--text-2); line-height: 1.55; max-width: 720px; margin: 0; }
.kd-head__actions { display: flex; gap: 10px; flex-shrink: 0; }
.kd-tabn { font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-3); }
.psub__tab.is-on .kd-tabn { background: rgba(255,255,255,.25); color: #fff; }
.kd-groups { display: flex; flex-direction: column; gap: 14px; }
.kd-group { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.kd-group__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.kd-group__who { display: flex; align-items: center; gap: 12px; }
.kd-avatar { width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kd-group__who b { font-size: 14px; font-weight: 600; display: block; }
.kd-group__who span { font-size: 11.5px; color: var(--text-3); }
.kd-group__sum { text-align: right; }
.kd-group__sum b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kd-group__sum span { display: block; font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.kd-rows { padding: 4px 8px 8px; }
.kd-row { display: grid; grid-template-columns: 78px 84px 1fr 70px 110px 220px; gap: 12px; align-items: center; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.kd-row:last-child { border-bottom: none; }
.kd-row--head { padding: 9px 10px 8px; border-bottom: 1px solid var(--line-strong); }
.kd-row--head span { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.kd-row--head .r { text-align: right; }
.kd-ref { font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 600; color: var(--navy); }
.kd-cell { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.kd-cell.r { text-align: right; }
.kd-oms { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-bedrag { font-weight: 600; color: var(--text); }
.kd-stat { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.kd-stat--ok { color: var(--brand); background: var(--brand-soft); }
.kd-stat--open { color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.kd-foot { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--bg-2); font-size: 12px; color: var(--text-3); line-height: 1.55; }
.kd-foot > svg { flex-shrink: 0; margin-top: 1px; }
.kd-foot b { color: var(--text-2); font-weight: 600; }
@media (max-width: 1080px) { .kd-head { flex-direction: column; } }
.kost-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.kost-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); }
.kost-legend i { width: 11px; height: 9px; border-radius: 2px; display: inline-block; }
.kost-legend .kl-spent { background: rgba(12,48,55,.32); }
.kost-legend .kl-line { width: 2px; height: 13px; border-radius: 1px; background: var(--text); }
.opl-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.opl-type__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.opl-type__cnt { font-size: 13px; font-weight: 600; color: var(--text-2); }
.opl-type__naam { font-size: 14.5px; font-weight: 500; display: block; }
.opl-type__partij { font-size: 12px; color: var(--text-3); display: block; margin: 4px 0 12px; }
.opl-type__open { font-size: 11.5px; color: var(--text-3); display: block; margin-top: 8px; }

/* ---- oplevering v2 (getypeerd · checklist · registers · drawer) ---- */
.opl-typegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-bottom: var(--gap); }
.opl-tcard { display: flex; flex-direction: column; }
.opl-tcard--eind { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 22%, var(--line)); }
.opl-tcard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.opl-tcard__scope { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.opl-tcard__naam { font-size: 14.5px; font-weight: 600; display: block; }
.opl-tcard__perceel { font-size: 12px; color: var(--text-2); display: block; margin-top: 3px; }
.opl-tcard__partij { font-size: 11.5px; color: var(--text-3); display: block; margin: 2px 0 14px; }
.opl-tcard__prog { margin-top: auto; }
.opl-tcard__prog i { font-style: normal; font-size: 10.5px; color: var(--text-3); display: block; margin-top: 6px; }
.opl-tcard__gate { font-size: 10.5px; color: var(--text-3); display: block; padding: 8px 0; }
.opl-tcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.opl-tcard__date { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.opl-chain { display: flex; align-items: center; }
.opl-chain__node { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.opl-chain__node b { font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.opl-chain__dot { width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid; display: flex; align-items: center; justify-content: center; }
.opl-chain__bar { width: 18px; height: 2px; margin: 0 1px 13px; border-radius: 1px; }

.opl-split { display: grid; grid-template-columns: 360px 1fr; gap: var(--gap); align-items: stretch; }
.opl-chk__list { display: flex; flex-direction: column; gap: 15px; }
.opl-chk__row { display: flex; flex-direction: column; gap: 7px; }
.opl-chk__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.opl-chk__top b { font-size: 12.5px; font-weight: 500; min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opl-chk__top span { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.opl-chk__foot { display: flex; gap: 8px; align-items: flex-start; font-size: 11px; color: var(--text-3); line-height: 1.5; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.opl-chk__foot > svg { flex-shrink: 0; margin-top: 1px; }

.opl-regbar { padding: 14px 16px 0; }
.opl-regn { font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-3); }
.psub__tab.is-on .opl-regn { background: rgba(255,255,255,.25); color: #fff; }
.opl-reg { padding: 6px 6px 8px; }
.opl-reg__head { display: grid; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line-strong); }
.opl-reg__head span { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); text-align: center; }
.opl-reg__row { display: grid; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); background: none; transition: background .12s; }
.opl-reg__row:last-child { border-bottom: none; }
.opl-reg__row:not(.opl-reg__row--static):hover { background: var(--bg-2); }
.opl-reg__nr { font-family: 'Roboto Mono', monospace; font-size: 11.5px; font-weight: 600; color: var(--navy); display: inline-flex; align-items: center; }
.opl-reg__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opl-reg__main b { font-size: 13px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opl-reg__main i { font-style: normal; font-size: 11px; color: var(--text-3); }
.opl-reg__cell { font-size: 12.5px; color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.opl-reg__cell.c { text-align: center; }
.opl-reg__cell.r { text-align: right; }
.opl-reg__sign { display: flex; gap: 6px; justify-content: center; }
.opl-reg__sign i { width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--line-strong); position: relative; }
.opl-reg__sign i.is-on { background: var(--brand); border-color: var(--brand); }
.opl-reg__sign i.is-on::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/11px no-repeat; }

.opl-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(15,30,40,.32); display: flex; justify-content: flex-end; animation: fade .15s ease; }
.opl-drawer { width: min(460px, 94vw); height: 100%; background: var(--surface); border-left: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: slideL .22s cubic-bezier(.2,.7,.2,1); }
@keyframes slideL { from { transform: translateX(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.opl-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
.opl-drawer__nr { font-family: 'Roboto Mono', monospace; font-size: 12px; font-weight: 600; color: var(--brand); margin-bottom: 6px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.opl-drawer__nr span { font-family: inherit; white-space: nowrap; }
/* h43 (overdracht h39 O2): capitalize maakte er "Normaal Prioriteit" van; nu gewoon "normaal prioriteit" */
.opl-drawer__title { font-size: 16px; font-weight: 500; line-height: 1.4; }
.opl-drawer__body { overflow-y: auto; padding: 18px 22px 24px; }
.opl-foto { height: 168px; border-radius: 12px; border: 1px solid var(--line); background-image: repeating-linear-gradient(135deg, var(--bg-2) 0 11px, var(--surface) 11px 22px); display: flex; align-items: flex-end; padding: 12px; margin-bottom: 18px; }
.opl-foto__lab { font-family: 'Roboto Mono', monospace; font-size: 10.5px; color: var(--text-3); background: var(--surface); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); }
.opl-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 20px; }
.opl-kv > div { display: flex; flex-direction: column; gap: 3px; }
.opl-kv span { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.opl-kv b { font-size: 13px; font-weight: 500; }
.opl-flow { display: flex; align-items: flex-start; margin-bottom: 20px; }
.opl-flow__step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; width: 92px; text-align: center; }
.opl-flow__step b { font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.opl-flow__step i { font-style: normal; font-size: 10px; color: var(--text-3); }
.opl-flow__step.is-cur b, .opl-flow__step.is-done b { color: var(--text); }
.opl-flow__dot { width: 26px; height: 26px; border-radius: 999px; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--text-3); background: var(--surface); }
.opl-flow__step.is-cur .opl-flow__dot { border-color: var(--amber); color: var(--amber); }
.opl-flow__step.is-done .opl-flow__dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.opl-flow__bar { flex: 1; height: 2px; background: var(--line); margin-top: 12px; }
.opl-flow__bar.is-done { background: var(--brand); }
.opl-sign { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.opl-sign__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.opl-sign__lbl { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); display: block; margin-bottom: 3px; }
.opl-sign__who b { font-size: 13px; font-weight: 500; }
.opl-sign__btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); padding: 8px 15px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); white-space: nowrap; }
.opl-sign__btn:not(:disabled):hover { border-color: var(--brand); color: var(--brand); }
.opl-sign__btn.is-done { background: var(--brand); border-color: var(--brand); color: #fff; }
.opl-sign__btn:disabled { opacity: .45; cursor: not-allowed; }
.opl-drawer__foot { display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px; color: var(--text-3); line-height: 1.55; margin: 16px 0 0; }
.opl-drawer__foot > svg { flex-shrink: 0; margin-top: 1px; }
.opl-drawer__foot b { color: var(--text-2); font-weight: 600; }
@media (max-width: 1180px) { .opl-typegrid { grid-template-columns: repeat(2, 1fr); } .opl-split { grid-template-columns: 1fr; } .mp-sum[style] { grid-template-columns: repeat(2, 1fr) !important; } }

/* ---- nazorg / garantie ----------------------------------- */
.nz-split { display: grid; grid-template-columns: 1fr 380px; gap: var(--gap); align-items: stretch; }
.nz-leercard { align-self: stretch; }
.nz-leerlist { display: flex; flex-direction: column; gap: 12px; }
.nz-leeritem { border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; background: var(--bg-2); }
.nz-leeritem__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.nz-leeritem__h b { font-size: 13px; font-weight: 600; line-height: 1.35; }
.nz-leeritem__ref { font-family: 'Roboto Mono', monospace; font-size: 10.5px; font-weight: 600; color: var(--brand); flex-shrink: 0; }
.nz-leeritem__oorzaak, .nz-leeritem__actie { font-size: 11.5px; color: var(--text-2); line-height: 1.5; margin: 0 0 6px; }
.nz-leeritem__oorzaak span, .nz-leeritem__actie span { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-right: 7px; }
.nz-leeritem__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.nz-leerimpact { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--brand); background: var(--brand-soft); padding: 3px 9px; border-radius: 999px; }
.nz-leerfrom { font-size: 10.5px; color: var(--text-3); }
.nz-leerfoot { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; color: var(--text-3); line-height: 1.5; margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--line); }
.nz-leerfoot > svg { flex-shrink: 0; margin-top: 1px; }
/* drawer extras */
.nz-garbanner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent); margin-bottom: 18px; }
.nz-garbanner > div { display: flex; flex-direction: column; gap: 2px; }
.nz-garbanner span { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.nz-garbanner b { font-size: 14px; font-weight: 600; }
.nz-oabox { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.nz-oabox__main { flex: 1; min-width: 0; }
.nz-oabox__main b { font-size: 13.5px; font-weight: 600; display: block; }
.nz-oabox__main span { font-size: 11px; color: var(--text-3); }
.nz-oabox__via { font-size: 10.5px; font-weight: 600; color: var(--steel); background: color-mix(in srgb, var(--steel) 12%, transparent); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.nz-advance { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 20px; font: inherit; font-size: 13px; font-weight: 600; color: #fff; background: var(--brand); padding: 12px; border-radius: 11px; transition: background .15s; }
.nz-advance:hover { background: color-mix(in srgb, var(--brand) 88%, black); }
.nz-leerbox { margin-top: 20px; padding: 15px 16px; border-radius: 13px; background: var(--bg-2); border: 1px solid var(--line); }
.nz-leerbox__h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.nz-leerbox__h b { font-size: 13px; font-weight: 600; }
.nz-leerbox p { font-size: 12px; color: var(--text-2); line-height: 1.55; margin: 0 0 12px; }
.nz-leerbox p b { color: var(--text); font-weight: 600; }
.nz-leerbox__done { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--brand); }
.nz-leerbox__btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12px; font-weight: 600; color: var(--brand); background: var(--brand-soft); padding: 8px 14px; border-radius: 9px; }
.nz-leerbox__btn:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }
@media (max-width: 1180px) { .nz-split { grid-template-columns: 1fr; } }
/* h129 (Q53): op een smal scherm schuift het garantieregister binnen zijn eigen kaart en houden de kaarten
   (register en leercirkel) de schermbreedte. Was: het register drukte de kolom naar 650px, waardoor op een
   telefoon de status, de prioriteit en de helft van elk leerpunt buiten beeld vielen. */
.nz-split > * { min-width: 0; }
.nz-reg { overflow-x: auto; }
.nz-reg > .opl-reg__head, .nz-reg > .opl-reg__row { min-width: 760px; }

/* ---- portaal --------------------------------------------- */
.portal { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }
.portal__top { display: flex; align-items: center; gap: 18px; padding: 14px clamp(20px,4vw,48px); background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.portal__brand { display: flex; align-items: center; gap: 11px; }
.portal__brand b { font-size: 14px; font-weight: 600; display: block; }
.portal__brand span { font-size: 11.5px; color: var(--text-3); }
.portal__top .seg { margin: 0 auto; }
.pt-bell { position: relative; }
.pt-bell__btn { position: relative; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--text-2); border: 1px solid var(--line); background: var(--surface); }
.pt-bell__btn:hover { background: var(--bg-2); color: var(--text); }
.pt-bell__btn.is-on { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
.pt-bell__badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--neg); color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); }
.pt-bell__scrim { position: fixed; inset: 0; z-index: 40; }
.pt-bell__panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 50; width: min(380px, 92vw); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; animation: pop .16s ease; }
.pt-bell__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.pt-bell__h b { font-size: 13.5px; font-weight: 600; }
.pt-bell__h span { font-size: 11px; color: var(--text-3); }
.pt-bell__list { max-height: 420px; overflow-y: auto; padding: 6px; }
.pt-bell__empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 16px; font-size: 12px; color: var(--text-3); }
.pt-bell__empty > svg { color: var(--pos); }
.pt-bell__row { display: grid; grid-template-columns: 32px 1fr auto; gap: 11px; align-items: start; width: 100%; text-align: left; padding: 11px 11px; border-radius: 10px; transition: background .12s; }
.pt-bell__row:hover { background: var(--bg-2); }
.pt-bell__row.is-unread { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.pt-bell__ic { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.pt-bell__main { min-width: 0; }
.pt-bell__main b { font-size: 12.5px; font-weight: 500; display: block; }
.pt-bell__main i { font-style: normal; font-size: 11px; color: var(--text-3); display: block; margin-top: 2px; line-height: 1.4; }
.pt-bell__t { font-size: 10.5px; color: var(--text-3); white-space: nowrap; padding-top: 2px; }
.pt-bell__foot { display: flex; align-items: center; gap: 7px; padding: 11px 16px; border-top: 1px solid var(--line); font-size: 11px; color: var(--text-3); }
.pt-bell__foot > svg { color: var(--text-3); flex-shrink: 0; }
.portal__body { flex: 1; }
.portal__inner { max-width: min(1500px, 95vw); margin: 0 auto; padding: 32px clamp(20px,3vw,40px) 60px; }
.portal__hero { margin-bottom: 32px; }
.portal__hero h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 200; letter-spacing: -.025em; }
.portal__hero p { font-size: 15px; color: var(--text-2); margin-top: 10px; max-width: 560px; line-height: 1.6; }
.portal__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap); align-items: start; }
.pcol { display: flex; flex-direction: column; gap: var(--gap); }
.pq b { font-size: 14px; font-weight: 500; display: block; }
.pq > span { font-size: 13px; color: var(--text-2); display: block; margin: 8px 0 14px; line-height: 1.55; }
.pq__specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px; background: var(--bg-2); border-radius: 11px; margin-bottom: 16px; }
.pq__specs span { font-size: 10.5px; color: var(--text-3); }
.pq__specs b { display: block; font-size: 13px; font-weight: 500; margin-top: 3px; }
.pq__actions { display: flex; gap: 10px; }
.pgar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pgar b { font-size: 13px; font-weight: 600; }
.pgar span { display: block; font-size: 11.5px; color: var(--text-3); }

/* ---- relaties (CRM) -------------------------------------- */
.rel-back { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-bottom: 18px; }
.rel-back:hover { color: var(--text); }
.rel-ava { border-radius: 10px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; letter-spacing: .01em; }
/* h94 (vraag 347): initialen op het lichte cyaan in --navy; in donker is --navy licht, dan --bg */
.rel-ava.rel-ava--licht { color: var(--navy); }
[data-theme="dark"] .rel-ava.rel-ava--licht { color: var(--bg); }

.relhead, .relrow { display: grid; grid-template-columns: 2fr 1.25fr 1fr 1.4fr .7fr 26px; gap: 14px; align-items: center; }
.relhead { padding: 13px 20px; border-bottom: 1px solid var(--line); }
.relhead span { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.relhead .num { text-align: right; }
.relrow { padding: 12px 20px; border-top: 1px solid var(--line); width: 100%; text-align: left; transition: background .12s; }
.relrow:first-of-type { border-top: none; }
.relrow:hover { background: var(--bg-2); }
.relrow__name { display: flex; align-items: center; gap: 11px; min-width: 0; }
.relrow__name .rel-ava { width: 34px; height: 34px; font-size: 11.5px; }
.relrow__nm b { font-size: 13.5px; font-weight: 500; display: block; }
.relrow__nm span { font-size: 11px; color: var(--text-3); }
.relrow__cell { font-size: 12.5px; color: var(--text-2); min-width: 0; }
.relrow__num { text-align: right; font-weight: 600; font-size: 13px; }

.rel-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.rel-hero .rel-ava { width: 60px; height: 60px; font-size: 20px; border-radius: 15px; }
.rel-hero__main { flex: 1; min-width: 0; }
.rel-hero__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rel-hero h1 { font-size: clamp(22px, 3vw, 29px); font-weight: 300; letter-spacing: -.02em; }
.rel-hero__sub { font-size: 13px; color: var(--text-2); margin-top: 5px; }
.rel-hero__actions { display: flex; gap: 9px; flex-shrink: 0; }
/* h43 (overdracht h39 D7): op een smal scherm liepen de knoppen van de kop buiten beeld
   (Bewerk relatie onbereikbaar); nu gaan ze onder naam en ondertitel en slaan ze om */
@media (max-width: 720px) {
  .rel-hero { flex-wrap: wrap; }
  .rel-hero__actions { flex-wrap: wrap; width: 100%; flex-shrink: 1; }
}
.rel-actbtn--accent { border-color: color-mix(in srgb,var(--brand) 35%,var(--line)) !important; background: var(--brand-soft) !important; color: var(--brand) !important; }
.rel-edit__sec { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 16px 0 9px; }
.rel-edit__sec:first-child { margin-top: 2px; }
/* relatiedossier */
.rel-dos { width: min(860px, 96vw); max-height: 90vh; display: flex; flex-direction: column; }
.rel-dos__body { overflow-y: auto; }
.rel-dos__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
@media (max-width: 720px) { .rel-dos__kpis { grid-template-columns: repeat(2, 1fr); } .rel-dos__grid { grid-template-columns: 1fr !important; } }
.rel-dos__kpi { background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; padding: 12px 13px; }
.rel-dos__kpi span { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 5px; }
.rel-dos__kpi b { font-size: 16px; font-weight: 600; }
.rel-dos__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.rel-dos__sec { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 18px 0 9px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.rel-dos__sec:first-child { margin-top: 0; }
.rel-dos__kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 12.5px; }
.rel-dos__kv span { color: var(--text-3); }
.rel-dos__kv b { font-weight: 600; text-align: right; }
.rel-dos__note { display: flex; gap: 7px; align-items: flex-start; font-size: 12px; color: var(--text-2); background: var(--brand-soft); border-radius: 9px; padding: 9px 11px; margin: 10px 0 0; line-height: 1.5; }
.rel-dos__note svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.rel-dos__row { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rel-dos__row svg { color: var(--text-3); flex-shrink: 0; }
.rel-dos__rowmain { flex: 1; min-width: 0; }
.rel-dos__rowmain b { font-size: 12.5px; font-weight: 600; display: block; }
.rel-dos__rowmain span { font-size: 11px; color: var(--text-3); }
.rel-dos__rowv { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.rel-dos__recht { font-style: normal; font-size: 11px; color: var(--text-3); }
.rel-dos__contact { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 0; border: none; border-bottom: 1px solid var(--line); background: none; cursor: pointer; text-align: left; }
.rel-dos__contact:hover { background: var(--bg-2); }
.rel-dos__cnm { flex: 1; min-width: 0; }
.rel-dos__cnm b { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.rel-dos__cnm em { font-style: normal; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); background: var(--brand-soft); padding: 1px 6px; border-radius: 5px; }
.rel-dos__cnm span { font-size: 11px; color: var(--text-3); }
.rel-dos__noteadd { display: flex; gap: 7px; margin-bottom: 12px; }
.rel-dos__noteadd input { flex: 1; min-width: 0; font: inherit; font-size: 12.5px; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--bg-2); color: var(--text); }
.rel-mini { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--brand); background: var(--brand); color: #fff; cursor: pointer; white-space: nowrap; }
.rel-dos__timeline { display: flex; flex-direction: column; gap: 2px; }
.rel-dos__tl { display: flex; gap: 11px; padding: 7px 0; }
.rel-dos__tlic { width: 24px; height: 24px; border-radius: 7px; background: var(--bg-2); color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rel-dos__tlmain b { font-size: 12.5px; font-weight: 500; display: block; line-height: 1.35; }
.rel-dos__tlmain span { font-size: 11px; color: var(--text-3); }
.rel-score { padding: 0 8px; height: 24px; border-radius: 7px; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 11px; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 5px; }

.rel-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: var(--gap); }
.rel-meta > div { background: var(--surface); padding: 12px 16px; }
.rel-meta span { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); display: block; }
.rel-meta b { font-size: 13px; font-weight: 500; display: block; margin-top: 4px; word-break: break-word; }

.rel-contact { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); width: 100%; text-align: left; transition: opacity .12s; }
.rel-contact:first-child { border-top: none; }
.rel-contact .rel-ava { width: 38px; height: 38px; font-size: 13px; }
.rel-contact__nm { flex: 1; min-width: 0; }
.rel-contact__nm b { font-size: 13px; font-weight: 500; display: block; }
.rel-contact__nm b em { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .06em; color: var(--brand); background: var(--brand-soft); padding: 2px 5px; border-radius: 4px; margin-left: 7px; vertical-align: middle; }
.rel-contact__nm span { font-size: 11.5px; color: var(--text-3); }
.rel-contact:hover b { color: var(--brand); }

.rel-kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.rel-kv:first-child { border-top: none; }
.rel-kv span { color: var(--text-2); }
.rel-kv b { font-weight: 600; }

.rel-bar { margin-bottom: 13px; }
.rel-bar:last-child { margin-bottom: 0; }
.rel-bar__top { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.rel-bar__top span { color: var(--text-2); }
.rel-bar__top b { font-weight: 600; font-variant-numeric: tabular-nums; }
.rel-bar__track { height: 7px; border-radius: 5px; background: var(--track); overflow: hidden; }
.rel-bar__track i { display: block; height: 100%; border-radius: 5px; }

.rel-proj { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); width: 100%; text-align: left; }
button.rel-proj { -webkit-appearance: none; appearance: none; background: none; font: inherit; color: inherit; }
.rel-proj--clk { cursor: pointer; transition: background .12s; border-radius: 8px; }
.rel-proj--clk:hover { background: var(--brand-soft); box-shadow: 0 0 0 8px var(--brand-soft); }
.rel-proj:first-child { border-top: none; }
.rel-proj__main { flex: 1; min-width: 0; }
.rel-proj__main b { font-size: 13px; font-weight: 500; display: block; }
.rel-proj__main span { font-size: 11.5px; color: var(--text-3); }
.rel-proj__r { text-align: right; flex-shrink: 0; }
.rel-proj__r b { font-size: 13px; font-weight: 600; display: block; }
.rel-proj__r span { font-size: 11px; color: var(--text-3); }

.rel-list { display: flex; flex-direction: column; }
.rel-line { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); line-height: 1.45; }
.rel-line:first-child { border-top: none; }
.rel-line > svg { color: var(--text-3); flex-shrink: 0; margin-top: 2px; }

.rel-actbtn { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--text-2); background: var(--surface); width: 100%; justify-content: flex-start; text-align: left; transition: all .15s; }
.rel-actbtn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.rel-actbtn > svg { flex-shrink: 0; }
.rel-actbtn__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.rel-actbtn__t b { font-size: 13px; font-weight: 500; line-height: 1.3; }
.rel-actbtn__t i { font-style: normal; font-size: 11.5px; font-weight: 400; color: var(--text-3); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rel-actbtn:hover .rel-actbtn__t i { color: var(--brand); }

@media (max-width: 1080px) {
  .rel-meta { grid-template-columns: repeat(2, 1fr); }
  .relhead, .relrow { grid-template-columns: 1.8fr 1fr .8fr 26px; }
  .relhead span:nth-child(3), .relrow > .relrow__cell:nth-of-type(2), .relhead span:nth-child(4), .relrow > .relrow__cell:nth-of-type(3) { display: none; }
}

/* ---- offerteaanvraag (extern portaal) -------------------- */
.portal__inner--wide { max-width: min(1840px, 96vw); }

/* overzicht: lijst openstaande aanvragen */
.oa-ov { display: flex; flex-direction: column; gap: 12px; }
.oa-ovcard { display: grid; grid-template-columns: 42px 1fr auto; gap: 16px; align-items: center; text-align: left; width: 100%;
  padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.oa-ovcard:hover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.oa-ovcard__chip { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.oa-ovcard__main b { font-size: 14px; font-weight: 500; display: block; }
.oa-ovcard__main > span { font-size: 12px; color: var(--text-3); display: block; margin-top: 2px; }
.oa-ovcard__meta { display: flex; align-items: center; gap: 14px; margin-top: 9px; }
.oa-ovcard__prog { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-2); font-weight: 500; }
.oa-ovcard__bar { width: 92px; }
.oa-ovcard__right { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.oa-ovcard__open { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--brand); }
.oa-ovcard:hover .oa-ovcard__open { gap: 9px; }

/* detail header */
.oa-back { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-bottom: 20px; }
.oa-back:hover { color: var(--text); }
.oa-head { margin-bottom: 22px; }
.oa-head__kick { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
.oa-head h1 { font-size: clamp(24px, 3vw, 33px); font-weight: 300; letter-spacing: -.02em; line-height: 1.1; }
.oa-head__sub { font-size: 14px; color: var(--text-2); margin-top: 8px; line-height: 1.55; max-width: 640px; }
.oa-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 20px; }
.oa-meta > div { background: var(--surface); padding: 13px 16px; }
.oa-meta span { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); display: block; }
.oa-meta b { font-size: 13.5px; font-weight: 500; display: block; margin-top: 4px; }
.oa-meta b.is-amber { color: var(--amber-tekst); }

.oa-grid { display: grid; grid-template-columns: minmax(0, 2.35fr) 1fr; gap: var(--gap); align-items: start; }
.oa-main { display: flex; flex-direction: column; gap: var(--gap); }
.oa-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: var(--gap); }

/* uitvraagdocumenten */
.oa-docs { display: flex; flex-direction: column; }
.oa-docrow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); width: 100%; text-align: left; }
.oa-docrow:first-child { border-top: none; }
.oa-docrow__ic { width: 30px; height: 30px; border-radius: 8px; background: var(--bg-2); display: flex; align-items: center; justify-content: center; color: var(--text-3); flex-shrink: 0; }
.oa-docrow__main { flex: 1; min-width: 0; }
.oa-docrow__main b { font-size: 12.5px; font-weight: 500; display: block; }
.oa-docrow__main span { font-size: 11px; color: var(--text-3); }
.oa-docrow:hover .oa-docrow__dl { color: var(--brand); }
.oa-docrow__dl { color: var(--text-3); }

/* checklist tabel */
.oa-secbar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.oa-secbar h4 { font-size: 14px; font-weight: 500; }
.oa-secbar span { font-size: 11.5px; color: var(--text-3); }
.oa-hint { font-size: 12px; color: var(--text-2); line-height: 1.55; margin: 6px 0 14px; }
.oa-hint b { color: var(--text); font-weight: 600; }

.oa-tbl { border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: var(--surface); }
.oa-thead, .oa-row { display: grid; grid-template-columns: 24px 52px minmax(0, 1fr) 50px 38px 132px 102px; gap: 12px; align-items: center; }
.oa-thead { padding: 11px 16px; background: var(--bg-2); }
.oa-thead span { font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.oa-thead .num { text-align: right; }
.oa-row { padding: 11px 16px; border-top: 1px solid var(--line); transition: background .12s; }
.oa-row.is-done { background: color-mix(in srgb, var(--brand) 4%, transparent); }
.oa-check { width: 22px; height: 22px; border-radius: 6px; border: 1.6px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: transparent; flex-shrink: 0; transition: all .15s; }
.oa-check.is-done { background: var(--brand); border-color: var(--brand); color: #fff; }
.oa-code { font-family: 'Roboto Mono', monospace; font-size: 11px; color: var(--text-3); }
.oa-oms b { font-size: 13px; font-weight: 500; display: block; line-height: 1.3; }
.oa-oms span { font-size: 11px; color: var(--text-3); display: block; margin-top: 2px; }
.oa-oms i { font-style: normal; color: var(--amber-tekst); }
.oa-hv, .oa-eh { font-size: 12px; color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; }
.oa-eh { color: var(--text-3); }
.oa-tot { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.oa-tot.is-empty { color: var(--text-3); font-weight: 400; }
.oa-stel { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 13%, transparent); padding: 2px 6px; border-radius: 5px; margin-left: 7px; vertical-align: middle; }

/* prijs-invoer */
.oa-price { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); padding: 0 10px; transition: border-color .15s, box-shadow .15s; }
.oa-price:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.oa-price > span { color: var(--text-3); font-size: 12px; }
.oa-price input { border: none; outline: none; background: none; font-family: inherit; font-size: 13px; color: var(--text); text-align: right; padding: 8px 0 8px 6px; width: 100%; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.oa-price input::-webkit-outer-spin-button, .oa-price input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* h51: bedrag met meer dan twee cijfers achter de komma: rode rand en melding onder de tabel. */
.oa-price.is-fout { border-color: var(--signal); }
.oa-geldfout { padding: 10px 18px 14px; font-size: 11.5px; font-weight: 500; color: var(--signal); overflow-wrap: anywhere; }

/* aanvullende posten / lege regels */
.oa-xrow { display: grid; grid-template-columns: 52px minmax(0, 1fr) 132px 30px; gap: 12px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--line); }
.oa-xrow:first-child { border-top: none; }
.oa-xrow__code { font-family: 'Roboto Mono', monospace; font-size: 11px; color: var(--text-3); }
.oa-xinput { border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); padding: 8px 11px; font-family: inherit; font-size: 13px; color: var(--text); outline: none; width: 100%; transition: border-color .15s, box-shadow .15s; }
.oa-xinput::placeholder { color: var(--text-3); }
.oa-xinput:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.oa-xdel { width: 28px; height: 28px; border-radius: 7px; color: var(--text-3); display: flex; align-items: center; justify-content: center; transition: all .15s; }
.oa-xdel:hover { background: var(--signal-soft); color: var(--signal); }
.oa-add { display: flex; align-items: center; gap: 8px; padding: 12px 16px; width: 100%; color: var(--brand); font-size: 12.5px; font-weight: 500; border-top: 1px dashed var(--line-strong); transition: background .12s; }
.oa-add:hover { background: var(--brand-soft); }

/* algemene offerte / upload */
.oa-drop { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px dashed var(--line-strong); border-radius: 12px; background: var(--bg-2); cursor: pointer; width: 100%; text-align: left; transition: border-color .15s, background .15s; }
.oa-drop:hover { border-color: var(--brand); background: var(--brand-soft); }
.oa-drop__ic { width: 40px; height: 40px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--brand); flex-shrink: 0; }
.oa-drop__t b { font-size: 13px; font-weight: 500; display: block; }
.oa-drop__t span { font-size: 11.5px; color: var(--text-3); }
.oa-file { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-top: 10px; }
.oa-file__ic { width: 30px; height: 30px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.oa-file__main { flex: 1; min-width: 0; }
.oa-file__main b { font-size: 12.5px; font-weight: 500; display: block; }
.oa-file__main span { font-size: 11px; color: var(--text-3); }
.oa-file__del { color: var(--text-3); }
.oa-file__del:hover { color: var(--signal); }

/* voorwaarden velden */
.oa-field { margin-bottom: 14px; }
.oa-field:last-child { margin-bottom: 0; }
.oa-field > label { display: block; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.oa-field input, .oa-field textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); padding: 9px 11px; font-family: inherit; font-size: 13px; color: var(--text); outline: none; resize: vertical; transition: border-color .15s, box-shadow .15s; }
.oa-field input:focus, .oa-field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.oa-field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* samenvatting / totalen */
.oa-sumcard .off-line { font-size: 13px; }
.oa-progress { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 11px; background: var(--brand-soft); margin-bottom: 4px; }
.oa-progress__big { font-size: 22px; font-weight: 300; color: var(--brand); line-height: 1; font-variant-numeric: tabular-nums; }
.oa-progress__t { flex: 1; }
.oa-progress__t b { font-size: 12.5px; font-weight: 600; display: block; }
.oa-progress__t span { font-size: 11px; color: var(--text-2); }
.oa-verlegd { display: flex; gap: 9px; padding: 11px 13px; border-radius: 10px; background: var(--bg-2); font-size: 11.5px; color: var(--text-2); line-height: 1.5; margin-top: 12px; }
.oa-verlegd svg { color: var(--text-3); flex-shrink: 0; margin-top: 1px; }
.oa-submit { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }

@media (max-width: 1080px) { .oa-grid { grid-template-columns: 1fr; } .oa-side { position: static; } .oa-meta { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 1180px) {
  .bib-split, .doc-split, .uittrek-split, .portal__grid { grid-template-columns: 1fr; }
  .percelen { grid-template-columns: repeat(2, 1fr); }
  .opl-types { grid-template-columns: 1fr; }
  .kpi-strip--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   CASHFLOW & LIQUIDITEIT (directie) + MARGE/OPSLAG-BEWAKING
   ============================================================ */
.tb__navitem { display: inline-flex; align-items: center; gap: 5px; }
.tb__navlock { display: inline-flex; opacity: .6; }
/* icon-only topnav met label die naar beneden komt bij hover */
.tb__left { display: flex; align-items: center; gap: 14px; flex-shrink: 0; min-width: 0; }
.tb__navitem--ico { position: relative; padding: 7px; }
.tb__navitem--ico > svg { display: block; }
.tb__navitem--ico .tb__navlock { position: absolute; top: 1px; right: 1px; opacity: .7; }
.tb__navlabel { position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(-5px); background: #0C1A24; color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; padding: 5px 11px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 60; box-shadow: 0 10px 24px rgba(0,0,0,.34); }
.tb__navlabel::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: #0C1A24; }
.tb__navitem--ico:hover .tb__navlabel, .tb__navitem--ico:focus-visible .tb__navlabel { opacity: 1; transform: translateX(-50%) translateY(0); }
/* commandobalk altijd zichtbaar én centraal (vult de middenruimte) */
.tb__cmd { flex: 1 1 auto; max-width: 440px; margin: 0 auto; min-width: 120px; }
.tb__right { flex: 0 0 auto; gap: 10px; }
@media (max-width: 1180px) { .tb__live { display: none; } }
@media (max-width: 980px) { .tb__cmd { min-width: 84px; } .tb__cmd span { display: none; } }
.cf-crumb { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.cf-lockchip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--navy) 12%, transparent); color: var(--navy); letter-spacing: .08em; }

.cf-chartwrap { width: 100%; }
.cf-svg { width: 100%; height: clamp(200px, 30vw, 300px); display: block; overflow: visible; }
.cf-xlab { fill: var(--text-3); font-size: 11px; font-weight: 500; letter-spacing: .04em; font-family: inherit; }
.cf-net { font-size: 9.5px; font-weight: 700; font-family: 'Roboto Mono', monospace; }
.cf-net.is-pos { fill: var(--pos); }
.cf-net.is-neg { fill: var(--neg); }
.cf-liqlab { fill: var(--navy); font-size: 12px; font-weight: 700; font-family: inherit; }
.cf-reflab { fill: var(--text-3); font-size: 10.5px; font-weight: 600; font-family: inherit; }
.cf-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; align-items: center; }
.cf-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-2); }
.cf-legend i { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.cf-legend__line { width: 16px !important; height: 2.6px !important; border-radius: 2px; background: var(--navy); }
.cf-legend__dash { width: 16px !important; height: 0 !important; border-top: 2px dashed var(--steel); border-radius: 0; }
.cf-legend__dot { width: 16px !important; height: 0 !important; border-top: 2px dotted var(--text-3); border-radius: 0; }
.cf-legend__note { margin-left: auto; color: var(--text-3) !important; font-size: 11px !important; }

.cf-callout { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; border-radius: 13px; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line)); }
.cf-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: stretch; }
@media (max-width: 1180px) { .cf-twocol { grid-template-columns: 1fr; } }
.cf-callout__ic { width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cf-callout b { font-size: 13px; font-weight: 600; display: block; }
.cf-callout span { font-size: 12px; color: var(--text-2); }
.cf-callout > div { flex: 1; }

/* per-project tabel */
.cf-prow { grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr 1.2fr .9fr !important; }
.cf-num { font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.cf-overdue { font-style: normal; margin-left: 6px; font-size: 10px; font-weight: 700; color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, transparent); padding: 1px 5px; border-radius: 5px; }
.cf-prow--tot { background: var(--bg-2); border-top: 1.5px solid var(--line-strong); }
.cf-prow--tot .reg__name b { font-weight: 700; }
.cf-prow.reg__row { cursor: pointer; }

/* debiteuren-ouderdom */
.cf-drow { grid-template-columns: 2fr 1fr 1.4fr .9fr !important; }
.cf-age { display: flex; align-items: center; gap: 8px; }
.cf-age i { flex: 1; height: 7px; border-radius: 4px; max-width: 90px; }
.cf-age em { font-style: normal; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* werkkapitaal */
.cf-wc { display: flex; flex-direction: column; }
.cf-wc__row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); }
.cf-wc__l { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-2); }
.cf-wc__l i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.cf-wc__v { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cf-wc__row--tot { border-bottom: none; border-top: 1.5px solid var(--line-strong); margin-top: 4px; padding-top: 13px; }
.cf-wc__row--tot .cf-wc__l { font-weight: 700; color: var(--text); }
.cf-wc__row--tot .cf-wc__v { font-size: 17px; font-weight: 700; color: var(--brand); }
.cf-foot { font-size: 11px; color: var(--text-3); margin-top: 14px; line-height: 1.5; }

/* project cashflow kvs */
.cf-pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.cf-pkv { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 11px; background: var(--bg-2); }
.cf-pkv span { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-3); }
.cf-pkv span i { width: 8px; height: 8px; border-radius: 2px; }
.cf-pkv b { font-size: 17px; font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* lock */
.cf-lock { display: flex; align-items: center; gap: 16px; padding: 26px 28px; border-radius: var(--radius); background: var(--surface); border: 1px dashed var(--line-strong); box-shadow: var(--shadow); margin-bottom: var(--gap); }
.cf-lock--compact { padding: 16px 18px; }
.cf-lock__ic { width: 48px; height: 48px; border-radius: 13px; background: var(--bg-2); color: var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cf-lock--compact .cf-lock__ic { width: 38px; height: 38px; border-radius: 10px; }
.cf-lock b { font-size: 14.5px; font-weight: 600; display: block; margin-bottom: 3px; }
.cf-lock--compact b { font-size: 13px; }
.cf-lock span { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }

/* marge & opslag bewaking */
.mm-stats { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 16px; margin-bottom: 22px; }
.mm-stat { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px; border-radius: 13px; background: var(--bg-2); }
.mm-stat__l { font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.mm-stat--note { background: color-mix(in srgb, var(--brand) 6%, var(--bg-2)); }
.mm-stat--note p { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin: 2px 0 0; }
.mm-stat--note b { font-weight: 700; }
@media (max-width: 1080px) { .mm-stats { grid-template-columns: 1fr; } .cf-pgrid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   FINANCIEEL DASHBOARD — W&R, per-BV, posities, orderportefeuille, Exact
   ============================================================ */
.fin-hero--5 { grid-template-columns: repeat(5, 1fr); }
.dash-grid--3 { grid-template-columns: 1fr 1fr 1fr; align-items: stretch; }

/* Exact Online */
.exact-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 9px 14px; border-radius: 12px; background: color-mix(in srgb, var(--navy) 6%, var(--surface)); border: 1px solid var(--line); }
.exact-bar__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.exact-bar__logo { width: 20px; height: 20px; border-radius: 5px; background: #ED1C24; color: #fff; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.exact-bar__status { flex-shrink: 0; }
.exact-bar__meta { font-size: 11.5px; color: var(--text-3); }
.exact-bar__meta b { color: var(--text-2); font-weight: 600; }
.exact-bar__btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 12px; cursor: pointer; transition: all .14s; }
.exact-bar__btn:hover { color: var(--brand); border-color: var(--brand); }
.exact-src { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--text-3); }
.exact-src__e { width: 15px; height: 15px; border-radius: 4px; background: #ED1C24; color: #fff; font-weight: 800; font-size: 9.5px; display: inline-flex; align-items: center; justify-content: center; }

/* W&R waterfall */
.pnl { display: flex; flex-direction: column; }
.pnl__row { display: grid; grid-template-columns: 1.7fr 1fr 54px 138px; gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.pnl__row:first-child { border-top: none; }
.pnl__l { font-size: 13px; color: var(--text-2); }
.pnl__bar { height: 9px; background: var(--track); border-radius: 5px; overflow: hidden; }
.pnl__bar i { display: block; height: 100%; border-radius: 5px; }
.pnl__pct { font-size: 11.5px; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }
.pnl__v { font-size: 14px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pnl__row--sub, .pnl__row--end { border-top: 1.5px solid var(--line-strong); }
.pnl__row--sub .pnl__l, .pnl__row--end .pnl__l { font-weight: 700; color: var(--text); }
.pnl__row--end { border-bottom: 2px solid var(--line-strong); }
.pnl__row--end .pnl__v { font-size: 16px; font-weight: 700; }
.pnl__row--start .pnl__l { font-weight: 600; color: var(--text); }

/* per werkmaatschappij */
.bv-row { grid-template-columns: 1.7fr 1.4fr 1fr .8fr !important; }
.bv-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.bv-omzet { display: flex; align-items: center; gap: 9px; justify-content: flex-end; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text-2); }
.bv-omzet em { font-style: normal; white-space: nowrap; }
.bv-track { width: 60px; height: 7px; border-radius: 4px; background: var(--track); overflow: hidden; flex-shrink: 0; }
.bv-track i { display: block; height: 100%; border-radius: 4px; }

/* posities: bank / belasting / balans */
.pos-list { display: flex; flex-direction: column; }
.pos-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.pos-row:first-child { border-top: none; }
.pos-row__l { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-2); min-width: 0; }
.pos-row__l b { font-weight: 500; color: var(--text); }
.pos-row__l i { font-style: normal; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pos-row__v { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos-row--tot { border-top: 1.5px solid var(--line-strong); margin-top: 2px; }
.pos-row--tot .pos-row__l { font-weight: 700; color: var(--text); }
.pos-row--tot .pos-row__v { font-size: 15px; font-weight: 700; }
.pos-bal { display: flex; flex-direction: column; gap: 14px; }
.pos-bal__grp { display: flex; flex-direction: column; }
.pos-bal__h { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding-bottom: 4px; }
.pos-bal__h--in { color: var(--pos-tekst); }
.pos-bal__h--out { color: var(--neg); }
.pos-row--sub { border-top: 1px dashed var(--line-strong); }
.pos-row--sub .pos-row__l { font-weight: 600; }
.pos-bal__net { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-radius: 11px; background: var(--brand-soft); }
.pos-bal__net span { font-size: 12.5px; font-weight: 600; color: var(--text); }
.pos-bal__net b { font-size: 17px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }

/* orderportefeuille */
.ord-tot { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.ord-tot b { font-size: 30px; font-weight: 200; letter-spacing: -.025em; line-height: 1; }
.ord-tot span { font-size: 11.5px; color: var(--text-3); }
.ord-bars { display: flex; flex-direction: column; gap: 13px; }
.ord-row { display: grid; grid-template-columns: 1.5fr 1fr auto; gap: 11px; align-items: center; }
.ord-row__l { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.ord-row__l i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.ord-row__bar { height: 8px; border-radius: 5px; background: var(--track); overflow: hidden; }
.ord-row__bar i { display: block; height: 100%; border-radius: 5px; }
.ord-row__v { font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 1180px) { .fin-hero--5 { grid-template-columns: repeat(3, 1fr); } .dash-grid--3 { grid-template-columns: 1fr; } }

/* ============================================================
   PLANNING — uitgebreide werkbank
   ============================================================ */
.ptbl__crit { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .04em; color: var(--signal); background: var(--signal-soft); padding: 1px 4px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }
.ptbl__warn { font-style: normal; font-size: 11px; font-weight: 800; color: var(--amber-tekst); margin-left: 5px; }
.ptbl__dot { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; display: inline-block; }

/* tabel */
.ptbl { width: 100%; }
.ptbl__head, .ptbl__row { display: grid; grid-template-columns: 2.4fr 1.6fr .7fr .95fr .95fr .7fr .9fr 1.5fr 1fr; gap: 12px; align-items: center; }
.ptbl__head { padding: 13px 20px; border-bottom: 1px solid var(--line); }
.ptbl__head span { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.ptbl__head .r, .ptbl__row .r { text-align: right; justify-self: end; }
.ptbl__head .c, .ptbl__cell.c { text-align: center; }
.ptbl__group { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 10px 20px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); background: var(--bg-2); }
.ptbl__row { padding: 11px 20px; border-top: 1px solid var(--line); width: 100%; text-align: left; transition: background .12s; }
.ptbl__row:hover { background: var(--bg-2); }
/* h74: op een telefoon valt de taaknaam niet weg; de tabel schuift horizontaal binnen haar kaart */
@media (max-width: 760px) {
  .ptbl { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ptbl__head, .ptbl__row, .ptbl__group { min-width: 900px; }
}
.ptbl__name { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; min-width: 0; }
.ptbl__cell { font-size: 12.5px; color: var(--text-2); min-width: 0; }
.ptbl__num { font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.ptbl__prog { display: flex; align-items: center; gap: 9px; }
.ptbl__prog i { font-style: normal; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 28px; }

/* baseline-ghost in gantt */
.gbar2__base { position: absolute; height: 5px; border-radius: 3px; background: repeating-linear-gradient(90deg, color-mix(in srgb,var(--steel) 55%,transparent) 0 4px, transparent 4px 8px); border: 1px solid color-mix(in srgb,var(--steel) 45%,transparent); box-sizing: border-box; z-index: 1; }
.gbar2__base--ms { width: 12px; height: 12px; transform: rotate(45deg); background: none; border: 1.5px dashed var(--steel); border-radius: 2px; }

/* look-ahead */
.la-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(168px, 1fr); gap: 12px; padding: 18px 20px; overflow-x: auto; }
.la-col { background: var(--bg-2); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.la-col.is-now { background: var(--brand-soft); outline: 1px solid color-mix(in srgb,var(--brand) 24%,transparent); }
.la-col__h { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--text-2); }
.la-col__h span { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); background: var(--surface); padding: 2px 7px; border-radius: 999px; }
.la-task { background: var(--surface); border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px; padding: 9px 10px; }
.la-task.is-vrij { border-left-color: var(--pos); }
.la-task.is-bel { border-left-color: var(--amber); }
.la-task--empty { border-left-color: var(--line); color: var(--text-3); font-size: 11px; font-style: italic; text-align: center; padding: 14px 10px; }
.la-task b { font-size: 12px; font-weight: 600; display: block; line-height: 1.3; }
.la-task__p { font-size: 11px; color: var(--text-3); display: block; margin: 2px 0 6px; }
.la-task__ok { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--pos-tekst); }
.la-task__bel { display: inline-flex; align-items: flex-start; gap: 5px; font-size: 10.5px; color: var(--amber); line-height: 1.35; }
.la-task__bel svg { flex-shrink: 0; margin-top: 1px; }

.ppc-big { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.ppc-big b { font-size: 42px; font-weight: 200; letter-spacing: -.03em; line-height: 1; }
.ppc-big span { font-size: 11.5px; color: var(--text-3); }
.ppc-bars { display: flex; align-items: flex-end; gap: 8px; height: 80px; }
.ppc-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.ppc-bar__track { width: 100%; height: 100%; display: flex; align-items: flex-end; background: var(--track); border-radius: 5px 5px 2px 2px; overflow: hidden; }
.ppc-bar__track i { width: 100%; border-radius: 5px 5px 0 0; }
.ppc-bar span { font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ppc-target { font-size: 11.5px; color: var(--text-3); margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.rea-list { display: flex; flex-direction: column; gap: 11px; }
.rea-row { display: grid; grid-template-columns: 1.5fr 1.2fr 20px; gap: 10px; align-items: center; }
.rea-row__l { font-size: 12px; color: var(--text-2); }
.rea-row__bar { height: 8px; border-radius: 5px; background: var(--track); overflow: hidden; }
.rea-row__bar i { display: block; height: 100%; border-radius: 5px; }
.rea-row b { font-size: 12.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* materiaalleveringen (procurement) */
.mp-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-bottom: var(--gap); }
.mp-sum__tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; }
.mp-sum__l { font-size: 11px; font-weight: 500; color: var(--text-3); letter-spacing: .02em; }
.mp-sum__v { font-size: 28px; font-weight: 200; letter-spacing: -.02em; line-height: 1.05; }
.mp-sum__s { font-size: 11px; color: var(--text-2); }
.mp-alert { display: flex; align-items: center; gap: 14px; margin-bottom: var(--gap); padding: 14px 16px; border-radius: 13px; background: color-mix(in srgb, var(--neg) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--neg) 28%, var(--line)); }
.mp-alert__ic { width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--neg) 14%, transparent); color: var(--neg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mp-alert > div { flex: 1; }
.mp-alert b { font-size: 13px; font-weight: 600; display: block; }
.mp-alert span { font-size: 12px; color: var(--text-2); }

.mp { padding: 8px 20px 6px; }
.mp-axis, .mp-row { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: stretch; }
.mp-axis { margin-bottom: 6px; }
.mp-axis__track { position: relative; height: 18px; }
.mp-tick { position: absolute; top: 2px; transform: translateX(-50%); font-size: 9.5px; color: var(--text-3); letter-spacing: .03em; }
.mp-todaylab { position: absolute; top: 2px; transform: translateX(-50%); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--signal); }
.mp-row { padding: 12px 0; border-top: 1px solid var(--line); }
.mp-row.is-urgent { background: color-mix(in srgb, var(--neg) 4%, transparent); }
.mp-row__l { min-width: 0; }
.mp-row__top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.mp-id { font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--bg-2); padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
.mp-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.mp-amt { margin-left: auto; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mp-art { font-size: 13px; font-weight: 500; display: block; line-height: 1.3; }
.mp-meta { font-size: 11px; color: var(--text-3); }
.mp-track { position: relative; height: 40px; background: linear-gradient(var(--bg-2), var(--bg-2)) no-repeat; border-radius: 8px; }
.mp-today--row { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed var(--signal); z-index: 3; }
.mp-bar { position: absolute; top: 9px; height: 16px; border: 1.5px solid; border-radius: 6px; display: flex; align-items: center; padding: 0 7px; min-width: 2px; box-sizing: border-box; }
.mp-bar__lead { font-style: normal; font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.mp-need { position: absolute; top: 11px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); border-radius: 2px; box-shadow: 0 0 0 2px var(--surface); z-index: 4; }
.mp-orderby { position: absolute; top: 7px; height: 22px; width: 0; border-left: 2px dotted; transform: translateX(-1px); z-index: 2; }
.mp-dates { position: absolute; left: 0; right: 0; bottom: -1px; display: flex; justify-content: space-between; pointer-events: none; }
.mp-dates i { font-style: normal; font-size: 9px; color: var(--text-3); }
.mp-foot { display: flex; flex-wrap: wrap; gap: 20px; padding: 13px 20px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--text-3); }
.mp-foot span { display: inline-flex; align-items: center; gap: 7px; }
.mp-needkey { width: 11px !important; height: 11px !important; border-radius: 2px; background: var(--navy); transform: rotate(45deg); display: inline-block; }
.mp-obkey { width: 0 !important; height: 13px !important; border-left: 2px dotted var(--text-3); border-radius: 0; display: inline-block; }
.legend__sw--dash { border-top: 2px dashed; height: 0; }

/* mijlpalen */
.mst-strip { position: relative; display: flex; justify-content: space-between; padding: 8px 4px 0; }
.mst-strip__line { position: absolute; left: 4%; right: 4%; top: 18px; height: 2px; background: var(--track); border-radius: 2px; }
.mst-strip__fill { position: absolute; left: 4%; top: 18px; height: 2px; background: var(--pos); border-radius: 2px; }
.mst-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; flex: 1; min-width: 0; z-index: 1; }
.mst-node__dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.mst-node__dot.is-now { box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 22%, transparent); }
.mst-node b { font-size: 11.5px; font-weight: 500; line-height: 1.25; }
.mst-node span { font-size: 10.5px; color: var(--text-3); }
.mst-list { width: 100%; }
.mst-row { display: grid; grid-template-columns: 110px 28px 1fr auto; gap: 14px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); }
.mst-row--now { background: color-mix(in srgb, var(--amber) 5%, transparent); }
.mst-row__date { font-size: 12px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.mst-row__rail { display: flex; justify-content: center; }
.mst-row__dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid; display: flex; align-items: center; justify-content: center; color: #fff; }
.mst-row__top { display: flex; align-items: center; gap: 10px; }
.mst-row__top b { font-size: 13.5px; font-weight: 500; }
.mst-type { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.mst-note { font-size: 11.5px; color: var(--text-3); display: block; margin-top: 3px; }
.mst-row__right { display: flex; align-items: center; gap: 12px; }
.mst-term { font-size: 12px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 1080px) { .mp-sum { grid-template-columns: repeat(2, 1fr); } .mp-axis, .mp-row { grid-template-columns: 200px 1fr; gap: 12px; } .mst-row { grid-template-columns: 84px 24px 1fr; } .mst-row__right { grid-column: 2 / -1; justify-content: flex-start; padding-left: 38px; } }

/* optioneel subproject */
.g-optie { font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .07em; color: var(--steel); background: color-mix(in srgb, var(--steel) 14%, transparent); border: 1px solid color-mix(in srgb, var(--steel) 30%, transparent); padding: 1px 5px; border-radius: 4px; margin-left: 7px; vertical-align: middle; }
.gbar2--optie { border: 1.5px dashed var(--steel) !important; color: var(--steel) !important; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--steel) 20%, var(--surface)) 0 5px, var(--surface) 5px 10px) !important; box-sizing: border-box; }
.gbar2--optie .gbar2__lbl { color: var(--steel); }
.opt-banner { display: flex; align-items: center; gap: 13px; margin: 0 14px 14px; padding: 12px 15px; border-radius: 12px; background: color-mix(in srgb, var(--steel) 8%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--steel) 40%, var(--line)); }
.opt-banner__ic { width: 32px; height: 32px; border-radius: 9px; background: color-mix(in srgb, var(--steel) 16%, transparent); color: var(--steel); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.opt-banner > div { flex: 1; }
.opt-banner b { font-size: 13px; font-weight: 600; display: block; }
.opt-banner span { font-size: 12px; color: var(--text-2); }

/* WBS-hierarchie: subregels, codes, collapse */
.ptbl__wbs { font-family: 'Roboto Mono', monospace; font-size: 10px; color: var(--text-3); min-width: 38px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ptbl__tnaam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptbl__row--sub { background: color-mix(in srgb, var(--bg-2) 45%, transparent); }
.ptbl__row--sub .ptbl__name { padding-left: 18px; }
.ptbl__row--sub .ptbl__tnaam { font-size: 12px; color: var(--text-2); font-weight: 400; }
.ptbl__row--sub .ptbl__dot { width: 6px; height: 6px; }
.ptbl__row--sub .ptbl__wbs { color: var(--text-3); opacity: .8; }
.ptbl__exp { width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); flex-shrink: 0; margin-left: -2px; transition: background .12s, color .12s; }
.ptbl__exp:hover { background: var(--line-strong); color: var(--text); }
.ptbl__expsp { width: 18px; flex-shrink: 0; margin-left: -2px; }
.ptbl__addsub { width: 20px; height: 20px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; color: var(--brand); background: transparent; flex-shrink: 0; margin-left: 4px; opacity: 0; transition: opacity .12s, background .12s; }
.ptbl__row--task:hover .ptbl__addsub { opacity: 1; }
.ptbl__addsub:hover { background: var(--brand-soft); }
.ptbl__group--btn { width: 100%; text-align: left; cursor: pointer; border: none; }
.ptbl__group--btn:hover { background: color-mix(in srgb, var(--brand) 6%, var(--bg-2)); }
.ptbl__gcount { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--text-3); letter-spacing: .02em; text-transform: none; }
/* selecteren & kopiëren */
.ptbl-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ptbl-tbtn { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.ptbl-tbtn:hover { border-color: var(--brand); color: var(--brand); }
.ptbl-tbtn svg { color: var(--brand); }
.ptbl-tbtn--brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.ptbl-tbtn--brand:hover { filter: brightness(1.06); color: #fff; }
.ptbl-tbtn--brand svg { color: #fff; }
.ptbl-tbtn:disabled { opacity: .5; cursor: default; }
.ptbl__group--sel { display: flex; align-items: center; gap: 8px; padding: 10px 20px 6px; }
.ptbl__gtog { background: none; border: none; padding: 0; color: var(--text-3); cursor: pointer; display: inline-flex; }
.ptbl__gname { cursor: pointer; }
.ptbl__selbox { width: 17px; height: 17px; flex-shrink: 0; border-radius: 5px; border: 1.5px solid var(--line-strong); background: var(--surface); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ptbl__selbox.is-on { background: var(--brand); border-color: var(--brand); }
.ptbl__selsp { width: 17px; flex-shrink: 0; display: inline-block; }
.ptbl__row.is-selected { background: var(--brand-soft); }

.gantt2__wbs { font-style: normal; font-family: 'Roboto Mono', monospace; font-size: 9.5px; color: var(--text-3); margin-right: 7px; font-variant-numeric: tabular-nums; }
.gantt2__grow--btn { width: 100%; text-align: left; border: none; background: var(--bg-2); cursor: pointer; }
.gantt2__grow--btn:hover { background: color-mix(in srgb, var(--brand) 7%, var(--bg-2)); }
.gantt2__gcount { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--text-3); padding-right: 4px; }
.gantt2__trow--sub { padding-left: 16px; background: color-mix(in srgb, var(--bg-2) 40%, transparent); }
.gantt2__trow--sub .gantt2__tname { font-size: 11.5px; color: var(--text-2); }
.gantt2__trow--sub .gantt2__pct { font-size: 10px; }
.gbar2--sub { border-radius: 3px; box-shadow: none; }
.gbar2--sub .gbar2__lbl { display: none; }

/* ============================================================
   PLANNING — EXPORT / AFDRUK (print-stijl blad)
   ============================================================ */
.exp-wrap { display: flex; flex-direction: column; gap: 14px; }
.exp-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.exp-actions__l { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.exp-actions__r { display: inline-flex; align-items: center; gap: 10px; }

/* export-bediening (bepaalt de PDF) */
.exp-ctrl { display: flex; flex-direction: column; gap: 10px; padding: 13px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.exp-ctrl__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.exp-ctrl__lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.exp-ctrl__sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.seg--sm .seg__btn { padding: 5px 11px; font-size: 11.5px; }
.exp-ctrl__toggle { font: inherit; font-size: 12px; font-weight: 500; color: var(--text-2); padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); }
.exp-ctrl__toggle:hover { border-color: var(--text-3); }
.exp-ctrl__toggle.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.exp-ctrl__win { display: inline-flex; align-items: center; gap: 8px; }
.exp-ctrl__sub { font-size: 11.5px; color: var(--text-3); }
.exp-ctrl__sel, .exp-ctrl__num { font: inherit; font-size: 12.5px; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--text); }
.exp-ctrl__num { width: 58px; }
.exp-ctrl__winlabel { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }
.exp-ctrl__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.exp-pchip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 11.5px; font-weight: 500; color: var(--text-2); padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); }
.exp-pchip:hover { border-color: var(--text-3); }
.exp-pchip i { width: 8px; height: 8px; border-radius: 999px; }
.exp-pchip.is-on { color: #fff; background: var(--chip, var(--brand)); border-color: var(--chip, var(--brand)); }

/* export-kopbalk: formaat + koppeling */
.exp-fmt { display: inline-flex; align-items: center; gap: 8px; }
.exp-fmt > span { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.exp-exact { gap: 7px; }
.exp-exact .exact-src__e { width: 16px; height: 16px; }

/* export-filter dropdowns */
.exp-dd { position: relative; }
.exp-dd__btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 12px; color: var(--text-2); padding: 6px 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); }
.exp-dd__btn:hover { border-color: var(--text-3); }
.exp-dd__btn.is-active { border-color: var(--brand); }
.exp-dd__lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.exp-dd__btn b { font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-dd__btn.is-active b { color: var(--brand); }
.exp-dd__btn > svg { color: var(--text-3); }
.exp-dd__scrim { position: fixed; inset: 0; z-index: 40; }
.exp-dd__menu--r { left: auto; right: 0; }
.exp-dd__menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 41; min-width: 240px; max-width: 320px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 11px; box-shadow: var(--shadow-lg); padding: 6px; animation: pop .14s ease; }
.exp-dd__list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.exp-dd__opt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; font: inherit; font-size: 12.5px; color: var(--text-2); padding: 8px 10px; border-radius: 7px; }
.exp-dd__opt:hover { background: var(--bg-2); }
.exp-dd__opt.is-on { color: var(--text); }
.exp-dd__opt--all { border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: 4px; font-weight: 600; }
.exp-dd__check { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line-strong); flex-shrink: 0; position: relative; }
.exp-dd__check.is-on::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/11px no-repeat; }
.exp-dd__dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.exp-dd__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-dd__n { font-style: normal; font-size: 10.5px; color: var(--text-3); margin-left: auto; font-variant-numeric: tabular-nums; }

/* planning-versiebalk + versie-dropdowns */
.pver { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
.pver__lbl { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.pver__lbl > svg { color: var(--brand); }
.pver__vs { font-size: 11.5px; color: var(--text-3); }
.pver__hint { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-3); }
.pver__ghost { width: 18px; height: 9px; border-radius: 2px; border: 1.5px dashed var(--steel); background: color-mix(in srgb, var(--steel) 12%, transparent); flex-shrink: 0; }
.pver__tagcur { display: inline-flex; }
.pv-dd__radio { width: 15px; height: 15px; border-radius: 999px; border: 1.5px solid var(--line-strong); flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.pv-dd__radio i { width: 7px; height: 7px; border-radius: 999px; background: var(--brand); }
.exp-dd__opt.is-on .pv-dd__radio { border-color: var(--brand); }
.pv-dd__lbl { font-size: 12.5px; font-weight: 600; display: block; }
.pv-dd__sub { font-style: normal; font-size: 10.5px; color: var(--text-3); display: block; }
.pv-dd__tag { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; white-space: nowrap; align-self: center; }
.pv-dd__tag--live { color: var(--pos-tekst); background: color-mix(in srgb, var(--pos) 13%, transparent); }
.pv-dd__tag--basis { color: var(--steel); background: color-mix(in srgb, var(--steel) 13%, transparent); }
.pv-dd__tag--concept { color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.pv-dd__tag--historie { color: var(--text-3); background: var(--bg-2); }
.pver__new { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; font-weight: 600; color: var(--brand); background: var(--brand-soft); padding: 6px 11px; border-radius: 8px; }
.pver__new:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.exp-dd__list { max-height: 320px; overflow-y: auto; }
.exp-ctrl__clear { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-2); padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 8px; }
.exp-ctrl__clear:hover { border-color: var(--neg); color: var(--neg); }

/* export-raster: dag · week · vandaag */
.exp-grid { position: absolute; right: 0; top: 0; bottom: 0; pointer-events: none; }
.exp-deps { position: absolute; right: 0; top: 0; pointer-events: none; z-index: 4; }
.exp-leg-dep { background: none !important; width: 16px !important; height: 0 !important; border-top: 1.5px solid #8b97a3; border-radius: 0 !important; }
.exp-grid__day { position: absolute; top: 0; bottom: 0; width: 1px; background: #eef1f4; }
.exp-grid__week { position: absolute; top: 0; bottom: 0; width: 1px; background: #d3dae0; }
.exp-grid__today { position: absolute; top: 0; bottom: 0; border-left: 1.5px dashed var(--brand); }
/* h84 (h77): label onder de onderste rij; bovenaan viel het over het label van een mijlpaal rond vandaag */
.exp-grid__today em { position: absolute; bottom: -12px; left: 3px; font-style: normal; font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); white-space: nowrap; }
.exp-sheet { background: #fff; color: #16202c; border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.16); padding: 30px 34px; max-width: 1180px; margin: 0 auto; width: 100%; }
.exp-paper-frame { position: relative; overflow: hidden; border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.16); }
.exp-paper-frame .exp-sheet { box-shadow: none; border-radius: 0; }
[data-theme="dark"] .exp-sheet { background: #fbfbfa; }
.exp-head { display: grid; grid-template-columns: 1.1fr 1.4fr 1.5fr; gap: 22px; align-items: start; padding-bottom: 16px; border-bottom: 2px solid #16202c; }
.exp-head__brand { display: flex; align-items: center; gap: 10px; }
.exp-logo { width: 34px; height: 34px; border-radius: 7px; background: #006271; color: #fff; font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; }
.exp-wm { display: flex; flex-direction: column; line-height: 1; }
.exp-wm__c { font-size: 21px; font-weight: 800; letter-spacing: .04em; color: #3a6e89; }
.exp-wm__p { font-size: 7px; font-weight: 700; letter-spacing: .3em; color: #28a9e0; margin-top: 3px; }
.set-wm { display: flex; flex-direction: column; line-height: 1; }
.set-wm__c { font-size: 21px; font-weight: 800; letter-spacing: .04em; color: var(--steel); }
.set-wm__p { font-size: 7.5px; font-weight: 700; letter-spacing: .3em; color: var(--cyan, #28a9e0); margin-top: 3px; }
.exp-head__brand b { font-size: 13.5px; display: block; color: #16202c; }
.exp-head__brand span { font-size: 11px; color: #5a6b7b; }
.exp-head__title h2 { font-size: 21px; font-weight: 700; margin: 0; letter-spacing: -.01em; color: #16202c; }
.exp-head__title p { font-size: 12px; color: #5a6b7b; margin: 3px 0 0; }
.exp-meta { border-collapse: collapse; font-size: 11px; width: 100%; }
.exp-meta td { color: #5a6b7b; padding: 2px 10px 2px 0; white-space: nowrap; }
.exp-meta th { color: #16202c; text-align: left; font-weight: 600; padding: 2px 16px 2px 0; }
.exp-legend { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid #d8dee4; }
.exp-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #3a4754; }
.exp-legend i { width: 13px; height: 9px; border-radius: 2px; }
.exp-leg-base { background: repeating-linear-gradient(90deg, #9aa7b2 0 3px, transparent 3px 6px) !important; border: 1px solid #c2cbd3; }
.exp-legend__count { margin-left: auto; font-weight: 600; color: #16202c; font-size: 11px; }

.exp-gantt { padding: 14px 0; border-bottom: 1px solid #d8dee4; }
.exp-gantt__axis { position: relative; height: 14px; }
.exp-gantt__tick { position: absolute; font-size: 9px; color: #8b97a3; transform: translateX(-50%); }
.exp-gantt__body { position: relative; }
.exp-grow { display: flex; align-items: center; }
.exp-grow b { font-size: 10.5px; font-weight: 700; color: #16202c; text-transform: uppercase; letter-spacing: .03em; }
.exp-trow { display: flex; align-items: center; }
.exp-trow__name { font-size: 10px; color: #3a4754; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; display: flex; align-items: center; gap: 5px; }
.exp-wbs { font-style: normal; font-family: 'Roboto Mono', monospace; font-size: 8.5px; color: #9aa7b2; }
.exp-insp { display: inline-block; flex: none; height: 1px; }
.exp-trow__name .ptbl__crit { transform: scale(.85); }
.exp-trow__track { position: relative; flex: 1; height: 100%; }
.exp-bar { position: absolute; top: 50%; transform: translateY(-50%); height: 9px; min-width: 3px; border-radius: 2px; box-sizing: border-box; overflow: hidden; }
.exp-bar em { display: block; height: 100%; background: rgba(255,255,255,.45); }
.exp-base { position: absolute; top: 50%; transform: translateY(-50%); height: 3px; margin-top: 7px; background: #b3bcc4; border-radius: 2px; }

.exp-ms { padding: 12px 0; border-bottom: 1px solid #d8dee4; }
.exp-ms__h { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #16202c; margin-bottom: 9px; }
.exp-ms__row { display: flex; flex-wrap: wrap; gap: 10px; }
.exp-ms__item { display: flex; flex-direction: column; gap: 1px; padding: 7px 11px; border-radius: 6px; background: #f1f4f6; border-left: 3px solid #9aa7b2; min-width: 120px; }
.exp-ms__item b { font-size: 11.5px; color: #16202c; }
.exp-ms__item span { font-size: 10px; color: #5a6b7b; }
.exp-ms__item i { font-style: normal; font-size: 10px; font-weight: 700; color: #006271; margin-top: 2px; }
.exp-ms--done { border-left-color: #6E8CA3; }
.exp-ms--now { border-left-color: #B07D2B; background: #faf3e6; }
.exp-ms--planned { border-left-color: #c2cbd3; }

.exp-tbl { padding-top: 12px; }
.exp-tbl__head { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8b97a3; padding-bottom: 6px; border-bottom: 1px solid #16202c; }
.exp-tbl__head .r, .exp-tbl__row .r { text-align: right; }
.exp-tbl__grp { font-size: 10.5px; font-weight: 700; color: #16202c; background: #eef1f4; padding: 5px 8px; margin-top: 4px; text-transform: uppercase; letter-spacing: .02em; }
.exp-tbl__row { padding: 4px 0; border-bottom: 1px solid #eaeef1; font-size: 10.5px; color: #3a4754; }
.exp-tbl__row--t { font-weight: 600; color: #16202c; }
.exp-tbl__row--t span:nth-child(2) { display: flex; align-items: center; gap: 6px; }
.exp-tbl__row--s span:nth-child(2) { padding-left: 14px; color: #5a6b7b; }
.exp-tbl__wbs { font-family: 'Roboto Mono', monospace; font-size: 9px; color: #8b97a3; }
.exp-tbl__row--t .exp-tbl__wbs { color: #006271; }
.exp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 10px; border-top: 2px solid #16202c; font-size: 9.5px; color: #5a6b7b; }
@media (max-width: 980px) { .exp-head { grid-template-columns: 1fr; gap: 12px; } .exp-tbl__head, .exp-tbl__row { grid-template-columns: 36px 1fr 90px 46px 46px 30px 30px; } }

/* resource-leveling */
.rl { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.rl-row { display: grid; grid-template-columns: 190px 1fr; gap: 16px; align-items: center; }
.rl-row__l { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rl-row__l b { font-size: 12.5px; font-weight: 500; }
.rl-row__l i { font-style: normal; font-size: 10.5px; color: var(--text-3); width: 100%; padding-left: 16px; }
.rl-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.rl-hist { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; align-items: end; }
.rl-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rl-col__track { position: relative; width: 100%; height: 58px; background: var(--track); border-radius: 4px; display: flex; align-items: flex-end; overflow: visible; }
.rl-col__track i { width: 100%; border-radius: 4px; min-height: 2px; }
.rl-cap { position: absolute; left: -1px; right: -1px; height: 0; border-top: 1.5px dashed var(--text); z-index: 2; }
.rl-col span { font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.rl-col span.is-over { color: var(--neg); font-weight: 700; }
.rl-weeks { display: grid; grid-template-columns: 190px 1fr; gap: 16px; }
.rl-weeks .rl-hist { align-items: center; }
.rl-wk { font-size: 9.5px; color: var(--text-3); text-align: center; letter-spacing: .02em; }
.rl-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--text-2); align-items: center; }
.rl-legend span { display: inline-flex; align-items: center; gap: 7px; }
.rl-legend i { width: 11px; height: 11px; border-radius: 3px; }
.rl-capline { width: 16px !important; height: 0 !important; border-top: 1.5px dashed var(--text); }
/* A15 — HR-verlof: afwezigheidsband + effectieve capaciteitslijn op de eigen ploeg */
.rl-afw { position: absolute; top: 0; left: -1px; right: -1px; z-index: 1; border-radius: 4px 4px 0 0; pointer-events: none; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--text-3) 34%, transparent) 0 3px, transparent 3px 6px); }
.rl-cap--eff { border-top-style: dotted !important; border-top-color: var(--amber) !important; border-top-width: 1.5px; }
.rl-afwline { width: 13px !important; height: 11px !important; border-radius: 3px; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--text-3) 50%, transparent) 0 2px, transparent 2px 4px) !important; }

/* scenario's */
.scen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.scen-card { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); transition: all .18s; display: flex; flex-direction: column; gap: 12px; }
.scen-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.scen-card.is-sel { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow); }
.scen-card__top { display: flex; align-items: center; justify-content: space-between; }
.scen-now { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); padding: 3px 9px; border-radius: 999px; }
.scen-risk { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; margin-left: auto; }
.scen-risk i { width: 8px; height: 8px; border-radius: 50%; }
.scen-card__naam { font-size: 15.5px; font-weight: 500; letter-spacing: -.01em; }
.scen-card__opl { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.scen-card__opl span { font-size: 11px; color: var(--text-3); }
.scen-card__opl b { font-size: 16px; font-weight: 400; }
.scen-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.scen-metrics > div { display: flex; flex-direction: column; gap: 2px; }
.scen-metrics span { font-size: 10px; color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; }
.scen-metrics b { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.scen-foot { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.scen-foot__kv { display: flex; flex-direction: column; gap: 3px; }
.scen-foot__kv span { font-size: 11px; color: var(--text-3); }
.scen-foot__kv b { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* taak-modal tabs */
.tm-check { display: flex; flex-direction: column; gap: 2px; }
.tm-check__bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tm-check__bar > div:first-child { flex: 1; }
.tm-check__bar span { font-size: 12px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tm-check__row { display: flex; align-items: center; gap: 11px; padding: 11px 8px; border-top: 1px solid var(--line); width: 100%; text-align: left; font-size: 13px; transition: background .12s; }
.tm-check__row:hover { background: var(--bg-2); }
.tm-check__box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.tm-check__box.is-on { background: var(--brand); border-color: var(--brand); }
.tm-stabu__h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tm-stabu__code { font-family: 'Roboto Mono', monospace; font-size: 13px; font-weight: 600; color: var(--brand); background: var(--brand-soft); padding: 5px 11px; border-radius: 8px; }
.tm-stabu__h b { font-size: 14.5px; font-weight: 500; }
.tm-stabu__p { font-size: 12.5px; color: var(--text-2); line-height: 1.6; margin: 0 0 16px; }
.tm-links { display: flex; flex-direction: column; gap: 8px; }
.tm-link.is-muted { cursor: default; opacity: .7; }
.tm-link.is-muted:hover { background: var(--bg-2); color: var(--text-2); }
/* A12 — leveringspin & inkoopkoppeling-popover */
.gantt2__levpin.is-sel { box-shadow: 0 0 0 2px var(--brand); }
.gantt2__levpop { min-width: 248px; max-width: 268px; display: flex; flex-direction: column; gap: 9px; }
.gantt2__levpop-h { display: flex; align-items: baseline; gap: 8px; }
.gantt2__levpop-id { font-size: 11px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.gantt2__levpop-h b { font-size: 13px; font-weight: 600; line-height: 1.3; }
.gantt2__levpop-meta { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 11.5px; }
.gantt2__levpop-meta > span { color: var(--text-3); }
.gantt2__levpop-meta > b { font-weight: 500; text-align: right; }
.gantt2__levpop-st { text-transform: capitalize; }
.gantt2__levpop-st--ontvangen { color: var(--pos-tekst); }
.gantt2__levpop-st--onderweg { color: var(--steel); }
.gantt2__levpop-st--besteld { color: var(--navy); }
.gantt2__levpop-st--te-bestellen { color: var(--amber-tekst); }
.gantt2__levpop-ink { border-top: 1px solid var(--line); padding-top: 9px; display: flex; flex-direction: column; gap: 5px; }
.gantt2__levpop-inkh { display: flex; align-items: center; gap: 7px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.gantt2__levpop-gun { margin-left: auto; padding: 1px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 15%, transparent); }
.gantt2__levpop-gun.is-gun { color: var(--pos-tekst); background: color-mix(in srgb, var(--pos) 15%, transparent); }
.gantt2__levpop-inkr { font-size: 12.5px; }
.gantt2__levpop-inkr--p { font-size: 11.5px; color: var(--text-2); }
.gantt2__levpop-bedr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 3px; }
.gantt2__levpop-bedr > div { display: flex; flex-direction: column; gap: 2px; }
.gantt2__levpop-bedr span { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.gantt2__levpop-bedr b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gantt2__levpop-ink--none { flex-direction: row; align-items: center; gap: 8px; color: var(--amber-tekst); font-size: 12px; }
.tm-calc { display: flex; flex-direction: column; gap: 10px; }
.tm-calc__sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tm-calc__sum > div { background: var(--bg-2); border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 3px; }
.tm-calc__sum span { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.tm-calc__sum b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tm-calc__rows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tm-calc__row { display: grid; grid-template-columns: 64px 1fr 62px 64px; gap: 10px; align-items: center; padding: 8px 12px; font-size: 12px; border-bottom: 1px solid var(--line); }
.tm-calc__row:last-child { border-bottom: 0; }
.tm-calc__row:nth-child(odd) { background: color-mix(in srgb, var(--text-3) 4%, transparent); }
.tm-calc__code { font-variant-numeric: tabular-nums; color: var(--text-3); font-size: 11px; }
.tm-calc__oms { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-calc__u { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tm-calc__bedr { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
/* A18 — inzet & certificering-check in de taakmodal */
.tm-cert .tm-ovh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tm-cert__tag { font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: none; padding: 2px 9px; border-radius: 999px; }
.tm-cert.is-ok .tm-cert__tag { color: var(--pos-tekst); background: color-mix(in srgb, var(--pos) 14%, transparent); }
.tm-cert.is-krap .tm-cert__tag { color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 16%, transparent); }
.tm-cert.is-blok .tm-cert__tag { color: var(--neg); background: color-mix(in srgb, var(--neg) 14%, transparent); }
.tm-cert__sub { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.tm-cert.is-blok .tm-cert__sub { color: var(--neg); }
.tm-cert__rows { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.tm-cert__row { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 10px; align-items: center; padding: 7px 12px; border-radius: 8px; background: var(--bg-2); font-size: 12.5px; }
.tm-cert__dot { width: 8px; height: 8px; border-radius: 50%; }
.tm-cert__dot.is-blok { background: var(--neg); }
.tm-cert__dot.is-krap { background: var(--amber); }
.tm-cert__c { font-size: 11px; color: var(--text-3); }
.tm-cert__d { font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tm-link { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 10px; background: var(--bg-2); font-size: 13px; color: var(--text-2); cursor: pointer; transition: background .12s; }
.tm-link:hover { background: var(--brand-soft); color: var(--brand); }
.tm-link span { flex: 1; }
.tm-bon__head, .tm-bon__row { display: grid; grid-template-columns: 1fr 1.5fr .7fr 2.4fr; gap: 12px; align-items: center; }
.tm-bon__head { padding-bottom: 9px; border-bottom: 1px solid var(--line); font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.tm-bon__head .r, .tm-bon__row .r { text-align: right; }
.tm-bon__row { padding: 11px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.tm-bon__row span:first-child { font-variant-numeric: tabular-nums; color: var(--text-3); }
.tm-bon__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 12px; border-top: 2px solid var(--line-strong); }
.tm-bon__foot span { font-size: 12.5px; font-weight: 600; }
.tm-bon__foot b { font-size: 15px; font-weight: 700; }
.tm-dep { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.tm-overview { display: flex; flex-direction: column; gap: 4px; }
.tm-ovgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
@media (max-width: 720px) { .tm-ovgrid { grid-template-columns: 1fr; } }
.tm-ovsec { display: flex; flex-direction: column; min-width: 0; }
.tm-ovh { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 0 0 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.tm-ovsec .tm-dep { grid-template-columns: 1fr; gap: 14px; }
.tm-dep__h { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 11px; }
.tm-dep__row { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.tm-dep__row i { font-style: normal; font-size: 11px; color: var(--text-3); margin-left: auto; }
.tm-dep__empty { font-size: 12.5px; color: var(--text-3); padding: 10px 0; border-top: 1px solid var(--line); }
.tm-hist { display: flex; flex-direction: column; }
.tm-hist__row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.tm-hist__row:first-child { border-top: none; }
.tm-hist__ic { width: 28px; height: 28px; border-radius: 8px; background: var(--bg-2); color: var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tm-hist__row b { font-size: 13px; font-weight: 500; display: block; }
.tm-hist__row span { font-size: 11.5px; color: var(--text-3); }
@media (max-width: 1080px) { .scen-grid { grid-template-columns: 1fr; } .rl-row, .rl-weeks { grid-template-columns: 130px 1fr; } }

/* ============================================================
   UREN — urenstaat
   ============================================================ */
.uren-week { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 11px; padding: 4px; }
.uren-week button { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-2); }
.uren-week button:hover { background: var(--bg-2); color: var(--text); }
.uren-week span { display: flex; flex-direction: column; align-items: center; line-height: 1.1; padding: 0 10px; min-width: 92px; }
.uren-week b { font-size: 13.5px; font-weight: 600; }
.uren-week i { font-style: normal; font-size: 11px; color: var(--text-3); }

.uren { width: 100%; }
.uren__head, .uren__row, .uren__foot { display: grid; grid-template-columns: minmax(220px, 2.4fr) repeat(7, 1fr) 74px 34px; gap: 6px; align-items: center; }
.uren__head { padding: 12px 18px; border-bottom: 1px solid var(--line-strong); }
.uren__head > span { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.uren__day { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.uren__day i { font-style: normal; font-size: 10px; color: var(--text-3); font-weight: 500; }
.uren__day--we { color: var(--text-3); }
.uren__tot-h { text-align: center; }
.uren__row { padding: 8px 18px; border-bottom: 1px solid var(--line); }
.uren__row:hover { background: var(--bg-2); }
.uren__row--bad { background: var(--neg-soft); }
.uren__descrow { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; padding-left: 2px; }
.uren__desc { flex: 1; font-size: 12.5px; padding: 7px 11px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text); }
.uren__desc::placeholder { color: var(--text-3); }
.uren__desc:focus { outline: none; border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-soft); }
.uren__desc.is-bad { border-color: var(--neg); background: var(--neg-soft); }
.uren__wc { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--text-3); white-space: nowrap; min-width: 64px; justify-content: flex-end; }
.uren__wc.is-ok { color: var(--pos-tekst); }
.uren__alert { display: flex; align-items: flex-start; gap: 11px; margin: 0 18px; padding: 13px 15px; border-radius: 12px; background: var(--neg-soft); color: var(--neg); }
.uren__alert > svg { flex-shrink: 0; margin-top: 1px; }
.uren__alert div { display: flex; flex-direction: column; gap: 3px; }
.uren__alert span { font-size: 12.5px; color: var(--text); line-height: 1.45; }
.uren__alert b { font-weight: 700; }

/* team-uren (leesrechten) */
.uren-teamnote { display: flex; align-items: center; gap: 10px; margin-bottom: var(--gap); padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--steel) 8%, var(--surface)); border: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); }
.uren-teamnote svg { color: var(--steel); flex-shrink: 0; }
.uren-teamnote b { color: var(--text); font-weight: 600; }
.uren-team__row { grid-template-columns: 2fr 1.4fr 1fr 1fr !important; }
.uren-team__row--act { grid-template-columns: 1.8fr 1.2fr 0.8fr 1fr 1.4fr !important; }
.uren-team__act { display: inline-flex; align-items: center; gap: 7px; justify-content: flex-end; }
.uren-team__ok, .uren-team__rej { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.uren-team__ok { background: var(--brand); border-color: var(--brand); color: #fff; }
.uren-team__ok:hover { filter: brightness(1.06); }
.uren-team__rej:hover { border-color: var(--signal); color: var(--signal); }
.uren-team__av { width: 28px; height: 28px; border-radius: 50%; background: var(--steel); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-right: 9px; }

/* ============================================================
   PROJECTANALYSE — AI-eisen uit bestek & tekeningen
   ============================================================ */
/* ---- Werkzaamhedenregister embed (onder Projectanalyse) ---- */
.anlz-reg-sep { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 30px 0 14px; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.wzr-embed-frame { width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none; display: block; overflow: hidden; }
/* embed-wrapper: vaste (onthouden) hoogte → geen sprong, content fade-t in */
.wzr-embed-wrap { position: relative; width: 100%; transition: height .32s cubic-bezier(.4,0,.2,1); }
.wzr-embed-wrap .wzr-embed-frame { opacity: 0; transition: opacity .3s ease .04s; }
.wzr-embed-wrap.is-ready .wzr-embed-frame { opacity: 1; }
/* skeleton-laadstaat — volgt de vormtaal van het WZR-dashboard */
.wzr-skel { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 16px; pointer-events: none; }
.wzr-embed-wrap.is-ready .wzr-skel { opacity: 0; }
@keyframes wzrShimmer { 0% { background-position: -460px 0; } 100% { background-position: 460px 0; } }
.wzr-skel__bar, .wzr-skel__kpi, .wzr-skel__row {
  border-radius: 12px;
  background: var(--bg-2);
  background-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--line) 55%, transparent) 50%, transparent 100%);
  background-size: 460px 100%; background-repeat: no-repeat;
  animation: wzrShimmer 1.25s ease-in-out infinite;
}
.wzr-skel__bar { height: 52px; }
.wzr-skel__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.wzr-skel__kpi { height: 86px; }
.wzr-skel__rows { display: flex; flex-direction: column; gap: 10px; }
.wzr-skel__row { height: 46px; }
.wzr-skel__row:nth-child(even) { opacity: .72; }
.wzr-skel__note { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: var(--text-3); }
.wzr-spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--brand); animation: wzrSpin .7s linear infinite; }
@keyframes wzrSpin { to { transform: rotate(360deg); } }

.anlz-ai { display: flex; align-items: center; gap: 14px; margin-bottom: var(--gap); padding: 15px 18px; border-radius: 14px; background: linear-gradient(180deg, var(--brand-soft), transparent), var(--surface); border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line)); box-shadow: inset 0 1px 0 var(--edge), var(--shadow); }
.anlz-ai__ic { width: 38px; height: 38px; border-radius: 11px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px var(--brand-soft); }
.anlz-ai__txt { flex: 1; min-width: 0; }
.anlz-ai__txt b { font-size: 13.5px; font-weight: 600; display: block; }
.anlz-ai__txt span { font-size: 12px; color: var(--text-2); }
.anlz-ai__docs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 320px; }
.anlz-doc { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-2); background: var(--bg-2); padding: 4px 9px; border-radius: 7px; }
@media (max-width: 1080px) { .anlz-ai__docs { display: none; } }

.anlz-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: var(--gap); }
.anlz-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; 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; }
.anlz-chip:hover { border-color: var(--text-3); }
.anlz-chip.is-on { background: var(--bg-2); }
.anlz-chip i { width: 9px; height: 9px; border-radius: 3px; }
.anlz-chip span { font-size: 10.5px; font-weight: 700; color: var(--text-3); }

.anlz-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 980px) { .anlz-list { grid-template-columns: 1fr; } }
.anlz-card { display: flex; gap: 0; background-image: linear-gradient(180deg, var(--sheen), transparent 42%); background-color: var(--surface); border: 1px solid var(--line); border-radius: 15px; overflow: hidden; box-shadow: inset 0 1px 0 var(--edge), var(--shadow); transition: box-shadow .18s, transform .18s; }
.anlz-card:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--edge), var(--shadow-lg); }
.anlz-card.is-confirmed { border-color: color-mix(in srgb, var(--pos) 30%, var(--line)); }
.anlz-card__bar { width: 4px; flex-shrink: 0; }
.anlz-card__main { flex: 1; min-width: 0; padding: 15px 17px; }
.anlz-card__top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.anlz-cat { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.anlz-src { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--text-3); }
.anlz-src--ai { color: var(--brand); }
.anlz-conf { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex-shrink: 0; }
.anlz-card__titel { font-size: 14.5px; font-weight: 600; line-height: 1.3; display: block; margin-bottom: 6px; letter-spacing: -.01em; }
.anlz-card__detail { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin: 0 0 12px; }
.anlz-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 11px; border-top: 1px solid var(--line); }
.anlz-bron { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); min-width: 0; }
.anlz-bron svg { flex-shrink: 0; }
.anlz-bron--link { background: none; border: 0; cursor: pointer; font: inherit; font-size: 11px; padding: 0; }
.anlz-bron--link:hover { color: var(--brand); text-decoration: underline; }
.anlz-card__actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.anlz-btn { width: 26px; height: 26px; border-radius: 7px; color: var(--text-3); display: flex; align-items: center; justify-content: center; }
.anlz-btn:hover { background: var(--neg-soft); color: var(--neg); }
.anlz-confirm { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-2); border: 1px solid var(--line-strong); border-radius: 8px; padding: 5px 11px; }
.anlz-confirm:hover { border-color: var(--pos); color: var(--pos); }
.anlz-confirm.is-on { background: color-mix(in srgb, var(--pos) 13%, transparent); border-color: transparent; color: var(--pos); }

/* ---- klikbare financiële kengetallen + detailmodal ---- */
.dashfin__f--btn { width: 100%; text-align: left; cursor: pointer; position: relative; transition: transform .16s, box-shadow .16s; }
.dashfin__f--btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--edge), var(--shadow-lg); }
.dashfin__more { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 10px; font-weight: 600; color: var(--text-3); opacity: 0; transition: opacity .14s; }
.dashfin__f--btn:hover .dashfin__more { opacity: 1; }
/* heldertegel bovenin het detailvenster: KpiTegel met nadruk, alleen de ruimte eronder is eigen */
.kpi.ffm-hero { margin-bottom: 12px; }
.ffm-sec { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.ffm-rows { display: flex; flex-direction: column; }
.ffm-row { display: grid; grid-template-columns: 1.5fr 1.4fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ffm-row__l { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.ffm-row__l i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.ffm-row__track { height: 8px; border-radius: 5px; background: var(--track); overflow: hidden; box-shadow: inset 0 1px 2px rgba(12,48,55,.08); }
.ffm-row__track span { display: block; height: 100%; border-radius: 5px; }
.ffm-row__v { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ffm-row--tot { border-top: 2px solid var(--line-strong); border-bottom: none; margin-top: 2px; padding-top: 11px; }
.ffm-row--tot .ffm-row__l { font-weight: 700; color: var(--text); }
.ffm-row--tot .ffm-row__v { font-size: 15px; font-weight: 700; }
.ffm-note { font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin: 14px 0 0; }
.bibmodal--fin { width: min(640px, 95vw); }
.ffm-sec { margin-top: 20px; }
.ffm-tbl { display: flex; flex-direction: column; }
.ffm-tbl__r { display: grid; grid-template-columns: 1.5fr 0.9fr 0.9fr 0.9fr 1fr; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ffm-tbl__r b { font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ffm-tbl__name { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.ffm-tbl__name i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.ffm-tbl__pl { font-size: 12px; font-weight: 600; text-align: right; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ffm-tbl__bar { position: relative; height: 16px; border-radius: 5px; background: var(--bg-2); overflow: hidden; display: flex; align-items: center; }
.ffm-tbl__bar > span { position: absolute; left: 0; top: 0; height: 100%; border-radius: 5px; opacity: .85; }
.ffm-tbl__bar em { position: relative; margin-left: auto; padding-right: 6px; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--text); }
.ffm-tbl__r--h { border-bottom: 1px solid var(--line-strong); padding-bottom: 7px; }
.ffm-tbl__r--h b, .ffm-tbl__r--h .ffm-tbl__pl, .ffm-tbl__r--h .ffm-tbl__name { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.ffm-tbl__r--tot { border-top: 2px solid var(--line-strong); border-bottom: none; margin-top: 2px; padding-top: 11px; }
.ffm-tbl__r--tot .ffm-tbl__name { font-weight: 700; color: var(--text); }
.ffm-tbl__r--tot b { font-size: 13px; font-weight: 700; }
.ffm-tbl__r--tot .ffm-tbl__pl { color: var(--text-2); font-weight: 700; }
.ffm-tbl__r--clk { cursor: pointer; border-radius: 7px; transition: background .12s; }
.ffm-tbl__r--clk:hover { background: var(--brand-soft); box-shadow: 0 0 0 8px var(--brand-soft); }
.fcat--clk { cursor: pointer; border-radius: 8px; transition: background .12s; }
.fcat--clk:hover { background: var(--brand-soft); }
button.kpi { -webkit-appearance: none; appearance: none; font: inherit; color: inherit; text-align: left; width: 100%; }
.kpi--clk { cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
.kpi--clk:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: 0 2px 10px color-mix(in srgb, var(--brand) 14%, transparent); }

/* ============================================================
   MEER- & MINDERWERK
   ============================================================ */
.mm-add { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 9px; padding: 7px 12px; border: 1px solid var(--line-strong); }
.mm-add--meer { color: var(--pos-tekst); border-color: color-mix(in srgb, var(--pos) 32%, var(--line)); }
.mm-add--meer:hover { background: color-mix(in srgb, var(--pos) 10%, transparent); }
.mm-add--minder { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 32%, var(--line)); }
.mm-add--minder:hover { background: color-mix(in srgb, var(--neg) 10%, transparent); }
.mm-row { grid-template-columns: 2.6fr 1fr .9fr 1fr 64px !important; }
.mm-badge { width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: #fff; margin-right: 9px; flex-shrink: 0; }
.mm-badge--meer { background: var(--pos); }
.mm-badge--minder { background: var(--neg); }
.mm-row--tot { background: var(--bg-2); border-top: 1.5px solid var(--line-strong); }
.mm-rowact { display: flex; gap: 4px; justify-content: flex-end; }
.mm-rowact button { width: 26px; height: 26px; border-radius: 7px; color: var(--text-3); display: flex; align-items: center; justify-content: center; }
.mm-rowact button:hover { background: var(--bg-2); color: var(--text); }
.mm-stel-row { grid-template-columns: 2fr 1fr 1.1fr !important; }
.mm-row2 { grid-template-columns: 2.3fr 0.85fr 1.2fr 0.95fr 1.85fr !important; }
.mm-contract { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.mm-contract__step { flex: 1; min-width: 132px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.mm-contract__step span { font-size: 11.5px; color: var(--text-3); line-height: 1.3; }
.mm-contract__step b { font-size: 18px; font-weight: 600; }
.mm-contract__step--tot { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.mm-contract__op { align-self: center; font-size: 17px; color: var(--text-3); font-weight: 600; }
.mm-contract__foot { margin-top: 13px; font-size: 12.5px; color: var(--text-2); }
.mm-setbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 11px 16px; margin-bottom: var(--gap); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.mm-setbar__it { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); }
.mm-setbar__it b { color: var(--text); font-weight: 600; }
.mm-setbar__it > svg { color: var(--text-3); }
.mm-setbar__warn { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--amber-tekst); }
.mm-setbar__edit { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 6px 11px; border: 1px solid var(--line-strong); border-radius: 8px; }
.mm-setbar__edit:hover { border-color: var(--brand); color: var(--brand); }
.mm-statuscell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.mm-deadline { font-style: normal; font-size: 10px; color: var(--text-3); }
.mm-aanog { display: flex; flex-direction: column; align-items: flex-end; }
.mm-aanog b { font-weight: 700; font-variant-numeric: tabular-nums; }
.mm-aanog i { font-style: normal; font-size: 10px; color: var(--text-3); }
.mm-rowact .mm-advance { width: auto; height: auto; font: inherit; font-size: 11px; font-weight: 600; color: #fff; background: var(--brand); padding: 5px 10px; border-radius: 7px; white-space: nowrap; }
.mm-rowact .mm-advance:hover { background: color-mix(in srgb, var(--brand) 88%, black); color: #fff; }
.mm-stelfoot { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-3); padding: 10px 18px 14px; }
.mm-sethint { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin: 12px 0 0; }
.mm-sethint b { color: var(--text-2); font-weight: 600; }
.mm-ogbox { display: flex; flex-direction: column; gap: 5px; margin-top: 14px; padding: 13px 15px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.mm-ogbox__row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--text-2); }
.mm-ogbox__row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.mm-opslag { display: inline-flex; align-items: center; gap: 1px; }
.mm-opslag input { width: 46px; padding: 3px 6px; margin: 0 2px; font-size: 12px; font-weight: 600; text-align: right; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.mm-opslag input:focus { outline: none; border-color: var(--brand); }
.mm-opslag input::-webkit-outer-spin-button, .mm-opslag input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mm-ogbox__row--tot { border-top: 1px solid var(--line-strong); margin-top: 4px; padding-top: 8px; }
.mm-ogbox__row--tot span { font-weight: 600; color: var(--text); }
.mm-ogbox__row--tot b { font-size: 16px; }
.mm-calcresult__r--og { border-top: 1px solid var(--line); margin-top: 2px; padding-top: 8px; font-size: 11.5px; }
.mm-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--brand); }
.mm-link:hover { text-decoration: underline; }
/* meerwerk — uitgebreide invoer & detail */
.mm-postmodal { width: min(640px, 96vw); }
.mm-sec { margin-top: 18px; }
.mm-koppelhint { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); margin: 6px 0 0; }
.mm-koppelhint svg { color: var(--brand); flex-shrink: 0; }
.mm-kost { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 8px; }
.mm-kost__f { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--line); }
.mm-kost__f:first-child { border-top: none; }
.mm-kost__lbl { display: flex; flex-direction: column; font-size: 12.5px; font-weight: 500; color: var(--text); }
.mm-kost__lbl em { font-style: normal; font-size: 10.5px; color: var(--text-3); font-weight: 400; }
.mm-kost__in { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 10px; }
.mm-kost__in i { font-style: normal; font-size: 12px; color: var(--text-3); }
.mm-kost__in input { width: 96px; border: none; background: none; text-align: right; font: inherit; font-size: 13px; padding: 7px 0; color: var(--text); font-variant-numeric: tabular-nums; }
.mm-kost__in input:focus { outline: none; }
.mm-kost__tot { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--bg-2); border-top: 1px solid var(--line-strong); font-size: 13px; }
.mm-kost__tot b { font-weight: 700; font-variant-numeric: tabular-nums; }
.mm-expand { width: 20px; height: 20px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); flex-shrink: 0; transition: background .12s, transform .12s; }
.mm-expand:hover { background: var(--line); color: var(--text); }
.mm-expand.is-open { transform: rotate(90deg); }
.mm-namewrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-namewrap > b { font-size: 13.5px; font-weight: 500; }
.mm-namewrap > i { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.mm-namewrap--btn { cursor: pointer; }
.mm-namewrap--btn:hover > b { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.mm-hasnote { display: inline-flex; align-items: center; gap: 4px; color: var(--brand) !important; font-weight: 600; }
.reg__row.is-open { background: var(--bg-2); }
.mm-detail { padding: 4px 20px 18px 49px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 55%, transparent); animation: mmDetIn .16s ease; }
@keyframes mmDetIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.mm-detail__cols { display: grid; grid-template-columns: 1fr 280px; gap: 22px; padding-top: 14px; }
@media (max-width: 980px) { .mm-detail__cols { grid-template-columns: 1fr; } }
.mm-detail__lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 5px; }
.mm-detail__oorzaak { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 14px; }
.mm-detail__txt { font-size: 12.5px; line-height: 1.6; color: var(--text-2); margin: 0 0 14px; max-width: 60ch; }
.mm-detail__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.mm-detail__meta span { font-size: 11.5px; color: var(--text-3); }
.mm-detail__meta b { color: var(--text-2); font-weight: 600; }
.mm-detail__kost { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; align-self: start; }
.mm-detail__krow { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-2); padding: 3px 0; }
.mm-detail__krow b { font-weight: 600; font-variant-numeric: tabular-nums; }
.mm-detail__krow--sub { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 8px; color: var(--text); font-weight: 600; }
.mm-detail__krow--tot { border-top: 1px solid var(--line-strong); margin-top: 4px; padding-top: 8px; font-size: 13px; }
.mm-detail__krow--tot b { font-size: 14px; }
.mm-mmwcalc { border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: 10px; padding: 9px 12px; background: var(--brand-soft); }
.mm-mmwcalc__h { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); margin-bottom: 6px; }
.mm-mmwcalc__h b { color: var(--text); }
.mm-mmwcalc__r { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 12px; color: var(--text-2); }
.mm-mmwcalc__r b { color: var(--text); font-variant-numeric: tabular-nums; }
.mm-mmwcalc__r--tot { border-top: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line)); margin-top: 3px; padding-top: 7px; font-weight: 600; }
.mm-mmwcalc__r--tot span, .mm-mmwcalc__r--tot b { color: var(--text); }
.mm-mmwcalc__toggle { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; background: none; border: none; padding: 2px 0; cursor: pointer; color: var(--text-2); }
.mm-mmwcalc__lbl { font-size: 11.5px; }
.mm-mmwcalc__lbl b { color: var(--text); }
.mm-mmwcalc__sum { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.mm-calcfull { margin-top: 10px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface); }
.mm-calcfull__head { display: grid; grid-template-columns: 70px 1fr 86px 92px; gap: 8px; padding: 7px 12px; background: var(--bg-2); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.mm-calcfull__head .r { text-align: right; }
.mm-calcfull__chap { padding: 8px 12px 4px; font-size: 12px; font-weight: 700; color: var(--text); background: color-mix(in srgb, var(--brand) 5%, transparent); }
.mm-calcfull__chap.is-sub { font-weight: 600; color: var(--text-2); padding-left: 22px; }
.mm-calcfull__row { display: grid; grid-template-columns: 70px 1fr 86px 92px; gap: 8px; padding: 6px 12px; align-items: baseline; border-top: 1px solid var(--line); font-size: 12px; }
.mm-calcfull__code { color: var(--text-3); font-variant-numeric: tabular-nums; }
.mm-calcfull__oms { color: var(--text); }
.mm-calcfull__q { text-align: right; color: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.mm-calcfull__net { text-align: right; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.mm-calcfull__staart { border-top: 2px solid var(--line-strong); padding: 8px 12px; background: var(--bg-2); }
.mm-calcfull__staart > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 12px; color: var(--text-2); }
.mm-calcfull__staart > div b { color: var(--text); font-variant-numeric: tabular-nums; }
.mm-calcfull__tot { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 7px !important; font-weight: 700; }
.mm-calcfull__tot span, .mm-calcfull__tot b { color: var(--text) !important; font-size: 13px; }
.mm-calcfull__src { display: flex; gap: 6px; align-items: flex-start; font-size: 10.5px; color: var(--text-3); line-height: 1.5; padding: 9px 12px; margin: 0; border-top: 1px solid var(--line); }
.mm-review { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.mm-review__h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.mm-review__by { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--pos-tekst); font-weight: 600; }
.mm-review__thread { display: flex; flex-direction: column; gap: 6px; margin-bottom: 9px; }
.mm-qrow { display: flex; align-items: baseline; gap: 9px; padding: 7px 11px; border-radius: 9px; font-size: 12px; }
.mm-qrow--og { background: color-mix(in srgb, var(--amber) 11%, transparent); }
.mm-qrow--pl { background: var(--bg-2); }
.mm-qwho { flex: 0 0 88px; font-weight: 600; color: var(--text-2); }
.mm-qtxt { flex: 1; color: var(--text); }
.mm-qdt { color: var(--text-3); font-size: 10.5px; white-space: nowrap; }
.mm-review__act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mm-review__act input { flex: 1; min-width: 180px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font: inherit; font-size: 12px; color: var(--text); }
.mm-qbtn { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11.5px; font-weight: 600; padding: 7px 12px; border-radius: 8px; border: 1px solid transparent; background: var(--amber); color: #fff; cursor: pointer; }
.mm-qbtn--ghost { background: transparent; border-color: var(--line-strong); color: var(--text-2); }
.mm-qbtn--ok { background: var(--pos); }
.mm-qbtn:disabled { opacity: .5; cursor: default; }
.mm-calclist { max-height: 420px; overflow-y: auto; padding: 4px 0; }
.mm-calcrow { display: grid; grid-template-columns: 64px 1fr auto 18px; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 10px 18px; border-top: 1px solid var(--line); transition: background .12s; }
.mm-calcrow:hover { background: var(--bg-2); }
.mm-calcrow__code { font-family: 'Roboto Mono', monospace; font-size: 11px; color: var(--navy); font-weight: 600; }
.mm-calcrow__oms { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-calcrow__amt { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-2); }
/* modals */
.mm-typetoggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.mm-typetoggle button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px; border-radius: 11px; border: 1px solid var(--line-strong); font-size: 13px; font-weight: 600; color: var(--text-2); }
.mm-typetoggle button.is-meer { border-color: var(--pos); color: var(--pos-tekst); background: color-mix(in srgb, var(--pos) 10%, transparent); }
.mm-typetoggle button.is-minder { border-color: var(--neg); color: var(--neg); background: color-mix(in srgb, var(--neg) 10%, transparent); }
.mm-preview { font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.mm-stelrow { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 10px; background: var(--bg-2); margin-bottom: 14px; }
.mm-stelrow span { font-size: 12.5px; color: var(--text-2); }
.mm-stelrow b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mm-stelresult { display: flex; flex-direction: column; gap: 2px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; margin-top: 4px; }
.mm-stelresult span { font-size: 11.5px; color: var(--text-3); }
.mm-stelresult b { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mm-stelresult i { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.mm-mode { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.mm-mode button { text-align: left; padding: 12px 14px; border-radius: 11px; border: 1px solid var(--line-strong); }
.mm-mode button.is-on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 2px var(--brand-soft); }
.mm-mode b { display: block; font-size: 13px; font-weight: 600; }
.mm-mode span { font-size: 11.5px; color: var(--text-3); }
.mm-calcresult { display: flex; flex-direction: column; gap: 0; margin-top: 4px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mm-calcresult__r { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--line); }
.mm-calcresult__r:first-child { border-top: none; }
.mm-calcresult__r span { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.mm-calcresult__r b { font-weight: 700; font-variant-numeric: tabular-nums; }
.mm-calcresult__r--tot { background: var(--bg-2); border-top: 1.5px solid var(--line-strong); }
.mm-calcresult__r--tot span { font-weight: 700; color: var(--text); }
.mm-dot { width: 9px; height: 9px; border-radius: 50%; }
.mm-dot--meer { background: var(--pos); }
.mm-dot--minder { background: var(--neg); }

/* ============================================================
   NACALCULATIE
   ============================================================ */
.nc__head, .nc__row { display: grid; gap: 10px; align-items: center; }
.nc__head { padding: 11px 18px; border-bottom: 1px solid var(--line-strong); }
.nc__head span { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.nc__head .r, .nc__num { text-align: right; }
.nc__row { padding: 9px 18px; border-bottom: 1px solid var(--line); }
.nc__row:hover { background: var(--bg-2); }
.nc__code { font-family: 'Roboto Mono', monospace; font-size: 11px; color: var(--navy); font-weight: 600; }
.nc__nm { font-size: 12.5px; min-width: 0; }
.nc__track { display: block; position: relative; height: 8px; margin-top: 5px; border-radius: 5px; background: var(--track); overflow: hidden; box-shadow: inset 0 1px 2px rgba(12,48,55,.08); }
.nc__track i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 5px; }
.nc__b { background: color-mix(in srgb, var(--text-2) 26%, transparent); height: 100% !important; }
.nc__w { top: 0; }
.nc__num { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.nc__row--tot { background: var(--bg-2); border-top: 1.5px solid var(--line-strong); border-bottom: none; }
.nc__row--dz { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.nc__row--dz .nc__code { color: var(--brand); }
.nc-dz__row { display: grid; grid-template-columns: 1.6fr 1.2fr 70px 70px 90px 1fr; gap: 10px; align-items: center; padding: 9px 18px; border-bottom: 1px solid var(--line); }
.nc-dz__row--h { border-bottom: 1px solid var(--line-strong); }
.nc-dz__row--h span { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.nc-dz__row--h .r { text-align: right; }
.nc-dz__who { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; }
.nc-dz__cell { font-size: 12px; color: var(--text-2); }
.nc-dz__num { font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.nc-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 13px 18px; font-size: 11.5px; color: var(--text-2); }
.nc-legend span { display: inline-flex; align-items: center; gap: 7px; }
.nc-legend i { width: 11px; height: 9px; border-radius: 3px; }
.nc-leer { display: flex; flex-direction: column; gap: 4px; }
.nc-leer__row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.nc-leer__ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nc-leer__ic.is-over { background: var(--neg-soft); color: var(--neg); }
.nc-leer__ic.is-under { background: color-mix(in srgb, var(--pos) 13%, transparent); color: var(--pos); }
.nc-leer__main { flex: 1; min-width: 0; }
.nc-leer__main b { font-size: 13px; font-weight: 500; display: block; }
.nc-leer__main span { font-size: 11px; color: var(--text-3); }
.nc-leer__amt { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nc-feedback { display: flex; gap: 11px; margin-top: 14px; padding: 13px 15px; border-radius: 12px; background: var(--brand-soft); }
.nc-feedback__ic { width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nc-feedback b { font-size: 12.5px; font-weight: 600; display: block; }
.nc-feedback span { font-size: 11.5px; color: var(--text-2); line-height: 1.45; }

/* ============================================================
   BOUWPLAATS — tabbalk + sub-schermen
   ============================================================ */
.bpl-tabs { position: sticky; top: 0; z-index: 12; padding: 26px clamp(20px,3vw,40px) 6px; background: var(--bg); }
/* Pill-menu's: gelijke afstand boven (26px) én onder (6+6=12px = --gap) als de psub-menu's,
   zodat de balk niet verspringt bij het wisselen tussen fasen. */
.bpl-tabs + .screen { padding-top: 6px; }
/* Genest pilmenu (bv. BIM-explorer onder de CDE-tabbalk): zelfde afstand tot het
   pilmenu erboven als overal elders (6px onder + 6px boven = 12px = --gap), en
   stapelt bij scrollen netjes onder de balk erboven (top = 26+47+6 = 79px hoogte
   van die balk) i.p.v. erop te overlappen. Geldt overal waar twee pilmenu's stapelen. */
.bpl-tabs + .bpl-tabs { top: 79px; padding-top: 6px; }
.bpl-tabs__inner { max-width: 1720px; margin: 0 auto; width: fit-content; max-width: 100%; display: flex; gap: 4px; overflow-x: auto; background-color: var(--surface); border: 1px solid var(--line); border-radius: 15px; padding: 5px; box-shadow: inset 0 1px 0 var(--edge), var(--shadow); scrollbar-width: none; }
.bpl-tabs__inner::-webkit-scrollbar { display: none; }
.bpl-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 11px; font-size: 13px; font-weight: 500; color: var(--text-2); white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.bpl-tab svg { color: var(--text-3); transition: color .15s; }
.bpl-tab:hover { background: var(--bg-2); color: var(--text); }
.bpl-tab:hover svg { color: var(--text-2); }
.bpl-tab.is-on { background-image: linear-gradient(180deg, color-mix(in srgb,var(--brand) 100%, white 14%), var(--brand)); color: #fff; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 3px 10px var(--brand-soft); }
.bpl-tab.is-on svg { color: #fff; }

.bpl-vg-row { grid-template-columns: 2.4fr 1.1fr .8fr 1fr .9fr !important; }
.bpl-ernst { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.bpl-tb-row { grid-template-columns: 2.2fr .8fr .8fr .9fr !important; }
.bpl-kb-row { grid-template-columns: 1.8fr 1.1fr 1.1fr .8fr .9fr !important; }
.bpl-afw-row { grid-template-columns: 1fr auto !important; }
.bpl-docs { display: flex; flex-direction: column; gap: 4px; }
.bpl-doc { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.bpl-doc:last-child { border-bottom: none; }
.bpl-doc__ic { width: 30px; height: 30px; border-radius: 9px; background: var(--bg-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bpl-doc__main { flex: 1; min-width: 0; }
.bpl-doc__main b { font-size: 13px; font-weight: 500; display: block; }
.bpl-doc__main span { font-size: 11px; color: var(--text-3); }
.bpl-wkb { display: flex; flex-direction: column; gap: 13px; }
.bpl-wkb__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
.bpl-wkb__top span { font-size: 12.5px; color: var(--text-2); }
.bpl-wkb__top b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* dagrapporten */
.bpl-rap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.drl { padding: 4px 8px 8px; }
.drl-wk { margin-top: 16px; }
.drl-wk:first-child { margin-top: 4px; }
.drl-wk__h { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.drl-wk__h b { font-size: 13px; font-weight: 700; }
.drl-wk__meta { font-size: 11.5px; color: var(--text-3); }
.drl-wk__ok { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: var(--pos-tekst); background: color-mix(in srgb, var(--pos) 12%, transparent); padding: 3px 9px; border-radius: 999px; }
.drl-row { display: grid; grid-template-columns: 86px 150px 78px 1.6fr 1.2fr 92px; gap: 12px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); }
.drl-row--h { border-top: none; background: var(--bg-2); border-radius: 8px; }
.drl-row--h span { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.drl-row--h .r { text-align: right; } .drl-row--h .c { text-align: center; }
.drl-dag b { font-size: 12.5px; font-weight: 700; text-transform: capitalize; }
.drl-dag i { font-style: normal; font-size: 11px; color: var(--text-3); margin-left: 6px; }
.drl-weer { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.drl-weer > svg { color: var(--amber); flex-shrink: 0; }
.drl-man { font-size: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.drl-werk { font-size: 12px; color: var(--text-2); line-height: 1.45; }
.drl-bijztag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 10%, transparent); padding: 3px 8px; border-radius: 7px; }
.drl-none { color: var(--text-3); }
.drl-ok { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--pos-tekst); }
.drl .c { text-align: center; }
@media (max-width: 980px) { .drl-row { grid-template-columns: 72px 1fr 64px; } .drl-weer, .drl-bijz, .drl-row .c { display: none; } }
@media (max-width: 980px) { .bpl-rap { grid-template-columns: 1fr; } }
.bpl-rap__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bpl-rap__head b { font-size: 14.5px; font-weight: 600; }
.bpl-rap__weer, .bpl-rap__man { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-3); }
.bpl-rap__man { margin-left: auto; }
.bpl-rap__werk { font-size: 13px; color: var(--text-2); line-height: 1.55; margin: 0; }
.bpl-rap__bijz { display: flex; align-items: center; gap: 7px; margin-top: 11px; padding: 9px 12px; border-radius: 9px; background: color-mix(in srgb,var(--amber) 9%,transparent); font-size: 12px; color: var(--text-2); }
.bpl-rap__bijz svg { color: var(--amber); flex-shrink: 0; }

/* inrichting */
.bpl-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
@media (max-width: 720px) { .bpl-checks { grid-template-columns: 1fr; } }
.bpl-check { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); }
.bpl-check__ic { width: 20px; height: 20px; border-radius: 6px; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bpl-check b { flex: 1; font-size: 12.5px; font-weight: 500; }
.bpl-check__st { font-size: 10.5px; font-weight: 600; text-transform: capitalize; }
.bpl-log { display: flex; flex-direction: column; }
.bpl-log__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.bpl-log__row:last-child { border-bottom: none; }
.bpl-log__l { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.bpl-log__row b { font-size: 12.5px; font-weight: 600; text-align: right; }

/* projectcommunicatie */
.comm-ai-pill { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; letter-spacing: .03em; color: var(--brand); background: var(--brand-soft); padding: 1px 5px; border-radius: 4px; text-transform: none; }
.comm-row { grid-template-columns: 2.6fr 1fr .9fr .6fr .9fr .7fr !important; }
.comm-name { display: flex; align-items: center; gap: 11px; text-align: left; min-width: 0; cursor: pointer; }
.comm-name:hover .comm-name__txt b { color: var(--brand); }
.comm-ic { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.comm-name__txt { min-width: 0; }
.comm-name__txt b { font-size: 13px; font-weight: 500; display: block; }
.comm-name__txt i { font-style: normal; font-size: 11px; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; }
.comm-share-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--brand); border: 1px solid color-mix(in srgb,var(--brand) 30%,var(--line)); border-radius: 8px; padding: 5px 10px; }
.comm-share-btn:hover { background: var(--brand-soft); }
.comm-genning { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--brand); }
.comm-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--brand-soft); border-top-color: var(--brand); animation: commspin .7s linear infinite; }
@keyframes commspin { to { transform: rotate(360deg); } }
/* verslag-detail (standaard documentatie) */
.comm-doc__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; padding: 14px 16px; border-radius: 12px; background: var(--bg-2); margin-bottom: 16px; }
.comm-doc__meta > div { display: flex; flex-direction: column; gap: 2px; }
.comm-doc__meta span { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }
.comm-doc__meta b { font-size: 12.5px; font-weight: 600; }
.comm-doc__sec { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); margin: 16px 0 9px; }
.comm-doc__list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.comm-doc__list li { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.comm-acts { display: flex; flex-direction: column; gap: 7px; }
.comm-act { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); }
.comm-act__chk { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.comm-act__chk.is-done { background: var(--pos); border-color: var(--pos); }
.comm-act__main { flex: 1; min-width: 0; }
.comm-act__main b { font-size: 12.5px; font-weight: 500; display: block; }
.comm-act__main span { font-size: 11px; color: var(--text-3); }
/* share modal */
.comm-share { display: flex; flex-direction: column; gap: 7px; }
.comm-party { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line-strong); text-align: left; }
.comm-party.is-on { border-color: var(--brand); background: var(--brand-soft); }
.comm-party__dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.comm-party > div { flex: 1; min-width: 0; }
.comm-party b { font-size: 13px; font-weight: 500; display: block; }
.comm-party span { font-size: 11px; color: var(--text-3); }
.comm-party__chk { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.comm-party__chk.is-on { background: var(--brand); border-color: var(--brand); }

/* ============================================================
   OPDRACHTGEVER-PORTAAL (rich)
   ============================================================ */
.pog-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; padding: 24px 26px; border-radius: var(--radius); background: linear-gradient(180deg, var(--sheen), transparent 50%), var(--surface); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--edge), var(--shadow); }
.pog-hero__kick { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.pog-hero h1 { font-size: 30px; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; }
.pog-hero p { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin-top: 9px; max-width: 560px; }
.pog-hero__stat { flex-shrink: 0; }
.pog-prog { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pog-prog__fase { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--text-2); background: var(--brand-soft); border: 1px solid color-mix(in srgb,var(--brand) 22%,transparent); padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.pog-prog__fase i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }
.pog-tabs { display: flex; gap: 4px; margin-bottom: 22px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.pog-tab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--text-2); border-bottom: 2.5px solid transparent; white-space: nowrap; }
.pog-tab svg { color: var(--text-3); }
.pog-tab:hover { color: var(--text); }
.pog-tab.is-on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.pog-tab.is-on svg { color: var(--brand); }

.pog-steps { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0; }
.pog-step { flex: 1; min-width: 76px; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; }
.pog-step::before { content: ''; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.pog-step:first-child::before { display: none; }
.pog-step.is-done::before, .pog-step.is-active::before { background: var(--brand); }
.pog-step__dot { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--text-3); z-index: 1; }
.pog-step.is-done .pog-step__dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.pog-step.is-active .pog-step__dot { background: var(--surface); border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.pog-step__lbl { font-size: 10.5px; color: var(--text-2); text-align: center; line-height: 1.2; }
.pog-step.is-active .pog-step__lbl { color: var(--brand); font-weight: 600; }

.pog-feed { display: flex; flex-direction: column; }
.pog-feeditem { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line); }
.pog-feeditem:first-child { border-top: none; }
.pog-feed__ic { width: 32px; height: 32px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pog-feed__main { flex: 1; min-width: 0; }
.pog-feed__main b { font-size: 13px; font-weight: 500; display: block; }
.pog-feed__main span { font-size: 11.5px; color: var(--text-3); }
.pog-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pog-foto__img { aspect-ratio: 16/10; border-radius: 11px; display: flex; align-items: flex-end; padding: 9px; position: relative; overflow: hidden; }
.pog-foto__img span { font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,.35); padding: 2px 8px; border-radius: 6px; backdrop-filter: blur(2px); }
.pog-foto__c { display: block; font-size: 11px; color: var(--text-3); margin-top: 6px; }
.pog-next { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.pog-next__d { width: 52px; height: 52px; border-radius: 13px; background: var(--brand-soft); color: var(--brand); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.pog-next__d b { font-size: 20px; font-weight: 600; line-height: 1; }
.pog-next__d span { font-size: 10px; text-transform: uppercase; }
.pog-next > div b { font-size: 14px; font-weight: 600; display: block; }
.pog-next > div span { font-size: 12px; color: var(--text-3); }
.pog-team { display: flex; flex-direction: column; }
.pog-teamrow { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--line); }
.pog-teamrow:first-child { border-top: none; }
.pog-teamrow > div { flex: 1; }
.pog-teamrow b { font-size: 13px; font-weight: 500; display: block; }
.pog-teamrow span { font-size: 11.5px; color: var(--text-3); }
.pog-av { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pog-verslag { padding: 4px 20px 18px 63px; background: var(--bg-2); }
.pog-mmw { display: flex; flex-direction: column; gap: 9px; }
.pog-mmwrow { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; background: var(--bg-2); }
.pog-mmwrow__main { flex: 1; min-width: 0; }
.pog-mmwrow__main b { font-size: 12.5px; font-weight: 500; display: block; }
.pog-mmwrow__main span { font-size: 10.5px; color: var(--pos-tekst); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.pog-mmwrow__amt { font-size: 13.5px; font-weight: 700; color: var(--pos-tekst); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* portaal · meer-/minderwerk goedkeuring (OG) */
.pv-mwnotice { display: flex; align-items: center; gap: 13px; margin-bottom: var(--gap); padding: 13px 16px; border-radius: 13px; background: color-mix(in srgb, var(--amber) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--amber) 28%, transparent); }
.pv-mwnotice__ic { width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pv-mwnotice__main { flex: 1; min-width: 0; }
.pv-mwnotice__main b { font-size: 13.5px; display: block; }
.pv-mwnotice__main span { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.pv-mwnotice__main b:last-child, .pv-mwnotice__main span b { font-weight: 700; }
.pv-mwnotice__mail { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--text-3); white-space: nowrap; flex-shrink: 0; }
.pv-mwlist { display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 14px; }
.pv-mwitem { border: 1px solid var(--line); border-radius: 13px; padding: 13px 15px; background: var(--surface); }
.pv-mwitem__top { display: flex; align-items: flex-start; gap: 11px; }
.pv-mwitem__main { flex: 1; min-width: 0; }
.pv-mwitem__main b { font-size: 13px; font-weight: 500; display: block; line-height: 1.4; }
.pv-mwitem__main span { font-size: 11px; color: var(--text-3); }
.pv-mwitem__amt { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-mwitem__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.pv-mwdeadline { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); }
.pv-mwact { display: flex; align-items: center; gap: 8px; }
.pv-mwq { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 8px; }
.pv-mwq:hover { border-color: var(--brand); color: var(--brand); }
.pv-mwthread { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.pv-mwmsg { font-size: 12px; color: var(--text-2); line-height: 1.5; padding: 8px 11px; border-radius: 9px; background: var(--bg-2); }
.pv-mwmsg.is-me { background: var(--brand-soft); }
.pv-mwmsg__who { font-weight: 700; color: var(--text); margin-right: 7px; }
.pv-mwask { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.pv-mwask textarea { flex: 1; font: inherit; font-size: 12.5px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); resize: vertical; min-height: 44px; }
.pv-mwask textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.pv-mwfoot { display: flex; align-items: flex-start; gap: 7px; font-size: 11px; color: var(--text-3); line-height: 1.5; padding: 0 16px 16px; }

/* portaal · leveringen (leverancier) */
.pv-afroep { padding: 6px 16px 4px; display: flex; flex-direction: column; gap: 9px; }
.pv-afrow { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; flex-wrap: wrap; }
.pv-afwk { font-size: 11px; font-weight: 700; color: var(--steel); background: color-mix(in srgb, var(--steel) 11%, transparent); padding: 4px 9px; border-radius: 7px; white-space: nowrap; }
.pv-afmain { flex: 1; min-width: 0; }
.pv-afmain b { font-size: 13px; font-weight: 500; display: block; }
.pv-afmain span { font-size: 11px; color: var(--text-3); }
.pv-afbtn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 11.5px; font-weight: 600; color: #fff; background: var(--brand); padding: 7px 12px; border-radius: 8px; }
.pv-afbtn:hover { background: color-mix(in srgb, var(--brand) 88%, black); }
.pv-pakbon { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 18px; border: 1.5px dashed var(--line-strong); border-radius: 12px; }
.pv-pakbon p { font-size: 12px; color: var(--text-3); line-height: 1.5; margin: 0; max-width: 280px; }
.pv-mwhist { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.pv-mwhist:last-child { border-bottom: none; }
.pv-mwhist__main { flex: 1; min-width: 0; }
.pv-mwhist__main b { font-size: 12.5px; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-mwhist__main span { font-size: 10.5px; color: var(--text-3); }

/* ============================================================
   AI-AGENTS
   ============================================================ */
.aia-crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.aia-crumb__ic { width: 22px; height: 22px; border-radius: 7px; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.aia-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--gap); align-items: start; }
@media (max-width: 1180px) { .aia-layout { grid-template-columns: 1fr; } }
.aia-group { margin-bottom: 26px; }
.aia-grouphead { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); margin-bottom: 13px; }
.aia-grouphead__ic { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }
.aia-grouphead__n { font-size: 11px; color: var(--text-3); background: var(--bg-2); padding: 1px 8px; border-radius: 999px; }
.aia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.aia-card { background-image: linear-gradient(180deg, var(--sheen), transparent 42%); background-color: var(--surface); border: 1px solid var(--line); border-radius: 15px; padding: 16px; box-shadow: inset 0 1px 0 var(--edge), var(--shadow); display: flex; flex-direction: column; transition: transform .16s, box-shadow .16s; }
.aia-card:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--edge), var(--shadow-lg); }
.aia-card__head { display: flex; gap: 11px; margin-bottom: 12px; }
.aia-card__ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.aia-card__head b { font-size: 14px; font-weight: 600; display: block; letter-spacing: -.01em; }
.aia-card__head span:not(.aia-card__ic) { font-size: 12px; color: var(--text-2); line-height: 1.4; display: block; margin-top: 2px; }
.aia-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.aia-tool { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 500; color: var(--text-2); background: var(--bg-2); padding: 4px 8px; border-radius: 7px; }
.aia-tool svg { color: var(--text-3); }
.aia-prompts { margin-top: auto; padding-top: 4px; }
.aia-prompts__h { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); display: block; margin-bottom: 7px; }
.aia-prompt { display: flex; align-items: center; gap: 8px; justify-content: space-between; width: 100%; text-align: left; font-size: 12px; color: var(--text-2); line-height: 1.4; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; transition: all .13s; }
.aia-prompt svg { flex-shrink: 0; color: var(--text-3); opacity: 0; transition: opacity .13s; }
.aia-prompt:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--text); }
.aia-prompt:hover svg { opacity: 1; color: var(--brand); }
.aia-run { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; font-size: 12.5px; font-weight: 600; color: var(--brand); border: 1px solid color-mix(in srgb,var(--brand) 30%,var(--line)); border-radius: 9px; padding: 8px 12px; justify-content: center; }
.aia-run:hover { background: var(--brand-soft); }
.aia-hint { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-3); margin: 4px 0 0; }
.aia-hint svg { color: var(--brand); flex-shrink: 0; }

.aia-side { position: sticky; top: 0; background-image: linear-gradient(180deg, var(--sheen), transparent 30%); background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: inset 0 1px 0 var(--edge), var(--shadow); padding: 16px; }
.aia-side__head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.aia-runs { display: flex; flex-direction: column; gap: 11px; }
.aia-run-card { border: 1px solid var(--line); border-radius: 13px; padding: 13px; background: var(--bg-2); }
.aia-run-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.aia-run-card__top b { font-size: 13px; font-weight: 600; }
.aia-run-st { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; }
.aia-run-st--run { color: var(--brand); }
.aia-run-st--done { color: var(--pos-tekst); }
.aia-run-card__q { font-size: 12px; color: var(--text-2); line-height: 1.45; margin: 0 0 8px; padding-left: 9px; border-left: 2px solid var(--line-strong); }
.aia-run-card__a { font-size: 12px; color: var(--text); line-height: 1.5; margin: 0; }
.aia-caret { display: inline-block; width: 2px; height: 12px; background: var(--brand); margin-left: 2px; vertical-align: text-bottom; animation: commspin 1s steps(2) infinite; }
.aia-run-card__act { margin-top: 10px; }

/* ============================================================
   BIM-ANALYSE — landings, datatabel, 3D, PDF takeoff
   ============================================================ */
.bim-crumb { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); margin-bottom: 16px; }
.bim-crumb b { color: var(--text); font-weight: 600; }
.bim-crumb__link { display: inline-flex; align-items: center; gap: 7px; color: var(--text-3); }
.bim-crumb__link:hover { color: var(--brand); }
.bim-hero { display: grid; grid-template-columns: minmax(340px, 1fr) 1.05fr; gap: 44px; align-items: center; margin-bottom: 40px; padding: 8px clamp(8px, 2vw, 36px); background-image: linear-gradient(180deg, var(--sheen), transparent 60%); background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: inset 0 1px 0 var(--edge), var(--shadow); }
@media (max-width: 980px) { .bim-hero { grid-template-columns: 1fr; gap: 24px; text-align: center; padding: 24px; } .bim-hero .bim-info { display: flex; flex-direction: column; align-items: center; } .bim-support, .bim-caps { justify-content: center; } }
.bim-drop { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; margin: 22px 0; padding: 34px 28px; min-height: 270px; justify-content: center; max-width: 540px; width: 100%; border: 2px dashed var(--line-strong); border-radius: 18px; background: radial-gradient(120% 90% at 50% 0%, var(--brand-soft), transparent 60%), var(--bg-2); cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.bim-drop:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 12px 30px var(--brand-soft); }
.bim-drop__ic { width: 60px; height: 60px; border-radius: 16px; background: var(--surface); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; box-shadow: 0 6px 16px var(--brand-soft), inset 0 1px 0 var(--edge); }
.bim-drop b { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }
.bim-drop__sub { font-size: 12.5px; color: var(--text-3); }
.bim-formats { display: flex; flex-wrap: wrap; gap: 6px; }
.bim-formats em { font-style: normal; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.bim-drop__note { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.bim-info h1 { letter-spacing: -.02em; }
.bim-support { display: flex; align-items: center; gap: 11px; margin-top: 16px; }
.bim-support__l { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.bim-formats-txt { font-size: 11.5px; color: var(--text-3); margin-top: 12px; }
.bim-caps { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.bim-cap { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); padding: 6px 11px; border-radius: 9px; }
.bim-cap svg { color: var(--brand); }
.bim-badge { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding: 8px 13px; border-radius: 10px; background: color-mix(in srgb,var(--pos) 9%,transparent); border: 1px solid color-mix(in srgb,var(--pos) 24%,var(--line)); font-size: 12px; font-weight: 600; color: var(--pos-tekst); }
.bim-badge svg { flex-shrink: 0; }
.bim-badge__pow { color: var(--text-3); font-weight: 500; border-left: 1px solid var(--line-strong); padding-left: 8px; }
.bim-what { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.bim-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bim-features--6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1180px) { .bim-features, .bim-features--6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .bim-features, .bim-features--6 { grid-template-columns: 1fr; } }
.bim-feat { display: flex; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background-image: linear-gradient(180deg, var(--sheen), transparent 50%); background-color: var(--surface); box-shadow: inset 0 1px 0 var(--edge), var(--shadow); }
.bim-feat__ic { width: 34px; height: 34px; border-radius: 10px; background: var(--bg-2); color: var(--text-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bim-feat b { font-size: 13px; font-weight: 600; display: block; margin-bottom: 3px; }
.bim-feat span { font-size: 11.5px; color: var(--text-2); line-height: 1.45; }
.bim-feat--btn { cursor: pointer; font: inherit; text-align: left; width: 100%; align-items: flex-start; transition: border-color .12s, box-shadow .12s, transform .06s; }
.bim-feat--btn:hover { border-color: var(--brand); box-shadow: inset 0 1px 0 var(--edge), 0 4px 14px rgba(0,0,0,.10); }
.bim-feat--btn:active { transform: translateY(1px); }

.bim-livedot { width: 8px; height: 8px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 0 3px color-mix(in srgb,var(--pos) 20%,transparent); display: inline-block; }
.bim-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.bim-filters { display: flex; gap: 8px; }
.bim-filters select { font-size: 12px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text); }
.bim-tbl { width: 100%; }
.bim-thead { display: grid; grid-template-columns: 2fr .9fr 1.1fr 1.1fr 1fr .7fr .8fr .8fr; gap: 10px; padding: 11px 18px; border-bottom: 1px solid var(--line-strong); }
.bim-stathead { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1fr; }
.bim-th { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); text-align: left; }
.bim-th.r { justify-content: flex-end; text-align: right; }
.bim-th.is-sort { color: var(--brand); }
.bim-trow { display: grid; grid-template-columns: 2fr .9fr 1.1fr 1.1fr 1fr .7fr .8fr .8fr; gap: 10px; padding: 9px 18px; border-bottom: 1px solid var(--line); align-items: center; }
.bim-statrow { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1fr; }
.bim-trow:hover { background: var(--bg-2); }
.bim-td { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.bim-td.r { text-align: right; }
.bim-td.b { font-weight: 600; color: var(--text); }
.bim-td--nm { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--text); }
.bim-td--nm i { font-style: normal; font-family: 'Roboto Mono', monospace; font-size: 10px; color: var(--text-3); }
.bim-chip { font-size: 10.5px; font-weight: 600; color: var(--text-2); background: var(--bg-2); padding: 2px 8px; border-radius: 6px; }
.bim-pivctl { display: flex; gap: 18px; margin-bottom: 16px; flex-wrap: wrap; }
.bim-pivctl label { font-size: 12px; color: var(--text-2); display: inline-flex; align-items: center; gap: 8px; }
.bim-pivctl select { font-size: 12.5px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text); }
.bim-piv { display: flex; flex-direction: column; }
.bim-pivrow { display: grid; grid-template-columns: 1.4fr 2fr auto; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.bim-pivrow__l { font-size: 13px; font-weight: 500; }
.bim-pivrow__l i { font-style: normal; font-size: 11px; color: var(--text-3); margin-left: 8px; }
.bim-pivrow__bar { height: 9px; background: var(--track); border-radius: 5px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(12,48,55,.08); }
.bim-pivrow__bar i { display: block; height: 100%; background: var(--brand); border-radius: 5px; }
.bim-pivrow__v { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bim-pivrow--tot { border-top: 1.5px solid var(--line-strong); border-bottom: none; font-weight: 700; }
.bim-charts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; padding: 18px; }
@media (max-width: 900px) { .bim-charts { grid-template-columns: 1fr; } }
.bim-chartttl { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 14px; }
.bim-bars { display: flex; flex-direction: column; gap: 9px; }
.bim-barrow { display: grid; grid-template-columns: 1.2fr 2fr auto; gap: 12px; align-items: center; }
.bim-barrow__l { font-size: 12px; color: var(--text-2); }
.bim-barrow__track { height: 12px; background: var(--track); border-radius: 6px; overflow: hidden; }
.bim-barrow__track i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), color-mix(in srgb,var(--brand) 60%, var(--steel))); border-radius: 6px; }
.bim-barrow b { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bim-donutwrap { display: flex; align-items: center; gap: 22px; }
.bim-legend { display: flex; flex-direction: column; gap: 8px; }
.bim-legend span { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.bim-legend i { width: 10px; height: 10px; border-radius: 3px; }
.bim-legend b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Echte 3D-IFC-viewport (three.js + web-ifc, fase 2) */
.ifc3d { display: grid; grid-template-columns: 1fr 300px; gap: var(--gap); align-items: stretch; }
@media (max-width: 1080px) { .ifc3d { grid-template-columns: 1fr; } }
.ifc3d__viewport { position: relative; min-height: 460px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--edge), var(--shadow); background: #f4f6f8; }
.ifc3d__viewport canvas { display: block; width: 100%; height: 100%; }
.ifc3d__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 13px; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.ifc3d__overlay--err { color: var(--neg); }
.ifc3d__side { display: flex; flex-direction: column; gap: 10px; }
.ifc3d__stat { padding: 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.ifc3d__stat b { display: block; font-size: 14px; margin: 4px 0 2px; word-break: break-word; }
.ifc3d__stat span { color: var(--muted); font-size: 12px; }
.ifc3d__sel { padding: 10px 12px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line)); background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.ifc3d__sel span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ifc3d__sel b { font-size: 14px; } .ifc3d__sel i { margin-left: 6px; color: var(--muted); font-style: normal; font-size: 12px; }
.ifc3d__soorten { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.ifc3d__soort { display: flex; justify-content: space-between; padding: 6px 12px; font-size: 12px; border-bottom: 1px solid var(--edge); }
.ifc3d__soort:last-child { border-bottom: 0; } .ifc3d__soort b { color: var(--brand); }
.ifc3d__hint { color: var(--muted); font-size: 11px; margin: 2px 0 0; line-height: 1.5; }
/* Compact (meten: lijst en 3D naast elkaar): vult de ouder, geen zijpaneel */
.ifc3d--compact { display: block; height: 100%; }
.ifc3d--compact .ifc3d__viewport { height: 100%; min-height: 320px; }
.ifc3d__chip { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 8px; font-size: 11.5px; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--text-2); border: 1px solid var(--line); max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bim-3dwrap, .bim-pdfwrap { display: grid; grid-template-columns: 1fr 320px; gap: var(--gap); align-items: start; }
.bim-pdfwrap { grid-template-columns: 60px 1fr 320px; }
@media (max-width: 1080px) { .bim-3dwrap { grid-template-columns: 1fr; } .bim-pdfwrap { grid-template-columns: 48px 1fr; } }
.bim-3dcanvas { position: relative; aspect-ratio: 4/3; border-radius: var(--radius); background: radial-gradient(circle at 50% 30%, color-mix(in srgb,var(--brand) 8%,var(--surface)), var(--bg-2)); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--edge), var(--shadow); overflow: hidden; }
.bim-iso { width: 100%; height: 100%; }
.bim-3dverd { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 5px; z-index: 2; }
.bim-3dchip { font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--text-2); box-shadow: var(--shadow); }
.bim-3dchip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.bim-3dfs { position: absolute; top: 12px; right: 12px; z-index: 3; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line-strong); color: var(--text-2); box-shadow: var(--shadow); }
.bim-3dfs:hover { border-color: var(--brand); color: var(--brand); }

/* fullscreen document/model viewer */
.fsv__btn { width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); flex-shrink: 0; }
.fsv__btn:hover { background: var(--bg-2); color: var(--brand); }
.fsv__overlay { position: fixed; inset: 0; z-index: 220; background: rgba(8,18,22,.74); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 30px; animation: fade .15s ease; }
.fsv { width: min(1440px, 96vw); height: min(920px, 92vh); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.fsv__bar { display: flex; align-items: center; gap: 13px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.fsv__tabs { display: flex; gap: 4px; }
.fsv__tab { font-size: 11px; font-weight: 600; color: var(--text-3); padding: 5px 11px; border-radius: 7px; background: var(--bg-2); }
.fsv__tab.is-on { color: #fff; background: var(--brand); }
.fsv__title { font-size: 13px; font-weight: 600; color: var(--text-2); }
.fsv__sp { flex: 1; }
.fsv__x { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-3); }
.fsv__x:hover { background: var(--bg-2); color: var(--text); }
.fsv__canvas { flex: 1; position: relative; background: var(--bg-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden; }
.fsv__frame { width: 100%; height: 100%; border: 0; background: #fff; }
.fsv__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fsv__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 44px 44px; opacity: .5; }
.fsv__label { position: relative; font-family: 'Roboto Mono', monospace; font-size: 15px; font-weight: 600; color: var(--text-2); letter-spacing: .03em; text-align: center; padding: 0 20px; }
.fsv__sub { position: relative; font-size: 12.5px; color: var(--text-3); }
.bim-3dlegend { position: absolute; bottom: 12px; left: 12px; display: flex; gap: 14px; }
.bim-3dlegend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); }
.bim-3dlegend i { width: 9px; height: 9px; border-radius: 3px; }
.bim-3dpanel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 1px 0 var(--edge), var(--shadow); overflow: hidden; }
.bim-3dpanel__h { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.bim-3dpanel__h span { font-size: 11px; color: var(--text-3); background: var(--bg-2); padding: 1px 8px; border-radius: 999px; }
.bim-3dlist { max-height: 440px; overflow-y: auto; padding: 6px; }
.bim-3drow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 9px; }
.bim-3drow:hover { background: var(--bg-2); }
.bim-3drow.is-on { background: var(--brand-soft); }
.bim-3drow__dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.bim-3drow__nm { min-width: 0; flex: 1; }
.bim-3drow__nm b { font-size: 12.5px; font-weight: 500; display: block; }
.bim-3drow__nm i { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.bim-meet__v { font-size: 12.5px; font-weight: 700; color: var(--brand); white-space: nowrap; }
.bim-pdftools { display: flex; flex-direction: column; gap: 6px; }
.bim-pdftool { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text-3); }
.bim-pdftool span { font-size: 8.5px; font-weight: 600; }
.bim-pdftool.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.bim-pdfcanvas { position: relative; aspect-ratio: 16/11; border-radius: var(--radius); background: #f7f6f3; border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--edge), var(--shadow); overflow: hidden; }
[data-theme="dark"] .bim-pdfcanvas { background: #0f1a20; }
.bim-pdfgrid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 28px 28px; opacity: .6; }
.bim-pdfplan { position: absolute; inset: 14% 18%; border: 2px solid color-mix(in srgb,var(--navy) 40%,transparent); border-radius: 4px; background: color-mix(in srgb,var(--navy) 5%,transparent); display: flex; align-items: flex-end; padding: 8px; }
.bim-pdfplan span { font-size: 11px; color: var(--text-3); font-family: 'Roboto Mono', monospace; }
.bim-pdfhint { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-2); background: var(--surface); padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.bim-pdfhint svg { color: var(--brand); }

/* ---- Instellingen · bedrijfsprofiel & koppelingen ---- */
.pk-rankline { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); margin: 2px 0 12px; }
.pk-rankline b { color: var(--text); }
.pk-rankline .pk-trend { margin-left: auto; font-weight: 700; font-size: 12px; }
.pk-rankline .pk-trend i { font-style: normal; font-weight: 400; color: var(--text-3); }
.pk-bar__w { font-style: normal; font-size: 10px; color: var(--text-3); margin-left: 5px; }
.relrow__score { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 2px 8px; vertical-align: middle; }

/* ---- Uren · omschrijving per dag-cel ---- */
.uren__hint { display: flex; align-items: flex-start; gap: 8px; padding: 10px 18px; font-size: 12px; color: var(--text-2); border-bottom: 1px solid var(--line); line-height: 1.5; }
.uren__hint svg { color: var(--brand); flex-shrink: 0; margin-top: 2px; }
.uren__hint b { font-weight: 600; color: var(--text); }
/* week-voortgang + boekingenlijst (vernieuwde urenstaat) */
.uweek { display: grid; grid-template-columns: 1.1fr 1.6fr; gap: 24px; padding: 18px; border-bottom: 1px solid var(--line); align-items: center; }
@media (max-width: 860px) { .uweek { grid-template-columns: 1fr; gap: 16px; } }
.uweek__prog { display: flex; flex-direction: column; gap: 8px; }
.uweek__big { display: flex; align-items: baseline; gap: 7px; }
.uweek__big b { font-size: 38px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.uweek__big span { font-size: 13px; color: var(--text-3); }
.uweek__track { position: relative; height: 10px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.uweek__track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width .3s; }
.uweek__rest { font-size: 12px; color: var(--text-3); }
.uweek__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.uweek__day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.uweek__daybar { width: 100%; height: 48px; display: flex; align-items: flex-end; border-radius: 6px; background: var(--bg-2); overflow: hidden; }
.uweek__daybar i { width: 100%; border-radius: 6px 6px 0 0; transition: height .3s; min-height: 0; }
.uweek__dayn { font-size: 10.5px; font-weight: 600; color: var(--text-3); }
.uweek__day--we .uweek__dayn { color: var(--steel); }
.uweek__dayv { font-size: 11px; font-variant-numeric: tabular-nums; }
.ulist { padding: 6px 18px 4px; }
.ulist__day { margin-bottom: 12px; }
.ulist__dayh { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.ulist__daychip { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); padding: 3px 10px; border-radius: 7px; }
.ulist__daychip.is-we { color: var(--steel); background: color-mix(in srgb, var(--steel) 12%, transparent); }
.ulist__dayh b { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text-2); }
.ulist__row { display: grid; grid-template-columns: minmax(150px, 1fr) 2fr 78px 28px; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.ulist__row.is-bad .ulist__oms { border-color: var(--amber); }
.ulist__proj b { font-size: 12.5px; font-weight: 600; display: block; }
.ulist__proj i { font-style: normal; font-size: 11px; color: var(--text-3); }
.ulist__oms { font: inherit; font-size: 12.5px; padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-2); color: var(--text); width: 100%; box-sizing: border-box; }
.ulist__oms:focus { border-color: var(--brand); outline: none; background: var(--surface); }
.ulist__u { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.ulist__u input { width: 48px; font: inherit; font-size: 13px; font-weight: 600; text-align: right; padding: 6px 7px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-2); color: var(--text); }
.ulist__u i { font-style: normal; font-size: 11px; color: var(--text-3); }
.ulist__del { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--text-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ulist__del:hover { border-color: var(--signal); color: var(--signal); }
@media (max-width: 720px) { .ulist__row { grid-template-columns: 1fr 64px 24px; } .ulist__oms { grid-column: 1 / -1; order: 3; } }
.uren__celwrap { position: relative; display: block; }
.uren__celwrap .uren__cell { width: 100%; }
.uren__celdot { position: absolute; left: 50%; transform: translateX(-50%); bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--pos); pointer-events: none; }
.uren__celdot.is-miss { background: var(--amber); }
.uren__cell.is-miss { border-color: color-mix(in srgb, var(--amber) 55%, transparent); }
.uren__cell.is-sel { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.uren__dayedit { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; padding: 9px 11px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line-strong); }
.uren__dayedit-day { display: flex; flex-direction: column; line-height: 1.25; min-width: 150px; flex-shrink: 0; }
.uren__dayedit-day b { font-size: 12.5px; font-weight: 700; }
.uren__dayedit-day i { font-style: normal; font-size: 11px; color: var(--text-3); }
.uren__dayedit .uren__desc { background: var(--surface); }
.uren__rowwarn { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--amber-tekst); margin: 4px 0 2px; }

/* ---- Activiteitenlog ---- */
.ulog-bar { display: flex; align-items: center; gap: 12px; margin-bottom: var(--gap); flex-wrap: wrap; }
.ulog-mij { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); padding: 6px 13px 6px 7px; border-radius: 999px; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line)); }
.ulog-mij em { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand); }
.ulog-pers { display: flex; gap: 6px; flex-wrap: wrap; }
.ulog-persbtn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 500; }
.ulog-persbtn:hover { border-color: var(--brand); color: var(--text); }
.ulog-persbtn.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--text); font-weight: 600; }
.ulog-persbtn em { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand); }
.ulog-search { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-3); }
.ulog-search input { flex: 1; border: none; background: transparent; color: var(--text); font-size: 13px; outline: none; }
.ulog-search input::placeholder { color: var(--text-3); }
.ulog-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: var(--gap); }
.ulog-thead { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line-strong); }
.ulog-tic { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ulog-tmain { display: flex; flex-direction: column; gap: 1px; min-width: 220px; }
.ulog-tmain b { font-size: 13.5px; font-weight: 600; }
.ulog-tmain span { font-size: 11.5px; color: var(--text-3); }
.ulog-tshare { flex: 1; height: 7px; border-radius: 999px; background: var(--track); overflow: hidden; }
.ulog-tshare i { display: block; height: 100%; border-radius: 999px; }
.ulog-tu { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }
.ulog-list { display: flex; flex-direction: column; }
.ulog-row { display: grid; grid-template-columns: 110px 200px 1fr 60px; gap: 12px; align-items: center; padding: 9px 18px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.ulog-row:last-child { border-bottom: none; }
.ulog-row:hover { background: var(--bg-2); }
.ulog-when { display: flex; flex-direction: column; line-height: 1.25; }
.ulog-when b { font-weight: 600; font-size: 12px; }
.ulog-when i { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.ulog-proj { color: var(--text-2); display: flex; align-items: center; gap: 6px; min-width: 0; }
.ulog-proj em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--text-3); font-family: 'Roboto Mono', monospace; }
.ulog-oms { color: var(--text); min-width: 0; line-height: 1.4; }
.ulog-miss { font-style: normal; color: var(--amber-tekst); }
.ulog-u { text-align: right; font-variant-numeric: tabular-nums; }
.ulog-more { display: flex; align-items: center; gap: 6px; width: 100%; padding: 9px 18px; font-size: 12px; font-weight: 600; color: var(--brand); border-top: 1px solid var(--line); }
.ulog-more:hover { background: var(--bg-2); }

/* ============================================================
   Gantt-werkbank — interactief bewerken
   ============================================================ */
.gantt2__canvas.is-dragging { user-select: none; cursor: grabbing; }
.gantt2__trow.is-sel { background: var(--brand-soft); }
.gbar2.is-editable { cursor: grab; }
.gbar2.is-drag { cursor: grabbing; box-shadow: 0 5px 16px rgba(0, 0, 0, .4); z-index: 7; }
.gbar2.is-sel { outline: 2px solid var(--brand); outline-offset: 1px; }
.gbar2.is-chain { outline: 2px dashed color-mix(in srgb, var(--brand) 70%, transparent); outline-offset: 1px; filter: brightness(1.18); z-index: 6; }
.gbar2.is-target { outline: 2.5px solid var(--pos); outline-offset: 1px; }
.gbar2.is-untarget { outline: 2.5px solid var(--amber); outline-offset: 1px; }
.gbar2.is-badtarget { outline: 2.5px solid var(--neg); outline-offset: 1px; }
.gbar2__h { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; opacity: 0; z-index: 5; }
.gbar2__h--l { left: 0; border-radius: 7px 0 0 7px; }
.gbar2__h--r { right: 0; border-radius: 0 7px 7px 0; }
.gbar2:hover .gbar2__h, .gbar2.is-sel .gbar2__h { opacity: 1; background: rgba(255, 255, 255, .28); }
.gbar2__dot { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--brand); border: 2.5px solid #fff; transform: translateY(-50%); cursor: crosshair; opacity: .92; z-index: 9; transition: transform .1s, opacity .12s, box-shadow .12s; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.gbar2__dot::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; }
.gbar2__dot--l { left: -18px; }
.gbar2__dot--r { right: -18px; }
.gbar2:hover .gbar2__dot, .gbar2.is-sel .gbar2__dot { opacity: 1; }
.gbar2__dot:hover { transform: translateY(-50%) scale(1.45); box-shadow: 0 0 0 5px var(--brand-soft), 0 1px 4px rgba(0,0,0,.4); }
.gantt2__canvas.is-dragging .gbar2__dot { opacity: 1; }
.gbar2__slack { position: absolute; height: 9px; border-radius: 0 5px 5px 0; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--steel) 38%, transparent) 0 4px, transparent 4px 8px); border-right: 1.5px solid color-mix(in srgb, var(--steel) 55%, transparent); }
.gantt2__ms.is-drag { transform: scale(1.2); }
.gantt2__tip { position: absolute; z-index: 30; padding: 4px 9px; border-radius: 7px; background: var(--text); color: var(--paper, var(--surface)); font-size: 11px; font-weight: 600; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
[data-theme="dark"] .gantt2__tip { background: #fff; color: #16242c; }
.gantt2__levpin { position: absolute; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 5px; background: var(--surface); border: 1px solid; white-space: nowrap; z-index: 7; cursor: default; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.gantt2__levpin svg { flex-shrink: 0; }
.exp-lev__item { display: flex; align-items: center; gap: 6px; }
.exp-lev__ic { display: inline-flex; color: var(--navy); flex-shrink: 0; }
.exp-ms--lev .exp-ms__item b { color: var(--text); }
/* A16 — actuele leverstatus in de weekuitdraai */
.exp-lev__st { font-style: normal; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; flex-shrink: 0; }
.exp-lev__item i { margin-top: 0; color: #5a6b7b; font-weight: 400; }
.exp-lev__item.is-laat { border-left-color: var(--neg) !important; background: #fdecec; }
.gantt2__hov { position: absolute; z-index: 33; min-width: 210px; max-width: 300px; padding: 11px 13px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg, 0 12px 36px rgba(0,0,0,.28)); pointer-events: none; }
.gantt2__hov-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.gantt2__hov-h b { font-size: 12.5px; font-weight: 600; }
.gantt2__hov-wbs { font-family: 'Roboto Mono', monospace; font-size: 9.5px; color: var(--text-3); }
.gantt2__hov-tag { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; background: var(--bg-2); color: var(--text-3); }
.gantt2__hov-tag--kp { background: color-mix(in srgb, var(--signal) 15%, transparent); color: var(--signal); }
.gantt2__hov-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-2); margin-bottom: 8px; }
.gantt2__hov-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gantt2__hov-sep { color: var(--text-3); }
.gantt2__hov-row { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; color: var(--text-2); line-height: 1.45; padding: 2px 0; }
.gantt2__hov-row svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.gantt2__hov-row b { color: var(--text); font-weight: 600; }
.gantt2__hov-row--mut { color: var(--text-3); }
.gantt2__hov-arr { font-weight: 700; color: var(--brand); width: 12px; text-align: center; flex-shrink: 0; }
.gantt2__deppop { position: absolute; z-index: 32; min-width: 240px; max-width: 320px; padding: 11px 13px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 10px 28px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 5px; transform: translate(-50%, 8px); }
.gantt2__deppop b { font-size: 12.5px; line-height: 1.35; }
.gantt2__deppop > span { font-size: 11.5px; color: var(--text-3); }
.gantt2__deppop-act { display: flex; gap: 8px; justify-content: flex-end; margin-top: 5px; }
/* B10 — afhankelijkheidstype FS/SS/FF in de koppel-popover */
.gantt2__deptype { display: flex; gap: 4px; margin-top: 2px; }
.gantt2__deptype-btn { flex: 1; padding: 4px 0; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--text-3); background: color-mix(in srgb, var(--text-3) 8%, transparent); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.gantt2__deptype-btn:hover { color: var(--text); }
.gantt2__deptype-btn.is-on { color: #fff; background: var(--brand); border-color: var(--brand); }
/* h74: wachttijd in werkdagen bij een koppeling */
.gantt2__deplag { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11.5px; color: var(--text-3); }
.gantt2__deplag > span { flex: 1; }
.gantt2__deplag .gantt2__deptype-btn { flex: 0 0 26px; padding: 3px 0; font-size: 13px; }
.gantt2__deplag b { min-width: 86px; text-align: center; font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }
/* B11 — feestdagen / niet-werkbare dagen */
.gantt2__vrij { position: absolute; top: 0; z-index: 0; pointer-events: none; background: color-mix(in srgb, var(--amber) 8%, transparent); border-left: 1px dashed color-mix(in srgb, var(--amber) 36%, transparent); border-right: 1px dashed color-mix(in srgb, var(--amber) 36%, transparent); }
.gantt2__vrij--bv { background: color-mix(in srgb, var(--amber) 14%, transparent); }
.gantt2__vrij--proj { background: color-mix(in srgb, var(--steel) 12%, transparent); border-left: 1px dashed color-mix(in srgb, var(--steel) 46%, transparent); border-right: 1px dashed color-mix(in srgb, var(--steel) 46%, transparent); }

/* Werkkalender — Instellingen (feestdagen, bouwvak, weekend) */
.wk-layout { display: flex; flex-direction: column; gap: var(--gap); }
.wk-policy { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.wk-policy__block { display: flex; flex-direction: column; gap: 9px; }
.wk-policy__lbl { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.wk-weekend { display: flex; gap: 9px; flex-wrap: wrap; }
.wk-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 12.5px; font-weight: 500; color: var(--text-2); cursor: pointer; transition: background .12s, border-color .12s; }
.wk-chip:hover { background: var(--bg-2); }
.wk-chip.is-on { border-color: var(--brand); color: var(--text); background: var(--brand-soft); }
.wk-chip__box { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.wk-chip__box.is-on { background: var(--brand); border-color: var(--brand); }
.wk-seg { max-width: 360px; }
.wk-daghead, .wk-drow { display: grid; grid-template-columns: minmax(150px, 1.6fr) 1.05fr 128px 128px .8fr 1.1fr 30px; gap: 10px; align-items: center; }
.wk-daghead { padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.wk-daglist { display: flex; flex-direction: column; }
.wk-drow { padding: 8px 18px; border-top: 1px solid var(--line); position: relative; }
.wk-drow:first-child { border-top: none; }
.wk-drow input, .wk-drow select { width: 100%; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font: inherit; font-size: 12.5px; color: var(--text); }
.wk-drow input:focus, .wk-drow select:focus { outline: none; border-color: var(--brand); }
.wk-drow.is-inactief { opacity: .55; }
.wk-drow__off { position: absolute; right: 46px; top: -8px; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.wk-addbar { display: flex; gap: 10px; flex-wrap: wrap; padding: 12px 18px 16px; border-top: 1px solid var(--line); }
@media (max-width: 1080px) { .wk-policy { grid-template-columns: 1fr; } .wk-daghead { display: none; } .wk-drow { grid-template-columns: 1fr 1fr; } }
/* h77 (vraag 228): werkkalender op de server; bouwvak per jaar en regio, berekende feestdagen, extra vrije dagen. */
.wk-jaren { display: flex; gap: 6px; flex-wrap: wrap; }
.wk-jaar { padding: 5px 11px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.wk-jaar.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--text); }
.wk-bvhead, .wk-bvrow { display: grid; grid-template-columns: minmax(120px, 1fr) 150px 150px 120px minmax(150px, auto); gap: 10px; align-items: center; }
.wk-bvhead { padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.wk-bvrow { padding: 9px 18px; border-top: 1px solid var(--line); font-size: 12.5px; }
.wk-bvrow:first-child { border-top: none; }
.wk-bvrow.is-andere { color: var(--text-2); }
.wk-bvrow__std { margin-left: 8px; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); }
.wk-bvrow__knop { display: flex; justify-content: flex-end; }
.wk-bvrow__knop .btn { padding: 6px 11px; font-size: 12px; }
.wk-feest { padding: 12px 18px 16px; border-top: 1px solid var(--line); }
.wk-feest ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 18px; }
.wk-feest li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.wk-feest li span { color: var(--text-2); }
.wk-daghead--org, .wk-drow--org { grid-template-columns: minmax(150px, 1.6fr) 1.05fr 128px 128px 1.1fr 30px; }
@media (max-width: 1080px) {
  .wk-bvhead { display: none; }
  .wk-bvrow { grid-template-columns: 1fr 1fr; }
  .wk-bvrow > b { grid-column: 1 / -1; }
  .wk-bvrow__knop { grid-column: 1 / -1; justify-content: flex-start; }
  .wk-daghead--org { display: none; }
  .wk-drow--org { grid-template-columns: 1fr 1fr; }
}

/* Datumkiezer — kalender-popover (vervangt native type=date) */
.wkdp { position: relative; width: 100%; }
.wkdp__field { display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer; text-align: left; transition: border-color .14s, box-shadow .14s; }
.wkdp__field:hover { border-color: var(--brand); }
.wkdp__field.is-open { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.wkdp__field > svg:first-child { color: var(--text-3); flex-shrink: 0; transition: color .14s; }
.wkdp__field:hover > svg:first-child, .wkdp__field.is-open > svg:first-child { color: var(--brand); }
.wkdp__val { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.wkdp__field.is-empty .wkdp__val { color: var(--text-3); }

.wkdp__pop { position: fixed; z-index: 4000; width: 260px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 10px; animation: wkdpIn .12s ease; }
@keyframes wkdpIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.wkdp__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 8px; }
.wkdp__bar b { font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.wkdp__nav { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text-2); cursor: pointer; transition: all .14s; }
.wkdp__nav:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.wkdp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.wkdp__dow { text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding: 2px 0 6px; }
.wkdp__day { display: flex; align-items: center; justify-content: center; height: 30px; border: none; border-radius: 8px; background: none; font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; transition: background .12s, color .12s; }
.wkdp__day:hover { background: var(--bg-2); }
.wkdp__day.is-out { color: var(--text-3); opacity: .5; }
.wkdp__day.is-today { color: var(--brand); font-weight: 700; box-shadow: inset 0 0 0 1px var(--brand); }
.wkdp__day.is-sel { background: var(--brand); color: #fff; font-weight: 600; box-shadow: none; }
.wkdp__day.is-sel:hover { background: var(--brand); }
.wkdp__foot { display: flex; gap: 8px; padding: 9px 2px 2px; margin-top: 6px; border-top: 1px solid var(--line); }
.wkdp__quick { flex: 1; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all .14s; }
.wkdp__quick:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.wkdp__quick--clear:hover { border-color: var(--signal); color: var(--signal); background: color-mix(in srgb, var(--signal) 12%, transparent); }

/* exp-dd voetnoot (planning-weergave-dropdown) */
.exp-dd__hint { display: flex; align-items: center; gap: 6px; padding: 9px 12px 3px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 10.5px; line-height: 1.45; color: var(--text-3); }
.exp-dd__hint b { color: var(--text-2); font-weight: 600; }

/* Project bewerken — werkkalender-uitzonderingen */
.pbew-vlist { margin-top: 8px; display: flex; flex-direction: column; gap: 7px; }
.pbew-vhead, .pbew-vrow { display: grid; grid-template-columns: minmax(120px, 1.5fr) 1fr 120px 120px 30px; gap: 9px; align-items: center; }
.pbew-vhead { font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); padding: 0 2px; }
.pbew-vrow input, .pbew-vrow select { width: 100%; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font: inherit; font-size: 12.5px; color: var(--text); }
.pbew-vrow input:focus, .pbew-vrow select:focus { outline: none; border-color: var(--brand); }

/* B12 — baseline delta-label per balk (afwijking einde t.o.v. baseline) */
.gbar2__delta { position: absolute; z-index: 2; font-size: 9px; font-weight: 700; line-height: 1; padding: 2px 4px; border-radius: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
.gbar2__delta.is-late { color: var(--neg); background: color-mix(in srgb, var(--neg) 13%, transparent); }
.gbar2__delta.is-early { color: var(--pos-tekst); background: color-mix(in srgb, var(--pos) 13%, transparent); }
.gantt2__conflict { position: sticky; left: 12px; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 6px 12px; padding: 8px 12px; border-radius: 9px; font-size: 12px; color: var(--neg); background: var(--neg-soft); }
.gantt2__conflict-fix { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 600; color: #fff; background: var(--neg); border: none; border-radius: 8px; padding: 6px 12px; cursor: pointer; transition: filter .12s; }
.gantt2__conflict-fix:hover { filter: brightness(1.1); }
.gantt2__edithint { position: sticky; left: 0; z-index: 2; padding: 7px 14px; font-size: 11px; color: var(--text-3); border-top: 1px dashed var(--line); background: var(--surface); }
.ptool__btn.is-on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.ptool__btn--brand { color: var(--brand); border-color: var(--brand); }
.ptool__btn:disabled { opacity: .4; cursor: default; }
.ptool__n { font-style: normal; margin-left: 5px; min-width: 17px; height: 17px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.pwlock { display: flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: 12.5px; color: var(--text-2); background: color-mix(in srgb, var(--amber) 7%, var(--surface)); border-bottom: 1px solid var(--line); }
.pwlock svg { color: var(--amber); }
.pwlock button { color: var(--brand); font-weight: 600; text-decoration: underline; }
.pwlog { border-bottom: 1px solid var(--line-strong); background: var(--bg-2); }
.pwlog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 11px 16px 8px; flex-wrap: wrap; }
.pwlog__head > div:first-child { display: flex; flex-direction: column; gap: 1px; min-width: 180px; }
.pwlog__head b { font-size: 13px; white-space: nowrap; }
.pwlog__acts { display: flex; gap: 7px; flex-wrap: wrap; }
.lt-kort.pwlog__empty { padding: 0 16px 13px; font-size: 12.5px; }
.pwlog__list { max-height: 180px; overflow: auto; padding: 0 16px 11px; display: flex; flex-direction: column; gap: 4px; }
.pwlog__row { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--text-2); }
.pwlog__row .pwlog__t { color: var(--text-3); font-family: 'Roboto Mono', monospace; font-size: 11px; flex-shrink: 0; }
.pwlog__row .pwlog__txt { flex: 1; min-width: 0; }
/* h77: wijzigingslog van de server */
.pwlog--srv .pwlog__list { max-height: 280px; }
.pwlog__row--srv { align-items: flex-start; padding: 3px 0; border-bottom: 1px solid var(--line); }
.pwlog__row--srv:last-child { border-bottom: 0; }
.pwlog__row--srv .pwlog__t { padding-top: 1px; min-width: 128px; }
.pwlog__wie { flex-shrink: 0; min-width: 120px; color: var(--text); font-weight: 500; }
.pwlog__row--srv .pwlog__txt { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.pwlog__row--srv .pwlog__txt b { color: var(--text); font-weight: 500; flex-basis: 100%; }
.pwlog__veld { color: var(--text-3); }
.pwlog__oud { text-decoration: line-through; }
.pwlog__door { flex-basis: 100%; }
@media (max-width: 600px) {
  .pwlog__row--srv { flex-wrap: wrap; gap: 2px 8px; }
  .pwlog__row--srv .pwlog__t, .pwlog__wie { min-width: 0; }
  .pwlog__row--srv .pwlog__txt { flex-basis: 100%; }
}
.pwlog__undo { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-3); font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: .55; transition: opacity .12s, color .12s, border-color .12s, background .12s; }
.pwlog__row:hover .pwlog__undo { opacity: 1; }
.pwlog__undo:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }



.set-kopprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-2); }
.set-kopprow__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-kopprow__main b { font-size: 13px; font-weight: 600; }
.set-kopprow__main span { font-size: 11.5px; color: var(--text-3); }
.set-kopprow__r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.set-kopprow__r i { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.uren__naam b { font-size: 13px; font-weight: 500; display: block; line-height: 1.25; }
.uren__naam i { font-style: normal; font-size: 11.5px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.uren__indirect { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); background: var(--track); padding: 1px 6px; border-radius: 4px; }
.uren__cell { width: 100%; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; padding: 8px 2px; border: 1px solid transparent; border-radius: 8px; background: var(--bg-2); color: var(--text); -moz-appearance: textfield; }
.uren__cell::-webkit-outer-spin-button, .uren__cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.uren__cell::placeholder { color: var(--text-3); }
.uren__cell:focus { outline: none; border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-soft); }
.uren__cell.is-filled { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.uren__cell--we { background: transparent; }
.uren__cell:disabled { opacity: .6; }
.uren__rowtot { text-align: center; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.uren__del { width: 26px; height: 26px; border-radius: 7px; color: var(--text-3); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s; }
.uren__row:hover .uren__del { opacity: 1; }
.uren__del:hover { background: var(--neg-soft); color: var(--neg); }
.uren__foot { padding: 12px 18px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.uren__daytot, .uren__weektot { text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-2); }
.uren__weektot { font-size: 15px; font-weight: 700; color: var(--text); }
.uren__add { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--brand); }
.uren__add:hover { text-decoration: underline; }
.uren__add-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.uren__add-pick button { font-size: 11.5px; padding: 5px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--text-2); }
.uren__add-pick button:hover { border-color: var(--brand); color: var(--brand); }
.uren__add-cancel { color: var(--text-3) !important; border-color: var(--line) !important; }
.uren__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; flex-wrap: wrap; }
.uren__bar-l { display: flex; gap: 22px; flex-wrap: wrap; }
.uren__bar-l span { font-size: 12.5px; color: var(--text-3); }
.uren__bar-l b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.uren__bar-r { display: flex; align-items: center; gap: 10px; }
.uren__sent { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--steel); }
@media (max-width: 1080px) { .uren__head, .uren__row, .uren__foot { grid-template-columns: minmax(150px, 1.6fr) repeat(7, 1fr) 60px 28px; gap: 4px; } }

/* projectbalk mail-knop */
.pjbar__mail { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; margin-left: 16px; padding: 9px 16px; border-radius: 10px; background: var(--brand); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); transition: filter .14s; }
.pjbar__mail:hover { filter: brightness(1.06); }

/* ============================================================
   MAIL — Gmail-gekoppeld venster
   ============================================================ */
.mailwin { width: min(1080px, 95vw); height: min(720px, 88vh); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; animation: pop .16s ease; }
.mailwin__top { display: flex; align-items: center; gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.mailwin__gmail { display: flex; align-items: center; gap: 10px; }
.mailwin__glogo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 24px; height: 18px; }
.mailwin__glogo i { border-radius: 2px; }
.mailwin__gmail b { font-size: 13px; font-weight: 700; display: block; line-height: 1.2; }
.mailwin__gmail span { font-size: 11.5px; color: var(--text-3); }
.mailwin__proj { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); background: var(--bg-2); padding: 6px 12px; border-radius: 999px; }
.mailwin__proj b { font-family: 'Roboto Mono', monospace; color: var(--brand); }
.mailwin__x { margin-left: auto; width: 32px; height: 32px; border-radius: 9px; color: var(--text-3); display: flex; align-items: center; justify-content: center; }
.mailwin__x:hover { background: var(--bg-2); color: var(--text); }
.mailwin__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px 1fr; }

.maillist { border-right: 1px solid var(--line); overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.maillist__new { display: inline-flex; align-items: center; gap: 8px; justify-content: center; padding: 11px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.maillist__new.is-on, .maillist__new:hover { background: var(--brand); color: #fff; }
.maillist__lbl { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 6px 6px 4px; }
.mailrow { text-align: left; padding: 10px 11px; border-radius: 10px; display: flex; flex-direction: column; gap: 3px; border: 1px solid transparent; }
.mailrow:hover { background: var(--bg-2); }
.mailrow.is-on { background: var(--bg-2); border-color: var(--line-strong); }
.mailrow__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mailrow__top b { font-size: 12.5px; font-weight: 500; }
.mailrow.is-unread .mailrow__top b { font-weight: 700; }
.mailrow__top i { font-style: normal; font-size: 10.5px; color: var(--text-3); flex-shrink: 0; }
.mailrow__subj { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailrow.is-unread .mailrow__subj { color: var(--text); font-weight: 500; }
.mailrow__snip { font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mailcompose { display: flex; flex-direction: column; min-height: 0; }
.mailf { display: flex; align-items: flex-start; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--line); }
.mailf__l { font-size: 12px; color: var(--text-3); width: 56px; flex-shrink: 0; padding-top: 6px; }
.mailf__chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1; }
.mail-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 5px 4px 10px; border-radius: 999px; background: var(--bg-2); font-size: 12px; font-weight: 500; }
.mail-chip i { font-style: normal; font-size: 10px; color: var(--text-3); }
.mail-chip button { width: 16px; height: 16px; border-radius: 50%; color: var(--text-3); font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.mail-chip button:hover { background: var(--neg-soft); color: var(--neg); }
.mailf__add { position: relative; }
.mailf__add > button { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--brand); font-weight: 600; padding: 5px 8px; border-radius: 7px; }
.mailf__add > button:hover { background: var(--brand-soft); }
.mailf__pop { position: absolute; top: 100%; left: 0; margin-top: 4px; width: 280px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 11px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 5; display: flex; flex-direction: column; gap: 2px; }
.mailf__pop button { text-align: left; padding: 8px 10px; border-radius: 8px; }
.mailf__pop button:hover { background: var(--bg-2); }
.mailf__pop b { display: block; font-size: 12.5px; font-weight: 500; }
.mailf__pop span { font-size: 11px; color: var(--text-3); }
.mailf__cc { font-size: 12px; color: var(--text-3); font-weight: 600; padding: 5px 8px; }
.mailf__cc:hover { color: var(--text); }
.mailf__subj { display: flex; align-items: center; gap: 8px; flex: 1; }
.mail-code { font-family: 'Roboto Mono', monospace; font-size: 12px; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 4px 8px; border-radius: 7px; flex-shrink: 0; }
.mailf__subj input { flex: 1; border: none; background: transparent; font-size: 13.5px; color: var(--text); padding: 6px 0; }
.mailf__subj input:focus { outline: none; }
.mailbody { flex: 1; min-height: 140px; border: none; background: transparent; resize: none; padding: 16px 20px; font-family: inherit; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.mailbody:focus { outline: none; }
.mailatt { display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 20px 12px; }
.mailatt__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--line-strong); font-size: 11.5px; color: var(--text-2); }
.mailatt__chip.is-on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.mailatt__chip i { font-style: normal; color: var(--brand); }
.mailcompose__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px; border-top: 1px solid var(--line); margin-top: auto; }
.mailcompose__note { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-3); }
.mailcompose__note b { color: var(--text-2); font-family: 'Roboto Mono', monospace; }
.mailcompose__actions { display: flex; gap: 10px; }
.mail-sent { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 40px; }
.mail-sent__ic { width: 60px; height: 60px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.mail-sent b { font-size: 17px; font-weight: 600; }
.mail-sent span { font-size: 12.5px; color: var(--text-3); max-width: 320px; }

.mailthread { padding: 22px 26px; overflow-y: auto; }
.mailthread__subj { font-size: 18px; font-weight: 600; margin-bottom: 16px; letter-spacing: -.01em; }
.mailthread__from { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.mailthread__av { width: 38px; height: 38px; border-radius: 50%; background: var(--steel); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.mailthread__from b { font-size: 13.5px; font-weight: 600; display: block; }
.mailthread__from span { font-size: 11.5px; color: var(--text-3); }
.mailthread__txt { font-size: 13.5px; line-height: 1.65; color: var(--text-2); }
.mailthread__reply { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 11px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.mailthread__reply:hover { border-color: var(--brand); color: var(--brand); }
@media (max-width: 820px) { .mailwin__body { grid-template-columns: 1fr; } .maillist { display: none; } }

/* ---- Instellingen (organisatie) -------------------------- */
.set-foot { display: block; font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin: 0; padding: 14px 18px; overflow-wrap: anywhere; }
/* h51: gewone alinea met het pictogram ervoor. Als flexbox werd elk tekststuk rond een <b> een eigen kolom
   ("Dit zijn de standaarden" liep daardoor in smalle stukjes terug). */
.set-foot > svg { display: inline-block; vertical-align: -2px; margin-right: 6px; color: var(--text-3); }
.set-foot b { color: var(--text-2); font-weight: 600; }
/* BV's */
.set-bvlist { padding: 4px 0; }
.set-bvrow { display: grid; grid-template-columns: 46px 1fr 110px 130px 36px; gap: 14px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); }
.set-bvrow:first-child { border-top: none; }
.set-bvchip { width: 42px; height: 42px; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; letter-spacing: .02em; }
.set-bvrow__main b { font-size: 14px; font-weight: 600; display: block; }
.set-bvrow__main span { font-size: 12px; color: var(--text-3); }
.set-bvkind { font-size: 11px; font-weight: 600; color: var(--steel); background: color-mix(in srgb, var(--steel) 12%, transparent); padding: 4px 11px; border-radius: 999px; text-align: center; }
.set-bvkind.is-holding { color: var(--navy); background: color-mix(in srgb, var(--navy) 12%, transparent); }
.set-bvcount { font-size: 12px; color: var(--text-3); text-align: right; }
.set-bvedit { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-3); border: 1px solid var(--line); }
.set-bvedit:hover { border-color: var(--brand); color: var(--brand); }

/* ============================================================
   Beheer & inrichting (backlog "gebruik" A1–A10)
   ============================================================ */
.bhr-wrap { display: flex; flex-direction: column; gap: var(--gap); }
.bhr-statusbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 20px; }
.bhr-statusbar__l { display: flex; align-items: center; gap: 16px; }
.bhr-statusbar__sub { display: block; font-size: 12px; color: var(--text-3); margin-top: 3px; max-width: 620px; }
.bhr-ring { --p: 0; width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--brand) calc(var(--p) * 1%), var(--line) 0); position: relative; }
.bhr-ring::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
.bhr-ring b { position: relative; z-index: 1; font-size: 14px; font-weight: 700; color: var(--text); }
.bhr-ring--sm { width: 44px; height: 44px; }
.bhr-ring--sm b { font-size: 12px; }
.bhr-ring--lg { width: 92px; height: 92px; flex-direction: column; }
.bhr-ring--lg::after { inset: 7px; }
.bhr-ring--lg b { font-size: 22px; font-weight: 300; }
.bhr-ring--lg span { position: relative; z-index: 1; font-size: 10px; color: var(--text-3); }

.bhr-lead { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 2px 0 14px; max-width: 640px; }
.std-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; margin-top: 4px; }
.bhr-confirmbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.bhr-confirmbar p { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: var(--text-3); line-height: 1.5; margin: 0; }
.bhr-confirmbar p svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.bhr-jaar { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); }
.bhr-jaar input { width: 76px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font: inherit; font-size: 13px; color: var(--text); }

.bhr-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.bhr-swatch { width: 30px; height: 30px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.bhr-swatch.is-on { border-color: var(--text); }
.bhr-bvprev { display: grid; grid-template-columns: 46px 1fr 110px; gap: 12px; align-items: center; margin-top: 12px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--bg-2); }
.bhr-lock { display: flex; align-items: center; justify-content: center; color: var(--text-3); }
.bhr-bvlist .set-bvrow { grid-template-columns: 46px 1fr 104px 92px 34px 26px; gap: 12px; }
.bibmodal__foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }

.btn--danger { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn--danger:hover:not(:disabled) { filter: brightness(1.06); }
.btn--danger:disabled { opacity: .5; cursor: not-allowed; }
.btn--dangerghost { background: color-mix(in srgb, var(--signal) 8%, transparent); border: 1px solid color-mix(in srgb, var(--signal) 35%, transparent); color: var(--signal); }
.btn--dangerghost:hover { background: color-mix(in srgb, var(--signal) 14%, transparent); }

.reeks-head, .reeks-row { display: grid; grid-template-columns: 1.35fr 84px 66px 58px 96px 152px 88px; gap: 12px; align-items: center; padding: 0 18px; }
.reeks-head { padding-top: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.reeks-list { display: flex; flex-direction: column; }
.reeks-row { padding-top: 9px; padding-bottom: 9px; border-top: 1px solid var(--line); }
.reeks-row:first-child { border-top: none; }
.reeks-lbl b { font-size: 13.5px; font-weight: 600; display: block; }
.reeks-lbl span { font-size: 11.5px; color: var(--text-3); }
.reeks-mono { font-family: 'Roboto Mono', monospace; font-size: 12.5px; color: var(--text-2); }
.reeks-in { width: 100%; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font: inherit; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.reeks-in--pad { max-width: 60px; }
.reeks-prev { font-family: 'Roboto Mono', monospace; font-size: 13px; font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }
.reeks-reserve { font: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.reeks-reserve:hover { border-color: var(--brand); color: var(--brand); }
.reeks-pnr { justify-self: start; font: inherit; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-3); cursor: pointer; }
.reeks-pnr.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.reeks-na { font-size: 11px; color: var(--text-3); opacity: .55; }

.prod-keep, .prod-wipe { border-radius: 12px; padding: 13px 15px; margin-bottom: 12px; }
.prod-keep { display: flex; gap: 11px; align-items: flex-start; background: color-mix(in srgb, var(--pos) 8%, transparent); border: 1px solid color-mix(in srgb, var(--pos) 26%, transparent); }
.prod-keep > svg { color: var(--pos); flex-shrink: 0; margin-top: 2px; }
.prod-keep b, .prod-wipe__h { display: block; font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.prod-keep span { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.prod-wipe { background: color-mix(in srgb, var(--signal) 6%, transparent); border: 1px solid color-mix(in srgb, var(--signal) 24%, transparent); }
.prod-wipe__h { display: flex; align-items: center; gap: 7px; color: var(--signal); margin-bottom: 8px; }
.prod-wipe__row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; padding: 5px 0; border-top: 1px dashed color-mix(in srgb, var(--signal) 18%, transparent); }
.prod-wipe__row:first-of-type { border-top: none; }
.prod-wipe__row b { font-variant-numeric: tabular-nums; color: var(--text); }
.prod-wipe__none { font-size: 12.5px; color: var(--text-3); margin: 0; }

.inr-top { display: flex; align-items: center; gap: 14px; margin: 2px 0 12px; }
.inr-top__tx { flex: 1; min-width: 0; }
.inr-top__tx b { display: block; font-size: 14px; font-weight: 600; }
.inr-top__tx span { font-size: 12px; color: var(--text-3); }
.inr-dismiss { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--line); color: var(--text-3); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.inr-dismiss:hover { color: var(--text); border-color: var(--line-strong); }
.inr-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.inr-row { display: flex; align-items: center; gap: 11px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; transition: border-color .14s, background .14s; }
.inr-row:hover:not(.is-done) { border-color: var(--brand); background: var(--brand-soft); }
.inr-row.is-done { cursor: default; } /* h92: geen opacity meer (tekst zakte naar 3,06:1); afgerond blijft herkenbaar aan het groene vinkje */
.inr-row__ic { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.inr-row__ic i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--text-3); display: block; }
.inr-row.is-done .inr-row__ic { background: var(--pos); color: #fff; }
.inr-row__tx { flex: 1; min-width: 0; }
.inr-row__tx b { display: block; font-size: 13px; font-weight: 600; }
.inr-row__tx span { font-size: 11.5px; color: var(--text-3); }
.inr-row__done { font-size: 11px; font-weight: 600; color: var(--text-2); } /* h92: was --pos (4,26:1 op wit bij 11px) */

.wiz-overlay { align-items: center; }
.wiz { width: min(720px, 96vw); max-height: 92vh; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; animation: tkSlide .18s ease; }
.wiz__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.wiz__steps { display: flex; gap: 7px; }
.wiz__dot { width: 30px; height: 5px; border-radius: 3px; background: var(--line); transition: background .2s; }
.wiz__dot.is-on { background: var(--brand); }
.wiz__dot.is-done { background: color-mix(in srgb, var(--brand) 55%, var(--line)); }
.wiz__body { padding: 22px; overflow-y: auto; }
.wiz__intro { margin-bottom: 16px; }
.wiz__intro h2 { font-size: 22px; font-weight: 300; letter-spacing: -.01em; margin: 3px 0 6px; }
.wiz__intro p { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 0; max-width: 560px; }
.wiz__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }
.wiz-welkom { display: flex; align-items: center; gap: 24px; padding: 8px 0; }
.wiz-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.wiz-checklist li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-2); }
.wiz-checklist li.is-done { color: var(--text-3); }
.wiz-klaar { text-align: center; padding: 16px 8px; }
.wiz-klaar__ic { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: color-mix(in srgb, var(--pos) 14%, transparent); color: var(--pos); display: flex; align-items: center; justify-content: center; }
.wiz-klaar p { font-size: 14px; color: var(--text-2); line-height: 1.6; max-width: 460px; margin: 0 auto; }
.wiz-klaar__open { font-size: 12.5px !important; color: var(--text-3) !important; margin-top: 10px !important; }

@media (max-width: 720px) { .std-grid, .inr-list, .wiz-checklist { grid-template-columns: 1fr; } .wiz-welkom { flex-direction: column; } }

/* A4 · herbruikbare lege-toestand */
.emptystate { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 46px 24px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.emptystate--grid { grid-column: 1 / -1; }
.emptystate__ic { width: 56px; height: 56px; border-radius: 16px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.emptystate__title { font-size: 16px; font-weight: 600; color: var(--text); }
.emptystate__body { font-size: 13px; color: var(--text-3); max-width: 380px; line-height: 1.55; margin: 0; }
.emptystate .btn { margin-top: 6px; }

/* A8 · kopieer-van-bestaand (nieuw-project-modal) */
/* h43: een keuzelijst is zo breed als zijn langste optie; zonder min-width 0 liep "Kopieer van bestaand" rechts buiten het venster */
.np-copy { min-width: 0; display: flex; align-items: center; gap: 12px; margin: 4px 0 2px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; }
.np-copy__lbl { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.np-copy__lbl svg { color: var(--brand); }
.np-copy select { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font: inherit; font-size: 13px; color: var(--text); }

/* ============================================================
   B11–B18 · Data-import & migratie
   ============================================================ */
.imp-typegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px; }
.imp-typecard { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color .14s, background .14s; }
.imp-typecard:hover { border-color: var(--brand); background: var(--brand-soft); }
.imp-typeic { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.imp-typetx { flex: 1; min-width: 0; }
.imp-typetx b { display: block; font-size: 14px; font-weight: 600; }
.imp-typetx span { font-size: 12px; color: var(--text-3); }

.imp-batchlist { display: flex; flex-direction: column; }
.imp-batchrow { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); }
.imp-batchrow:first-child { border-top: none; }
.imp-batchic { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; background: var(--bg-2); color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.imp-batchtx { flex: 1; min-width: 0; }
.imp-batchtx b { display: block; font-size: 13.5px; font-weight: 600; }
.imp-batchtx span { font-size: 11.5px; color: var(--text-3); }
.imp-undo { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px; cursor: pointer; }
.imp-undo:hover { border-color: var(--signal); color: var(--signal); }

.imp-soon { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.imp-soonrow { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border: 1px dashed var(--line-strong); border-radius: 10px; opacity: .8; }
.imp-soonrow svg { color: var(--text-3); flex-shrink: 0; margin-top: 2px; }
.imp-soonrow b { display: block; font-size: 13px; font-weight: 600; }
.imp-soonrow span { font-size: 11.5px; color: var(--text-3); }

/* wizard */
.imp-wiz { width: min(780px, 96vw); max-height: 92vh; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; animation: tkSlide .18s ease; }
.imp-wiz__body { padding: 20px 22px; overflow-y: auto; }
.imp-step { display: flex; align-items: center; gap: 9px; margin: 18px 0 9px; }
.imp-step:first-child { margin-top: 2px; }
.imp-step__n { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.imp-step b { font-size: 14px; font-weight: 600; }
.imp-step__s { font-size: 12px; color: var(--text-3); }
.imp-ta { width: 100%; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg-2); font-family: 'Roboto Mono', monospace; font-size: 12.5px; color: var(--text); resize: vertical; box-sizing: border-box; }
.imp-ta__bar { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.imp-detect { font-size: 12px; color: var(--pos-tekst); font-weight: 600; }
.imp-maps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
.imp-map { display: flex; flex-direction: column; gap: 4px; }
.imp-map span { font-size: 12px; font-weight: 500; color: var(--text-2); }
.imp-map select { padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font: inherit; font-size: 12.5px; color: var(--text); }
.imp-sum { display: inline-flex; gap: 7px; margin-left: auto; }
.imp-pill { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.imp-pill--ok { color: var(--pos-tekst); background: color-mix(in srgb, var(--pos) 13%, transparent); }
.imp-pill--dupe { color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 15%, transparent); }
.imp-pill--err { color: var(--signal); background: color-mix(in srgb, var(--signal) 13%, transparent); }
.imp-preview { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.imp-prow { display: flex; gap: 8px; align-items: center; padding: 7px 11px; border-top: 1px solid var(--line); }
.imp-prow:first-child { border-top: none; }
.imp-prow > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text); }
.imp-prow--h { background: var(--bg-2); }
.imp-prow--h > span { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.imp-stat { flex: 0 0 20px !important; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.imp-prow--ok .imp-stat { color: var(--pos-tekst); }
.imp-prow--dupe { background: color-mix(in srgb, var(--amber) 7%, transparent); }
.imp-prow--dupe .imp-stat { color: var(--amber-tekst); }
.imp-prow--err { background: color-mix(in srgb, var(--signal) 6%, transparent); }
.imp-prow--err .imp-stat { color: var(--signal); }
.imp-more { padding: 7px 11px; font-size: 11.5px; color: var(--text-3); border-top: 1px solid var(--line); background: var(--bg-2); }
.imp-done { text-align: center; padding: 26px 8px; }
.imp-done__ic { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%; background: color-mix(in srgb, var(--pos) 14%, transparent); color: var(--pos); display: flex; align-items: center; justify-content: center; }
.imp-done p { font-size: 14px; color: var(--text-2); }
@media (max-width: 720px) { .imp-typegrid, .imp-maps, .imp-soon { grid-template-columns: 1fr; } }

/* ============================================================
   C21–C29 · Datakwaliteit & validatie
   ============================================================ */
.bib-field--err input, .bib-field--err select { border-color: var(--signal) !important; }
.bib-field__err { font-style: normal; color: var(--signal); font-weight: 600; }
.bib-field--ok input { border-color: color-mix(in srgb, var(--pos) 45%, var(--line-strong)); }

.volb { display: inline-flex; align-items: center; gap: 5px; }
.volb__ring { width: 16px; height: 16px; border-radius: 50%; position: relative; flex-shrink: 0; }
.volb__ring i { position: absolute; inset: 3px; border-radius: 50%; background: var(--surface); }
.volb b { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.volb--sm .volb__ring { width: 14px; height: 14px; }
.volb--sm b { font-size: 10.5px; }

.dq-grouphead { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 18px; background: none; border: none; cursor: pointer; }
.dq-grouphead:hover { background: var(--bg-2); }
.dq-sev { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.dq-sev--err { background: color-mix(in srgb, var(--signal) 14%, transparent); color: var(--signal); }
.dq-sev--warn { background: color-mix(in srgb, var(--amber) 15%, transparent); color: var(--amber-tekst); }
.dq-grouptx { flex: 1; min-width: 0; }
.dq-grouptx b { display: block; font-size: 14px; font-weight: 600; }
.dq-grouptx span { font-size: 12px; color: var(--text-3); }
.dq-count { font-size: 12px; font-weight: 700; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-variant-numeric: tabular-nums; }
.dq-items { border-top: 1px solid var(--line); padding: 6px 18px 14px; }
.dq-item { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.dq-item:last-of-type { border-bottom: none; }
.dq-item b { font-size: 13px; font-weight: 500; }
.dq-item span { font-size: 12px; color: var(--text-3); }
.dq-item--more { color: var(--text-3); font-size: 12px; }
.dq-groupfoot { margin-top: 10px; }

/* ============================================================
   D31–D34 · Gebruikers & toegang
   ============================================================ */
.gb-me { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 20px; }
.gb-av { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; letter-spacing: .02em; }
.gb-av--lg { width: 48px; height: 48px; border-radius: 13px; font-size: 15px; }
.gb-me__tx { flex: 1; min-width: 0; }
.gb-me__tx b { display: block; font-size: 16px; font-weight: 600; }
.gb-me__tx span { font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; }
.gb-switch { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.gb-switch select { padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); font: inherit; font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text); }
.gb-head, .gb-row { display: grid; grid-template-columns: 2fr 60px 150px 118px 128px 40px; gap: 12px; align-items: center; padding: 0 18px; }
.gb-head { padding-top: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.gb-list { display: flex; flex-direction: column; }
.gb-row { padding-top: 9px; padding-bottom: 9px; border-top: 1px solid var(--line); }
.gb-row:first-child { border-top: none; }
.gb-row.is-me { background: var(--brand-soft); }
.gb-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gb-user__tx { min-width: 0; }
.gb-user__tx b { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.gb-user__tx span { font-size: 11.5px; color: var(--text-3); display: block; overflow-wrap: anywhere; } /* h51: e-mailadres loopt terug in plaats van af te kappen */
.gb-youchip { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); border: 1px solid color-mix(in srgb,var(--brand) 30%,transparent); border-radius: 999px; padding: 1px 6px; }
.gb-bv { font-size: 12px; font-weight: 600; color: var(--text-2); }
.gb-rolesel { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font: inherit; font-size: 12.5px; color: var(--text); width: 100%; }
.gb-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.gb-status i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.gb-last { font-size: 12px; color: var(--text-3); }
.gb-acts { display: flex; justify-content: flex-end; }
.gb-actbtn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text-3); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.gb-actbtn:hover:not(:disabled) { border-color: var(--signal); color: var(--signal); }
.gb-actbtn--on:hover:not(:disabled) { border-color: var(--pos); color: var(--pos-tekst); }
.gb-actbtn:disabled { opacity: .35; cursor: not-allowed; }
@media (max-width: 900px) { .gb-head { display: none; } .gb-row { grid-template-columns: 1fr 1fr; gap: 8px 12px; } .gb-me { flex-wrap: wrap; } }

/* ============================================================
   J97–J98 · Adoptie — changelog & feedback
   ============================================================ */
.adoptie-fab { position: fixed; left: 16px; bottom: 16px; z-index: 900; display: flex; flex-direction: column; gap: 8px; }
.adoptie-btn { position: relative; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .14s; }
.adoptie-btn:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); transform: translateY(-1px); }
.adoptie-btn--fb:hover { color: var(--pos-tekst); border-color: var(--pos); background: color-mix(in srgb,var(--pos) 10%,transparent); }
.adoptie-dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--signal); border: 2px solid var(--surface); }

.chl { width: min(560px, 96vw); max-height: 88vh; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; animation: tkSlide .18s ease; }
.chl__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.chl__body { padding: 8px 20px 20px; overflow-y: auto; }
.chl__rel { padding: 16px 0; border-bottom: 1px solid var(--line); }
.chl__rel:last-child { border-bottom: none; }
.chl__relhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.chl__ver { font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.chl__ver.is-new { color: #fff; background: var(--brand); border-color: var(--brand); }
.chl__relhead b { font-size: 15px; font-weight: 600; flex: 1; }
.chl__datum { font-size: 12px; color: var(--text-3); }
.chl__items { display: flex; flex-direction: column; gap: 12px; }
.chl__item { display: flex; align-items: flex-start; gap: 11px; }
.chl__ic { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.chl__item b { display: block; font-size: 13.5px; font-weight: 600; }
.chl__item span { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }

.fb-soort { display: flex; gap: 8px; margin-bottom: 14px; }
.fb-soortbtn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all .14s; }
.fb-soortbtn:hover { border-color: var(--brand); color: var(--brand); }
.fb-soortbtn.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ============================================================
   H71–H74 · Rapportcentrum
   ============================================================ */
.rap-groep { margin-bottom: 22px; }
.rap-groep__h { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); margin: 0 0 11px; }
.rap-groep__h span { font-size: 11px; font-weight: 600; color: var(--text-3); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.rap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.rap-card { display: flex; align-items: flex-start; gap: 13px; padding: 15px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.rap-card__ic { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.rap-card__tx { flex: 1; min-width: 0; }
.rap-card__tx b { display: block; font-size: 14.5px; font-weight: 600; }
.rap-card__tx span { display: block; font-size: 12px; color: var(--text-3); line-height: 1.45; margin-top: 2px; }
.rap-card__acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; align-self: center; }
.rap-xbtn { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 10px; cursor: pointer; transition: all .14s; }
.rap-xbtn:hover:not(:disabled) { border-color: var(--pos); color: var(--pos-tekst); background: color-mix(in srgb,var(--pos) 8%,transparent); }
.rap-xbtn--pdf:hover:not(:disabled) { border-color: var(--signal); color: var(--signal); background: color-mix(in srgb,var(--signal) 8%,transparent); }
.rap-xbtn:disabled { opacity: .5; cursor: default; }
.rap-plan { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text-3); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rap-plan:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.rap-foot { display: flex; align-items: flex-start; gap: 12px; }
.rap-foot__ic { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.rap-foot b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.rap-foot span { font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
@media (max-width: 860px) { .rap-grid { grid-template-columns: 1fr; } .rap-card__acts { flex-wrap: wrap; } }

/* medewerkers */
.set-medlayout { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--gap); align-items: start; }
.set-rolfilter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.set-rolchip { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 6px 10px 6px 13px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); line-height: 1; }
.set-rolchip.is-on { background: var(--brand); color: #fff; border-color: var(--brand); }
.set-rolchip em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--text-3); background: var(--bg-2); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.set-rolchip.is-on em { color: #fff; background: rgba(255,255,255,.22); }
.set-medlist { padding: 0 8px 8px; }
.set-medrow { display: grid; grid-template-columns: 1.7fr 1.1fr 46px 104px 72px 50px; gap: 12px; align-items: center; padding: 10px 10px; border-top: 1px solid var(--line); }
.set-medrow--clic { cursor: pointer; border-radius: 9px; transition: background .12s; }
.set-medrow--clic:hover { background: var(--bg-2); }
.set-roltag { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-meddate { font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.set-medrow--h { border-top: none; padding: 8px 10px; }
.set-medrow--h span { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.set-medrow--h .r { text-align: right; } .set-medrow--h .c, .set-medrow .c { text-align: center; }
.set-medrow.is-inactief { opacity: .5; }
.set-medwho { display: flex; align-items: center; gap: 10px; min-width: 0; }
.set-medav { width: 32px; height: 32px; border-radius: 8px; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.set-medwho b { font-size: 13px; font-weight: 600; display: block; }
.set-medwho i { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.set-medrol select { font: inherit; font-size: 12px; font-weight: 600; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); max-width: 100%; }
.set-medbv { font-size: 12px; color: var(--text-2); font-weight: 600; }
.set-medtar { font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.set-toggle { width: 36px; height: 20px; border-radius: 999px; background: var(--line-strong); position: relative; transition: background .15s; }
.set-toggle.is-on { background: var(--pos); }
.set-toggle i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff; transition: left .15s; }
.set-toggle.is-on i { left: 18px; }
.set-rolcard { align-self: stretch; }
.set-rollist { display: flex; flex-direction: column; }
.set-rolitem { padding: 13px 18px; border-top: 1px solid var(--line); }
.set-rolitem:first-child { border-top: none; }
.set-rolitem__h { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.set-roldot { width: 9px; height: 9px; border-radius: 999px; }
.set-rolitem__h b { font-size: 13px; font-weight: 600; }
.set-rolcount { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--text-3); background: var(--bg-2); padding: 1px 8px; border-radius: 999px; }
.set-rolkort { font-size: 11.5px; color: var(--text-3); margin: 0 0 9px; }
.set-rolrechten { display: flex; flex-wrap: wrap; gap: 6px; }
.set-rolrecht { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-2); background: var(--bg-2); padding: 3px 9px; border-radius: 999px; }
.set-rolrecht > svg { color: var(--brand); }

/* rollen & rechten — kaarten + matrix */
.set-rolgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: stretch; }
@media (max-width: 1180px) { .set-rolgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .set-rolgrid { grid-template-columns: 1fr; } }
.set-rolcardh { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.set-rolcardh b { font-size: 14px; font-weight: 600; }
.set-rolbeheer { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); font-size: 11px; color: var(--text-3); }
.set-matleg { display: flex; gap: 14px; }
.set-matleg span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); }
.set-matleg i { width: 10px; height: 10px; border-radius: 3px; }
.set-matwrap { overflow-x: auto; padding: 4px 8px 8px; }
.set-mat { display: grid; min-width: 640px; }
.set-mat__cell { padding: 10px 8px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.set-mat__corner { border-top: none; justify-content: flex-start; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.set-mat__rolh { border-top: none; flex-direction: column; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--text-2); text-align: center; line-height: 1.2; }
.set-mat__modh { justify-content: flex-start; font-size: 12px; font-weight: 500; color: var(--text); text-align: left; }
.set-matdot { width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }

/* medewerker-detail pop-up */
.set-medmodal { width: min(900px, 96vw); max-height: 90vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; animation: pbpop .2s ease; }
.set-medmodal__head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.set-medmodal__av { width: 44px; height: 44px; border-radius: 11px; color: #fff; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.set-medmodal__ht { flex: 1; min-width: 0; }
.set-medmodal__ht b { font-size: 18px; font-weight: 500; letter-spacing: -.01em; display: block; }
.set-medmodal__ht span { font-size: 12.5px; color: var(--text-3); }
.set-medmodal__x { margin-left: auto; width: 32px; height: 32px; border-radius: 8px; color: var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.set-medmodal__x:hover { background: var(--bg-2); color: var(--text); }
.set-medmodal__body { display: grid; grid-template-columns: 1fr 1.1fr; overflow: hidden; flex: 1; min-height: 0; }
.set-medmodal__col { padding: 18px 22px; overflow-y: auto; }
.set-medmodal__col--r { border-left: 1px solid var(--line); background: var(--bg-2); }
.set-medsec { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin: 0 0 12px; }
.set-medmodal__col .set-medsec:not(:first-child) { margin-top: 22px; }
.set-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.set-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.set-f--full { grid-column: 1 / -1; }
.set-f > span { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.set-f input, .set-f select { font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--text); width: 100%; }
.set-f input:focus, .set-f select:focus { outline: none; border-color: var(--brand); }
.set-statbtn { display: inline-flex; align-items: center; gap: 9px; font: inherit; font-size: 13px; font-weight: 500; color: var(--text-2); padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); }
.set-statbtn.is-on { color: var(--pos-tekst); border-color: color-mix(in srgb, var(--pos) 40%, var(--line-strong)); }
.set-mid { display: flex; flex-direction: column; gap: 8px; }
.set-midrow { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.set-midrow b { font-size: 12.5px; font-weight: 500; flex: 1; }
.set-accbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.set-accreset { font: inherit; font-size: 11px; font-weight: 600; color: var(--brand); padding: 4px 9px; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); }
.set-accreset:hover { background: var(--brand-soft); }
.set-accfollow { font-size: 11px; color: var(--text-3); }
.set-accfollow b { color: var(--text-2); font-weight: 600; }
.set-acchint { font-size: 11.5px; color: var(--text-3); line-height: 1.45; margin: 0 0 14px; }
.set-acclist { display: flex; flex-direction: column; }
.set-accrow { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.set-accrow:first-child { border-top: none; padding-top: 2px; }
.set-accrow__main b { font-size: 12.5px; font-weight: 600; display: block; }
.set-accrow__main span { font-size: 11px; color: var(--text-3); }
.set-seg { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 9px; padding: 3px; }
.set-seg button { font: inherit; font-size: 11.5px; font-weight: 600; padding: 6px 4px; border-radius: 6px; color: var(--text-3); transition: all .12s; }
.set-seg button:hover { color: var(--text-2); }
.set-seg button.is-on { background: var(--surface); color: var(--text-2); box-shadow: var(--shadow); }
.set-seg button.is-on[data-lvl="beheren"] { color: var(--brand); }
.set-seg button.is-on[data-lvl="inzien"] { color: var(--steel); }
.set-medmodal__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--surface); }
.set-medmodal__note { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-3); }
@media (max-width: 760px) { .set-medmodal__body { grid-template-columns: 1fr; } .set-medmodal__col--r { border-left: none; border-top: 1px solid var(--line); } .set-fgrid { grid-template-columns: 1fr; } }

/* templates & sjablonen */
.tpl-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: var(--gap); }
.tpl-switch { display: inline-flex; gap: 3px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; padding: 4px; }
.tpl-switch button { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-3); padding: 8px 14px; border-radius: 8px; transition: all .14s; }
.tpl-switch button.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.tpl-switch button > svg { opacity: .65; }
.tpl-switch button.is-on > svg { color: var(--brand); opacity: 1; }
/* h91 (Q24 plak 10): met drie soorten sjablonen past de schakelaar niet op een telefoon; dan breekt hij af. */
.tpl-switch { flex-wrap: wrap; max-width: 100%; }
.tpl-list { padding: 4px 8px 8px; }
.tpl-row { display: grid; grid-template-columns: 1.9fr 116px 84px 100px 74px; gap: 12px; align-items: center; padding: 11px 10px; border-top: 1px solid var(--line); }
.tpl-row--h { border-top: none; }
.tpl-row--h span { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.tpl-row--clic { cursor: pointer; border-radius: 9px; transition: background .12s; }
.tpl-row--clic:hover { background: var(--bg-2); }
.tpl-who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tpl-ic { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tpl-who__t { min-width: 0; }
.tpl-who__t b { font-size: 13px; font-weight: 600; display: block; }
.tpl-who__t i { font-style: normal; font-size: 11px; color: var(--text-3); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-meta { font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tpl-status { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.tpl-status--actief { color: var(--pos-tekst); background: color-mix(in srgb, var(--pos) 13%, transparent); }
.tpl-status--concept { color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 15%, transparent); }
.tpl-varinline { font-family: 'Roboto Mono', monospace; font-size: 11px; color: var(--brand); background: var(--brand-soft); padding: 1px 5px; border-radius: 5px; }
.tpl-var { display: inline-block; font-family: 'Roboto Mono', monospace; font-size: 11.5px; color: var(--brand); background: var(--brand-soft); padding: 3px 8px; border-radius: 6px; }
.tpl-varlist { display: flex; flex-wrap: wrap; gap: 7px; }
.tpl-docgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 14px 18px 8px; }
@media (max-width: 1180px) { .tpl-docgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .tpl-docgrid { grid-template-columns: 1fr; } }
.tpl-doccard { display: flex; flex-direction: column; text-align: left; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); overflow: hidden; transition: all .14s; position: relative; }
.tpl-doccard:hover { border-color: var(--text-3); box-shadow: var(--shadow); transform: translateY(-2px); }
.tpl-paper { position: relative; height: 116px; background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 18px 18px 0; overflow: hidden; }
.tpl-paper--real { height: 158px; padding: 0; background: #fff; display: flex; justify-content: center; }
.tpl-paper--real .tpl-paper__scale { transform: scale(0.34); transform-origin: top center; width: 600px; flex-shrink: 0; pointer-events: none; }
.tpl-paper--real .dt-paper { width: 600px; box-shadow: none; }
.tpl-paper--real .dt-page { box-shadow: none; min-height: 0; width: 600px; padding: 44px 46px; }
.tpl-paper__bar { position: absolute; top: 0; left: 0; right: 0; height: 5px; }
.tpl-paper__lines { display: flex; flex-direction: column; gap: 7px; }
.tpl-paper__lines i { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--text) 13%, transparent); }
.tpl-paper__lines span { height: 8px; }
.tpl-doccard__b { padding: 13px 15px 15px; flex: 1; }
.tpl-doccard__b > b { font-size: 14px; font-weight: 600; display: block; margin-bottom: 9px; }
.tpl-doctags { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.tpl-fmt { font-size: 10.5px; font-weight: 600; color: var(--text-3); font-family: 'Roboto Mono', monospace; }
.tpl-doccard__use { font-size: 11.5px; color: var(--text-3); }
.tpl-doccard .tpl-status { position: absolute; top: 12px; right: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.tpl-modal { width: min(640px, 96vw); max-height: 90vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; animation: pbpop .2s ease; }
.tpl-modal__head { display: flex; align-items: center; gap: 13px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.tpl-modal__ht { flex: 1; min-width: 0; }
.tpl-modal__ht b { font-size: 17px; font-weight: 600; display: block; }
.tpl-modal__ht span { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-3); margin-top: 4px; }
.tpl-modal__body { padding: 20px 22px; overflow-y: auto; }
.tpl-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line); }
.tpl-mailprev { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tpl-mailprev__subj { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.tpl-mailprev__subj span { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.tpl-mailprev__subj b { font-size: 13.5px; font-weight: 600; }
.tpl-mailprev__body { padding: 16px; font-size: 13px; line-height: 1.65; color: var(--text-2); white-space: pre-wrap; }
.tpl-docprev { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 22px 24px; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.tpl-docprev__bar { position: absolute; top: 0; left: 0; right: 0; height: 6px; }
.tpl-docprev__head { display: flex; align-items: center; gap: 10px; margin: 6px 0 18px; }
.tpl-docprev__mark { display: inline-flex; }
.tpl-docprev__mark i { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--brand); display: block; }
.tpl-docprev__mark i:last-child { border-color: var(--steel); margin-left: -6px; }
.tpl-docprev__co { font-size: 13px; font-weight: 600; }
.tpl-docprev__lines { display: flex; flex-direction: column; gap: 8px; }
.tpl-docprev__lines i { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 11%, transparent); }
.tpl-docprev__lines span { height: 10px; }
.tpl-docprev__foot { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 10px; color: var(--text-3); font-family: 'Roboto Mono', monospace; }
.tpl-docmeta { margin-top: 16px; }
.tpl-docmeta p { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin: 0 0 12px; }
.tpl-docmeta__kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.tpl-docmeta__kv span { color: var(--text-3); }
.tpl-docmeta__kv b { font-weight: 600; }
.tpl-dochint { display: flex; align-items: flex-start; gap: 6px; margin-top: 14px; font-size: 11px; color: var(--text-3); line-height: 1.5; }
.tpl-dochint svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }

/* volledig uitgewerkte documentsjablonen */
.tpl-modal--doc { width: min(1060px, 97vw); }
.tpl-modal--doc .tpl-modal__body { display: grid; grid-template-columns: 1fr 256px; gap: 18px 22px; align-items: start; }
.tpl-modal--doc .tpl-docpick { grid-column: 1 / -1; margin-bottom: 0; }
@media (max-width: 820px) { .tpl-modal--doc .tpl-modal__body { grid-template-columns: 1fr; } }
.tpl-docfull { background: #e7e4dd; border: 1px solid var(--line); border-radius: 10px; padding: 26px 22px; max-height: 66vh; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 22px; }
/* .dt-paper = stapel A4-pagina's; .dt-page = één vel */
.dt-paper { display: flex; flex-direction: column; align-items: center; gap: 22px; background: transparent; color: #232323; font-family: Roboto, sans-serif; font-size: 12px; line-height: 1.55; width: 100%; }
.dt-paper * { box-sizing: border-box; }
.dt-page { position: relative; width: min(600px, 100%); min-height: 848px; background: #fff; padding: 46px 46px 60px; box-shadow: 0 6px 24px rgba(0,0,0,.16); display: flex; flex-direction: column; }
.dt-pagenum { position: absolute; left: 46px; right: 46px; bottom: 22px; display: flex; justify-content: space-between; align-items: center; font-size: 9px; color: #b0b0b0; font-family: 'Roboto Mono', monospace; letter-spacing: .04em; border-top: 1px solid #eee; padding-top: 8px; }
.dt-runhead { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 9px; margin-bottom: 20px; border-bottom: 1px solid #e4e4e4; }
.dt-runhead b { font-size: 11px; font-weight: 700; color: #3F6178; letter-spacing: .02em; }
.dt-runhead span { font-size: 9.5px; color: #aaa; font-family: 'Roboto Mono', monospace; }
.dt-paper--measure { height: 0 !important; overflow: hidden !important; pointer-events: none; align-items: stretch; }
.dt-paper--measure .dt-page { min-height: 0; box-shadow: none; width: min(600px, 100%); }
.dt-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 16px; border-bottom: 2px solid #3F6178; margin-bottom: 22px; }
.dt-brand { display: flex; align-items: center; gap: 11px; }
.dt-logo { font-size: 30px; font-weight: 700; color: #3F6178; letter-spacing: -.02em; line-height: 1; }
.dt-wm { display: flex; flex-direction: column; line-height: 1; }
.dt-wm__c { font-size: 27px; font-weight: 800; letter-spacing: .04em; color: #3a6e89; }
.dt-wm__p { font-size: 9px; font-weight: 700; letter-spacing: .33em; color: #28a9e0; margin-top: 4px; }
.dt-logoimg { height: 50px; width: auto; display: block; }
.exp-logoimg { height: 40px; width: auto; display: block; }
.set-logoimg { height: 40px; width: auto; display: block; }
.dt-brand b { font-size: 14px; font-weight: 700; color: #232323; display: block; }
.dt-brand span { font-size: 10.5px; color: #888; }
.dt-co { text-align: right; display: flex; flex-direction: column; gap: 1px; }
.dt-co span { font-size: 10px; color: #777; }
.dt-co span:first-child { color: #232323; font-weight: 600; }
.dt-addrmeta { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.dt-addr { display: flex; flex-direction: column; gap: 1px; }
.dt-addr__l { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #aaa; margin-bottom: 3px; }
.dt-addr b { font-size: 12.5px; }
.dt-addr span { font-size: 11.5px; color: #555; }
.dt-meta { border-collapse: collapse; align-self: flex-start; }
.dt-meta td { font-size: 10.5px; color: #888; padding: 2px 10px 2px 0; vertical-align: top; }
.dt-meta th { font-size: 11px; color: #232323; text-align: right; font-weight: 600; padding: 2px 0; white-space: nowrap; }
.dt-title { margin-bottom: 16px; }
.dt-title h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin: 0; color: #1a1a1a; }
.dt-title p { font-size: 12px; color: #777; margin: 4px 0 0; }
.dt-p { font-size: 12px; line-height: 1.6; color: #333; margin: 0 0 11px; }
.dt-h { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #3F6178; margin: 20px 0 9px; padding-bottom: 5px; border-bottom: 1px solid #eee; }
.dt-tbl { width: 100%; border-collapse: collapse; margin: 4px 0 6px; }
.dt-tbl th { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #999; text-align: left; padding: 6px 8px; border-bottom: 1.5px solid #ddd; }
.dt-tbl td { font-size: 11.5px; color: #333; padding: 6px 8px; border-bottom: 1px solid #f0f0f0; }
.dt-tbl .r { text-align: right; }
.dt-recap { width: 100%; max-width: 320px; margin-left: auto; border-collapse: collapse; margin-top: 8px; }
.dt-recap td { font-size: 11.5px; color: #444; padding: 4px 8px; }
.dt-recap .r { text-align: right; font-variant-numeric: tabular-nums; }
.dt-recap__sum td { border-top: 1px solid #ddd; font-weight: 600; color: #232323; padding-top: 7px; }
.dt-recap__tot td { border-top: 2px solid #3F6178; font-weight: 700; font-size: 12.5px; color: #1a1a1a; padding-top: 7px; }
.dt-ul { margin: 4px 0 8px; padding-left: 18px; }
.dt-ul li { font-size: 11.5px; color: #333; line-height: 1.55; margin-bottom: 4px; }
.dt-ol { margin: 4px 0 10px; padding-left: 20px; }
.dt-ol li { font-size: 11.5px; color: #333; line-height: 1.55; margin-bottom: 4px; }
.dt-kvgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 22px; margin: 6px 0 8px; }
.dt-kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid #f0f0f0; }
.dt-kv span { font-size: 11px; color: #888; }
.dt-kv b { font-size: 11.5px; font-weight: 600; color: #232323; text-align: right; }
.dt-dagmeta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; margin-bottom: 18px; }
.dt-pay { margin-top: 16px; padding: 13px 15px; background: #f6f8f9; border-radius: 8px; border: 1px solid #e6ebee; }
.dt-pay b { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #3F6178; }
.dt-pay p { font-size: 11.5px; color: #444; margin: 5px 0 0; line-height: 1.55; }
.dt-concl { display: flex; align-items: center; gap: 12px; margin: 16px 0; padding: 13px 16px; background: #eef5f0; border: 1px solid #cfe4d8; border-radius: 9px; }
.dt-concl__ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: #1f8a5b; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }
.dt-concl b { font-size: 12.5px; color: #1a1a1a; display: block; }
.dt-concl span { font-size: 11px; color: #557; }
.dt-sign { display: flex; gap: 28px; margin-top: 28px; }
.dt-sign__col { flex: 1; display: flex; flex-direction: column; }
.dt-sign__rol { font-size: 10.5px; font-weight: 600; color: #444; }
.dt-sign__line { height: 30px; border-bottom: 1px solid #999; margin: 6px 0 8px; }
.dt-sign__meta { display: flex; flex-direction: column; gap: 2px; }
.dt-sign__meta span { font-size: 10px; color: #888; }
.dt-foot { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 26px; padding-top: 11px; border-top: 1px solid #e4e4e4; }
.dt-foot span { font-size: 9.5px; color: #999; font-family: 'Roboto Mono', monospace; }
.dt-foot__doc { margin-left: auto; color: #3F6178 !important; }
.dt-var { background: color-mix(in srgb, #3F6178 13%, transparent); color: #2a4d63; border-radius: 3px; padding: 0 3px; font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* aanvullende documentelementen (doc-templates-2) */
.dt-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.dt-badge--hoog { color: #a3271f; background: #fbe7e4; }
.dt-badge--midden { color: #9a5b00; background: #fbeecd; }
.dt-badge--laag, .dt-badge--ok { color: #1f7a4d; background: #dcefe2; }
.dt-badge--open { color: #9a5b00; background: #fbeecd; }
.dt-badge--dicht { color: #557; background: #e9edf1; }
.dt-check { color: #1f8a5b; font-weight: 700; }
.dt-cross { color: #c0392b; font-weight: 700; }
.dt-note { margin: 12px 0; padding: 12px 15px; background: #f6f6f4; border: 1px solid #e6e6e2; border-left: 3px solid #3F6178; border-radius: 7px; }
.dt-note b { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #3F6178; display: block; margin-bottom: 3px; }
.dt-note p { font-size: 11.5px; color: #444; margin: 0; line-height: 1.55; }
.dt-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 8px 0 6px; }
.dt-photo { aspect-ratio: 4 / 3; background: repeating-linear-gradient(135deg, #f1f1ef, #f1f1ef 8px, #eaeae7 8px, #eaeae7 16px); border: 1px solid #e2e2de; border-radius: 6px; display: flex; align-items: flex-end; padding: 6px 8px; font-size: 9px; color: #9a9a94; }
.dt-concl--warn { background: #fbf3e3; border-color: #ecd9ab; }
.dt-concl--warn .dt-concl__ic { background: #d38b1a; }
.dt-concl--info { background: #eef2f6; border-color: #cfdbe6; }
.dt-concl--info .dt-concl__ic { background: #3F6178; }

/* tarieven & opslagen */
.set-tarieflayout { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--gap); align-items: stretch; }
.set-opslagen { display: flex; flex-direction: column; gap: 4px; }
.set-opslag { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.set-opslag:last-child { border-bottom: none; }
.set-opslag__l b { font-size: 13px; font-weight: 500; display: block; }
.set-opslag__l span { font-size: 11px; color: var(--text-3); }
.set-opslag__input { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 11px; background: var(--surface); }
.set-opslag__input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.set-opslag__input input { width: 64px; border: none; background: none; font: inherit; font-size: 15px; font-weight: 600; text-align: right; padding: 9px 0; color: var(--text); outline: none; font-variant-numeric: tabular-nums; }
.set-opslag__pre, .set-opslag__suf { font-size: 13px; color: var(--text-3); }
.set-tarieven { padding: 4px 0 8px; }
.set-tariefrow { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 9px 18px; border-top: 1px solid var(--line); }
.set-tariefrow:first-child { border-top: none; }
.set-tariefnr { font-family: 'Roboto Mono', monospace; font-size: 11px; color: var(--text-3); }
.set-tarieftype { font-size: 12.5px; color: var(--text); }
.set-tariefval { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.set-tariefval i { font-style: normal; font-size: 10.5px; color: var(--text-3); font-weight: 400; }
.set-tariefedit { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.set-tariefedit > span { color: var(--text-3); font-weight: 400; }
.set-tariefedit input { width: 72px; font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--text); }
.set-tariefedit input:focus { outline: none; border-color: var(--brand); }
.set-tariefedit i { font-style: normal; font-size: 10.5px; color: var(--text-3); font-weight: 400; }
/* huisstijl */
.set-hslayout { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--gap); align-items: start; }
.set-hsswatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.set-hssw { display: flex; flex-direction: column; gap: 6px; }
.set-hssw span { height: 52px; border-radius: 10px; border: 1px solid var(--line); }
.set-hssw b { font-size: 12px; font-weight: 600; }
.set-hssw i { font-style: normal; font-family: 'Roboto Mono', monospace; font-size: 10.5px; color: var(--text-3); }
.set-type__big { font-size: 40px; font-weight: 500; letter-spacing: -.02em; }
.set-type__row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; font-size: 15px; color: var(--text-2); }
.set-bedrijf { display: flex; flex-direction: column; }
.set-logo { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.set-logo__mark { width: 42px; height: 42px; border-radius: 11px; background: var(--navy); display: flex; align-items: center; justify-content: center; gap: 3px; }
.set-logo__mark i { width: 9px; height: 9px; border-radius: 999px; border: 2px solid #fff; }
.set-logo b { font-size: 16px; font-weight: 600; display: block; }
.set-logo span { font-size: 12px; color: var(--text-3); }
@media (max-width: 1080px) { .set-medlayout, .set-tarieflayout, .set-hslayout { grid-template-columns: 1fr; } }
/* h21: op een telefoon mag een kolom smaller worden dan zijn inhoud (anders liep de kaart Opslagen & marges over de rand). */
@media (max-width: 600px) { .set-medlayout, .set-tarieflayout, .set-hslayout { grid-template-columns: minmax(0, 1fr); } .set-opslag { flex-wrap: wrap; } }

/* ---- contract-detailpopup (inkoop) ----------------------- */
.cpop__overlay { position: fixed; inset: 0; z-index: 90; background: rgba(15,30,40,.42); display: flex; align-items: flex-start; justify-content: center; padding: 40px 24px; overflow-y: auto; animation: fade .15s ease; }
.cpop { width: min(1080px, 100%); background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; animation: popIn .2s cubic-bezier(.2,.7,.2,1); }
@keyframes popIn { from { transform: translateY(12px) scale(.99); opacity: .7; } to { transform: none; opacity: 1; } }
.cpop__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 26px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.cpop__title { font-size: 23px; font-weight: 500; letter-spacing: -.02em; margin: 6px 0 10px; }
.cpop__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.cpop__chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--line-strong); padding: 4px 11px; border-radius: 999px; }
.cpop__chip--ok { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 30%, transparent); background: var(--brand-soft); }
.cpop__chip--open { color: var(--amber-tekst); border-color: color-mix(in srgb, var(--amber) 30%, transparent); background: color-mix(in srgb, var(--amber) 10%, transparent); }
.cpop__x { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--text-3); flex-shrink: 0; }
.cpop__x:hover { background: var(--line); color: var(--text); }
.cpop__body { padding: 22px 26px 26px; max-height: calc(100vh - 220px); overflow-y: auto; }
.cpop__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.cpop__kpi { border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; background: var(--bg-2); display: flex; flex-direction: column; gap: 3px; }
.cpop__kpi span { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.cpop__kpi b { font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cpop__cols { display: grid; grid-template-columns: 1fr; gap: 24px; }
.cpop__sec { margin-bottom: 22px; }
.cpop__sech { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 11px; }
.cpop__sech > svg { color: var(--text-3); }
.cpop__sech em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); margin-left: 2px; }
.cpop__scope { font-size: 13px; color: var(--text-2); line-height: 1.6; margin: 0; }
.cpop__posten { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.cpop__prow { display: grid; grid-template-columns: 1fr 120px 110px; gap: 12px; align-items: center; padding: 9px 13px; border-top: 1px solid var(--line); }
.cpop__prow:first-child { border-top: none; }
.cpop__prow--h { background: var(--bg-2); }
.cpop__prow--h span { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); text-align: right; }
.cpop__prow--h span:nth-child(1) { text-align: left; }
.cpop__pcode { font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 600; color: var(--navy); }
.cpop__poms { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpop__pnum { font-size: 11.5px; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }
.cpop__pbed { font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.cpop__prow--sum { background: var(--bg-2); }
.cpop__prow--sum span:nth-child(2) { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.cpop__empty { padding: 16px 13px; font-size: 12px; color: var(--text-3); }
.cpop__term { display: flex; flex-direction: column; gap: 7px; }
.cpop__trow { display: grid; grid-template-columns: 26px 1fr 50px 100px; gap: 12px; align-items: center; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; }
.cpop__tnr { width: 24px; height: 24px; border-radius: 7px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cpop__tmain b { font-size: 12.5px; font-weight: 500; display: block; }
.cpop__tmain i { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.cpop__tpct { font-size: 12px; font-weight: 600; color: var(--text-2); text-align: right; }
.cpop__tbed { font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
/* betaaltermijnen — bewerkbaar met 100%-validatie */
.cpop__trow--edit { grid-template-columns: 26px 1fr 78px 100px 28px; }
.cpop__tmedit, .cpop__tnedit { width: 100%; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: 7px; padding: 6px 8px; font: inherit; font-size: 12.5px; background: var(--surface); color: var(--text); }
.cpop__tnedit { margin-top: 4px; font-size: 11px; color: var(--text-2); }
.cpop__tmedit:focus, .cpop__tnedit:focus, .cpop__tpctedit input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.cpop__tpctedit { display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
.cpop__tpctedit input { width: 52px; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: 7px; padding: 6px 7px; font: inherit; font-size: 12.5px; font-weight: 600; text-align: right; background: var(--surface); color: var(--text); font-variant-numeric: tabular-nums; }
.cpop__tpctedit i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--text-3); }
.cpop__trow--ttot { background: var(--bg-2); }
.cpop__trow--ttot.is-bad { border-color: color-mix(in srgb, var(--neg) 45%, var(--line)); background: color-mix(in srgb, var(--neg) 6%, var(--surface)); }
.cpop__trow--ttot.is-ok { border-color: color-mix(in srgb, var(--pos) 38%, var(--line)); }
.cpop__trow--ttot .cpop__tmain i { color: var(--neg); font-weight: 500; }
.cpop__termwarn { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding: 9px 12px; border-radius: 9px; font-size: 12px; line-height: 1.45; color: var(--neg); background: color-mix(in srgb, var(--neg) 9%, transparent); border: 1px solid color-mix(in srgb, var(--neg) 26%, transparent); }
.cpop__termwarn b { font-weight: 700; }
/* gunning-paneel (herontworpen) */
.cpop__gun2 { margin-top: 18px; border: 1px solid var(--line-strong); border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 4%, var(--surface)), var(--surface)); overflow: hidden; }
.cgun__top { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.cgun__title { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.cgun__ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.cgun__title b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); }
.cgun__title span { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.cgun__status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; flex-shrink: 0; }
.cgun__status.is-ok { color: var(--pos-tekst); background: color-mix(in srgb, var(--pos) 13%, transparent); }
.cgun__status.is-open { color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 13%, transparent); }
.cgun__summary { display: flex; align-items: center; gap: 26px; padding: 15px 18px; flex-wrap: wrap; }
.cgun__sumi span { display: block; font-size: 11px; color: var(--text-3); margin-bottom: 3px; }
.cgun__sumi b { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cgun__edit { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--brand); background: var(--brand-soft); border: 0; padding: 9px 15px; border-radius: 9px; cursor: pointer; }
.cgun__edit:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.cgun__form { padding: 16px 18px; }
.cgun__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cgun__field span { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.cgun__field select, .cgun__money { width: 100%; box-sizing: border-box; height: 42px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); font: inherit; font-size: 13.5px; color: var(--text); }
.cgun__field select { padding: 0 12px; cursor: pointer; }
/* h43: een los invoerveld in een formulierveld (Naam, Start, Gereed in Nieuwe taak) had geen
   eigen stijl en bleef op browserbreedte staan, ook op de telefoon; nu gelijk aan de keuzelijst */
.cgun__field > input:not([type="checkbox"]):not([type="radio"]) { width: 100%; min-width: 0; box-sizing: border-box; height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); font: inherit; font-size: 13.5px; color: var(--text); }
.cgun__field > input:not([type="checkbox"]):not([type="radio"]):focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.cgun__money { display: flex; align-items: center; padding: 0 12px; gap: 6px; }
.cgun__money > span { font-size: 14px; color: var(--text-3); margin: 0; }
.cgun__money input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); outline: none; font-variant-numeric: tabular-nums; }
.cgun__field select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.cgun__money:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.cgun__compare { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 13px 15px; border-radius: 11px; background: var(--bg-2); flex-wrap: wrap; }
.cgun__cmpi span { display: block; font-size: 10.5px; color: var(--text-3); margin-bottom: 2px; }
.cgun__cmpi b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cgun__delta { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; padding: 7px 13px; border-radius: 9px; }
.cgun__delta b { font-size: 14px; font-variant-numeric: tabular-nums; }
.cgun__delta.is-win { color: var(--pos-tekst); background: color-mix(in srgb, var(--pos) 12%, transparent); }
.cgun__delta.is-loss { color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, transparent); }
.cgun__delta.is-none { color: var(--text-3); background: transparent; }
.cgun__foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.cgun__intrek { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--neg); background: none; border: 1px solid color-mix(in srgb, var(--neg) 30%, var(--line)); padding: 9px 14px; border-radius: 9px; cursor: pointer; }
.cgun__intrek:hover { background: color-mix(in srgb, var(--neg) 8%, transparent); }
.cgun__cancel { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: none; border: 0; padding: 9px 10px; cursor: pointer; }
.cgun__cancel:hover { color: var(--text); }
.cgun__go { margin-left: auto; }
@media (max-width: 720px) { .cgun__fields { grid-template-columns: 1fr; } }
.cpop__sec--box { background: var(--bg-2); border: 1px solid var(--line); border-radius: 13px; padding: 14px 16px; }
.cpop__vw { display: flex; flex-direction: column; gap: 10px; }
.cpop__vrow b { font-size: 12px; font-weight: 600; display: block; line-height: 1.4; }
.cpop__vrow span { font-size: 11px; color: var(--text-3); }
.cpop__gun { margin-top: 6px; border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line)); border-radius: 14px; overflow: hidden; }
.cpop__gunh { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--brand-soft); }
.cpop__gunh b { font-size: 14px; font-weight: 600; }
.cpop__toggle { font: inherit; font-size: 12px; font-weight: 600; color: var(--brand); padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); border-radius: 8px; background: var(--surface); }
.cpop__gunbody { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 14px; align-items: flex-end; padding: 16px 18px; }
.cpop__field { display: flex; flex-direction: column; gap: 6px; }
.cpop__field span { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.cpop__field select { font: inherit; font-size: 13px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--text); }
.cpop__money { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 12px; background: var(--surface); }
.cpop__money span { font-size: 14px; color: var(--text-3); }
.cpop__money input { flex: 1; border: none; background: none; font: inherit; font-size: 15px; padding: 9px 0; color: var(--text); outline: none; }
.cpop__res { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 9px; white-space: nowrap; }
.cpop__res span { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.cpop__res b { font-size: 15px; font-weight: 600; }
.cpop__res.is-win { background: color-mix(in srgb, var(--pos) 10%, transparent); } .cpop__res.is-win b { color: var(--pos-tekst); }
.cpop__res.is-loss { background: color-mix(in srgb, var(--neg) 10%, transparent); } .cpop__res.is-loss b { color: var(--neg); }
.cpop__gunfoot { display: flex; align-items: center; gap: 10px; padding: 0 18px 16px; }
.cpop__danger { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--neg); padding: 9px 14px; border: 1px solid color-mix(in srgb, var(--neg) 30%, transparent); border-radius: 9px; }
.cpop__danger:hover { background: color-mix(in srgb, var(--neg) 8%, transparent); }
@media (max-width: 920px) { .cpop__cols { grid-template-columns: 1fr; } .cpop__kpis { grid-template-columns: repeat(2, 1fr); } .cpop__gunbody { grid-template-columns: 1fr; } }

/* ---- contractpopup: bewerk-modus, documenten, calc-picker ---- */
.cpop__headact { display: flex; align-items: center; gap: 10px; }
.cpop__editbtn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); }
.cpop__editbtn:hover { border-color: var(--brand); color: var(--brand); }
.cpop__editbtn.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.cpop__editbar { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--text-2); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); border-radius: 10px; padding: 9px 13px; margin-bottom: 16px; }
.cpop__editbar > svg { color: var(--brand); }
.cpop__editbar button { margin-left: auto; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--brand); text-decoration: underline; }
.cpop__add { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11px; font-weight: 600; color: var(--brand); background: var(--brand-soft); padding: 4px 10px; border-radius: 7px; }
.cpop__add:hover { background: color-mix(in srgb, var(--brand) 15%, transparent); }
.cpop__scopeedit { width: 100%; font: inherit; font-size: 13px; line-height: 1.6; color: var(--text); padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); resize: vertical; }
.cpop__scopeedit:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.cpop__prow--edit { grid-template-columns: 1fr 132px 110px 30px; }
.cpop__prow--h { grid-template-columns: 1fr 120px 110px; }
.cpop__prow--hedit { grid-template-columns: 1fr 132px 110px 30px; }
.cpop__pedit { font: inherit; font-size: 12.5px; color: var(--text); padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); width: 100%; min-width: 0; }
.cpop__pedit:focus { outline: none; border-color: var(--brand); }
.cpop__qtyedit { display: flex; gap: 5px; min-width: 0; }
.cpop__qtyedit input { font: inherit; font-size: 12px; padding: 6px 6px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--text); width: 100%; min-width: 0; text-align: right; }
.cpop__qtyedit input:focus { outline: none; border-color: var(--brand); }
.cpop__qtyedit .cpop__ehedit { flex: 0 0 42px; text-align: center; }
.cpop__pbedit { font: inherit; font-size: 12px; text-align: right; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--text); width: 100%; min-width: 0; }
.cpop__pbedit:focus { outline: none; border-color: var(--brand); }
.cpop__addgrp { margin-left: auto; display: inline-flex; gap: 8px; }
.cpop__addgrp .cpop__add { margin-left: 0; }
.cpop__add--alt { background: var(--bg-2); color: var(--text-2); }
.cpop__add--alt:hover { background: var(--line); color: var(--text); }
.cpop__docstd { display: inline-block; margin-left: 8px; font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); background: var(--bg-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 999px; vertical-align: middle; }
.cpop__doclock { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--pos); flex-shrink: 0; }

/* kostenoverzicht (financiën-tab) */
.kov-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: var(--gap); align-items: stretch; }
@media (max-width: 1180px) { .kov-cats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .kov-cats { grid-template-columns: 1fr 1fr; } }
.kov-cat { text-align: left; border: 1px solid var(--line); border-radius: 13px; padding: 14px 15px; background: var(--surface); transition: all .14s; }
.kov-cat:hover { border-color: var(--text-3); box-shadow: var(--shadow); transform: translateY(-2px); }
.kov-cat__h { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.kov-cat__dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.kov-cat__lbl { font-size: 11.5px; font-weight: 600; color: var(--text-2); line-height: 1.2; }
.kov-cat__v { font-size: 21px; font-weight: 300; letter-spacing: -.02em; }
.kov-cat__bar { display: flex; height: 6px; border-radius: 4px; overflow: hidden; background: var(--track); margin: 11px 0 7px; }
.kov-cat__bar i { display: block; height: 100%; }
.kov-cat__leg { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--text-3); }
.kov-cat__leg b { font-weight: 600; color: var(--text-2); }
.kov-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 18px 14px; }
.kov-seg { display: inline-flex; gap: 3px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; margin-left: auto; }
.kov-seg button { font: inherit; font-size: 12px; font-weight: 600; color: var(--text-3); padding: 6px 12px; border-radius: 6px; }
.kov-seg button.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.kov-tblwrap { overflow-x: auto; padding: 0 8px 4px; }
.kov-tbl { min-width: 820px; }
.kov-row { display: grid; grid-template-columns: 74px 60px 1.35fr 1.7fr 78px 104px 126px 22px; gap: 12px; align-items: center; padding: 11px 12px; border-top: 1px solid var(--line); }
.kov-row--btn { width: 100%; background: none; border: none; border-top: 1px solid var(--line); cursor: pointer; text-align: left; font: inherit; transition: background .12s; }
.kov-row--btn:hover { background: var(--bg-2); }
.kov-go { display: flex; justify-content: flex-end; color: var(--text-3); }
.kov-stat--mid { color: var(--steel); }
.kov-search { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); min-width: 240px; }
.kov-search input { border: none; outline: none; background: none; font: inherit; font-size: 12.5px; color: var(--text); flex: 1; min-width: 0; }
.kov-search > svg { color: var(--text-3); flex-shrink: 0; }
.kov-sort { font: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); }
.kov-catdot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; flex-shrink: 0; }
.kov-contract { font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 600; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="dark"] .kov-contract { color: color-mix(in srgb, var(--steel) 55%, #fff); }
.kov-voldaan { display: flex; align-items: center; gap: 8px; }
.kov-vbar { flex: 1; height: 6px; border-radius: 4px; background: var(--track); overflow: hidden; min-width: 36px; }
.kov-vbar i { display: block; height: 100%; background: var(--pos); }
.kov-voldaan em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--text-2); min-width: 30px; text-align: right; }
.kov-row--h { border-top: none; }
.kov-row--h span { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.kov-row--h .r { text-align: right; }
.kov-ref { font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 600; color: var(--text-3); }
.kov-dat { font-size: 11.5px; color: var(--text-2); }
.kov-wie { min-width: 0; }
.kov-wie b { font-size: 12.5px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kov-wie span { font-size: 10.5px; color: var(--text-3); }
.kov-oms { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kov-cattag { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; color: var(--text-2); }
.kov-cattag i { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.kov-bedrag { text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kov-stat { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.kov-stat--ok { color: var(--pos-tekst); background: color-mix(in srgb, var(--pos) 12%, transparent); }
.kov-stat--open { color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 13%, transparent); }

/* planning · voortgang-slider + interne kostentabel */
.ptbl__progview { display: flex; align-items: center; gap: 8px; width: 100%; cursor: pointer; border-radius: 5px; padding: 2px 5px; margin: -2px -5px; transition: background .12s; }
.ptbl__progview:hover { background: var(--bg-2); }
.ptbl__progedit { display: flex; align-items: center; gap: 8px; width: 100%; }
.ptbl__progedit input[type=range] { flex: 1; min-width: 40px; height: 6px; cursor: pointer; }
.ptbl__progedit i { font-style: normal; font-size: 11px; font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
.pki { padding: 4px 8px 10px; overflow-x: auto; }
.pki__row { display: grid; gap: 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--line); min-width: 720px; }
.pki__row--h { border-top: none; }
.pki__row--h span { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.pki__row .r, .pki__num { text-align: right; }
.pki__row--grp { background: var(--bg-2); }
.pki__grpname { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.pki__row--grp .r { font-size: 12px; font-weight: 600; color: var(--text-2); }
.pki__tnaam { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pki__cell { font-size: 12px; color: var(--text-2); }
.pki__num { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-2); }
.pki__row--tot { background: var(--bg-2); border-top: 2px solid var(--line-strong); font-weight: 700; }
.pki__row--tot span { font-size: 12.5px; }
.pki__row--tot .r { font-size: 13px; }
.dstart-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--gap); align-items: stretch; }
.bestl { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.bestl__row { display: grid; grid-template-columns: 1.7fr 1.2fr 80px 68px 110px; gap: 10px; align-items: center; padding: 10px 13px; border-top: 1px solid var(--line); }
.bestl__row:first-child { border-top: none; }
.bestl__row--h { background: var(--bg-2); }
.bestl__row--h span { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.bestl__row--h .r { text-align: right; }
.bestl__mat { font-size: 12.5px; font-weight: 500; }
.bestl__lev { font-size: 12px; color: var(--text-2); }
.bestl__num { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.bestl__op { font-size: 11.5px; color: var(--text-3); }
.bestl__btn { font: inherit; font-size: 11.5px; font-weight: 600; color: #fff; background: var(--brand); padding: 5px 12px; border-radius: 7px; }
.bestl__btn:hover { filter: brightness(1.06); }
.bestl .r { text-align: right; }
.bestl .kov-stat { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: capitalize; }
.cag { padding: 4px 8px 8px; }
.cag-row { display: grid; grid-template-columns: 150px 1.6fr 130px 90px 90px 220px; gap: 12px; align-items: center; padding: 11px 12px; border-top: 1px solid var(--line); }
.cag-row--h { border-top: none; background: var(--bg-2); border-radius: 8px; }
.cag-row--h span { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.cag-row--h .c { text-align: center; }
.cag .c { text-align: center; }
.cag-tijd { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cag-tit { font-size: 12.5px; }
.cag-type { font-size: 11.5px; color: var(--text-2); }
.cag-rec { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--signal); }
.cag-rec__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 20%, transparent); }
.cag-none { color: var(--text-3); }
.cag-aan { font-size: 11px; font-weight: 600; color: var(--pos-tekst); }
.cag-afw { font-size: 11px; font-weight: 600; color: var(--text-3); }
.cag-vsl { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--pos-tekst); background: color-mix(in srgb, var(--pos) 12%, transparent); padding: 4px 10px; border-radius: 999px; }
.cag-wacht { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--steel); }
.cag-vsl--btn { cursor: pointer; transition: background .12s, box-shadow .12s; }
.cag-vsl--btn:hover { background: color-mix(in srgb, var(--pos) 22%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pos) 35%, transparent) inset; }
@media (max-width: 980px) { .cag-row { grid-template-columns: 120px 1fr 110px; } .cag-row .c, .cag-row > span:last-child { display: none; } }

/* ── projectcommunicatie · opnamebron + automatisering ── */
.cag-src { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; }
.cag-src--dig { color: var(--brand); }
.cag-src--tel { color: var(--steel); }
.cag-src svg { flex-shrink: 0; }

/* automatiserings-pipeline */
.comm-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; margin-bottom: var(--gap); }
.comm-flow__step { display: flex; align-items: center; gap: 11px; padding: 12px 14px; position: relative; }
.comm-flow__step:not(:last-child)::after { content: ''; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-top: 1.5px solid var(--line-strong); border-right: 1.5px solid var(--line-strong); rotate: 45deg; z-index: 1; background: var(--surface); }
.comm-flow__ic { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.comm-flow__tx { min-width: 0; }
.comm-flow__tx b { font-size: 12.5px; font-weight: 600; display: block; line-height: 1.2; }
.comm-flow__tx span { font-size: 10.5px; color: var(--text-3); }
@media (max-width: 880px) { .comm-flow { grid-template-columns: 1fr 1fr; } }

/* deelbare portaal-link (copy-row) */
.comm-link { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--line-strong); }
.comm-link__ic { width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--pos) 14%, transparent); color: var(--pos); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.comm-link__main { flex: 1; min-width: 0; }
.comm-link__main b { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; display: block; }
.comm-link__url { font-size: 12px; font-family: 'Roboto Mono', monospace; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comm-link__btn { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: 8px; padding: 6px 11px; flex-shrink: 0; transition: background .12s; }
.comm-link__btn:hover { background: var(--brand-soft); }
.comm-link__btn.is-done { color: var(--pos-tekst); border-color: color-mix(in srgb, var(--pos) 36%, var(--line)); }

/* opnamemethode-kaarten (extends np-seg) */
.comm-method__note { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--text-2); line-height: 1.5; margin: 10px 0 4px; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); }
.comm-method__note svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.comm-upload { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-2); border: 1px dashed var(--line-strong); border-radius: 9px; padding: 9px 13px; margin-top: 9px; transition: all .12s; }
.comm-upload:hover { border-color: var(--brand); color: var(--brand); }

/* deelnemer-chips */
.comm-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.comm-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--text-2); padding: 6px 11px; border: 1px solid var(--line-strong); border-radius: 999px; transition: all .12s; }
.comm-chip:hover { border-color: var(--brand); }
.comm-chip__dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.comm-chip.is-on { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.comm-chip__x { display: inline-flex; align-items: center; justify-content: center; margin-left: 3px; color: var(--brand); opacity: .55; }
.comm-chip__x:hover { opacity: 1; }
.comm-guest { display: grid; grid-template-columns: 1.1fr auto 1.1fr auto; gap: 8px; align-items: center; margin-top: 10px; }
.comm-guest input { padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--bg-2); color: var(--text); font: inherit; font-size: 13px; min-width: 0; }
.comm-guest__seg { display: inline-flex; gap: 4px; }
.comm-guest__seg button { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-3); border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 10px; white-space: nowrap; }
.comm-guest__seg button.is-on { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.comm-guest__add { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #fff; background: var(--brand); border-radius: 9px; padding: 9px 13px; white-space: nowrap; }
.comm-guest__add:disabled { opacity: .4; }
@media (max-width: 720px) { .comm-guest { grid-template-columns: 1fr; } .comm-guest__seg { justify-content: center; } }

/* verslag · tabs, bewerken & transcriptie */
.comm-gasten { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
.comm-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 4px 0 14px; }
.comm-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; font-size: 12.5px; font-weight: 600; color: var(--text-2); border-bottom: 2px solid transparent; }
.comm-tab.is-on { color: var(--brand); border-bottom-color: var(--brand); }
.comm-tab:hover { color: var(--text); }
.comm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 9px; }
.comm-toolbar .comm-doc__sec { margin: 0; }
.comm-editbtn { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: 8px; padding: 6px 11px; }
.comm-editbtn.is-on { color: #fff; background: var(--brand); border-color: var(--brand); }
.comm-summary { width: 100%; font: inherit; font-size: 13px; line-height: 1.55; color: var(--text); padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg-2); resize: vertical; min-height: 76px; }
.comm-summary--ro { color: var(--text-2); margin: 0; }
.comm-erow { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.comm-erow__chk { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.comm-erow__chk.is-on { background: var(--brand); border-color: var(--brand); }
.comm-erow input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-2); color: var(--text); }
.comm-erow.is-off input { opacity: .5; }
.comm-erow__rm { color: var(--text-3); display: flex; flex-shrink: 0; padding: 4px; }
.comm-erow__rm:hover { color: var(--neg); }
.comm-addrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--brand); padding: 8px 0 2px; }
.comm-doc__list li.is-off { opacity: .4; text-decoration: line-through; }
.comm-actedit { display: grid; grid-template-columns: 20px 1fr 24px; gap: 9px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.comm-actedit__f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.comm-actedit__sub { display: grid; grid-template-columns: 1fr 96px auto; gap: 7px; align-items: center; }
.comm-actedit input { font: inherit; font-size: 12.5px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-2); color: var(--text); min-width: 0; }
.comm-actedit__done { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line-strong); color: var(--text-3); white-space: nowrap; }
.comm-actedit__done.is-on { color: var(--pos-tekst); border-color: color-mix(in srgb, var(--pos) 40%, var(--line)); background: color-mix(in srgb, var(--pos) 10%, transparent); }
.comm-tr { display: grid; grid-template-columns: 46px 1fr; gap: 11px; padding: 10px 0; border-top: 1px solid var(--line); }
.comm-tr:first-child { border-top: none; }
.comm-tr__t { font-size: 11px; font-family: 'Roboto Mono', monospace; color: var(--text-3); padding-top: 2px; }
.comm-tr__spk { font-size: 12px; font-weight: 600; color: var(--brand); display: block; margin-bottom: 2px; }
.comm-tr__txt { font-size: 13px; color: var(--text-2); line-height: 1.55; }
.comm-transnote { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--text-2); line-height: 1.5; margin-bottom: 4px; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); }
.comm-transnote svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }

/* verslagsjablonen */
.comm-tpls { display: flex; flex-direction: column; gap: 10px; }
.comm-tpl { padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 13px; background: var(--bg-2); }
.comm-tpl__top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.comm-tpl__ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.comm-tpl__top b { font-size: 13.5px; font-weight: 600; flex: 1; }
.comm-tpl__secs { display: flex; flex-wrap: wrap; gap: 6px; }
.comm-tpl__sec { font-size: 11px; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; }
.comm-tpl__foot { display: flex; align-items: center; gap: 8px; margin-top: 11px; font-size: 11px; color: var(--text-3); }

/* ── Kwaliteit & Wkb ── */
.wkb-split { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--gap); align-items: start; margin-top: var(--gap); }
@media (max-width: 1180px) { .wkb-split { grid-template-columns: 1fr; } }
.wkb-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.wkb-tablewrap { padding: 4px 0 8px; }
.wkb-row { display: grid; grid-template-columns: 2.2fr 78px 2fr 100px 110px; gap: 14px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); }
.wkb-row--h { border-top: none; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); padding-top: 8px; padding-bottom: 8px; }
.wkb-risk { display: flex; flex-direction: column; gap: 3px; }
.wkb-risk__cat { font-size: 10.5px; font-style: normal; font-weight: 600; color: var(--brand); text-transform: uppercase; letter-spacing: .03em; }
.wkb-risk b { font-size: 12.5px; font-weight: 500; line-height: 1.35; }
.wkb-gk { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: capitalize; }
.wkb-cell { font-size: 12px; color: var(--text-2); line-height: 1.4; }
.wkb-cell i { display: block; font-style: normal; font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
@media (max-width: 980px) { .wkb-row { grid-template-columns: 1.6fr 64px 110px; } .wkb-row > span:nth-child(3), .wkb-row > span:nth-child(4) { display: none; } }

.wkb-keur { padding: 6px 0 10px; }
.wkb-keurrow { display: grid; grid-template-columns: 190px 1fr auto; gap: 16px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line); }
.wkb-keurrow:first-child { border-top: none; }
.wkb-keur__moment { display: flex; align-items: center; gap: 10px; }
.wkb-keur__moment b { font-size: 13px; font-weight: 600; display: block; }
.wkb-keur__moment i { font-size: 11px; font-style: normal; color: var(--text-3); }
.wkb-keur__main b { font-size: 12.5px; font-weight: 500; display: block; line-height: 1.4; }
.wkb-keur__main span { font-size: 11px; color: var(--text-3); }
.wkb-keur__done { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--pos-tekst); white-space: nowrap; }
.wkb-keur__wacht { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.wkb-keur__btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #fff; background: var(--brand); border-radius: 9px; padding: 8px 14px; white-space: nowrap; }
.wkb-keur__btn:hover { filter: brightness(1.06); }
.wkb-foot { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--text-3); line-height: 1.5; padding: 14px 18px 4px; }
.wkb-foot svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }

.wkb-dossier { padding: 8px 0; }
.wkb-dos { display: flex; align-items: center; gap: 13px; padding: 12px 18px; border-top: 1px solid var(--line); }
.wkb-dos:first-child { border-top: none; }
.wkb-dos__chk { width: 21px; height: 21px; border-radius: 6px; border: 1.5px solid; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.wkb-dos__main { flex: 1; min-width: 0; }
.wkb-dos__main b { font-size: 12.5px; font-weight: 500; display: block; }
.wkb-dos__main span { font-size: 11px; color: var(--text-3); }
.wkb-dosbar { display: flex; align-items: center; gap: 12px; padding: 16px 18px 6px; }
.wkb-dosbar__track { flex: 1; height: 7px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.wkb-dosbar__track span { display: block; height: 100%; border-radius: 999px; background: var(--brand); transition: width .4s; }
.wkb-dosbar > span { font-size: 11.5px; color: var(--text-2); white-space: nowrap; }

.wkb-borger__ring { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-bottom: 16px; }
.wkb-borger__pct b { font-size: 26px; font-weight: 700; line-height: 1; }
.wkb-borger__pct span { font-size: 12px; color: var(--text-3); }
.wkb-borger__ringl { font-size: 11px; color: var(--text-3); text-align: center; line-height: 1.3; }
.wkb-borger__txt p { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin: 0 0 14px; }
.wkb-borger__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.wkb-borger__stats div { background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; }
.wkb-borger__stats b { font-size: 20px; font-weight: 700; display: block; line-height: 1; }
.wkb-borger__stats span { font-size: 11px; color: var(--text-3); }
.wkb-borger__verdict { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--text-2); line-height: 1.5; padding: 11px 13px; border-radius: 10px; background: var(--brand-soft); }
.wkb-borger__verdict svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.wkb-exprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); }
.wkb-expwarn { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--amber-tekst); line-height: 1.5; margin-top: 13px; padding: 11px 13px; border-radius: 10px; background: color-mix(in srgb, var(--amber) 10%, transparent); }
.wkb-expwarn svg { flex-shrink: 0; margin-top: 1px; }

/* ── Personeel & Veiligheid ── */
.prs-split { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--gap); align-items: start; margin-top: var(--gap); }
@media (max-width: 1180px) { .prs-split { grid-template-columns: 1fr; } }
.prs-list { padding: 6px 0 10px; }
.prs-row { display: grid; grid-template-columns: 1.5fr 1.2fr 1.2fr 150px; gap: 14px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); }
.prs-row:first-child { border-top: none; }
.prs-row--h { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); padding-top: 9px; padding-bottom: 9px; }
.prs-pers { display: flex; align-items: center; gap: 10px; }
.prs-av { width: 30px; height: 30px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.prs-pers b { font-size: 12.5px; font-weight: 600; display: block; }
.prs-pers i { font-size: 11px; font-style: normal; color: var(--text-3); }
.prs-cell { font-size: 12.5px; color: var(--text); }
.prs-cell b { font-weight: 600; }
.prs-cell i { display: block; font-style: normal; font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.prs-vtype, .prs-ernst { font-weight: 600; text-transform: capitalize; }
.prs-mini { font-size: 11px; font-weight: 600; color: var(--text-2); border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 10px; white-space: nowrap; }
.prs-mini:hover { border-color: var(--brand); color: var(--brand); }
.prs-mini--brand { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.prs-tbrow { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 13px; align-items: center; padding: 13px 18px; border-top: 1px solid var(--line); }
.prs-tbrow:first-child { border-top: none; }
.prs-tbic { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.prs-tbmain { min-width: 0; }
.prs-tbmain b { font-size: 12.5px; font-weight: 600; display: block; line-height: 1.35; }
.prs-tbmain span { font-size: 11px; color: var(--text-3); }
.prs-tbatt { text-align: center; white-space: nowrap; }
.prs-tbatt b { font-size: 14px; font-weight: 700; display: block; line-height: 1; }
.prs-tbatt span { font-size: 10px; color: var(--text-3); }
.prs-foot { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--text-3); line-height: 1.5; padding: 14px 18px 4px; }
.prs-foot svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.prs-ring { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; }
.prs-ring__c b { font-size: 26px; font-weight: 700; line-height: 1; }
.prs-ring__c span { font-size: 11px; color: var(--text-3); }
.prs-ringleg { display: flex; flex-direction: column; gap: 9px; }
.prs-ringleg div { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-2); }
.prs-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
@media (max-width: 980px) { .prs-row, .prs-row--h { grid-template-columns: 1.4fr 1fr 110px !important; } .prs-row > span:nth-child(3):not(:last-child) { display: none; } }

/* ── Personeel: register, dossier-drawer, bedrijfsmiddelen ── */
.prs-row--btn { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; }
.prs-row--btn:hover { background: var(--bg-2); }
/* recruitment-rijen — eigen grid (niet overschreven door de prs-row 980px !important) */
.rec-row { display: grid; gap: 14px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; }
.rec-row:first-child { border-top: none; }
.rec-row--btn { cursor: pointer; }
.rec-row--btn:hover { background: var(--bg-2); }
.rec-row--h { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
@media (max-width: 980px) {
  .rec-row, .rec-row--h { grid-template-columns: 1.4fr 2fr 84px !important; }
  .rec-row > span:nth-child(2) { display: none; }
}
@media (max-width: 620px) {
  .rec-row, .rec-row--h { grid-template-columns: 1fr !important; }
  .rec-row > span:nth-child(2), .rec-row > span:nth-child(4) { display: none; }
}
.prs-av--off { opacity: .5; }
.prs-av--lg { width: 46px; height: 46px; border-radius: 12px; font-size: 15px; }
.prs-pills { display: inline-flex; gap: 6px; }
.prs-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: 7px; padding: 2px 7px; }
.prs-pill svg { color: var(--text-3); }
.prs-toolbar { display: flex; align-items: center; gap: 9px; padding: 12px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.prs-search { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--bg-2); }
.prs-search:focus-within { border-color: var(--brand); }
.prs-search svg { color: var(--text-3); flex-shrink: 0; }
.prs-search input { flex: 1; min-width: 0; border: none; background: none; font: inherit; font-size: 13px; color: var(--text); outline: none; }
.prs-search button { color: var(--text-3); display: flex; }
.prs-facet { font: inherit; font-size: 12px; color: var(--text-2); padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--bg-2); }
.prs-facet:focus { border-color: var(--brand); outline: none; }
.prs-catchips { display: flex; flex-wrap: wrap; gap: 7px; }
.prs-catchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 12px; }
.prs-catchip.is-on { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.prs-catchip svg { flex-shrink: 0; }
.prs-grouphd { display: flex; align-items: center; gap: 8px; padding: 11px 18px 7px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.prs-grouphd svg { color: var(--brand); }
.prs-grouphd em { font-style: normal; color: var(--text-3); background: var(--bg-2); border-radius: 6px; padding: 1px 7px; font-size: 10.5px; }
.prs-midic { width: 32px; height: 32px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.prs-midic--lg { width: 46px; height: 46px; border-radius: 12px; background: var(--bg-2); }
.prs-empty { padding: 32px 18px; text-align: center; color: var(--text-3); font-size: 12.5px; }
.prs-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; margin-bottom: 13px; border: 1.5px dashed var(--line-strong); border-radius: 12px; background: var(--bg-2); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.prs-drop:hover { border-color: var(--brand); background: var(--brand-soft); }
.prs-drop svg { color: var(--brand); margin-bottom: 4px; }
.prs-drop b { font-size: 12.5px; font-weight: 600; color: var(--text); }
.prs-drop span { font-size: 11px; color: var(--text-3); }
.prs-airec { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; text-align: center; }
.prs-airec__dot { width: 60px; height: 60px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; animation: prspulse 1.3s ease-in-out infinite; }
@keyframes prspulse { 0%,100% { box-shadow: 0 0 0 0 var(--brand-soft); } 50% { box-shadow: 0 0 0 12px transparent; } }
.prs-airec b { font-size: 15px; }
.prs-airec__steps { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-2); }
/* dossier-drawer */
.prs-drawer { width: min(580px, 96vw); }
.prs-drawer__tabs { display: flex; gap: 3px; padding: 0 18px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.prs-dtab { padding: 11px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-3); border-bottom: 2px solid transparent; white-space: nowrap; }
.prs-dtab.is-on { color: var(--brand); border-bottom-color: var(--brand); }
.prs-dtab:hover { color: var(--text); }
.prs-kvgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 22px; }
.prs-kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.prs-kv span { color: var(--text-3); }
.prs-kv b { font-weight: 600; text-align: right; }
.prs-dlist { display: flex; flex-direction: column; }
.prs-drow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.prs-drow:first-child { border-top: none; }
.prs-drow b { font-size: 12.5px; font-weight: 600; display: block; }
.prs-drow span { font-size: 11px; color: var(--text-3); }
.prs-drow__r { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--text-2); }
.prs-midbanner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.prs-midbanner div { background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; }
.prs-midbanner span { font-size: 11px; color: var(--text-3); display: block; }
.prs-midbanner b { font-size: 14px; font-weight: 600; display: block; margin-top: 3px; }
.prs-midsec { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin: 18px 0 10px; }
.prs-midhist { display: flex; flex-direction: column; }
.prs-histrow { display: flex; gap: 11px; padding: 8px 0; }
.prs-histdot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-top: 5px; flex-shrink: 0; }
.prs-histrow b { font-size: 12.5px; font-weight: 500; display: block; }
.prs-histrow span { font-size: 11px; color: var(--text-3); }
.prs-saldo { padding: 4px 0; }
.prs-saldobar { display: flex; height: 12px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.prs-saldobar span { display: block; height: 100%; }
.prs-saldoleg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 11.5px; color: var(--text-2); }
.prs-saldoleg span { display: inline-flex; align-items: center; gap: 6px; }
.prs-saldoleg b { font-weight: 700; color: var(--text); }
.prs-saldoleg i { width: 9px; height: 9px; border-radius: 3px; }
/* gesprekken */
.prs-gesprek { border: 1px solid var(--line-strong); border-radius: 12px; padding: 14px 15px; margin-bottom: 12px; }
.prs-gesprek.is-gepland { border-color: color-mix(in srgb, var(--steel) 40%, var(--line)); background: var(--bg-2); }
.prs-gkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.prs-gkop b { font-size: 13.5px; font-weight: 600; display: block; }
.prs-gkop span { font-size: 11px; color: var(--text-3); }
.prs-terug { background: var(--brand-soft); border-radius: 10px; padding: 10px 12px; margin-bottom: 11px; }
.prs-terug__h { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; }
.prs-terug ul { margin: 0; padding-left: 18px; }
.prs-terug li { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.prs-gsub { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin: 10px 0 6px; }
.prs-gsamen { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin: 8px 0 4px; padding: 9px 11px; border-radius: 9px; background: var(--bg-2); }
.prs-glist { margin: 0; padding-left: 18px; }
.prs-glist li { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.prs-afspraak { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; font-size: 12.5px; color: var(--text); }
.prs-afspraak__chk { width: 18px; height: 18px; border-radius: 6px; background: color-mix(in srgb, var(--pos) 14%, transparent); color: var(--pos); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.prs-afspraak__t { flex: 1; line-height: 1.45; }
.prs-terugchip { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 2px 7px; border-radius: 6px; white-space: nowrap; flex-shrink: 0; }
.prs-gplan { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); margin: 4px 0 0; }
/* carrière */
.prs-carbanner { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-strong); }
.prs-carbanner div { flex: 1; }
.prs-carbanner span { font-size: 11px; color: var(--text-3); display: block; }
.prs-carbanner b { font-size: 14px; font-weight: 600; display: block; margin-top: 3px; }
.prs-carambitie { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin: 13px 0 4px; padding: 11px 13px; border-radius: 10px; background: var(--brand-soft); }
.prs-carambitie svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.prs-doel { display: grid; grid-template-columns: 1.5fr 2fr 40px; gap: 11px; align-items: center; padding: 6px 0; }
.prs-doel__t { font-size: 12.5px; color: var(--text-2); }
.prs-doelbar { height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.prs-doelbar i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.prs-doel em { font-style: normal; font-size: 11.5px; font-weight: 600; text-align: right; }
.prs-beoord { display: flex; flex-wrap: wrap; gap: 9px; }
.prs-beoordchip { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; text-align: center; }
.prs-beoordchip b { font-size: 13px; font-weight: 600; display: block; }
.prs-beoordchip span { font-size: 10.5px; color: var(--text-3); }
/* medewerker-profiel (volledig scherm) */
.prof-hero { display: flex; align-items: center; gap: 18px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--gap); }
.prof-hero__av { width: 60px; height: 60px; border-radius: 16px; font-size: 19px; flex-shrink: 0; }
.prof-hero__main { flex: 1; min-width: 0; }
.prof-hero__naam { font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.prof-hero__meta { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.prof-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.prof-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }
.prof-chip svg { color: var(--text-3); }
.prof-chip--on { color: var(--pos-tekst); border-color: color-mix(in srgb, var(--pos) 32%, var(--line)); }
.prof-chip--off { color: var(--text-3); }
.prof-hero__act { display: flex; gap: 9px; flex-shrink: 0; }
@media (max-width: 900px) { .prof-hero { flex-wrap: wrap; } .prof-hero__act { width: 100%; } }
.prof-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--gap); align-items: start; margin-top: var(--gap); }
.prof-grid--single { grid-template-columns: 1fr; }
.prof-subnav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.prof-subtab { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 9px 14px; border-radius: 9px 9px 0 0; color: var(--text-3); border-bottom: 2.5px solid transparent; margin-bottom: -3px; cursor: pointer; white-space: nowrap; }
.prof-subtab:hover { color: var(--text-2); background: var(--bg-2); }
.prof-subtab.is-on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.prof-subtab__b { font-style: normal; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--amber); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.rec-pipe { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rec-stage { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-3); padding: 3px 8px; border-radius: 7px; background: var(--bg-2); }
.rec-stage.is-on { color: var(--text-2); }
.rec-stage i { font-style: normal; font-weight: 700; font-size: 10px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 7px; background: var(--line-strong); color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; }
.rec-stage.is-on i { background: var(--brand); color: #fff; }
/* bedrijfsmiddelen-groep + recruitment-platform */
.prof-subtab__n { font-style: normal; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 5px; border-radius: 8px; background: var(--bg-2); color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; }
.prof-subtab.is-on .prof-subtab__n { background: var(--brand); color: #fff; }
.rec-kanban { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 1100px) { .rec-kanban { grid-template-columns: repeat(2, 1fr); } }
.rec-col { background: var(--bg-2); border: 1px solid var(--line); border-radius: 13px; padding: 10px; min-height: 120px; }
.rec-col__h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 2px 4px 10px; }
.rec-col__dot { width: 8px; height: 8px; border-radius: 50%; }
.rec-col__h em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; color: var(--text-3); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 0 7px; }
.rec-col__body { display: flex; flex-direction: column; gap: 8px; }
.rec-col__empty { text-align: center; font-size: 12px; color: var(--text-3); padding: 14px 0; }
.rec-card { display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; padding: 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color .14s, box-shadow .14s; }
.rec-card:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.rec-card__top { display: flex; align-items: center; gap: 9px; }
.rec-card__av { width: 30px; height: 30px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rec-card__av--lg { width: 42px; height: 42px; border-radius: 11px; font-size: 14px; }
.rec-card__top b { font-size: 12.5px; font-weight: 600; display: block; }
.rec-card__top span { font-size: 11px; color: var(--text-3); }
.rec-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rec-card__bron { font-size: 10.5px; color: var(--text-3); background: var(--bg-2); padding: 2px 8px; border-radius: 6px; }
.rec-stars { display: inline-flex; gap: 1px; }
.rec-star { font-size: 13px; line-height: 1; color: var(--line-strong); background: none; border: none; padding: 0; cursor: default; }
.rec-star.is-on { color: var(--amber); }
button.rec-star:not(:disabled) { cursor: pointer; }
.rec-row { display: grid; gap: 14px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; }
.rec-row:first-child { border-top: none; }
.rec-row--btn { cursor: pointer; }
.rec-row--btn:hover { background: var(--bg-2); }
.rec-row--h { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
@media (max-width: 980px) { .rec-row, .rec-row--h { grid-template-columns: 1.4fr 2fr 84px !important; } .rec-row > span:nth-child(2) { display: none; } }
.rec-modhd { display: flex; align-items: center; gap: 12px; }
.rec-stagebar { display: flex; gap: 6px; flex-wrap: wrap; }
.rec-stagebar__step { font-size: 11.5px; font-weight: 600; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text-3); cursor: pointer; }
.rec-stagebar__step.is-done { background: var(--surface); }
.rec-stagebar__step.is-cur { box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent); }
.rec-kv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.rec-kv-row > span:first-child { color: var(--text-3); }
.rec-mail { color: var(--brand); cursor: pointer; text-decoration: underline; }
.rec-docrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.rec-oms { font-size: 13px; line-height: 1.6; color: var(--text-2); margin: 0; }
@media (max-width: 1180px) { .prof-grid { grid-template-columns: 1fr; } }
.prof-col { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.prof-card__h { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.prof-card__ic { width: 30px; height: 30px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.prof-card__t { flex: 1; min-width: 0; }
.prof-card__t b { font-size: 14px; font-weight: 600; display: block; }
.prof-card__t span { font-size: 11px; color: var(--text-3); }
.prof-note { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin: 12px 0 0; }
.prof-note svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.prof-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .prof-2col { grid-template-columns: 1fr; } }
.prs-drow--btn { width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); cursor: pointer; }
.prs-drow--btn:first-child { border-top: none; }
.prs-drow--btn:hover { background: var(--bg-2); }

/* uren — uur boeken + per-project optelling + bouwplaats (veld-app) */
.uren-modal__wc { font-size: 11px; display: block; margin-top: 5px; }
.uren-modal__sum { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text-2); line-height: 1.5; margin-top: 6px; padding: 11px 13px; border-radius: 10px; background: var(--brand-soft); }
.uren-modal__sum svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.urp { padding: 4px 0 6px; }
.urp__row { display: grid; grid-template-columns: 2fr 0.8fr 1fr 0.8fr 1.3fr; gap: 12px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--line); }
.urp__row:first-child { border-top: none; }
.urp__row--h { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); padding-top: 8px; padding-bottom: 8px; }
.urp__naam { display: flex; align-items: center; gap: 10px; min-width: 0; }
.urp__naam b { font-size: 12.5px; font-weight: 600; display: block; }
.urp__naam i { font-size: 10.5px; font-style: normal; color: var(--text-3); }
.urp__u { font-size: 12.5px; color: var(--text); }
.urp__eur { font-size: 12.5px; font-weight: 600; text-align: right; color: var(--text-2); }
.urp__veld { display: inline-flex; align-items: center; gap: 4px; color: var(--pos-tekst); font-weight: 600; }
.urp-applabel { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 2px 7px; border-radius: 6px; }
.urp__row--veld .uren-team__av { width: 28px; height: 28px; border-radius: 8px; }
@media (max-width: 900px) { .urp__row, .urp__row--h { grid-template-columns: 1.6fr 1fr 0.8fr 1.1fr; } .urp__row > *:nth-child(2) { display: none; } }

/* persoonlijk menu onder avatar */
.tb__user { position: relative; }
.tb__avatar { cursor: pointer; border: none; }
.tb__avatar--lg { width: 40px; height: 40px; border-radius: 11px; font-size: 14px; flex-shrink: 0; }
.tb__usermenu-bd { position: fixed; inset: 0; z-index: 60; }
.tb__usermenu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 61; width: 256px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.4); padding: 7px; }
.tb__usermenu-hd { display: flex; align-items: center; gap: 12px; padding: 10px 11px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.tb__usermenu-id b { font-size: 13.5px; font-weight: 600; display: block; color: var(--text); }
.tb__usermenu-id span { font-size: 11px; color: var(--text-3); }
.tb__usermenu-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 10px 11px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--text-2); background: none; border: none; cursor: pointer; }
.tb__usermenu-item:hover { background: var(--bg-2); color: var(--text); }
.tb__usermenu-item svg { color: var(--text-3); flex-shrink: 0; }
.tb__usermenu-item:hover svg { color: var(--brand); }
.tb__usermenu-sep { height: 1px; background: var(--line); margin: 6px 4px; }

/* uren — agenda/kalender-dropdown voor dagkeuze */
.dagpick { position: relative; }
.dagpick__btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--bg-2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.dagpick__btn svg { color: var(--text-3); flex-shrink: 0; }
.dagpick__bd { position: fixed; inset: 0; z-index: 40; }
.dagpick__pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 41; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.4); padding: 11px; }
.dagpick__hd { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--text-2); margin-bottom: 9px; }
.dagpick__hd svg { color: var(--brand); }
.dagpick__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.dagpick__cell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-2); cursor: pointer; }
.dagpick__cell:hover { border-color: var(--brand); }
.dagpick__cell.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.dagpick__cell.is-we .dagpick__wd { color: var(--text-3); }
.dagpick__cell.is-on .dagpick__wd { color: rgba(255,255,255,.8); }
.dagpick__wd { font-size: 10px; font-weight: 600; color: var(--text-3); text-transform: uppercase; }
.dagpick__dt { font-size: 14px; font-weight: 700; }

/* compacte cashflow-prognose */
.fpr-cf2__chart { position: relative; height: 110px; margin: 4px 0 2px; }
.fpr-cf2__svg { width: 100%; height: 110px; display: block; }
.fpr-cf2__start, .fpr-cf2__end { position: absolute; top: -2px; font-size: 11px; font-weight: 600; color: var(--text-2); }
.fpr-cf2__start { left: 0; }
.fpr-cf2__end { right: 0; }
.fpr-cf2__dip { position: absolute; bottom: 6px; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: var(--neg); text-align: center; white-space: nowrap; }
.fpr-cf2__dip i { display: block; font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.fpr-cf2__axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-3); border-top: 1px solid var(--line); padding-top: 7px; margin-top: 2px; }

/* documenttemplates */
.dt-groep { margin-bottom: 16px; }
.dt-groep__h { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 9px; }
.dt-groep__h svg { color: var(--brand); }
.dt-grid { display: flex; flex-direction: column; gap: 7px; }
.dt-card { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--bg-2); cursor: pointer; }
.dt-card:hover { border-color: var(--brand); }
.dt-card__ic { width: 32px; height: 32px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dt-card__main { flex: 1; min-width: 0; }
.dt-card__main b { font-size: 13px; font-weight: 600; display: block; }
.dt-card__main span { font-size: 11px; color: var(--text-3); }
.dt-doc { background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 12px; padding: 22px; }
.dt-doc__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dt-doc__brand { display: flex; align-items: center; gap: 11px; }
.dt-doc__logo { width: 34px; height: 34px; border-radius: 9px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; }
.dt-doc__brand b { font-size: 13px; font-weight: 600; display: block; }
.dt-doc__brand span { font-size: 10.5px; color: var(--text-3); }
.dt-doc__type { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); background: var(--brand-soft); padding: 4px 9px; border-radius: 7px; }
.dt-doc__titel { font-size: 18px; font-weight: 700; margin: 16px 0 14px; }
.dt-doc__velden { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 22px; margin-bottom: 16px; }
.dt-veld { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.dt-veld span { color: var(--text-3); }
.dt-veld b { font-weight: 600; text-align: right; }
.dt-doc__body p { font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.dt-art { margin: 11px 0; }
.dt-art b { font-size: 12px; font-weight: 600; display: block; margin-bottom: 2px; }
.dt-art span { font-size: 12px; color: var(--text-2); line-height: 1.55; }
.dt-doc__sign { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 22px 0 14px; }
.dt-sign__line { display: block; height: 38px; border-bottom: 1.5px solid var(--line-strong); margin-bottom: 7px; }
.dt-sign b { font-size: 12px; font-weight: 600; display: block; }
.dt-sign span { font-size: 10.5px; color: var(--text-3); }
.dt-doc__legal { display: flex; align-items: flex-start; gap: 7px; font-size: 11px; color: var(--text-3); line-height: 1.5; padding-top: 12px; border-top: 1px solid var(--line); }
.dt-doc__legal svg { color: var(--pos); flex-shrink: 0; margin-top: 1px; }

/* offboarding-checklist */
.offb-row { display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left; padding: 10px 0; border-top: 1px solid var(--line); background: none; border-left: none; border-right: none; border-bottom: none; cursor: pointer; }
.offb-row:first-child { border-top: none; }
.offb-chk { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; margin-top: 1px; }
.offb-chk.is-on { background: var(--pos); border-color: var(--pos); }
.offb-row b { font-size: 12.5px; font-weight: 600; display: block; }
.offb-row span { font-size: 11px; color: var(--text-3); }

/* externe verslag-voorbeeld (delen) */
.comm-extprev { border: 1px solid var(--line-strong); border-radius: 11px; overflow: hidden; }
.comm-extprev__hd { display: flex; align-items: center; gap: 8px; padding: 10px 13px; background: var(--bg-2); border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 600; }
.comm-extprev__hd svg { color: var(--brand); }
.comm-extprev__hd span { margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.comm-extprev__b { padding: 12px 14px; }
.comm-extprev__b b { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-3); display: block; margin: 10px 0 4px; }
.comm-extprev__b b:first-child { margin-top: 0; }
.comm-extprev__b p { font-size: 12px; color: var(--text-2); line-height: 1.5; margin: 0; }
.comm-extprev__b ul { margin: 0; padding-left: 17px; }
.comm-extprev__b li { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.comm-extprev__ft { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text-3); margin-top: 11px; }

/* facturatie · regie & termijnstaten */
.rf-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 900px) { .rf-cards { grid-template-columns: 1fr; } }
.rf-opt { display: flex; align-items: center; gap: 11px; text-align: left; padding: 13px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-2); cursor: pointer; }
.rf-opt:hover { border-color: var(--brand); }
.rf-opt__ic { width: 34px; height: 34px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rf-opt b { font-size: 12.5px; font-weight: 600; display: block; }
.rf-opt span { font-size: 10.5px; color: var(--text-3); }
.rf-sec { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin: 16px 0 8px; }
.rf-sec:first-child { margin-top: 0; }
.rf-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); cursor: pointer; margin-bottom: 6px; }
.rf-row.is-on { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.rf-chk { width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.rf-chk.is-on { background: var(--brand); border-color: var(--brand); }
.rf-row__m { flex: 1; min-width: 0; }
.rf-row__m b { font-size: 12.5px; font-weight: 600; display: block; }
.rf-row__m span { font-size: 11px; color: var(--text-3); }
.rf-row__v { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.rf-opslag { display: flex; align-items: center; gap: 9px; margin: 12px 0 4px; font-size: 12.5px; color: var(--text-2); }
.rf-opslag input { width: 58px; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-2); color: var(--text); font: inherit; }
.rf-opslag__h { font-style: normal; font-size: 10.5px; color: var(--text-3); margin-left: 5px; }
.rf-tot { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 12.5px; color: var(--text-2); border-top: 1px solid var(--line); }
.rf-tot b { color: var(--text); font-weight: 600; }
.rf-tot--sum { border-top: 1.5px solid var(--line-strong); margin-top: 4px; padding-top: 11px; font-size: 14px; }
.rf-tot--sum span, .rf-tot--sum b { font-weight: 700; color: var(--text); }
.rf-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 600px) { .rf-types { grid-template-columns: 1fr; } }
.rf-type { position: relative; text-align: left; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--bg-2); cursor: pointer; }
.rf-type.is-on { border-color: var(--brand); background: var(--brand-soft); }
.rf-type b { font-size: 12.5px; font-weight: 600; display: block; }
.rf-type span { font-size: 10.5px; color: var(--text-3); }
.rf-type svg { position: absolute; top: 11px; right: 11px; color: var(--brand); }
.rf-toel { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--text-2); line-height: 1.5; margin: 12px 0; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); }
.rf-toel svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.rf-term { display: grid; grid-template-columns: 1.6fr 1.4fr 44px 1fr; gap: 11px; align-items: center; padding: 7px 0; }
.rf-term__l { font-size: 12px; color: var(--text-2); }
.rf-term__bar { height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.rf-term__bar i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.rf-term__pct { font-size: 11.5px; color: var(--text-3); text-align: right; }
.rf-term__v { font-size: 12.5px; font-weight: 600; text-align: right; }

/* facturatie — mini-knop, termijnstaat-tabel, afrekenstaat-groepen, dashboardlijsten */
.rf-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.rf-mini:hover { border-color: var(--brand); color: var(--brand); }
.rf-mini--brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.rf-mini--brand:hover { filter: brightness(1.06); color: #fff; }
.ts-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--pos-tekst); background: color-mix(in srgb, var(--pos) 13%, transparent); padding: 2px 8px; border-radius: 6px; }
.ts-tbl { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.ts-tbl__h { display: grid; grid-template-columns: 1fr 52px 96px 78px 116px; gap: 10px; padding: 8px 12px; background: var(--bg-2); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.ts-tbl__h .r { text-align: right; }
.ts-row { display: grid; grid-template-columns: 1fr 52px 96px 78px 116px; gap: 10px; align-items: center; padding: 7px 12px; border-top: 1px solid var(--line); }
.ts-row__lbl input { width: 100%; font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text); }
.ts-row__lbl input:not(:disabled):hover, .ts-row__lbl input:focus { border-color: var(--line-strong); background: var(--bg-2); outline: none; }
.ts-row__lbl input:disabled { color: var(--text); }
.ts-row__pct { display: flex; align-items: center; gap: 2px; justify-content: flex-end; font-size: 12px; color: var(--text-3); }
.ts-row__pct input { width: 42px; font: inherit; font-size: 12.5px; text-align: right; padding: 5px 6px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--bg-2); color: var(--text); }
.ts-row__pct input:disabled { border-color: transparent; background: transparent; color: var(--text); }
.ts-row__amt { text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text); }
.ts-row__btw { display: flex; justify-content: flex-end; align-items: center; }
.ts-row__btw select { font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--bg-2); color: var(--text); }
.ts-row__btw select:disabled { border-color: transparent; background: transparent; color: var(--text-2); -webkit-appearance: none; appearance: none; text-align: right; }
.ts-row__btw b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ts-row--incl { background: var(--bg-2); border-top: none; }
.ts-row--incl .ts-row__lbl { font-size: 11.5px; color: var(--text-3); }
.ts-row--incl .ts-row__act b { font-size: 13px; font-weight: 700; }
.ts-row__act { display: flex; justify-content: flex-end; }
.ts-row--tot { background: var(--bg-2); border-top: 1.5px solid var(--line-strong); }
.ts-row--tot b { font-size: 12.5px; }
.ts-row--warn { background: color-mix(in srgb, var(--signal) 7%, transparent); }
.ts-del { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ts-del:hover { border-color: var(--signal); color: var(--signal); }
.ts-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--bg-2); color: var(--text-3); border: 1px solid var(--line); }
.ts-chip--ok { color: var(--pos-tekst); border-color: color-mix(in srgb, var(--pos) 30%, transparent); background: color-mix(in srgb, var(--pos) 10%, transparent); }
.ts-addrow { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; font-weight: 600; padding: 7px 13px; border: 1px dashed var(--line-strong); border-radius: 9px; background: transparent; color: var(--text-2); cursor: pointer; }
.ts-addrow:hover { border-color: var(--brand); color: var(--brand); }
.af-grp { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 16px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.af-grp:first-child { margin-top: 0; }
.af-grp__t { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.af-grp b { font-size: 12.5px; font-weight: 700; color: var(--text); }
/* dashboard-blokken (vastgestelde termijnstaat + aangemaakte facturen) */
.fc-block { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 13px; }
.fc-block__h { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 9px; }
.fc-block__h svg { color: var(--brand); }
.fc-tsrow { display: grid; grid-template-columns: 1fr 48px 110px 110px; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.fc-tsrow:first-of-type { border-top: none; }
.fc-tsrow__l { color: var(--text-2); }
.fc-tsrow__p { text-align: right; color: var(--text-3); }
.fc-tsrow__a { text-align: right; font-variant-numeric: tabular-nums; }
.fc-tsrow__s { display: flex; justify-content: flex-end; }
.fc-frow { display: grid; grid-template-columns: 1fr 130px 110px; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.fc-frow:first-of-type { border-top: none; }
.fc-frow__nr b { font-size: 12.5px; font-weight: 600; display: block; }
.fc-frow__nr i { font-size: 11px; color: var(--text-3); font-style: normal; }
.fc-frow__a { text-align: right; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fc-frow__s { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.fc-frow--btn { width: 100%; text-align: left; background: none; cursor: pointer; }
.fc-frow--btn:hover { background: var(--bg-2); }
.fc-tsrow--btw { grid-template-columns: 1fr 44px 100px 70px 96px; }
.fc-tsrow__btw { text-align: right; font-size: 11px; color: var(--text-3); }
.fco-row--btn { cursor: pointer; border-radius: 9px; padding: 9px 8px; }
.fco-row--btn:hover { background: var(--bg-2); }
.rf-cards--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .rf-cards--2 { grid-template-columns: 1fr; } }
/* segmented Uitgaand/Inkomend */
.fseg { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-2); margin-bottom: var(--gap); }
.fseg__btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 8px 15px; border-radius: 8px; border: none; background: none; color: var(--text-3); cursor: pointer; }
.fseg__btn.is-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.fseg__btn svg { color: var(--brand); }
/* invoice-detail groepskop + extra sum-regels */
.dos-inv__grp { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #888; padding: 8px 0 2px; }
.dos-inv__r--h { grid-template-columns: 1fr auto; }

/* bron-regels met facturatiestatus */
.rf-row--stat { align-items: flex-start; gap: 10px; }
.rf-row--stat.is-locked { opacity: .72; background: var(--bg); }
.rf-row__pick { background: none; border: none; padding: 0; cursor: pointer; flex-shrink: 0; margin-top: 1px; }
.rf-row__pick:disabled { cursor: default; }
.rf-chk.is-lock { background: var(--text-3); border-color: var(--text-3); color: #fff; }
.rf-row__m { flex: 1; min-width: 0; }
.rf-row__m b { font-size: 12.5px; font-weight: 600; display: block; }
.rf-row__m > span { font-size: 11px; color: var(--text-3); display: block; }
.rf-flag { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 10.5px; font-weight: 600; margin-top: 4px; padding: 2px 7px; border-radius: 6px; }
.rf-flag--done { color: var(--text-3); background: color-mix(in srgb, var(--text-3) 12%, transparent); }
.rf-flag--part { color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 13%, transparent); }
.rf-ref { color: inherit; text-decoration: underline; cursor: pointer; }
.rf-row__r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.rf-row__v { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.rf-row__v--mut { color: var(--text-3); text-decoration: line-through; }
.rf-row__rest { font-size: 10px; color: var(--text-3); font-style: normal; }
.rf-amt { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-3); }
.rf-amt input { width: 78px; font: inherit; font-size: 12px; text-align: right; padding: 4px 7px; border: 1px solid var(--brand); border-radius: 7px; background: var(--surface); color: var(--text); }

/* groepsdashboard — alleen-lezen overzicht + facturatieronde */
.fco-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); max-width: 360px; text-align: right; }
.fco-hint svg { color: var(--amber); flex-shrink: 0; }
.fco-row { display: grid; grid-template-columns: 1.6fr 1.6fr 120px 110px; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 9px 0; border-top: 1px solid var(--line); background: none; border-left: none; border-right: none; border-bottom: none; }
.fco-row:first-of-type { border-top: none; }
.fco-row--pick { cursor: pointer; grid-template-columns: 26px 1.6fr 1.4fr 110px; padding: 9px 8px; border-radius: 9px; }
.fco-row--pick:hover { background: var(--bg-2); }
.fco-row--pick.is-on { background: var(--brand-soft); }
.fco-row__chk { display: flex; }
.fco-row__p b { font-size: 12.5px; font-weight: 600; display: block; }
.fco-row__p i { font-size: 11px; color: var(--text-3); font-style: normal; }
.fco-row__d { font-size: 12px; color: var(--text-2); }
.fco-row__a { text-align: right; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fco-row__s { display: flex; justify-content: flex-end; }
/* termijnfactuur — e-mail preview + betaalpaneel */
.tmf-viewtabs { display: inline-flex; gap: 4px; }
.tmf-vtab { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text-2); cursor: pointer; position: relative; }
.tmf-vtab.is-on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.tmf-vtab__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); }
.tmf-email { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; font-size: 12.5px; color: var(--text); }
.tmf-email__hd { margin-bottom: 10px; }
.tmf-email__badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; background: var(--bg-2); color: var(--text-3); }
.tmf-email__badge--ok { background: color-mix(in srgb, var(--pos) 14%, transparent); color: var(--pos-tekst); }
.tmf-email__row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.tmf-email__row span { color: var(--text-3); }
.tmf-email__row b { font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.tmf-email__body { margin-top: 12px; line-height: 1.6; }
.tmf-email__body p { margin: 0 0 9px; }
.tmf-email__note { display: flex; align-items: flex-start; gap: 7px; margin-top: 12px; padding: 9px 11px; border-radius: 9px; background: var(--brand-soft); color: var(--text-2); font-size: 11.5px; line-height: 1.5; }
.tmf-email__note svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.tmf-pay__bar { height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; margin: 4px 0 7px; }
.tmf-pay__bar i { display: block; height: 100%; border-radius: 999px; }
.tmf-pay__sum { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); margin-bottom: 8px; }
.tmf-pay__list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.tmf-pay__row { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.tmf-pay__ic { width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--pos) 16%, transparent); color: var(--pos); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tmf-pay__row b { font-weight: 600; }
.tmf-pay__row span { color: var(--text-3); display: block; font-size: 11px; }
.tmf-pay__exact { display: flex; align-items: flex-start; gap: 7px; font-size: 11px; color: var(--text-3); line-height: 1.5; }
.tmf-pay__exact svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.tmf-pay__deel { display: flex; gap: 7px; margin-top: 8px; }
.tmf-pay__deel input { flex: 1; min-width: 0; font: inherit; font-size: 12px; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-2); color: var(--text); }

/* uitgaande factuur — groter scherm + bewerkbare regeltabel */
.tmf--wide { width: min(1120px, 96vw) !important; }
.invl-edithint { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-3); }
.invl-edithint svg { color: var(--brand); }
.invl { margin: 6px 0 8px; }
.invl__h { display: grid; grid-template-columns: 1fr 68px 58px 92px 110px 24px; gap: 10px; padding: 6px 0; border-bottom: 1.5px solid #d8dde3; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #888; }
.invl__h .r, .invl__r .r { text-align: right; }
.invl__grp { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9a6a1e; padding: 10px 0 3px; }
.invl__r { display: grid; grid-template-columns: 1fr 68px 58px 92px 110px 24px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid #eee; font-size: 12.5px; color: #222; }
.invl__oms b { font-weight: 600; display: block; }
.invl__oms i { font-style: normal; font-size: 11px; color: #888; }
.invl__deel { font-style: normal; font-size: 10px; color: #b06a00; background: #f5e6cc; padding: 1px 6px; border-radius: 5px; margin-left: 6px; }
.invl__eh { font-size: 11.5px; color: #666; }
.invl__bedr { font-weight: 600; }
.invl__in { font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid #cdd3da; border-radius: 6px; background: #fff; color: #222; width: 100%; box-sizing: border-box; }
.invl__in--num { text-align: right; }
.invl__del button { width: 22px; height: 22px; border-radius: 6px; border: 1px solid #d8dde3; background: #fff; color: #999; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.invl__del button:hover { border-color: var(--signal); color: var(--signal); }
.dos-kv--tot { border-top: 1px solid var(--line); margin-top: 2px; padding-top: 6px; }
.dos-kv--tot b { font-size: 14px; }

/* KPI-tegels — uniform formaat, hoogte & typografie over het hele systeem */
.fin-tile, .kpi, .mp-sum__tile { min-height: 104px; padding: 18px; box-sizing: border-box; }
.fin-tile__v, .kpi__num, .mp-sum__v { font-size: 29px !important; font-weight: 300 !important; letter-spacing: -.02em; line-height: 1.05; }
.kpi__label, .mp-sum__l { font-size: 11px; font-weight: 500; }
.mp-sum__s, .kpi__foot span { font-size: 11.5px; }

/* ── Duurzaamheid & milieu ── */
.dz-body { padding: 18px; }
.dz-list { display: block; }
.dz-row { display: grid; grid-template-columns: 1.6fr 1.1fr 1.6fr 110px; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.dz-row:first-child { border-top: none; }
.dz-row--h { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); padding-top: 4px; }
.dz-cell { font-size: 12.5px; color: var(--text); }
.dz-cell b { font-weight: 600; }
.dz-cell i { display: block; font-style: normal; font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.dz-cell.c { text-align: center; }
.dz-circ { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; color: var(--brand); background: var(--brand-soft); text-transform: capitalize; }
.dz-foot { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--text-3); line-height: 1.5; padding: 14px 0 2px; }
.dz-foot svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.dz-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text-2); line-height: 1.5; margin: 14px 0 0; }
.dz-note svg { flex-shrink: 0; margin-top: 1px; }
.dz-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dz-posten__h { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }

.dz-mpg { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
@media (max-width: 980px) { .dz-mpg { grid-template-columns: 1fr; } }
.dz-gauge__val { font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 14px; }
.dz-gauge__track { position: relative; height: 12px; border-radius: 999px; background: var(--bg-2); overflow: visible; }
.dz-gauge__fill { display: block; height: 100%; border-radius: 999px; }
.dz-gauge__doel { position: absolute; top: -3px; width: 2px; height: 18px; background: var(--text-2); border-radius: 2px; }
.dz-gauge__scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-3); margin-top: 9px; }
.dz-postrow { display: grid; grid-template-columns: 1.5fr 2fr 60px; gap: 12px; align-items: center; padding: 8px 0; }
.dz-postrow__l { font-size: 12px; color: var(--text-2); }
.dz-postrow__bar { height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.dz-postrow__bar span { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.dz-postrow__v { font-size: 12px; font-weight: 600; text-align: right; }

.dz-co2 { display: grid; grid-template-columns: 1fr 1.2fr; gap: 30px; align-items: center; }
@media (max-width: 980px) { .dz-co2 { grid-template-columns: 1fr; } }
.dz-co2__left { display: flex; align-items: center; gap: 22px; }
.dz-co2__c b { font-size: 26px; font-weight: 700; line-height: 1; }
.dz-co2__c span { font-size: 11px; color: var(--text-3); }
.dz-co2__leg { display: flex; flex-direction: column; gap: 9px; }
.dz-co2__leg div { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--text-2); }
.dz-co2__leg em { font-style: normal; font-weight: 600; color: var(--text); margin-left: auto; }
.dz-spark { display: flex; align-items: flex-end; gap: 6px; height: 90px; padding: 8px 0; }
.dz-spark__bar { flex: 1; background: linear-gradient(180deg, var(--brand), color-mix(in srgb,var(--brand) 55%,transparent)); border-radius: 4px 4px 0 0; min-height: 4px; }
.dz-stik { display: flex; align-items: center; gap: 13px; padding: 14px 15px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-strong); margin-bottom: 8px; }
.dz-stik__ic { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dz-stik b { font-size: 13.5px; font-weight: 600; display: block; }
.dz-stik span { font-size: 11.5px; color: var(--text-3); }
.dz-afvalbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dz-afvalbar__track { flex: 1; height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.dz-afvalbar__track span { display: block; height: 100%; background: var(--pos); border-radius: 999px; }
.dz-afvalbar > span { font-size: 11.5px; color: var(--text-2); white-space: nowrap; }

/* ── Resourcing (Planning-hub tab) ── */
.rsc-body { padding: 16px 18px; }
.rsc-grid { display: grid; gap: 4px; }
.rsc-gh { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding: 4px 6px; align-self: center; }
.rsc-gh--c { text-align: center; }
.rsc-name { padding: 8px 6px; }
.rsc-name b { font-size: 12.5px; font-weight: 600; display: block; }
.rsc-name i { font-size: 10.5px; font-style: normal; color: var(--text-3); }
.rsc-cell { display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.rsc-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font-size: 11.5px; color: var(--text-2); }
.rsc-legend span { display: inline-flex; align-items: center; gap: 7px; }
.rsc-legend i { width: 14px; height: 14px; border-radius: 4px; }
.rsc-foot { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--text-3); line-height: 1.5; padding: 16px 0 2px; }
.rsc-foot svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.rsc-list { display: block; }
.rsc-row { display: grid; grid-template-columns: 2fr 1fr 1fr 150px; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.rsc-row:first-child { border-top: none; }
.rsc-row--h { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); padding-top: 2px; }
.rsc-cellt { font-size: 12.5px; color: var(--text); }
.rsc-cellt b { font-weight: 600; }
.rsc-cellt i { display: block; font-style: normal; font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.rsc-dev { font-size: 12px; font-weight: 600; }
.rsc-weer { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 4px; }
.rsc-weerday { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.rsc-weerday.is-impact { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); background: color-mix(in srgb, var(--amber) 7%, var(--bg-2)); }
.rsc-weerday__d { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.rsc-weerday__ic { font-size: 26px; line-height: 1; }
.rsc-weerday__t { font-size: 17px; font-weight: 700; }
.rsc-weerday__m { font-size: 10.5px; color: var(--text-3); }
.rsc-impacts { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.rsc-impact { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 10px; background: color-mix(in srgb, var(--amber) 9%, transparent); font-size: 12px; color: var(--text-2); }
.rsc-impact__d { font-size: 11px; font-weight: 700; color: var(--text); white-space: nowrap; }
@media (max-width: 980px) { .rsc-grid { overflow-x: auto; } }

/* ── Financiën: extra secties (prognose, 3-weg, OCR, debiteuren) ── */
.fpr-cf { display: flex; align-items: flex-end; gap: 8px; height: 130px; padding: 16px 0 4px; position: relative; }
.fpr-cfcol { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; position: relative; }
.fpr-cfbars { display: flex; align-items: flex-end; gap: 2px; height: 52px; }
.fpr-cfin { width: 7px; background: var(--pos); border-radius: 2px 2px 0 0; }
.fpr-cfuit { width: 7px; background: color-mix(in srgb, var(--neg) 60%, transparent); border-radius: 2px 2px 0 0; }
.fpr-cfdot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); left: 50%; transform: translateX(-50%); }
.fpr-cfwk { font-size: 9.5px; color: var(--text-3); margin-top: 7px; }
.fpr-cflegend, .fpr-cflegend span { display: flex; align-items: center; }
.fpr-cflegend { flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: 11.5px; color: var(--text-2); }
.fpr-cflegend span { gap: 7px; }
.fpr-cflegend i { width: 12px; height: 12px; border-radius: 3px; }
.fpr-foot { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin: 14px 0 0; }
.fpr-foot svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.fom-ohwrow { grid-template-columns: 2fr 1fr 1fr 1fr 1.1fr; align-items: center; }
.fom-idxrow { grid-template-columns: 1.7fr 1.2fr 1fr .7fr 1fr 1.1fr; align-items: center; }
.fom-num { text-align: right; font-variant-numeric: tabular-nums; }
.fom-ohwrow--tot { background: var(--bg-2); font-weight: 600; }
.fom-dek { display: flex; align-items: center; gap: 8px; }
.fom-dek__track { flex: 1; height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--text-2) 12%, transparent); overflow: hidden; max-width: 90px; }
.fom-dek__track i { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.fom-dek em { font-style: normal; font-size: 11.5px; color: var(--text-2); min-width: 30px; font-variant-numeric: tabular-nums; }
/* h14 punt 5: OHW-staat op een telefoon (375 px) zonder horizontaal scrollen.
   Elke projectregel wordt een blok: naam en voortgang over de hele breedte,
   de bedragen in twee kolommen met hun kop erboven. */
@media (max-width: 640px) {
  .fom-ohwreg .reg__head.fom-ohwrow { display: none; }
  .fom-ohwreg .reg__row.fom-ohwrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 8px 12px; padding: 12px 16px; }
  .fom-ohwreg .fom-ohwrow > .reg__name, .fom-ohwreg .fom-ohwrow > .fom-vg { grid-column: 1 / -1; min-width: 0; }
  .fom-ohwreg .fom-ohwrow > .fom-leeg { display: none; }
  .fom-ohwreg .fom-ohwrow .fom-num { text-align: left; min-width: 0; overflow-wrap: anywhere; }
  .fom-ohwreg .fom-ohwrow .fom-num[data-l]::before,
  .fom-ohwreg .fom-ohwrow .fom-dek[data-l]::before,
  .fom-ohwreg .fom-ohwrow .fom-vg[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; }
  .fom-ohwreg .fom-ohwrow .fom-dek { flex-wrap: wrap; min-width: 0; }
  .fom-ohwreg .fom-ohwrow .fom-dek[data-l]::before { flex-basis: 100%; }
}
.fom-brug { display: flex; align-items: flex-end; gap: 10px; padding: 6px 4px 0; }
.fom-brug__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0; }
.fom-brug__col--end .fom-brug__lbl b { color: var(--brand); }
.fom-brug__plot { position: relative; width: 100%; }
.fom-brug__bar { position: absolute; left: 14%; width: 72%; border-radius: 4px 4px 0 0; display: flex; justify-content: center; }
.fom-brug__val { position: absolute; top: -17px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fom-brug__lbl { text-align: center; margin-top: 8px; line-height: 1.25; }
.fom-brug__lbl b { display: block; font-size: 11px; font-weight: 600; color: var(--text); }
.fom-brug__lbl span { font-size: 10px; color: var(--text-3); }
.fv-revrow { grid-template-columns: 2fr 1fr 1fr 1fr; align-items: center; }
.ink-keten { display: flex; flex-direction: column; gap: 2px; }
.ink-keten__row { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.ink-keten__dot { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.ink-keten__dot--done { background: var(--pos); color: #fff; }
.ink-keten__dot--open { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); border: 1.5px solid var(--amber); }
.ink-keten__main { flex: 1; line-height: 1.3; }
.ink-keten__main b { display: block; font-size: 13px; }
.ink-keten__main span { font-size: 11px; color: var(--text-3); }
.ink-keten__amt { font-variant-numeric: tabular-nums; font-size: 13px; }
.ink-3weg { margin-top: 8px; padding: 9px 11px; border-radius: 9px; background: var(--bg-2); font-size: 11.5px; color: var(--text-2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ink-tek { border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px; }
.ink-tek__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.ink-tek__row:last-child { border-bottom: none; }
.ink-tek__row > span { color: var(--text-3); }
.ink-tek__rev { font-style: normal; font-size: 10.5px; color: var(--text-3); font-weight: 500; }
.ink-tek__warn { display: flex; gap: 6px; align-items: flex-start; font-size: 11px; color: var(--amber-tekst); line-height: 1.5; margin: 4px 0 10px; }
.prs-poort { display: flex; flex-direction: column; gap: 2px; }
.prs-poort__row { display: flex; align-items: center; gap: 11px; padding: 8px 0; opacity: .6; }
.prs-poort__row.is-done, .prs-poort__row.is-now { opacity: 1; }
.prs-poort__dot { width: 38px; height: 24px; flex-shrink: 0; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; background: color-mix(in srgb, var(--text-2) 12%, transparent); color: var(--text-3); }
.prs-poort__row.is-done .prs-poort__dot { background: var(--pos); color: #fff; }
.prs-poort__row.is-now .prs-poort__dot { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); border: 1.5px solid var(--amber); }
.prs-poort__main { flex: 1; line-height: 1.3; }
.prs-poort__main b { display: block; font-size: 13px; }
.prs-poort__main span { font-size: 11px; color: var(--text-3); }
.prs-poort__row .tag { margin-left: auto; }
.prs-oplbar { margin: 4px 0 6px; }
.prs-oplbar__track { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--text-2) 10%, transparent); }
.prs-oplbar__track i { height: 100%; }
.prs-oplbar__lg { display: flex; gap: 14px; align-items: center; margin-top: 7px; font-size: 11px; color: var(--text-2); flex-wrap: wrap; }
.prs-oplbar__lg span { display: inline-flex; align-items: center; gap: 5px; }
.prs-oplbar__lg i { width: 10px; height: 10px; border-radius: 2px; }
.hr-lkrow { grid-template-columns: 1.8fr .8fr .7fr 1fr 1fr .7fr; align-items: center; }
.hr-cal { padding: 4px 4px 0; overflow-x: auto; }
.hr-cal__head, .hr-cal__row { display: grid; grid-template-columns: 1.6fr repeat(6, 1fr); align-items: center; gap: 4px; }
.hr-cal__head { padding: 6px 8px; font-size: 11px; color: var(--text-3); font-weight: 600; }
.hr-cal__wk { text-align: center; }
.hr-cal__row { padding: 5px 8px; border-top: 1px solid var(--line); }
.hr-cal__nm { line-height: 1.25; }
.hr-cal__nm b { display: block; font-size: 12.5px; }
.hr-cal__nm i { font-size: 10.5px; color: var(--text-3); font-style: normal; }
.hr-cal__cell { height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.hr-cal__cell--vol { background: color-mix(in srgb, var(--neg) 70%, transparent); }
.hr-cal__cell--deels { background: color-mix(in srgb, var(--amber) 80%, transparent); }
.hr-cal__cell--vrij { background: color-mix(in srgb, var(--pos) 60%, transparent); color: #fff; }
.hr-cal__cell--verlof { background: color-mix(in srgb, var(--steel) 45%, transparent); }
.hr-cal__lg { display: flex; gap: 16px; flex-wrap: wrap; padding: 12px 16px; font-size: 11px; color: var(--text-2); }
.hr-cal__lg span { display: inline-flex; align-items: center; gap: 6px; }
.hr-cal__sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.hr-match { display: flex; flex-direction: column; }
.hr-match__row { display: flex; gap: 16px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--line); }
.hr-match__need { flex: 0 0 230px; line-height: 1.3; }
.hr-match__need b { display: block; font-size: 13px; }
.hr-match__need span { font-size: 11px; color: var(--text-3); }
.hr-match__kand { display: flex; flex-wrap: wrap; gap: 7px; }
.hr-match__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 4px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); font-size: 12px; }
.hr-match__av { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 9.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.hr-match__none { font-size: 12px; color: var(--amber-tekst); font-style: italic; }
.ag-fb { margin: 4px 0 2px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--bg-2); }
.ag-fb__h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.ag-fb__row { display: flex; align-items: center; gap: 12px; padding: 3px 0; }
.ag-fb__nm { flex: 0 0 200px; font-size: 12px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.ag-fb__warn { font-style: normal; font-size: 10px; color: var(--signal); font-weight: 600; }
.ag-fb__strip { display: flex; gap: 3px; flex: 1; }
.ag-fb__slot { flex: 1; height: 16px; border-radius: 3px; display: inline-block; }
.ag-fb__slot--free { background: color-mix(in srgb, var(--pos) 45%, transparent); }
.ag-fb__slot--tent { background: color-mix(in srgb, var(--amber) 55%, transparent); }
.ag-fb__slot--busy { background: color-mix(in srgb, var(--signal) 55%, transparent); }
.ag-fb__slot.is-now { outline: 2px solid var(--text); outline-offset: 1px; }
.ag-fb__lg { display: flex; gap: 12px; align-items: center; margin-top: 9px; font-size: 10.5px; color: var(--text-2); }
.ag-fb__lg span { display: inline-flex; align-items: center; gap: 5px; }
.ag-fb__lg .ag-fb__slot { width: 14px; height: 11px; flex: none; }
.ag-seriescope { display: flex; align-items: center; gap: 7px; margin-right: auto; font-size: 11.5px; color: var(--text-2); }
.ag-seriebtn { font: inherit; font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); cursor: pointer; }
.ag-seriebtn.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.fpr-cell { font-size: 12.5px; color: var(--text); }
.fpr-cell b { font-weight: 600; }

.fpr-3weg { display: flex; flex-direction: column; gap: 16px; }
.fpr-3row { display: grid; grid-template-columns: 160px 1fr 80px; gap: 14px; align-items: center; }
.fpr-3l { font-size: 12.5px; font-weight: 600; }
.fpr-3bars { display: flex; flex-direction: column; gap: 3px; }
.fpr-3bar { position: relative; height: 16px; display: flex; align-items: center; }
.fpr-3bar i { height: 100%; border-radius: 3px; display: block; }
.fpr-3beg { background: color-mix(in srgb, var(--navy) 38%, transparent); }
.fpr-3real { background: var(--brand); }
.fpr-3bar em { position: absolute; left: 8px; font-style: normal; font-size: 10px; color: var(--text-2); white-space: nowrap; }
.fpr-3delta { text-align: right; font-size: 12px; font-weight: 700; }

.fpr-ocr, .fpr-deb { display: block; }
.fpr-ocrrow { display: grid; grid-template-columns: 0.9fr 1.6fr 1fr 0.9fr 0.9fr 0.9fr 100px; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.fpr-ocrrow:first-child { border-top: none; }
.fpr-ocrrow--h, .fpr-debrow--h { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.fpr-btw { font-size: 11px; font-weight: 600; color: var(--steel); background: color-mix(in srgb, var(--steel) 13%, transparent); padding: 2px 8px; border-radius: 6px; }
.fpr-conf { font-weight: 700; }
.fpr-debrow { display: grid; grid-template-columns: 1.6fr 1fr 1.4fr 0.8fr 110px; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.fpr-debrow:first-child { border-top: none; }
.fpr-limbar { height: 7px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.fpr-limbar i { display: block; height: 100%; border-radius: 999px; }
.fpr-limtxt { font-style: normal; font-size: 10px; color: var(--text-3); display: block; margin-top: 3px; }
@media (max-width: 1080px) { .fpr-ocrrow, .fpr-ocrrow--h { grid-template-columns: 1fr 1.4fr 1fr 100px; } .fpr-ocrrow > *:nth-child(4), .fpr-ocrrow > *:nth-child(5), .fpr-ocrrow > *:nth-child(6) { display: none; } .fpr-3row { grid-template-columns: 110px 1fr 70px; } }

/* ── CRM-uitbreidingen (win/verlies + relatie-inzichten) ── */
.cre-wv { display: grid; grid-template-columns: 1fr 1.1fr; gap: 26px; align-items: start; }
@media (max-width: 980px) { .cre-wv { grid-template-columns: 1fr; } }
.cre-wv__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cre-subh { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 11px; }
.cre-redrow { display: grid; grid-template-columns: 1.3fr 2fr 36px; gap: 10px; align-items: center; padding: 6px 0; }
.cre-redrow__l { font-size: 12.5px; color: var(--text-2); }
.cre-redrow__bar { height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.cre-redrow__bar i { display: block; height: 100%; background: var(--signal); border-radius: 999px; }
.cre-redrow__v { font-size: 12px; font-weight: 600; text-align: right; }
.cre-wvrecent { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.cre-decrow { display: grid; grid-template-columns: 28px 1fr 1.1fr; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.cre-decrow:first-of-type { border-top: none; }
.cre-uitkomst { width: 26px; height: 26px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.cre-uitkomst--gewonnen { background: var(--pos); }
.cre-uitkomst--verloren { background: var(--signal); }
.cre-decmain b { font-size: 12.5px; font-weight: 600; display: block; }
.cre-decmain span { font-size: 11px; color: var(--text-3); }
.cre-les { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.cre-les svg { color: var(--brand); flex-shrink: 0; }
.cre-foot { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin: 16px 0 0; }
.cre-foot svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.cre-rel { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap); margin-top: var(--gap); align-items: start; }
@media (max-width: 1180px) { .cre-rel { grid-template-columns: 1fr; } }
.cre-timeline { display: flex; flex-direction: column; }
.cre-tl { display: grid; grid-template-columns: 30px 1fr; gap: 12px; position: relative; padding-bottom: 14px; }
.cre-tl__dot { width: 30px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; }
.cre-tl__line { position: absolute; left: 14px; top: 30px; bottom: 0; width: 1.5px; background: var(--line-strong); }
.cre-tl__main b { font-size: 12.5px; font-weight: 500; display: block; line-height: 1.35; }
.cre-tl__main span { font-size: 11px; color: var(--text-3); }
.cre-reflist { display: flex; flex-direction: column; }
.cre-ref { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.cre-ref:first-child { border-top: none; }
.cre-ref__main { flex: 1; min-width: 0; }
.cre-ref__main b { font-size: 12.5px; font-weight: 600; display: block; }
.cre-ref__main span { font-size: 11px; color: var(--text-3); }
.cre-ref__som { font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.cre-ref__nps { font-size: 13px; font-weight: 700; white-space: nowrap; }
.cre-npsbig { font-size: 26px; font-weight: 700; line-height: 1; }
.cre-npsbar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.cre-npsbar span { display: block; height: 100%; }
.cre-npsleg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: var(--text-2); margin-bottom: 14px; }
.cre-npsleg span { display: inline-flex; align-items: center; gap: 6px; }
.cre-npsleg i { width: 9px; height: 9px; border-radius: 3px; }
.cre-npslist { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 11px; }
.cre-npsrow { display: flex; align-items: center; gap: 11px; padding: 6px 0; }
.cre-npsrow__sc { width: 32px; height: 32px; border-radius: 9px; border: 1.5px solid; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.cre-npsrow__main b { font-size: 12px; font-weight: 600; display: block; }
.cre-npsrow__main span { font-size: 11px; color: var(--text-3); font-style: italic; }

/* ── Analytics, AI & integraties ── */
.int-risks { display: flex; flex-direction: column; }
.int-risk { display: grid; grid-template-columns: 4px 96px 1fr 1.3fr; gap: 13px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.int-risk:first-child { border-top: none; }
.int-risk__sev { width: 4px; height: 34px; border-radius: 3px; }
.int-risk__cat { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 7px; text-align: center; text-transform: uppercase; letter-spacing: .03em; }
.int-risk__main { min-width: 0; }
.int-risk__main b { font-size: 12.5px; font-weight: 600; display: block; line-height: 1.35; }
.int-risk__main span { font-size: 11px; color: var(--text-3); }
.int-risk__actie { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); }
.int-risk__actie svg { color: var(--brand); flex-shrink: 0; }
.int-foot { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin: 14px 0 0; }
.int-foot svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.int-list { display: flex; flex-direction: column; }
.int-conn { display: grid; grid-template-columns: 38px 1fr auto auto auto; gap: 13px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.int-conn:first-child { border-top: none; }
.int-conn__logo { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; }
.int-conn__main { min-width: 0; }
.int-conn__main b { font-size: 13px; font-weight: 600; display: block; }
.int-conn__main span { font-size: 11px; color: var(--text-3); }
.int-conn__rich { font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
.int-conn__sync { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.int-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
@media (max-width: 1080px) { .int-two { grid-template-columns: 1fr; } .int-conn { grid-template-columns: 38px 1fr auto; } .int-conn__rich, .int-conn__sync { display: none; } }
.int-key { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.int-key:first-child { border-top: none; }
.int-key__main b { font-size: 12.5px; font-weight: 600; display: block; }
.int-key__main span { font-size: 11px; color: var(--text-3); }
.int-key__code { font-size: 11.5px; font-family: 'Roboto Mono', monospace; color: var(--text-2); background: var(--bg-2); padding: 4px 9px; border-radius: 7px; }
.int-key__rev { font-size: 11px; font-weight: 600; color: var(--signal); border: 1px solid color-mix(in srgb, var(--signal) 30%, var(--line)); border-radius: 8px; padding: 6px 10px; white-space: nowrap; }
.int-key__rev:hover { background: color-mix(in srgb, var(--signal) 10%, transparent); }
.int-hook { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line); }
.int-hook:first-child { border-top: none; }
.int-hook__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.int-hook__main { flex: 1; min-width: 0; }
.int-hook__main b { font-size: 12.5px; font-weight: 600; font-family: 'Roboto Mono', monospace; display: block; }
.int-hook__main code { font-size: 11px; color: var(--text-3); }

/* ── Inkoop & supply chain ── */
.iks-body { padding: 8px 0 4px; }
.iks-list { padding: 4px 0; }
.iks-row { display: grid; grid-template-columns: 2fr 1fr 1.3fr 1fr 1.1fr; gap: 14px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); }
.iks-row:first-child { border-top: none; }
.iks-row--h { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); padding-top: 8px; padding-bottom: 8px; }
.iks-cell { font-size: 12.5px; color: var(--text); }
.iks-cell b { font-weight: 600; }
.iks-cell i { display: block; font-style: normal; font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.iks-cell.c { text-align: center; }
.iks-foot { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--text-3); line-height: 1.5; padding: 14px 18px 4px; }
.iks-foot svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.iks-stars { display: inline-flex; align-items: center; gap: 1px; }
.iks-stars em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--text-2); margin-left: 6px; }
.iks-rfqrow { display: grid; grid-template-columns: 1fr auto auto auto; gap: 16px; align-items: center; width: 100%; text-align: left; padding: 14px 18px; border-top: 1px solid var(--line); }
.iks-rfqrow:first-child { border-top: none; }
.iks-rfqrow:hover { background: var(--bg-2); }
.iks-rfqrow__main b { font-size: 13px; font-weight: 600; display: block; }
.iks-rfqrow__main span { font-size: 11px; color: var(--text-3); }
.iks-rfqrow__cnt { text-align: center; white-space: nowrap; font-size: 14px; font-weight: 700; }
.iks-rfqrow__cnt i { display: block; font-style: normal; font-size: 10px; font-weight: 400; color: var(--text-3); }
.iks-bestelbron { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); padding: 4px 18px 14px; }
.iks-bestelbron svg { color: var(--brand); }
.iks-bestelfoot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px 6px; border-top: 1px solid var(--line); margin-top: 4px; }
.iks-bestelfoot span { font-size: 12.5px; color: var(--text-2); }
.iks-bestelfoot b { color: var(--text); }
.iks-cmp { padding: 4px 18px 8px; }
.iks-cmphead b { font-size: 14px; font-weight: 600; display: block; }
.iks-cmphead span { font-size: 11.5px; color: var(--text-3); }
.iks-cmptable { margin-top: 14px; }
.iks-cmprow { display: grid; grid-template-columns: 1.6fr 1.1fr 1fr 1.2fr 100px; gap: 14px; align-items: center; padding: 12px 12px; border-top: 1px solid var(--line); border-radius: 9px; }
.iks-cmprow:first-child { border-top: none; }
.iks-cmprow--h { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.iks-cmprow.is-gekozen { background: var(--brand-soft); }
.iks-cmpcell { font-size: 12.5px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.iks-cmpcell b { font-weight: 600; }
.iks-tag-low { font-style: normal; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--pos-tekst); background: color-mix(in srgb, var(--pos) 13%, transparent); padding: 2px 6px; border-radius: 5px; }
.iks-recv { font-weight: 600; text-transform: capitalize; }
.iks-trend { display: inline-flex; align-items: flex-end; gap: 3px; height: 30px; width: 78px; }
.iks-trend span { flex: 1; border-radius: 2px 2px 0 0; min-height: 3px; }
@media (max-width: 1080px) { .iks-row, .iks-row--h, .iks-cmprow { grid-template-columns: 1.4fr 1fr 1fr !important; } .iks-row > *:nth-child(4), .iks-row > *:nth-child(5), .iks-cmprow > *:nth-child(4) { display: none; } }
@media (max-width: 980px) { .cag-row { grid-template-columns: 120px 1fr 110px; } .cag-row .c, .cag-row > span:last-child { display: none; } }
@media (max-width: 1080px) { .dstart-grid { grid-template-columns: 1fr; } }

/* document-upload modal */
.dumod { width: min(1680px, 97vw); max-height: 94vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 24px; box-shadow: var(--shadow-lg); overflow: hidden; animation: pbpop .2s ease; }
.dumod__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; padding: 36px 44px 28px; border-bottom: 1px solid var(--line); }
.dumod__head .kick { font-size: 14px; }
.dumod__head .card-title { font-size: 30px; }
.dumod__body { flex: 1; overflow-y: auto; padding: 32px 44px; }
.dumod__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 44px; border-top: 1px solid var(--line); }
.dumod__foot .btn { font-size: 16px; padding: 13px 22px; }
.du-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; text-align: center; padding: 52px; border: 2px dashed var(--line-strong); border-radius: 20px; cursor: pointer; transition: all .14s; background: var(--bg-2); }
.du-drop:hover, .du-drop.is-drag { border-color: var(--brand); background: var(--brand-soft); }
.du-drop__ic { width: 86px; height: 86px; border-radius: 20px; background: var(--surface); color: var(--brand); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.du-drop__ic > svg { width: 42px; height: 42px; }
.du-drop b { font-size: 22px; font-weight: 600; }
.du-drop span { font-size: 15px; color: var(--text-3); }
.du-hint { display: flex; align-items: center; gap: 13px; font-size: 15px; color: var(--text-2); margin: 24px 0; padding: 16px 22px; border-radius: 14px; background: var(--brand-soft); }
.du-hint > svg { color: var(--brand); flex-shrink: 0; width: 20px; height: 20px; }
.du-files { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.du-frow { display: grid; grid-template-columns: 1.7fr 1.1fr 1fr 80px 1fr 46px; gap: 18px; align-items: center; padding: 15px 22px; border-top: 1px solid var(--line); }
.du-frow:first-child { border-top: none; }
.du-frow--h { background: var(--bg-2); }
.du-frow--h span { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.du-frow select, .du-rev { font: inherit; font-size: 16px; padding: 10px 13px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); min-width: 0; width: 100%; }
.du-fname { display: flex; align-items: center; gap: 15px; min-width: 0; }
.du-fname b { font-size: 17px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.du-fmt { font-family: 'Roboto Mono', monospace; font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 7px; flex-shrink: 0; }
.du-frow .cpop__del { width: 34px; height: 34px; }
.du-add { display: inline-flex; align-items: center; gap: 11px; font: inherit; font-size: 16px; font-weight: 600; color: var(--brand); padding: 16px 22px; border-top: 1px dashed var(--line); width: 100%; background: var(--bg-2); }
.du-add:hover { background: var(--brand-soft); }
.du-share { margin-top: 32px; }
.du-share__h { display: flex; align-items: center; gap: 13px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 18px; }
.du-share__h em { font-style: normal; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.dumod .uvr-chip { font-size: 15px; padding: 10px 16px; }
.dumod .uvr__footinfo { font-size: 14px; }

/* CDE-portaal */
.cde__overlay { position: fixed; inset: 0; z-index: 220; background: rgba(8,18,22,.74); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 12px; opacity: 1; }
.cde--workspace { animation: cdePop .18s cubic-bezier(.2,.7,.2,1); }
@keyframes cdePop { from { transform: translateY(8px) scale(.99); } to { transform: none; } }
.cde { width: min(1720px, 98vw); height: min(1080px, 96vh); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.cde__bar { display: flex; align-items: center; gap: 24px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.cde__title { display: flex; align-items: center; gap: 12px; }
.cde__mark { display: inline-flex; }
.cde__mark i { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--brand); display: block; }
.cde__mark i:last-child { border-color: var(--steel); margin-left: -7px; }
.cde__title b { font-size: 16px; font-weight: 600; display: block; }
.cde__title span { font-size: 11.5px; color: var(--text-3); }
.cde__stats { display: flex; gap: 22px; margin-left: 8px; }
.cde__stats div { display: flex; flex-direction: column; }
.cde__stats b { font-size: 18px; font-weight: 600; }
.cde__stats span { font-size: 10.5px; color: var(--text-3); }
.cde__x { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--text-3); flex-shrink: 0; }
.cde__x:hover { background: var(--bg-2); color: var(--text); }
.cde--workspace { height: min(1080px, 96vh); }
.cde__tabs { display: flex; gap: 4px; padding: 0 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.cde__tab { display: inline-flex; align-items: center; gap: 7px; padding: 12px 14px; font-size: 12.5px; font-weight: 500; color: var(--text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; position: relative; }
.cde__tab:hover { color: var(--text-2); }
.cde__tab.is-on { color: var(--brand); border-bottom-color: var(--brand); }
.cde__tabdot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); margin-left: 2px; }
.cde__main { flex: 1; min-height: 0; overflow: hidden; display: flex; }
.cde__main > * { flex: 1; min-height: 0; }

/* Overzicht */
.cdo { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; overflow-y: auto; }
.cdo__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; align-items: start; }
.cdo-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 13px; padding: 16px 18px; }
.cdo-card--wide { grid-column: 1 / -1; }
.cdo-card__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cdo-card__h b { font-size: 13.5px; font-weight: 600; }
.cdo-card__h span { font-size: 11px; color: var(--text-3); }
.cdo-link { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; color: var(--brand); }
.cdo-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; }
.cdo-bar > span { display: block; min-width: 8px; }
.cdo-leg { display: flex; flex-wrap: wrap; gap: 16px; margin: 14px 0 2px; }
.cdo-leg span { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-2); }
.cdo-leg i { width: 9px; height: 9px; border-radius: 3px; }
.cdo-leg b { font-weight: 600; color: var(--text); }
.cdo-flow { display: flex; align-items: center; gap: 9px; margin: 16px 0 4px; }
.cdo-flow span { font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); }
.cdo-flow > svg { color: var(--text-3); }
.cdo-note { display: flex; gap: 8px; font-size: 11.5px; line-height: 1.5; color: var(--text-3); margin: 14px 0 0; }
.cdo-note > svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.cdo-feed { display: flex; flex-direction: column; gap: 12px; }
.cdo-frow { display: grid; grid-template-columns: 30px 1fr auto; gap: 11px; align-items: start; }
.cdo-fic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.cdo-ftxt { font-size: 12px; line-height: 1.45; color: var(--text-2); }
.cdo-ftxt b { font-weight: 600; color: var(--text); }
.cdo-ftxt i { font-style: normal; color: var(--text-3); }
.cdo-ftime { font-size: 10.5px; color: var(--text-3); white-space: nowrap; padding-top: 2px; }
.cdo-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cdo-act { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px; transition: border-color .12s; }
.cdo-act:hover { border-color: var(--line-strong); }
.cdo-act__ic { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cdo-act > span:nth-child(2) { flex: 1; min-width: 0; }
.cdo-act b { font-size: 12.5px; font-weight: 600; display: block; }
.cdo-act i { font-style: normal; font-size: 11px; color: var(--text-3); display: block; margin-top: 2px; }
.cdo-act > svg { color: var(--text-3); flex-shrink: 0; }

/* Partijen & rechten */
.cdp { display: flex; flex-direction: column; min-height: 0; }
.cdp__toggle { display: flex; gap: 4px; padding: 14px 22px 0; flex-shrink: 0; }
.cdp__toggle button { font-size: 12px; font-weight: 500; color: var(--text-3); padding: 7px 14px; border-radius: 9px; }
.cdp__toggle button.is-on { background: var(--brand-soft); color: var(--brand); }
.cdp__note { display: flex; align-items: flex-start; gap: 9px; margin: 12px 22px 0; padding: 10px 13px; background: var(--brand-soft); border-radius: 9px; font-size: 11.5px; line-height: 1.5; color: var(--text-2); }
.cdp__note > svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.cdp__note b { font-weight: 600; color: var(--text); }
.cdp__split { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px 1fr; gap: 0; }
.cdp__list { border-right: 1px solid var(--line); overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.cdp-prow { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 10px; text-align: left; transition: background .12s; }
.cdp-prow:hover { background: var(--bg-2); }
.cdp-prow.is-on { background: var(--brand-soft); }
.cdp-av { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; letter-spacing: .02em; }
.cdp-av--lg { width: 42px; height: 42px; font-size: 13px; border-radius: 11px; }
.cdp-prow__id { flex: 1; min-width: 0; }
.cdp-prow__id b { font-size: 12.5px; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdp-prow__id i { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.cdp-prow__n { font-size: 11px; font-weight: 700; color: var(--text-3); background: var(--bg-2); min-width: 22px; text-align: center; padding: 2px 7px; border-radius: 999px; }
.cdp-prow.is-on .cdp-prow__n { background: var(--surface); }
.cdp__detail { overflow-y: auto; padding: 20px 22px; }
.cdp-head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.cdp-head b { font-size: 16px; font-weight: 600; display: block; }
.cdp-head i { font-style: normal; font-size: 12px; color: var(--text-3); }
.cdp-owner { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--brand); background: var(--brand-soft); padding: 5px 10px; border-radius: 999px; }
.cdp-caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 16px; }
.cdp-cap { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 500; padding: 11px 13px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-3); }
.cdp-cap.is-on { color: var(--text); }
.cdp-cap.is-on > svg { color: var(--pos); }
.cdp-cap:not(.is-on) > svg { color: var(--text-3); opacity: .6; }
.cdp-rights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 6px; }
.cdp-rights > div { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cdp-rights b { font-size: 20px; font-weight: 600; }
.cdp-rights span { font-size: 10.5px; font-weight: 600; }
.cdp-sec { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); margin: 22px 0 11px; }
.cdp-sec em { font-style: normal; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: var(--bg-2); color: var(--text-2); letter-spacing: 0; }
.cdp-docs { display: flex; flex-direction: column; gap: 1px; }
.cdp-drow { display: flex; align-items: center; gap: 11px; padding: 9px 8px; border-radius: 9px; }
.cdp-drow:hover { background: var(--bg-2); }
.cdp-drow__id { flex: 1; min-width: 0; }
.cdp-drow__id b { font-size: 12.5px; font-weight: 500; display: block; }
.cdp-drow__id i { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.cdp-drow__chip { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.cdp-mtx-wrap { overflow: auto; padding: 16px 22px 22px; }
.cdp-mtx { display: grid; align-items: stretch; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cdp-mtx__h { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 6px; background: var(--bg-2); border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.cdp-mtx__h i { font-style: normal; font-size: 9.5px; color: var(--text-3); }
.cdp-mtx__h--doc { flex-direction: row; justify-content: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); border-left: none; padding-left: 16px; }
.cdp-mtx__doc { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-top: 1px solid var(--line); }
.cdp-mtx__doc b { font-size: 12px; font-weight: 500; display: block; }
.cdp-mtx__doc span { font-size: 10px; color: var(--text-3); }
.cdp-mtx__cell { display: flex; align-items: center; justify-content: center; padding: 10px 6px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cdp-mtx__cell.is-none { background: var(--bg-2); }
.cdp-mtx__chip { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.cdp-mtx__dash { color: var(--text-3); opacity: .5; }
.cdp-mtx__legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.cdp-mtx__legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); }
.cdp-mtx__legend i { width: 9px; height: 9px; border-radius: 3px; }

/* Documenten & versies */
.cdd { display: grid; grid-template-columns: 320px 1fr; min-height: 0; }
.cdd__list { border-right: 1px solid var(--line); overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.cdd-grp__h { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 7px; }
.cdd-grp__h span { width: 8px; height: 8px; border-radius: 3px; }
.cdd-grp__h em { font-style: normal; margin-left: auto; padding: 1px 7px; border-radius: 999px; background: var(--bg-2); color: var(--text-2); letter-spacing: 0; }
.cdd-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; text-align: left; width: 100%; transition: background .12s; }
.cdd-row:hover { background: var(--bg-2); }
.cdd-row.is-on { background: var(--brand-soft); }
.cdd-row__id { flex: 1; min-width: 0; }
.cdd-row__id b { font-size: 12px; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdd-row__id i { font-style: normal; font-size: 10px; color: var(--text-3); }
.cdd-row__c { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--text-3); flex-shrink: 0; }
.cdd__detail { overflow-y: auto; padding: 20px 22px; }
.cdd-dh { display: flex; align-items: center; gap: 12px; }
.cdd-dh__id { flex: 1; min-width: 0; }
.cdd-dh__id b { font-size: 15px; font-weight: 600; display: block; }
.cdd-dh__id span { font-size: 11.5px; color: var(--text-3); }
.cdd-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 18px; margin: 16px 0 4px; padding: 15px 16px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; }
.cdd-meta > div { display: flex; flex-direction: column; gap: 4px; }
.cdd-meta span { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.cdd-meta b { font-size: 12.5px; font-weight: 500; }
.cdd-sec { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); margin: 22px 0 12px; }
.cdd-sec > svg { color: var(--text-3); }
.cdd-sec em { font-style: normal; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: var(--bg-2); color: var(--text-2); letter-spacing: 0; }
.cdd-revs { display: flex; flex-direction: column; gap: 2px; position: relative; }
.cdd-rev { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; }
.cdd-rev.is-cur { background: var(--bg-2); border-color: var(--line); }
.cdd-rev__tag { font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); padding: 4px 9px; border-radius: 7px; flex-shrink: 0; }
.cdd-rev.is-cur .cdd-rev__tag { color: var(--brand); border-color: var(--brand); }
.cdd-rev__main { flex: 1; min-width: 0; }
.cdd-rev__main b { font-size: 12.5px; font-weight: 500; display: block; }
.cdd-rev__main i { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.cdd-rev__cur { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pos-tekst); background: color-mix(in srgb, var(--pos) 13%, transparent); padding: 3px 8px; border-radius: 999px; }
.cdd-rev__old { font-size: 10.5px; color: var(--text-3); }
.cdd-rev__dl { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-3); border: none; background: transparent; padding: 0; cursor: pointer; }
.cdd-rev__dl:hover { background: var(--surface); color: var(--brand); }
.cdd-share { display: flex; flex-direction: column; gap: 1px; }
.cdd-shrow { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 9px; }
.cdd-shrow:hover { background: var(--bg-2); }
.cdd-shrow__id { flex: 1; min-width: 0; }
.cdd-shrow__id b { font-size: 12.5px; font-weight: 500; display: block; }
.cdd-shrow__id i { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.cdd-shrow__chip { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.cdd-comments { display: flex; flex-direction: column; gap: 14px; }
.cdd-cm { display: flex; gap: 11px; }
.cdd-cm__body { flex: 1; min-width: 0; }
.cdd-cm__h { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.cdd-cm__h b { font-size: 12px; font-weight: 600; }
.cdd-cm__h i { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.cdd-cm__res { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: var(--pos-tekst); background: color-mix(in srgb, var(--pos) 13%, transparent); padding: 2px 7px; border-radius: 999px; }
.cdd-cm__body p { font-size: 12.5px; line-height: 1.5; color: var(--text-2); margin: 0; }
.cdd-cnew { display: flex; align-items: center; gap: 11px; margin-top: 4px; }
.cdd-cnew input { flex: 1; font: inherit; font-size: 12.5px; padding: 9px 13px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg-2); color: var(--text); }
.cdd-cnew input:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.cdd-cnew .btn { padding: 9px 13px; }

/* Activiteit */
.cda { display: flex; flex-direction: column; min-height: 0; }
.cda__filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 22px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.cda__filters button { font-size: 11.5px; font-weight: 500; color: var(--text-3); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); }
.cda__filters button:hover { color: var(--text-2); }
.cda__filters button.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.cda__feed { flex: 1; overflow-y: auto; padding: 12px 22px 22px; }
.cda-row { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 14px; align-items: center; padding: 13px 4px; border-bottom: 1px solid var(--line); }
.cda-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.cda-row__body { min-width: 0; }
.cda-row__txt { font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.cda-row__txt b { font-weight: 600; color: var(--text); }
.cda-row__doc { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-3); margin-top: 3px; }
.cda-row__kind { font-size: 10.5px; font-weight: 600; color: var(--text-3); background: var(--bg-2); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.cda-row__t { font-size: 11px; color: var(--text-3); white-space: nowrap; }
@media (max-width: 1080px) { .du-frow { grid-template-columns: 1.5fr 1fr 30px; } .du-frow > span:nth-child(4), .du-frow > select:nth-child(5), .du-frow > .du-rev { display: none; } }

/* nieuwe uitvraag-modal */
.uvr { width: min(880px, 96vw); max-height: 92vh; 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: pbpop .2s ease; }
.uvr__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 16px; border-bottom: 1px solid var(--line); }
.uvr__title { font-size: 20px; font-weight: 400; letter-spacing: -.01em; margin: 4px 0 0; }
.uvr__tags { display: flex; gap: 8px; margin-top: 10px; }
.uvr__body { flex: 1; overflow-y: auto; padding: 18px 24px; }
.uvr__body .cpop__sec { margin-bottom: 24px; }
.uvr__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--surface); }
.uvr__footinfo { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-3); }
.uvr-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.uvr-f--full { grid-column: 1 / -1; }
.uvr-fields .bib-field { margin-bottom: 0; }
.uvr-prow { display: grid; grid-template-columns: 1fr 92px 96px 30px; gap: 10px; align-items: center; padding: 7px 12px; border-top: 1px solid var(--line); }
.uvr-prow--h { border-top: none; }
.uvr-prow--h span { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.uvr-prow--h .r { text-align: right; }
.uvr-hint { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-3); margin: 10px 2px 0; }
.uvr-hint > svg { color: var(--amber); flex-shrink: 0; }
.uvr-req { display: flex; flex-direction: column; }
.uvr-reqrow { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-top: 1px solid var(--line); }
.uvr-reqrow:first-child { border-top: none; }
.uvr-reqrow > b { flex: 1; font-size: 13px; font-weight: 500; }
.uvr-reqrow > .cpop__pedit { flex: 1; }
.uvr-pill { font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; color: var(--text-3); background: var(--bg-2); border: 1px solid var(--line); flex-shrink: 0; }
.uvr-pill.is-req { color: var(--brand); background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.uvr-vw { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.uvr-vwrow { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); cursor: pointer; padding: 6px 0; }
.uvr-vwrow input { width: 16px; height: 16px; accent-color: var(--brand); flex-shrink: 0; }
.uvr-count { font-style: normal; margin-left: 8px; font-size: 11px; color: var(--text-3); }
.uvr-parts { display: flex; flex-wrap: wrap; gap: 8px; }
.uvr-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 7px 13px; border: 1px solid var(--line-strong); border-radius: 999px; }
.uvr-chip.is-on { background: var(--brand); color: #fff; border-color: var(--brand); }
.uvr-chaprow { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--bg-2); }
.uvr-chapedit { flex: 1; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 7px; padding: 5px 10px; }
.uvr-chapedit:focus { outline: none; border-color: var(--brand); }
.bpick__overlay { z-index: 240; }
.bpick__chap { border-top: 1px solid var(--line); }
.bpick__chap:first-child { border-top: none; }
.bpick__chaph { display: flex; align-items: center; gap: 10px; padding: 9px 6px; }
.bpick__exp { width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: var(--text-3); flex-shrink: 0; }
.bpick__exp:hover { background: var(--bg-2); }
.bpick__code { font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 2px 7px; border-radius: 5px; flex-shrink: 0; }
.bpick__cnm { flex: 1; font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bpick__n { font-size: 11px; color: var(--text-3); flex-shrink: 0; }
.bpick__take { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11px; font-weight: 600; color: var(--brand); background: var(--brand-soft); padding: 5px 10px; border-radius: 7px; flex-shrink: 0; }
.bpick__take:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.bpick__row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 8px 10px 8px 38px; border-top: 1px solid var(--line); transition: background .12s; }
.bpick__row:hover { background: var(--brand-soft); }
.bpick__roms { flex: 1; font-size: 12.5px; color: var(--text-2); min-width: 0; }
.bpick__rqty { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; flex-shrink: 0; }
@media (max-width: 720px) { .uvr-fields, .uvr-vw { grid-template-columns: 1fr; } }
.cpop__del { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--text-3); border: 1px solid var(--line); }
.cpop__del:hover { border-color: var(--neg); color: var(--neg); }
.cpop__docs { display: flex; flex-direction: column; gap: 8px; }
.cpop__doc { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.cpop__docic { width: 38px; height: 30px; border-radius: 7px; font-size: 9.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cpop__docmain { flex: 1; min-width: 0; }
.cpop__docmain b { font-size: 12.5px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpop__docmain span { font-size: 10.5px; color: var(--text-3); }
.cpop__docedit { width: 100%; font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg-2); color: var(--text); }
.cpop__docdl { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--brand); border: 1px solid var(--line); flex-shrink: 0; }
.cpop__docdl:hover { background: var(--brand-soft); }
.cpop__vrow--edit { display: grid; grid-template-columns: 1fr 1fr 26px; gap: 7px; align-items: center; }
.cpop__vwt, .cpop__vwd { font: inherit; font-size: 11.5px; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--text); min-width: 0; }
.cpop__vwt { font-weight: 600; }
.cpick__overlay { position: fixed; inset: 0; z-index: 95; background: rgba(15,30,40,.4); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 24px; }
.cpick { width: min(620px, 100%); background: var(--surface); border-radius: 15px; box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; max-height: 76vh; }
.cpick__head { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.cpick__head b { font-size: 15px; font-weight: 600; }
.cpick__search { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--text-3); }
.cpick__modes { display: flex; gap: 6px; padding: 10px 16px 0; }
.cpick__mode { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); cursor: pointer; }
.cpick__mode.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.cpick__recept .bpick__roms b { display: block; font-size: 13px; }
.cpick__recmeta { display: block; font-style: normal; font-size: 11px; color: var(--text-3); margin-top: 1px; }
.cpick__recpr { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cpick__recpr em { font-style: normal; font-size: 10.5px; color: var(--text-3); font-weight: 500; }
.cpick__foot { display: flex; gap: 6px; align-items: flex-start; font-size: 11px; color: var(--text-3); line-height: 1.5; padding: 10px 16px 14px; border-top: 1px solid var(--line); margin: 0; }
.cpick__search input { flex: 1; border: none; outline: none; background: none; font: inherit; font-size: 13px; color: var(--text); }
.cpick__list { overflow-y: auto; padding: 6px; }
.cpick__row { display: grid; grid-template-columns: 74px 1fr auto auto; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 10px 12px; border-radius: 9px; }
.cpick__row:hover { background: var(--bg-2); }
.cpick__oms { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpick__amt { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ============================================================
   Leveringen — klikbare rij + logistiek-detailmodal
   ============================================================ */
.mp-row.is-click { cursor: pointer; border-radius: 8px; transition: background .12s; }
.mp-row.is-click:hover { background: var(--bg-2); }

.levd { width: min(840px, 96vw); max-height: 92vh; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.levd__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
.levd__title { font-size: 21px; font-weight: 500; margin: 4px 0 9px; letter-spacing: -.01em; }
.levd__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.levd__chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); padding: 4px 10px; border-radius: 99px; }
.levd__body { padding: 18px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.levd__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.levd__sec { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.levd__sec--full { grid-column: 1 / -1; }
.levd__sech { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 11px; }
.levd__sech svg { color: var(--brand); }
.levd__sech em { font-style: normal; font-size: 11px; font-weight: 400; color: var(--text-3); margin-left: auto; }
.levd__kv { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.levd__kv:last-child { border-bottom: none; }
.levd__kv > span { color: var(--text-3); flex-shrink: 0; }
.levd__kv > b { font-weight: 600; text-align: right; }
.levd__lading { display: flex; flex-direction: column; }
.levd__lrow { display: grid; grid-template-columns: 1fr 160px; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.levd__lrow:last-child { border-bottom: none; }
.levd__lrow .r { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.levd__lrow--h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); font-weight: 600; }
.levd__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.levd__hulp { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); padding: 6px 11px; border-radius: 8px; }
.levd__hulp svg { color: var(--pos); }
.levd__check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.levd__check li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.levd__check svg { color: var(--pos); flex-shrink: 0; }
.levd__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--bg-2); }
.levd__foot > span { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-3); }
.levd__footbtns { display: flex; gap: 10px; flex-shrink: 0; }
.levd__notif { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 2px; border-radius: 8px; background: var(--signal); color: #fff; font-size: 10px; font-weight: 700; }

/* afstemmen met leverancier */
.afst { width: min(900px, 96vw); max-height: 92vh; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.afst__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
.afst__title { font-size: 21px; font-weight: 500; margin: 4px 0 9px; letter-spacing: -.01em; }
.afst__stat { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; background: var(--bg-2); color: var(--text-3); }
.afst__stat--verzonden { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber-tekst); }
.afst__stat--beantwoord { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.afst__stat--afgestemd { background: color-mix(in srgb, var(--pos) 14%, transparent); color: var(--pos-tekst); }
.afst__body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; padding: 18px 22px; overflow-y: auto; }
.afst__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.afst__sec { display: flex; flex-direction: column; gap: 10px; }
.afst__sech { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-3); }
.afst__sech svg { color: var(--brand); }
.afst__sec--contra { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--bg-2); }
.afst__form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.afst__fld { display: flex; flex-direction: column; gap: 4px; }
.afst__fld span { font-size: 11px; color: var(--text-3); font-weight: 600; }
.afst__fld input, .afst__fld textarea, .afst__contra { font: inherit; font-size: 13px; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--text); resize: vertical; }
.afst__fld input:disabled { background: var(--bg-2); color: var(--text-2); }
.afst__hint { font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin: 0; }
.afst__contra { width: 100%; box-sizing: border-box; }
.afst__contrabtns { display: flex; gap: 8px; flex-wrap: wrap; }
.afst__thread { display: flex; flex-direction: column; gap: 9px; }
.afst__msg { padding: 10px 13px; border-radius: 11px; max-width: 88%; }
.afst__msg--cooper { background: var(--brand-soft); align-self: flex-end; border-bottom-right-radius: 4px; }
.afst__msg--lev { background: var(--bg-2); align-self: flex-start; border-bottom-left-radius: 4px; }
.afst__msg--sys { background: color-mix(in srgb, var(--pos) 10%, transparent); align-self: stretch; max-width: 100%; }
.afst__msghd { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.afst__msghd b { font-size: 11.5px; font-weight: 600; }
.afst__msghd i { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.afst__msg p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text); }
.afst__msgv { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--surface); padding: 2px 8px; border-radius: 6px; }
.afst__side { display: flex; flex-direction: column; gap: 14px; }
.afst__card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.afst__card--act { border-color: color-mix(in srgb, var(--brand) 28%, var(--line)); background: var(--brand-soft); }
.afst__cardh { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.afst__cardh svg { color: var(--brand); }
.afst__kv { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 12.5px; }
.afst__kv span { color: var(--text-3); }
.afst__kv b { font-weight: 600; text-align: right; }
.afst__opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; margin-top: 8px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); cursor: pointer; }
.afst__opt:hover { border-color: var(--brand); }
.afst__opt b { display: block; font-size: 12.5px; }
.afst__opt i { font-style: normal; font-size: 11px; color: var(--text-3); }
.afst__opt svg { color: var(--pos); flex-shrink: 0; }
.afst__done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 18px 14px; border: 1px solid color-mix(in srgb, var(--pos) 28%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--pos) 8%, transparent); }
.afst__doneic { width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--pos) 16%, transparent); color: var(--pos); display: flex; align-items: center; justify-content: center; }
.afst__done b { font-size: 13.5px; }
.afst__done span { font-size: 11.5px; color: var(--text-2); line-height: 1.5; }
@media (max-width: 760px) { .afst__body { grid-template-columns: 1fr; } .afst__form { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .levd__grid { grid-template-columns: 1fr; }
  .levd__foot { flex-direction: column; align-items: stretch; }
}

/* VGM-meldformulier */
.vgm-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand); margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.vgm-sub:first-child { margin-top: 0; }
.vgm-risk { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; margin-top: 4px; }
.vgm-risk__dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.vgm-risk b { font-size: 13.5px; }
.vgm-risk i { font-style: normal; font-size: 11.5px; color: var(--text-3); margin-left: auto; }
.vgm-foto { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: 10px; margin-top: 14px; }
.vgm-foto > svg { color: var(--text-3); }
.vgm-foto b { font-size: 12.5px; font-weight: 600; display: block; }
.vgm-foto span { font-size: 11px; color: var(--text-3); }

/* ============================================================
   Boeking-dossier (kostenregister)
   ============================================================ */
.dos { width: min(1000px, 96vw); max-height: 92vh; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.dos__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 15px; border-bottom: 1px solid var(--line); }
.dos__title { font-size: 20px; font-weight: 500; margin: 4px 0 9px; letter-spacing: -.01em; }
.dos__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.dos__chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); padding: 4px 10px; border-radius: 99px; }
.dos__chip--ok { color: var(--pos-tekst); background: color-mix(in srgb,var(--pos) 12%,transparent); border-color: transparent; }
.dos__chip--mid { color: var(--steel); background: color-mix(in srgb,var(--steel) 14%,transparent); border-color: transparent; }
.dos__chip--open { color: var(--amber-tekst); background: color-mix(in srgb,var(--amber) 12%,transparent); border-color: transparent; }

.dos__trail { display: flex; align-items: center; gap: 4px; padding: 13px 22px; border-bottom: 1px solid var(--line); background: var(--bg-2); overflow-x: auto; }
.dos-tline { flex: 1; height: 2px; background: var(--line-strong); min-width: 16px; }
.dos-tline.is-on { background: var(--brand); }
.dos-tnode { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 9px; background: transparent; border: 1px solid transparent; cursor: pointer; flex-shrink: 0; }
.dos-tnode:hover { background: var(--surface); }
.dos-tnode.is-sel { background: var(--surface); border-color: var(--line-strong); }
.dos-tnode__dot { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--track); color: #fff; }
.dos-tnode__dot i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.dos-tnode.is-done .dos-tnode__dot { background: var(--brand); }
.dos-tnode.is-pending .dos-tnode__dot { background: transparent; border: 1.5px dashed var(--line-strong); }
.dos-tnode__lbl { display: flex; flex-direction: column; line-height: 1.25; }
.dos-tnode__lbl b { font-size: 12px; font-weight: 600; }
.dos-tnode__lbl i { font-style: normal; font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.dos__body { padding: 20px 22px; overflow-y: auto; }

/* factuur-PDF */
.dos-pdf { max-width: 600px; margin: 0 auto; }
.dos-pdf__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px 9px 0 0; border-bottom: none; }
.dos-pdf__file { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--text-2); }
.dos-pdf__dl { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--brand); background: none; border: none; cursor: pointer; }
.dos-paper { background: #fdfdfb; color: #1a1a1a; border: 1px solid var(--line); border-radius: 0 0 9px 9px; padding: 30px 34px 26px; box-shadow: inset 0 1px 0 rgba(0,0,0,.04); }
.dos-inv__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.dos-inv__big { font-size: 17px; font-weight: 700; color: #111; }
.dos-inv__top span { font-size: 11.5px; color: #777; }
.dos-inv__fact { text-align: right; }
.dos-inv__fact b { display: block; font-size: 15px; letter-spacing: .12em; color: #111; }
.dos-inv__fact span { font-size: 12px; color: #555; font-variant-numeric: tabular-nums; }
.dos-inv__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; padding: 14px 0; border-top: 1px solid #e7e4dd; border-bottom: 1px solid #e7e4dd; margin-bottom: 18px; }
.dos-inv__meta span { font-size: 10.5px; color: #888; display: block; }
.dos-inv__meta b { font-size: 12.5px; color: #222; font-weight: 600; }
.dos-inv__tbl { margin-bottom: 16px; }
.dos-inv__r { display: grid; grid-template-columns: 1fr 70px 110px; gap: 10px; padding: 9px 0; border-bottom: 1px solid #efece5; font-size: 12.5px; color: #222; }
.dos-inv__r .r { text-align: right; font-variant-numeric: tabular-nums; }
.dos-inv__r--h { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #999; font-weight: 700; border-bottom: 1.5px solid #ddd; }
.dos-inv__sum { margin-left: auto; width: 260px; }
.dos-inv__sum > div { display: flex; justify-content: space-between; font-size: 12.5px; color: #444; padding: 5px 0; }
.dos-inv__sum b { font-variant-numeric: tabular-nums; color: #222; }
.dos-inv__tot { border-top: 1.5px solid #ddd; margin-top: 4px; padding-top: 8px !important; font-weight: 700; }
.dos-inv__tot span, .dos-inv__tot b { font-size: 14px; color: #111; }
.dos-inv__foot { margin-top: 22px; padding-top: 14px; border-top: 1px solid #e7e4dd; font-size: 10.5px; color: #999; line-height: 1.5; }

/* werkbon / betaling kaarten */
.dos-sec { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin: 0 auto; }
.dos-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 15px 17px; }
.dos-card__h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.dos-card__h svg { color: var(--brand); }
.dos-card__h em { font-style: normal; font-family: 'Roboto Mono', monospace; font-size: 11.5px; color: var(--text-3); margin-left: auto; }
.dos-kv { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.dos-kv:last-child { border-bottom: none; }
.dos-kv > span { color: var(--text-3); flex-shrink: 0; }
.dos-kv > b { font-weight: 600; text-align: right; }
.dos-match { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb,var(--pos) 8%,var(--surface)); border: 1px solid color-mix(in srgb,var(--pos) 28%,var(--line)); }
.dos-match__ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--pos); color: #fff; display: flex; align-items: center; justify-content: center; }
.dos-match b { display: block; font-size: 13px; margin-bottom: 3px; }
.dos-match span { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.dos-exactbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.dos-exactbar .exact-src__e { width: 30px; height: 30px; font-size: 16px; flex-shrink: 0; }
.dos-exactbar b { display: block; font-size: 13px; }
.dos-exactbar > div span { font-size: 11.5px; color: var(--text-3); }
.dos-vstat { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 99px; flex-shrink: 0; }
.dos-vstat.is-ok { color: var(--pos-tekst); background: color-mix(in srgb,var(--pos) 13%,transparent); }
.dos-vstat.is-open { color: var(--amber-tekst); background: color-mix(in srgb,var(--amber) 13%,transparent); }
.dos-vstat.is-none { color: var(--text-3); background: var(--track); }

/* termijnfactuur-modal */
.reg__row--btn { width: 100%; background: none; border: none; cursor: pointer; text-align: left; font: inherit; transition: background .12s; }
.reg__row--btn:hover { background: var(--bg-2); }
.tmf .dos__body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: start; }
.tmf-side { display: flex; flex-direction: column; gap: 14px; }
.tmf-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }
.tmf-actions .btn { width: 100%; justify-content: center; }
.tmf-done { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: 10px; font-size: 12.5px; color: var(--pos-tekst); background: color-mix(in srgb,var(--pos) 9%,var(--surface)); border: 1px solid color-mix(in srgb,var(--pos) 28%,var(--line)); }
.tmf-done svg { flex-shrink: 0; }
@media (max-width: 820px) { .tmf .dos__body { grid-template-columns: 1fr; } }

/* ============================================================
   Contracten- & verplichtingenregister
   ============================================================ */
.fcr-tblwrap { overflow-x: auto; padding: 0 8px 4px; }
.fcr-tbl { min-width: 900px; }
.fcr-row { display: grid; grid-template-columns: 1.5fr 1.2fr 110px 1.2fr 110px 92px 78px 22px; gap: 12px; align-items: center; padding: 11px 12px; border-top: 1px solid var(--line); }
.fcr-row--h { border-top: none; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); font-weight: 600; padding-bottom: 9px; }
.fcr-row--btn { width: 100%; background: none; border: none; border-top: 1px solid var(--line); cursor: pointer; text-align: left; font: inherit; transition: background .12s; }
.fcr-row--btn:hover { background: var(--bg-2); }
.fcr-row .r { text-align: right; }
.fcr-naam { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fcr-naam b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcr-naam em { font-style: normal; font-size: 10.5px; color: var(--text-3); font-family: 'Roboto Mono', monospace; flex-shrink: 0; }
.fcr-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.fcr-partij { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcr-num { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text-2); }
.fcr-gef { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.fcr-gef b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fcr-bar { width: 100%; max-width: 90px; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.fcr-bar i { display: block; height: 100%; background: var(--brand); }
.fcr-wka { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.fcr-go { display: flex; justify-content: flex-end; color: var(--text-3); }

/* contract-detail */
.fcr-det { width: min(960px, 96vw); max-height: 92vh; }
.fcr-detbody { overflow-y: auto; }
.fcr-detgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.fcr-stack { display: flex; height: 22px; border-radius: 6px; overflow: hidden; margin-bottom: 10px; }
.fcr-stack i { height: 100%; }
.fcr-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; font-size: 11px; color: var(--text-2); }
.fcr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fcr-legend i { width: 10px; height: 10px; border-radius: 3px; }
.fcr-sched { display: flex; flex-direction: column; }
.fcr-schedrow { display: grid; grid-template-columns: 1fr 48px 110px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.fcr-schedrow:last-child { border-bottom: none; }
.fcr-schedm { display: flex; flex-direction: column; }
.fcr-schedm i { font-style: normal; font-size: 11px; color: var(--text-3); }
.fcr-schedpct { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.fcr-schedamt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.fcr-wkabar { display: flex; gap: 11px; padding: 12px 14px; border: 1px solid; border-radius: 10px; margin-bottom: 12px; }
.fcr-wkadot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.fcr-wkabar b { display: block; font-size: 13px; margin-bottom: 2px; }
.fcr-wkabar span { font-size: 11.5px; color: var(--text-2); line-height: 1.5; }
.fcr-voorw { display: flex; flex-direction: column; gap: 9px; }
.fcr-voorwrow { display: flex; gap: 9px; }
.fcr-voorwrow svg { color: var(--pos); flex-shrink: 0; margin-top: 2px; }
.fcr-voorwrow b { display: block; font-size: 12.5px; font-weight: 600; }
.fcr-voorwrow span { font-size: 11.5px; color: var(--text-3); }
.fcr-doc { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; margin-top: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; color: var(--text-2); cursor: pointer; }
.fcr-doc:first-of-type { margin-top: 0; }
.fcr-doc:hover { border-color: var(--brand); color: var(--brand); }
.fcr-doc svg:first-child { color: var(--text-3); }
.fcr-doc svg:last-child { margin-left: auto; }
.fcr-doc:hover svg { color: var(--brand); }
@media (max-width: 820px) { .fcr-detgrid { grid-template-columns: 1fr; } }

/* ============================================================
   Werkbonnen-app + voortgangscurve (EVM)
   ============================================================ */
.wb-list { display: flex; flex-direction: column; }
.wb-row { display: grid; grid-template-columns: 92px 1fr 132px 104px 104px 22px; gap: 14px; align-items: center; width: 100%; padding: 12px 16px; background: none; border: none; border-top: 1px solid var(--line); cursor: pointer; text-align: left; font: inherit; transition: background .12s; }
.wb-row:hover { background: var(--bg-2); }
.wb-row__id { display: flex; flex-direction: column; }
.wb-row__id b { font-size: 12.5px; font-weight: 600; font-family: 'Roboto Mono', monospace; }
.wb-row__id i { font-style: normal; font-size: 11px; color: var(--text-3); }
.wb-row__main { min-width: 0; }
.wb-row__main b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-row__meta { font-size: 11.5px; color: var(--text-3); }
.wb-row__vg { display: flex; align-items: center; gap: 8px; }
.wb-vgbar { flex: 1; height: 5px; border-radius: 3px; background: var(--track); overflow: hidden; }
.wb-vgbar i { display: block; height: 100%; background: var(--brand); }
.wb-vgbar--lg { height: 7px; margin-top: 8px; }
.wb-row__vg em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; }
.wb-row__amt { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.wb-row__st { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; justify-self: start; }

.wb-det { width: min(720px, 96vw); max-height: 92vh; }
.wb-detbody { overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.wb-detgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wb-uren { display: flex; flex-direction: column; }
.wb-uren__r { display: grid; grid-template-columns: 1.3fr 1fr 60px 110px; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.wb-uren__r:last-child { border-bottom: none; }
.wb-uren__r .r { text-align: right; font-variant-numeric: tabular-nums; }
.wb-uren__r--h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); font-weight: 600; }
@media (max-width: 700px) { .wb-detgrid { grid-template-columns: 1fr; } .wb-row { grid-template-columns: 80px 1fr 90px 22px; } .wb-row__vg, .wb-row__amt { display: none; } }

/* werkbon-formulier */
.wb-modal { width: min(640px, 96vw); max-height: 92vh; display: flex; flex-direction: column; }
.wb-form-uren { display: flex; flex-direction: column; gap: 8px; }
.wb-form-row { display: grid; grid-template-columns: 1.4fr 1fr 64px 14px 32px; gap: 8px; align-items: center; }
.wb-form-row select, .wb-form-row input { padding: 8px 9px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text); font: inherit; font-size: 12.5px; min-width: 0; }
.wb-form-u { font-size: 12px; color: var(--text-3); }
.wb-form-del { color: var(--text-3); display: flex; justify-content: center; }
.wb-form-del:hover { color: var(--neg); }
.wb-form-add { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--brand); background: none; border: none; cursor: pointer; padding: 4px 0; align-self: flex-start; }
.wb-matpick { display: flex; flex-wrap: wrap; gap: 8px; }
.wb-matchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line-strong); padding: 6px 11px; border-radius: 8px; cursor: pointer; }
.wb-matchip.is-on { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.wb-matchip svg { color: var(--brand); }
.wb-vgslider { display: flex; align-items: center; gap: 14px; }
.wb-vgslider input[type=range] { flex: 1; accent-color: var(--brand); }
.wb-vgslider b { font-size: 15px; font-weight: 600; min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.wb-foot-tot { font-size: 12px; color: var(--text-3); margin-right: auto; }
.wb-foot-tot b { color: var(--text); font-weight: 600; }

/* voortgangscurve */
.vc-leg { display: flex; gap: 14px; font-size: 11.5px; color: var(--text-2); }
.vc-leg span { display: inline-flex; align-items: center; gap: 6px; }
.vc-leg i { width: 14px; height: 3px; border-radius: 2px; }
.vc-wrap { margin: 8px 0 4px; }
.vc-svg { width: 100%; height: 200px; display: block; }
.vc-xaxis { display: flex; justify-content: space-between; padding: 0 4px; }
.vc-xaxis span { font-size: 10.5px; color: var(--text-3); }
.vc-xaxis span.is-now { color: var(--amber-tekst); font-weight: 700; }

/* ============================================================
   CRM / kansenpijplijn (acquisitie)
   ============================================================ */
.kp-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: start; }
.kp-col { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-width: 0; }
.kp-colhead { display: flex; align-items: center; gap: 7px; padding: 4px 4px 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.kp-coldot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.kp-colhead b { font-size: 11.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-colcount { font-size: 10.5px; font-weight: 600; color: var(--text-3); background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 0 6px; }
.kp-colsom { margin-left: auto; font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.kp-cards { display: flex; flex-direction: column; gap: 8px; }
.kp-card { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; padding: 11px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: all .12s; }
.kp-card:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.kp-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.kp-card__top b { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.kp-bv { font-size: 9.5px; font-weight: 700; color: var(--text-3); background: var(--bg-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; flex-shrink: 0; }
.kp-card__client { font-size: 11.5px; color: var(--text-2); }
.kp-card__soort { font-size: 11px; color: var(--text-3); }
.kp-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.kp-card__waarde { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kp-win { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kp-winbar { width: 36px; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.kp-winbar i { display: block; height: 100%; }
.kp-winbar--lg { width: 100%; height: 7px; margin: 6px 0; }
.kp-card__deadline { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-3); margin-top: 3px; }
/* h123 (Q56): teller open offerteaanvragen onder een kans, klik naar het onderdeel van het project. */
.kp-cardwrap { display: flex; flex-direction: column; }
.kp-cardwrap.heeft-oa > .kp-card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.kp-card__oa { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 12px; font: inherit; font-size: 11px; font-weight: 600; color: var(--brand); text-align: left; background: var(--bg-2); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; cursor: pointer; }
.kp-card__oa svg:last-child { margin-left: auto; }
.kp-card__oa:hover { color: var(--text); border-color: var(--brand); }
.kp-oa-link { display: inline-flex; align-items: center; gap: 5px; padding: 0; font: inherit; font-weight: 600; color: var(--brand); background: none; border: 0; cursor: pointer; }
.kp-oa-link:hover { text-decoration: underline; }
.kp-empty { font-size: 11px; color: var(--text-3); text-align: center; padding: 16px 0; font-style: italic; }

.kp-det { width: min(820px, 96vw); max-height: 92vh; }
.kp-detbody { overflow-y: auto; }
.kp-detgrid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; align-items: start; }
.kp-acts { display: flex; flex-direction: column; }
.kp-act { display: grid; grid-template-columns: 54px 14px 1fr; gap: 8px; align-items: start; padding: 7px 0; }
.kp-act__d { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; padding-top: 1px; }
.kp-act__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-top: 4px; position: relative; }
.kp-act:not(:last-child) .kp-act__dot::after { content: ''; position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: 1.5px; height: 22px; background: var(--line-strong); }
.kp-act__t { font-size: 12.5px; color: var(--text); line-height: 1.4; }
.kp-addact { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--brand); margin-top: 8px; cursor: pointer; }
@media (max-width: 1100px) { .kp-board { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .kp-board { grid-template-columns: 1fr 1fr; } .kp-detgrid { grid-template-columns: 1fr; } }

/* ============================================================
   Rapportage- & export-centrum
   ============================================================ */
.rap-config { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.rap-field { display: flex; flex-direction: column; gap: 5px; min-width: 200px; }
.rap-field span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.rap-field select { padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text); font: inherit; font-size: 13px; }
.rap-config__hint { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-3); margin-left: auto; }
.rap-config__hint svg { color: var(--brand); }

.rap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rap-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; position: relative; }
.rap-card.is-disabled { opacity: .55; }
.rap-card__ic { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.rap-card__body { flex: 1; }
.rap-card__body b { font-size: 14px; font-weight: 600; }
.rap-card__body p { font-size: 12px; color: var(--text-2); line-height: 1.5; margin: 6px 0 10px; }
.rap-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.rap-scope, .rap-pages { font-size: 10.5px; color: var(--text-3); background: var(--bg-2); border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px; }
.rap-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rap-forms { display: flex; gap: 5px; }
.rap-form { font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 3px 8px; border-radius: 5px; }
.rap-card__foot .btn { padding: 7px 12px; font-size: 12px; }
.rap-card__note { position: absolute; bottom: 16px; left: 16px; font-size: 10px; color: var(--amber-tekst); }

.rap-recent { display: flex; flex-direction: column; }
.rap-recrow { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--line); }
.rap-recic { flex-shrink: 0; }
.rap-recmain { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rap-recmain b { font-size: 13px; font-weight: 600; }
.rap-recmain i { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.rap-dl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--brand); background: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px; cursor: pointer; }
.rap-dl:hover { border-color: var(--brand); }

/* genereer-modal */
.rap-gen { width: min(560px, 96vw); max-height: 92vh; }
.rap-genbody { overflow-y: auto; min-height: 200px; }
.rap-secs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rap-secs li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-2); }
.rap-secs svg { color: var(--pos); }
.rap-fmtpick { margin-top: 16px; }
.rap-fmtpick > span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.rap-fmtrow { display: flex; gap: 8px; margin-top: 8px; }
.rap-fmtbtn { font-size: 12.5px; font-weight: 500; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 9px; padding: 8px 16px; cursor: pointer; }
.rap-busy { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 0; text-align: center; }
.rap-busy b { font-size: 14px; }
.rap-busy span { font-size: 12px; color: var(--text-3); }
.rap-done { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 30px 0; text-align: center; }
.rap-done__ic { width: 52px; height: 52px; border-radius: 50%; background: var(--pos); color: #fff; display: flex; align-items: center; justify-content: center; }
.rap-done b { font-size: 16px; }
.rap-done > span { font-size: 12.5px; color: var(--text-3); }
.rap-done__exact { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--text-2); }
.rap-done__exact .exact-src__e { width: 24px; height: 24px; font-size: 13px; }
@media (max-width: 1100px) { .rap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .rap-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Veld-app (mobiele uitvoerder-app) — bouwplaats-tab
   ============================================================ */
.va-layout { display: grid; grid-template-columns: 402px 1fr; gap: 40px; align-items: start; }
.va-phone { display: flex; justify-content: center; }
.va-info { padding-top: 12px; display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.va-info__lead { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.va-info__lead b { color: var(--text); font-weight: 600; }
.va-feat { display: flex; gap: 13px; align-items: flex-start; }
.va-feat__ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.va-feat b { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.va-feat span { display: block; font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin-top: 2px; }
.va-info__foot { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.va-info__foot svg { color: var(--brand); }
@media (max-width: 920px) { .va-layout { grid-template-columns: 1fr; justify-items: center; } .va-info { max-width: 402px; } }

/* ============================================================
   Prijslijst-import (Databibliotheek · Batch F)
   ============================================================ */
.pli-applied { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 12px; padding: 11px 14px; border-radius: 10px; background: color-mix(in srgb,var(--pos) 9%,var(--surface)); border: 1px solid color-mix(in srgb,var(--pos) 28%,var(--line)); font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.pli-applied svg { color: var(--pos); flex-shrink: 0; margin-top: 2px; }
.pli-applied b { color: var(--text); }
.pli-modal { width: min(720px, 96vw); max-height: 92vh; }
.pli-drop { max-width: 460px; margin: 0 auto; }
.pli-dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 34px 20px; border: 1.5px dashed var(--line-strong); border-radius: 14px; color: var(--text-3); }
.pli-dropzone svg { color: var(--brand); }
.pli-dropzone b { font-size: 14.5px; color: var(--text); }
.pli-dropzone span { font-size: 12px; }
.pli-hint { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-3); margin-top: 14px; }
.pli-hint svg { color: var(--brand); }
.pli-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.pli-summary > div { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.pli-summary span { font-size: 11px; color: var(--text-3); }
.pli-summary b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pli-tbl { display: flex; flex-direction: column; }
.pli-row { display: grid; grid-template-columns: 80px 1fr 90px 90px 64px; gap: 10px; align-items: center; padding: 9px 6px; border-top: 1px solid var(--line); font-size: 12.5px; }
.pli-row--h { border-top: none; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); font-weight: 600; }
.pli-row .r { text-align: right; }
.pli-art { display: flex; flex-direction: column; }
.pli-art i { font-style: normal; font-size: 11px; color: var(--text-3); }
.pli-num { font-variant-numeric: tabular-nums; }
.pli-num--old { color: var(--text-3); text-decoration: line-through; }
.pli-delta { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { .pli-summary { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   Factuurgoedkeuring (Financiën · Batch H′)
   ============================================================ */
.fg-list { display: flex; flex-direction: column; }
.fg-row { display: grid; grid-template-columns: 92px 1fr 150px 110px 116px 22px; gap: 12px; align-items: center; width: 100%; padding: 12px 16px; background: none; border: none; border-top: 1px solid var(--line); cursor: pointer; text-align: left; font: inherit; transition: background .12s; }
.fg-row:hover { background: var(--bg-2); }
.fg-row__id { display: flex; flex-direction: column; }
.fg-row__id b { font-size: 12.5px; font-weight: 600; font-family: 'Roboto Mono', monospace; }
.fg-row__id i { font-style: normal; font-size: 11px; color: var(--text-3); }
.fg-row__main { min-width: 0; }
.fg-row__main b { display: block; font-size: 13px; font-weight: 600; }
.fg-row__main span { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.fg-match { font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 99px; text-align: center; white-space: nowrap; }
.fg-row__amt { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.fg-row__st { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; }

.fg-det { width: min(820px, 96vw); max-height: 92vh; }
.fg-detbody { overflow-y: auto; }
.fg-detgrid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; align-items: start; margin-bottom: 14px; }
.fg-matchbar { display: flex; gap: 10px; padding: 11px 13px; border: 1px solid; border-radius: 10px; margin-bottom: 12px; }
.fg-matchdot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.fg-matchbar b { display: block; font-size: 13px; margin-bottom: 2px; }
.fg-matchbar span { font-size: 11.5px; color: var(--text-2); line-height: 1.45; }
.fg-check { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.fg-check:first-of-type { border-top: none; }
.fg-check__ic { flex-shrink: 0; margin-top: 1px; }
.fg-check b { display: block; font-size: 12.5px; font-weight: 600; }
.fg-check span { font-size: 11.5px; color: var(--text-3); }
.fg-docrow { display: flex; flex-wrap: wrap; gap: 10px; }
.fg-bestel { margin-top: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.fg-bestel__h { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; color: var(--text-3); margin-bottom: 7px; }
.fg-bestel__h span { font-weight: 600; color: var(--text-2); }
.fg-bestel__h b { font-size: 12.5px; color: var(--text); }
.fg-bestel__bar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: color-mix(in srgb, var(--text-2) 9%, transparent); }
.fg-bestel__bar i { height: 100%; }
.fg-bestel__reeds { background: color-mix(in srgb, var(--text-2) 30%, transparent); }
.fg-bestel__lg { display: flex; gap: 12px; align-items: center; margin-top: 7px; font-size: 10.5px; color: var(--text-3); }
.fg-bestel__lg span { display: inline-flex; align-items: center; gap: 4px; }
.fg-bestel__lg i { width: 9px; height: 9px; border-radius: 2px; }
.cf-debname { display: block; text-align: left; background: none; border: 0; font: inherit; padding: 0; cursor: pointer; width: 100%; }
.cf-debname:hover b { text-decoration: underline; }
.deb-inv { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.deb-inv__row { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-2); }
.deb-inv__nr b, .deb-inv__amt b { font-size: 13px; }
.deb-inv__nr i, .deb-inv__amt i { display: block; font-style: normal; font-size: 11px; color: var(--text-3); margin-top: 1px; }
.deb-inv__amt { text-align: right; }
.deb-tl { display: flex; flex-direction: column; gap: 2px; }
.deb-tl__row { display: flex; gap: 10px; padding: 7px 0; align-items: flex-start; }
.deb-tl__ic { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.deb-tl__main b { display: block; font-size: 12.5px; font-weight: 600; }
.deb-tl__main span { font-size: 11px; color: var(--text-3); }
.rf-live { display: inline-flex; align-items: center; gap: 3px; margin-left: 7px; padding: 1px 6px; border-radius: 999px; font-style: normal; font-size: 9.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); vertical-align: middle; }
.rf-wzrlink { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 0; background: none; border: 0; font: inherit; font-size: 11px; font-weight: 500; color: var(--brand); cursor: pointer; }
.rf-wzrlink:hover { text-decoration: underline; }
.rf-wzr { margin: 0 0 8px 40px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-2); }
.rf-wzr__h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--text-2); margin-bottom: 7px; }
.rf-wzr__row { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; font-size: 12px; color: var(--text-2); }
.rf-wzr__row > span:first-child { flex: 1; }
.rf-wzr__u { color: var(--text-3); font-size: 11px; }
.rf-wzr__row b { min-width: 72px; text-align: right; color: var(--text); }
.rf-wzr__row--tot { border-top: 1px solid var(--line); margin-top: 3px; padding-top: 7px; font-weight: 600; color: var(--text); }
.tpl-docpick { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.tpl-docpick > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.tpl-docpick select { margin-left: auto; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font: inherit; font-size: 12.5px; color: var(--text); }
.set-bedrijfrow { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.set-bedrijfrow > span { flex: 0 0 140px; font-size: 12px; color: var(--text-3); }
.set-bedrijfrow input { flex: 1; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font: inherit; font-size: 12.5px; color: var(--text); }
.set-bedrijfrow input:focus { border-color: var(--brand); outline: none; }
.set-bedrijfrow:last-of-type { border-bottom: none; }
.fg-docrow .fcr-doc { width: auto; flex: 1; min-width: 200px; margin-top: 0; }
.fg-reden { width: 100%; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 13px; background: var(--bg-2); color: var(--text); resize: vertical; }
@media (max-width: 720px) { .fg-detgrid { grid-template-columns: 1fr; } .fg-row { grid-template-columns: 80px 1fr 100px 22px; } .fg-match, .fg-row__st { display: none; } }

/* OCR-herkenning */
.fg-ocrpill { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, currentColor 13%, transparent); }
.fg-ocrhint { font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin: 4px 0 10px; }
.fg-ocrgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.fg-ocrf { display: flex; flex-direction: column; gap: 3px; padding: 7px 9px; border-radius: 8px; background: var(--bg-2); }
.fg-ocrf.is-low { background: color-mix(in srgb, var(--amber) 10%, var(--bg-2)); outline: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); }
.fg-ocrf__l { font-size: 10.5px; color: var(--text-3); display: flex; justify-content: space-between; gap: 8px; }
.fg-ocrf__conf { font-style: normal; font-weight: 700; color: var(--text-3); }
.fg-ocrf.is-low .fg-ocrf__conf { color: var(--amber-tekst); }
.fg-ocrf__v { font-size: 13px; font-weight: 600; }
.fg-ocrf__in { font: inherit; font-size: 13px; font-weight: 600; padding: 4px 7px; border: 1px solid var(--amber); border-radius: 6px; background: var(--surface); color: var(--text); width: 100%; box-sizing: border-box; }
.fg-ocract { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
/* 3-weg verschil oplossen */
.fg-resolve { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.fg-resolve__h { font-size: 12px; font-weight: 600; color: var(--text-2); }
.fg-resopt { display: flex; gap: 10px; text-align: left; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg-2); cursor: pointer; }
.fg-resopt.is-on { border-color: var(--brand); background: var(--brand-soft); }
.fg-resopt__radio { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--line-strong); flex-shrink: 0; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; }
.fg-resopt.is-on .fg-resopt__radio { border-color: var(--brand); }
.fg-resopt.is-on .fg-resopt__radio i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.fg-resopt b { display: block; font-size: 12.5px; }
.fg-resopt span { font-size: 11px; color: var(--text-3); }

/* cashflow-scenario's */
.cf-scenbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0 2px; }
.cf-scenbar__l { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); margin-right: 4px; }
.cf-scenchip { font-size: 12px; font-weight: 600; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text-2); cursor: pointer; }
.cf-scenchip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.cf-scenbar__note { font-size: 11.5px; color: var(--text-3); margin-left: auto; }
/* debiteuren-acties */
.cf-drow--act { grid-template-columns: 1.8fr 1fr 1.2fr 1.1fr 1.3fr !important; }
.cf-blok { font-style: normal; display: inline-flex; align-items: center; gap: 3px; color: var(--neg); font-weight: 700; }
.cf-debact { display: inline-flex; gap: 6px; justify-content: flex-end; align-items: center; }
.cf-debbtn { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.cf-debbtn:hover { border-color: var(--brand); color: var(--brand); }
.cf-debbtn--neg:hover { border-color: var(--neg); color: var(--neg); }
.cf-debbtn--muted { color: var(--text-3); cursor: default; border-style: dashed; }
.cf-debbtn--muted:hover { border-color: var(--line-strong); color: var(--text-3); }
/* factuurvoorstellen */
.fv-list { display: flex; flex-direction: column; gap: 8px; }
.fv-row { display: flex; align-items: center; gap: 12px; text-align: left; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--bg-2); cursor: pointer; }
.fv-row.is-on { border-color: var(--brand); background: var(--brand-soft); }
.fv-chk { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-strong); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.fv-chk.is-on { background: var(--brand); border-color: var(--brand); }
.fv-row__main { flex: 1; min-width: 0; }
.fv-row__main b { display: block; font-size: 13px; }
.fv-row__main span { font-size: 11.5px; color: var(--text-3); }
.fv-row__amt { font-variant-numeric: tabular-nums; font-size: 13.5px; }

/* ============================================================
   Onderaannemer-prestatiekaart (Batch I)
   ============================================================ */
.pk-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--gap); align-items: start; }
.pk-list { display: flex; flex-direction: column; }
.pk-row { display: grid; grid-template-columns: 30px 1fr 40px 44px 96px; gap: 12px; align-items: center; width: 100%; padding: 12px 16px; background: none; border: none; border-top: 1px solid var(--line); cursor: pointer; text-align: left; font: inherit; transition: background .12s; }
.pk-row:first-of-type { border-top: none; }
.pk-row:hover { background: var(--bg-2); }
.pk-row.is-sel { background: var(--brand-soft); }
.pk-rank { font-size: 14px; font-weight: 700; color: var(--text-3); text-align: center; }
.pk-main { min-width: 0; }
.pk-main b { display: block; font-size: 13.5px; font-weight: 600; }
.pk-main span { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-trend { font-size: 11px; font-weight: 700; text-align: center; }
.pk-score { font-size: 17px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.pk-adv { font-size: 10.5px; font-weight: 700; padding: 4px 8px; border-radius: 99px; text-align: center; white-space: nowrap; }
.pk-det__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pk-bigscore { font-size: 38px; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: flex-end; }
.pk-bigscore span { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.pk-advies { display: flex; gap: 11px; padding: 12px 14px; border: 1px solid; border-radius: 11px; margin-bottom: 16px; }
.pk-advies__dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.pk-advies b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.pk-advies span { font-size: 12px; color: var(--text-2); line-height: 1.45; }
.pk-bars { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.pk-bar__top { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.pk-bar__top b { font-variant-numeric: tabular-nums; }
.pk-bar__track { height: 7px; border-radius: 4px; background: var(--track); overflow: hidden; }
.pk-bar__track i { display: block; height: 100%; border-radius: 4px; }
.pk-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pk-meta > div { background: var(--surface); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.pk-meta span { font-size: 10.5px; color: var(--text-3); }
.pk-meta b { font-size: 13px; font-weight: 600; }
.pk-open { margin-top: 14px; }
.pk-open__h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin-bottom: 7px; }
.pk-open__row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); padding: 6px 0; border-top: 1px solid var(--line); }
.pk-open__row svg { color: var(--text-3); }
@media (max-width: 900px) { .pk-layout { grid-template-columns: 1fr; } }

/* ============================================================
   KPI-dashboard per werkmaatschappij (Batch J)
   ============================================================ */
.bvk-chart { display: flex; gap: 20px; align-items: flex-end; height: 220px; padding: 0 8px; }
.bvk-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.bvk-colval { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.bvk-colbar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.bvk-colbar { width: 64%; max-width: 72px; min-height: 4px; border-radius: 7px 7px 0 0; transition: height .3s ease; }
.bvk-norm { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--amber); }
.bvk-collabel { margin-top: 10px; text-align: center; }
.bvk-collabel b { display: block; font-size: 13px; font-weight: 700; }
.bvk-collabel span { font-size: 10.5px; color: var(--text-3); }
.bvk-legend { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-3); margin-top: 14px; justify-content: flex-end; }
.bvk-legend__norm { width: 16px; height: 0; border-top: 2px dashed var(--amber); }

.bvk-tbl { display: flex; flex-direction: column; }
.bvk-row { display: grid; grid-template-columns: 1.6fr 1.1fr 90px 84px 90px 72px 56px; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13px; }
.bvk-row--h { border-top: none; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); font-weight: 600; }
.bvk-row .r { text-align: right; }
.bvk-naam { display: flex; align-items: center; gap: 9px; min-width: 0; }
.bvk-naam i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.bvk-naam b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bvk-naam em { font-style: normal; font-size: 10.5px; color: var(--text-3); font-family: 'Roboto Mono', monospace; flex-shrink: 0; }
.bvk-num { font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.bvk-num u { text-decoration: none; font-size: 10.5px; font-weight: 600; }
.bvk-num u.up { color: var(--pos-tekst); }
.bvk-num u.down { color: var(--neg); }
@media (max-width: 820px) { .bvk-row { grid-template-columns: 1.4fr 1fr 70px; } .bvk-row > :nth-child(n+4) { display: none; } }

/* Materialenstaat & Kleur-/afwerkingstaat */
.mst2 { display: flex; flex-direction: column; }
.mst2__row { display: grid; grid-template-columns: 1.3fr 1.9fr 100px 1.1fr 104px; gap: 12px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 12.5px; }
.mst2__row--h { border-top: none; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); font-weight: 600; padding-top: 0; padding-bottom: 9px; }
.mst2__grp { padding: 9px 18px; background: color-mix(in srgb, var(--bg-2) 60%, transparent); border-top: 1px solid var(--line); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); }
.mst2__oms { font-weight: 600; }
.mst2__spec { color: var(--text-2); }
.mst2__qty { font-variant-numeric: tabular-nums; color: var(--text-2); }
.mst2__lev { color: var(--text-2); }
.mst2 .r, .afw .r { text-align: right; }

.afw { display: flex; flex-direction: column; }
.afw__row { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr 1.2fr 104px; gap: 12px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 12.5px; }
.afw__row--h { border-top: none; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); font-weight: 600; padding-bottom: 9px; }
.afw__ond { font-weight: 600; }
.afw__kleur { display: inline-flex; align-items: center; gap: 9px; color: var(--text-2); }
.afw__sw { width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); box-shadow: inset 0 0 0 2px var(--surface); }
.afw__afw, .afw__merk { color: var(--text-2); }
/* inline bewerken — materialen- & afwerkstaat */
.mst2__row--edit, .afw__row--edit { padding-top: 7px; padding-bottom: 7px; }
.uit-in, .uit-sel { width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); font: inherit; font-size: 12px; color: var(--text); }
.uit-in:focus, .uit-sel:focus { outline: none; border-color: var(--brand); }
.uit-in.r { text-align: right; }
.uit-act { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.uit-act .uit-sel { flex: 1; min-width: 0; }
.afw-kleuredit { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.uit-color { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; padding: 0; border: 1px solid var(--line-strong); border-radius: 6px; background: none; cursor: pointer; flex-shrink: 0; }
.uit-color::-webkit-color-swatch-wrapper { padding: 2px; }
.uit-color::-webkit-color-swatch { border: none; border-radius: 4px; }
.afw-colorpick { display: inline-flex; align-items: center; gap: 8px; }
.afw-colorpick input[type=color] { -webkit-appearance: none; appearance: none; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: none; cursor: pointer; flex-shrink: 0; }
.afw-colorpick input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }
.afw-colorpick input[type=color]::-webkit-color-swatch { border: none; border-radius: 6px; }
.afw-colorpick input:not([type=color]) { flex: 1; min-width: 0; }
/* afwerkstaat — foto's, thumbnails & visuele weergave (stalenboek) */
.afw__ond { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.afw-thumb { width: 34px; height: 34px; border-radius: 6px; flex-shrink: 0; background-size: cover; background-position: center; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.afw-ondedit { display: flex; align-items: center; gap: 8px; min-width: 0; }
.afw-img { position: relative; display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--line-strong); border-radius: 8px; background: var(--bg-2); color: var(--text-3); cursor: pointer; overflow: hidden; flex-shrink: 0; }
.afw-img.has-img { border-style: solid; }
.afw-img--fill { width: 100%; aspect-ratio: 1 / 1; border-radius: 0; }
.afw-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.afw-img__x { position: absolute; top: 4px; right: 4px; width: 19px; height: 19px; border-radius: 5px; border: none; background: rgba(12,18,22,.62); color: #fff; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.afw-img__x:hover { background: var(--signal); }
.afw-uploadrow { display: flex; align-items: center; gap: 14px; margin: 2px 0 4px; }
.afw-uploadrow__hint { display: flex; flex-direction: column; font-size: 11.5px; color: var(--text-3); line-height: 1.45; }
.afw-uploadrow__hint b { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.afwvis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; padding: 16px 18px 20px; }
.afwcard { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.afwcard__imgwrap { position: relative; line-height: 0; }
.afwcard__img { aspect-ratio: 1 / 1; background-size: cover; background-position: center; display: flex; align-items: flex-end; }
.afwcard__ph { font-family: 'Roboto Mono', monospace; font-size: 10.5px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.55); padding: 8px 10px; line-height: 1.3; }
.afwcard__body { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 5px; line-height: 1.3; }
.afwcard__body > b { font-size: 13px; font-weight: 600; }
.afwcard__kleur { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); }
.afwcard__meta { font-size: 11.5px; color: var(--text-3); }
@media print { .afwvis { grid-template-columns: repeat(3, 1fr); } .afwcard { break-inside: avoid; } }

/* ===== Koppelingen — hi-fi connect-flow ===== */
.kop-demobanner { display: flex; gap: 12px; align-items: flex-start; margin-bottom: var(--gap); padding: 13px 16px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent); }
.kop-demobanner > svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.kop-demobanner b { display: block; font-size: 13px; }
.kop-demobanner span { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.kop-logo { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: 700; flex-shrink: 0; }
.kop-list { display: flex; flex-direction: column; }
.kop-conn { display: grid; grid-template-columns: 40px minmax(180px, 1.6fr) 1fr 1.3fr auto; gap: 14px; align-items: center; padding: 12px 4px; border-top: 1px solid var(--line); }
.kop-conn:first-child { border-top: none; }
.kop-conn__main { min-width: 0; }
.kop-conn__main b { font-size: 13.5px; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kop-conn__acct { font-style: normal; font-weight: 400; color: var(--text-3); font-size: 12px; }
.kop-conn__main span { font-size: 11.5px; color: var(--text-3); }
.kop-conn__rich { font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
.kop-conn__status { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.kop-conn__meta { color: var(--text-3); }
.kop-conn__actions { display: flex; gap: 7px; justify-content: flex-end; }
.kop-feeds { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.kop-feed { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.kop-feed__h { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.kop-feed__h b { font-size: 13px; font-weight: 600; }
.kop-feed__h span { margin-left: auto; font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.kop-feed__row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.kop-feed__main { min-width: 0; flex: 1; }
.kop-feed__main b { font-size: 12.5px; font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kop-feed__main span { font-size: 11px; color: var(--text-3); }
.kop-feed__t { font-style: normal; font-size: 11px; color: var(--text-3); white-space: nowrap; }
/* OAuth-consent */
.oauth { width: min(420px, 94vw); background: var(--surface); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); animation: pop .16s ease; }
.oauth__bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; color: #fff; font-weight: 600; font-size: 13px; }
.oauth__x { background: none; border: none; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; opacity: .85; }
.oauth__x:hover { opacity: 1; }
.oauth__body { padding: 24px 26px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.oauth__title { font-size: 17px; font-weight: 600; margin: 14px 0 4px; line-height: 1.35; }
.oauth__acct { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; }
.oauth__acctav { width: 28px; height: 28px; border-radius: 999px; background: var(--steel); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; }
.oauth__acct b { font-size: 12.5px; display: block; }
.oauth__acct span { font-size: 11px; color: var(--text-3); }
.oauth__perm { align-self: stretch; margin-top: 16px; text-align: left; }
.oauth__permh { font-size: 12px; font-weight: 600; color: var(--text-2); }
.oauth__scopes { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.oauth__scopes li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--text); }
.oauth__scopes li svg { color: var(--pos); flex-shrink: 0; margin-top: 2px; }
.oauth__scopes--sm li { font-size: 12px; color: var(--text-2); }
.oauth__legal { display: flex; gap: 7px; align-items: flex-start; font-size: 11px; color: var(--text-3); line-height: 1.5; margin: 16px 0 0; text-align: left; }
.oauth__legal svg { flex-shrink: 0; margin-top: 2px; }
.oauth__foot { display: flex; gap: 10px; justify-content: flex-end; align-self: stretch; margin-top: 20px; }
.oauth__body--busy { padding: 44px 26px; gap: 6px; }
.oauth__body--busy b { font-size: 14px; }
.oauth__sub { font-size: 12px; color: var(--text-3); }
.oauth__spin { width: 34px; height: 34px; border-radius: 999px; border: 3px solid var(--line); border-top-color: var(--brand); animation: kopspin .8s linear infinite; margin-bottom: 12px; }
@keyframes kopspin { to { transform: rotate(360deg); } }
.kop-permbox { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.kop-permbox__h { font-size: 12px; font-weight: 600; color: var(--text-2); }
.kop-expired { display: flex; gap: 11px; align-items: center; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--amber) 12%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 34%, transparent); margin-bottom: 14px; }
.kop-expired > svg { color: var(--amber); flex-shrink: 0; }
.kop-expired b { display: block; font-size: 12.5px; }
.kop-expired span { font-size: 11.5px; color: var(--text-2); }
.kop-expired .btn { margin-left: auto; flex-shrink: 0; }
.kop-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; }
.kop-segbtn { padding: 7px 13px; font-size: 12px; font-weight: 500; background: var(--surface); border: none; border-right: 1px solid var(--line); color: var(--text-2); cursor: pointer; }
.kop-segbtn:last-child { border-right: none; }
.kop-segbtn.is-on { background: var(--brand); color: #fff; }
.kop-dangerbtn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; font-size: 12.5px; font-weight: 500; border: 1px solid color-mix(in srgb, var(--signal) 34%, transparent); background: color-mix(in srgb, var(--signal) 8%, transparent); color: var(--signal); border-radius: 9px; cursor: pointer; }
.kop-dangerbtn:hover { background: color-mix(in srgb, var(--signal) 14%, transparent); }
@media (max-width: 1000px) { .kop-conn { grid-template-columns: 40px 1.4fr auto; } .kop-conn__rich, .kop-conn__status { display: none; } }
@media (max-width: 900px) {
  .mst2__row, .afw__row { grid-template-columns: 1.4fr 1fr 90px; }
  .mst2__row > :nth-child(2), .mst2__row--h > :nth-child(2), .afw__row > :nth-child(3), .afw__row > :nth-child(4), .afw__row--h > :nth-child(3), .afw__row--h > :nth-child(4) { display: none; }
}

/* ===== gedeelde taak-koppeling, herinneringen & entiteit-taken ===== */
.tkk-pick { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 4px; max-height: 230px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.tkk-pickrow { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 0; background: none; cursor: pointer; border-radius: 7px; text-align: left; font: inherit; color: var(--text); width: 100%; }
.tkk-pickrow:hover { background: var(--bg-2); }
.tkk-pickrow > span { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkk-pickrow i { margin-left: auto; color: var(--text-3); font-style: normal; font-size: 12px; flex-shrink: 0; }
.tkk-wie { display: flex; flex-wrap: wrap; gap: 6px; }
.tkk-wiechip { display: flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; border: 1px solid var(--line); border-radius: 999px; background: none; cursor: pointer; font: inherit; font-size: 12px; color: var(--text-2); }
.tkk-wiechip.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.tkk-remform, .ent-taken__form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.tkk-remform__foot { display: flex; justify-content: flex-end; gap: 8px; }
.tk-rem { display: flex; flex-direction: column; gap: 6px; }
.tk-remrow { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; }
.tk-remrow.is-due { border-color: color-mix(in srgb, var(--amber) 50%, var(--line)); background: color-mix(in srgb, var(--amber) 8%, transparent); }
.tk-remrow.is-done { opacity: .55; }
.tk-remrow__ic { color: var(--amber); display: flex; flex-shrink: 0; }
.tk-remrow__b { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tk-remrow__b b { font-size: 13px; }
.tk-remrow__b i { font-style: normal; color: var(--text-3); font-size: 12px; }
.ent-taken { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.ent-taken__head { display: flex; align-items: center; justify-content: space-between; }
.ent-taken__head > span { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; color: var(--text-2); }
.ent-taken__head > span em { font-style: normal; color: var(--text-3); font-size: 12px; }
.ent-taken__list { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.ent-taakrow { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; }
.ent-taakrow__st { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ent-taakrow__t { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-taakrow__t.is-done { text-decoration: line-through; color: var(--text-3); }
.ent-taakrow__t--link { cursor: pointer; }
.ent-taakrow__t--link:hover { color: var(--brand); text-decoration: underline; }
.ent-taakcheck { width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid var(--line-strong); border-radius: 5px; background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; padding: 0; }
.ent-taakcheck.is-done { background: var(--pos); border-color: var(--pos); }
.ent-taakcheck:hover { border-color: var(--brand); }
.ent-taakrow__dl { font-style: normal; color: var(--text-3); font-size: 11.5px; flex-shrink: 0; }
.ent-taken__row { display: flex; gap: 12px; }
.ent-taken__row .tk-nf { flex: 1; }
/* fase-brede "gekoppelde taken"-strip onderaan elke projectmodule-pagina */
.fase-taken { margin-top: -32px; padding-top: 0; }
.fase-taken .ent-taken { margin-top: 0; border-top: 0; padding-top: 0; }
.tkk-refcard .ml-linkcard__b i { font-style: normal; }
.tk-newoms { width: 100%; resize: vertical; min-height: 52px; font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); line-height: 1.5; }
.tk-newoms:focus { outline: none; border-color: var(--brand); }

/* agenda · taak-herinneringen als read-only agenda-item */
.ag-ev--rem { border-left-style: dashed !important; cursor: pointer; }
.ag-tag--rem { color: #7A4FA0; background: color-mix(in srgb, #7A4FA0 12%, transparent); }
.ag-mtag--rem { color: #7A4FA0; }

/* taakdetail · plan-gesprek-in-agenda banner */
.tk-gesprekbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 12px 0 2px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: 11px; background: var(--brand-soft); }
.tk-gesprekbar__l { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.tk-gesprekbar__l > svg { color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.tk-gesprekbar__l b { display: block; font-size: 13.5px; }
.tk-gesprekbar__l span { display: block; color: var(--text-2); font-size: 12px; margin-top: 1px; }
.tk-gesprekbar__r { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tk-gesprekbar__r input[type="date"] { font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); }

/* bedrijfsmiddel-drawer · klikbare houder → profiel */
.prs-houderlink { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--brand); font: inherit; }
.prs-houderlink b { color: var(--brand); }
.prs-houderlink:hover { text-decoration: underline; }

/* ============================================================
   R12 — Dashboard verdieping (Deel B 1–8)
   ============================================================ */
.dash-kpibar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.dash-kpibar__l { display: flex; align-items: baseline; gap: 7px; }
.dash-kpibar__per { font-size: 12px; color: var(--text-3); }
.dash-period { display: inline-flex; gap: 2px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; }
.dash-period__btn { font: inherit; font-size: 12px; font-weight: 600; color: var(--text-3); padding: 5px 12px; border: 0; background: none; border-radius: 6px; cursor: pointer; }
.dash-period__btn:hover { color: var(--text); }
.dash-period__btn.is-on { background: var(--surface); color: var(--brand); box-shadow: var(--shadow); }

.dash-liqwarn { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; margin-bottom: var(--gap); padding: 12px 15px; border-radius: 12px; cursor: pointer; font: inherit;
  border: 1px solid color-mix(in srgb, var(--amber) 38%, var(--line)); background: color-mix(in srgb, var(--amber) 9%, transparent); color: var(--text); }
.dash-liqwarn:hover { background: color-mix(in srgb, var(--amber) 14%, transparent); }
.dash-liqwarn > svg:first-child { color: var(--amber); flex-shrink: 0; }
.dash-liqwarn span { flex: 1; font-size: 12.5px; color: var(--text-2); }
.dash-liqwarn b { color: var(--text); font-weight: 600; }
.dash-liqwarn > svg:last-child { color: var(--text-3); flex-shrink: 0; }
/* h21: eerlijke melding zolang Exact niet gekoppeld is (geen bedrag, geen signaal). */
.dash-liqnote { display: flex; align-items: flex-start; gap: 9px; margin-bottom: var(--gap); padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--line); font-size: 12.5px; color: var(--text-3); }
.dash-liqnote > svg { flex-shrink: 0; margin-top: 1px; }
.dash-liqnote span { flex: 1; min-width: 0; }

/* omzet-widget · klikbare maandbalken + drilldown */
.omz-bars { display: flex; align-items: flex-end; gap: clamp(3px, .8vw, 8px); height: 170px; padding-top: 8px; }
.omz-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; background: none; border: 0; padding: 0; cursor: pointer; }
.omz-bar__col { position: relative; width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.omz-bar__target { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--text-3); }
.omz-bar__fill { width: 74%; border-radius: 5px 5px 2px 2px; background: var(--bar); transition: height .5s cubic-bezier(.2,.7,.2,1), background .15s; }
.omz-bar:last-child .omz-bar__fill { background: var(--brand); }
.omz-bar:hover .omz-bar__fill { background: color-mix(in srgb, var(--brand) 55%, var(--bar)); }
.omz-bar.is-on .omz-bar__fill { background: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent); }
.omz-bar__lbl { font-size: 10px; font-weight: 500; letter-spacing: .06em; color: var(--text-3); text-transform: uppercase; }
.omz-bar.is-on .omz-bar__lbl { color: var(--brand); }
.omz-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); margin-left: auto; align-self: center; }
.omz-hint svg { color: var(--brand); }
.omz-drill { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.omz-drill__h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.omz-drill__h b { font-size: 13px; }
.omz-drill__x { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--text-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.omz-drill__x:hover { color: var(--text); border-color: var(--text-3); }
.omz-drill__row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 7px 8px; cursor: pointer; }
.omz-drill__row:hover { background: var(--bg-2); }
.omz-drill__nm { flex: 1; min-width: 0; }
.omz-drill__nm b { display: block; font-size: 12.5px; font-weight: 600; }
.omz-drill__nm i { display: block; font-style: normal; font-size: 11px; color: var(--text-3); }
.omz-drill__amt { font-size: 12.5px; font-weight: 600; }
.omz-drill__all { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font: inherit; font-size: 12px; font-weight: 600; color: var(--brand); background: none; border: 0; cursor: pointer; padding: 4px 8px; }

/* begroot vs werkelijk */
.bvw-list { display: flex; flex-direction: column; }
.bvw-row { display: grid; grid-template-columns: 1.4fr 1fr auto 54px; gap: 12px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 11px 4px; cursor: pointer; }
.bvw-row:first-child { border-top: 0; }
.bvw-row:hover { background: var(--bg-2); }
.bvw-nm b { display: block; font-size: 12.5px; font-weight: 600; }
.bvw-nm i { display: block; font-style: normal; font-size: 10.5px; color: var(--text-3); }
.bvw-track { position: relative; height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.bvw-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.bvw-mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text); border-radius: 2px; transform: translateX(-1px); }
.bvw-amt { text-align: right; }
.bvw-amt b { font-size: 12px; font-weight: 600; }
.bvw-amt i { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.bvw-drift { text-align: right; font-size: 13px; font-weight: 600; }
.bvw-drift em { font-style: normal; font-size: 9.5px; font-weight: 500; margin-left: 1px; }
.bvw-foot { display: flex; align-items: flex-start; gap: 7px; font-size: 11px; color: var(--text-3); line-height: 1.5; margin: 12px 0 0; }
.bvw-foot svg { flex-shrink: 0; margin-top: 1px; }

/* top-5 risico */
.risk5-list { display: flex; flex-direction: column; }
.risk5-row { display: grid; grid-template-columns: 20px 1.6fr 1fr 52px; gap: 11px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 11px 4px; cursor: pointer; }
.risk5-row:first-child { border-top: 0; }
.risk5-row:hover { background: var(--bg-2); }
.risk5-rank { font-size: 13px; font-weight: 700; color: var(--text-3); text-align: center; }
.risk5-nm { min-width: 0; }
.risk5-nm b { display: block; font-size: 12.5px; font-weight: 600; }
.risk5-nm i { display: block; font-style: normal; font-size: 10.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.risk5-bar { height: 7px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.risk5-bar span { display: block; height: 100%; border-radius: 999px; }
.risk5-marge { text-align: right; font-size: 13px; font-weight: 600; }

/* week-update · openstaande acties als directe links */
.week-acties { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.week-acties__h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.week-acties__h svg { color: var(--amber); }
.week-acties__h em { font-style: normal; margin-left: auto; color: var(--text); font-weight: 700; }
.week-actrow { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 7px 8px; cursor: pointer; }
.week-actrow:hover { background: var(--bg-2); }
.week-actrow__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.week-actrow__tx { flex: 1; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week-actrow svg { color: var(--text-3); flex-shrink: 0; }

/* instellingen · signalering */
.set-sig { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.set-sig__h { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.set-sig__h svg { color: var(--brand); }

/* directie-digest (print-ready) */
.digest-ov { align-items: flex-start; overflow: auto; padding: 28px 0; }
.digest { width: 794px; max-width: 96vw; margin: 0 auto; background: var(--surface); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.digest__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.digest__bar > span { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.digest__bar-r { display: flex; gap: 8px; }
.digest__page { padding: 40px 44px 36px; background: #fff; color: #16202b; }
.digest__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 2px solid #16202b; }
.digest__brand { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #3F6178; }
.digest__head h1 { font-size: 27px; font-weight: 300; letter-spacing: -.02em; margin: 6px 0 4px; color: #16202b; }
.digest__head p { font-size: 12.5px; color: #5a6675; }
.digest__stamp { font-size: 11.5px; color: #5a6675; white-space: nowrap; }
.digest__kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 22px 0; }
.digest__kpi { border: 1px solid #e2e6ea; border-radius: 10px; padding: 12px; }
.digest__kpi span { display: block; font-size: 10px; font-weight: 600; color: #5a6675; }
.digest__kpi b { display: block; font-size: 22px; font-weight: 300; letter-spacing: -.02em; margin: 3px 0 2px; color: #16202b; }
.digest__kpi i { font-style: normal; font-size: 11px; font-weight: 600; }
.digest__warn { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-radius: 9px; background: #FBF1DC; color: #7A5A12; font-size: 12.5px; font-weight: 500; margin-bottom: 8px; }
.digest__warn svg { flex-shrink: 0; }
.digest__note { padding: 8px 13px; border-radius: 9px; border: 1px dashed #e2e6ea; color: #5a6675; font-size: 12px; margin-bottom: 8px; }
.digest__sec { margin-top: 24px; }
.digest__sec h2 { font-size: 13px; font-weight: 700; color: #16202b; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid #e2e6ea; }
.digest__tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.digest__tbl th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5a6675; padding: 6px 8px; border-bottom: 1px solid #e2e6ea; }
.digest__tbl td { padding: 7px 8px; border-bottom: 1px solid #eef1f3; color: #26313d; }
.digest__tbl .r { text-align: right; }
.digest__sign { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.digest__sign li { padding-left: 14px; border-left: 2px solid #3F6178; }
.digest__sign b { display: block; font-size: 12.5px; color: #16202b; }
.digest__sign span { font-size: 11.5px; color: #5a6675; }
.digest__foot { margin-top: 28px; padding-top: 12px; border-top: 1px solid #e2e6ea; font-size: 10.5px; color: #8a97a5; text-align: center; }
@media print {
  body * { visibility: hidden !important; }
  .digest, .digest * { visibility: visible !important; }
  .digest { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; border-radius: 0; }
  .digest__bar, .no-print { display: none !important; }
  .digest__page { padding: 0; }
}

/* ============================================================
   Meer-/minderwerk — selecteren & afrekenen op factuur + verrekend overzicht
   ============================================================ */
.mm-bulkbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: var(--gap); padding: 11px 16px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--brand) 36%, var(--line)); background: var(--brand-soft); }
.mm-bulkbar__l { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.mm-bulkbar__l svg { color: var(--brand); }
.mm-bulkbar__l b { color: var(--text); font-weight: 700; }
.mm-bulkbar__r { display: flex; gap: 8px; }
.mm-selcb { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--brand); cursor: pointer; margin-right: 2px; }
.mm-selcb--ph { display: inline-block; cursor: default; border-radius: 4px; border: 1px dashed var(--line-strong); background: transparent; box-sizing: border-box; }
.mm-headsel { display: inline-flex; align-items: center; gap: 8px; }

.mm-factlist { padding: 6px 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.mm-fgroup { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.mm-fgroup__h { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.mm-fgroup__nr { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--navy); }
.mm-fgroup__nr svg { color: var(--navy); }
.mm-fgroup__dt { font-size: 11.5px; color: var(--text-3); }
.mm-fgroup__tot { margin-left: auto; font-size: 13.5px; font-weight: 700; }
.mm-frow { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-top: 1px solid var(--line); }
.mm-frow:first-of-type { border-top: 0; }
.mm-frow__nm { flex: 1; min-width: 0; }
.mm-frow__nm b { display: block; font-size: 12.5px; font-weight: 600; }
.mm-frow__nm i { display: block; font-style: normal; font-size: 11px; color: var(--text-3); }
.mm-frow__amt { font-size: 13px; font-weight: 700; white-space: nowrap; }

/* ============================================================
   Planning — weersgevoelige taken + mijlpaal-realisatie (R13)
   ============================================================ */
.ptbl__weer { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .04em; color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 14%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 36%, transparent); border-radius: 4px; padding: 1px 4px; margin-left: 6px; vertical-align: 1px; }
.plegend__weer { margin: 0 5px 0 0; vertical-align: 0; }

.mst-real { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--pos-tekst); }
.mst-real svg { flex-shrink: 0; }
.mst-realbtn { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--brand); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: 8px; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.mst-realbtn:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.mst-realform { margin-top: 10px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.mst-realform__fields { display: flex; gap: 12px; flex-wrap: wrap; }
.mst-realform__fields label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-3); flex: 1; min-width: 150px; }
.mst-realform__fields input { font: inherit; font-size: 13px; color: var(--text); padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.mst-realform__fields input:focus { outline: none; border-color: var(--brand); }
.mst-realform__hint { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; font-size: 11.5px; color: var(--text-2); }
.mst-realform__hint svg { color: var(--brand); flex-shrink: 0; }
.mst-realform__act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 11px; }

/* ============================================================
   Financieel & cashflow verdieping (R14)
   ============================================================ */
/* #22 scenario-kaarten */
.fpr-scen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 1100px) { .fpr-scen { grid-template-columns: repeat(2, 1fr); } }
.fpr-scard { text-align: left; background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; padding: 12px 13px; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 4px; transition: border-color .12s, background .12s; }
.fpr-scard:hover { border-color: var(--text-3); }
.fpr-scard.is-on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand) inset; }
.fpr-scard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fpr-scard__top b { font-size: 13px; font-weight: 600; }
.fpr-scard__now { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); background: var(--surface); border-radius: 5px; padding: 2px 6px; }
.fpr-scard__sub { font-size: 11px; color: var(--text-3); }
.fpr-scard__eff { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: 11px; font-weight: 600; }

/* #31 BTW per kwartaal */
.fpr-btwq { display: flex; flex-direction: column; }
.fpr-btwq__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 10px; align-items: center; padding: 10px 6px; border-top: 1px solid var(--line); font-size: 12.5px; }
.fpr-btwq__row .r { text-align: right; }
.fpr-btwq__row--h { border-top: none; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.fpr-btwq__row.is-now { background: var(--brand-soft); border-radius: 8px; }
.fpr-btwq__due { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--amber-tekst); margin-top: 1px; }

/* #21 resultatenrekening doorklikbaar + boekingen-drawer */
.pnl__row--clk { cursor: pointer; border-radius: 7px; }
.pnl__row--clk:hover { background: var(--bg-2); }
.pnlbk { display: flex; flex-direction: column; }
.pnlbk__row { display: grid; grid-template-columns: 1.5fr 0.8fr 2fr 1fr; gap: 12px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--line); font-size: 12.5px; }
.pnlbk__row .r { text-align: right; }
.pnlbk__row--h { border-top: none; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.pnlbk__gb { font-weight: 600; color: var(--text-2); }
.pnlbk__row--tot { border-top: 1.5px solid var(--line-strong); font-weight: 700; }
.pnlbk__row--tot b { color: var(--brand); }

/* ============================================================
   Facturatie verdieping (R15) — logo · betaal-QR · kenmerk · G-rekening · creditnota
   ============================================================ */
.dos-inv__brand { display: flex; align-items: flex-start; gap: 12px; }
.dos-inv__logo { height: 34px; width: auto; object-fit: contain; flex-shrink: 0; }
.dos-inv__fact--credit b { color: #b0202d; }
.dos-inv__pay { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #e2e6ea; }
.dos-inv__payinfo { flex: 1; min-width: 0; }
.dos-inv__kenmerk { display: flex; align-items: baseline; gap: 8px; font-size: 12px; margin-bottom: 3px; }
.dos-inv__kenmerk span { color: #5a6675; min-width: 110px; }
.dos-inv__kenmerk b { color: #16202b; font-variant-numeric: tabular-nums; }
.dos-inv__grek { display: inline-flex; align-items: center; gap: 6px; margin: 5px 0; font-size: 11.5px; font-weight: 600; color: #1F6F4B; background: #e8f3ec; border-radius: 6px; padding: 4px 9px; }
.dos-inv__qr { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; }
.dos-inv__qr .bq { border: 1px solid #e2e6ea; border-radius: 6px; }
.dos-inv__qr span { font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a97a5; }

.tmf-gtoggle { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.tmf-gtoggle__box { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.tmf-gtoggle__box.is-on { background: var(--brand); border-color: var(--brand); }
.tmf-ghint { font-size: 11px; color: var(--text-3); line-height: 1.5; margin: 7px 0 0; }
.tmf-btwseg { display: flex; gap: 6px; }
.tmf-btwseg__b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 700; color: var(--text-2); cursor: pointer; transition: all .15s; }
.tmf-btwseg__b i { font-style: normal; font-size: 9.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.tmf-btwseg__b.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.tmf-btwseg__b.is-on i { color: var(--brand); }
.tmf-btwseg__b:disabled { opacity: .55; cursor: default; }
.zzp-contract { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.zzp-contract__hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--text); }
.zzp-contract__hd b { font-size: 13.5px; }
.zzp-contract__hd .tag { margin-left: auto; }
.zzp-contract__ft { font-size: 11px; color: var(--text-3); line-height: 1.5; margin: 9px 0 0; display: flex; gap: 5px; }

/* ============================================================
   Offerte — marge-simulatie (R16, #53)
   ============================================================ */
.msim { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 920px) { .msim { grid-template-columns: 1fr; } }
.msim__ctrls { display: flex; flex-direction: column; gap: 16px; }
.msim__ctrl { display: flex; flex-direction: column; gap: 7px; }
.msim__ctrlhd { display: flex; align-items: baseline; justify-content: space-between; font-size: 12.5px; color: var(--text-2); }
.msim__ctrlhd b { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.msim__ctrl input[type="range"] { width: 100%; accent-color: var(--brand); cursor: pointer; }
.msim__out { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.msim__line { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 12.5px; color: var(--text-2); }
.msim__line b { color: var(--text); font-variant-numeric: tabular-nums; }
.msim__line--sum { border-top: 1px solid var(--line-strong); margin-top: 4px; padding-top: 10px; font-weight: 600; }
.msim__line--sum span, .msim__line--sum b { color: var(--text); font-size: 14px; }
.msim__marge { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.msim__mtile { display: flex; flex-direction: column; gap: 2px; }
.msim__mtile span { font-size: 11px; color: var(--text-3); }
.msim__mtile b { font-size: 22px; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ============================================================
   HR — certificaten-matrix (R17, #58)
   ============================================================ */
.certmx__legend { display: flex; gap: 14px; flex-wrap: wrap; }
.certmx__legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); font-weight: 500; }
.certmx__legend i { width: 9px; height: 9px; border-radius: 50%; }
.certmx { display: flex; flex-direction: column; overflow-x: auto; }
.certmx__row { display: grid; gap: 8px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--line); min-width: 560px; }
.certmx__row--h { border-top: none; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.certmx__th { text-align: center; }
.certmx__nm { display: flex; align-items: center; gap: 10px; min-width: 0; }
.certmx__av { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--brand); background: var(--brand-soft); }
.certmx__nm b { display: block; font-size: 12.5px; font-weight: 600; }
.certmx__nm i { display: block; font-style: normal; font-size: 10.5px; color: var(--text-3); }
.certmx__cell { display: flex; align-items: center; justify-content: center; }
.certmx__dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent); }
.certmx__none { font-style: normal; color: var(--line-strong); }

/* ============================================================
   Recruitment — conversie/funnel · scorekaart · gesprek inplannen (R18)
   ============================================================ */
.rec-statchips { display: flex; gap: 16px; }
.rec-statchips span { font-size: 12px; color: var(--text-3); }
.rec-statchips b { color: var(--text); font-weight: 700; }
.rec-funnel { display: flex; flex-direction: column; gap: 8px; }
.rec-funnel__row { display: grid; grid-template-columns: 1.5fr 3fr 40px 44px; gap: 12px; align-items: center; }
.rec-funnel__lbl { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.rec-funnel__lbl i { width: 9px; height: 9px; border-radius: 50%; }
.rec-funnel__bar { height: 14px; border-radius: 7px; background: var(--bg-2); overflow: hidden; }
.rec-funnel__bar span { display: block; height: 100%; border-radius: 7px; transition: width .5s cubic-bezier(.2,.7,.2,1); }
.rec-funnel__n { text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rec-funnel__pct { text-align: right; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.rec-sk { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.rec-sk__row { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr) 52px; gap: 8px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); }
.rec-sk__row:first-child { border-top: none; }
.rec-sk__row--h { background: var(--bg-2); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.rec-sk__th { text-align: center; }
.rec-sk__th.r, .rec-sk__avg { text-align: right; }
.rec-sk__rn { font-size: 12px; font-weight: 500; color: var(--text-2); }
.rec-sk__cell { display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; padding: 2px; }
.rec-sk__score { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; background: color-mix(in srgb, currentColor 13%, transparent); }
.rec-sk__avg { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

.rec-inplan { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.rec-inplan__l { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.rec-inplan__l svg { color: var(--brand); }
.rec-inplan input[type="date"] { font: inherit; font-size: 13px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); }
.rec-inplan .rec-mini { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; font-weight: 600; color: var(--brand); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: 8px; padding: 6px 11px; cursor: pointer; }
.rec-inplan .rec-mini:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }

/* ============================================================
   Agenda — sync-indicator + dag-/weekprint (R19)
   ============================================================ */
.ag-sync { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-3); padding: 5px 10px; border: 1px solid var(--line); border-radius: 9px; }
.ag-sync__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); flex-shrink: 0; }
.ag-sync b { color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.ag-sync__btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--text-3); cursor: pointer; margin-left: 2px; }
.ag-sync__btn:hover { color: var(--brand); border-color: var(--brand); }
.agprint__day { margin-top: 18px; }
.agprint__day h2 { font-size: 13px; font-weight: 700; color: #16202b; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid #e2e6ea; }
.agprint__ev { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: baseline; padding: 5px 0; font-size: 12.5px; color: #26313d; }
.agprint__ev b { font-variant-numeric: tabular-nums; color: #16202b; }
.agprint__ev i { font-style: normal; font-size: 11px; color: #5a6675; }
.agprint__empty { font-size: 12px; color: #8a97a5; margin: 2px 0; }

/* ============================================================
   Taken — werklast per persoon + taaksjablonen (R20)
   ============================================================ */
.tk-extrabar { display: flex; gap: 8px; margin: 0 0 var(--gap); }
.tk-extra { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; cursor: pointer; }
.tk-extra:hover { border-color: var(--text-3); }
.tk-extra.is-on { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.tk-wl { display: flex; flex-direction: column; padding: 6px 0; }
.tk-wl__row { display: grid; grid-template-columns: 1.5fr 3fr 56px; gap: 14px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); }
.tk-wl__row:first-child { border-top: none; }
.tk-wl__nm { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tk-wl__nm b { display: block; font-size: 12.5px; font-weight: 600; }
.tk-wl__nm i { display: block; font-style: normal; font-size: 10.5px; color: var(--text-3); }
.tk-wl__bar { position: relative; height: 12px; border-radius: 7px; background: var(--bg-2); overflow: hidden; }
.tk-wl__bar > span { display: block; height: 100%; border-radius: 7px; transition: width .5s cubic-bezier(.2,.7,.2,1); }
.tk-wl__cap { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text); border-radius: 2px; transform: translateX(-1px); }
.tk-wl__u { text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-tpllist { display: flex; flex-direction: column; gap: 8px; }
.tk-tplcard { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; padding: 12px 13px; cursor: pointer; }
.tk-tplcard:hover { border-color: var(--text-3); }
.tk-tplcard.is-on { border-color: var(--brand); background: var(--brand-soft); }
.tk-tplcard__ic { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--brand); background: var(--surface); }
.tk-tplcard__main { flex: 1; min-width: 0; }
.tk-tplcard__main b { display: block; font-size: 13px; font-weight: 600; }
.tk-tplcard__main span { font-size: 11.5px; color: var(--text-3); }
.tk-tplcard__radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.tk-tplcard__radio.is-on { border-color: var(--brand); }
.tk-tplcard__radio.is-on i { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }

/* CRM — volgende-actie op contactmomenten (R21, #89) */
.cre-next { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--line)); border-radius: 9px; padding: 8px 11px; margin-bottom: 12px; }
.cre-next svg { color: var(--brand); flex-shrink: 0; }
.cre-next b { color: var(--text); font-weight: 600; }
.cre-tl__next { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11px; font-weight: 600; color: var(--brand); }
.cre-tl__next svg { color: var(--brand); }

/* planning — zoom-slider in de toolbar (teammate-feedback) */
.ptool__zoom { width: 90px; accent-color: var(--brand); cursor: pointer; vertical-align: middle; }

/* agenda — externe genodigden via e-mail (teammate-feedback) */
.ag-gasten { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ag-gast { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 9px; }
.ag-gast svg { color: var(--steel); }
.ag-gast button { display: inline-flex; border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 2px; border-radius: 50%; }
.ag-gast button:hover { color: var(--neg); }
.ag-gastinput { flex: 1; min-width: 200px; font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); }
.ag-gastinput:focus { outline: none; border-color: var(--brand); }
.ag-gasthint { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); margin: 7px 0 0; }
.ag-gasthint svg { color: var(--steel); }
.ag-invite { position: relative; }
.ag-invite__bar { padding: 3px 0; }
.ag-gast--med { padding-left: 4px; font-weight: 500; color: var(--text); }
.ag-gast--med svg { color: inherit; }
.ag-invite__sugg { position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 30; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 11px; box-shadow: 0 14px 40px rgba(15,25,40,.18); padding: 5px; max-height: 240px; overflow-y: auto; }
.ag-invite__row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; padding: 8px 9px; border-radius: 8px; cursor: pointer; background: none; border: 0; }
.ag-invite__row:hover { background: var(--bg-2); }
.ag-invite__row > svg:last-child { margin-left: auto; color: var(--brand); }
.ag-invite__nm b { font-size: 13px; font-weight: 600; display: block; color: var(--text); }
.ag-invite__nm i { font-style: normal; font-size: 11px; color: var(--text-3); }
.ag-invite__mailic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex-shrink: 0; }

/* Staartgroep en btw per calculatieregel */
.calc-fxchip--staart { margin-left: 6px; border: 1px solid var(--line); background: transparent; color: var(--text-3, var(--text)); cursor: default; font: inherit; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; }
button.calc-fxchip--staart { cursor: pointer; }
.calc-fxchip--staart.is-on { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); }

/* Omgevingsbadge in de bovenbalk (afspraak databron, DESIGNSYSTEEM-05/31): alleen in de demo-omgeving */
.tb__omgeving { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: color-mix(in srgb, var(--amber) 55%, white); background: color-mix(in srgb, var(--amber) 26%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 70%, transparent); cursor: default; }

/* h50: lange namen in projectrijen, taken en open punten lopen op de telefoon terug (hoogstens
   drie regels) in plaats van na een paar woorden af te kappen; op het bureaublad staat de
   volledige tekst in de title. */
@media (max-width: 640px) {
  .pf-row .pf-row__id b, .tk-row .tk-row__txt b, .mt-row .mt-row__main b, .pst-open .pst-open__t {
    white-space: normal; text-overflow: clip; overflow: hidden; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  }
}

/* ---- Instellingen, Rechten (h54) ---- */
.rch-kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--gap); }
.rch-bron { font-size: 12.5px; color: var(--amber-tekst); }
.rch-fout { color: var(--signal); }
.rch-let { color: var(--amber-tekst); }
.rch-uitleg { margin: 0 0 12px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.rch-samenvatting { margin: 0 0 12px; padding-left: 18px; font-size: 13px; color: var(--text); line-height: 1.6; }
.rch-matrixkaart { padding: 0 !important; overflow: hidden; }
.rch-matrixwrap { overflow: auto; max-height: 70vh; }
.rch-matrix { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rch-matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); font-weight: 600; color: var(--text-2); padding: 12px 8px; border-bottom: 1px solid var(--line-strong); text-align: center; white-space: nowrap; }
.rch-matrix td { text-align: center; padding: 8px; border-bottom: 1px solid var(--line); }
.rch-matrix td.is-gewijzigd, .rch-mob__rij.is-gewijzigd { background: var(--brand-soft); }
.rch-matrix th.rch-matrix__recht { text-align: left; padding: 8px 12px 8px 18px; min-width: 240px; font-weight: 400; border-bottom: 1px solid var(--line); }
.rch-matrix thead th.rch-matrix__recht { left: 0; z-index: 3; }
.rch-matrix__recht b, .rch-mob__rij b, .rch-recht__vink b, .rch-lijst__naam b { display: block; color: var(--text); font-weight: 500; font-size: 13px; }
.rch-matrix__recht i, .rch-mob__rij i, .rch-recht__vink i, .rch-lijst__naam i { display: block; font-style: normal; font-size: 11.5px; color: var(--text-3); line-height: 1.4; margin-top: 2px; }
.rch-matrix__groep td { text-align: left; padding: 14px 18px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); border-bottom: none; }
.rch-matrix input[type="checkbox"], .rch-mob__rij input[type="checkbox"], .rch-recht__vink input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; }
.rch-mob { display: none; padding: 14px 16px; }
.rch-mob__groep { margin-top: 12px; }
.rch-mob__kop { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.rch-mob__rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px; border-top: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.rch-balk { position: sticky; bottom: 8px; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); font-size: 13px; color: var(--text-2); }
.rch-balk span { margin-right: auto; }
.rch-filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.rch-zoek { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 13px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); }
.rch-lijst__kop, .rch-lijst__rij { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.5fr); gap: 12px; align-items: center; }
.rch-lijst__kop { padding: 0 10px 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--line-strong); }
.rch-lijst__rij { width: 100%; font: inherit; font-size: 13px; color: var(--text); text-align: left; background: none; border: none; border-bottom: 1px solid var(--line); padding: 10px; cursor: pointer; }
.rch-lijst__rij:hover { background: var(--glass); }
.rch-lijst__status { display: flex; gap: 6px; flex-wrap: wrap; }
.rch-collega { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rch-collega__naam { flex: 1 1 200px; min-width: 0; }
.rch-collega__naam b { display: block; font-size: 16px; font-weight: 600; color: var(--text); }
.rch-collega__naam i { display: block; font-style: normal; font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; }
.rch-collega__acties { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.rch-collega__rol { margin: 0; min-width: 170px; }
.rch-groepkaart { margin-top: var(--gap); }
.rch-recht { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 8px; border-top: 1px solid var(--line); border-radius: 8px; }
.rch-recht.is-afwijking { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.rch-recht__vink { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.rch-recht__vink input { margin-top: 2px; flex: none; }
.rch-recht__stand { display: flex; gap: 6px 8px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--text-2); }
.rch-recht__rol { color: var(--text-3); }
.rch-recht__reden { flex-basis: 100%; font-size: 12px; color: var(--text-2); }
.rch-recht__terug { padding: 4px 10px; font-size: 12px; }
.rch-log__kop, .rch-log__rij { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.8fr); gap: 12px; align-items: start; }
.rch-log__kop { padding: 0 8px 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--line-strong); }
.rch-log__rij { padding: 10px 8px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--text); }
.rch-log__op { color: var(--text-3); }
.rch-log__reden { color: var(--text-2); overflow-wrap: anywhere; }
.rch-log__lab { display: none; font-style: normal; color: var(--text-3); }
@media (max-width: 720px) {
  .rch-matrixwrap { display: none; }
  .rch-mob { display: block; }
  .rch-lijst__kop, .rch-log__kop { display: none; }
  .rch-lijst__rij { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 6px; }
  .rch-lijst__naam { grid-column: 1 / -1; }
  .rch-lijst__status { grid-column: 1 / -1; }
  .rch-recht { grid-template-columns: minmax(0, 1fr); }
  .rch-log__rij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; }
  .rch-log__wat, .rch-log__reden { grid-column: 1 / -1; }
  .rch-log__lab { display: inline; }
  .rch-collega__acties { width: 100%; }
  .rch-collega__rol { flex: 1 1 100%; }
}

/* h54: Nmbrs, collega's inlezen (Instellingen, Koppelingen) */
.nmb-uitleg { font-size: 13px; color: var(--text-2); line-height: 1.5; margin: 0 0 12px; }
.nmb-let { font-size: 13px; line-height: 1.5; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--amber) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent); color: var(--text); }
.nmb-velden { display: grid; gap: 6px; margin-bottom: 12px; font-size: 12.5px; color: var(--text-2); }
.nmb-velden span { display: inline-block; min-width: 76px; font-weight: 600; color: var(--text); margin-right: 8px; }
.nmb-acties { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.nmb-laatst, .nmb-klein { font-size: 12px; color: var(--text-3); }
.nmb-blok { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.nmb-blok__kop { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.nmb-blok__kop span { color: var(--text-3); font-weight: 600; margin-left: 4px; }
.nmb-rij { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); }
.nmb-rij:last-child { border-bottom: 0; }
.nmb-rij__naam { display: flex; flex-direction: column; min-width: 0; flex: 1 1 220px; font-size: 13px; }
.nmb-rij__naam i { font-style: normal; font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; }
.nmb-rij__rest { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.nmb-telling { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.nmb-telling b { color: var(--text); }
.nmb-nieuw { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.nmb-invoer, .nmb-select { font: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--text); min-width: 0; }
.nmb-invoer { flex: 1 1 200px; }

/* Meldpunt Max 28-09: elk hoofdstuk een eigen gedeelte met onderaan een samenvattende regel. */
.calc-row--hsom { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); border-top: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line)); border-bottom: 14px solid var(--bg, var(--surface-2)); font-weight: 600; }
.calc-row--hsom .calc-omsname { font-weight: 700; color: var(--text); }
.calc-row--hsom .calc-num { font-weight: 600; color: var(--text); }
.calc-row--hsom .calc-aant { color: var(--text-3); font-weight: 500; white-space: nowrap; }
.calc-row--hsom .calc-hsom__tot { color: var(--brand); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.calc-row--hsom.is-dicht { border-bottom-width: 6px; }
.calc-row--hsom:last-child { border-bottom: 0; }
/* h77: mijlpalen als ruit op hun datum, in een eigen baan bovenaan de Gantt */
.gantt2__mslane { display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); background: var(--bg-2); border-bottom: 1px solid var(--line); }
.gantt2__mslane-ic { width: 9px; height: 9px; background: var(--navy); transform: rotate(45deg); border-radius: 2px; flex-shrink: 0; }
.gantt2__msline { position: absolute; width: 0; border-left: 1px dashed var(--line-strong); opacity: .55; pointer-events: none; z-index: 0; }
.gantt2__mslinks { z-index: 1; }
.gantt2__mslink { stroke: var(--text-3); stroke-width: 1.2; stroke-dasharray: 3 3; pointer-events: stroke; }
.gantt2__mslink.is-laat { stroke: var(--neg); stroke-width: 1.6; }
.gantt2__msd { position: absolute; z-index: 6; display: flex; align-items: center; gap: 5px; transform: translate(-7px, -7px); cursor: pointer; white-space: nowrap; padding: 0 5px; margin-left: -5px; }
.gantt2__msd-r { display: block; width: 14px; height: 14px; flex-shrink: 0; background: var(--navy); transform: rotate(45deg) scale(.86); border-radius: 3px; box-shadow: 0 0 0 2px var(--surface); }
.gantt2__msd--done .gantt2__msd-r { background: var(--pos); }
.gantt2__msd--now .gantt2__msd-r { background: var(--brand); }
.gantt2__msd.is-krit .gantt2__msd-r { outline: 2px solid var(--signal); outline-offset: 1px; }
.gantt2__msd.is-laat .gantt2__msd-r { background: var(--neg); }
.gantt2__msd-lbl { max-width: 160px; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; font-weight: 600; color: var(--text-2); background: var(--surface); padding: 0 4px; border-radius: 4px; line-height: 15px; }
.gantt2__msd:hover .gantt2__msd-lbl { color: var(--text); max-width: none; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.gantt2__msd:hover .gantt2__msd-r { transform: rotate(45deg) scale(1.02); }
/* h77: mijlpalen in de afdruk: eigen baan boven de taken en een stippellijn op hun datum */
.exp-msrow { display: flex; align-items: center; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.exp-msrow__name { flex-shrink: 0; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); padding-left: 6px; }
.exp-msrow__track { position: relative; flex: 1; height: 100%; }
.exp-msd { position: absolute; top: 50%; display: flex; align-items: center; gap: 3px; transform: translate(-5px, -50%); white-space: nowrap; font-size: 8.5px; font-weight: 600; color: var(--text-2); }
.exp-msd i { display: block; width: 9px; height: 9px; flex-shrink: 0; background: var(--navy); transform: rotate(45deg) scale(.8); border-radius: 2px; }
.exp-msd--done i { background: var(--pos); }
.exp-msd.is-krit i { outline: 1.5px solid var(--signal); }
.exp-msd em { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.exp-msd.is-links { flex-direction: row-reverse; transform: translate(calc(-100% + 5px), -50%); }
.exp-grid__ms { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--line-strong); opacity: .7; }

/* ---- h77 (h74 punt 17): sleepgreep en koppelpunt aan de rand van een balk uit elkaar ----
   Het koppelpunt staat verder buiten de balk en zijn tikvlak loopt niet meer over de rand, ook
   niet als het bij hover groter wordt; de sleepgreep is breder en steekt iets buiten de balk. */
.gbar2__h { width: 10px; }
.gbar2__h--l { left: -3px; }
.gbar2__h--r { right: -3px; }
.gbar2__dot--l { left: -22px; }
.gbar2__dot--r { right: -22px; }
.gbar2__dot--l::after { inset: -8px -3px -8px -8px; border-radius: 8px; }
.gbar2__dot--r::after { inset: -8px -8px -8px -3px; border-radius: 8px; }
@media (pointer: coarse) { .gbar2__h { width: 14px; } .gbar2__h--l { left: -4px; } .gbar2__h--r { right: -4px; } }

/* ---- h77 (h74 punt 18): Gantt op de telefoon ----
   De namenkolom toont de taaknaam: percentage, WBS-code, partij, datums en de plusknop wijken
   (percentage en status staan in de balk en in het taakvenster). Iets meer ruimte voor namen. */
@media (max-width: 600px) {
  .plat .main__scroll .gantt2 { grid-template-columns: minmax(0, 52%) minmax(0, 1fr) !important; }
  .plat .gantt2__trow { gap: 4px; padding: 0 6px 0 4px; }
  .plat .gantt2__pct, .plat .gantt2__wbs, .plat .gantt2__tpartij, .plat .gantt2__tdates, .plat .gantt2__addsub, .plat .gantt2__lane-hd { display: none; }
  .plat .gantt2__lane-h { padding: 10px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .plat .gantt2__grow { padding-left: 6px; }
}

/* Meldpunt 1 (22-10-2026): status wijzigen via een menu met alleen de toegestane stappen. */
.off-status { position: relative; display: inline-flex; flex: none; }
.off-status__knop { display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent; background: none; padding: 2px 4px; border-radius: 999px; cursor: pointer; color: var(--text-2); }
.off-status__knop:hover, .off-status__knop[aria-expanded="true"] { border-color: var(--line-strong); background: var(--surface); }
.off-status__menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: min(380px, 86vw); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.off-status__stappen { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 2px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.off-status__stap { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--bg-2); color: var(--text-3); }
.off-status__stap.is-klaar { color: var(--pos-tekst, var(--text-2)); background: var(--pos-soft, var(--bg-2)); }
.off-status__stap.is-nu { color: #fff; background: var(--brand); font-weight: 600; }
.off-status__kop { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); padding: 6px 6px 2px; }
.off-status__item { display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left; border: none; background: none; padding: 8px 8px; border-radius: 9px; cursor: pointer; color: var(--text); font-size: 13px; }
.off-status__item:hover:not(:disabled) { background: var(--bg-2); }
.off-status__item:disabled { cursor: not-allowed; color: var(--text-3); }
.off-status__item svg { flex: none; margin-top: 2px; color: var(--text-3); }
.off-status__item b { font-weight: 500; display: block; }
.off-status__item i { font-style: normal; font-size: 11.5px; color: var(--text-3); display: block; }
.off-status__noot { font-size: 11.5px; color: var(--text-3); padding: 6px 8px 2px; line-height: 1.4; }

/* WP7 handbudget naast het calculatiebudget */
.ink-hb { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }

/* WP12 blok 2: documenttaken in het takenscherm (tag, detail, grafiek) */
.tk-docactie { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); white-space: nowrap; }
.tk-doctaak { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; margin: 6px 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.tk-doctaak__kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.tk-doctaak__cat { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.tk-doctaak__doc { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 8px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; color: var(--text); cursor: pointer; }
.tk-doctaak__doc:hover { border-color: var(--brand); }
.tk-doctaak__doc b { font-weight: 600; }
.tk-doctaak__doc span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-doctaak__doc i { margin-left: auto; font-style: normal; font-size: 11px; color: var(--text-3); }
.tk-grafiek { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.tk-staven { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 2px; }
.tk-staaf { display: grid; grid-template-columns: 150px minmax(0, 1fr) 36px; align-items: center; gap: 10px; font-size: 12.5px; }
.tk-staaf__l { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-staaf__b { display: block; height: 14px; background: var(--bg-2); border-radius: 7px; overflow: hidden; }
.tk-staaf__b i { display: block; height: 100%; border-radius: 7px; min-width: 2px; transition: width .2s; }
.tk-staaf__n { text-align: right; font-weight: 600; }

/* ---- WP12 blok 3 (12.9): documentmeldingen (Instellingen, Meldingen en Project, Team) ---- */
.dnot-matrix { display: flex; flex-direction: column; font-size: 12.5px; }
.dnot-matrix__kop, .dnot-matrix__rij { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.dnot-matrix__kop { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.dnot-matrix__rij b { font-weight: 500; display: block; }
.dnot-herkomst { display: block; font-size: 11px; color: var(--text-3); }
.dnot-keuzes { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dnot-keuzes input[type=time] { font: inherit; font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-2); color: var(--text); }
.dnot-subkop { margin: 16px 0 6px; font-size: 13px; font-weight: 500; color: var(--text); }
.dnot-samenvatting { display: flex; flex-direction: column; gap: 6px; }
.dnot-samenvatting__rij { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 12.5px; }
.dnot-samenvatting__rij > span:first-child { color: var(--text-3); }
.dnot-project { margin-top: 12px; }
@media (max-width: 700px) { .dnot-matrix__kop, .dnot-matrix__rij { grid-template-columns: minmax(0, 1fr) 70px; } .dnot-matrix__rij > span:last-child, .dnot-matrix__kop > span:last-child { grid-column: 1 / -1; } }