/* ============================================================
   C-ERP Platform — Projectportaal styling
   Beheerkant (pb-*) · aantekeningen (pt-*) · partij-portaal (pv-*)
   Huisstijl-tokens uit cerp/styles.css
   ============================================================ */

/* ---------------- gedeeld: avatar / chip / pill ----------- */
.pt-ava { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: #fff; font-weight: 600; letter-spacing: .01em; flex-shrink: 0; }
.pt-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--text-2); padding: 4px 10px 4px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.pt-chip__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pt-pill { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pt-pill--lg { font-size: 11.5px; padding: 6px 13px; }
.pt-tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; color: var(--text-2); padding: 4px 10px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); }
.pt-tag--muted { margin-left: 8px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding: 2px 7px; }

/* ============================================================
   BEHEERKANT (intern)
   ============================================================ */
.pb-sub { font-size: 14px; color: var(--text-2); margin-top: 9px; max-width: 620px; line-height: 1.6; }
.pb-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 22px 0 8px; }
.pb-kpi { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 14px 16px; box-shadow: var(--shadow); }
.pb-kpi__ic { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pb-kpi b { font-size: 19px; font-weight: 300; letter-spacing: -.01em; display: block; line-height: 1.1; }
.pb-kpi span { font-size: 11.5px; color: var(--text-3); }

/* partijen-tabel */
.pb-thead, .pb-prow { display: grid; grid-template-columns: 2.1fr 1.1fr 1.4fr 1.5fr 1fr 1.1fr 28px; gap: 14px; align-items: center; }
.pb-thead { padding: 13px 20px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--line); }
.pb-prow { width: 100%; padding: 13px 20px; text-align: left; border-bottom: 1px solid var(--line); transition: background .12s; }
.pb-prow:hover { background: var(--bg-2); }
.pb-prow:last-of-type { border-bottom: none; }
.pb-prow__name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pb-prow__nm { min-width: 0; }
.pb-prow__nm b { font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.pb-prow__nm > span { font-size: 11px; color: var(--text-3); font-family: 'Roboto Mono', monospace; }
.pb-intern { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); background: color-mix(in srgb, var(--navy) 10%, transparent); padding: 2px 6px; border-radius: 5px; }
.pb-prow__cell { font-size: 12.5px; color: var(--text-2); min-width: 0; }
.pb-prow__contacts { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-prow__last { font-size: 12px; color: var(--text-3); }
.pb-recht { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.pb-recht i { width: 7px; height: 7px; border-radius: 50%; }
.pb-modcount { display: block; font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.pb-prow--add { grid-template-columns: 1fr; display: flex; align-items: center; gap: 11px; cursor: pointer; color: var(--brand); font-size: 13px; font-weight: 500; }
.pb-prow--add:hover { background: var(--brand-soft); }
.pb-addic { width: 30px; height: 30px; border-radius: 8px; border: 1px dashed var(--line-strong); display: flex; align-items: center; justify-content: center; }

/* toegangsmatrix */
.pb-matrix__hint { font-size: 11.5px; color: var(--text-3); }
.pb-matrix__scroll { overflow-x: auto; padding: 4px 8px 8px; }
.pb-matrix { border-collapse: separate; border-spacing: 0; width: 100%; }
.pb-matrix th, .pb-matrix td { padding: 0; }
.pb-matrix__corner { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 10px 14px !important; min-width: 230px; }
.pb-matrix__ph { padding: 8px 4px !important; }
.pb-matrix__phinner { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pb-matrix__phinner i { font-style: normal; font-size: 10px; font-weight: 600; color: var(--text-3); font-family: 'Roboto Mono', monospace; }
.pb-matrix tbody tr:hover { background: var(--bg-2); }
.pb-matrix__row { display: flex; align-items: center; gap: 11px; padding: 11px 14px !important; }
.pb-matrix__rowic { width: 30px; height: 30px; border-radius: 8px; background: var(--glass); display: flex; align-items: center; justify-content: center; color: var(--text-2); flex-shrink: 0; }
.pb-matrix__row b { font-size: 13px; font-weight: 500; display: block; }
.pb-matrix__row i { font-style: normal; font-size: 11px; color: var(--text-3); }
.pb-matrix__cellwrap { text-align: center; padding: 6px !important; }
.pb-matrix__cell { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; transition: all .14s; }
.pb-matrix__cell:hover { border-color: var(--text-3); }
.pb-matrix__cell.is-locked { opacity: .55; cursor: default; background: var(--glass); }

@keyframes pbfade { from { opacity: 0; } }
.pb-invitebox { display: flex; align-items: center; gap: 12px; padding: 13px 14px; margin-top: 18px; border-radius: 11px; background: color-mix(in srgb, var(--amber) 9%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 22%, transparent); color: var(--amber-tekst); }
.pb-invitebox > div { flex: 1; }
.pb-invitebox b { font-size: 12.5px; font-weight: 600; display: block; color: var(--text); }
.pb-invitebox span { font-size: 11.5px; color: var(--text-2); }
.pb-rechtpick { display: flex; flex-direction: column; gap: 8px; }
.pb-rechtopt { text-align: left; border: 1px solid var(--line); border-radius: 11px; padding: 11px 14px; transition: all .14s; }
.pb-rechtopt:hover:not(:disabled) { border-color: var(--text-3); }
.pb-rechtopt.is-on { background: var(--glass); }
.pb-rechtopt:disabled { opacity: .55; }
.pb-rechtopt__top { display: flex; align-items: center; justify-content: space-between; }
.pb-rechtopt__top b { font-size: 13.5px; font-weight: 600; }
.pb-rechtopt > span:last-child { font-size: 11.5px; color: var(--text-3); }
.pb-presetbtn { font-size: 10.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--brand); padding: 3px 8px; border: 1px solid var(--line); border-radius: 7px; }
.pb-presetbtn:hover:not(:disabled) { background: var(--brand-soft); }
.pb-presetbtn:disabled { opacity: .4; }
.pb-modlist { display: flex; flex-direction: column; gap: 6px; }
.pb-modrow { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 10px; text-align: left; transition: background .12s; }
.pb-modrow:hover:not(:disabled) { background: var(--bg-2); }
.pb-modrow:disabled { opacity: .6; }
.pb-modrow__ic { width: 30px; height: 30px; border-radius: 8px; background: var(--glass); color: var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pb-modrow__main { flex: 1; min-width: 0; }
.pb-modrow__main b { font-size: 12.5px; font-weight: 500; display: block; }
.pb-modrow__main span { font-size: 11px; color: var(--text-3); }
.pb-toggle { width: 36px; height: 20px; border-radius: 999px; background: var(--track); position: relative; transition: background .18s; flex-shrink: 0; }
.pb-toggle i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s; }
.pb-toggle.is-on i { transform: translateX(16px); }
.pb-contacts { display: flex; flex-direction: column; gap: 4px; }
.pb-contact { display: flex; align-items: center; gap: 11px; padding: 8px 0; }
.pb-contact__av { width: 30px; height: 30px; border-radius: 8px; background: var(--bg-2); color: var(--text-2); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.pb-contact__main b { font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 7px; }
.pb-contact__main 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; }
.pb-contact__main span { font-size: 11.5px; color: var(--text-3); }
.pb-toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 200; display: inline-flex; align-items: center; gap: 9px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 500; padding: 12px 18px; border-radius: 11px; box-shadow: var(--shadow-lg); animation: pbslideup .26s ease; }
@keyframes pbslideup { from { transform: translate(-50%, 14px); opacity: 0; } }

/* ============================================================
   AANTEKENINGEN (gedeeld pt-*)
   ============================================================ */
.pt-subtabs { display: flex; gap: 8px; border-bottom: 1px solid var(--line); margin: -4px 0 18px; }
.pt-subtab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 4px; margin-bottom: -1px; font-size: 13.5px; font-weight: 500; color: var(--text-3); border-bottom: 2px solid transparent; margin-right: 18px; }
.pt-subtab.is-on { color: var(--text); border-bottom-color: var(--brand); }
.pt-subtab em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--text-3); background: var(--glass); padding: 1px 7px; border-radius: 999px; }
.pt-subtab.is-on em { color: var(--brand); background: var(--brand-soft); }

.pt-notes__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pt-seg .seg__btn.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* threadlist */
.pt-threadlist { display: flex; flex-direction: column; gap: 8px; }
.pt-threadrow { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); text-align: left; transition: all .14s; }
.pt-threadrow:hover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.pt-threadrow__main { flex: 1; min-width: 0; }
.pt-threadrow__main b { font-size: 14px; font-weight: 500; display: flex; align-items: center; }
.pt-threadrow__ctx { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); margin: 3px 0; }
.pt-threadrow__prev { display: block; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.pt-threadrow__right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; }
.pt-avstack { display: flex; }
.pt-avstack .pt-ava { margin-left: -7px; box-shadow: 0 0 0 2px var(--surface); }
.pt-avstack .pt-ava:first-child { margin-left: 0; }
.pt-threadrow__meta { font-size: 11px; color: var(--text-3); white-space: nowrap; }

/* thread view */
.pt-thread { animation: pbfade .18s ease; }
.pt-thread__head { margin-bottom: 18px; }
.pt-back { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-bottom: 16px; }
.pt-back:hover { color: var(--text); }
.pt-thread__titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pt-thread__titlerow h3 { font-size: 20px; font-weight: 400; letter-spacing: -.01em; line-height: 1.2; }
.pt-thread__ctx { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); margin-top: 7px; }
.pt-bev__id { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); font-family: 'Roboto Mono', monospace; }
.pt-statusbtn { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--pos-tekst); padding: 7px 13px; border: 1px solid color-mix(in srgb, var(--pos) 30%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--pos) 9%, transparent); flex-shrink: 0; }
.pt-statusbtn.is-closed { color: var(--text-3); border-color: var(--line); background: var(--glass); }
.pt-thread__parties { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

/* messages */
.pt-msgs { display: flex; flex-direction: column; gap: 16px; padding: 6px 2px 2px; }
.pt-msg { display: flex; gap: 12px; }
.pt-msg.is-mine { flex-direction: row-reverse; }
.pt-msg__body { max-width: 78%; }
.pt-msg.is-mine .pt-msg__body { display: flex; flex-direction: column; align-items: flex-end; }
.pt-msg__meta { display: flex; align-items: baseline; gap: 9px; margin-bottom: 5px; }
.pt-msg__meta b { font-size: 12.5px; font-weight: 600; }
.pt-msg__meta span { font-size: 11px; color: var(--text-3); }
.pt-msg__bubble { font-size: 13.5px; line-height: 1.55; color: var(--text); background: var(--bg-2); padding: 11px 14px; border-radius: 13px; border-top-left-radius: 4px; }
.pt-msg.is-mine .pt-msg__bubble { background: var(--brand-soft); border-top-left-radius: 13px; border-top-right-radius: 4px; }
.pt-msgs--flat .pt-msg__bubble { background: var(--glass); }

/* reply box */
.pt-reply { display: flex; gap: 11px; align-items: flex-start; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.pt-reply textarea { flex: 1; resize: vertical; min-height: 44px; font: inherit; font-size: 13.5px; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface); color: var(--text); }
.pt-reply textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.pt-reply .btn:disabled { opacity: .45; }
.pt-closed-note { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 13px 16px; border-radius: 11px; background: var(--glass); font-size: 13px; color: var(--text-2); }
.pt-closed-note button { color: var(--brand); font-weight: 600; text-decoration: underline; }

/* bevindingen */
.pt-fbar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.pt-fpill { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--text-2); padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; }
.pt-fpill:hover { border-color: var(--text-3); }
.pt-fpill.is-on { background: var(--text); color: var(--surface); border-color: var(--text); }
.pt-fpill em { font-style: normal; font-size: 10.5px; font-weight: 600; opacity: .7; }
.pt-fpill.is-on em { opacity: .85; }
.pt-findlist { display: flex; flex-direction: column; gap: 7px; }
.pt-findrow { display: grid; grid-template-columns: 4px 56px 1fr 1.4fr 90px 110px; gap: 14px; align-items: center; padding: 13px 16px 13px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; overflow: hidden; transition: all .14s; }
.pt-findrow:hover { border-color: var(--text-3); box-shadow: var(--shadow); }
.pt-findrow__bar { align-self: stretch; border-radius: 4px 0 0 4px; }
.pt-findrow__id { font-size: 11.5px; font-weight: 600; color: var(--text-3); font-family: 'Roboto Mono', monospace; }
.pt-findrow__main { min-width: 0; }
.pt-findrow__main b { font-size: 13.5px; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-findrow__sub { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.pt-findrow__lbl { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 3px; }
.pt-findrow__party { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-findrow__prio { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; }
.pt-findrow__prio i { width: 6px; height: 6px; border-radius: 50%; }

/* bevinding detail */
.pt-bevgrid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 22px; align-items: stretch; }
.pt-bev__oms { font-size: 14px; line-height: 1.6; color: var(--text); background: var(--glass); padding: 14px 16px; border-radius: 12px; }
.pt-bev__seclbl { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin: 20px 0 4px; }
.pt-bevside { display: flex; flex-direction: column; gap: 12px; }
.pt-bevcard { border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; }
.pt-bevcard__lbl { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 9px; }
.pt-statuspick { display: flex; flex-direction: column; gap: 6px; }
.pt-statuspick__btn { text-align: left; font-size: 12.5px; font-weight: 500; color: var(--text-2); padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; }
.pt-statuspick__btn:hover { border-color: var(--text-3); }
.pt-statuspick__btn.is-on { font-weight: 600; }
.pt-select { width: 100%; font: inherit; font-size: 13px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--text); }
.pt-bevparty { display: flex; align-items: center; gap: 10px; }
.pt-bevparty b { font-size: 12.5px; font-weight: 500; display: block; }
.pt-bevparty span { font-size: 11px; color: var(--text-3); }
.pt-prio { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.pt-prio i { width: 8px; height: 8px; border-radius: 50%; }

/* modal */
.pt-modal__overlay { position: fixed; inset: 0; background: rgba(12,30,40,.4); backdrop-filter: blur(3px); z-index: 140; display: flex; align-items: center; justify-content: center; padding: 24px; animation: pbfade .18s ease; }
.pt-modal { width: min(560px, 96vw); max-height: 90vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); animation: pbpop .24s cubic-bezier(.2,.8,.2,1); }
.pt-modal--lg { width: min(640px, 96vw); }
@keyframes pbpop { from { transform: scale(.97) translateY(8px); opacity: 0; } }
.pt-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.pt-modal__head h3 { font-size: 19px; font-weight: 400; letter-spacing: -.01em; margin-top: 4px; }
.pt-modal__x { width: 30px; height: 30px; border-radius: 8px; font-size: 20px; line-height: 1; color: var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pt-modal__x:hover { background: var(--bg-2); color: var(--text); }
.pt-modal__body { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.pt-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--surface); }
.pt-f { display: flex; flex-direction: column; gap: 7px; }
.pt-f > span { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.pt-f input, .pt-f select, .pt-f textarea { font: inherit; font-size: 13.5px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); width: 100%; }
.pt-f textarea { resize: vertical; }
.pt-f input:focus, .pt-f select:focus, .pt-f textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.pt-f__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pt-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-pickchip { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--text-2); padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; }
.pt-pickchip:hover { border-color: var(--text-3); }
.pt-pickchip.is-on { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.pt-pickchip__dot { width: 9px; height: 9px; border-radius: 50%; }
.pt-pickchip__av { width: 22px; height: 22px; border-radius: 6px; background: var(--bg-2); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: var(--text-2); }
.pt-pickchip__fn { font-style: normal; font-size: 11px; color: var(--text-3); }

/* invite modal */
.pt-kandlist { display: flex; flex-direction: column; gap: 8px; }
.pt-kandrow { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; text-align: left; transition: all .14s; }
.pt-kandrow:hover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.pt-kandrow__av { width: 38px; height: 38px; border-radius: 9px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.pt-kandrow__main { flex: 1; }
.pt-kandrow__main b { font-size: 13.5px; font-weight: 500; display: block; }
.pt-kandrow__main span { font-size: 11.5px; color: var(--text-3); }
.pt-newform { display: flex; flex-direction: column; gap: 14px; }
.pt-picked { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 12px; background: var(--glass); }
.pt-picked__main { flex: 1; }
.pt-picked__main b { font-size: 13.5px; font-weight: 500; display: block; }
.pt-picked__main span { font-size: 11.5px; color: var(--text-3); }
.pt-modgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pt-modchip { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--text-2); padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; text-align: left; }
.pt-modchip:hover { border-color: var(--text-3); }
.pt-modchip.is-on { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }

/* ============================================================
   PARTIJ-PORTAAL (extern, pv-*)
   ============================================================ */
.pt-switch { position: relative; margin: 0 auto 0 12px; }
.pt-switch__btn { display: flex; align-items: center; gap: 11px; padding: 7px 12px 7px 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); transition: border-color .14s; }
.pt-switch__btn:hover { border-color: var(--text-3); }
.pt-switch__nm { text-align: left; min-width: 0; max-width: 200px; }
.pt-switch__nm b { font-size: 13px; font-weight: 500; display: block; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-switch__nm i { font-style: normal; font-size: 11px; color: var(--text-3); }
.pt-switch__menu { position: absolute; top: calc(100% + 8px); left: 0; width: 340px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 60; animation: pbpop .18s ease; }
.pt-switch__lbl { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding: 8px 10px 6px; }
.pt-switch__item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border-radius: 10px; text-align: left; transition: background .12s; }
.pt-switch__item:hover { background: var(--bg-2); }
.pt-switch__item.is-on { background: var(--brand-soft); }
.pt-switch__item > span:nth-child(2) { flex: 1; min-width: 0; }
.pt-switch__item b { font-size: 13px; font-weight: 500; display: block; }
.pt-switch__item i { font-style: normal; font-size: 11px; color: var(--text-3); }

.pt-tabs-scroll { overflow-x: auto; flex-wrap: nowrap; }
.pv-empty { font-size: 13px; color: var(--text-3); line-height: 1.5; }
.pv-feedbtn { width: 100%; text-align: left; }
.pv-feedbtn:hover { background: var(--bg-2); }
.pv-findmini { display: flex; flex-direction: column; gap: 7px; }
.pv-findminirow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; text-align: left; transition: all .14s; background: var(--surface); }
.pv-findminirow:hover { border-color: var(--text-3); }
.pv-findminirow__bar { width: 4px; align-self: stretch; border-radius: 3px; flex-shrink: 0; }
.pv-findminirow__main { flex: 1; min-width: 0; }
.pv-findminirow__main b { font-size: 13px; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-findminirow__main span { font-size: 11px; color: var(--text-3); }

.pv-access { display: flex; flex-direction: column; gap: 2px; }
.pv-accessrow { display: flex; align-items: center; gap: 11px; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.pv-accessrow:last-child { border-bottom: none; }
.pv-accessrow.is-off { opacity: .5; }
.pv-accessrow__ic { width: 28px; height: 28px; border-radius: 7px; background: var(--glass); color: var(--text-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pv-accessrow__lbl { flex: 1; font-size: 13px; color: var(--text); }
.pv-locked { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }

.pv-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.pv-bar b { font-size: 14px; font-weight: 500; display: block; }
.pv-bar span { font-size: 12px; color: var(--text-3); }
.pv-docgrid { align-items: start; }
.pv-doclist { display: flex; flex-direction: column; }
.pv-docrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border-top: 1px solid var(--line); text-align: left; transition: background .12s; }
.pv-docrow:hover { background: var(--bg-2); }
.pv-docrow__ic { width: 32px; height: 32px; border-radius: 8px; background: var(--glass); color: var(--text-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pv-docrow__main { flex: 1; min-width: 0; }
.pv-docrow__main b { font-size: 13px; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-docrow__main span { font-size: 11.5px; color: var(--text-3); }
.pv-docrow__tags { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pv-recht { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); background: var(--glass); padding: 3px 8px; border-radius: 6px; }

.pv-modelgrid { align-items: start; }
.pv-viewer { position: relative; height: 320px; border-radius: 13px 13px 0 0; overflow: hidden; background: var(--bg-2); display: flex; align-items: center; justify-content: center; }
.pv-viewer__c { position: relative; text-align: center; color: var(--text-3); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pv-viewer__c b { font-size: 15px; font-weight: 500; color: var(--text-2); margin-top: 8px; }
.pv-viewer__c span { font-size: 12px; font-family: 'Roboto Mono', monospace; }

.pv-mijl { display: flex; flex-direction: column; }
.pv-mijlrow { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); position: relative; }
.pv-mijlrow:last-child { border-bottom: none; }
.pv-mijlrow__dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.pv-mijlrow.is-done .pv-mijlrow__dot { background: var(--pos); border-color: var(--pos); }
.pv-mijlrow.is-active .pv-mijlrow__dot { border-color: var(--brand); }
.pv-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); animation: pulse 2s infinite; }
.pv-mijlrow__nm { flex: 1; font-size: 13.5px; font-weight: 500; }
.pv-mijlrow.is-todo .pv-mijlrow__nm { color: var(--text-2); font-weight: 400; }
.pv-mijlrow__wk { font-size: 12px; color: var(--text-3); font-family: 'Roboto Mono', monospace; }

.pv-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

@media (max-width: 980px) {
  .pb-kpis { grid-template-columns: repeat(2, 1fr); }
  .pt-bevgrid { grid-template-columns: 1fr; }
  .pt-findrow { grid-template-columns: 4px 50px 1fr 100px; }
  .pt-findrow__assign, .pt-findrow__prio { display: none; }
  .pv-fotos { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- nieuw-dossier / generieke modal-extra's --- */
.np-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.np-segbtn { position: relative; text-align: left; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; transition: all .14s; }
.np-segbtn:hover { border-color: var(--text-3); }
.np-segbtn.is-on { border-color: var(--brand); background: var(--brand-soft); }
.np-segbtn b { font-size: 14px; font-weight: 600; display: block; }
.np-segbtn span { font-size: 11.5px; color: var(--text-3); }
.np-segbtn .icon, .np-segbtn svg { position: absolute; top: 13px; right: 13px; color: var(--brand); }
.np-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.np-row .bib-field { margin-bottom: 0; }
.np-new { font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); padding: 2px 6px; border-radius: 5px; margin-right: 7px; }
.bibmodal--form select.np-keep, .np-row select, .bibmodal--form .bib-field select { font: inherit; }
.np-check { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); cursor: pointer; margin-top: 4px; }
.np-check input { width: 16px; height: 16px; accent-color: var(--brand); flex-shrink: 0; }

/* uitgebreid nieuw-project formulier */
.bibmodal--wide { width: min(720px, 96vw); }
.np-body { max-height: min(76vh, 720px); overflow-y: auto; }
.np-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.np-row--3 .bib-field { margin-bottom: 0; }
.np-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; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.np-sec svg { color: var(--brand); }
.np-sec__c { margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: 0; color: var(--text-3); background: var(--glass); padding: 1px 8px; border-radius: 999px; }
.np-quick { margin-bottom: 12px; }
.np-quick__lbl { display: block; font-size: 11.5px; color: var(--text-3); margin-bottom: 7px; }
.np-quick__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.np-quickchip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--text-2); padding: 5px 11px 5px 5px; border: 1px solid var(--line); border-radius: 999px; transition: all .14s; }
.np-quickchip:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.np-quickchip__av { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-2); display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 600; color: var(--text-2); }
.np-quickchip.is-added { color: var(--pos-tekst); border-color: color-mix(in srgb, var(--pos) 36%, transparent); background: color-mix(in srgb, var(--pos) 8%, transparent); }
.np-quickchip:disabled { cursor: default; }
.np-contacts { display: flex; flex-direction: column; gap: 7px; }
.np-chead { display: grid; grid-template-columns: 1fr 1fr 1.2fr 30px; gap: 9px; padding: 0 2px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.np-crow { display: grid; grid-template-columns: 1fr 1fr 1.2fr 30px; gap: 9px; align-items: center; }
.np-crow input { font: inherit; font-size: 13px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--bg-2); color: var(--text); width: 100%; }
.np-crow input:focus { outline: none; border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-soft); }
.np-cdel { width: 30px; height: 30px; border-radius: 8px; font-size: 19px; line-height: 1; color: var(--text-3); display: flex; align-items: center; justify-content: center; }
.np-cdel:hover { background: var(--signal-soft); color: var(--signal); }
.np-addc { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--brand); padding: 9px 4px; align-self: flex-start; }
.np-addc:hover { gap: 10px; }
.proj-card__note { font-size: 11.5px; color: var(--text-2); line-height: 1.45; margin-top: 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* projectbalk · portaal-knop actieve staat */
.pjbar__mail.is-cur { background: var(--brand); color: #fff; border-color: var(--brand); }
.pjbar__mail.is-cur svg { color: #fff; }

/* ---------------- offerte-editor -------------------------- */
.offdoc-layout { position: relative; }
.offdoc-layout.is-editing { display: flex; gap: 24px; align-items: flex-start; justify-content: center; }
.offedit-panel { position: sticky; top: 16px; width: 290px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; padding: 18px; box-shadow: var(--shadow); }
.offedit-panel__h h4 { font-size: 15px; font-weight: 500; margin-top: 2px; }
.offedit-panel__hint { font-size: 12px; color: var(--text-3); line-height: 1.5; margin: 10px 0 14px; }
.offedit-list { display: flex; flex-direction: column; gap: 2px; }
.offedit-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px; cursor: pointer; border-bottom: 1px solid var(--line); }
.offedit-row:last-child { border-bottom: none; }
.offedit-row__lbl { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text); }
.offedit-row__lbl em { font-style: normal; width: 19px; height: 19px; border-radius: 6px; background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.offedit-row__dot { background: var(--glass) !important; color: transparent !important; position: relative; }
.offedit-row__dot::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); }
.offedit-reset { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--text-2); margin-top: 16px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; width: 100%; justify-content: center; }
.offedit-reset:hover { border-color: var(--text-3); color: var(--text); }
.offedit { width: 100%; font: inherit; color: inherit; background: color-mix(in srgb, var(--brand) 4%, transparent); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; resize: none; line-height: 1.6; overflow: hidden; display: block; }
.offedit:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); background: var(--surface); }
.offdoc__intro .offedit { margin-bottom: 10px; }
.offedit--addr { margin-top: 6px; font-size: 13px; }
.offedit--note { margin-bottom: 12px; }
.offedit--inline { width: auto; min-width: 220px; padding: 6px 10px; margin-top: 4px; }
.offedit-vw { display: flex; flex-direction: column; gap: 8px; }
.offedit-vwrow { display: flex; align-items: flex-start; gap: 10px; }
.offedit-vwrow__b { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-top: 15px; flex-shrink: 0; }
.offedit-vwrow .offedit { flex: 1; }
@media print { .offedit-panel, .offdoc-toolbar { display: none !important; } .offdoc-layout.is-editing { display: block !important; } .offedit { border: none !important; background: none !important; padding: 0 !important; } }

/* ---------------- projectleider-dashboard ----------------- */
.pl-rolepill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--brand); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); padding: 8px 13px; border-radius: 999px; }
.pl-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); }
.pl-stat__label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pl-stat__val { font-size: 34px; font-weight: 200; letter-spacing: -.02em; line-height: 1.1; margin-top: 10px; }
.pl-stat__sub { font-size: 12px; color: var(--text-3); margin-top: 6px; }
.pl-attlist { display: flex; flex-direction: column; gap: 7px; }
.pl-attrow { display: flex; align-items: center; gap: 13px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; text-align: left; background: var(--surface); transition: all .14s; }
.pl-attrow:hover { border-color: var(--text-3); box-shadow: var(--shadow); }
.pl-attrow__bar { width: 4px; align-self: stretch; border-radius: 3px; flex-shrink: 0; }
.pl-attrow__main { flex: 1; min-width: 0; }
.pl-attrow__main b { font-size: 13.5px; font-weight: 500; display: block; }
.pl-attrow__main span { font-size: 12px; color: var(--text-2); display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-attrow__margin { font-size: 13px; font-weight: 600; flex-shrink: 0; }

/* ---------------- lopende portaalpunten (dashboard) ------- */
.ppt-sub { font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin: -4px 0 14px; }
.ppt-tabs { display: flex; gap: 7px; margin-bottom: 12px; }
.ppt-tab { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--text-2); padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; }
.ppt-tab:hover { border-color: var(--text-3); }
.ppt-tab.is-on { background: var(--text); color: var(--surface); border-color: var(--text); }
.ppt-tab em { font-style: normal; font-size: 10.5px; font-weight: 600; opacity: .7; }
.ppt-list { display: flex; flex-direction: column; gap: 6px; }
.ppt-empty { font-size: 13px; color: var(--text-3); padding: 14px 2px; }
.ppt-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; transition: all .14s; }
.ppt-row:hover { border-color: var(--text-3); box-shadow: var(--shadow); }
.ppt-row__type { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ppt-row__type--bevinding { color: var(--signal); background: var(--signal-soft); }
.ppt-row__type--discussie { color: var(--brand); background: var(--brand-soft); }
.ppt-row__main { flex: 1; min-width: 0; }
.ppt-row__main b { font-size: 13.5px; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppt-row__meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 11px; color: var(--text-3); margin-top: 3px; }
.ppt-row__proj { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--text-2); }
.ppt-row__sep { opacity: .5; }
.ppt-row__prio { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.ppt-row__prio i { width: 6px; height: 6px; border-radius: 50%; }
.ppt-pill { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; flex-shrink: 0; white-space: nowrap; }
.ppt-row__date { font-size: 11px; color: var(--text-3); flex-shrink: 0; min-width: 42px; text-align: right; }
@media (max-width: 720px) { .ppt-row__meta .ppt-row__sep:nth-of-type(n+2), .ppt-row__date { display: none; } }

/* ---------------- moderne fase-stepper (spine2) ----------- */
.spine2 { padding: 2px 0 4px; }
.spine2__meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.spine2__step { font-size: 12.5px; font-weight: 600; color: var(--text); }
.spine2__step i { font-style: normal; color: var(--text-3); font-weight: 500; }
.spine2__pct { display: flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 500; color: var(--text-3); }
.spine2__pctbar { width: 90px; height: 5px; border-radius: 999px; background: var(--track); overflow: hidden; }
.spine2__pctbar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb,var(--brand) 80%, white 8%), var(--brand)); transition: width .5s cubic-bezier(.4,0,.2,1); }
.spine2__track { display: flex; align-items: flex-start; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.spine2__track::-webkit-scrollbar { display: none; }

.phx { flex: 1 1 0; min-width: 78px; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 4px 2px 6px; background: none; border: none; cursor: pointer; position: relative; }
.phx__rail { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 34px; }
.phx__seg { position: absolute; top: 50%; height: 3px; width: calc(50% - 15px); transform: translateY(-50%); background: var(--line-strong); border-radius: 999px; transition: background .4s; }
.phx__seg--in { left: 0; }
.phx__seg--out { right: 0; }
.phx__seg.is-fill { background: var(--brand); }
.phx__node { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .18s, box-shadow .2s, background .2s, border-color .2s; }
.phx__node b { font-style: normal; font-size: 12.5px; font-weight: 600; }
.phx__node em { font-style: normal; font-size: 11px; font-weight: 700; line-height: 1; display: flex; align-items: baseline; }
.phx__node em i { font-style: normal; font-size: 7px; font-weight: 600; margin-left: .5px; }
.phx__label { font-size: 11.5px; font-weight: 500; color: var(--text-3); text-align: center; line-height: 1.25; max-width: 84px; transition: color .18s; }

/* done */
.phx--done .phx__node { background: var(--brand); color: #fff; box-shadow: 0 2px 6px color-mix(in srgb,var(--brand) 32%, transparent); }
.phx--done .phx__label { color: var(--text-2); }
/* active */
.phx--active .phx__node { background: var(--surface); border: 2.5px solid var(--brand); color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.phx--active .phx__label { color: var(--text); font-weight: 600; }
/* todo */
.phx--todo .phx__node { background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--text-3); }
.phx:hover .phx__node { transform: translateY(-2px); }
.phx:hover .phx__label { color: var(--text); }
.phx--todo:hover .phx__node { border-color: var(--brand); color: var(--brand); }

/* huidige selectie */
.phx.is-cur::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -3px; height: 2.5px; border-radius: 999px; background: var(--brand); }
.phx.is-cur .phx__label { color: var(--brand); font-weight: 600; }
.phx--todo.is-cur .phx__node { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

/* WP01 / B01: Financiën als doorlopend spoor, fasevoorstel en fasewissel */
.phx--spoor { flex: 0 0 auto; min-width: 86px; margin-left: 8px; border-left: 1px dashed var(--line-strong); }
.phx--spoor .phx__node { border-style: dashed; }
.phx--spoor.phx--active .phx__node { border-style: solid; }
.fasevs__link { display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; vertical-align: middle; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-size: 11.5px; font-weight: 500; color: var(--text-2); cursor: pointer; }
.fasevs__link:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.fasevs__link:disabled { opacity: .55; cursor: not-allowed; }
.fasevs { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin: -2px 0 12px; border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: 12px; background: var(--brand-soft); }
.fasevs__ic { display: inline-flex; color: var(--brand); flex-shrink: 0; }
.fasevs__txt { font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.fasevs__txt b { color: var(--text); font-weight: 600; }
.fasevs__acts { margin-left: auto; display: inline-flex; gap: 8px; flex-shrink: 0; }
.fasevs__acts .btn { padding: 6px 12px; font-size: 12px; }
.fasevs__fout { color: var(--signal); font-style: normal; font-size: 12.5px; }
.fasevs__uitleg { font-size: 13px; color: var(--text-2); line-height: 1.5; margin: 0 0 14px; }
.fasevs__uitleg b { color: var(--text); }
.fasevs__hist { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 12px; }
.fasevs__histh { font-size: 11.5px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.fasevs__histrij { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.fasevs__histrij:last-child { border-bottom: none; }
.fasevs__histrij b { color: var(--text); font-weight: 600; }
.fasevs__histrij span { color: var(--text-3); font-size: 11.5px; }
.fasevs__histrij em { color: var(--text-2); font-style: normal; }
@media (max-width: 720px) { .fasevs { flex-wrap: wrap; } .fasevs__acts { margin-left: 0; } }

/* ---------------- hoeveelhedenstaat · invullen ------------ */
.utk__row--edit { padding-top: 8px; padding-bottom: 8px; }
.utk__edit { font: inherit; font-size: 12.5px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--text); width: 100%; transition: border-color .14s, box-shadow .14s; }
.utk__edit:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.utk__edit--num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.utk__edit--eh { text-align: center; }
.utk__edit--cat { padding: 6px 8px; cursor: pointer; }
.utk__edit--fout { text-align: right; font-variant-numeric: tabular-nums; width: 58px; padding-right: 6px; }
.utk__foutpct { margin-left: 3px; font-size: 12px; color: var(--text-3); }
.utk__del { width: 30px; height: 30px; border-radius: 8px; font-size: 19px; line-height: 1; color: var(--text-3); display: flex; align-items: center; justify-content: center; justify-self: start; }
.utk__del:hover { background: var(--signal-soft); color: var(--signal); }
.utk__addrow { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 18px 10px 92px; font-size: 12px; font-weight: 500; color: var(--brand); border-top: 1px dashed var(--line); background: color-mix(in srgb, var(--brand) 3%, transparent); }
.utk__addrow:hover { background: var(--brand-soft); }
.utk-invul { position: sticky; top: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; padding: 20px; box-shadow: var(--shadow); }
.utk-invul__h { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.utk-invul__h b { font-weight: 600; }
.utk-invul__big { font-size: 32px; font-weight: 200; letter-spacing: -.02em; margin: 14px 0 10px; }
.utk-invul__big span { font-size: 14px; color: var(--text-3); font-weight: 400; }
.utk-invul__bar { height: 7px; border-radius: 999px; background: var(--track); overflow: hidden; }
.utk-invul__bar span { display: block; height: 100%; border-radius: 999px; background: var(--brand); transition: width .4s; }
.utk-invul__sub { font-size: 12px; color: var(--text-2); margin: 12px 0 16px; line-height: 1.5; }
.utk-invul__tips { display: flex; flex-direction: column; gap: 9px; padding-top: 16px; border-top: 1px solid var(--line); }
.utk-invul__tips li { display: flex; gap: 9px; font-size: 12px; color: var(--text-2); line-height: 1.5; list-style: none; }
.utk-invul__tips li::before { content: '→'; color: var(--brand); flex-shrink: 0; }

/* ---------------- calculatie · invullen ------------------- */
.calc-row--edit { padding-top: 6px; padding-bottom: 6px; }
.calc-edit { font: inherit; font-size: 11.5px; padding: 5px 6px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--text); width: 100%; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; transition: border-color .12s, box-shadow .12s; }
.calc-edit:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.calc-edit::-webkit-outer-spin-button, .calc-edit::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-edit--aant { font-weight: 600; }
.calc-edit--eh { text-align: center; }
.calc-edit--oa:focus { border-color: var(--steel); box-shadow: 0 0 0 2px color-mix(in srgb, var(--steel) 22%, transparent); }
.calc-edit--stel { color: var(--amber); }
.calc-edit--stel:focus { border-color: var(--amber); box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 22%, transparent); }
.staart__pct { width: 52px; font: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 6px; margin-left: 4px; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; background: rgba(255,255,255,.12); color: #fff; text-align: right; }
.staart__pct:focus { outline: none; border-color: #fff; background: rgba(255,255,255,.2); }
.staart__pct::-webkit-outer-spin-button, .staart__pct::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------- inkoop · klikbare rij + gunnen ---------- */
.inko-list__row--btn { width: 100%; text-align: left; background: var(--surface); border: none; border-top: 1px solid var(--line); cursor: pointer; transition: background .12s; }
.inko-list__row--btn:hover { background: var(--bg-2); }
.gun-card { border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; }
.gun-card span { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); display: block; }
.gun-card b { font-size: 18px; font-weight: 300; letter-spacing: -.01em; margin-top: 5px; display: block; }

/* ============================================================
   WP14 · EXTERN PORTAAL (portaal.html, xp-*)
   Alleen tokens uit cerp/styles.css en compositie.css.
   ============================================================ */
.xp-body { background: var(--bg); color: var(--text); font-family: var(--f, 'Roboto', system-ui, sans-serif); margin: 0; }
/* 27-10: cerp/styles.css zet body op 100% hoogte met overflow hidden (de interne app scrolt in eigen panelen).
   Het portaal scrolt als gewone pagina; anders viel alles onder de vouw weg zodra de pagina vol raakte. */
.xp-body { height: auto; min-height: 100%; overflow: visible; overflow-x: hidden; }
.xp-laden { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--text-3); font-size: 13px; }
.xp-aanmeld { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; gap: 22px; }
.xp-aanmeld__merk { display: flex; align-items: center; gap: 12px; }
.xp-aanmeld__merk b { display: block; font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.xp-aanmeld__merk span { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.xp-aanmeld__kaart { width: 100%; max-width: 440px; padding: 30px 30px 26px; }
.xp-aanmeld__titel { font-size: 26px; font-weight: 300; letter-spacing: -.02em; margin: 0 0 14px; }
.xp-aanmeld__uitleg { font-size: 13.5px; line-height: 1.6; color: var(--text-2); margin: 0 0 16px; }
.xp-aanmeld__knop { width: 100%; justify-content: center; padding: 12px 16px; }
.xp-aanmeld__knop:disabled { opacity: .5; cursor: default; }
.xp-aanmeld__klaar { display: flex; gap: 14px; align-items: flex-start; }
.xp-aanmeld__klaar b { font-size: 15px; font-weight: 500; }
.xp-aanmeld__klaar p { font-size: 13px; line-height: 1.6; color: var(--text-2); margin: 6px 0 0; }
.xp-aanmeld__ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--brand); background: var(--brand-soft); }
.xp-aanmeld__voet { font-size: 11px; color: var(--text-3); text-align: center; }
.xp-body .bib-field span { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.xp-body .bib-field input, .xp-body .bib-field textarea, .xp-zoek, .xp-post input { font: inherit; font-size: 13.5px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--text); width: 100%; box-sizing: border-box; }
.xp-body .bib-field input:focus, .xp-body .bib-field textarea:focus, .xp-zoek:focus, .xp-post input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.xp-body .bib-field input[type="file"] { padding: 8px; }
.xp-melding { font-size: 13px; line-height: 1.5; padding: 10px 13px; border-radius: 10px; margin: 0 0 14px; border: 1px solid transparent; }
.xp-melding--info { background: var(--glass); color: var(--text-2); border-color: var(--line); }
.xp-melding--ok { color: var(--pos-tekst); background: color-mix(in srgb, var(--pos) 9%, transparent); border-color: color-mix(in srgb, var(--pos) 26%, transparent); }
.xp-melding--fout { color: var(--signal); background: var(--signal-soft); border-color: color-mix(in srgb, var(--signal) 26%, transparent); }
.xp-melding--waarschuwing { color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 10%, transparent); border-color: color-mix(in srgb, var(--amber) 28%, transparent); }
.xp-leeg { padding: 22px 18px; text-align: center; font-size: 13px; color: var(--text-3); line-height: 1.6; }
.xp-voorbeeldbalk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px clamp(20px,4vw,48px); background: var(--amber); color: var(--surface); font-size: 12.5px; position: sticky; top: 0; z-index: 20; }
.xp-voorbeeldbalk button { font: inherit; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 7px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.xp-wie { text-align: right; line-height: 1.3; }
.xp-wie b { display: block; font-size: 13px; font-weight: 500; }
.xp-wie span { font-size: 11.5px; color: var(--text-3); }
.xp-knop-klein { padding: 6px 12px; font-size: 12px; text-decoration: none; }
.xp-knop-klein:disabled { opacity: .5; cursor: default; }
.xp-hero-stat { display: grid; grid-template-columns: auto; gap: 2px; text-align: right; min-width: 160px; }
.xp-hero-stat span { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-top: 6px; }
.xp-hero-stat b { font-size: 18px; font-weight: 400; }
.xp-kaartkop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 14px; flex-wrap: wrap; }
.xp-kaartkop__r { font-size: 11.5px; color: var(--text-3); }
.xp-zoek { max-width: 260px; padding: 8px 11px; font-size: 12.5px; }
/* portaaltabellen: opmaak uit .tbl (patronen.css, ook geladen in portaal.html); .xp-tabel blijft alleen als haak voor de smalle weergave hieronder */
.xp-sub { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.xp-r { text-align: right; white-space: nowrap; }
.xp-rij { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 13px 0; border-top: 1px solid var(--line); }
.xp-rij--blok { display: block; }
.xp-rij__lijn { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.xp-rij__hoofd { flex: 1 1 220px; min-width: 0; }
.xp-rij__hoofd b { font-size: 14px; font-weight: 500; }
/* h131: de knoppen slaan om als ze niet naast elkaar passen (telefoon: Offerte openen, Akkoord geven, Afwijzen) */
.xp-rij__acties { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: auto; min-width: 0; max-width: 100%; }
.xp-bedrag { font-size: 15px; font-weight: 500; white-space: nowrap; }
.xp-bedrag span { font-size: 11px; font-weight: 400; color: var(--text-3); }
.xp-bevestig { flex-basis: 100%; margin-top: 10px; padding: 14px 16px; border-radius: 11px; background: var(--glass); border: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.xp-bevestig p { margin: 0 0 10px; line-height: 1.55; }
.xp-bevestig__knoppen { display: flex; justify-content: flex-end; gap: 8px; }
.xp-ingediend { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 12.5px; color: var(--pos-tekst); }
.xp-bieding { margin-top: 14px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); }
.xp-bieding__kop { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 10px; }
.xp-bieding__kop span { font-weight: 400; color: var(--text-3); margin-left: 6px; }
.xp-post { display: grid; grid-template-columns: 1fr 170px 34px; gap: 8px; margin-bottom: 8px; }
.xp-post__weg { border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--text-3); font-size: 16px; cursor: pointer; }
.xp-post__erbij { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 12px; }
.xp-bieding__totaal { max-width: 280px; }
.xp-bieding__som { display: flex; align-items: baseline; justify-content: space-between; padding: 11px 0; margin: 4px 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.xp-bieding__som b { font-size: 18px; font-weight: 500; color: var(--text); }
.xp-bieding__som i { font-style: normal; font-size: 11px; font-weight: 400; color: var(--text-3); }
.xp-bieding__voet { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.xp-bieding .btn--brand:disabled { opacity: .5; cursor: default; }
.xp-hint { display: block; font-style: normal; font-size: 11.5px; color: var(--text-3); margin-top: 5px; }
/* h51: bedragveld met komma; rode rand en melding bij meer dan twee cijfers achter de komma. */
.xp-bieding input.xp-geld { text-align: right; font-variant-numeric: tabular-nums; }
.xp-bieding input.xp-geld.is-fout { border-color: var(--signal); }
.xp-bieding .xp-geldfout { color: var(--signal); font-weight: 500; margin: 0 0 10px; }
/* h55: omschrijving ontbreekt bij een post met bedrag; melding over de volle breedte onder de post. */
.xp-bieding .xp-post input.xp-post__oms.is-fout { border-color: var(--signal); }
.xp-post__fout { grid-column: 1 / -1; margin: 0; }
.xp-drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.xp-overzicht { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.xp-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.xp-tegel { text-align: left; padding: 18px; display: flex; flex-direction: column; gap: 5px; cursor: pointer; transition: border-color .14s, transform .14s; }
.xp-tegel:hover { border-color: var(--brand); transform: translateY(-1px); }
.xp-tegel b { font-size: 14.5px; font-weight: 500; margin-top: 6px; }
.xp-tegel span { font-size: 12.5px; color: var(--text-3); line-height: 1.45; }
/* h75 H12: teller op de tegels Contracten en Orders (bestaande merktokens, licht en donker). */
.xp-tegel span.xp-tegel__teller { display: inline-block; margin-left: 8px; min-width: 20px; padding: 1px 7px; border-radius: 10px; font-size: 11.5px; font-weight: 600; line-height: 18px; text-align: center; color: var(--brand); background: var(--brand-soft); vertical-align: 1px; }
.xp-tegel__ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--brand); background: var(--brand-soft); }
.xp-contact { display: flex; align-items: center; gap: 14px; }
.xp-contact__av { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--steel); color: var(--surface); font-weight: 600; }
.xp-contact b { display: block; font-size: 14px; font-weight: 500; }
.xp-contact span { display: block; font-size: 12px; color: var(--text-3); }
.xp-contact a { font-size: 12.5px; color: var(--brand); text-decoration: none; }
.xp-tekst { font-size: 13px; line-height: 1.6; color: var(--text-2); margin: 0 0 14px; }
.xp-gegevens { display: grid; grid-template-columns: 200px 1fr; gap: 10px 18px; margin: 0 0 18px; font-size: 13px; }
.xp-gegevens dt { color: var(--text-3); }
.xp-gegevens dd { margin: 0; color: var(--text); line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .xp-drie, .xp-gegevens { grid-template-columns: minmax(0, 1fr); }
  .xp-drie > *, .xp-drie select, .xp-drie input { min-width: 0; max-width: 100%; }
  /* h55: omschrijving op een eigen regel over de volle breedte; bedrag en verwijderen eronder. */
  .xp-post { grid-template-columns: minmax(0, 1fr) 40px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .xp-post .xp-post__oms { grid-column: 1 / -1; }
  .xp-tabel th:nth-child(2), .xp-tabel td:nth-child(2), .xp-tabel th:nth-child(4), .xp-tabel td:nth-child(4) { display: none; }
  .xp-hero-stat { text-align: left; }
  .xp-body .pog-hero { flex-direction: column; align-items: flex-start; }
  .xp-body .pog-hero h1 { font-size: 24px; }
  .xp-body .portal__top { flex-wrap: wrap; gap: 10px; }
  .xp-body .portal__inner { padding: 20px 16px 48px; }
}

/* ============================================================
   WP14 · PORTAALBEHEER met serverproject (pbx-*)
   ============================================================ */
.pbx-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 14px; flex-wrap: wrap; }
.pbx-tabel { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pbx-tabel th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 10px 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; }
.pbx-tabel th:first-child, .pbx-tabel td:first-child { padding-left: 22px; }
.pbx-tabel th:last-child, .pbx-tabel td:last-child { padding-right: 22px; }
.pbx-tabel td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-2); }
.pbx-tabel td b { color: var(--text); font-weight: 500; }
.pbx-tabel tbody tr:hover { background: var(--bg-2); }
.pbx-sub { display: block; font-size: 11px; color: var(--text-3); margin-top: 2px; line-height: 1.45; }
.pbx-link { display: block; font-family: 'Roboto Mono', monospace; font-size: 11px; color: var(--text-2); word-break: break-all; max-width: 260px; }
.pbx-acties { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; min-width: 200px; max-width: 240px; margin-left: auto; }
.pbx-knop { font: inherit; font-size: 11.5px; font-weight: 500; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.pbx-knop:hover { border-color: var(--text-3); color: var(--text); }
.pbx-knop--gevaar:hover { border-color: var(--signal); color: var(--signal); }
.pbx-knop:disabled { opacity: .45; cursor: default; }
.pbx-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; white-space: nowrap; }
.pbx-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pbx-form { border-top: 1px solid var(--line); padding: 16px 22px 18px; }
.pb-servercard { margin-bottom: 72px !important; }
/* h148 (Q69, vraag 194): zes velden, met de naam van de contactpersoon. */
.pbx-form__rij { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 150px) auto; gap: 10px; align-items: end; }
.pbx-form__rij > * { min-width: 0; }
.pbx-form__rij .bib-field input, .pbx-form__rij .bib-field select { width: 100%; min-width: 0; box-sizing: border-box; }
.pbx-form .bib-field { margin-bottom: 0; }
.pbx-profiel { margin-top: 10px; font-size: 12px; line-height: 1.55; color: var(--text-2); padding: 10px 12px; border-radius: 9px; background: var(--glass); }
.pbx-profiel b { color: var(--text); font-weight: 600; }
.pbx-verstuurd { margin: 12px 22px 0; padding: 12px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--pos) 28%, transparent); background: color-mix(in srgb, var(--pos) 8%, transparent); font-size: 12.5px; color: var(--text-2); }
.pbx-verstuurd b { color: var(--pos-tekst); }
.pbx-verstuurd__link { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.pbx-verstuurd__link code { flex: 1; font-family: 'Roboto Mono', monospace; font-size: 11px; word-break: break-all; color: var(--text); background: var(--surface); padding: 6px 8px; border-radius: 7px; border: 1px solid var(--line); }
.pbx-waarschuwing { display: flex; gap: 10px; align-items: flex-start; margin-bottom: var(--gap); padding: 12px 14px; border-radius: 11px; font-size: 12.5px; line-height: 1.5; color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 10%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 28%, transparent); }
.pbx-kiezer { position: relative; }
.pbx-kiezer__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 300px; max-height: 360px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; }
.pbx-kiezer__lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 8px 10px 6px; }
.pbx-kiezer__item { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 10px; border-radius: 8px; text-align: left; background: none; border: none; cursor: pointer; color: var(--text); font: inherit; }
.pbx-kiezer__item:hover { background: var(--bg-2); }
.pbx-kiezer__item b { font-size: 13px; font-weight: 500; }
.pbx-kiezer__item span { font-size: 11.5px; color: var(--text-3); }
.pbx-einde { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.pbx-einde input { font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--text); }
.pbx-rij .pbx-einde { justify-content: flex-start; flex-wrap: wrap; margin-top: 6px; }
.pbx-kiezerscherm { max-width: 720px; margin: 60px auto; padding: 0 20px; }
@media (max-width: 1100px) { .pbx-form__rij { grid-template-columns: 1fr 1fr; } }
/* h148 (Q69, vraag 194): met het naamveld erbij krijgt de knop in twee kolommen een eigen regel. */
@media (max-width: 1100px) { .pbx-form__rij > .btn { grid-column: 1 / -1; justify-self: start; } }

/* ============================================================
   WP28 · TOEGANG EN PARTIJEN (pbx-*) en portaal (xp-*)
   ============================================================ */
.pbx-rij { cursor: pointer; }
.pbx-rij.is-open td { background: var(--bg-2); }
.pbx-detailrij > td { padding: 0 !important; background: var(--bg-2); }
.pbx-detailrij:hover { background: none !important; }
.pbx-detail { display: grid; grid-template-columns: 1.25fr 1fr 1.25fr; gap: 14px; padding: 14px 22px 18px; }
.pbx-blok { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.pbx-blok__kop { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.pbx-blok__kop span { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.pbx-taal ul { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.55; color: var(--text); }
.pbx-taal li { margin-bottom: 3px; }
.pbx-taal__nooit { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: var(--text-3); }
.pbx-taal__nooit svg { flex-shrink: 0; margin-top: 2px; }
.pbx-telling { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--glass); font-size: 12px; color: var(--text-2); }
.pbx-telling b { font-size: 14px; color: var(--text); }
.pbx-tekst { font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.pbx-persoon, .pbx-uitz { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.pbx-persoon:first-of-type, .pbx-uitz:first-of-type { border-top: none; }
.pbx-persoon b, .pbx-uitz b { font-weight: 500; color: var(--text); }
.pbx-persoon.is-uit, .pbx-uitz.is-uit { opacity: .55; }
/* h148 (Q69, vraag 194): zonder naam staan bedrijf en e-mailadres vet; een lang adres breekt af en de knoppen gaan eronder als het smal wordt. */
.pbx-persoon { flex-wrap: wrap; }
.pbx-persoon > div:first-child { flex: 1 1 160px; min-width: 0; }
.pbx-persoon b { overflow-wrap: anywhere; }
.pbx-mini { display: grid; grid-template-columns: 1fr 1.3fr 130px auto; gap: 6px; margin-top: 10px; }
.pbx-mini--persoon { grid-template-columns: 1fr 1fr; }
.pbx-mini--persoon > input:nth-child(2) { grid-column: 1 / -1; order: -1; }
.pbx-mini--persoon > button { grid-column: 1 / -1; justify-self: start; }
.pbx-mini input, .pbx-mini select { font: inherit; font-size: 12px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--text); min-width: 0; }
.pbx-uitzform { margin-top: 10px; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); }
.pbx-uitzform__rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 8px; }
/* h93: in de smalle detailkolom liepen Recht en Discipline rechts buiten het formulier. */
.pbx-uitzform .bib-field { min-width: 0; }
.pbx-uitzform .bib-field select, .pbx-uitzform .bib-field input, .pbx-uitzform .bib-field textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.pbx-uitzform .bib-field, .pbx-editor .bib-field { margin-bottom: 8px; }
.pbx-profielen { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; padding: 0 22px 18px; }
.pbx-profielkaart { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surface); min-width: 0; }
.pbx-profielkaart.is-uit { opacity: .7; }
.pbx-profielkaart__kop { margin-bottom: 8px; }
.pbx-profielkaart__kop b { display: block; font-size: 14px; font-weight: 500; }
.pbx-profielkaart__kop span { font-size: 11px; color: var(--text-3); }
.pbx-profielkaart:has(.pbx-editor) { grid-column: 1 / -1; }
.pbx-editor { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.pbx-vinkjes { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: var(--text-2); margin: 4px 0 6px; }
.pbx-vinkjes label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pbx-recht { font: inherit; font-size: 11.5px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-3); }
.pbx-recht--lezen { color: var(--steel); border-color: var(--steel); background: color-mix(in srgb, var(--steel) 10%, transparent); }
.pbx-recht--downloaden { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.pbx-versies { margin-top: 10px; display: grid; gap: 6px; }
.pbx-versie { padding: 8px 10px; border-radius: 8px; background: var(--bg-2); font-size: 12px; }
.pbx-versie b { font-weight: 500; }
.pbx-modal { width: min(860px, 94vw); max-height: 86vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); margin: 7vh auto 0; }
@media (max-width: 1200px) { .pbx-detail { grid-template-columns: 1fr; } }

.xp-afgesloten { display: flex; align-items: center; gap: 10px; padding: 9px clamp(20px,4vw,48px); background: color-mix(in srgb, var(--amber) 14%, var(--surface)); color: var(--text); font-size: 12.5px; border-bottom: 1px solid color-mix(in srgb, var(--amber) 30%, transparent); }
.xp-afgesloten svg { color: var(--amber); flex-shrink: 0; }
.xp-lijst { margin: 0 0 12px; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--text); }
.xp-kop-klein { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 6px 0 6px; }
.xp-bekijk { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--navy) 55%, transparent); display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; }
.xp-bekijk__kader { width: 100%; max-width: 1200px; height: 94vh; display: flex; flex-direction: column; background: var(--surface); border-radius: 14px; border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow-lg); }
.xp-bekijk__kop { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.xp-bekijk__kop b { font-size: 14px; font-weight: 500; }
.xp-bekijk__vlak { position: relative; flex: 1; min-height: 0; background: var(--bg-2); overflow: hidden; }
.xp-bekijk__frame { width: 100%; height: 100%; border: 0; display: block; background: var(--surface); }
.xp-bekijk__beeld { width: 100%; height: 100%; object-fit: contain; display: block; }
.xp-bekijk__voet { padding: 8px 16px; font-size: 11px; color: var(--text-3); border-top: 1px solid var(--line); }
.xp-watermerk { position: absolute; inset: 0; pointer-events: none; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 140px; align-items: center; justify-items: center; overflow: hidden; }
.xp-watermerk span { transform: rotate(-24deg); white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--navy); opacity: .13; user-select: none; }
[data-theme="dark"] .xp-watermerk span { color: var(--text); opacity: .16; }

/* WP26 deel 2: formele reactie op een uitgifte ter goedkeuring */
.xp-reactie { display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
.xp-reactie label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.xp-reactie textarea { width: 100%; min-height: 54px; font: inherit; font-size: 12.5px; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--text); resize: vertical; }
.xp-reactie > div { display: flex; gap: 6px; justify-content: flex-end; }
/* h37: bediening met een duim op de telefoon. Knoppen minstens 40 px, de primaire knop 44 px,
   het e-mailadres van de contactpersoon 32 px hoog en het vinkje bij een meerwerkpost krijgt
   via zijn label een tikvlak van 32 px. Op de desktop doet het label niets (display: contents). */
.xp-kies { display: contents; }
@media (max-width: 600px) {
  .xp-body :is(button, a.btn) { min-height: 40px; }
  .xp-body .btn--brand { min-height: 44px; }
  .xp-contact a { display: inline-flex; align-items: center; min-height: 32px; }
  .xp-kies { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px; cursor: pointer; }
}

/* h61 slice 10: stukken bij een offerteaanvraag (documentset via transmittal) */
.xp-stukken { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.xp-stukken__rij { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.xp-stukken__rij > span { display: flex; flex-direction: column; min-width: 0; }
.xp-stukken__rij > span > i { font-style: normal; font-size: 11.5px; color: var(--text-3); }
@media (max-width: 640px) { .xp-stukken__rij { flex-wrap: wrap; } .xp-stukken__rij > .btn { flex: 1 1 100%; } }
/* h148 (Q69, vraag 71): smal staat de uitleg onder het formulier op een eigen regel boven de knop, niet in een smalle kolom ernaast. */
@media (max-width: 640px) { .xp-bieding__voet { flex-wrap: wrap; } .xp-bieding__voet > .xp-hint { flex: 1 1 100%; } .xp-bieding__voet > .btn { flex: 1 1 100%; justify-content: center; } }

/* h63 slice 5 en 13: de offerteaanvraag voor de partij, prijs per regel en biedingsversies */
.xp-aanvraag { margin-top: 10px; }
.xp-aanvraag__knop { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: 100%; white-space: normal; text-align: left; font-size: 12.5px; min-height: 32px; }
.xp-aanvraag__knop > span { font-weight: 400; color: var(--text-3); }
.xp-aanvraag__inhoud { margin-top: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.xp-aanvraag__oms { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--text); white-space: pre-line; }
.xp-aanvraag__oms--leeg { color: var(--text-3); font-size: 12.5px; }
.xp-termijnen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; margin: 0 0 14px; }
.xp-termijnen > div { min-width: 0; }
.xp-termijnen dt { font-size: 11px; color: var(--text-3); margin-bottom: 2px; }
.xp-termijnen dd { margin: 0; font-size: 12.5px; color: var(--text); }
.xp-termijnen__breed { grid-column: 1 / -1; }
.xp-termijnen .link-btn { display: inline-flex; align-items: center; gap: 6px; text-align: left; max-width: 100%; white-space: normal; }
.xp-termijnen .link-btn svg { flex: none; }
.xp-regels { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.xp-regels__kop, .xp-regels__rij { display: grid; grid-template-columns: 110px minmax(0, 1fr) 130px 170px; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; align-items: baseline; }
.xp-regels__kop { font-size: 11px; color: var(--text-3); }
.xp-regels__code { font-variant-numeric: tabular-nums; color: var(--text-2); }
.xp-regels__hvh { text-align: right; font-variant-numeric: tabular-nums; }
.xp-regels__kop > span:nth-child(3) { text-align: right; }
.xp-regels__ond { color: var(--text-2); }
.xp-verplicht { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 500; color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.xp-versies { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.xp-versies__rij { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; color: var(--text-2); }
.xp-versies__rij.is-geldend { background: var(--bg-2); color: var(--text); }
.xp-versies__rij > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.xp-versies__rij > span:first-child > i { font-style: normal; font-size: 11.5px; color: var(--text-3); overflow-wrap: anywhere; }
.xp-versies__geldig { font-size: 12px; color: var(--text-2); }
.xp-versies__bedrag { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xp-versies__bedrag i { font-style: normal; font-size: 11px; font-weight: 400; color: var(--text-3); }
/* h63 slice 11: voorwaardenacceptatie en ontvangstbevestiging */
.xp-versies__rij > span:first-child > i.xp-versies__bev { display: block; color: var(--pos-tekst); }
.xp-versies__bev svg { vertical-align: -2px; margin-right: 5px; }
.xp-akkoord { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line)); border-radius: 8px; background: color-mix(in srgb, var(--amber) 7%, var(--surface)); font-size: 12.5px; color: var(--text-2); }
.xp-akkoord p { margin: 0; line-height: 1.5; }
/* Een knop rendert altijd als inline-block; de lange titel van de voorwaarden moet binnen de zin
   kunnen afbreken, dus geen pil, geen nowrap en geen tikhoogte van 40 px midden in een zin. */
.xp-akkoord .link-btn { display: inline; padding: 0; min-height: 0; max-width: 100%; white-space: normal; text-align: left; background: none; border-radius: 0; color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.xp-akkoord .link-btn:hover { background: none; color: var(--brand); }
.xp-body .xp-akkoord .link-btn { min-height: 0; }
.xp-akkoord .link-btn svg { vertical-align: -2px; margin-right: 3px; }
.xp-akkoord__kop { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.xp-akkoord__vink { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; color: var(--text); min-height: 32px; }
.xp-akkoord__vink input { margin-top: 2px; width: 16px; height: 16px; flex: none; }
.xp-akkoord--gegeven { flex-direction: row; align-items: flex-start; border-color: var(--line); background: var(--bg-2); color: var(--text-2); }
.xp-akkoord--gegeven > svg { color: var(--pos); flex: none; margin-top: 2px; }
.xp-akkoord--gegeven > span { overflow-wrap: anywhere; }
@media (max-width: 640px) { .xp-akkoord > .btn { align-self: stretch; } }
.xp-prijsregels { margin-bottom: 14px; }
.xp-prijsregel { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 8px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.xp-prijsregel__oms { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; }
.xp-prijsregel__oms > i { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.xp-prijsregel__oms > .xp-verplicht { align-self: flex-start; margin: 3px 0 0; }
/* Het prijsveld per regel krijgt dezelfde vorm als het bedragveld van een post. */
.xp-prijsregel input.xp-geld { font: inherit; font-size: 13.5px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--text); width: 100%; box-sizing: border-box; }
.xp-prijsregel input.xp-geld:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.xp-prijsregel.is-open input.xp-geld { border-color: var(--amber); }
.xp-prijsregel input.xp-geld.is-fout { border-color: var(--signal); }
.xp-bieding__geldig { max-width: 280px; }
.xp-bieding__geldig .xp-hint { display: block; margin-top: 4px; }
@media (max-width: 720px) {
  .xp-termijnen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .xp-regels__kop { display: none; }
  .xp-regels__rij { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
  .xp-regels__code { grid-column: 1 / -1; font-size: 11px; color: var(--text-3); }
  .xp-regels__oms { grid-column: 1; }
  .xp-regels__hvh { grid-column: 2; grid-row: 2; }
  .xp-regels__ond { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-3); }
  .xp-versies__rij { grid-template-columns: minmax(0, 1fr) auto; }
  .xp-versies__rij > span:first-child { grid-column: 1 / -1; }
  .xp-versies__geldig { grid-column: 1; }
  .xp-prijsregel { grid-template-columns: minmax(0, 1fr); }
  .xp-bieding__geldig { max-width: none; }
}

/* h70 slice 16 (INK-4.F6): contract accepteren in het portaal. */
.xp-contract__termijnen { margin-top: 10px; }
.xp-contract__klein { display: none; }
.xp-contract__somrij td { border-top: 1px solid var(--line-strong); }
.xp-contract__doc { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.xp-contract__docnaam { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.xp-contract__docnaam b { font-weight: 500; overflow-wrap: anywhere; }
.xp-contract__docnaam i { font-style: normal; font-family: 'Roboto Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--text-3); overflow-wrap: anywhere; }
.xp-contract__knoppen { display: flex; gap: 8px; justify-content: flex-end; align-self: stretch; flex-wrap: wrap; }
.xp-contract .xp-akkoord .bib-field { align-self: stretch; }
@media (max-width: 720px) {
  .xp-tabel--termijn th:nth-child(2), .xp-tabel--termijn td:nth-child(2), .xp-tabel--termijn th:nth-child(3), .xp-tabel--termijn td:nth-child(3) { display: none; }
  .xp-tabel--termijn th:nth-child(4), .xp-tabel--termijn td:nth-child(4) { display: table-cell; }
  .xp-contract__klein { display: block; }
  .xp-contract__doc { flex-wrap: wrap; }
  .xp-contract__doc > .btn { flex: 1 1 100%; }
  .xp-contract__knoppen > .btn { flex: 1 1 100%; }
}

/* h70 slice 22: orders bevestigen en vragen tijdens de biedtermijn. */
.xp-order__lever { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--text-2); }
.xp-order__lever b { margin-left: 4px; color: var(--text); font-weight: 600; }
.xp-order__regels { margin-top: 10px; }
.xp-order__klein { display: none; }
.xp-order__velden { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px; align-self: stretch; }
.xp-order__velden .bib-field { margin: 0; }
.xp-order__reactie { margin-top: 8px; }
.xp-qa { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); display: flex; flex-direction: column; gap: 8px; }
.xp-qa__kop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; }
.xp-qa__kop .xp-sub { flex: 1 1 240px; }
.xp-qa__item { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-size: 12.5px; }
.xp-qa__vraag, .xp-qa__antwoord { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; white-space: pre-wrap; color: var(--text); }
.xp-qa__vraag i, .xp-qa__antwoord i { font-style: normal; font-size: 11.5px; color: var(--text-3); white-space: normal; }
.xp-qa__antwoord { padding-left: 8px; border-left: 2px solid var(--pos); }
.xp-qa__wacht { font-size: 11.5px; color: var(--text-3); }
.xp-qa__nieuw .bib-field { margin: 0 0 8px; }
@media (max-width: 640px) {
  .xp-order__klein { display: block; }
  .xp-tabel--order th:nth-child(2), .xp-tabel--order td:nth-child(2), .xp-tabel--order th:nth-child(3), .xp-tabel--order td:nth-child(3) { display: none; }
  .xp-tabel--order th:nth-child(4), .xp-tabel--order td:nth-child(4) { display: table-cell; }
  .xp-order__velden { grid-template-columns: minmax(0, 1fr); }
  .xp-qa__kop > .btn { flex: 1 1 100%; }
}
.xp-tabel--aanlever .xp-aanlever__nr { display: none; }
@media (max-width: 720px) {
  /* h93: aanleveringen op de telefoon: bestand en status zijn het belangrijkst; het aanlevernummer
     schuift onder de bestandsnaam en de ontvangstdatum valt weg */
  .xp-tabel--aanlever th:nth-child(2), .xp-tabel--aanlever td:nth-child(2), .xp-tabel--aanlever th:nth-child(4), .xp-tabel--aanlever td:nth-child(4) { display: table-cell; }
  .xp-tabel--aanlever th:nth-child(1), .xp-tabel--aanlever td:nth-child(1), .xp-tabel--aanlever th:nth-child(3), .xp-tabel--aanlever td:nth-child(3) { display: none; }
  .xp-tabel--aanlever td:nth-child(2) b { overflow-wrap: anywhere; }
  .xp-tabel--aanlever .xp-aanlever__nr { display: block; }
}

/* h91 (Q24 plak 7, INK-3.F6): prijsvast, betaaltermijn en levertijd naast elkaar; bedrag bevestigen. */
.xp-kenmerken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; margin-top: 4px; }
.xp-kenmerken > .xp-geldfout { grid-column: 1 / -1; }
.xp-bevestig__toel { align-self: stretch; margin: 0; }
@media (max-width: 720px) { .xp-kenmerken { grid-template-columns: minmax(0, 1fr); } }
/* h95 (vraag 359): uitgegeven documenten op de telefoon. Geen kolommen naast elkaar maar per stuk
   een blok: document met Openen ernaast, daaronder revisie, verzending en doel, en Uw reactie over
   de volle breedte onder het document, zodat niets rechts buiten beeld valt. */
@media (max-width: 720px) {
  .xp-tabel--uitgifte thead { display: none; }
  .xp-tabel--uitgifte, .xp-tabel--uitgifte > tbody { display: block; width: 100%; }
  .xp-tabel--uitgifte .tbl__rij { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
  .xp-tabel--uitgifte .tbl__rij:first-child { border-top: 0; }
  .xp-tabel--uitgifte .tbl__rij > td { display: block; padding: 0; border-top: 0; background: none; }
  .xp-tabel--uitgifte .tbl__rij > td:nth-child(1) { grid-column: 1 / 3; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }
  .xp-tabel--uitgifte .tbl__rij > td:nth-child(6) { grid-column: 3; grid-row: 1; align-self: start; }
  .xp-tabel--uitgifte .tbl__rij > td:nth-child(2), .xp-tabel--uitgifte .tbl__rij > td:nth-child(3), .xp-tabel--uitgifte .tbl__rij > td:nth-child(4) { grid-row: 2; margin-top: 6px; font-size: 12px; color: var(--text-2); }
  .xp-tabel--uitgifte .tbl__rij > td:nth-child(2) { grid-column: 1; white-space: nowrap; }
  .xp-tabel--uitgifte .tbl__rij > td:nth-child(2)::before { content: 'Revisie '; color: var(--text-3); }
  .xp-tabel--uitgifte .tbl__rij > td:nth-child(3) { grid-column: 2; min-width: 0; }
  .xp-tabel--uitgifte .tbl__rij > td:nth-child(4) { grid-column: 3; text-align: right; }
  .xp-tabel--uitgifte .tbl__rij > td:nth-child(5) { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; }
  .xp-tabel--uitgifte .xp-reactie { min-width: 0; }
  .xp-tabel--uitgifte .xp-reactie > div { flex-wrap: wrap; }
}
/* h95 (vraag 361): de initialen in de contactkaart staan in het midden van het vlak; de algemene
   regel voor spans in de kaart (blok, klein, grijs) gold ook voor het vlak zelf. */
.xp-contact .xp-contact__av { display: flex; font-size: 14px; color: var(--surface); }

/* h98 (vraag 357): naam vragen bij de eerste inlog */
.xp-naam { padding: 20px 22px 18px; margin-bottom: 18px; }
.xp-naam__titel { font-size: 20px; font-weight: 400; letter-spacing: -.01em; margin: 4px 0 8px; }
.xp-naam__rij { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.xp-naam__veld { flex: 1 1 240px; margin-bottom: 0; }
.xp-naam__rij .btn { min-height: 40px; }
@media (max-width: 600px) { .xp-naam__rij .btn { flex: 1 1 40%; justify-content: center; } }