:root{
  --bg:#0f1115;
  --panel:#141824;
  --card:#0b0f1a;
  --text:#e9eef7;
  --muted:#a9b4c7;
  --border:#2a3550;

  --input-bg:#0d1220;
  --input-border:#2a3550;

  --grid-color:#ffffff;
  --grid-opacity:0.10;

  --btn-bg:rgba(77,163,255,0.12);
  --btn-border:rgba(77,163,255,0.35);
  --panel-width: 36%;
  --viz-width: 72%;
  --legend-width: 28%;
  --splitter-size: 14px;
}

body[data-theme="light"]{
  --bg:#f4f6fb;
  --panel:#ffffff;
  --card:#ffffff;
  --text:#111827;
  --muted:#374151;
  --border:#d1d5db;

  --input-bg:#ffffff;
  --input-border:#d1d5db;

  --grid-color:#000000;
  --grid-opacity:0.08;

  --btn-bg:rgba(37,99,235,0.10);
  --btn-border:rgba(37,99,235,0.35);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background:var(--bg);
  color:var(--text);
}

.app{
  display:grid;
  grid-template-columns: minmax(380px, var(--panel-width)) var(--splitter-size) minmax(0, 1fr);
  height:100vh;
}

.panel{
  padding:16px;
  background:var(--panel);
  border-right:1px solid var(--border);
  overflow:auto;
  overflow-x:hidden;
}

.panel h1{
  margin:0 0 12px 0;
  font-size:18px;
  font-weight:700;
}

.fields{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.field label{
  color:var(--muted);
  font-size:12px;
  line-height:1.2;
}

input, select, button{
  width:100%;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--input-border);
  background:var(--input-bg);
  color:var(--text);
  outline:none;
}

.field.hidden{display:none}

.triple{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:8px;
  align-items:end;
}

.mini{
  font-size:11px;
  color:var(--muted);
  margin-bottom:4px;
}

input:disabled, select:disabled{
  opacity:0.55;
}

.row{
  display:flex;
  gap:8px;
  align-items:center;
}

.row input.wide{
  flex: 1 1 auto;
  min-width: 220px; /* groter dan voorheen */
}

.row button{
  flex: 0 0 140px; /* vaste knopbreedte -> input blijft leesbaar */
}

button{
  background:var(--btn-bg);
  border-color:var(--btn-border);
  cursor:pointer;
  white-space:nowrap;
}
button:hover{ filter:brightness(1.05); }

.toggles{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.chk{
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--muted);
  font-size:13px;
}
.chk input{
  width:auto;
  transform:scale(1.15);
}

.row2{
  display:flex;
  gap:8px;
}
.row2 button{
  flex:1 1 0;
  width:auto;
}

.status{
  margin-top:14px;
  min-height:18px;
  color:#b91c1c;
  font-size:13px;
}

.hint{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
}

.stage{
  padding:16px;
  overflow:auto;
  min-width:0;
}

.viz{
  display:grid;
  grid-template-columns: minmax(0, var(--viz-width)) var(--splitter-size) minmax(240px, var(--legend-width));
  gap:14px;
  height:100%;
  min-width:0;
}

.viz.legend-hidden{
  grid-template-columns: minmax(0, 1fr);
  gap:0;
}

.viz.legend-hidden .splitterInner,
.viz.legend-hidden .legend{
  display:none;
}

.svgWrap{
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  overflow:hidden;
  min-height:740px;
}

svg{
  width:100%;
  height:100%;
  display:block;
}

.legend{
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  padding:12px;
  height:fit-content;
  position:sticky;
  top:16px;
  min-width:0;
}

.splitter{
  position:relative;
  width:var(--splitter-size);
  cursor:col-resize;
  user-select:none;
  touch-action:none;
}

.splitter::before{
  content:"";
  position:absolute;
  left:50%;
  top:14px;
  bottom:14px;
  width:4px;
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(180deg, transparent, var(--border) 12%, var(--border) 88%, transparent);
  opacity:.85;
}

.splitter:hover::before,
.splitter.isDragging::before{
  background:linear-gradient(180deg, transparent, #4da3ff 12%, #4da3ff 88%, transparent);
}

.legend h2{
  margin:0 0 10px 0;
  font-size:14px;
  color:var(--muted);
}

.legendList{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.legItem{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:13px;
}

.swatch{
  width:14px;
  height:14px;
  border-radius:4px;
  margin-top:2px;
  flex:0 0 14px;
  border:1px solid rgba(0,0,0,0.12);
}
body[data-theme="dark"] .swatch{
  border:1px solid rgba(255,255,255,0.12);
}

.legText{
  color:var(--text);
  line-height:1.25;
}
.legText small{
  display:block;
  color:var(--muted);
  margin-top:2px;
}

/* Mobile */
@media (max-width: 980px) {
  .app{
    grid-template-columns: 1fr;
    height:auto;
    min-height:100vh;
  }
  .splitter{
    display:none;
  }
  .panel{
    border-right:none;
    border-bottom:1px solid var(--border);
  }
  .viz{
    grid-template-columns: 1fr;
  }
  .legend{
    position:static;
  }
  .svgWrap{
    min-height:520px;
  }
}

@media (max-width: 520px) {
  .row{
    flex-direction:column;
    align-items:stretch;
  }
  .row button{
    flex: 0 0 auto;
    width:100%;
  }
  .row input.wide{
    min-width: 0;
  }
  .row2{
    flex-direction:column;
  }
  .row2 button{
    width:100%;
  }
}


/* --- Extra UI for dwarsrichting --- */
.divider{
  margin: 14px 0 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .02em;
}
.divider span{
  display:inline-block;
  padding:2px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background: var(--input-bg);
}

.svgCol{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width: 0;
}

.svgTitle{
  padding:10px 12px 0;
  font-size:13px;
  color: var(--muted);
}

.svgWrap{
  display:flex;
  flex-direction:column;
}

.svgWrap svg{
  flex: 1 1 auto;
}



.subtitle{
  margin-top:-8px;
  margin-bottom:14px;
  font-size:12px;
  opacity:.75;
}

.subtitle.boxed{
  display:inline-block;
  padding:4px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background: var(--input-bg);
  opacity:1;
  margin-top:0;
}

.quad{
  display:grid;
  grid-template-columns: minmax(120px, 1.35fr) repeat(3, minmax(74px, 1fr)) minmax(120px, 1.25fr);
  gap:10px;
}

.field.segment label{
  margin-bottom:6px;
}

.boreTable{
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  overflow:hidden;
  margin-top:8px;
}



.boreRow{
  display:grid;
  min-width:0;
  width:100%;
  grid-template-columns: 28px minmax(0, 1fr) minmax(0, .95fr) minmax(0, 1fr) repeat(4, minmax(0, .7fr));
  gap:4px;
  padding:8px 8px;
  align-items:center;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:12px;
}



.boreRow.head{
  border-top:none;
  font-size:11px;
  opacity:.85;
  background: rgba(255,255,255,.03);
  font-weight:600;
  line-height:1.15;
  text-align:center;
}



.boreRow input{
  width:100%;
  min-width:0;
  padding:6px 4px;
  font-size:12px;
}



/* ===== Layout helpers (v2fix9) ===== */
.fieldRow{
  display:grid;
  gap:10px;
  align-items:end;
}
.fieldRow.cols2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fieldRow.cols4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Compact field used inside multi-column rows */
.miniField{
  padding:0;
}
.miniField label{
  font-size:11px;
}

.btnWide{
  width:100%;
}

@media (max-width: 980px){
  .fieldRow.cols4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quad{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.controls{overflow-x:hidden;min-width:0;}

/* v2fix10: allow grid children to shrink without forcing horizontal scroll */
.panel, .card, .controls, .right{min-width:0;}

/* v2fix12: prevent grid overflow in bore rows */
.boreRow > *{min-width:0;}
.boreRow.head > *{white-space:normal; overflow-wrap:anywhere;}

.reportRoot{
  display:none;
}

.reportPage{
  max-width:1100px;
  margin:0 auto;
  padding:32px;
  color:#111827;
  background:#ffffff;
}

.reportHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:24px;
}

.reportEyebrow{
  display:inline-block;
  margin-bottom:8px;
  padding:4px 10px;
  border:1px solid #d1d5db;
  border-radius:999px;
  color:#475569;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.reportHeader h1{
  margin:0;
  font-size:28px;
  line-height:1.1;
}

.reportMeta{
  margin:10px 0 0;
  color:#475569;
  font-size:14px;
}

.reportSection{
  margin-top:26px;
  break-inside:avoid;
}

.reportSection h2{
  margin:0 0 12px;
  font-size:18px;
}

.reportGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 14px;
}

.reportKv{
  padding:10px 12px;
  border:1px solid #dbe3ef;
  border-radius:12px;
  background:#f8fafc;
}

.reportKvLabel{
  font-size:12px;
  color:#475569;
}

.reportKvValue{
  margin-top:4px;
  font-size:14px;
  font-weight:600;
  color:#0f172a;
}

.reportTableWrap{
  overflow:hidden;
  border:1px solid #dbe3ef;
  border-radius:14px;
}

.reportTable{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.reportTable th,
.reportTable td{
  padding:10px 12px;
  border-bottom:1px solid #e5e7eb;
  text-align:left;
}

.reportTable th{
  background:#f8fafc;
  color:#334155;
  font-size:12px;
}

.reportTable tr:last-child td{
  border-bottom:none;
}

.reportEmpty{
  padding:14px 16px;
  color:#64748b;
  font-size:13px;
  background:#f8fafc;
}

.reportLegend{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.reportLegItem{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border:1px solid #dbe3ef;
  border-radius:12px;
  background:#f8fafc;
}

.reportLegSwatch{
  width:14px;
  height:14px;
  margin-top:2px;
  border-radius:4px;
  border:1px solid rgba(15,23,42,.12);
  flex:0 0 14px;
}

.reportLegText{
  font-size:13px;
  color:#0f172a;
  line-height:1.35;
}

.reportLegText small{
  display:block;
  color:#475569;
  margin-top:2px;
}

.reportDrawings{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

.reportDrawingCard{
  border:1px solid #dbe3ef;
  border-radius:16px;
  padding:14px;
  background:#ffffff;
}

.reportDrawingTitle{
  margin-bottom:10px;
  font-size:14px;
  font-weight:700;
  color:#334155;
}

.reportSvgFrame{
  overflow:hidden;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#ffffff;
}

.reportSvgFrame svg{
  width:100%;
  height:auto;
  display:block;
}

@media (max-width: 700px){
  .reportPage{
    padding:20px;
  }
  .reportGrid,
  .reportLegend{
    grid-template-columns:1fr;
  }
}

@media print{
  @page{
    size:A4 portrait;
    margin:12mm;
  }

  body{
    background:#ffffff;
  }

  body.print-report-mode .app{
    display:none !important;
  }

  body.print-report-mode .reportRoot{
    display:block !important;
  }

  .reportPage{
    max-width:none;
    margin:0;
    padding:0;
  }

  .reportSection{
    break-inside:avoid-page;
  }

  .reportDrawingCard,
  .reportKv,
  .reportTableWrap,
  .reportLegItem{
    break-inside:avoid;
  }
}

/* ── ISO SVG: vult de beschikbare hoogte ────────────── */
.svgWrap--iso{
  min-height: 500px;
  flex: 1 1 auto;
}
.svgWrap[hidden]{
  display: none !important;
}
.svgWrap--iso svg{
  width: 100%;
  height: 100%;
  min-height: 500px;
}

/* ── Inklapbare secties ──────────────────────────────── */
.sec-btn{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  padding:10px 14px;
  margin-bottom:4px;
  background:var(--input-bg);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  text-align:left;
}
.sec-btn:hover{
  filter:brightness(1.1);
}

.sec-arrow{
  display:inline-block;
  width:0;
  height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:7px solid var(--muted);
  transition:transform 0.2s;
  flex-shrink:0;
}
.sec-btn[aria-expanded="true"] .sec-arrow{
  transform:rotate(90deg);
}

.sec-body{
  margin-bottom:8px;
  padding:0 2px;
}
.sec-body[hidden]{
  display:none;
}