/* Sober, Excel-achtig: vlak, dunne lijnen, weinig kleur */
:root{
  --bg:#ffffff; --bar:#f3f3f3; --line:#d4d4d4; --line2:#e6e6e6; --text:#1f1f1f; --muted:#6b6b6b;
  --accent:#2b579a; --accent-bg:#e8eef7; --red:#c00000; --green:#217346;
  --head:#f2f2f2;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:13px/1.4 Calibri,"Segoe UI",system-ui,Arial,sans-serif;color:var(--text);background:var(--bg);display:flex;flex-direction:column}
button,input,select,textarea{font:inherit;color:inherit}

/* balken */
.topbar{display:flex;align-items:center;gap:6px;padding:5px 10px;background:var(--bar);border-bottom:1px solid var(--line)}
.project-name{border:1px solid transparent;padding:3px 6px;font-weight:600;font-size:15px;min-width:280px;background:transparent}
.project-name:hover{border-color:var(--line)}
.project-name:focus{outline:1px solid var(--accent);background:#fff}
.spacer{flex:1}
.sep{width:1px;height:20px;background:var(--line);margin:0 4px}

.ribbon{display:flex;flex-wrap:wrap;gap:0;background:var(--bar);border-bottom:1px solid var(--line)}
.group{display:flex;align-items:center;gap:4px;padding:6px 12px 6px 10px;border-right:1px solid var(--line);position:relative}
.group-label{font-size:11px;color:var(--muted);margin-right:4px}

.btn{border:1px solid var(--line);background:#fff;border-radius:2px;padding:3px 10px;cursor:pointer;white-space:nowrap;list-style:none}
.btn:hover{background:#eef2f8;border-color:#b5c4dd}
.btn:disabled{opacity:.4;cursor:default}
.btn.flat{border-color:transparent;background:transparent}
.btn.flat:hover{background:#e4e4e4}
.btn.toggle.on{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.t-action{border-left:4px solid #8cc3d4}
.btn.t-decision{border-left:4px solid #f2c94c}
.btn.t-indication{border-left:4px solid #f4b183}
.btn.t-result{border-left:4px solid #a9c27e}
summary.btn::-webkit-details-marker{display:none}
select{border:1px solid var(--line);background:#fff;border-radius:2px;padding:3px 6px}

.dd{position:relative}
.dd-menu{position:absolute;right:0;top:calc(100% + 2px);background:#fff;border:1px solid var(--line);min-width:260px;padding:2px;z-index:30;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.dd-menu.left{right:auto;left:0;min-width:200px}
.dd-menu button{display:block;width:100%;text-align:left;border:0;background:none;padding:6px 10px;cursor:pointer}
.dd-menu button:hover{background:var(--accent-bg)}

/* layout */
.layout{flex:1;min-height:0;display:grid;grid-template-columns:1fr 340px}
.stage{display:flex;flex-direction:column;min-width:0;min-height:0}
.tabs{display:flex;gap:0;background:var(--bar);border-bottom:1px solid var(--line);padding:0 8px}
.tab{border:1px solid transparent;border-bottom:0;background:none;padding:5px 14px;cursor:pointer;color:var(--muted);margin-bottom:-1px}
.tab:hover{color:var(--text)}
.tab.active{background:#fff;border-color:var(--line);color:var(--text);font-weight:600;border-bottom:1px solid #fff}

/* canvas */
.canvas-wrap{position:relative;flex:1;min-height:0;overflow:hidden}
#svg{width:100%;height:100%;display:block;touch-action:none;cursor:default;background:#fff;font-family:Calibri,"Segoe UI",Arial,sans-serif}
#svg.panning{cursor:grabbing}
.pickbanner{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;padding:5px 12px;font-size:12px}

.node{cursor:pointer}
.node.sel .shape{stroke:var(--accent)!important;stroke-width:2!important;stroke-dasharray:none}
.node.dim{opacity:.3}
.node.conflict .shape{stroke:var(--red)!important;stroke-width:2!important}
.node .port{fill:#fff;stroke:var(--accent);stroke-width:1.5;opacity:0;cursor:crosshair}
.node:hover .port,.node.sel .port{opacity:1}
.node .handle{fill:#fff;stroke:var(--accent);stroke-width:1.5;cursor:nwse-resize}
.node .badge-open{animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.4}}
.node.free.sel .shape{stroke-dasharray:4 3!important}
.edge{cursor:pointer}
.edge .hit{stroke:transparent;stroke-width:14;fill:none}
.edge.chosen .line,.edge.taken .line{stroke:var(--accent)}
.edge.off{opacity:.25}
.edge.sel .line{stroke:var(--accent);stroke-width:2.2}
.edge:hover .line{stroke-width:2}

/* zijpaneel: eigenschappen als raster */
.panel{background:#fff;border-left:1px solid var(--line);overflow:auto;font-size:13px}
.p-title{background:var(--head);border-bottom:1px solid var(--line);padding:6px 10px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:6px}
.p-sec{background:var(--head);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:3px 10px;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.p-body{padding:8px 10px}
.row{display:grid;grid-template-columns:112px 1fr;align-items:center;gap:6px;margin-bottom:5px}
.row > span{color:var(--muted);font-size:12px}
.row.top{align-items:start}
.panel input[type=text],.panel input[type=number],.panel select,.panel textarea{width:100%;padding:3px 6px;border:1px solid var(--line);border-radius:2px;background:#fff;font-size:13px}
.panel textarea{resize:vertical}
.panel input:focus,.panel select:focus,.panel textarea:focus{outline:1px solid var(--accent);border-color:var(--accent)}
.hint{color:var(--muted);font-size:12px;margin:2px 0 6px}
.btn.small{padding:2px 8px;font-size:12px}
.btn.danger{color:var(--red)}
.crew-row{display:grid;grid-template-columns:86px 1fr 50px 22px;gap:4px;margin-bottom:4px;align-items:center}
.iconbtn{border:0;background:none;cursor:pointer;color:var(--muted);font-size:14px}
.iconbtn:hover{color:var(--red)}
.opt{display:grid;grid-template-columns:18px 1fr;gap:6px;align-items:start;padding:6px 8px;border:1px solid var(--line);margin-bottom:4px;cursor:pointer}
.opt.on{border-color:var(--accent);background:var(--accent-bg)}
.opt-prob{display:grid;grid-template-columns:1fr 70px;gap:6px;align-items:center;margin-bottom:5px}
.excl-list{max-height:150px;overflow:auto;border:1px solid var(--line);padding:2px 6px}
.excl-list label{display:flex;gap:6px;align-items:center;padding:2px 0}
.help{color:var(--muted);font-size:12px;padding-left:16px;margin:4px 0}
.help li{margin:3px 0}
.help b{color:var(--text)}
.swatches{display:flex;gap:4px;flex-wrap:wrap}
.swatch{width:22px;height:22px;border:1px solid #9a9a9a;cursor:pointer}
.swatch.on{outline:2px solid var(--accent);outline-offset:1px}
.swatch.none{background:linear-gradient(135deg,#fff 45%,#c00000 45%,#c00000 55%,#fff 55%)}

/* tabellen (Excel-achtig) */
table.xl{border-collapse:collapse;font-size:13px;background:#fff}
table.xl th,table.xl td{border:1px solid var(--line);padding:3px 8px;text-align:right;vertical-align:top;white-space:nowrap}
table.xl th{background:var(--head);font-weight:600}
table.xl td.l,table.xl th.l{text-align:left}
table.xl td.wrap{white-space:normal}
table.xl tfoot td{font-weight:700;background:#fafafa}
table.xl tr.sub td{background:#fafafa;color:var(--muted)}
table.xl .best{background:#e2f0d9;font-weight:600}
table.xl th.pick{cursor:pointer}
table.xl th.pick:hover{background:#e4e9f1}
table.xl th.cur{background:var(--accent);color:#fff}
table.mini{border-collapse:collapse;width:100%;font-size:12px}
table.mini th,table.mini td{border:1px solid var(--line);padding:2px 5px;text-align:right}
table.mini th:first-child,table.mini td:first-child{text-align:left}
table.mini th{background:var(--head)}

.plan-wrap{flex:1;min-height:0;overflow:auto;padding:14px 18px;background:#fff}
.kpis{display:flex;flex-wrap:wrap;gap:0;margin-bottom:14px;border:1px solid var(--line);width:fit-content;max-width:100%}
.kpi{padding:6px 16px;border-right:1px solid var(--line);min-width:150px}
.kpi:last-child{border-right:0}
.kpi .k{font-size:11px;color:var(--muted)}
.kpi .v{font-size:18px;font-weight:600}
.kpi .s{font-size:11px;color:var(--muted)}
.alert{padding:6px 10px;margin-bottom:8px;border-left:4px solid;font-size:12.5px}
.alert.warn{background:#fff8e1;border-color:#f2c94c}
.alert.err{background:#fdecea;border-color:var(--red)}
.alert.info{background:var(--accent-bg);border-color:var(--accent)}
.section{margin-bottom:18px}
.section h3{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:3px}
.gantt{display:grid;grid-template-columns:230px 1fr;gap:0}
.gantt .name{padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid var(--line2);font-size:12.5px}
.gantt .track{position:relative;height:22px;border-bottom:1px solid var(--line2);background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),var(--line2) calc(10% - 1px),var(--line2) 10%)}
.gantt .bar{position:absolute;top:4px;bottom:4px;background:#8cc3d4;border:1px solid #5aa0b5;min-width:3px}
.gantt .bar span{position:absolute;left:100%;margin-left:5px;font-size:11px;color:var(--muted);white-space:nowrap;top:-2px}
.gantt .axis{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;border-bottom:1px solid var(--line)}
.empty{color:var(--muted);padding:30px 4px}

.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#1f1f1f;color:#fff;padding:7px 14px;z-index:50;font-size:12.5px}

@media (max-width:900px){
  .layout{grid-template-columns:1fr;grid-template-rows:1fr 300px}
  .panel{border-left:0;border-top:1px solid var(--line)}
}
@media print{.topbar,.ribbon,.tabs,.panel{display:none}.layout{display:block}}