/* nexxfact Facturatie — vertrouwde indeling, nexxfact-huisstijl. */
@import url('./fonts/fonts.css');
:root{
  /* merk — exacte kleuren uit het nexxfact-logo (teal + oranje) */
  --merk:#0A7A75; --merk-donker:#065F5B; --merk-zacht:#E5F4F3; --accent:#FF6A1A;
  --merk-bright:#12B5B0; /* helder logo-teal voor accenten */
  /* aliassen zodat bestaande regels het merk oppakken */
  --blauw:var(--merk); --blauw-d:var(--merk-donker); --blauw-l:var(--merk-zacht);
  /* inkt en papier */
  --ink:#14161A; --ink2:#3D4450; --dim:#6B7280; --ink3:#9AA3AF; --dim2:#9AA3AF;
  --lijn:#E6E9ED; --lijn2:#F0F2F5;
  --bg:#F6F7F9; --paper:#FFFFFF;
  /* status */
  --ok:#1B6B49; --ok-zacht:#E4F0EA;
  --wacht:#2563A8; --wacht-zacht:#E8F0F8;
  --let:#96690C; --let-zacht:#FAF0DC;
  --bad:#C0392B; --bad-zacht:#FBEBE9;
  --groen:var(--ok); --rood:var(--bad); --oranje:var(--accent); --grijspill:#9AA3AF;
  /* maatvoering */
  --schaduw:0 1px 2px rgba(20,22,26,.04),0 2px 6px rgba(20,22,26,.05);
  --schaduw2:0 2px 4px rgba(20,22,26,.05),0 8px 20px rgba(20,22,26,.08);
  --radius:10px; --radius2:8px; --radius3:6px;
  --hd-h:60px; --side-w:236px;
  --font:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.ds-body{
  font-family:var(--font);
  color:var(--ink);background:var(--bg);font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;padding-top:var(--hd-h);
}
a{color:var(--blauw);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0}

/* ---------------- header ---------------- */
.ds-l-header{
  position:fixed;top:0;left:0;right:0;height:var(--hd-h);z-index:40;
  background:var(--paper);border-bottom:1px solid var(--lijn);
  display:flex;align-items:center;gap:14px;padding:0 18px;
}
.hd-logo{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:700;font-size:16px}
.hd-logo:hover{text-decoration:none}
.hd-logo img{height:24px;width:auto;display:block}
.hd-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.hd-bell{position:relative}
.hd-bell>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink2);position:relative;width:38px;height:38px;border-radius:10px}
.hd-bell>summary::-webkit-details-marker{display:none}
.hd-bell>summary:hover{background:var(--lijn2)}
.hd-bell svg{width:20px;height:20px}
.bel-dot{position:absolute;top:4px;right:4px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;min-width:15px;height:15px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1}
.melding-leeg{padding:11px 15px;color:var(--ink3);font-size:13px}
.hd-search{position:relative}
.hd-search input{
  width:280px;max-width:38vw;height:36px;border:1px solid var(--lijn);border-radius:20px;
  padding:0 16px 0 38px;background:var(--lijn2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7580' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M15 15l-4-4'/%3E%3C/svg%3E") no-repeat 13px center;
  font-size:13px;color:var(--ink);
}
.hd-search input:focus{outline:none;border-color:var(--blauw);background-color:#fff}
.hd-admin{color:var(--ink2);font-size:13px;font-weight:600}
.hd-install{border:1px solid var(--blauw);color:var(--blauw);background:#fff;border-radius:18px;height:32px;padding:0 14px;font-size:12px;cursor:pointer}
.hd-burger{display:none;font-size:22px;line-height:1;cursor:pointer;color:var(--ink2);user-select:none;width:34px;height:34px;align-items:center;justify-content:center}

/* profile + maken dropdowns (pure CSS via <details>) */
.hd-profile,.va-l-menu-dropdown{position:relative}
.hd-profile>summary,.va-l-menu-dropdown>summary{list-style:none;cursor:pointer}
.hd-profile>summary::-webkit-details-marker,.va-l-menu-dropdown>summary::-webkit-details-marker{display:none}
.avatar{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--blauw);color:#fff;font-weight:700;font-size:14px}
.dd-list{position:absolute;top:calc(100% + 8px);right:0;min-width:190px;background:#fff;border:1px solid var(--lijn);border-radius:10px;box-shadow:0 8px 24px rgba(20,30,50,.14);padding:6px;z-index:60}
.dd-list.dd-right{right:0}
.dd-list ul{list-style:none;margin:0;padding:0}
.dd-list li a{display:block;padding:9px 12px;border-radius:7px;color:var(--ink);font-size:13.5px}
.dd-list li a:hover{background:var(--lijn2);text-decoration:none}
.dd-wie{padding:9px 12px;border-bottom:1px solid var(--lijn);margin-bottom:4px}
.dd-wie b{display:block}.dd-wie small{color:var(--ink2);text-transform:capitalize}

/* ---------------- page split + sidebar ---------------- */
.va-l-page-split{display:flex;align-items:flex-start}
.left{
  width:var(--side-w);flex:0 0 var(--side-w);position:sticky;top:var(--hd-h);
  height:calc(100vh - var(--hd-h));overflow-y:auto;background:var(--paper);
  border-right:1px solid var(--lijn);padding:16px 12px;
}
.va-l-menu-dropdown{margin:0 4px 14px}
.va-l-menu-dropdown>summary{
  display:flex;align-items:center;gap:8px;justify-content:center;
  background:var(--blauw);color:#fff;border-radius:8px;height:40px;font-weight:600;font-size:14px;
  box-shadow:var(--schaduw);
}
.va-l-menu-dropdown>summary:hover{background:var(--blauw-d)}
.va-l-menu-dropdown .plus{font-size:18px;line-height:1}
.va-l-menu-dropdown .dd-list{left:0;right:auto;width:100%}

.va-l-menu{list-style:none;margin:0;padding:0}
.va-l-menu>li>a{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;
  color:var(--ink);font-weight:600;font-size:14px;position:relative;
}
.va-l-menu>li>a:hover{background:var(--lijn2);text-decoration:none}
.va-l-menu__icon{display:flex;color:var(--ink3)}
.va-l-menu__icon svg{width:20px;height:20px}
.va-l-menu>li.is-active>a{background:var(--blauw-l);color:var(--blauw-d)}
.va-l-menu>li.is-active>a .va-l-menu__icon{color:var(--blauw)}
.va-l-menu>li.is-active>a::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--blauw)}
.va-l-menu__counter{margin-left:auto;background:var(--accent);color:#fff;border-radius:11px;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;padding:0 6px}
.va-l-menu__counter--amber{background:var(--accent)}
.va-l-menu__counter--rood{background:var(--bad)}
.va-l-menu__sub-menu{list-style:none;margin:2px 0 4px 22px;padding:2px 0 2px 0;border-left:1px solid var(--lijn);display:none}
.va-l-menu>li.open>.va-l-menu__sub-menu{display:block}
.va-l-menu__sub-menu li a{display:block;padding:6px 10px 6px 20px;font-size:13px;color:var(--ink3);text-decoration:none;font-weight:500;border-radius:0 7px 7px 0}
.va-l-menu__sub-menu li a:hover{background:var(--lijn2);color:var(--ink)}
.va-l-menu__sub-menu li.is-active a{color:var(--blauw-d);font-weight:700}
.va-l-menu>li.grp{list-style:none;color:var(--dim2);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:15px 12px 5px}
.va-l-menu>li.grp:first-child{padding-top:4px}

/* off-canvas overlay */
.overlay{display:none}

/* ---------------- content ---------------- */
.right-container{flex:1 1 auto;min-width:0}
.right{padding:24px 32px 60px;max-width:1760px}
.ds-c-title{display:flex;align-items:center;gap:14px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--lijn)}
.ds-c-title h1{font-size:22px;font-weight:700}
.titel-rechts{margin-left:auto}
.sub-heading{color:var(--ink2);font-size:13px}
.blok-kop{font-size:15px;font-weight:700;margin:26px 0 12px}

/* buttons */
.ds-c-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 18px;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:background .12s,border-color .12s}
.ds-c-button:hover{text-decoration:none}
.ds-c-button--blue{background:var(--blauw);color:#fff}
.ds-c-button--blue:hover{background:var(--blauw-d);color:#fff}
.ds-c-button--gray{background:#fff;color:var(--ink);border-color:var(--lijn)}
.ds-c-button--gray:hover{background:var(--lijn2)}
.ds-c-button--red{background:var(--rood);color:#fff}
.ds-c-button.sm{height:30px;padding:0 12px;font-size:12.5px}
.ds-c-button.block{width:100%}
.ds-c-button:disabled{opacity:.55;cursor:default}

.actie-balk{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.actie-balk .zoek{margin-left:auto}
.zoek input{height:38px;border:1px solid var(--lijn);border-radius:8px;padding:0 14px;font-size:13.5px;width:240px;max-width:60vw}
.zoek input:focus{outline:none;border-color:var(--blauw)}

/* quick actions + stat tiles */
/* factuur-detail met historie-tijdlijn (vertrouwde indeling) */
.doc-split{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start}
@media(max-width:1000px){.doc-split{grid-template-columns:1fr}}
.doc-main{min-width:0}
.doc-zij{display:flex;flex-direction:column;gap:16px;position:sticky;top:80px}
.doc-zij-kaart{background:var(--paper);border:1px solid var(--lijn);border-radius:var(--radius);box-shadow:var(--schaduw);padding:16px 18px}
.doc-zij-kaart h3{font-size:14px;font-weight:700;margin:0 0 12px}
.doc-kv{display:grid;grid-template-columns:auto 1fr;gap:7px 12px;margin:0;font-size:13.5px}
.doc-kv dt{color:var(--ink3)}.doc-kv dd{margin:0;text-align:right;color:var(--ink);font-weight:600}
.hist-lijst{list-style:none;margin:0;padding:0;position:relative}
.hist-lijst::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--lijn2)}
.hist-item{position:relative;padding:0 0 16px 22px}
.hist-item:last-child{padding-bottom:0}
.hist-dot{position:absolute;left:0;top:3px;width:12px;height:12px;border-radius:50%;background:var(--ink3);box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--lijn2)}
.hist-ok .hist-dot{background:var(--ok)}
.hist-geld .hist-dot{background:var(--merk)}
.hist-mail .hist-dot{background:var(--wacht)}
.hist-lock .hist-dot{background:var(--ink2)}
.hist-bad .hist-dot{background:var(--bad)}
.hist-t{font-size:11.5px;color:var(--ink3)}
.hist-titel{font-size:13.5px;font-weight:600;color:var(--ink)}
.hist-sub{font-size:12.5px;color:var(--ink2)}
.hist-leeg{color:var(--ink3);font-size:13px}

/* klant-detailpagina (vertrouwde indeling) */
.klant-acties{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.klant-acties .ds-c-button,.klant-acties button{display:inline-flex;align-items:center;gap:7px}
.klant-acties .inline-form{display:inline-flex;margin:0}
.ds-c-button--rood{background:#fff;color:#c0392b;border:1px solid #e3b4ae}
.ds-c-button--rood:hover{background:#fdeceb;color:#a5281c}
.klant-tabs,.klant-doctabs{margin:0 0 22px}
.klant-kolommen{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:700px){.klant-kolommen{grid-template-columns:1fr}}
.klant-kolommen .lees-blok h2,.klant-notitie h2,.klant-portaal h2{font-size:14px;font-weight:700;margin:0 0 12px}
.klant-notitie,.klant-portaal{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--lijn)}
.klant-notitie p{font-size:13.5px;color:var(--ink2);margin:0}
.klant-portaal .sub{font-size:12.5px;color:var(--ink3);margin:0 0 10px}
.portaal-link{font-size:13px}
.klant-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:800px){.klant-stats{grid-template-columns:repeat(2,1fr)}}
.kstat{display:flex;flex-direction:column;gap:3px;padding:16px 18px;background:var(--vlak);border:1px solid var(--lijn);border-radius:10px}
.kstat-l{font-size:12.5px;color:var(--ink3)}
.kstat-v{font-size:22px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.kstat-s{font-size:11.5px;color:var(--ink3)}

/* PDF-opbouw (vertrouwde indeling: dashed toevoeg-vakken + regelkaart + PDF-kaarten) */
.opbouw-blok{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--radius);padding:20px 22px;margin:0 0 18px}
.opbouw-kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 16px}
.opbouw-kop h2{font-size:15px;font-weight:700;margin:0;color:var(--ink)}
.opb-info{font-size:12.5px;color:var(--ink3)}
.opbouw-strip{display:flex;flex-wrap:wrap;align-items:stretch;gap:18px}
.opb-add-form{margin:0}
.opb-add{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:150px;height:212px;border:2px dashed var(--lijn2);border-radius:8px;color:var(--ink3);cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.opb-add:hover{border-color:var(--merk);color:var(--merk);background:rgba(18,181,176,.04)}
.opb-add-plus{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;background:var(--paper);border:1px solid var(--lijn)}
.opb-add:hover .opb-add-plus{border-color:var(--merk)}
.opb-add-tekst{font-size:13px;font-weight:600}
.opb-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.opb-kaart-doc{position:relative;width:150px;height:212px;background:#fff;border:1px solid var(--lijn);border-radius:6px;box-shadow:0 2px 8px rgba(20,23,31,.10);padding:20px 16px}
.opb-doc-titel{font-size:13px;font-weight:700;color:#14171f;margin:0 0 14px}
.opb-doc-lijnen{display:flex;flex-direction:column;gap:8px}
.opb-doc-lijnen span{height:5px;border-radius:3px;background:#d9dde3;display:block}
.opb-kaart-pdf{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:150px;height:212px;background:#fff;border:1px solid var(--lijn);border-radius:6px;box-shadow:0 2px 8px rgba(20,23,31,.10);padding:16px 12px;text-align:center}
.opb-pdf-badge{font-size:12px;font-weight:800;letter-spacing:.04em;color:#fff;background:#e04434;padding:8px 12px;border-radius:6px}
.opb-kaart-naam{font-size:12px;color:var(--ink2);line-height:1.3;word-break:break-word;max-height:3.9em;overflow:hidden}
.opb-kaart-acties{position:absolute;top:8px;right:8px}
.opb-weg{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;border:1px solid var(--lijn);background:var(--paper);color:var(--ink3);cursor:pointer;padding:0}
.opb-weg:hover{background:#fdeceb;color:#c0392b;border-color:#e3b4ae}

.klant-upload{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:14px 16px;background:var(--vlak);border:1px solid var(--lijn);border-radius:10px}
.klant-upload input[type=file]{font-size:13px}

/* sjabloon lege-staat */
.sjab-leeg{text-align:center;padding:50px 20px;color:var(--ink3)}
.sjab-leeg-doc{width:96px;height:120px;margin:0 auto 18px;border:2px dashed var(--lijn2);border-radius:8px;position:relative;background:linear-gradient(var(--lijn) 0 0) center/44px 5px no-repeat}
.sjab-leeg-doc::before{content:"";position:absolute;left:22px;right:22px;top:34px;height:5px;border-radius:3px;background:var(--lijn);box-shadow:0 14px 0 var(--lijn),0 28px 0 var(--lijn)}
.sjab-leeg-titel{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 6px}

/* bibliotheek (browser + modal) */
.bib-modal{position:fixed;inset:0;background:rgba(20,23,31,.5);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
.bib-modal.open{display:flex}
.bib-modal-box{background:var(--paper);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.3);width:min(860px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.bib-modal-kop{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--lijn)}
.bib-modal-kop h3{margin:0;font-size:15px;font-weight:700}
.bib-x{border:0;background:transparent;font-size:24px;line-height:1;color:var(--ink3);cursor:pointer;padding:0 4px}
.bib-x:hover{color:var(--ink)}
.bib-modal .bib-browser{padding:16px 20px 0;display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.bib-paneel{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden}
.bib-modal .bib-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding-bottom:16px}
.bib-browser .bib-body{max-height:62vh;overflow-y:auto}
.bib-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.bib-crumb{font-size:13.5px;color:var(--ink2);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bib-crumb a{color:var(--merk);text-decoration:none}
.bib-crumb a:hover{text-decoration:underline}
.bib-sep{color:var(--ink3)}
.bib-acties{display:flex;gap:8px}
.ds-c-button.sm{padding:7px 12px;font-size:13px}
.bib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px}
.bib-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px 12px;border:1px solid var(--lijn);border-radius:10px;background:var(--vlak);cursor:pointer;text-align:center;transition:border-color .12s,box-shadow .12s}
.bib-item:hover{border-color:var(--merk);box-shadow:0 2px 10px rgba(20,23,31,.08)}
.bib-ico{display:flex;align-items:center;justify-content:center;height:44px}
.bib-ico-map{color:var(--wacht,#2563a8)}
.bib-ico-pdf{font-size:13px;font-weight:800;color:#fff;background:#e04434;padding:9px 12px;border-radius:6px}
.bib-naam{font-size:12px;color:var(--ink);line-height:1.3;word-break:break-word;max-height:3.9em;overflow:hidden}
.bib-kies{font-size:11px;font-weight:700;color:var(--merk);text-transform:uppercase;letter-spacing:.03em;opacity:0;transition:opacity .12s}
.bib-item.bib-file:hover .bib-kies{opacity:1}
.bib-weg{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:6px;border:1px solid var(--lijn);background:var(--paper);color:var(--ink3);font-size:15px;line-height:1;cursor:pointer;padding:0;opacity:0;transition:opacity .12s}
.bib-item:hover .bib-weg{opacity:1}
.bib-weg:hover{background:#fdeceb;color:#c0392b;border-color:#e3b4ae}
.bib-laden,.bib-leeg{padding:30px 10px;text-align:center;color:var(--ink3);font-size:13.5px}

/* concept-editor kop (vertrouwde indeling: klant + kenmerken) */
.edit-kop-split{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:0 0 18px}
@media(max-width:800px){.edit-kop-split{grid-template-columns:1fr}}
.edit-blok{background:var(--paper);border:1px solid var(--lijn);border-radius:var(--radius);box-shadow:var(--schaduw);padding:18px 20px}
.edit-blok h2{font-size:14px;font-weight:700;margin:0 0 12px}
.edit-blok-kop{display:flex;align-items:center;justify-content:space-between}
.edit-blok-kop h2{margin:0}
.mini-link{font-size:12.5px;color:var(--merk);text-decoration:none;font-weight:600}
.mini-link:hover{text-decoration:underline}
.kenmerk-rijen{display:flex;flex-direction:column;gap:10px}
.kv2{display:grid;grid-template-columns:135px 1fr;align-items:center;gap:12px;font-size:13.5px}
.kv2>span:first-child{color:var(--ink3)}
.kv2 b{font-weight:600;color:var(--ink)}
.kv2 input{padding:7px 10px;border:1px solid var(--lijn);border-radius:7px;font-size:13.5px;width:100%;background:var(--paper);color:var(--ink);font-family:inherit}
.kv2 input:focus{outline:none;border-color:var(--merk);box-shadow:0 0 0 3px var(--merk-zacht,rgba(18,181,176,.15))}
.term-veld{display:flex;align-items:center;gap:8px;color:var(--ink3)}
.term-veld input{max-width:80px}
.edit-fin-kop{margin:0 0 12px}
.edit-fin-kop h2{font-size:15px;margin:0}
.editor .regeltabel--blauw thead th{background:var(--merk);color:#fff;border-color:var(--merk)}

/* klant bewerken — formuliervelden in tabs */
.klant-form .form-knoppen{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.kv-veld{display:flex;flex-direction:column;gap:5px;margin:0 0 14px}
.kv-veld label{font-size:12.5px;color:var(--ink3);font-weight:600}
.kv-veld input,.kv-veld select,.notitie-groot{width:100%;padding:9px 11px;border:1px solid var(--lijn);border-radius:8px;font-size:14px;background:var(--paper);color:var(--ink);font-family:inherit}
.kv-veld input:focus,.kv-veld select:focus,.notitie-groot:focus{outline:none;border-color:var(--merk);box-shadow:0 0 0 3px var(--merk-zacht,rgba(18,181,176,.15))}
.kv-rij{display:flex;gap:12px}
.kv-rij>.kv-veld{flex:1}
.kv-rij--contact{gap:8px}
.kv-rij--contact input{flex:1;padding:9px 11px;border:1px solid var(--lijn);border-radius:8px;font-size:14px;background:var(--paper);color:var(--ink)}
.kv-rij--contact .kv-aanhef{max-width:90px;flex:none}
.kv-kort{max-width:120px}
.kv-chk{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink2);margin:0 0 12px}
.notitie-groot{min-height:180px;resize:vertical}
.klant-form .kv-rij .kv-kort{max-width:none}
.klant-form .kv-rij>.kv-veld:has(.kv-kort){flex:0 0 130px}

/* factuur lees-weergave (vertrouwde indeling) */
.lees-acties{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px}
.lees-acties .ds-c-button,.lees-acties button{display:inline-flex;align-items:center;gap:7px}
.lees-acties .btn-ico{flex:none}
.lees-acties .inline-form{display:inline-flex;margin:0}
/* 1-klik kopiëren */
.kopieer-klik{display:inline-flex;align-items:center;gap:5px;cursor:pointer;border-radius:5px;padding:1px 5px;margin:-1px -5px;transition:background .12s}
.kopieer-klik:hover{background:var(--vlak)}
.kopieer-klik .kop-ico{opacity:0;color:var(--ink3);transition:opacity .12s}
.kopieer-klik:hover .kop-ico{opacity:.7}
.kopieer-klik.gekopieerd{background:#e8f6ee;color:var(--ok)}
.kopieer-klik.gekopieerd .kop-ico{opacity:1;color:var(--ok)}
.kopieer-klik.gekopieerd::after{content:"gekopieerd";font-size:11px;color:var(--ok);font-weight:600}
.klant-link{color:var(--merk);font-weight:600;text-decoration:none}
.klant-link:hover{text-decoration:underline}
/* segmented control + PDF-voorvertoning */
.lees-fin .ds-c-title{display:flex;align-items:center;justify-content:space-between;gap:14px}
.fin-toggle{display:inline-flex;background:var(--vlak);border:1px solid var(--lijn);border-radius:8px;padding:3px}
.fin-toggle .seg{border:0;background:transparent;padding:6px 14px;font-size:12.5px;font-weight:600;color:var(--ink3);border-radius:6px;cursor:pointer}
.fin-toggle .seg.actief{background:var(--paper);color:var(--ink);box-shadow:var(--schaduw)}
.fin-uitleg{text-align:right;font-size:12px;margin:0 2px 8px}
.pdf-viewer{overflow-x:auto;border:1px solid var(--lijn);border-radius:8px;background:var(--vlak)}
.pdf-preview{display:block;width:100%;min-width:840px;height:1100px;border:0;border-radius:8px;
  background:var(--vlak)}
.pdf-boven{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px}
.pdf-boven .pdf-hint{font-size:12.5px;color:var(--tekst-dim,#6f7671)}

/* Op een telefoon en een tablet geen kader om de pdf.
   Een pdf in een kader laat zich daar niet knijpen om in te zoomen: het kader vangt het gebaar en
   de lezer van het toestel krijgt het niet. Zonder kader opent hij in de eigen lezer, en daar werkt
   knijpen, draaien en bladeren gewoon. */
@media (max-width: 900px) {
  .pdf-viewer { display: none; }
  .pdf-boven { flex-direction: column; align-items: stretch; }
  .pdf-boven .ds-c-button { width: 100%; justify-content: center; padding-block: 14px; }
  .pdf-boven .pdf-hint { order: 2; text-align: center; }
}
.lees-kop{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:20px 22px;background:var(--paper);border:1px solid var(--lijn);border-radius:var(--radius);box-shadow:var(--schaduw);margin:0 0 18px}
@media(max-width:700px){.lees-kop{grid-template-columns:1fr}}
.lees-blok h2{font-size:14px;font-weight:700;margin:0 0 12px;color:var(--ink)}
.lees-dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;font-size:13.5px}
.lees-dl dt{color:var(--ink3)}
.lees-dl dd{margin:0;color:var(--ink);font-weight:600}
.lees-fin{background:var(--paper);border:1px solid var(--lijn);border-radius:var(--radius);box-shadow:var(--schaduw);padding:20px 22px;margin:0 0 18px}
.lees-fin .ds-c-title{margin:0 0 14px}
.lees-fin .ds-c-title.no-border{border:0;padding:0}
.lees-fin .ds-c-title h2{font-size:15px;margin:0}
.lees-fin .dim{color:var(--ink3);font-size:12.5px}
.fin-tabel{width:100%;border-collapse:collapse;font-size:13.5px}
.fin-tabel thead th{background:var(--merk);color:#fff;text-align:left;font-weight:600;padding:9px 12px;font-size:12.5px}
.fin-tabel thead th.r{text-align:right}
.fin-tabel thead th:first-child{border-radius:6px 0 0 0}
.fin-tabel thead th:last-child{border-radius:0 6px 0 0}
.fin-tabel td{padding:9px 12px;border-bottom:1px solid var(--lijn)}
.fin-tabel td.r{text-align:right;font-variant-numeric:tabular-nums}
.fin-tabel td.nowrap{white-space:nowrap}
.fin-tabel tr.fin-kop td{font-weight:700;background:var(--vlak);color:var(--ink)}
.fin-tabel tr.fin-tekst td{color:var(--ink2);font-size:13px}
.lees-opm{margin:14px 0 0;padding:12px 14px;background:var(--vlak);border-radius:8px;font-size:13px;color:var(--ink2)}
.fin-tot-wrap{display:flex;justify-content:flex-end;margin:16px 0 0}
.fin-tot{border-collapse:collapse;font-size:13.5px;min-width:280px}
.fin-tot td{padding:7px 4px}
.fin-tot td.r{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.fin-tot tr.eind td{border-top:2px solid var(--ink);font-weight:700;font-size:15px;padding-top:10px}

/* factuur-/lijstoverzicht (vertrouwde indeling) */
.fact-filterbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.ff-links{display:flex;align-items:center;gap:18px;margin-left:auto;flex-wrap:wrap}
.ff-links>a{font-size:13.5px;font-weight:600;color:var(--merk-donker)}
.ff-links>a:hover{color:var(--merk)}
.ff-links>a.is-actief{color:var(--accent)}
.ff-status{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink2)}
.ff-status select{height:34px;border:1px solid var(--lijn);border-radius:8px;padding:0 10px;font-size:13px;background:var(--paper);color:var(--ink)}
.titel-totaal{font-size:13.5px;color:var(--ink2)}
.titel-totaal b{color:var(--ink);font-variant-numeric:tabular-nums}
.fact-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;font-size:13px;color:var(--ink3)}
.fp-nums{display:flex;gap:5px;flex-wrap:wrap}
.fp-nums a{min-width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--lijn);border-radius:8px;font-weight:600;color:var(--ink2)}
.fp-nums a:hover{border-color:var(--merk);color:var(--merk)}
.fp-nums a.is-actief{background:var(--merk);color:#fff;border-color:var(--merk)}
.quick-acties{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.quick-acties .ds-c-button{display:inline-flex;align-items:center;gap:8px}
.btn-ico{width:16px;height:16px;flex:none}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.stat-tile{background:var(--paper);border:1px solid var(--lijn);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--schaduw);border-top:3px solid var(--blauw)}
.stat-tile.stat-groen{border-top-color:var(--groen)}
.stat-tile.stat-oranje{border-top-color:var(--oranje)}
.stat-tile.stat-grijs{border-top-color:var(--ink3)}

/* ===== dashboard ===== */
.dash-kaart{background:var(--paper);border:1px solid var(--lijn);border-radius:var(--radius);box-shadow:var(--schaduw);margin-top:18px;overflow:hidden}
.dash-kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:15px 20px;border-bottom:1px solid var(--lijn2)}
.dash-kop h2{font-size:15px;font-weight:700;margin:0}
.dash-sub{color:var(--ink3);font-size:12px}
.dash-meer{font-size:12.5px;font-weight:600}
.dash-chart{display:flex;align-items:flex-end;gap:10px;padding:22px 20px 14px;height:210px}
.dc-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;gap:8px}
.dc-bar-wrap{width:100%;flex:1;display:flex;align-items:flex-end}
.dc-bar{width:100%;background:linear-gradient(180deg,var(--merk-bright),var(--merk));border-radius:6px 6px 0 0;transition:height .3s}
.dc-m{font-size:11px;color:var(--ink3);text-transform:uppercase}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.dash-grid{grid-template-columns:1fr}}
.dash-grid .dash-kaart{margin-top:0}
.tab-telling{display:inline-block;background:var(--lijn2);color:var(--ink2);border-radius:20px;padding:1px 8px;font-size:11px;font-weight:700;margin-left:3px;vertical-align:middle}
.dash-kaart .ds-c-tabs{border:none}

/* bedrijfsstatistieken (vertrouwde indeling, mooier) */
.ds-stats-det>summary{cursor:pointer;list-style:none}
.ds-stats-det>summary::-webkit-details-marker{display:none}
.ds-chev{margin-left:auto;width:11px;height:11px;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);transform:rotate(-135deg);transition:transform .2s}
.ds-stats-det:not([open])>summary .ds-chev{transform:rotate(45deg)}
.ds-stats-body{display:grid;grid-template-columns:1fr 290px;gap:0}
@media(max-width:860px){.ds-stats-body{grid-template-columns:1fr}}
.ds-chart-col{padding:18px 22px 16px;min-width:0}
.ds-chart{width:100%;height:auto;display:block}
.dsc-grid{stroke:var(--lijn2);stroke-width:1}
.dsc-ylab{fill:var(--ink3);font-size:11px;text-anchor:end}
.dsc-xlab{fill:var(--ink3);font-size:11px;text-anchor:middle}
.dsc-26{fill:none;stroke:var(--merk);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.dsc-25{fill:none;stroke:var(--ink3);stroke-width:1.6;opacity:.32;stroke-linecap:round;stroke-linejoin:round}
.ds-chart-wrap{position:relative}
.dsc-dot{fill:var(--merk)}
.dsc-hit{fill:transparent;cursor:pointer}
.dsc-hit:hover{fill:var(--merk);fill-opacity:.05}
.dsc-tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;border-radius:9px;padding:8px 12px;font-size:12.5px;box-shadow:var(--schaduw2);z-index:6;white-space:nowrap}
.dsc-tip b{display:block;text-transform:capitalize;margin-bottom:2px;font-size:12px;opacity:.85}
.dsc-tip .t26{display:block;font-weight:800;font-variant-numeric:tabular-nums}
.dsc-tip .t25{display:block;opacity:.65;font-size:11px;font-variant-numeric:tabular-nums;margin-top:1px}
.ds-stats-panel{border-left:1px solid var(--lijn2);padding:14px 22px}
@media(max-width:860px){.ds-stats-panel{border-left:none;border-top:1px solid var(--lijn2)}}
.dsp-groep{padding:10px 0 12px}
.dsp-groep+.dsp-groep{border-top:1px solid var(--lijn2)}
.dsp-kop{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;font-size:13.5px;margin-bottom:5px}
.dsp-excl{color:var(--ink3);font-size:11px;font-weight:500}
.dsp-rij{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:9px;padding:5px 0;font-size:13.5px;color:var(--ink2)}
.dsp-rij b{font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}
.dsp-rij b.rood{color:var(--bad)}
.pct{font-size:11px;font-weight:700;padding:1px 6px;border-radius:20px}
.pct.up{background:var(--ok-zacht);color:var(--ok)}
.pct.down{background:var(--bad-zacht);color:var(--bad)}
.ds-actiekaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
@media(max-width:700px){.ds-actiekaarten{grid-template-columns:1fr}}
.ds-actiekaart{display:block;border:1px solid var(--lijn);border-radius:11px;padding:12px 15px;background:#F8FBFA;transition:border-color .12s,background .12s}
.ds-actiekaart:hover{border-color:var(--merk);text-decoration:none}
.ds-actiekaart.actief{border-color:var(--accent);background:#FFF4EC}
.dak-t{font-weight:700;font-size:13.5px;color:var(--ink)}
.dak-s{font-size:12.5px;color:var(--ink2);margin-top:2px}
.stat-label{color:var(--ink2);font-size:12.5px;margin-bottom:6px}
.stat-waarde{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}

/* tables */
.ds-c-table-container{background:var(--paper);border:1px solid var(--lijn);border-radius:var(--radius);box-shadow:var(--schaduw);overflow-x:auto}
.ds-c-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.ds-c-table thead th{background:var(--lijn2);color:var(--ink2);text-align:left;font-weight:600;font-size:11.5px;letter-spacing:.3px;text-transform:uppercase;padding:11px 14px;border-bottom:1px solid var(--lijn);white-space:nowrap}
.ds-c-table th.r,.ds-c-table td.r{text-align:right}
.ds-c-table tbody td{padding:12px 14px;border-bottom:1px solid var(--lijn2);vertical-align:middle}
.ds-c-table tbody tr:last-child td{border-bottom:none}
.ds-c-table--hover tbody tr{cursor:pointer}
.ds-c-table--hover tbody tr:hover{background:#f6f9fd}
.ds-c-table td.nr{font-weight:600;white-space:nowrap;font-family:var(--mono);font-size:12.5px}
.ds-c-table td.nr a{color:var(--merk)}
.ds-c-table td.r{font-variant-numeric:tabular-nums}
.ds-c-table td.dim{color:var(--ink2)}
.ds-c-table td.status{white-space:nowrap}
.ds-c-table td.leeg{text-align:center;color:var(--ink2);padding:34px 14px;cursor:default}
.ds-c-table--hover tbody tr:has(td.leeg):hover{background:none}

/* status pills */
.ds-c-status{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle}
.ds-c-status--blue{background:var(--wacht)}
.ds-c-status--green{background:var(--groen)}
.ds-c-status--red{background:var(--rood)}
.ds-c-status--orange{background:var(--oranje)}
.ds-c-status--gray{background:var(--grijspill)}

/* tabs */
.ds-c-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--lijn);margin-top:6px}
.ds-c-tabs__tab{display:contents}
.ds-c-tabs__radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ds-c-tabs__label{order:0;padding:11px 18px;cursor:pointer;color:var(--ink2);font-weight:600;font-size:13.5px;border-bottom:2px solid transparent;margin-bottom:-1px}
.ds-c-tabs__label:hover{color:var(--ink)}
.ds-c-tabs__radio:checked + .ds-c-tabs__label{color:var(--blauw);border-bottom-color:var(--blauw)}
.ds-c-tabs__radio:focus-visible + .ds-c-tabs__label{outline:2px solid var(--blauw);outline-offset:2px}
.ds-c-tabs__panel{order:1;width:100%;display:none;padding-top:18px}
.ds-c-tabs__radio:checked ~ .ds-c-tabs__panel{display:block}

.uitleg{background:var(--blauw-l);border:1px solid #d3e4f6;border-radius:var(--radius);padding:13px 16px;color:#26516f;font-size:13px;margin-bottom:16px}
.uitleg b{color:var(--blauw-d)}

/* ---------------- forms ---------------- */
.form-kaart{background:var(--paper);border:1px solid var(--lijn);border-radius:var(--radius);box-shadow:var(--schaduw);padding:22px 24px;max-width:820px}
.veld-rij{display:flex;gap:16px;flex-wrap:wrap}
.veld{display:flex;flex-direction:column;gap:5px;margin-bottom:16px;flex:1 1 220px;font-size:12.5px;color:var(--ink2);font-weight:600}
.veld.sm{flex:0 1 130px}
.veld input,.veld select,.veld textarea,.ds-form input,.ds-form select,.ds-form textarea{
  border:1px solid var(--lijn);border-radius:8px;padding:9px 11px;font-size:14px;color:var(--ink);font-weight:400;background:#fff;font-family:inherit;
}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px var(--blauw-l)}
.form-knoppen{display:flex;gap:12px;justify-content:flex-end;margin-top:18px;max-width:820px}

/* ---------------- editor ---------------- */
.doc-klant{margin-bottom:14px;color:var(--ink);font-size:13.5px}
.uit-offerte{background:var(--blauw-l);border:1px solid #d3e4f6;border-radius:var(--radius);padding:12px 14px;margin-bottom:16px}
.deel-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px}
.deel-form select{border:1px solid var(--lijn);border-radius:8px;padding:8px 10px;font-size:13.5px}
.kop-velden{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.kop-velden label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink2);font-weight:600;flex:1 1 200px}
.kop-velden input{border:1px solid var(--lijn);border-radius:8px;padding:9px 11px;font-size:14px;font-weight:400;color:var(--ink)}
.regeltabel{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}
.regeltabel thead th{background:var(--lijn2);color:var(--ink2);text-transform:uppercase;font-size:11px;letter-spacing:.3px;padding:9px 8px;text-align:left;border-bottom:1px solid var(--lijn)}
.regeltabel th.r{text-align:right}
.regeltabel td{padding:5px 6px;border-bottom:1px solid var(--lijn2);vertical-align:middle}
.regeltabel input,.regeltabel select,.regeltabel textarea{border:1px solid transparent;border-radius:6px;padding:7px 8px;font-size:13px;width:100%;background:#fbfcfe;font-family:inherit;color:var(--ink)}
.regeltabel input:focus,.regeltabel select:focus,.regeltabel textarea:focus{outline:none;border-color:var(--blauw);background:#fff}
.regeltabel .mini{width:100%}
.regeltabel .r input{text-align:right}
.regeltabel .grip{color:var(--ink3);font-size:11px;text-align:center;width:24px}
.regeltabel .c-aantal{width:120px}.regeltabel .c-prijs{width:110px}.regeltabel .c-kort{width:80px}.regeltabel .c-btw{width:120px}.regeltabel .c-tot{width:110px}
.regeltabel .ae{display:flex;gap:4px}
.regeltabel .rtot{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.regeltabel .omcel{position:relative}
.regeltabel textarea{resize:vertical;min-height:34px}
.regeltabel .kopin{font-weight:700;color:var(--blauw-d)}
.regeltabel .optchk{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink2);margin-top:3px}
.regeltabel .x{background:none;border:none;color:var(--ink3);font-size:18px;cursor:pointer;line-height:1;padding:2px 6px}
.regeltabel .x:hover{color:var(--rood)}
/* Het zoeklijstje hangt aan de pagina zelf en niet in de tabelcel. Binnen een cel schuift het onder de volgende regels, want rijen van een tabel tekenen zichzelf over elkaar heen en dan moest je scrollen om te zien wat je koos. */
.acbox{position:fixed;background:var(--paper,#fff);border:1px solid var(--lijn);border-radius:10px;box-shadow:0 12px 34px rgba(20,30,50,.20);z-index:9999;max-height:min(360px,52vh);overflow:auto;-webkit-overflow-scrolling:touch}
.acit{display:flex;align-items:baseline;gap:10px;padding:10px 13px;cursor:pointer;font-size:13.5px;border-bottom:1px solid var(--lijn)}
.acit:last-child{border-bottom:0}
.acit.aan{background:var(--blauw-l)}
.acit:hover{background:var(--blauw-l)}
.acit span{flex:1;min-width:0}
.acit span em{display:block;font-style:normal;font-size:11.5px;color:var(--ink3);margin-top:2px}
.acit b{font-variant-numeric:tabular-nums;white-space:nowrap}
.acit small{color:var(--ink3);white-space:nowrap;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.regel-acties{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.regel-acties button{background:#fff;border:1px dashed var(--lijn);color:var(--ink2);border-radius:8px;padding:8px 12px;font-size:12.5px;cursor:pointer;font-weight:600}
.regel-acties button:hover{border-color:var(--blauw);color:var(--blauw)}
.editor-onder{display:flex;gap:24px;flex-wrap:wrap;margin-top:16px;align-items:flex-start}
.opm-veld{flex:1 1 320px;display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink2);font-weight:600}
.opm-veld textarea{border:1px solid var(--lijn);border-radius:8px;padding:10px;font-size:14px;font-weight:400;font-family:inherit;color:var(--ink)}
.totalen{flex:0 1 340px;background:var(--paper);border:1px solid var(--lijn);border-radius:var(--radius);padding:6px 16px;box-shadow:var(--schaduw)}
.totalen table{width:100%;border-collapse:collapse;font-size:13.5px}
.totalen td{padding:8px 0;border-bottom:1px solid var(--lijn2)}
.totalen td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.totalen tr.eind td{border-bottom:none;border-top:2px solid var(--blauw);font-size:16px;font-weight:700;padding-top:10px}
.editor-knoppen{display:flex;gap:12px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}

.melding{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;padding:11px 20px;border-radius:9px;font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.2);z-index:100;display:none}

/* ---------------- login ---------------- */
.loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(160deg,#eef2f7,#dde7f2)}
body.ds-body:has(.loginwrap){padding-top:0}
.loginkaart{background:#fff;border-radius:16px;box-shadow:0 12px 40px rgba(20,40,70,.14);padding:34px 30px;width:100%;max-width:380px;text-align:center}
.loginlogo{width:60px;height:60px;border-radius:14px;margin-bottom:12px}
.loginkaart h1{font-size:20px;margin-bottom:4px}
.loginkaart .sub{color:var(--ink2);font-size:13px;margin:0 0 20px}
.loginkaart form{text-align:left;display:flex;flex-direction:column;gap:14px}
.loginkaart label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--ink2);font-weight:600}
.loginkaart input{border:1px solid var(--lijn);border-radius:9px;padding:11px 13px;font-size:15px;color:var(--ink)}
.loginkaart input:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px var(--blauw-l)}
.foutbalk{background:#fdeceb;border:1px solid #f5c6c2;color:#b23b30;border-radius:9px;padding:10px 13px;font-size:13px;margin-bottom:14px}

.pnx-ios{background:var(--blauw-l);border:1px solid #cfe0f3;border-radius:10px;padding:11px 14px;font-size:13px;display:flex;align-items:center;gap:10px;margin-bottom:16px;color:#2a5675}
.pnx-ios button{margin-left:auto;background:none;border:none;font-size:18px;cursor:pointer;color:var(--ink2)}
.sub{color:var(--ink2)}

/* ---------------- responsive ---------------- */
@media(max-width:900px){
  .hd-burger{display:flex}
  .hd-admin{display:none}
  /* Op een tablet werd het zoekveld 180 pixels breed. Daar past een klantnaam niet in en je
     ziet niet meer wat je getypt hebt. Vanaf hier gaat het inlineveld weg en neemt het
     vergrootglas met de brede balk het over, net als op een telefoon. */
  .hd-search{display:none}
  .left{
    position:fixed;top:var(--hd-h);left:0;bottom:0;height:auto;z-index:50;
    transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 30px rgba(0,0,0,.12);
  }
  #navtoggle:checked ~ .ds-l-content-container .left{transform:none}
  #navtoggle:checked ~ .ds-l-content-container .overlay{display:block;position:fixed;inset:var(--hd-h) 0 0 0;background:rgba(20,30,50,.4);z-index:45}
  .right{padding:18px 16px 60px}
  .ds-c-title h1{font-size:19px}
}
@media(max-width:560px){
  .hd-logo span{display:none}
  .right{padding:14px 12px 60px}
  .actie-balk .zoek,.zoek input{width:100%;margin-left:0}
  .actie-balk{gap:8px}
  .form-knoppen,.editor-knoppen{flex-direction:column-reverse}
  .form-knoppen .ds-c-button,.editor-knoppen .ds-c-button{width:100%}
  .editor-onder{flex-direction:column}
  .totalen{flex:1 1 auto;width:100%}
}

/* ---------------- donkere-modus tokens (palet klaar; volledige dark-styling = stap 11) ---------------- */
:root[data-theme="dark"]{
  --ink:#e6e9ee; --ink2:#aab3bf; --dim:#8b94a0; --ink3:#6b7480; --dim2:#6b7480;
  --lijn:#232c35; --lijn2:#1a222a;
  --bg:#0b0f14; --paper:#161c22;
  --merk-zacht:#0d2b29; --blauw-l:var(--merk-zacht);
  --ok-zacht:#12281d; --wacht-zacht:#122a3f; --let-zacht:#2a2410; --bad-zacht:#2e1512;
  --schaduw:0 1px 2px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.35);
  --schaduw2:0 2px 4px rgba(0,0,0,.4),0 8px 20px rgba(0,0,0,.5);
}

/* ================= publieke klantpagina's (/o /f /w) ================= */
body.pub-body{background:var(--bg);padding-top:0}
.pub-wrap{max-width:640px;margin:0 auto;padding:20px 14px 40px}
.pub-head{display:flex;align-items:center;gap:10px;padding:8px 2px 18px}
.pub-head img{height:26px;width:auto}
.pub-head span{font-weight:800;font-size:18px;color:var(--ink)}
.pub-main{display:flex;flex-direction:column;gap:16px}
.pub-foot{margin-top:22px;text-align:center;color:var(--ink2);font-size:12px;line-height:1.7}
.pub-foot a{color:var(--merk)}
.pub-kaart{background:var(--paper);border:1px solid var(--lijn);border-radius:14px;box-shadow:var(--schaduw);padding:22px 22px}
.pub-doc-kop h1{font-size:22px;font-weight:800}
.pub-doc-kop .sub{color:var(--ink2);margin:2px 0 0}
.pub-meta{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:16px 0;font-size:14px}
.pub-meta dt{color:var(--ink2)}.pub-meta dd{margin:0;font-weight:600}
.pub-regels{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
.pub-regels td{padding:9px 2px;border-bottom:1px solid var(--lijn2);vertical-align:top}
.pub-regels td.r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.pub-regels tr.kop td{font-weight:700;color:var(--merk-donker);border-bottom:none;padding-top:14px}
.pub-regels tr.tekst td{color:var(--ink2);font-size:13px}
.pub-regels tr.optie td{background:var(--merk-zacht)}
.pub-regels .opt{display:flex;align-items:center;gap:9px;cursor:pointer}
.pub-regels .opt input{width:18px;height:18px}
.pub-tot{width:100%;max-width:280px;margin-left:auto;border-collapse:collapse;font-size:14px}
.pub-tot td{padding:6px 2px}.pub-tot td.r{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.pub-tot tr.eind td{border-top:2px solid var(--merk);font-size:16px;font-weight:800;padding-top:9px}
.pub-tekst{margin-top:16px;color:var(--ink);font-size:14px;line-height:1.6}
.pub-bijlagen{margin-top:16px;display:flex;flex-wrap:wrap;gap:14px}
.pub-bijlagen a{color:var(--merk);font-weight:600;font-size:14px}
.pub-melding{background:var(--let-zacht);border:1px solid #e8d9b0;color:var(--let);border-radius:10px;padding:11px 14px;font-size:13px;margin-bottom:14px}
.pub-teken h2{font-size:17px;font-weight:800;margin-bottom:6px}
.pub-veld{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-size:13px;font-weight:700;color:var(--dim)}
.pub-veld input,.pub-veld textarea{border:1px solid var(--lijn);border-radius:8px;padding:12px;font-size:16px;font-weight:400;color:var(--ink);font-family:inherit}
.pub-veld input:focus,.pub-veld textarea:focus{outline:none;border-color:var(--merk);box-shadow:0 0 0 3px var(--merk-zacht)}
/* briefpapier-kiezer */
.bp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.bp-kaart{background:var(--paper);border:1px solid var(--lijn);border-radius:12px;box-shadow:var(--schaduw);overflow:hidden;display:flex;flex-direction:column}
.bp-kaart.bp-actief{border-color:var(--merk);box-shadow:0 0 0 2px var(--merk)}
.bp-kop{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--lijn)}
.bp-naam{font-weight:700;font-size:13.5px}
.bp-badge{font-size:11px;font-weight:700;color:#fff;background:var(--merk);padding:2px 8px;border-radius:20px}
.bp-preview{width:100%;height:360px;border:0;background:var(--vlak);display:block}
.bp-acties{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--lijn)}
.bp-acties form{margin:0;margin-left:auto}
.bp-acties .sm{padding:7px 12px;font-size:13px}

/* korting op hele offerte (editor) */
.doc-korting{margin:14px 0 0}
.doc-korting>label{display:block;font-size:12.5px;color:var(--ink3);font-weight:600;margin-bottom:5px}
.doc-korting-veld{display:flex;gap:8px}
.doc-korting-veld select,.doc-korting-veld input{padding:8px 10px;border:1px solid var(--lijn);border-radius:7px;font-size:13.5px;background:var(--paper);color:var(--ink);font-family:inherit}
.doc-korting-veld input{max-width:120px}

/* betaalverzoeken op offerte — CRM-kaart */
.bv-kaart .blok-kop .dim{font-weight:400;font-size:13px}
.bv-lijst{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.bv-rij{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:var(--vlak);border:1px solid var(--lijn);border-radius:8px}
.bv-info{font-size:13px;min-width:0}
.bv-link{font-size:12px;color:var(--ink3);word-break:break-all}
.bv-pct{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--ink3);margin:0 0 10px}
.bv-pct-knop{display:inline-flex;flex-direction:column;align-items:center;gap:1px;padding:6px 12px;border:1px solid var(--lijn);border-radius:8px;background:var(--paper);color:var(--ink);font-size:13px;font-weight:700;cursor:pointer;line-height:1.2}
.bv-pct-knop span{font-size:11px;font-weight:500;color:var(--ink3)}
.bv-pct-knop:hover{border-color:var(--merk)}
.bv-pct-knop.actief{border-color:var(--merk);background:var(--merk);color:#fff}
.bv-pct-knop.actief span{color:rgba(255,255,255,.85)}
.bv-velden{display:grid;grid-template-columns:1.4fr .7fr 2fr auto;gap:8px;align-items:center}
@media(max-width:820px){.bv-velden{grid-template-columns:1fr}}
.bv-velden input{padding:8px 10px;border:1px solid var(--lijn);border-radius:7px;font-size:13px;background:var(--paper);color:var(--ink);font-family:inherit}
/* betaalverzoeken — publieke knoppen */
.pub-bv-blok{margin-top:18px;padding-top:14px;border-top:1px solid var(--lijn)}
.pub-bv-blok h3{font-size:14px;margin:0 0 10px}
.pub-bv{display:flex;align-items:center;gap:10px;padding:12px 14px;margin:0 0 8px;border:1px solid var(--lijn);border-radius:10px;text-decoration:none;color:var(--ink);background:var(--paper)}
.pub-bv:hover{border-color:var(--blauw)}
.pub-bv-oms{flex:1;font-weight:600;font-size:13.5px}
.pub-bv-bedr{font-variant-numeric:tabular-nums;font-weight:700}
.pub-bv-btn{color:var(--blauw);font-size:13px;font-weight:600;white-space:nowrap}

/* onderteken-pagina twee panelen (vertrouwde indeling) */
.pub-wrap:has(.pub-split){max-width:1180px}
.pub-split{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:start}
@media(max-width:900px){.pub-split{grid-template-columns:1fr}}
.pub-pdf{background:var(--paper);border:1px solid var(--lijn);border-radius:14px;box-shadow:var(--schaduw);overflow:hidden;position:sticky;top:16px}
.pub-pdf-kop{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--lijn)}
.pub-pdf-kop h2{margin:0;font-size:15px}
.pub-dl{font-size:13px;color:var(--blauw);text-decoration:none;font-weight:600}
.pub-pdf-frame{width:100%;height:78vh;min-height:520px;border:0;display:block;background:var(--vlak)}
@media(max-width:900px){.pub-pdf-frame{height:58vh;min-height:360px}.pub-pdf{position:static}}
.pub-form{background:var(--paper);border:1px solid var(--lijn);border-radius:14px;box-shadow:var(--schaduw);padding:22px 22px}
.pub-vanaan{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink3);border-bottom:1px solid var(--lijn);padding-bottom:12px;margin-bottom:14px;flex-wrap:wrap}
.pub-vanaan b{color:var(--ink)}
.pub-form h1{font-size:21px;margin:0 0 14px}
.pub-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.pub-2col{grid-template-columns:1fr}}
.pub-akkoordtekst{font-size:13.5px;color:var(--ink2);margin:14px 0}
.pub-opties{margin:0 0 14px;padding:14px 16px;background:var(--vlak);border-radius:10px}
.pub-opties h3{margin:0 0 8px;font-size:14px}
.pub-optie{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13.5px;cursor:pointer}
.pub-optie span{flex:1}
.pub-optie b{font-variant-numeric:tabular-nums}
.pub-optie-tot{display:flex;justify-content:space-between;border-top:1px solid var(--lijn);margin-top:8px;padding-top:8px;font-weight:700}
.pub-veld-l{display:block;font-size:12.5px;color:var(--ink3);margin-bottom:5px;font-weight:600}
.pub-wissen{margin-top:6px;background:none;border:0;color:var(--blauw);font-size:13px;cursor:pointer;padding:0}
.pub-akkoord{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;margin:14px 0;cursor:pointer}
.ds-c-button.block{width:100%;justify-content:center}
.pub-afwijzen{text-align:center;margin-top:12px;font-size:13px;color:var(--ink3)}
.pub-contact{margin-top:16px;padding-top:14px;border-top:1px solid var(--lijn);font-size:13px}
.handtekening{touch-action:none;width:100%;height:180px;border:1px solid var(--lijn);border-radius:8px;background:#fff;cursor:crosshair;display:block}
.pub-wissen{align-self:flex-start;margin-top:8px;background:none;border:1px solid var(--lijn);border-radius:8px;padding:8px 14px;font-size:13px;cursor:pointer;color:var(--ink2)}
.pub-akkoord{display:flex;align-items:flex-start;gap:10px;margin:14px 0 18px;font-size:14px;cursor:pointer}
.pub-akkoord input{width:20px;height:20px;margin-top:1px;flex:none}
.pub-afwijzen{margin-top:14px;text-align:center;color:var(--ink2);font-size:13px}
.pub-afwijzen a{color:var(--merk)}
.pub-ok{text-align:center}
.pub-vink{width:64px;height:64px;border-radius:50%;background:var(--ok-zacht);color:var(--groen);font-size:34px;display:flex;align-items:center;justify-content:center;margin:4px auto 14px}
.pub-ok h1{font-size:21px}.pub-ok .sub{color:var(--ink2);margin:8px 0 18px}
.pub-tebetalen{text-align:center;margin:14px 0}
.pub-tebetalen span{color:var(--ink2);font-size:14px}
.pub-tebetalen .bedrag{font-size:40px;font-weight:800;font-variant-numeric:tabular-nums;margin:4px 0}
.pub-tebetalen .verval{color:var(--ink2);font-size:13px}
.pub-aanbetaling{background:var(--lijn2);border-radius:10px;padding:12px 16px;margin:14px 0;font-size:14px}
.pub-aanbetaling>div{display:flex;justify-content:space-between;padding:4px 0}
.pub-aanbetaling b{font-variant-numeric:tabular-nums}
.pub-betaalknop{display:block;text-align:center;background:var(--merk);color:#fff;font-weight:700;font-size:17px;padding:16px;border-radius:10px;margin:16px 0;text-decoration:none}
.pub-betaalknop:hover{background:var(--merk-donker);text-decoration:none}
.pub-overmaken{margin-top:18px;border-top:1px solid var(--lijn2);padding-top:14px}
.pub-overmaken h3{font-size:14px;font-weight:700;margin-bottom:8px}
.pub-overmaken dl{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;font-size:14px}
.pub-overmaken dt{color:var(--ink2)}.pub-overmaken dd{margin:0}
.pub-overmaken .mono{font-family:var(--mono);font-weight:600}

/* ===== beheer: flash + acties-paneel (versturen/betalen) ===== */
.flash{background:var(--merk-zacht);border:1px solid #bfe0dc;color:var(--merk-donker);border-radius:10px;padding:11px 15px;font-size:13.5px;margin-bottom:16px}
.acties-kaart{max-width:820px;margin-top:18px}
.acties-kaart .blok-kop{margin-top:0}
.actie-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--lijn2)}
.actie-form .veld{margin-bottom:0;flex:1 1 240px}
.actie-form .chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);font-weight:600}
.actie-form .chk input{width:18px;height:18px}
.acties-kaart form:last-of-type{border-bottom:none;padding-bottom:0}
.kopieer{background:var(--lijn2);border-radius:8px;padding:11px 14px;font-size:13px;margin-bottom:14px}
.kopieer b{font-family:var(--mono);color:var(--ink)}
.sjab-kop{font-size:13px;font-weight:700;color:var(--ink);margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--lijn2)}
.sjab-kop:first-of-type{border-top:none;padding-top:0}
code{font-family:var(--mono);font-size:12px;background:var(--lijn2);padding:1px 5px;border-radius:4px}

/* ===== werkbon ===== */
.soortrij{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.soortknop{border:1px solid var(--lijn);border-radius:9px;padding:11px 16px;font-size:13.5px;cursor:pointer;font-weight:600;color:var(--ink2);min-height:44px;display:inline-flex;align-items:center}
.soortknop.aan{background:var(--merk-zacht);border-color:var(--merk);color:var(--merk-donker)}
.soortknop input{display:none}
.wb-form .chk{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);font-weight:600;margin-right:16px}
.wb-form .chk input{width:20px;height:20px}
.wb-regeltabel{min-width:520px}
/* Tekst netter maken: het knopje hoort bij het label, het voorstel eronder. */
.wb-ai{float:right;background:#fff;border:1px solid var(--lijn);color:var(--ink2);border-radius:7px;padding:3px 9px;font-size:11.5px;font-weight:600;cursor:pointer;line-height:1.6}
.wb-ai:hover{border-color:#ff6a1a;color:#ff6a1a}
.wb-ai:disabled{opacity:.6;cursor:default}
.wb-ai-voorstel{border:2px solid #ff6a1a;border-radius:10px;padding:12px 14px;margin-top:8px;background:#fffaf6}
.wb-ai-voorstel__kop{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#c2530f;margin-bottom:6px}
.wb-ai-voorstel__tekst{font-size:13.5px;line-height:1.6;white-space:pre-wrap;color:#1c1b1a}
.wb-ai-voorstel__let-op{margin-top:8px;padding:7px 10px;border-radius:7px;background:#fdf0ef;border:1px solid #f2c4bf;color:#8f2019;font-size:12.5px;font-weight:600}
.wb-ai-voorstel__knoppen{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
/* De foto's krijgen het merkrandje, net als op de PDF. */
.wb-foto{border:2px solid #ff6a1a}
.wb-foto span{border-top:1px solid #12b5b0}
.op-vraag{position:fixed;inset:0;z-index:60;background:rgba(20,23,31,.55);display:flex;align-items:center;justify-content:center;padding:18px}
.op-vraag__kaart{background:#fff;border-radius:14px;padding:20px;max-width:520px;width:100%;box-shadow:0 18px 50px rgba(0,0,0,.24)}
.op-vraag__kop{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#c2530f;margin-bottom:8px}
.op-vraag__tekst{font-size:15.5px;line-height:1.5;margin:0 0 10px;color:#14171f}
.op-vraag__foto{font-size:13px;color:#5b6470;margin:0 0 10px}
.op-vraag__antwoord{width:100%;border:1px solid var(--lijn);border-radius:9px;padding:9px 11px;font-size:14px;font-family:inherit}
.op-vraag__knoppen{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
/* Fotoknoppen per soort opname: meterkast, aansluiting, kabelweg. */
.op-fasen{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.op-fase{background:#fff;border:1px solid var(--lijn);border-radius:9px;padding:9px 13px;font-size:12.5px;font-weight:600;color:var(--ink2);cursor:pointer;line-height:1.2}
.op-fase:hover{border-color:#ff6a1a;color:#ff6a1a}
.op-fase:active{background:#fff6f1}
.op-foto span{display:block;padding:4px 7px;font-size:10.5px;color:var(--ink2);text-transform:uppercase;letter-spacing:.03em;background:#fff}
.op-alles{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.op-bev .veld{margin-bottom:9px}
.op-bev textarea,.op-bev input[type=text],.op-bev input:not([type]){width:100%}
.op-bev .x{background:none;border:0;font-size:22px;line-height:1;color:var(--ink2);cursor:pointer;padding:0 4px}
.op-bev .x:hover{color:#c0392b}
/* Opname op locatie: een lijst die je door de woning afloopt. */
.op-status{position:sticky;top:0;z-index:5;background:#f6f4f1;border:1px solid var(--lijn);border-radius:9px;padding:8px 12px;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:12px}
.op-status--ok{background:#eefaf3;border-color:#bfe6d2;color:#12603f}
.op-status--fout{background:#fdf0ef;border-color:#f2c4bf;color:#8f2019}
.op-bev{border:1px solid var(--lijn);border-radius:11px;padding:12px;margin-bottom:10px;background:#fcfcfd}
.op-bev.uit{opacity:.6;background:#fafafa}
.op-bev__top{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.op-bev__top .op-ruimte{flex:1 1 200px;height:38px;border:1px solid var(--lijn);border-radius:8px;padding:0 10px;font-size:14px}
.op-bev__top .op-urg{flex:0 0 auto;height:38px;border:1px solid var(--lijn);border-radius:8px;padding:0 8px}
.op-mee{flex:0 0 auto;display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;white-space:nowrap}
.op-bev__acties{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0}
.op-bev__net{border-top:1px dashed var(--lijn);padding-top:10px;margin-top:4px}
.op-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:10px}
.op-foto{border:2px solid #ff6a1a;border-radius:8px;overflow:hidden}
.op-foto img{width:100%;height:88px;object-fit:cover;display:block}
.op-upload{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:10px}
@media (max-width:640px){ .op-bev__top .op-ruimte{flex:1 1 100%} }
/* Urenrapport: het antwoord moet van een meter afstand leesbaar zijn op de tablet. */
.uren-kop{border-radius:12px;padding:18px 20px;margin:14px 0 4px;border:1px solid var(--lijn)}
.uren-kop__groot{font-size:26px;font-weight:800;line-height:1.15}
.uren-kop__onder{font-size:13.5px;margin-top:6px;opacity:.85}
.uren-kop--groen{background:#eefaf3;border-color:#bfe6d2;color:#12603f}
.uren-kop--rood{background:#fdf0ef;border-color:#f2c4bf;color:#8f2019}
.uren-kop--grijs{background:#f6f6f7;border-color:var(--lijn);color:var(--ink2)}
tr.uren-over td{background:#fdf0ef;color:#8f2019;font-weight:700}
tr.uren-binnen td{background:#eefaf3;color:#12603f;font-weight:700}
@media (max-width:640px){.uren-kop__groot{font-size:21px}}
/* Werkdagen: een klus loopt vaak over meer dan een dag. Op de tablet moet elke rij
   in een oogopslag te lezen zijn, dus geen tabel maar rijen die netjes afbreken. */
.wb-dagen{margin-bottom:14px}
.sub-kop{font-size:12.5px;font-weight:700;color:var(--ink2);margin:0 0 8px;text-transform:uppercase;letter-spacing:.03em}
.wb-dag{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;padding:10px;border:1px solid var(--lijn);border-radius:10px;margin-bottom:8px;background:#fcfcfd}
.wb-dag__nr{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--blauw);color:#fff;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.wb-dag .veld{margin:0}
.wb-dag .veld.sm{flex:0 0 140px}
.wb-dag .veld:not(.sm){flex:1 1 220px}
.wb-dag .x{flex:0 0 auto;margin-bottom:8px}
.wb-dagtabel td{padding:6px 10px;vertical-align:top}
.wb-dagfotos{margin-bottom:16px}
.wb-dagfotos:last-of-type{margin-bottom:10px}
@media (max-width:640px){
  .wb-dag{gap:8px}
  .wb-dag .veld.sm{flex:1 1 100px}
}
.wb-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:14px}
.wb-foto{border:1px solid var(--lijn);border-radius:8px;overflow:hidden}
.wb-foto img{width:100%;height:100px;object-fit:cover;display:block}
.wb-foto span{display:block;padding:4px 8px;font-size:11px;color:var(--ink2);text-transform:uppercase}
.wb-foto__dag{padding:0 6px 6px}
.wb-foto__dag select{width:100%;height:30px;border:1px solid var(--lijn);border-radius:6px;font-size:11.5px;padding:0 4px;background:#fff}
.wb-foto span i{font-style:normal;text-transform:none}
.wb-fotoup{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.wb-fotoup select{height:38px;border:1px solid var(--lijn);border-radius:8px;padding:0 10px}
.wb-fotoup input[type=file]{font-size:14px}
.wb-pub-kop{font-size:14px;font-weight:700;color:var(--merk-donker);margin-top:16px}

/* ===== opdracht ===== */
.kv-blok{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;font-size:14px;max-width:420px}
.kv-blok dt{color:var(--ink2)}.kv-blok dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.fout-kaart{border-color:var(--bad);background:var(--bad-zacht)}
.fout-melding{color:var(--bad);font-weight:600;margin:10px 0 0;font-size:13.5px}

/* ===== klantportaal ===== */
.portaal-lijst{display:flex;flex-direction:column;gap:8px}
.portaal-rij{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--lijn);border-radius:10px;text-decoration:none;color:var(--ink);background:var(--paper);transition:border-color .12s,background .12s}
.portaal-rij:hover{border-color:var(--merk);background:var(--merk-zacht)}
.portaal-rij .pr-nr{font-weight:700;font-family:var(--mono);font-size:13.5px;min-width:120px}
.portaal-rij .pr-d{color:var(--ink2);font-size:13px;flex:1}
.portaal-rij b{font-variant-numeric:tabular-nums;font-size:14px}
@media(max-width:520px){.portaal-rij{flex-wrap:wrap;gap:4px 12px}.portaal-rij .pr-nr{min-width:0}.portaal-rij .pr-d{flex:1 1 100%;order:3}}

/* ===== bankimport ===== */
.flash-ok{background:var(--ok-zacht);border-color:#bfe0cd;color:var(--ok)}
.flash-fout{background:var(--bad-zacht);border-color:#f0c8c2;color:var(--bad)}
.bank-up{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:6px}
.bank-up input[type=file]{font-size:14px;flex:1 1 260px}
.bank-tabel td,.bank-tabel th{vertical-align:middle}
.bank-tabel .bedrag,.bank-tabel th.bedrag{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.bank-tabel .oms{color:var(--ink2);font-size:12px;margin-top:2px}
.bank-tabel .nowrap{white-space:nowrap}
.bank-sel{max-width:300px;width:100%;height:38px;border:1px solid var(--lijn);border-radius:8px;padding:0 8px;background:var(--paper);font-size:13px}
.zh{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.02em}
.zh-ok{background:var(--ok-zacht);color:var(--ok)}
.zh-mss{background:var(--let-zacht);color:var(--let)}
.zh-geen{background:var(--lijn2);color:var(--ink2)}
@media(max-width:640px){.bank-sel{max-width:none}}

/* Betalingsregistratie op de factuur */
.betaal-reg{border-top:1px solid var(--lijn2);margin-top:14px;padding-top:14px}
.blok-kop2{font-size:13px;font-weight:700;color:var(--ink);margin:0 0 8px;letter-spacing:.01em}
.bet-overz{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:10px}
.bet-overz td{padding:3px 0;color:var(--ink2)}
.bet-overz td.r{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.bet-overz .bet-open td{font-weight:700;color:var(--ink);border-top:1px solid var(--lijn2);padding-top:6px}
.bet-hist{width:100%;border-collapse:collapse;font-size:12px;margin:0 0 12px}
.bet-hist th{text-align:left;color:var(--ink2);font-weight:600;padding:4px 6px;border-bottom:1px solid var(--lijn2)}
.bet-hist th.r,.bet-hist td.r{text-align:right;font-variant-numeric:tabular-nums}
.bet-hist td{padding:4px 6px;border-bottom:1px solid var(--lijn3,var(--lijn2))}
.bet-form .bet-rij{display:flex;gap:10px}
.bet-form .bet-rij .veld{flex:1}
.kanaal-hint{background:var(--let-zacht,#fff4e6);border:1px solid var(--let,#ff9d3c);color:#7a4a10;font-size:12px;border-radius:8px;padding:8px 10px;margin:0 0 12px}

/* de oude opzet-overstap (Deel B-bis) */
.ds-c-button--sm{height:30px;padding:0 12px;font-size:12.5px}
.ov-grid{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start;margin:14px 0}
@media(max-width:900px){.ov-grid{grid-template-columns:1fr}}
.ov-vw{width:100%;border-collapse:collapse;font-size:14px}
.ov-vw td{padding:9px 8px;border-bottom:1px solid var(--lijn2);vertical-align:top}
.ov-vw tr:last-child td{border-bottom:0}
.ov-vw td.r{text-align:right;white-space:nowrap}
.ov-live{border:1px solid var(--lijn)}
.ov-live.klaar{border-color:var(--blauw)}
.ov-live.aan{border-color:var(--ok)}
.ov-status-aan{color:var(--ok)} .ov-status-klaar{color:var(--blauw)} .ov-status-uit{color:var(--ink2)}
.ov-deb-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.ov-telling{font-size:13px;color:var(--ink2)}
.ov-testnote{background:var(--let-zacht,#fff4e6);border:1px solid var(--let,#ff9d3c);color:#7a4a10;font-size:12.5px;border-radius:8px;padding:7px 10px;margin:0 0 10px}
.ov-zoek{display:flex;gap:8px;margin:0 0 12px}
.ov-zoek input[type=search]{flex:1;height:34px;border:1px solid var(--lijn);border-radius:8px;padding:0 12px;font-size:14px;background:var(--paper,#fff);color:var(--ink)}
.ov-deb{width:100%;border-collapse:collapse;font-size:14px}
.ov-deb th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);padding:6px 8px;border-bottom:1px solid var(--lijn)}
.ov-deb th.r,.ov-deb td.r{text-align:right}
.ov-deb td{padding:7px 8px;border-bottom:1px solid var(--lijn2);vertical-align:middle}
.ov-deb td.mono{font-family:var(--mono,monospace);font-size:13px;color:var(--ink2)}

/* Publiek ondertekenen — 2 stappen (voorwaarden + offerte) */
.teken-stap{border:1px solid var(--lijn);border-radius:12px;padding:14px 16px;margin:0 0 14px;background:var(--paper,#fff)}
.teken-stapkop{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.teken-stapkop h3{margin:0;font-size:16px}
.teken-nr{flex:none;width:24px;height:24px;border-radius:50%;background:var(--blauw);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.teken-versie{font-size:11px;color:var(--ink2);font-weight:500}
.vw-scroll{max-height:240px;overflow:auto;border:1px solid var(--lijn2);border-radius:8px;padding:12px 14px;font-size:13px;line-height:1.5;background:var(--bg2,#fafbfb);margin:0 0 10px;-webkit-overflow-scrolling:touch}
#vw-sentinel{height:1px}
.teken-stap.vergrendeld{opacity:.5;pointer-events:none;filter:grayscale(.25)}
.teken-stap.vergrendeld::after{content:"↑ Onderteken eerst de algemene voorwaarden (stap 1)";display:block;font-size:12px;color:var(--let,#c0392b);margin-top:8px;font-weight:600}

/* Documenten-push status */
.dp-stats{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}
.dp-stat{flex:1;min-width:120px;background:var(--paper,#fff);border:1px solid var(--lijn);border-radius:12px;padding:14px 16px;text-align:center}
.dp-stat b{display:block;font-size:26px;font-weight:800;line-height:1}
.dp-stat span{font-size:12px;color:var(--ink2)}
.dp-stat.dp-ok b{color:var(--ok)}
.dp-stat.dp-bad{border-color:var(--let,#ff9d3c)}
.dp-stat.dp-bad b{color:var(--let,#c0392b)}

/* Deel B — afwijzen met reden, tegenvoorstel, bericht (publiek) */
.pub-radio{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--lijn2,#e6eaea);border-radius:8px;margin:0 0 8px;cursor:pointer;font-size:14px}
.pub-radio input{width:18px;height:18px;flex:none}
.pub-2knop{display:flex;gap:10px;margin-top:12px}
.pub-2knop .ds-c-button{flex:1}
.pub-tv .pub-tv-tab{width:100%;border-collapse:collapse;margin:12px 0;font-size:15px}
.pub-tv-tab td{padding:7px 4px;border-bottom:1px solid var(--lijn2,#eee)}
.pub-tv-tab td.r{text-align:right;font-variant-numeric:tabular-nums}
.pub-tv-tab .pub-tv-besp td{color:var(--ok,#2e7d46);font-weight:700;border-bottom:0}
.pub-tv-geldig{font-size:12.5px;color:var(--muted,#667);margin:0 0 14px}
.pub-bericht{margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--lijn2,#eee)}
.pub-bericht h3{margin:0 0 8px;font-size:15px}
.pub-bericht textarea{width:100%;border:1px solid var(--lijn,#d5dbdb);border-radius:8px;padding:9px 11px;font:inherit;font-size:14px;box-sizing:border-box;margin:0 0 8px}

/* Migratie-review */
.ctrl-sel{height:30px;border:1px solid var(--lijn);border-radius:7px;padding:0 8px;font-size:13px;background:var(--paper,#fff);color:var(--ink)}
.ctrl-bulk{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 12px;padding:10px 12px;background:var(--lijn2);border-radius:8px}
.ctrl-bulk .inline-form{display:flex;align-items:center;gap:6px}

/* Testscenario (go-live-bewijs) */
.ts-kaart{margin-bottom:16px}
.ts-kaart.ts-compleet{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok) inset}
.ts-kop{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--lijn)}
.ts-naam{font-size:15px}
.ts-naam .ts-knr{color:var(--dim);margin-right:4px}
.ts-voort{display:flex;align-items:center;gap:10px}
.ts-telling{font-variant-numeric:tabular-nums;font-weight:700;font-size:13px;color:var(--dim);min-width:42px;text-align:right}
.ts-telling.ok{color:var(--ok)}
.ts-bar{width:120px;height:7px;border-radius:20px;background:var(--lijn);overflow:hidden}
.ts-bar i{display:block;height:100%;background:var(--blauw);transition:width .2s}
.ts-compleet .ts-bar i{background:var(--ok)}
.ts-lijst{display:flex;flex-direction:column;gap:6px}
.ts-rij{display:grid;grid-template-columns:auto minmax(180px,1fr) 150px minmax(160px,1.2fr);align-items:center;gap:12px;padding:7px 10px;border:1px solid var(--lijn);border-radius:var(--radius);background:var(--paper)}
.ts-rij.is-done{background:var(--ok-zacht);border-color:var(--ok)}
.ts-check{position:relative;display:inline-flex;cursor:pointer}
.ts-check input{position:absolute;opacity:0;width:22px;height:22px;margin:0;cursor:pointer}
.ts-box{width:22px;height:22px;border:2px solid var(--lijn);border-radius:6px;display:inline-block;transition:.15s}
.ts-check input:checked+.ts-box{background:var(--ok);border-color:var(--ok);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");background-size:16px;background-position:center;background-repeat:no-repeat}
.ts-check input:focus-visible+.ts-box{outline:2px solid var(--blauw);outline-offset:2px}
.ts-mid{display:flex;align-items:baseline;gap:9px;min-width:0}
.ts-nr{font-variant-numeric:tabular-nums;font-weight:700;color:var(--dim);font-size:12px;min-width:18px}
.ts-lbl{font-size:14px}
.is-done .ts-lbl{color:var(--ink)}
.ts-datum,.ts-opm{height:34px;border:1px solid var(--lijn);border-radius:8px;padding:0 9px;font:inherit;font-size:13px;background:var(--bg);color:var(--ink);width:100%}
.ts-datum:focus,.ts-opm:focus{outline:none;border-color:var(--blauw)}
.ts-actie{margin-top:14px;display:flex;justify-content:flex-end}
@media(max-width:720px){
  .ts-rij{grid-template-columns:auto 1fr;gap:8px 10px}
  .ts-datum{grid-column:2}
  .ts-opm{grid-column:1/-1}
}




/* Ondertekenpagina — twee kolommen (vertrouwde indeling): document links (pdf.js-canvas), formulier rechts */
.pub-wrap:has(.fd){max-width:1600px}
.fd{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;align-items:start;width:100%}
.fd-pdf{background:#fff;border:1px solid var(--line,#e5e7eb);border-radius:12px;overflow:hidden;position:sticky;top:16px}
.fd-pdf-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line,#eee)}
.fd-pdf-head h2{margin:0;font-size:16px}
.fd-pdf-tools{display:flex;align-items:center;gap:8px}
.fd-pdf-pages{font-size:12px;color:var(--ink-3,#6b7280);font-variant-numeric:tabular-nums;margin-right:4px;white-space:nowrap}
.fd-pdf-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--line,#e5e7eb);border-radius:8px;background:#fff;color:var(--ink,#374151);font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;line-height:1}
.fd-pdf-btn:hover{background:#f3f4f6}
.fd-pdf-canvas{height:82vh;min-height:700px;overflow-y:auto;padding:14px;background:#eef0f2;display:flex;flex-direction:column;gap:12px;align-items:center}
.fd-pdf-page{max-width:100%;box-shadow:0 1px 4px rgba(0,0,0,.14);border-radius:4px;background:#fff}
.fd-pdf-frame{width:100%;height:82vh;min-height:700px;border:0;display:block;background:#eef0f2}
.fd-pdf-fallback{text-align:center;padding:6px;font-size:12px;border-top:1px solid var(--line,#eee)}
.fd-pdf-fallback a{color:var(--ink-3,#6b7280);cursor:pointer;text-decoration:underline}
.fd-pdf--iframe .fd-pdf-fallback{display:none}
.fd-form{background:#fff;border:1px solid var(--line,#e5e7eb);border-radius:12px;padding:22px 24px}
.fd-form h1{font-size:20px;margin:6px 0 14px}
.fd-bedragen{width:100%;border-collapse:collapse;margin:4px 0 18px;font-size:14px}
.fd-bedragen td{padding:6px 2px;border-bottom:1px solid var(--line,#f0f0f0)}
.fd-bedragen td.r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.fd-bedragen tr.fd-korting td{color:#0A7A75}
.fd-bedragen tr.fd-tot td{font-weight:800;border-top:2px solid var(--line,#ddd);border-bottom:none;font-size:15px;padding-top:8px}
.fd-opm-toggle{font-size:12px;font-weight:600;color:var(--groen,#0A7A75);cursor:pointer;margin-left:8px}
.fd-opm{margin:8px 0}
.fd-opm textarea{width:100%;box-sizing:border-box;border:1px solid var(--line,#e5e7eb);border-radius:8px;padding:8px 10px;font:inherit;resize:vertical}
.fd-contact{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--line,#eee)}
.fd-contact a{color:var(--ink,#374151);text-decoration:none;font-size:14px;font-weight:600}
.fd-contact a:hover{text-decoration:underline}
.fd-ico{margin-right:4px}
.fd-pdf-note{display:flex;gap:12px;align-items:center;margin:0;padding:12px 14px;background:linear-gradient(180deg,#fff8f4 0%,#fff3ea 100%);border-bottom:1px solid #ffdcc6}
.fd-pdf-note-ico{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#ff6a1a;color:#fff;font-size:15px;font-weight:700;line-height:28px;text-align:center;box-shadow:0 1px 3px rgba(255,106,26,.35)}
.fd-pdf-note-tekst{min-width:0}
.fd-pdf-note-kop{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#c2530f}
.fd-pdf-note-naam{display:block;font-size:14px;font-weight:700;color:#2b3038;line-height:1.3;margin-top:1px;overflow-wrap:anywhere}
.fd-pdf-note-sub{display:block;font-size:12px;color:#8a6a55;line-height:1.35;margin-top:2px}
.fd-mobilebar{display:none}
.hide{display:none !important}
@media(max-width:820px){
  .pub-wrap:has(.fd){max-width:640px}
  .fd{grid-template-columns:1fr}
  .fd-pdf{display:block;position:static}
  .fd--show-pdf .fd-pdf{display:block}
  .fd-pdf-canvas,.fd-pdf-frame{height:80vh;min-height:520px}
  .fd-mobilebar{display:flex;align-items:center;gap:12px;position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line,#e5e7eb);padding:10px 14px;margin:14px -14px 0;box-shadow:0 -4px 14px rgba(0,0,0,.06);z-index:20}
  .fd-mob-link{margin-right:auto;font-weight:700;color:var(--groen,#0A7A75);cursor:pointer;text-decoration:underline}
}

/* ===== globale live-zoek  ===== */
.zk-box{width:min(460px,92vw);left:auto;right:0;max-height:70vh}
.zk-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--lijn);background:var(--lijn2)}
.zk-tags-lbl{font-size:11px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.03em;margin-right:2px}
.zk-chip{border:1px solid var(--lijn);background:#fff;color:var(--ink2);border-radius:999px;padding:3px 11px;font-size:12px;font-weight:600;cursor:pointer;line-height:1.6;transition:background .12s,border-color .12s,color .12s}
.zk-chip:hover{border-color:var(--blauw);color:var(--blauw)}
.zk-chip.actief{background:var(--merk);border-color:var(--merk);color:#fff}
.zk-body{overflow:auto;max-height:calc(70vh - 46px)}
.zk-groepkop{font-size:10.5px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;padding:8px 12px 3px}
.zk-hit{text-decoration:none;color:inherit}
.zk-hit span{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.zk-lab{font-weight:600;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zk-sub{color:var(--ink3);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zk-hit-dood{cursor:default}
.zk-hit-dood:hover{background:transparent}
.zk-leeg{padding:14px 12px;color:var(--ink3);font-size:12.5px}

/* rich-text markering */
mark{background:#fff3b0;padding:0 1px;border-radius:2px}
.lees-opm p{margin:0 0 8px}
.lees-opm ul,.lees-opm ol{margin:4px 0 4px 20px}

.rt-toolbar{display:flex;gap:6px;margin:4px 0}
.rt-b{border:1px solid var(--lijn,#d0d5dd);background:#fff;border-radius:6px;padding:3px 10px;cursor:pointer;font-size:13px}
.rt-b:hover{background:#f2f4f7}
.rt-veld{min-height:70px;border:1px solid var(--lijn,#d0d5dd);border-radius:8px;padding:10px;font-size:14px;background:#fff}
.rt-veld:focus{outline:2px solid #0A7A75;outline-offset:-1px}
.rt-veld mark{background:#fff3b0}
.opm-lab{font-weight:600;font-size:12.5px;color:var(--ink2)}

/* Afwijzen mag nooit achter een slot zitten: wie afwijst accepteert juist niets. */
.pub-afwijzen{position:relative;z-index:2;pointer-events:auto;opacity:1}
.pub-afwijzen a{text-decoration:underline}
.pub-afwijzen-sub{display:block;margin-top:3px;font-size:12px;color:var(--ink3,#8a949f)}


/* ---------------- mobiel: niets mag het scrollen in de weg zitten ----------------
   Op een telefoon staat alles onder elkaar. Een zijkolom of pdf-venster dat dan nog
   'sticky' is, blijft aan het scherm plakken en houdt de knoppen eronder buiten bereik;
   dat maakte het maken van een offerte of factuur op mobiel lastig. In een kolom heeft
   sticky geen functie, dus daar zetten we het uit. */
@media(max-width:1000px){
  .doc-zij{position:static;top:auto}
  .pub-pdf,.fd-pdf{position:static;top:auto}
  .doc-split{gap:16px}
}
@media(max-width:700px){
  /* Horizontaal wegglijden voorkomt dat verticaal scrollen soms 'hapert'. */
  html,body{max-width:100%;overflow-x:hidden}
  .ds-c-table-container{-webkit-overflow-scrolling:touch}
  /* Ruimte onderaan, zodat de laatste knop nooit onder de rand van het scherm valt. */
  .right{padding-bottom:96px}
  .doc-zij-kaart{padding:14px}
}

/* --- werkbon: twee handtekeningen naast elkaar, op mobiel onder elkaar --- */
.wb-tekenrij{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:820px){.wb-tekenrij{grid-template-columns:1fr 1fr}}
.wb-teken{border:1px solid var(--lijn);border-radius:12px;padding:14px;background:#fff}
.wb-teken h3{margin:0 0 2px;font-size:15px}
.wb-teken .sub{margin:0 0 10px}
.wb-teken.getekend{background:#f2fbf6;border-color:#bfe6d0}
.wb-teken.getekend .sub{margin:0}
.wb-klaar{margin:14px 0 10px;font-weight:600}
.wb-bev-waarschuwing{background:#fff7ed;border:1px solid #fcd9a8;border-radius:12px;padding:12px 16px;margin-bottom:14px}
.wb-bev-waarschuwing ul{margin:6px 0 0;padding-left:18px}
.wb-bev-totaal{margin:12px 0 4px;font-size:15px}
.wb-bev-fotos{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.wb-bev-fotos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:9px;border:1px solid var(--lijn)}
.wb-bev-htrij{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.wb-bev-ht{border:1px solid var(--lijn);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.wb-bev-slot{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.wb-bev-slot form{width:100%}
.ontbreekt{color:#b42318}

/* --- boekhouder: periode-rapport --- */
.bh-snel{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}
.bh-periode{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.bh-periode .veld{margin-bottom:0}

/* --- live meekijken: wie heeft er nu een document open --- */
.live-blok:empty{display:none}
.live-blok{margin:0 0 14px}
.live-nu{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  background:var(--ok-zacht);color:var(--ok);font-size:13px;font-weight:700;white-space:nowrap}
.live-nu small{font-weight:500;opacity:.85}
.live-nu--kort{padding:3px 9px;font-size:11.5px;gap:5px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 0 rgba(27,107,73,.5);animation:live-puls 2s infinite}
@keyframes live-puls{
  0%{box-shadow:0 0 0 0 rgba(27,107,73,.45)}
  70%{box-shadow:0 0 0 7px rgba(27,107,73,0)}
  100%{box-shadow:0 0 0 0 rgba(27,107,73,0)}
}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}
.live-kaart{background:var(--paper);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:14px 16px;margin:0 0 16px;box-shadow:var(--schaduw)}
.live-kaart h3{margin:0 0 10px;font-size:12px;font-weight:800;text-transform:uppercase;
  letter-spacing:.7px;color:var(--dim)}
.live-kaart h3 b{color:var(--ok)}
.live-lijst{display:flex;flex-direction:column;gap:2px}
.live-rij{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius2);
  text-decoration:none;color:var(--ink);font-size:13.5px}
.live-rij:hover{background:var(--lijn2)}
.live-wie{font-weight:700}
.live-wat{color:var(--dim)}
.live-duur{margin-left:auto;color:var(--dim);font-size:12px;white-space:nowrap}
.live-leeg{margin:2px 0;color:var(--dim);font-size:13.5px}
@media (max-width:560px){
  .live-wat{display:none}
}

/* --- Live-tabblad --- */
.va-l-menu__counter--groen{background:var(--ok)}
.lp-ververst{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--dim)}
.lp-ververst::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);
  animation:live-puls 2s infinite}
.lp-wrap{display:grid;gap:16px;grid-template-columns:1fr 1fr;align-items:start}
.lp-lijst{display:flex;flex-direction:column;gap:6px}
.lp-kaart{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius2);
  border:1px solid var(--lijn);text-decoration:none;color:var(--ink);background:var(--paper)}
.lp-kaart:hover{border-color:var(--merk);background:var(--lijn2)}
.lp-kaart--nu{border-color:var(--ok);background:var(--ok-zacht)}
.lp-status{display:flex;align-items:center;flex:none}
.lp-dot-weg{width:8px;height:8px;border-radius:50%;background:var(--ink3);display:block}
.lp-mid{display:flex;flex-direction:column;gap:2px;min-width:0}
.lp-mid b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-mid small{font-size:12px;color:var(--dim)}
.lp-rechts{margin-left:auto;text-align:right;font-size:12.5px;font-weight:600;white-space:nowrap}
.lp-rechts small{display:block;font-weight:400;color:var(--dim);font-size:11.5px}
@media (max-width:820px){
  .lp-wrap{grid-template-columns:1fr}
}

/* --- waar de klant nu mee bezig is --- */
.lp-bezig{font-style:normal;font-size:11.5px;font-weight:700;color:var(--ok);
  text-transform:none;letter-spacing:.2px}
.lp-kaart--actie{border-color:var(--accent);background:#fff7ed}
.lp-kaart--actie .lp-bezig{color:#9a3412}
.lp-kaart--actie .live-dot{background:var(--accent);box-shadow:0 0 0 0 rgba(255,106,26,.5)}
.live-nu--actie{background:#fff7ed;color:#9a3412}
.live-nu--actie .live-dot{background:var(--accent)}
.live-spoor{list-style:none;margin:10px 0 0;padding:0;font-size:12.5px;
  border-left:2px solid var(--lijn);padding-left:12px}
.live-spoor li{display:flex;gap:10px;align-items:baseline;padding:3px 0;color:var(--ink2)}
.live-spoor li small{margin-left:auto;color:var(--dim);font-size:11px;white-space:nowrap}
.live-spoor li:first-child{font-weight:700;color:var(--ink)}

/* --- scherm Betalingen --- */
.bet-stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:0 0 14px}
.bet-uitleg{background:var(--merk-zacht);border-radius:var(--radius2);padding:12px 15px;margin:0 0 16px}
.bet-uitleg p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink2)}

/* --- pinnen op de iPhone --- */
.pin-blok{margin-top:10px;padding-top:10px;border-top:1px solid var(--lijn2)}
.pin-status{margin-top:10px;padding:11px 14px;border-radius:var(--radius2);font-size:13.5px;
  background:var(--lijn2);color:var(--ink2)}
.pin-status--wacht{background:var(--let-zacht);color:var(--let)}
.pin-status--ok{background:var(--ok-zacht);color:var(--ok);font-weight:700}
.pin-status--fout{background:var(--bad-zacht);color:var(--bad)}

/* klantpagina — Communicatie: alle documenten van deze klant op één tijdlijn */
.com-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 18px}
@media(max-width:900px){.com-stats{grid-template-columns:repeat(2,1fr)}}
.com-stat{display:flex;flex-direction:column;gap:3px;padding:14px 16px;background:var(--vlak);border:1px solid var(--lijn);border-radius:10px}
.com-stat-v{font-size:21px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.com-stat-l{font-size:12.5px;color:var(--ink2);font-weight:600}
.com-stat-s{font-size:11.5px;color:var(--ink3)}
.com-stat .rood{color:var(--bad)}
.com-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.com-f{font:inherit;font-size:12.5px;font-weight:600;color:var(--ink2);background:var(--paper);border:1px solid var(--lijn);border-radius:999px;padding:6px 14px;cursor:pointer}
.com-f:hover{background:var(--lijn2)}
.com-f.actief{background:var(--merk);border-color:var(--merk);color:#fff}
.com-lijst{list-style:none;margin:0;padding:0}
.com-dag{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);margin:18px 0 10px;padding-left:64px}
.com-dag:first-child{margin-top:0}
.com-item{position:relative;display:grid;grid-template-columns:52px 12px 1fr;align-items:start;gap:12px;padding:0 0 14px}
.com-item::before{content:"";position:absolute;left:69px;top:17px;bottom:-3px;width:2px;background:var(--lijn2)}
.com-item:last-child::before{display:none}
.com-tijd{font-size:12px;color:var(--ink3);text-align:right;font-variant-numeric:tabular-nums;padding-top:1px}
.com-dot{width:12px;height:12px;margin-top:3px;border-radius:50%;background:var(--ink3);box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--lijn2);position:relative;z-index:1}
.com-g-verstuurd .com-dot{background:var(--wacht)}
.com-g-geopend .com-dot{background:var(--merk-bright)}
.com-g-actie .com-dot{background:var(--ok)}
.com-i-bad .com-dot{background:var(--bad)}
.com-i-geld .com-dot{background:var(--merk)}
.com-body{min-width:0}
.com-titel{font-size:13.5px;font-weight:600;color:var(--ink)}
.com-sub{font-size:12.5px;color:var(--ink2);margin-top:1px;overflow-wrap:anywhere}
.com-doc{display:inline-block;margin-top:5px;font-size:11.5px;font-weight:700;color:var(--merk);background:var(--merk-zacht);border-radius:5px;padding:2px 8px;text-decoration:none}
.com-doc:hover{background:var(--merk);color:#fff;text-decoration:none}
@media(max-width:600px){
.com-item{grid-template-columns:42px 12px 1fr;gap:9px}
.com-item::before{left:58px}
.com-dag{padding-left:53px}
}

/* klantpagina — communicatie op stop */
.comm-stop-balk{display:flex;flex-direction:column;gap:3px;margin:0 0 18px;padding:13px 16px;border:1px solid #e3b4ae;border-left:4px solid var(--bad);border-radius:10px;background:var(--bad-zacht)}
.comm-stop-balk b{font-size:13.5px;color:var(--bad)}
.comm-stop-balk span{font-size:12.5px;color:var(--ink2)}

/* ── Keuzes in een offerte ─────────────────────────────────────────────
   Een klant zag eerder alleen wat aangevinkte regels in een grijs, vergrendeld blok. Nu is
   het een eigen stap met een eigen kleur, een bevestigknop en een statusregel die zegt of de
   keuze al verwerkt is. Zolang dat niet zo is blijft de rest van het formulier dicht. */
.keuze-banner{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 14px;padding:13px 16px;border:1px solid #f0b27a;border-left:4px solid #e07b39;border-radius:10px;background:#fff8f1}
.keuze-banner b{font-size:14.5px;color:#8a4b16}
.keuze-banner span{flex:1 1 100%;font-size:13px;color:#6b4a30;line-height:1.5}
.keuze-banner a{font-size:13px;font-weight:600;color:#c2410c}

.teken-stap--keuze{border-color:#f0b27a;background:#fffdfa}
.keuze-uitleg{margin:0 0 10px;font-size:13px;color:#6b7280;line-height:1.55}
.teken-stap--keuze .pub-opties{background:#fff;border:1px solid var(--lijn);margin:0}
.teken-stap--keuze .pub-optie{padding:9px 0;min-height:40px}
.teken-stap--keuze .pub-optie input{width:19px;height:19px;accent-color:#e07b39;flex:none}
.keuze-knop{margin-top:12px}
.keuze-knop--wacht{background:#e07b39;border-color:#e07b39;color:#fff}
.keuze-status{margin:10px 0 0;font-size:12.5px;line-height:1.5}
.keuze-status--ok{color:#1c6b3a}
.keuze-status--ok::before{content:"\2713\00a0";font-weight:700}
.keuze-status--todo{color:#8a4b16;font-weight:600}

@media(max-width:640px){
  .keuze-banner{padding:12px 14px}
  .teken-stap--keuze .pub-optie{min-height:44px}
  .keuze-knop{width:100%}
}

/* Korte toelichting onder een cijfer op het dashboard, voor als de betekenis is veranderd. */
.dsp-noot{margin:8px 0 0;font-size:11.5px;line-height:1.5;color:#6b7280;max-width:46ch}

/* Op de offerte: wat er al gefactureerd is. Staat boven de factuurknop, zodat je niet twee
   keer hetzelfde factureert omdat je niet meer weet of je het al gedaan had. */
.uit-offerte-reeds{background:#f7fafc;border:1px solid #dce3ec;border-radius:9px;padding:11px 14px;margin-bottom:10px;font-size:13.5px}
.uit-offerte-reeds b{display:block;margin-bottom:6px}
.uit-offerte-reeds ul{margin:0 0 8px;padding-left:18px;line-height:1.9}
.uit-offerte-reeds p{margin:0;color:#5b6470}

/* ── Aanbetaling als bedrag ────────────────────────────────────────────
   De regel valt op tussen de bedragen, want dit is wat er nu betaald moet worden en niet pas
   na oplevering. De reden eronder staat kleiner: hij hoort erbij maar leidt niet. */
.fd-bedragen .fd-aanbet td { border-top: 1px solid var(--lijn, #dfe3e8); padding-top: 8px; }
.fd-aanbet-waarom, .pub-aanbet-waarom {
  margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: #5b6672;
}

/* Prijscheck: rustig blok, want dit is een aanbod om te helpen en geen alarm. */
.pub-kaart--rustig{background:#f8f9fa;border:1px solid #e5e7eb;border-radius:12px;padding:16px 18px;margin-top:16px}
.pub-kaart--rustig p{margin:0 0 6px}
.pub-kaart--rustig p:last-child{margin-bottom:0}
.pub-knop--rustig{background:#fff;color:#14171f;border:1px solid #d5d8dc}
.pub-knop--rustig:hover{border-color:#ff6a1a;color:#ff6a1a}
.pub-tabel{width:100%;border-collapse:collapse;font-size:14px;margin:10px 0}
.pub-tabel td{padding:6px 8px 6px 0;border-bottom:1px solid #ececec}
.pub-tabel tr:first-child td{font-size:11px;color:#8a9391;text-transform:uppercase;letter-spacing:.04em;border-bottom:0}
.pub-let-op{background:#fff8f3;border:1px solid #ffd9c2;border-radius:9px;padding:11px 13px;font-size:13.5px;line-height:1.55;color:#7a4318;margin:14px 0}

/* Panden en contactpersonen op de relatiekaart */
.pand-rij{border:1px solid var(--lijn);border-radius:9px;padding:11px 13px;margin:0 0 10px;background:#fff}
.pand-rij.pand-nieuw{border-style:dashed;background:var(--lijn2,#fafbfc)}
.pand-vld{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.pand-vld label,.pand-not{display:flex;flex-direction:column;font-size:11.5px;color:var(--dim);gap:3px}
.pand-vld input,.pand-not input{padding:7px 9px;border:1px solid var(--lijn);border-radius:7px;
  font:inherit;font-size:13px;background:#fff;color:var(--ink)}
.pand-vld .pc{max-width:110px}.pand-vld .nr{max-width:80px}
.pand-not{margin-top:8px}
.pand-knop{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:9px}
.pand-knop .chk{font-size:12.5px;color:var(--dim);display:flex;align-items:center;gap:5px}
@media(max-width:640px){.pand-vld{grid-template-columns:1fr 1fr}.pand-vld .pc,.pand-vld .nr{max-width:none}}

/* Terugknop en zoeken op smal scherm */
.hd-terug{display:none;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--lijn);border-radius:9px;background:var(--paper);color:var(--ink);
  cursor:pointer;padding:0;margin-right:2px}
.hd-terug:active{background:var(--lijn2)}
.hd-zoekknop{display:none;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--lijn);border-radius:9px;background:var(--paper);color:var(--ink);cursor:pointer}
.hd-zoekbalk{display:none}

@media(max-width:900px){
  .hd-terug{display:flex}
}
@media(max-width:900px){
  /* De zoekbalk in de kop past hier niet, maar verdwijnen mag hij niet: zoeken is waar Kevin
     het vaakst mee begint. Het vergrootglas klapt er een over de volle breedte open. */
  .hd-zoekknop{display:flex}
  .hd-zoekbalk{position:sticky;top:var(--hd-h);z-index:40;gap:8px;padding:9px 12px;
    background:var(--paper);border-bottom:1px solid var(--lijn)}
  #zoektoggle:checked ~ .ds-l-content-container .hd-zoekbalk{display:flex}
  .hd-zoekbalk input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--lijn);
    border-radius:9px;font:inherit;font-size:16px;background:var(--bg);color:var(--ink)}
  .hd-zoekbalk button{padding:10px 16px;border:1px solid var(--merk);border-radius:9px;
    background:var(--merk);color:#fff;font:inherit;font-weight:600;cursor:pointer}
}

/* ===== PDF toevoegen: tabbladen + documenten uit het systeem ===== */
.bib-tabs{display:flex;gap:4px;padding:0 16px;border-bottom:1px solid var(--lijn,#e5e7eb);background:#fff}
.bib-tab{appearance:none;border:0;background:none;padding:11px 14px;font-size:13.5px;font-weight:600;color:var(--ink3,#6b7280);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.bib-tab:hover{color:var(--ink,#374151)}
.bib-tab.actief{color:var(--merk,#12b5b0);border-bottom-color:var(--merk,#12b5b0)}
.sysdoc-zoek{padding:12px 16px 8px}
.sysdoc-q{width:100%;padding:9px 12px;border:1px solid var(--lijn,#e5e7eb);border-radius:9px;font-size:14px}
.sysdoc-q:focus{outline:none;border-color:var(--merk,#12b5b0);box-shadow:0 0 0 3px rgba(18,181,176,.15)}
.sysdoc-body{padding:0 16px 16px;max-height:52vh;overflow-y:auto}
.sysdoc-lijst{display:flex;flex-direction:column}
.sysdoc-rij{display:flex;align-items:center;gap:10px;width:100%;text-align:left;appearance:none;border:0;border-bottom:1px solid #f1f3f2;background:none;padding:10px 4px;cursor:pointer;font-size:13.5px}
.sysdoc-rij:hover{background:#f7fbfa}
.sysdoc-rij.bezig{opacity:.5;pointer-events:none}
.sysdoc-soort{flex:0 0 auto;min-width:64px;text-align:center;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:999px;background:#eef2f1;color:#5a615f}
.sysdoc-offerte{background:#e7f6f5;color:#0e7c66}
.sysdoc-factuur{background:#fff1e6;color:#c2530f}
.sysdoc-werkbon{background:#eef1fb;color:#3b4a94}
.sysdoc-opname{background:#f3eefb;color:#6b3b94}
.sysdoc-nr{font-weight:600;color:var(--ink,#14171f)}
.sysdoc-datum{color:var(--ink3,#6b7280);font-size:12.5px}
.sysdoc-ander{font-size:11px;color:#9aa1aa;font-style:italic}
.sysdoc-kies{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--merk,#12b5b0)}

/* ===== bibliotheek: zoeken ===== */
.bib-zoek{flex:1 1 240px;min-width:180px}
.bib-q{width:100%;padding:8px 12px;border:1px solid var(--lijn,#e5e7eb);border-radius:9px;font-size:13.5px}
.bib-q:focus{outline:none;border-color:var(--merk,#12b5b0);box-shadow:0 0 0 3px rgba(18,181,176,.15)}
.bib-treffers{display:flex;flex-direction:column}
.bib-treffer{display:flex;align-items:center;gap:10px;width:100%;text-align:left;appearance:none;border:0;border-bottom:1px solid #f1f3f2;background:none;padding:9px 4px;cursor:pointer;font-size:13.5px}
.bib-treffer:hover{background:#f7fbfa}
.bib-treffer-ico{flex:0 0 auto;width:30px;height:22px;border-radius:4px;font-size:9px;font-weight:700;line-height:22px;text-align:center;background:#eef2f1;color:#5a615f}
.bib-treffer-map .bib-treffer-ico{background:#e7f6f5;color:#0e7c66}
.bib-treffer-pdf .bib-treffer-ico{background:#fdecea;color:#a3231b}
.bib-treffer-naam{font-weight:600;color:var(--ink,#14171f)}
.bib-treffer-pad{color:var(--ink3,#6b7280);font-size:12px}
.bib-treffer-actie{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--merk,#12b5b0)}

/* ===== bekijken voordat je kiest ===== */
.opb-kaart-pdf{position:relative}
.opb-bekijk{position:absolute;top:6px;left:6px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:rgba(255,255,255,.92);color:#5a615f;border:1px solid var(--lijn,#e5e7eb);z-index:2}
.opb-bekijk:hover{color:var(--merk,#12b5b0);border-color:var(--merk,#12b5b0)}
.bib-item{position:relative}
.bib-oog{position:absolute;top:6px;left:6px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:rgba(255,255,255,.92);color:#5a615f;border:1px solid var(--lijn,#e5e7eb);z-index:2}
.bib-oog:hover{color:var(--merk,#12b5b0);border-color:var(--merk,#12b5b0)}
.bib-treffer-bekijk,.sysdoc-bekijk{display:inline-flex;align-items:center;gap:5px;margin-left:auto;padding:3px 9px;border:1px solid var(--lijn,#e5e7eb);border-radius:7px;color:#5a615f;font-size:12px;font-weight:600;background:#fff}
.bib-treffer-bekijk:hover,.sysdoc-bekijk:hover{color:var(--merk,#12b5b0);border-color:var(--merk,#12b5b0)}
.bib-treffer .bib-treffer-actie,.sysdoc-rij .sysdoc-kies{margin-left:10px}

/* ===== bekijken binnen het venster ===== */
.bib-paneel[data-paneel="voorbeeld"]{padding:0 20px 16px}
.bib-vb-balk{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--lijn,#e5e7eb);margin-bottom:10px}
.bib-vb-terug{appearance:none;border:1px solid var(--lijn,#e5e7eb);background:#fff;border-radius:8px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--ink2,#374151);cursor:pointer}
.bib-vb-terug:hover{border-color:var(--merk,#12b5b0);color:var(--merk,#12b5b0)}
.bib-vb-naam{font-size:13.5px;font-weight:700;color:var(--ink,#14171f);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bib-vb-kies{margin-left:auto;flex:0 0 auto}
.bib-vb-frame{flex:1 1 auto;min-height:52vh;width:100%;border:1px solid var(--lijn,#e5e7eb);border-radius:10px;background:#eef0f2}

/* ===== document bekijken zonder de pagina te verlaten ===== */
.pnx-viewer{position:fixed;inset:0;background:rgba(20,23,31,.55);display:none;align-items:center;justify-content:center;z-index:300;padding:20px}
.pnx-viewer.open{display:flex}
.pnx-viewer-box{background:var(--paper,#fff);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);width:min(980px,100%);height:min(92vh,100%);display:flex;flex-direction:column;overflow:hidden}
.pnx-viewer-kop{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--lijn,#e5e7eb)}
.pnx-viewer-naam{font-size:14px;font-weight:700;color:var(--ink,#14171f);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.pnx-viewer-dl,.pnx-viewer-x{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--lijn,#e5e7eb);background:#fff;color:var(--ink2,#374151);font-size:16px;line-height:1;cursor:pointer;text-decoration:none}
.pnx-viewer-dl:hover,.pnx-viewer-x:hover{border-color:var(--merk,#12b5b0);color:var(--merk,#12b5b0)}
.pnx-viewer-frame{flex:1 1 auto;width:100%;border:0;background:#eef0f2}
@media(max-width:700px){.pnx-viewer{padding:0}.pnx-viewer-box{height:100%;border-radius:0}}

/* ===== bestand aan een klant koppelen ===== */
.bib-koppel{position:absolute;top:6px;left:34px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:rgba(255,255,255,.92);color:#5a615f;border:1px solid var(--lijn,#e5e7eb);z-index:2;cursor:pointer}
.bib-koppel:hover{color:#ff6a1a;border-color:#ff6a1a}
.pnx-koppel{position:fixed;inset:0;background:rgba(20,23,31,.5);display:none;align-items:flex-start;justify-content:center;z-index:320;padding:60px 20px 20px}
.pnx-koppel.open{display:flex}
.pnx-koppel-box{background:var(--paper,#fff);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.3);width:min(520px,100%);padding:16px;max-height:80vh;display:flex;flex-direction:column}
.pnx-koppel-kop{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pnx-koppel-naam{flex:1 1 auto;font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pnx-koppel-x{appearance:none;border:1px solid var(--lijn,#e5e7eb);background:#fff;border-radius:8px;width:30px;height:30px;font-size:16px;line-height:1;cursor:pointer;color:var(--ink2,#374151)}
.pnx-koppel-q{width:100%;padding:9px 12px;border:1px solid var(--lijn,#e5e7eb);border-radius:9px;font-size:14px}
.pnx-koppel-q:focus{outline:none;border-color:var(--merk,#12b5b0);box-shadow:0 0 0 3px rgba(18,181,176,.15)}
.pnx-koppel-lijst{margin-top:10px;overflow-y:auto;flex:1 1 auto}
.pnx-koppel-rij{display:flex;align-items:center;gap:10px;width:100%;text-align:left;appearance:none;border:0;border-bottom:1px solid #f1f3f2;background:none;padding:9px 4px;cursor:pointer;font-size:13.5px}
.pnx-koppel-rij:hover{background:#f7fbfa}
.pnx-koppel-rij.bezig{opacity:.5;pointer-events:none}
.pnx-koppel-nr{flex:0 0 auto;min-width:76px;font-weight:700;color:var(--merk,#12b5b0);font-size:12.5px}
.pnx-koppel-klant{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pnx-koppel-plaats{color:var(--ink3,#6b7280);font-size:12px}

/* ── de bestelbon: zoeken met tegels ───────────────────────── */
.bb-tegels{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.bb-tegel{flex:1 1 260px;min-width:0;text-align:left;padding:10px 12px;border-radius:10px;border:1px solid var(--lijn);background:var(--paper);cursor:pointer;font:inherit;color:var(--ink)}
.bb-tegel:hover{border-color:var(--merk);background:var(--blauw-l)}
.bb-tegel b{display:block;font-weight:600;font-size:13.5px}
.bb-tegel__sub{display:block;color:var(--ink2);font-size:12px;margin-top:2px;font-variant-numeric:tabular-nums}
@media(max-width:560px){.bb-tegel{flex:1 1 100%}}

/* ── bestelbon met een hulpkolom ernaast ───────────────────── */
.bb-blad{display:flex;gap:18px;align-items:flex-start}
.bb-hoofd{flex:1 1 auto;min-width:0}
.bb-zij{flex:0 0 330px;position:sticky;top:78px}
.vv-rij{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--lijn)}
.vv-rij:last-child{border-bottom:0}
.vv-tekst{flex:1;min-width:0}
.vv-tekst b{display:block;font-size:13px;font-weight:600;line-height:1.3}
.vv-tekst span{display:block;font-size:11.5px;color:var(--ink2);margin-top:2px;font-variant-numeric:tabular-nums}
/* Op een telefoon en een tablet boven de bon: twee kolommen naast elkaar levert
   daar twee kolommen van niks op. */
@media(max-width:1100px){.bb-blad{flex-direction:column-reverse}.bb-zij{flex:1 1 auto;width:100%;position:static}}
.vv-uitleg{margin:0 0 10px;padding:9px 11px;border-radius:9px;background:var(--blauw-l);color:var(--ink);font-size:12.5px;line-height:1.5}

/* ---- betaalkeuze op de offerte: eigen bedrag, eigen termijnen, eigen startdag ---- */
.teken-stap--betaal{border-color:#9fd3cf;background:#f7fdfc}
.teken-stap--betaal .teken-nr{background:#0a7a75;color:#fff}
.bk-uitleg{font-size:14px;line-height:1.6;color:#3a4550;margin:0 0 14px}
.bk-tot,.bk-rest{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;
  border-radius:9px;background:#fff;border:1px solid #dfe6e5;font-size:13.5px;margin:0 0 10px}
.bk-tot b,.bk-rest b{font-variant-numeric:tabular-nums;font-size:16px}
.bk-rest{background:#fffdf5;border-color:#e8dcc0}
.bk-nu input{font-size:19px;font-weight:700;letter-spacing:.01em}
.bk-snelrij{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.bk-snel{flex:1 1 30%;min-height:46px;padding:8px 10px;border:1px solid #cfdedd;border-radius:9px;background:#fff;
  font:inherit;font-size:12.5px;font-weight:700;color:#0a5f5b;cursor:pointer;line-height:1.3}
.bk-snel span{display:block;font-size:13.5px;color:#14171f}
.bk-snel:hover{border-color:#0a7a75}
.bk-min{font-size:12.5px;color:#6b7280;margin:0 0 12px}
.bk-hulp{font-size:12.5px;color:#6b7280;margin:6px 0 10px;line-height:1.5}
.bk-aantal{display:flex;gap:8px;margin:6px 0 4px}
.bk-aantal-knop{width:52px;height:44px;border:1px solid #cfdedd;border-radius:9px;background:#fff;font:inherit;
  font-size:16px;font-weight:700;color:#0a5f5b;cursor:pointer}
.bk-aantal-knop.aan{background:#0a7a75;border-color:#0a7a75;color:#fff}
.bk-termijn{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;padding:10px 12px;margin:0 0 8px;
  background:#fff;border:1px solid #dfe6e5;border-radius:9px}
.bk-termijn-nr{flex:0 0 100%;font-size:12px;font-weight:700;color:#0a5f5b;text-transform:uppercase;letter-spacing:.05em}
.bk-termijn-veld{flex:1 1 130px;display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:#6b7280}
.bk-termijn-veld input{border:1px solid #d6dedd;border-radius:8px;padding:11px;font-size:16px;font-weight:400;
  color:#14171f;font-family:inherit;background:#fff}
.bk-termijn-veld input:focus{outline:none;border-color:#0a7a75;box-shadow:0 0 0 3px rgba(10,122,117,.14)}
.bk-controle{font-size:13px;font-weight:600;margin:4px 0 2px}
.bk-controle--ok{color:#15803d}
.bk-controle--todo{color:#b45309}
.bk-extra{margin:14px 0;padding:12px 14px;border:1px solid #e8d5bc;border-radius:10px;background:#fffaf3}
.bk-extra p{font-size:13px;line-height:1.6;color:#5b5348;margin:6px 0 8px}
.bk-extra ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.7}
.bk-extra-sub{font-size:12.5px;color:#6b7280}
.bk-slot{font-size:12.5px;color:#6b7280;margin:10px 0 0}
.bk-fout{margin:12px 0 0;padding:11px 13px;border-radius:9px;background:#fdeceb;border:1px solid #f0b3ad;
  color:#96271d;font-size:13.5px;font-weight:600}
@media(max-width:560px){
  .bk-snel{flex:1 1 100%}
  .bk-termijn-veld{flex:1 1 100%}
}
/* ---- betaalkeuze: eerst kiezen, dan openklappen ---- */
.bk-keuze{margin:14px 0 10px;display:flex;flex-direction:column;gap:9px}
.bk-kaart{display:block;position:relative;padding:13px 15px 13px 44px;border:1px solid #cfdedd;border-radius:11px;
  background:#fff;cursor:pointer}
.bk-kaart input{position:absolute;left:15px;top:15px;width:19px;height:19px;accent-color:#0a7a75}
.bk-kaart:has(input:checked){border-color:#0a7a75;box-shadow:0 0 0 3px rgba(10,122,117,.13)}
.bk-kaart-kop{display:block;font-size:14.5px;font-weight:700;color:#14171f;margin-bottom:3px}
.bk-kaart-sub{display:block;font-size:12.5px;line-height:1.55;color:#5b6470}
.bk-paneel{margin-top:6px}
.bk-in3-extra{display:flex;align-items:flex-start;gap:9px;margin:10px 0 12px;padding:11px 13px;border:1px solid #dfe6e5;
  border-radius:9px;background:#fff;font-size:13px;line-height:1.5;cursor:pointer}
.bk-in3-extra input{width:19px;height:19px;flex:none;margin-top:1px;accent-color:#0a7a75}
.bk-in3-ok{margin:12px 0;padding:12px 14px;border:1px solid #b6e0c4;border-radius:10px;background:#f2fbf5}
.bk-in3-ok b{display:block;font-size:14px;color:#15803d;margin-bottom:4px}
.bk-in3-ok span{font-size:13px;line-height:1.6;color:#3f5147}
.in3-melding{margin:0 0 14px;padding:12px 14px;border-radius:10px;border:1px solid #c9cfe8;background:#f7f8fd}
.in3-melding b{display:block;font-size:14px;margin-bottom:3px}
.in3-melding span{font-size:13px;line-height:1.55;color:#4a5160}
.in3-melding--ok{border-color:#b6e0c4;background:#f2fbf5}
.in3-melding--ok b{color:#15803d}
.in3-melding--wacht{border-color:#e8d5bc;background:#fffaf3}
.in3-melding--wacht b{color:#b45309}
.in3-melding--nee{border-color:#f0b3ad;background:#fdeceb}
.in3-melding--nee b{color:#96271d}
/* Openklappen ook zonder javascript: de keuze stuurt de panelen rechtstreeks aan. Ging het
   script om wat voor reden dan ook niet af, dan bleef alles dicht en zag de klant alleen twee
   kaarten en verder niets. Deze regels doen hetzelfde werk als het script, maar dan in css. */
.bk-keuze:has(input[value="zelf"]:checked) ~ #bk-paneel-zelf[hidden],
.bk-keuze:has(input[value="in3"]:checked) ~ #bk-paneel-in3[hidden],
.bk-keuze:has(input:checked) ~ #bk-slot[hidden]{display:block}

.pub-akkoord--let{padding:11px 13px;border:1px solid #e8c9a0;border-radius:9px;background:#fffaf3}

.bk-veld-fout{border-color:#e0564b !important;box-shadow:0 0 0 3px rgba(224,86,75,.16) !important}
.bk-min--fout{color:#96271d;font-weight:700}

/* De betaalafspraak wordt apart getekend; dat vak mag niet wegvallen tussen de vinkjes. */
.bk-teken{margin-top:14px}
.bk-bevestig{width:100%;min-height:52px;margin-top:14px;padding:12px 16px;border:0;border-radius:10px;
  background:#0a7a75;color:#fff;font:inherit;font-size:15.5px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px}
.bk-bevestig:disabled{background:#b9c6c5;cursor:not-allowed}
.bk-bevestig span{font-variant-numeric:tabular-nums}
.bk-stand{margin:12px 0;padding:12px 14px;border-radius:10px}
.bk-stand b{display:block;font-size:14.5px;margin-bottom:3px}
.bk-stand span{font-size:13px;line-height:1.6}
.bk-stand--wacht{border:1px solid #e8d5bc;background:#fffaf3;color:#7a5a3c}
.bk-stand--ok{border:1px solid #b6e0c4;background:#f2fbf5;color:#2f5c40}
.bk-betaalknop{display:block;text-align:center;margin:12px 0 6px;padding:14px 16px;border-radius:10px;
  background:#0a7a75;color:#fff;text-decoration:none;font-size:15.5px;font-weight:700}
.bk-betaalknop--klein{display:inline-block;margin:0;padding:9px 13px;font-size:13.5px}
.bk-extra-rij{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 0;border-bottom:1px solid #f0e6d8;font-size:13.5px}
.bk-opnieuw{margin-top:6px;text-align:center}
.bk-opnieuw-knop{background:none;border:0;color:#6b7280;font:inherit;font-size:12.5px;text-decoration:underline;cursor:pointer}

/* Wat er niet in de in3-betaling past: dat moet je zien, voor en na het betalen. */
.bk-restblok{margin:12px 0;padding:13px 15px;border:1px solid #e8c9a0;border-radius:11px;background:#fffaf3}
.bk-restlabel{display:block;font-size:12.5px;color:#7a5a3c;font-weight:700}
.bk-restblok b{display:block;font-size:22px;font-variant-numeric:tabular-nums;color:#96271d;margin:2px 0 6px}
.bk-restuitleg{display:block;font-size:12.5px;line-height:1.55;color:#7a5a3c}
.bk-direct{margin:12px 0;padding:14px 16px;border:2px solid #e0a04b;border-radius:12px;background:#fffaf3}
.bk-direct b{display:block;font-size:17px;color:#96271d;margin-bottom:4px}
.bk-direct span{display:block;font-size:13px;line-height:1.6;color:#7a5a3c}
.bk-direct .bk-betaalknop{margin-top:10px}