:root {
  --bg: #14171c;
  --bg-panel: #1b1f26;
  --bg-input: #11141a;
  --stroke: #2a303a;
  --text: #e6e9ee;
  --text-dim: #8b94a3;
  --accent: #1d4e9e;
  --accent-dim: #2a6cb8;
  --ok: #3fb96d;
  --warn: #e0a33d;
  --err: #e05d5d;
  --grid: #232831;
  --grid-major: #2c333f;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 13px/1.45 "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* hidden-attribuut altijd laten winnen van display-regels (zoals label { display: block }),
 * anders blijven verborgen instellingsrijen per discipline gewoon zichtbaar */
[hidden] { display: none !important; }

/* ── menubalk (titel · navigatie · account) ── */
.appbar {
  display: flex; align-items: center; gap: 18px;
  padding: 7px 14px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--stroke);
}

/* ── topbar (tekentools) ───────────────── */
.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 6px 14px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--stroke);
}
.brand { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }
.brand span { color: var(--text-dim); font-weight: 400; }
.toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.user-chip { margin-left: auto; display: flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--text-dim); }
.user-chip a { color: var(--accent); text-decoration: none; }
.user-chip a:hover { text-decoration: underline; }

/* ── projectnavigatie in de topbar ───── */
.proj-nav { display: flex; align-items: center; gap: 10px; min-width: 0; }
#btn-projects { color: var(--accent); border-color: var(--accent-dim); white-space: nowrap; }
#btn-projects:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.proj-name {
  font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 420px;
}

/* ── projectscherm (berekeningen-overzicht) ── */
#project-screen[hidden] { display: none; }
#project-screen {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
#project-screen .appbar { flex: none; }
body.project-picker > header.appbar,
body.project-picker > header.topbar,
body.project-picker > main.layout { display: none !important; }
.ps-body { width: min(960px, 92%); margin: 0 auto; padding: 28px 0 48px; }
.ps-body h1 { font-size: 22px; margin: 0 0 18px; }

.ps-new { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.ps-new input[type="text"] {
  flex: 1; min-width: 220px;
  font: inherit; color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--stroke); border-radius: 5px;
  padding: 6px 10px;
}
.ps-new select {
  font: inherit; color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--stroke); border-radius: 5px;
  padding: 6px 8px;
}
.ps-new button { border-color: var(--accent); color: var(--accent); }
.ps-new button:hover { background: var(--accent); color: #fff; }

.ps-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ps-empty { color: var(--text-dim); grid-column: 1 / -1; }
.ps-card {
  background: var(--bg-panel);
  border: 1px solid var(--stroke); border-radius: 8px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.ps-card:hover { border-color: var(--accent-dim); }
.ps-card .ps-name { font-weight: 600; font-size: 14px; word-break: break-word; }
.ps-card .ps-meta { color: var(--text-dim); font-size: 12px; }
.ps-card .ps-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ps-card .ps-actions button { padding: 4px 10px; font-size: 12.5px; }
.ps-card .ps-open { border-color: var(--accent); color: var(--accent); }
.ps-card .ps-open:hover { background: var(--accent); color: #fff; }
.ps-card .ps-delete:hover { border-color: var(--err); color: var(--err); }
.toolbar .sep { width: 1px; height: 20px; background: var(--stroke); margin: 0 4px; }
.toolbar select {
  font: inherit; color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--stroke);
  border-radius: 5px;
  padding: 4px 8px;
  cursor: pointer;
}
.toolbar select:hover { border-color: var(--accent); }

/* Labelweergave-menu: knop met samenvatting + uitklappaneel met checkboxes */
.label-menu { position: relative; display: inline-flex; }
#label-menu-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 9px;
}
#label-menu-btn.is-empty #label-menu-summary { color: var(--text-dim); }
.label-menu__caret { font-size: 10px; color: var(--text-dim); }
.label-menu__panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1000;
  min-width: 185px; padding: 8px 10px;
  background: var(--bg-panel); border: 1px solid var(--stroke);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.label-menu__panel label {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 4px; border-radius: 5px;
  font-size: 13px; cursor: pointer; white-space: nowrap;
}
.label-menu__panel label:hover { background: var(--accent-dim); }
.label-menu__panel input[type="checkbox"] {
  /* generieke 'label input'-regel (display:block, width:100%) overschrijven,
   * anders rekt de checkbox uit en verspringt de uitlijning per regel */
  display: inline-block; width: auto; flex: none;
  accent-color: var(--accent); margin: 0;
}
.label-menu__hint {
  margin: 6px 2px 2px; font-size: 11px; color: var(--text-dim); white-space: nowrap;
}
.rot-label { color: var(--text-dim); min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
button {
  font: inherit; color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--stroke);
  border-radius: 5px;
  padding: 4px 12px;
  cursor: pointer;
}
button:hover { border-color: var(--accent); }
button.tool.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── layout ───────────────────────────── */
.layout { flex: 1; display: flex; min-height: 0; position: relative; }
.canvas-wrap { flex: 1; position: relative; min-width: 0; margin: 0 28px; }
#canvas { width: 100%; height: 100%; display: block; background: var(--bg); outline: none; cursor: default; }
#canvas.drawing { cursor: crosshair; }

.statusbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 24px;
  padding: 4px 12px;
  font-size: 12px; color: var(--text-dim);
  background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
  border-top: 1px solid var(--stroke);
  pointer-events: none;
}
#status-mode { color: var(--accent); font-weight: 600; }

/* ── zijpanelen (uitklapbaar: smalle strook, openen bij hover) ── */
.panel {
  position: absolute; top: 0; bottom: 0; z-index: 40;
  background: var(--bg-panel);
  display: flex; flex-direction: row;
  min-height: 0;
  /* inklappen met een korte vertraging, zodat het paneel niet flikkert */
  transition: transform 0.22s ease 0.25s, box-shadow 0.22s ease 0.25s;
}
.panel:hover, .panel:focus-within, .panel.peek {
  transform: none;
  transition-delay: 0s;
  box-shadow: 0 0 28px rgba(0, 0, 0, 0.5);
}
.panel-left { left: 0; width: 328px; transform: translateX(calc(28px - 100%)); }
.panel-right { right: 0; width: 368px; transform: translateX(calc(100% - 28px)); }

.panel-body {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
}
.panel-grip {
  flex: none; width: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-panel);
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.panel-left .panel-grip { border-left: 1px solid var(--stroke); border-right: 1px solid var(--stroke); }
.panel-right .panel-grip { border-right: 1px solid var(--stroke); border-left: 1px solid var(--stroke); }
.panel:hover .panel-grip { color: var(--accent); }
.panel-grip span {
  writing-mode: vertical-rl;
  font-size: 11.5px; letter-spacing: 0.06em;
  white-space: nowrap; overflow: hidden;
  max-height: 100%;
  padding: 10px 0;
}
.panel-left .panel-grip span { transform: rotate(180deg); }

/* vastgezet paneel: neemt vaste ruimte in de layout in en klapt niet meer in */
.panel.pinned {
  position: static;
  transform: none;
  transition: none;
  box-shadow: none;
  z-index: auto;
}
.panel.pinned .panel-grip { display: none; }
.panel-left.pinned { border-right: 1px solid var(--stroke); }
.panel-right.pinned { border-left: 1px solid var(--stroke); }
.layout:has(.panel-left.pinned) .canvas-wrap { margin-left: 0; }
.layout:has(.panel-right.pinned) .canvas-wrap { margin-right: 0; }

.pin-btn {
  flex: none;
  width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-dim);
}
.pin-btn svg { width: 15px; height: 15px; transform: rotate(35deg); transition: transform 0.15s ease; }
.pin-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pin-btn.active svg { transform: none; }

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--stroke);
}
.panel-head.head-tabs { padding: 0 10px 0 0; }
.panel-head.head-tabs .tabs { flex: 1; align-self: stretch; border-bottom: 0; }
.panel-head.head-tabs .tab { flex: none; padding: 9px 14px; }
.panel-title { font-weight: 600; }
#btn-report { border-color: var(--accent); color: var(--accent); }
#btn-report:hover { background: var(--accent); color: #fff; }
.tabs { display: flex; border-bottom: 1px solid var(--stroke); }
.tab {
  flex: 1; padding: 8px 0;
  background: none; border: none; border-radius: 0;
  color: var(--text-dim); border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-body { padding: 14px; overflow-y: auto; flex: 1; }

h3 { margin: 14px 0 8px; font-size: 13px; }
.tab-body h3:first-child { margin-top: 0; }
label { display: block; margin: 8px 0; color: var(--text-dim); }
label input, label select {
  display: block; width: 100%; margin-top: 3px;
  font: inherit; color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--stroke);
  border-radius: 5px;
  padding: 5px 8px;
}
label.check { display: flex; align-items: center; gap: 8px; }
label.check input { width: auto; display: inline; margin: 0; }

.save-state {
  margin-left: 12px;
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 400;
}

.calq-meta-block,
.report-meta-block {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--stroke);
}

.muted { color: var(--text-dim); }

.result-box {
  margin-top: 12px; padding: 10px;
  background: var(--bg-input);
  border: 1px solid var(--stroke);
  border-radius: 6px;
  font-size: 12.5px;
}
.result-box b { color: var(--accent); }

/* ── resultaten ──────────────────────── */
.totals {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 6px;
}
.totals .stat {
  background: var(--bg-input);
  border: 1px solid var(--stroke);
  border-radius: 6px;
  padding: 8px 10px;
}
.totals .stat .v { font-size: 17px; font-weight: 600; }
.totals .stat .l { font-size: 11.5px; color: var(--text-dim); }
.totals .stat.hl .v { color: var(--accent); }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 12px; }
th, td { padding: 4px 7px; text-align: right; border-bottom: 1px solid var(--stroke); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--text-dim); font-weight: 600; }
tr.crit td { color: var(--accent); }
tr.bad td { color: var(--err); }

.warning, .error, .info {
  padding: 7px 10px; margin: 0 0 8px;
  border-radius: 6px; font-size: 12.5px;
  border: 1px solid;
}
.warning { border-color: var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.error { border-color: var(--err); color: var(--err); background: color-mix(in srgb, var(--err) 8%, transparent); }
.info { border-color: var(--accent); color: var(--text-dim); background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* contextmenu (rechtermuisknop) */
.ctx-menu {
  position: fixed; z-index: 1000;
  min-width: 200px; padding: 4px;
  background: var(--bg-panel); border: 1px solid var(--stroke);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  font-size: 13px;
}
.ctx-menu button {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; border: none; border-radius: 5px;
  background: none; color: var(--text); cursor: pointer; font: inherit;
}
.ctx-menu button:hover:not(:disabled) { background: var(--accent-dim); }
.ctx-menu button:disabled { color: var(--text-dim); opacity: 0.55; cursor: default; }
.ctx-menu hr { border: 0; border-top: 1px solid var(--stroke); margin: 4px 6px; }

/* ── SVG-elementen ───────────────────── */
.grid-line { stroke: var(--grid); stroke-width: 1; }
.grid-line.major { stroke: var(--grid-major); }
.axis-label { fill: var(--text-dim); font-size: 11px; }

.edge { stroke: #9fb6d4; stroke-width: 3; stroke-linecap: round; }
.edge.hover { stroke: #cfe2ff; }
.edge.selected { stroke: var(--accent); }
.edge.bad { stroke: var(--err); }
.edge.crit { filter: drop-shadow(0 0 3px rgba(79, 156, 249, 0.9)); }
.edge-hit { stroke: transparent; stroke-width: 14; stroke-linecap: round; cursor: pointer; }

.node-dot { fill: #aab6c6; stroke: var(--bg); stroke-width: 1.5; cursor: pointer; }
.node-dot.hover { fill: #e2eaf5; }
.node-dot.selected { fill: var(--accent); }
.node-source, .node-board { fill: var(--accent); stroke: var(--accent-dim); stroke-width: 1.5; }
.node-board { fill: #2a6cb8; }
.node-consumer { fill: var(--ok); }
.node-vent { fill: #4da3ff; }

/* Halo achter de tekst zodat labels leesbaar blijven over kabels en grid. */
.edge-label {
  fill: var(--text);
  font-size: 10.5px;
  pointer-events: none;
  paint-order: stroke fill;
  stroke: var(--bg);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.node-label {
  fill: var(--text);
  font-size: 10.5px;
  pointer-events: none;
  paint-order: stroke fill;
  stroke: var(--bg);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.preview-line { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }
.preview-dot { fill: var(--accent); pointer-events: none; }
.cursor-dot { fill: none; stroke: var(--accent); stroke-width: 1.5; pointer-events: none; }