:root{--bg:#f6f9ff;--card:#fff;--border:#e6ecf5;--text:#14223a;--muted:#5a6b85;--primary:#2563eb;--primary2:#4f46e5;--ok:#22c55e;--danger:#ef4444;--shadow:0 12px 30px rgba(26,57,125,.10)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:15px/1.5 system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
.wrap{max-width:1300px;margin:0 auto;padding:12px}
header.top{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);box-shadow:0 6px 18px rgba(0,0,0,.05);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;gap:12px;flex-wrap:wrap}
.brand{display:flex;gap:8px;align-items:center;font-weight:900;color:var(--primary)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row-grow{margin-left:auto}
.subnav{border-top:1px solid var(--border);}
.input{padding:6px 8px;border:1px solid var(--border);border-radius:6px;font-size:13px;background:#fff}
.input.small{width:76px}.input.full{width:100%}
.btn{display:inline-block;padding:6px 12px;border-radius:8px;border:none;font-weight:700;font-size:13px;color:#fff;background-image:linear-gradient(135deg,var(--primary),var(--primary2));cursor:pointer}
.btn-line{background:#fff;color:#1b4dd8;border:1px solid var(--primary);border-radius:8px;padding:6px 10px;font-weight:700;font-size:13px;cursor:pointer}
.btn-line.danger{color:#b71c1c;border-color:#ef4444}
.btn-primary{background-color:#0d6efd;color:#fff;border:none;padding:8px 16px;border-radius:8px;font-weight:700;cursor:pointer;transition:background .15s,transform .05s;margin-left:auto}
.btn-primary:hover{background:#0b5ed7}.btn-primary:active{transform:translateY(1px)}
.badge{padding:2px 8px;border-radius:999px;border:1px solid #dbe7ff;background:#edf4ff;font-size:11px;font-weight:800;color:#1b4dd8}
.path{font-family:ui-monospace,Consolas,Menlo,monospace;background:#f1f5f9;border:1px solid #e2e8f0;padding:3px 6px;border-radius:6px}
.grid{display:grid;gap:10px}
@media(min-width:980px){ .cols-3{grid-template-columns:minmax(0,1fr) 60px minmax(0,3fr)} }
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.panel{display:flex;flex-direction:column;height:72vh;min-height:440px;position:relative;}
.panel.drag{outline:2px dashed #a5b4fc;}
.panel header{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--border)}
.list{flex:1;overflow:auto}
table{width:100%;border-collapse:separate;border-spacing:0 6px;padding:8px}
td,th{background:#fff;border:1px solid var(--border);padding:6px 8px}
th{position:sticky;top:0;background:#f8fbff;z-index:1}
tr td:first-child,tr th:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}
tr td:last-child,tr th:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}
tr.sel td{outline:2px solid #a5b4fc;background:#f5f7ff}
.muted{color:var(--muted)} .note{font-size:12px;color:#475569;padding:8px 10px}
.context{position:absolute;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.15);display:none;z-index:1000}
.context a{display:block;padding:6px 10px;color:#0f172a;text-decoration:none;border-bottom:1px solid #f1f5f9}
.context a:last-child{border-bottom:none}.context a:hover{background:#f1f5ff}
.arrowcol{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.arrowbtn{width:52px;height:52px;border-radius:12px;border:1px solid #dbe7ff;background:#fff;font-size:20px;cursor:pointer;box-shadow:var(--shadow)}
.arrowbtn:hover{background:#f8fbff}

/* Dialog / Editor */
.dialog-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;z-index:1500}
.dialog{
  width:min(100%,1000px);
  height:92vh;            /* vaste hoogte binnen viewport */
  max-height:92vh;
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 48px rgba(0,0,0,.35);
  overflow:hidden;        /* voorkomt extra scrollbalk buiten de editor */
}
.dialog.small{width:min(100%,520px);height:auto;max-height:92vh}
.dialog header{padding:8px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap;background:#fff;position:sticky;top:0;z-index:1}
.dialog .body{
  padding:10px;
  flex:1; min-height:0;   /* <<< belangrijk voor flex overflow fix */
  overflow:hidden;        /* geen aparte body scroll */
  display:flex;flex-direction:column;
}

/* Editor + regelnummers (alleen textarea scrolt) */
.editor-wrap{
  display:flex;align-items:stretch;gap:0;
  flex:1; min-height:0;   /* laat binnenste textarea scrollen */
}
.gutter{
  width:3.2em;background:#f1f5f9;border:1px solid #e2e8f0;border-right:none;border-radius:8px 0 0 8px;padding:8px 6px;text-align:right;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;color:#64748b;user-select:none;overflow:hidden;white-space:pre;
}
textarea.editor{
  width:100%;
  height:100%;            /* vult de resterende hoogte */
  border:1px solid #e2e8f0;border-left:none;border-radius:0 8px 8px 0;padding:8px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;
  resize:none;            /* voorkomt extra buiten-scroll en mismatch */
  overflow:auto;
}

/* Selection kleur (blauw) — werkt in textarea */
textarea.editor::selection{background:#cfe3ff;color:inherit}

.tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.toast{position:fixed;right:12px;bottom:12px;background:#0f172a;color:#e5e7eb;padding:8px 12px;border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.25);display:none;z-index:2000}
.toast.ok{background:#065f46}.toast.err{background:#7f1d1d}
footer{color:#6b7280}
#findBadge{margin-left:8px}