/* Views 1: Vandaag, Aanvragen, Pijplijn, plus modal. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.goed{color:var(--groen);font-weight:700}

/* ---------- Vandaag ---------- */
.db-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
@media (max-width:1100px){.db-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.db-kpis>.kaart{min-width:0}
.db-doel{background:var(--nacht);color:#fff;border-color:var(--nacht)}
.db-doel .kpi-l,.db-doel .kpi-s{color:#B8C2D9}
.db-doel .kpi-w{color:var(--geel)}
.db-doel .balk{height:8px;border-radius:999px;background:var(--nacht-3);margin-top:10px;overflow:hidden}
.db-doel .balk i{display:block;height:100%;background:var(--geel);border-radius:999px}
.db-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.db-grid>.kaart{grid-column:span 2;min-width:0}
.db-grid>.db-taken{grid-column:span 4;grid-row:span 2}
.db-grid>.db-rev{grid-column:span 6}
@media (max-width:1100px){.db-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.db-grid>.kaart,.db-grid>.db-taken,.db-grid>.db-rev{grid-column:1/-1;grid-row:auto}}
.takenlijst{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.takenlijst a{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px;border-radius:12px;text-decoration:none}
.takenlijst a:hover{background:var(--geel-3)}
.tk-tekst{min-width:0}
.tk-tekst b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-tekst span{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--grijs)}
@media (max-width:640px){.takenlijst a{grid-template-columns:auto minmax(0,1fr) auto}.takenlijst a .badge{grid-column:2;grid-row:2;justify-self:start}.takenlijst a .knop{grid-column:3;grid-row:1/3}}
.bouwregel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border-radius:12px;text-decoration:none;background:var(--geel-3);margin-bottom:6px}
.bouwregel b{display:block}
.bouwregel span{font-size:13px;color:var(--grijs)}
.ploegstip{width:10px;height:36px;border-radius:5px;background:var(--pl)}
.komend{display:grid;gap:2px}
.komend a{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 6px;border-bottom:1px solid var(--lijn);text-decoration:none;font-size:14px}
.komend a:last-child{border-bottom:0}
.komend .dag{font-weight:800;font-variant-numeric:tabular-nums}
.bronbalken{display:grid;gap:8px}
.bb{display:grid;grid-template-columns:104px minmax(0,1fr) 28px;gap:10px;align-items:center;font-size:13.5px}
.bb span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-bar{height:12px;border-radius:999px;background:var(--stoep);overflow:hidden}
.bb-bar i{display:block;height:100%;border-radius:999px;background:var(--nacht)}
.bb-bar i.ws{background:var(--grijs-2)}
.bb b{text-align:right;font-variant-numeric:tabular-nums}
.db-voet{margin-top:12px;font-size:13.5px;color:var(--grijs)}
.db-voet b{color:var(--nacht)}
.trechtertje{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 0}
.trechtertje>div{display:flex;flex-direction:column;align-items:center;background:var(--stoep);border-radius:14px;padding:14px 8px;flex:1;min-width:0}
.trechtertje>div.ja{background:var(--geel)}
.trechtertje b{font-family:var(--fd);font-weight:800;font-size:28px;line-height:1;font-variant-numeric:tabular-nums}
.trechtertje span{font-size:12.5px;color:var(--grijs);text-align:center}
.trechtertje>div.ja span{color:var(--nacht)}
.trechtertje .ic{color:var(--grijs-2);width:18px}
.db-rev{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
.db-rev .kaart-kop{grid-column:1/-1;margin-bottom:0}
@media (max-width:760px){.db-rev{grid-template-columns:minmax(0,1fr)}}
.db-rev blockquote{margin:0;padding:14px 16px;border-radius:12px;background:var(--wolk);border:1px solid var(--lijn)}
.db-rev p{margin:6px 0}
.db-rev cite{font-style:normal;font-size:12.5px;color:var(--grijs)}
.sterren{color:#E4A400;letter-spacing:1px;font-size:15px}
.sterren span{color:var(--lijn-2)}

/* ---------- Aanvragen ---------- */
.ib-pkop{margin-bottom:14px}
.ib{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:16px;align-items:start}
.ib-lijst{background:#fff;border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;max-height:calc(100vh - 210px);overflow-y:auto;position:sticky;top:84px}
.ib-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:13px 14px;border-bottom:1px solid var(--lijn);text-decoration:none;position:relative}
.ib-item:hover{background:var(--wolk)}
.ib-item.actief{background:var(--geel-3);box-shadow:inset 4px 0 0 var(--geel)}
.ib-item.ongelezen b{font-weight:800}
.ib-item.ongelezen::after{content:"";position:absolute;right:14px;top:18px;width:8px;height:8px;border-radius:50%;background:var(--rood)}
.ib-mid{min-width:0;display:grid;gap:4px}
.ib-r1{display:flex;justify-content:space-between;gap:8px;padding-right:14px}
.ib-r1 b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.ib-tijd{font-size:12px;color:var(--grijs);white-space:nowrap}
.ib-r2{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--grijs);flex-wrap:wrap}
.ib-r3{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ib-w{font-weight:800;font-variant-numeric:tabular-nums;font-size:13px}
.ib-leeg{display:grid;place-items:center;text-align:center;gap:8px;padding:60px 20px;color:var(--grijs)}
.ib-leeg .ic{width:36px;height:36px}
.ib-leeg h2{color:var(--nacht);font-size:22px}
.ib-terug{display:none;align-items:center;gap:6px;text-decoration:none;font-weight:700;margin-bottom:10px;color:var(--grijs)}
.ib-kop{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ib-kop .av{width:48px;height:48px;font-size:16px}
.ib-kop-t{flex:1;min-width:0}
.ib-kop-t h2{font-size:clamp(22px,2.6vw,28px)}
.ib-kop-t p{display:flex;align-items:center;gap:5px;color:var(--grijs);font-size:14px}
.ib-kop-t p .ic{width:16px;height:16px}
.ib-kop-a{display:flex;gap:8px;flex-wrap:wrap}
.ib-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0}
.ib-meta .badge .ic{width:13px;height:13px}
.ib-ontv{font-size:12.5px}
.ib-tabs{margin-bottom:14px}
.ib-aanvraag{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ib-aanvraag .ib-fotos{grid-column:1/-1}
@media (max-width:1250px){.ib-aanvraag{grid-template-columns:minmax(0,1fr)}}
.specs{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr);gap:8px 14px;margin:0;font-size:14.5px}
.specs dt{color:var(--grijs);font-weight:600}
.specs dd{margin:0;min-width:0;overflow-wrap:anywhere}
.ib-quote{margin-top:14px;padding:12px 14px;background:var(--wolk);border-radius:12px;font-style:italic;color:#34405A}
.ib-snel{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.fotorij{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.fotorij figure{margin:0;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--stoep)}
.fotorij img{width:100%;height:100%;object-fit:cover}
.fotorij figcaption{position:absolute;right:8px;bottom:8px;background:rgba(19,33,60,.75);color:#fff;font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px}
.ib-chat{display:grid;gap:12px}
.chat-stroom{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow-y:auto;padding:4px 2px;background:linear-gradient(var(--stoep),var(--stoep)) padding-box;border-radius:12px;padding:14px}
.bericht{max-width:78%;padding:10px 13px;border-radius:14px;background:#fff;align-self:flex-start;border:1px solid var(--lijn)}
.bericht.chris{align-self:flex-end;background:#DCF8C6;border-color:#C7EBAE}
.bericht.auto{align-self:flex-end;background:var(--hemel);border-color:#BFDDF0}
.bericht p{white-space:pre-wrap}
.bericht span{display:block;font-size:11.5px;color:var(--grijs);margin-top:4px;text-align:right}
.chat-snel{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.chat-snel .knop{font-weight:600}
.chat-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.chat-in textarea{border:1.5px solid var(--lijn-2);border-radius:12px;padding:10px 12px;resize:vertical;min-height:46px;width:100%}
.chat-in textarea:focus{outline:0;border-color:var(--nacht)}
.ib-geen-off{display:grid;gap:10px;justify-items:start;padding:28px}
.ib-geen-off h2{font-size:22px}
.off-tabel{overflow-x:auto;border:1px solid var(--lijn);border-radius:12px}
.off-tabel table{width:100%;border-collapse:collapse;min-width:640px;font-size:14px}
.off-tabel th,.off-tabel td{padding:6px 8px;border-bottom:1px solid var(--lijn);text-align:left}
.off-tabel th{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--grijs);background:var(--wolk)}
.off-tabel .r{text-align:right}
.off-tabel input{width:100%;border:1px solid transparent;border-radius:8px;padding:6px 8px;background:transparent}
.off-tabel input:hover{border-color:var(--lijn-2)}
.off-tabel input:focus{outline:0;border-color:var(--nacht);background:#fff}
.off-tabel input.num{text-align:right;font-variant-numeric:tabular-nums;max-width:92px;margin-left:auto;display:block}
.off-tabel .weg{border:0;background:none;color:var(--grijs-2);cursor:pointer;padding:4px;border-radius:6px}
.off-tabel .weg:hover{color:var(--rood);background:var(--rood-2)}
.off-tabel .weg .ic{width:16px;height:16px}
.off-voet{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-top:12px}
.off-tot{display:grid;grid-template-columns:auto auto;gap:4px 24px;margin:0;font-size:14.5px}
.off-tot dt{color:var(--grijs)}
.off-tot dd{margin:0;text-align:right}
.off-tot .t{font-family:var(--fd);font-weight:800;font-size:20px;color:var(--nacht)}
.off-acties{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px;border-top:1px solid var(--lijn);padding-top:14px}
.nieuw-form{max-width:760px}
@media (max-width:900px){
  .ib{grid-template-columns:minmax(0,1fr)}
  .ib-lijst{position:static;max-height:none}
  .ib.heeft-detail .ib-lijst{display:none}
  .ib:not(.heeft-detail) .ib-rechts{display:none}
  .ib-terug{display:inline-flex}
  .ib.heeft-detail ~ *{display:none}
  [data-view="inbox"] .ib-pkop:has(+ .ib.heeft-detail){display:none}
  .bericht{max-width:88%}
}

/* modal: offerte zoals de klant hem ziet */
.modal{position:fixed;inset:0;z-index:80;background:rgba(19,33,60,.55);display:grid;place-items:center;padding:16px;overflow-y:auto}
.modal-in{background:#fff;border-radius:20px;max-width:640px;width:100%;padding:clamp(20px,4vw,36px);position:relative;max-height:calc(100vh - 32px);overflow-y:auto}
.modal-x{position:absolute;top:12px;right:12px;border:0;background:var(--stoep);border-radius:50%;width:36px;height:36px;display:grid;place-items:center;cursor:pointer}
.doc-kop{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:3px solid var(--geel);padding-bottom:14px;margin-bottom:18px;padding-right:40px}
.doc-kop div{text-align:right;font-size:13px}
.doc-kop b{display:block}
.off-doc h2{font-size:26px}
.doc-vinks{list-style:none;margin:14px 0;padding:0;display:flex;gap:6px 16px;flex-wrap:wrap;font-size:13.5px;font-weight:700}
.doc-vinks li{display:flex;align-items:center;gap:5px}
.doc-vinks .ic{color:var(--rood);width:18px;height:18px}
.doc-tabel{width:100%;border-collapse:collapse;font-size:14.5px}
.doc-tabel td{padding:9px 0;border-bottom:1px solid var(--lijn);vertical-align:top}
.doc-tabel small{display:block;color:var(--grijs);font-size:12.5px}
.doc-tabel .r{text-align:right}
.doc-tabel .sub td{color:var(--grijs);border-bottom:0;padding:4px 0}
.doc-tabel .tot td{font-family:var(--fd);font-weight:800;font-size:20px;border-top:2px solid var(--nacht);border-bottom:0;padding-top:10px}
.doc-ja{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px}
.doc-voet{margin-top:20px;font-size:11.5px;color:var(--grijs);border-top:1px solid var(--lijn);padding-top:10px}

/* ---------- Pijplijn ---------- */
.pl-som{display:flex;gap:24px;flex-wrap:wrap}
.pl-som .kpi-w{font-size:24px}
.pl-filter{margin-bottom:14px}
.pl-bord{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:12px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x proximity;min-height:60vh}
.pl-kol{background:var(--stoep);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0;scroll-snap-align:start;transition:background .15s}
.pl-kol.over{background:var(--geel-2)}
.pl-kol header{display:flex;align-items:center;gap:7px;padding:4px 4px 6px}
.pl-kol h2{font-size:14px;font-weight:800}
.pl-kol .dot{width:10px;height:10px;border-radius:50%;padding:0}
.pl-n{font-size:12px;font-weight:800;background:#fff;border-radius:999px;padding:1px 8px}
.pl-w{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--grijs)}
.pl-lijst{display:grid;gap:8px;align-content:start}
.pl-leeg{font-size:13px;color:var(--grijs-2);text-align:center;padding:16px 0;border:1.5px dashed var(--lijn-2);border-radius:12px}
.pk{background:#fff;border-radius:12px;border:1px solid var(--lijn);border-left:5px solid var(--pk);position:relative;cursor:grab}
.pk.sleept{opacity:.5}
.pk-link{display:grid;gap:6px;padding:11px 40px 11px 12px;text-decoration:none}
.pk-r1{display:flex;justify-content:space-between;gap:8px}
.pk-r1 b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-w{font-weight:800;font-size:13px}
.pk-r2{display:flex;gap:8px;font-size:12.5px;color:var(--grijs);flex-wrap:wrap}
.pk-r3{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:12px}
.pk-plan{display:inline-flex;align-items:center;gap:4px;font-weight:700}
.pk-plan .ic{width:14px;height:14px}
.pk-volgende{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:1px solid var(--lijn-2);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--grijs)}
.pk-volgende:hover{background:var(--nacht);color:var(--geel);border-color:var(--nacht)}
.pk-volgende .ic{width:16px;height:16px}
@media (max-width:900px){.pl-bord{grid-auto-columns:82%;min-height:0}.pl-som{gap:16px}.pl-som .kpi-w{font-size:20px}}