:root {
  --papier: #f4f5f3;
  --wit: #ffffff;
  --inkt: #1c2430;
  --grijs: #5c6470;
  --lijn: #d9dcd8;
  --accent: #1d63d1;      /* installatieblauw */
  --accent-donker: #144a9f;
  --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;
}

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(--inkt); 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-blok {
  background: var(--accent); border-radius: 4px; padding: .1rem .4rem;
  font-size: .8rem; letter-spacing: .05em;
}
.topbalk nav { display: flex; align-items: center; gap: .75rem; }
.gebruiker { color: #aeb6c2; 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; }

.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); }

.kaart {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px;
  padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}

/* 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); }

.knop {
  display: inline-block; border: 1px solid var(--accent); background: var(--accent); color: #fff;
  padding: .45rem .9rem; border-radius: 6px; font-size: .9rem; cursor: pointer;
}
.knop:hover { background: var(--accent-donker); border-color: var(--accent-donker); text-decoration: none; }
.knop-rand { background: transparent; color: var(--accent); }
.knop-rand:hover { background: #eaf1fc; color: var(--accent-donker); }
.knop-stil { background: transparent; border-color: transparent; color: #aeb6c2; 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: var(--fout); background: transparent; color: var(--fout); }
.knop-gevaar:hover { background: #fdecea; border-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); }

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); }
input[type=text], input[type=number], input[type=file], 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); }

.optie-groep { margin-bottom: .6rem; }
.optie-groep > summary.groep-naam {
  list-style: none; cursor: pointer; user-select: none;
  font-size: .78rem; font-weight: 700; color: var(--grijs);
  margin: .4rem 0 .3rem; text-transform: uppercase;
  display: flex; align-items: center; gap: .3rem;
}
.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: #eaf1fc; 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-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: 11px; font-weight: 700; padding: 2px 5px; border-radius: 4px;
  cursor: grab; user-select: none; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.4);
  border: 1.5px solid rgba(255,255,255,.9);
}
.marker.geselecteerd { outline: 2px solid var(--inkt); outline-offset: 1px; }
.marker.vast { cursor: default; }

/* 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 { border: 1px solid var(--lijn); background: #fff; border-radius: 6px; padding: .3rem .7rem; cursor: pointer; font-size: .85rem; }
.tab.actief { background: var(--inkt); color: #fff; border-color: var(--inkt); }
.editor-balk .rek { flex: 1; }
.zoomknoppen button { width: 2rem; }

.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; }

/* login */
.login-doos { max-width: 22rem; margin: 4rem auto; }

@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; }

.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); }