:root {
  --papier: #f4f5f3;
  --wit: #ffffff;
  --inkt: #1c2430;
  --grijs: #5c6470;
  --lijn: #d9dcd8;
  --accent: #1d63d1;      /* installatieblauw */
  --accent-donker: #144a9f;
  --accent-licht: #e4edfb;        /* vulling van knoppen */
  --accent-licht-hover: #d3e3f9;
  --accent-rand: #a9c5ee;
  --accent-tint: #eff4fc;         /* zijbalk en kaartkoppen */
  /* Een project met een eigen kleur overschrijft de --accent-variabelen
     (portaal/kleur.py, in de <head> van portaal/basis.html). */
  --waarschuwing: #b3540e;
  --ok: #2e7d32;
  --fout: #b3261e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--papier);
  color: var(--inkt);
  font-size: 15px;
  line-height: 1.45;
  background-image: url('achtergrond_1.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbalk {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--accent); color: #fff; padding: .6rem 1.25rem;
}
.topbalk .merk { color: #fff; font-weight: 600; display: flex; align-items: center; gap: .55rem; }
.topbalk .merk:hover { text-decoration: none; }
.merk-logo {
  width: 28px; height: 28px; border-radius: 5px; display: block;
}
/* Woordmerk naast het icoon. Lager dan het icoon, zodat de topbalk even hoog
   blijft; de PNG heeft een transparante achtergrond en staat dus los van de
   kleur van de balk. */
.merk-woord { height: 20px; width: auto; display: block; }
.topbalk nav { display: flex; align-items: center; gap: .75rem; }
.gebruiker { color: rgba(255, 255, 255, .8); font-size: .85rem; }
.inline-form { display: inline; }

.inhoud { max-width: 1100px; margin: 1.5rem auto 3rem; padding: 0 1.25rem; }
.inhoud-breed { max-width: none; margin: 0; padding: 0; }

.meldingen { max-width: 1100px; margin: 1rem auto 0; padding: 0 1.25rem; }
.melding { padding: .55rem .9rem; border-radius: 6px; margin-bottom: .5rem; background: #e8f0fe; border: 1px solid #c3d6f7; }
.melding-success { background: #e9f4ea; border-color: #c4e0c6; }
.melding-warning { background: #fdf1e4; border-color: #f2d9bb; }
.melding-error { background: #fdecea; border-color: #f4c7c3; }
/* na een formulier op dezelfde plek blijven: meldingen zwevend in beeld (klik = weg) */
.meldingen-zwevend {
  position: fixed; top: 1rem; right: 1rem; left: auto; z-index: 1000;
  width: min(28rem, calc(100vw - 2rem)); margin: 0; padding: 0;
  cursor: pointer; transition: opacity .5s;
}
.meldingen-zwevend .melding { box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.meldingen-weg { opacity: 0; }

.kop-rij { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.kop-rij .sub { color: var(--grijs); }
.kop-met-navigatie { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.kavel-navigatie { display: flex; gap: .35rem; }

.kaart {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px;
  padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
/* Kaartkop met een tint van de (project)kleur: de eerste kop van de kaart
   loopt tot de randen door. */
.kaart > h2:first-child, .kaart > .kop-rij:first-child, details.kaart > summary {
  margin: -1rem -1.25rem .9rem; padding: .65rem 1.25rem;
  background: var(--accent-tint); border-bottom: 1px solid var(--accent-rand);
  border-radius: 7px 7px 0 0;
}
.kaart > .kop-rij:first-child { align-items: center; }
.kaart > .kop-rij:first-child h2 { margin: 0; }
details.kaart:not([open]) > summary { margin-bottom: -1rem; border-bottom: none; border-radius: 7px; }

/* Inklapbare kaarten (projectpagina) */
details.kaart > summary {
  cursor: pointer; user-select: none; list-style: none;
  display: flex; align-items: center; gap: .45rem;
}
details.kaart > summary::-webkit-details-marker { display: none; }
details.kaart > summary::before {
  content: "▸"; color: var(--grijs); font-size: .8rem;
  display: inline-block; transition: transform .15s;
}
details.kaart[open] > summary::before { transform: rotate(90deg); }
details.kaart > summary h2 { margin: 0; display: inline; }
details.kaart .kaart-inhoud { margin-top: .75rem; }
.teller { font-weight: 400; font-size: .8rem; color: var(--grijs); }

details.subgroep { margin: .5rem 0; border: 1px solid var(--lijn); border-radius: 6px; padding: .4rem .7rem; }
details.subgroep > summary {
  cursor: pointer; user-select: none; list-style: none;
  display: flex; align-items: center; gap: .4rem;
}
details.subgroep > summary::-webkit-details-marker { display: none; }
details.subgroep > summary::before {
  content: "▸"; color: var(--grijs); font-size: .7rem;
  display: inline-block; transition: transform .15s;
}
details.subgroep[open] > summary::before { transform: rotate(90deg); }
details.subgroep > summary h3 { margin: 0; display: inline; font-size: .95rem; }
details.subgroep .subgroep-inhoud { margin-top: .5rem; }

/* Bulk-acties optielijst */
.bulk-balk {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .45rem .6rem; margin-bottom: .5rem;
  background: #f4f6f9; border: 1px solid var(--lijn); border-radius: 6px;
}
.bulk-balk input[type="color"] { width: 2.2rem; height: 1.7rem; padding: 0; border: 1px solid var(--lijn); border-radius: 4px; cursor: pointer; }
tr.rij-inactief td { color: var(--grijs); }
tr.rij-inactief .symbool-chip { opacity: .45; }

table.lijst { width: 100%; border-collapse: collapse; }
table.lijst th, table.lijst td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
table.lijst th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--grijs); }
table.lijst tr:last-child td { border-bottom: none; }
td.getal, th.getal { text-align: right; }
table.lijst th a.sorteer { color: inherit; text-decoration: none; }
table.lijst th a.sorteer:hover { color: var(--accent); }
table.lijst th a.sorteer-actief { color: var(--accent); }

/* Knoppen: één stijl voor alle actieknoppen (ook de knoppenbalk boven een
   plattegrond): lichtblauwe vulling met blauwe rand. Alleen 'gevaar' (rood) en
   'stil' (op de donkere topbalk) wijken bewust af. De klasse .knop-rand staat
   nog in de sjablonen maar heeft geen eigen opmaak meer. */
.knop, .tab {
  display: inline-block; border: 1px solid var(--accent-rand);
  background: var(--accent-licht); color: var(--accent-donker);
  border-radius: 6px; cursor: pointer;
}
.knop { padding: .45rem .9rem; font-size: .9rem; }
.tab { padding: .3rem .7rem; font-size: .85rem; }
.knop:hover, .tab:hover {
  background: var(--accent-licht-hover); border-color: var(--accent);
  color: var(--accent-donker); text-decoration: none;
}
.knop-stil { background: transparent; border-color: transparent; color: rgba(255, 255, 255, .82); padding: .3rem .5rem; }
.knop-stil:hover { color: #fff; background: transparent; border-color: transparent; }
.knop-klein { padding: .25rem .6rem; font-size: .8rem; }
.knop-gevaar { border-color: #e3aca7; background: #fdecea; color: var(--fout); }
.knop-gevaar:hover { background: #f8dad6; border-color: var(--fout); color: var(--fout); }

.status { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.status-open { background: #e9f4ea; color: var(--ok); }
.status-definitief { background: #fdf1e4; color: var(--waarschuwing); }
/* Deelkeuzes (status per categorie) */
.status-ingediend { background: #e7effc; color: #1d4fa8; }
.status-akkoord { background: #f3e9fb; color: #6b2fa0; }
.status-deels { background: #fdf1e4; color: var(--waarschuwing); }

form.regel { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
form.regel .veld { display: flex; flex-direction: column; gap: .2rem; }
form.regel label, form.blok label { font-size: .78rem; color: var(--grijs); }
.zoekveld { min-width: 15rem; }
input[type=text], input[type=number], input[type=file],
input[type=search], input[type=email], input[type=password], select {
  padding: .4rem .55rem; border: 1px solid var(--lijn); border-radius: 6px; font-size: .9rem; background: #fff;
}
input[type=color] { padding: 0; border: 1px solid var(--lijn); border-radius: 6px; width: 3rem; height: 2.1rem; }
form.blok .veld { margin-bottom: .8rem; display: flex; flex-direction: column; gap: .2rem; max-width: 30rem; }
.hulp { font-size: .78rem; color: var(--grijs); }
.foutlijst { color: var(--fout); font-size: .85rem; margin: .2rem 0 0; padding-left: 1.1rem; }

.symbool-chip {
  display: inline-block; min-width: 2.2rem; text-align: center; padding: .1rem .35rem;
  border-radius: 4px; color: #fff; font-size: .75rem; font-weight: 700;
}

/* ---------- editor ---------- */
.editor { display: grid; grid-template-columns: 300px 1fr 260px; height: calc(100vh - 52px); }
.paneel { background: var(--wit); border-right: 1px solid var(--lijn); overflow-y: auto; padding: .9rem; }
.paneel-rechts { border-right: none; border-left: 1px solid var(--lijn); }
.paneel h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--grijs); }
/* inklapbare secties in het zijpaneel (3D-scherm) */
details.paneel-sectie > summary {
  cursor: pointer; user-select: none; list-style: none;
  display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem;
}
details.paneel-sectie:not([open]) > summary { margin-bottom: 0; }
details.paneel-sectie > summary::-webkit-details-marker { display: none; }
details.paneel-sectie > summary::before {
  content: "▸"; color: var(--grijs); font-size: .7rem;
  display: inline-block; transition: transform .15s;
}
details.paneel-sectie[open] > summary::before { transform: rotate(90deg); }
details.paneel-sectie > summary h2 { margin: 0; }
details.paneel-sectie .teller { text-transform: none; letter-spacing: 0; }

.optie-groep { margin-bottom: .6rem; }
/* Categoriekoppen als duidelijke hoofdstukken (#39). */
.optie-groep > summary.groep-naam {
  list-style: none; cursor: pointer; user-select: none;
  font-size: .9rem; font-weight: 700; color: var(--accent-donker);
  margin: 0 0 .35rem; padding: .5rem .6rem;
  background: var(--accent-tint); border: 1px solid var(--accent-rand); border-left: 4px solid var(--accent);
  border-radius: 6px; display: flex; align-items: center; gap: .4rem;
}
.optie-groep > summary.groep-naam:hover { background: var(--accent-licht); }
.optie-groep > summary .groep-aantal {
  margin-left: auto; font-size: .75rem; font-weight: 600; color: var(--accent-donker);
  background: var(--wit); border: 1px solid var(--accent-rand); border-radius: 999px; padding: 0 .45rem;
}
.optie-groep > summary.groep-naam::-webkit-details-marker { display: none; }
.optie-groep > summary.groep-naam::before {
  content: "▸"; font-size: .65rem; display: inline-block; transition: transform .15s;
}
.optie-groep[open] > summary.groep-naam::before { transform: rotate(90deg); }
.optie-knop {
  display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--lijn); border-radius: 6px; padding: .4rem .5rem;
  margin-bottom: .35rem; cursor: pointer; font-size: .85rem;
}
.optie-knop:hover { border-color: var(--accent); }
.optie-knop.actief { border-color: var(--accent); background: var(--accent-licht); box-shadow: 0 0 0 1px var(--accent) inset; }
.optie-knop .prijs { margin-left: auto; color: var(--grijs); white-space: nowrap; font-size: .78rem; }
.optie-zoek { width: 100%; box-sizing: border-box; margin-bottom: .4rem; }
.optie-tekst { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.optie-code { font-weight: 700; font-size: .82rem; }
.optie-naam { font-size: .75rem; color: var(--grijs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tekengebied { position: relative; overflow: auto; background: #8d949e; }
.canvas-houder { position: relative; margin: 1.25rem auto; width: fit-content; box-shadow: 0 2px 12px rgba(0,0,0,.35); }
.canvas-houder canvas { display: block; background: #fff; }
.markerlaag { position: absolute; inset: 0; }
.markerlaag.plaatsen { cursor: crosshair; }

.marker {
  position: absolute; transform: translate(-50%, -50%);
  color: #fff; font-size: 10.5px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
  cursor: grab; user-select: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.9);
  /* Iets kleiner en doorzichtig, zodat de tekening bij veel opties leesbaar blijft. */
  opacity: .9;
}
.marker:hover, .marker.geselecteerd, .marker.sub-van-geselecteerd { opacity: 1; z-index: 3; }
.marker.geselecteerd { outline: 2px solid var(--inkt); outline-offset: 1px; }
.marker.vast { cursor: default; }
/* Suboptie: stippelrand; subopties van de geselecteerde hoofdoptie extra zichtbaar. */
.marker.suboptie { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--hoofdkleur, #5c6470); }
.marker.sub-van-geselecteerd { outline: 2px dashed var(--inkt); outline-offset: 3px; }
.offerte-label {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  background: rgba(255,255,255,.95); border: 2px solid; border-radius: 4px;
  padding: 2px 7px; font-size: 11px; font-weight: 700; color: var(--inkt);
  cursor: grab; user-select: none; box-shadow: 0 1px 3px rgba(0,0,0,.3); z-index: 2;
}
.offerte-label.vast { cursor: default; }
.offerte-label.geselecteerd { outline: 2px solid var(--inkt); outline-offset: 1px; }
.sub-modus {
  margin: .4rem 0 .6rem; padding: .5rem .6rem; border-radius: 6px; font-size: .85rem;
  background: #fff4d6; border: 1px solid #f0d58a; color: #6b4e00;
}
.sub-modus .knop { margin-top: .35rem; }
.detail-subopties { margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--lijn); }
.detail-subopties ul { margin: .2rem 0 .4rem; padding-left: 1.1rem; font-size: .85rem; }
.rij-hoofdoptie td { font-weight: 600; border-bottom: none !important; }
.rij-suboptie td { border-bottom: none !important; font-size: .9rem; }
.rij-suboptie td:nth-child(2) { padding-left: 1.4rem; color: var(--grijs); }
.rij-groepstotaal td { font-style: italic; color: var(--grijs); font-size: .88rem; }
.totaal-sub td:first-child { padding-left: .9rem !important; color: var(--grijs); }

/* Muur-plaatsingen: getekende lijn met een chip op het midden en sleepbare
   eindpunten. De lijn draait om zijn beginpunt (transform-origin links). */
.muur-lijn {
  position: absolute; height: 6px; margin-top: -3px; border-radius: 3px;
  transform-origin: 0 50%; cursor: grab;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.9), 0 1px 3px rgba(0,0,0,.35);
}
.muur-lijn.geselecteerd { outline: 2px solid var(--inkt); outline-offset: 1px; }
.muur-lijn.vast, .muur-punt.vast { cursor: default; }
.muur-punt {
  position: absolute; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--inkt);
  cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,.35);
}

/* Referentielijn bij "Maat uit lijn": de aangeklikte PDF-lijn wordt gemarkeerd */
.ref-lijn {
  position: absolute; height: 0; border-top: 3px dashed #b3261e;
  transform-origin: 0 0; pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.9));
}

.editor-balk {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .6rem;
  background: var(--wit); border-bottom: 1px solid var(--lijn); padding: .5rem .9rem; flex-wrap: wrap;
}
.tab.actief { background: var(--inkt); color: #fff; border-color: var(--inkt); }
.tab.actief:hover { background: var(--inkt); color: #fff; border-color: var(--inkt); }
.editor-balk .rek { flex: 1; }
/* Alles in de balk even hoog en even groot, of het nu een tab, knop of link is. */
.editor-balk .knop, .editor-balk .tab { padding: .3rem .7rem; font-size: .85rem; line-height: 1.35; }
/* Knopgroepjes in de balk: eigen tussenruimte, want de balk zet alleen ruimte
   tussen de groepen. Alleen de +/- knoppen zijn vierkant; 'Passend' mag zo
   breed worden als zijn tekst (anders liep die over de knop ernaast heen). */
#tabs, .zoomknoppen, #pagina-nav { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.zoomknoppen button { min-width: 2rem; text-align: center; }
#zoom-uit, #zoom-in { width: 2rem; padding-left: 0; padding-right: 0; }

.telstrook { border-top: 1px solid var(--lijn); margin-top: .8rem; padding-top: .8rem; }
.telstrook table { width: 100%; font-size: .82rem; border-collapse: collapse; }
.telstrook td { padding: .18rem 0; }
.telstrook .totaalregel td { border-top: 1px solid var(--lijn); font-weight: 700; padding-top: .4rem; }

.detailkaart { border: 1px solid var(--lijn); border-radius: 6px; padding: .6rem; font-size: .85rem; }
.detailkaart textarea { width: 100%; border: 1px solid var(--lijn); border-radius: 6px; padding: .35rem; font: inherit; font-size: .85rem; resize: vertical; }
.detailkaart .acties { display: flex; gap: .4rem; margin-top: .5rem; }
.leegtekst { color: var(--grijs); font-size: .85rem; }

.slotbanner { background: #fdf1e4; border: 1px solid #f2d9bb; color: var(--waarschuwing); padding: .45rem .9rem; font-size: .85rem; }
.slotbanner-categorieen { background: #f6f7f9; border-color: #e1e4e8; color: inherit; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.categorie-status { white-space: nowrap; }

/* login */
/* Achter de inlogkaart ligt een donkerblauw vlak met het logo (tekening plus
   naam). Het vlak is breder dan de kaart en steekt er bovenuit, zodat het
   formulier er als het ware overheen ligt. De kaart begint pas onder de naam
   in het logo: logo 1.25rem + 10rem + 1.25rem ruimte = 12.5rem boven de kaart. */
.login-doos {
  position: relative; max-width: 22rem; margin: 14.5rem auto 5rem;
  box-shadow: 0 10px 28px rgba(6, 29, 70, .28);
}
.login-doos::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; transform: translateX(-50%); top: -12.5rem;
  width: 26rem; max-width: calc(100vw - 2rem); height: 16rem;
  background: #061d46 url('kopersopties-beeld.webp') center 1.25rem / auto 10rem no-repeat;
  border-radius: 12px; box-shadow: 0 14px 30px rgba(6, 29, 70, .3);
}

@media (max-width: 900px) {
  .editor { grid-template-columns: 240px 1fr; }
  .paneel-rechts { display: none; }
}

/* pannen */
.tekengebied { cursor: grab; }
.tekengebied.pannen { cursor: grabbing; }
.tekengebied.pannen .markerlaag, .markerlaag.pan-modus { cursor: grab !important; }

/* Editorpagina: vaste schermhoogte, alleen het tekengebied scrolt/pant.
   De optie- en totalenpanelen en de knoppenbalk blijven zo altijd in beeld. */
body.pagina-editor { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
body.pagina-editor .topbalk, body.pagina-editor .meldingen, body.pagina-editor .slotbanner { flex: 0 0 auto; }
body.pagina-editor main { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
body.pagina-editor .slotbanner + .editor, body.pagina-editor .editor { flex: 1 1 0; min-height: 0; height: auto; }
.editor > * { min-width: 0; min-height: 0; }
.editor section { min-height: 0; }
.tekengebied { flex: 1 1 0; min-height: 0; }

/* kalibratiepunten (3D-koppeling) */
.kal-punt {
  position: absolute; transform: translate(-50%, -50%);
  width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid #b3261e; background: rgba(255,255,255,.75);
  color: #b3261e; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.detailkaart input[type=number] { padding: .3rem .45rem; border: 1px solid var(--lijn); border-radius: 6px; font-size: .85rem; }
.detailkaart select { max-width: 100%; padding: .3rem .45rem; border: 1px solid var(--lijn); border-radius: 6px; font-size: .85rem; }

/* snap-indicator bij kalibreren: kruisje op het dichtstbijzijnde snijpunt/eindpunt van tekeninglijnen */
.snap-punt { position: absolute; width: 16px; height: 16px; transform: translate(-50%, -50%); pointer-events: none; z-index: 3; }
.snap-punt::before, .snap-punt::after { content: ""; position: absolute; background: #0a7d3b; box-shadow: 0 0 0 1px rgba(255,255,255,.9); }
.snap-punt::before { left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px; }
.snap-punt::after { top: 50%; left: 0; height: 2px; width: 100%; margin-top: -1px; }

/* notities: pijl (gedraaide lijn met pijlpunt), tekstlabel en kader */
.notitie-knoppen { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .5rem; }
.notitie-knoppen .tab.actief { background: #c2571a; border-color: #c2571a; }
.notitie-label {
  position: absolute; transform: translate(-50%, -50%); max-width: 16rem;
  background: rgba(255,255,255,.95); border: 1.5px solid; border-radius: 4px;
  padding: 2px 6px; font-size: 11px; font-weight: 600; line-height: 1.25;
  cursor: grab; user-select: none; white-space: pre-wrap; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.notitie-label em { font-weight: 400; color: var(--grijs); }
.notitie-label-pijl { transform: translate(-50%, -140%); }
.notitie-label-kader { transform: translate(0, -115%); }
.notitie-label.vast, .notitie-pijl.vast { cursor: default; }
.notitie-label.geselecteerd, .notitie-pijl.geselecteerd, .notitie-kader.geselecteerd { outline: 2px solid var(--inkt); outline-offset: 1px; }
.notitie-koppel { display: inline-block; color: #fff; font-size: 9px; padding: 0 4px; border-radius: 3px; margin-left: 3px; vertical-align: middle; }
.notitie-pijl {
  position: absolute; height: 4px; margin-top: -2px; border-radius: 2px; transform-origin: 0 50%;
  cursor: grab; box-shadow: 0 0 0 1.5px rgba(255,255,255,.9);
}
.notitie-pijl::after {
  content: ""; position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
  border-left: 13px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.9));
}
.notitie-kader {
  position: absolute; border: 2.5px dashed; border-radius: 3px; pointer-events: none;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.7) inset;
}

.versie { color: #7f8896; font-size: .72rem; font-weight: 400; margin-left: .15rem; }

/* 3D-viewer */
.viewer3d { display: grid; grid-template-columns: 300px 1fr; flex: 1 1 0; min-height: 0; }
body.pagina-editor .viewer3d { height: auto; }
.viewer3d section { background: #8d949e; }
#viewer-canvas { width: 100%; height: 100%; display: block; }
.viewer-status {
  position: absolute; top: .75rem; left: 50%; transform: translateX(-50%); z-index: 5;
  background: #fff; border: 1px solid var(--lijn); border-radius: 6px;
  padding: .4rem .9rem; font-size: .85rem; box-shadow: 0 2px 8px rgba(0,0,0,.25); max-width: 80%;
}
.info-3d { position: absolute; right: .75rem; top: .75rem; z-index: 5; background: #fff; max-width: 20rem; box-shadow: 0 2px 8px rgba(0,0,0,.25); }

/* Helppagina: inhoudsopgave links, hoofdstuk (gerenderde markdown) rechts */
.help-indeling { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.2rem; align-items: start; }
/* Eigen witte vlak: anders staat de lijst direct op de projectfoto en is hij onleesbaar. */
.help-inhoud {
  display: flex; flex-direction: column; gap: .1rem; position: sticky; top: 1rem;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px; padding: .4rem;
}
.help-inhoud a { padding: .4rem .7rem; border-radius: 6px; color: var(--inkt); }
.help-inhoud a:hover { background: var(--accent-licht); text-decoration: none; }
.help-inhoud a.actief { background: var(--accent-licht); color: var(--accent-donker); font-weight: 600; }
.help-bladeren { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: .8rem; border-top: 1px solid var(--lijn); }
@media (max-width: 800px) {
  .help-indeling { grid-template-columns: 1fr; }
  .help-inhoud { position: static; }
}
.help-tekst { max-width: 52rem; line-height: 1.55; }
.help-tekst h1 { font-size: 1.25rem; }
.help-tekst h2 { font-size: 1.1rem; margin-top: 1.5rem; }
.help-tekst li { margin-bottom: .35rem; }
.help-tekst li > ul { margin-top: .35rem; }
.help-tekst code { background: #f4f6f9; border-radius: 3px; padding: 0 .25rem; font-size: .88em; }
.help-tekst pre { background: #f4f6f9; border: 1px solid var(--lijn); border-radius: 6px; padding: .6rem .8rem; overflow-x: auto; }
.help-tekst pre code { background: none; padding: 0; }
.help-video { display: block; width: 100%; max-width: 52rem; border-radius: 6px; background: #000; margin-bottom: 1rem; }

/* ---------- kopersportaal ---------- */
input[type=date] { padding: .35rem .5rem; border: 1px solid var(--lijn); border-radius: 6px; font-size: .9rem; background: #fff; }
.portaal-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.status-verkocht { background: #e9f4ea; color: var(--ok); }
.status-te-koop { background: #eef0f3; color: var(--grijs); }
button.status { border: none; cursor: pointer; font-family: inherit; }
.tabel-scroll { overflow-x: auto; }
.fase-typen { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; }
.fase-type { border: 1px solid var(--lijn); border-radius: 8px; padding: .6rem; }
.fase-type-kop { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .3rem; flex-wrap: wrap; }
.fase-type table.lijst td { padding: .25rem .4rem; }
table.kruisjeslijst td, table.kruisjeslijst th { padding: .3rem .4rem; white-space: nowrap; }
table.kruisjeslijst th.kruis-kop { vertical-align: bottom; height: 9rem; }
table.kruisjeslijst th.kruis-kop span { writing-mode: vertical-rl; transform: rotate(180deg); text-transform: none; letter-spacing: 0; }
table.kruisjeslijst tfoot td { border-top: 2px solid var(--lijn); }
td.kruis { text-align: center; }
.dl {
  display: inline-block; min-width: 3.4rem; padding: .15rem .3rem; border-radius: 4px; font-size: .78rem;
  text-align: center; border: 1px solid transparent; font-family: inherit; background: #f5f6f8; color: var(--grijs);
}
button.dl { cursor: pointer; }
button.dl:hover { border-color: var(--accent); }
.dl-klaar { background: #d9efdb; color: var(--ok); font-weight: 600; }
.dl-te-laat { background: #f8d7d3; color: var(--fout); font-weight: 600; }
.dl-binnenkort { background: #fce8cf; color: var(--waarschuwing); }
.dl-open { background: #fff; border-color: var(--lijn); color: var(--inkt); }
.dl-geen { background: transparent; }
.dl-tekst-te-laat { color: var(--fout); font-weight: 600; }
.deadline-legenda { display: inline-flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.deadline-legenda .dl { min-width: 0; padding: .15rem .45rem; }

.export-archief { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--grijs); white-space: nowrap; }

/* Afvinklijst (kaveloverzicht) en lijsten om te verspreiden */
.afvinklijst-opties { list-style: none; margin: 0 0 .5rem; padding: 0; columns: 2 22rem; }
.afvinklijst-opties li { break-inside: avoid; padding: .15rem 0; }
.afvinklijst-opties label { display: flex; gap: .4rem; align-items: baseline; font-size: .88rem; color: inherit; }
.lijsten-rij { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
form.meterkastlijst { display: flex; flex-direction: column; gap: .25rem; }
form.meterkastlijst label { font-size: .88rem; }
form.meterkastlijst .knop { align-self: flex-start; margin-top: .25rem; }

/* Legenda in de editor: opties zonder vaste plek */
.legenda-blok { margin-top: 1rem; }
.legenda-lijst { list-style: none; margin: .3rem 0 0; padding: 0; }
.legenda-item { display: flex; gap: .4rem; align-items: baseline; padding: .25rem .3rem; border-radius: 4px; cursor: pointer; font-size: .85rem; }
.legenda-item:hover { background: rgba(0, 0, 0, .05); }
.legenda-item.geselecteerd { outline: 2px solid var(--accent, #1d63d1); }

/* Lopende ondertekening op het kaveloverzicht (team) */
.ondertekening-loopt { margin-top: .75rem; padding: .6rem .8rem; border-left: 3px solid #c2571a; background: rgba(194, 87, 26, .07); }
.ondertekening-loopt .regel-knoppen { display: flex; gap: .4rem; margin-top: .4rem; flex-wrap: wrap; }

/* ---------- Keuzelijst als hoofdstukken, koper en team (opties/_onderdeel.html, #43/#45) ---------- */
.p-onderdeel {
  background: var(--wit); border: 1px solid var(--lijn); border-left: 5px solid var(--accent);
  border-radius: 10px; box-shadow: var(--p-kaart-schaduw); padding: 0 1.25rem 1rem; margin-bottom: 1rem;
}
.p-onderdeel-definitief, .p-onderdeel-akkoord { border-left-color: var(--ok); }
.p-onderdeel-ingediend { border-left-color: var(--accent-rand); }
.p-onderdeel-kop {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; list-style: none;
  margin: 0 -1.25rem .9rem; padding: .8rem 1.25rem; background: var(--accent-tint);
  border-bottom: 1px solid var(--accent-rand); border-radius: 0 9px 0 0;
}
.p-onderdeel-kop h2 { margin: 0; font-size: 1.15rem; display: flex; align-items: center; gap: .55rem; flex: 1 1 auto; }
.p-onderdeel-nr {
  width: 1.8rem; height: 1.8rem; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--accent); color: #fff; font-size: .9rem; flex: 0 0 auto;
}
.p-onderdeel-opties { margin-bottom: .75rem; }
.p-onderdeel-subtotaal td { font-weight: 700; border-top: 2px solid var(--lijn); }
.p-onderdeel .p-knoppenrij { margin-top: .5rem; }
.p-onderdeel .offerte-upload { margin-top: .6rem; }

details.p-onderdeel { padding-bottom: 0; }
details.p-onderdeel[open] { padding-bottom: 1rem; }
details.p-onderdeel > summary { cursor: pointer; user-select: none; }
details.p-onderdeel > summary::-webkit-details-marker { display: none; }
details.p-onderdeel:not([open]) > summary { margin-bottom: 0; border-bottom: 0; border-radius: 0 9px 9px 0; }
details.p-onderdeel > summary h2::after {
  content: "▸"; font-size: .8rem; color: var(--grijs); margin-left: .2rem; transition: transform .15s; display: inline-block;
}
details.p-onderdeel[open] > summary h2::after { transform: rotate(90deg); }
.p-onderdeel-samenvatting { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; color: var(--grijs); font-size: .88rem; }
.p-onderdeel-offertes { list-style: none; padding: 0; margin: 0 0 .5rem; font-size: .9rem; }
.p-onderdeel-offertes li { padding: .25rem 0; }
.p-onderdelen-knoppen { display: flex; gap: .4rem; justify-content: flex-end; margin: 0 0 .6rem; }
.p-onderdeel .keuze-historie { margin-top: .6rem; }
.p-statusrij { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.p-statusrij li { display: flex; align-items: center; gap: .35rem; font-size: .9rem; }

/* ---------- Deadline-overzicht: groot, scrollbaar, vaste kop en eerste kolom (#46) ---------- */
.deadline-grootte { display: flex; gap: .3rem; align-items: center; justify-content: flex-end; margin: 0 0 .4rem; }
.deadline-scroll {
  overflow: auto; padding: 0; max-height: calc(100vh - 15rem); min-height: 18rem;
  --dl-tekst: 1rem;
}
.deadline-scroll[data-grootte="0"] { --dl-tekst: .85rem; }
.deadline-scroll[data-grootte="2"] { --dl-tekst: 1.2rem; }
.deadline-scroll table.kruisjeslijst { font-size: var(--dl-tekst); border-collapse: separate; border-spacing: 0; }
.deadline-scroll table.kruisjeslijst td, .deadline-scroll table.kruisjeslijst th { padding: .45rem .55rem; background: var(--wit); }
.deadline-scroll table.kruisjeslijst th { font-size: calc(var(--dl-tekst) * .8); }
.deadline-scroll .dl { font-size: calc(var(--dl-tekst) * .9); min-width: 4.2em; padding: .2em .4em; }
/* Kopregel en voetregel blijven staan bij verticaal scrollen, de bouwnummers bij horizontaal scrollen. */
.deadline-scroll thead th { position: sticky; top: 0; z-index: 2; border-bottom: 2px solid var(--lijn); }
.deadline-scroll tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--accent-tint); }
.deadline-scroll tbody td:first-child, .deadline-scroll tfoot td:first-child { position: sticky; left: 0; z-index: 1; border-right: 1px solid var(--lijn); }
.deadline-scroll thead th:first-child { position: sticky; left: 0; z-index: 3; border-right: 1px solid var(--lijn); }
.deadline-scroll tfoot td:first-child { z-index: 3; }
.deadline-scroll tbody tr:hover td { background: var(--accent-tint); }