:root{
  --ink:#14222e; --ink-soft:#5a6b7a; --paper:#fbfcfd;
  --grid:#dde6ee; --grid-strong:#c7d4e0;
  --panel:#eef2f6; --panel-line:#d5dee6;
  --accent:#0b6ea8; --accent-soft:#e3f0f8; --danger:#b23b3b; --ok:#2f7d54;
  --font:"Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"Cascadia Mono",ui-monospace,"SF Mono",Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:var(--font);color:var(--ink);overflow:hidden}
body{display:grid;grid-template-columns:224px 1fr 250px;grid-template-rows:auto auto 1fr;height:100vh}

/* topbar */
header{grid-column:1/4;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--panel-line)}
header h1{font-size:14px;margin:0 12px 0 0;font-weight:600;letter-spacing:.02em}
.grp{display:flex;gap:4px;align-items:center;padding-right:10px;margin-right:6px;border-right:1px solid var(--panel-line)}
.grp:last-child{border:none}
header button{font:inherit;font-size:12.5px;border:1px solid var(--panel-line);background:#fff;color:var(--ink);
  padding:6px 10px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1}
header button:hover{border-color:var(--accent);color:var(--accent)}
header button.active{background:var(--accent);border-color:var(--accent);color:#fff}
header button.primary{background:var(--ok);border-color:var(--ok);color:#fff}
.spacer{flex:1}
#projName{font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--panel-line);border-radius:6px;width:200px}

/* tabbladen */
.tabs{grid-column:1/4;display:flex;gap:2px;background:var(--panel);padding:0 12px;border-bottom:1px solid var(--panel-line)}
.tab{font:inherit;font-size:13px;border:none;background:transparent;color:var(--ink-soft);
  padding:9px 18px;cursor:pointer;border-bottom:2px solid transparent}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.only-situatie{display:none}
body.situatie-mode .only-situatie{display:block}
body.eendraad-mode #btnWire,body.eendraad-mode #btnText,body.eendraad-mode #btnRotate{display:none}

/* palet links */
aside.left{background:var(--panel);border-right:1px solid var(--panel-line);overflow-y:auto;padding:8px}
.cat{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin:12px 4px 6px;font-weight:700}
.cat:first-child{margin-top:2px}
.palette{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pal-item{background:#fff;border:1px solid var(--panel-line);border-radius:8px;padding:5px 3px 3px;cursor:grab;text-align:center;user-select:none;transition:.08s}
.pal-item:hover{border-color:var(--accent);box-shadow:0 1px 4px rgba(11,110,168,.12)}
.pal-item.armed{border-color:var(--accent);background:var(--accent-soft)}
.pal-item svg{width:100%;height:34px;display:block}
.pal-item span{font-size:9.5px;color:var(--ink-soft);display:block;margin-top:2px;line-height:1.1}

/* canvas */
main{position:relative;overflow:hidden;background:var(--paper)}
#canvas{width:100%;height:100%;display:block;touch-action:none}
#canvas.placing,#canvas.wiring{cursor:crosshair}
.sym{cursor:move} .glyph{color:var(--ink)}
.sym.selected .hitbox{stroke:var(--accent);stroke-width:1;stroke-dasharray:4 3}
.wire{stroke:var(--ink);stroke-width:2;fill:none} .wire.selected{stroke:var(--accent)}
.wire.active{stroke:var(--accent);stroke-width:2.5}
.box{fill:none;stroke:var(--ink);stroke-width:1.5}
/* gele + verbindingspunten */
.adddot{cursor:pointer}
.adddot .dot{fill:#ffcf33;stroke:#c99a00;stroke-width:1.5}
.adddot:hover .dot{fill:#ffde5c}
.adddot.active .dot{fill:#ffb020;stroke:var(--accent)}
.adddot .plus{stroke:#7a5c00;stroke-width:1.6;pointer-events:none}
.adddot .dot-cap{pointer-events:none;font-weight:600}
#props .hint{font-size:11px;color:var(--ink-soft);line-height:1.5;margin-top:4px}
.pal-item.nope{border-color:var(--danger);background:#fbe9e9}
.label{font-family:var(--mono);font-size:12px;fill:var(--ink);cursor:move} .label.selected{fill:var(--accent)}
#status{position:absolute;left:10px;bottom:10px;font-size:11.5px;color:var(--ink-soft);
  background:rgba(255,255,255,.9);border:1px solid var(--panel-line);border-radius:6px;padding:4px 8px;pointer-events:none}
#zoombox{position:absolute;right:10px;bottom:10px;display:flex;gap:4px}
#zoombox button{width:30px;height:28px;border:1px solid var(--panel-line);background:#fff;border-radius:6px;cursor:pointer;font-size:15px}
#zoombox button:hover{border-color:var(--accent);color:var(--accent)}
#textEdit{position:absolute;display:none;font-family:var(--mono);font-size:12px;border:1px solid var(--accent);border-radius:4px;padding:1px 4px;z-index:20}

/* rechterpaneel */
aside.right{background:var(--panel);border-left:1px solid var(--panel-line);overflow-y:auto;padding:12px}
aside.right h3{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin:0 0 8px}
aside.right section{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--panel-line)}
.field{margin-bottom:8px}
.field label{display:block;font-size:11px;color:var(--ink-soft);margin-bottom:3px}
.field input[type=text],.field input:not([type]){width:100%;font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--panel-line);border-radius:6px}
.field input[type=range]{width:100%}
aside.right button{font:inherit;font-size:12.5px;padding:6px 10px;border:1px solid var(--panel-line);background:#fff;border-radius:6px;cursor:pointer}
aside.right button:hover{border-color:var(--accent);color:var(--accent)}
#props{display:none}
#props .ptype{font-size:13px;font-weight:600;margin-bottom:8px}

/* legende op canvas */
.legend{cursor:move}
.legend-outer{fill:#fff;stroke:var(--ink);stroke-width:1.5}
.legend-head{fill:var(--ink);stroke:none}
.legend-colhead{fill:var(--panel);stroke:var(--ink);stroke-width:.8}
.legend-line{stroke:var(--ink);stroke-width:.8}
.legend.selected .legend-outer{stroke:var(--accent);stroke-width:2}

/* kringlijst-tabel rechts */
.kring-tbl{width:100%;border-collapse:collapse;font-size:11.5px}
.kring-tbl th{text-align:left;color:var(--ink-soft);font-weight:600;padding:2px 4px;border-bottom:1px solid var(--panel-line)}
.kring-tbl td{padding:2px 3px;border-bottom:1px solid var(--panel-line);vertical-align:middle}
.kring-tbl td.kl{font-weight:700;color:var(--accent);width:22px;text-align:center}
.kring-tbl td.kb,.kring-tbl td.kc{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);white-space:nowrap}
.kring-tbl input.kn{width:100%;font:inherit;font-size:11px;padding:2px 4px;border:1px solid transparent;border-radius:4px;background:#fff}
.kring-tbl input.kn:hover{border-color:var(--panel-line)}
.kring-tbl input.kn:focus{border-color:var(--accent);outline:none}
.hint{font-size:11.5px;color:var(--ink-soft);line-height:1.5}
.proj-row{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:5px 6px;border-radius:6px;font-size:12.5px}
.proj-row.current{background:var(--accent-soft)}
.proj-row .pn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-row button{font-size:11px;padding:3px 6px;margin-left:3px}
.proj-row button.danger,aside.right button.danger{color:var(--danger);border-color:#e3c4c4}

/* print */
@media print{
  header,.tabs,aside,#status,#zoombox{display:none!important}
  body{grid-template-columns:1fr;grid-template-rows:1fr}
  main{overflow:visible}
}