/* Editor4All - opmaak. Hetzelfde palet als de Architect (css/app.css):
   staalgrijs, hesjesgeel, het blauw van de looproutes. De opmaak van de
   Architect zelf komt uit het geladen project; dit bestand doet alleen
   het startscherm en de eigen schermen. */

:root {
  --bg: #14181a; --panel: #1d2225; --panel2: #232a2d; --line: #333c40;
  --ink: #dfe5e6; --ink-dim: #8c9a9e; --hivis: #f2b705; --route: #5fa8c9;
  --ok: #6fa36b; --bad: #d24b3e; --warn: #d8913a;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; }
body { display: flex; flex-direction: column; overflow: hidden; }

/* ---------------- startscherm ---------------- */
.e4a-start { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 24px; }
.e4a-start.slepen { outline: 3px dashed var(--hivis); outline-offset: -14px; }
.e4a-startdoos { position: relative; width: min(560px, 100%); background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 34px 36px 26px; text-align: center; }
.e4a-startdoos h1 { margin: 0; font-size: 30px; letter-spacing: .14em; text-transform: uppercase; color: var(--hivis); }
.e4a-startsub { margin: 4px 0 20px; font: 12px var(--mono); color: var(--ink-dim); }
.e4a-startdoos p { line-height: 1.55; }
.e4a-startknoppen { display: flex; gap: 10px; justify-content: center; margin: 18px 0 8px; }
.e4a-startknoppen .btn { padding: 10px 22px; font-size: 14px; }
.e4a-starttalen { position: absolute; right: 14px; top: 12px; }
.e4a-startvoet { margin-top: 18px; }
.e4a-status { min-height: 1.4em; font: 12px var(--mono); color: var(--route); }
.e4a-status.fout { color: var(--bad); }
.e4a-klein { font-size: 11px; color: var(--ink-dim); line-height: 1.5; }
.e4a-pad { padding: 14px 18px; }

/* de knoppen ook zonder het project (startscherm) */
.btn { background: var(--panel2); border: 1px solid var(--line); color: var(--ink); padding: 7px 14px; border-radius: 3px;
  cursor: pointer; font: inherit; font-size: 13px; }
.btn:hover { border-color: var(--hivis); color: var(--hivis); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.sm { padding: 3px 9px; font-size: 12px; }
.btn.wide { width: 100%; margin-top: 8px; }
.btn.e4a-primair, .e4a-chip-geel { background: var(--hivis); border-color: var(--hivis); color: #14181a; font-weight: 600; }
.btn.e4a-primair:hover { filter: brightness(1.07); color: #14181a; }
.chip { background: var(--panel2); border: 1px solid var(--line); color: var(--ink-dim); padding: 4px 10px; border-radius: 3px;
  cursor: pointer; font: 500 11px var(--mono); letter-spacing: .06em; }
.chip.on { background: var(--hivis); border-color: var(--hivis); color: var(--bg); }
.chips { display: flex; gap: 3px; }
.chip.e4a-chip-geel { background: var(--hivis); border-color: var(--hivis); color: #14181a; font-weight: 600; }
.chip.e4a-chip-geel:hover { filter: brightness(1.08); }
header.top .chip { white-space: nowrap; }
.e4a-waarschuwing { background: #3a2a14; color: #f3c27a; padding: 8px 18px; font-size: 13px; border-bottom: 1px solid var(--line); }

/* ---------------- eigen schermen ---------------- */
.e4a-pane.on { display: flex; }
.e4a-scroll { overflow-y: auto; }
.e4a-pane .stage { background: var(--bg); }
.e4a-dl-rechts { width: 380px !important; flex: 0 0 380px !important; }
.e4a-pr-rechts { width: 330px !important; flex: 0 0 330px !important; }
.e4a-pane h2 { font-size: 16px; margin: 0; }
.e4a-pane textarea, .e4a-pane input[type=text], .e4a-pane input[type=number], .e4a-pane input[type=search], .e4a-pane select,
.e4a-modal textarea, .e4a-modal input, .e4a-modal select {
  background: var(--panel2); border: 1px solid var(--line); color: var(--ink); border-radius: 3px; padding: 6px 8px; font: inherit; width: 100%; }
.e4a-pane textarea:focus, .e4a-pane input:focus, .e4a-pane select:focus, .e4a-modal input:focus, .e4a-modal textarea:focus { outline: 1px solid var(--hivis); border-color: var(--hivis); }
.e4a-pane textarea { resize: vertical; font-family: var(--sans); line-height: 1.45; }
.e4a-pane code, .e4a-modal code { font: 11px var(--mono); color: var(--ink-dim); }

/* project */
.e4a-pr-kop { padding: 14px 18px 6px; }
.e4a-wlijst { padding: 0 18px; }
.e4a-wrij { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 3px;
  margin-bottom: 4px; background: var(--panel); cursor: pointer; }
.e4a-wrij.on { border-color: var(--hivis); }
.e4a-wrij code { flex: 1 1 auto; color: var(--ink); }
.e4a-wsoort { font: 600 10px var(--mono); text-transform: uppercase; padding: 2px 6px; border-radius: 2px; min-width: 76px; text-align: center; }
.e4a-wsoort.nieuw { background: #23412a; color: #9fd69a; }
.e4a-wsoort.gewijzigd { background: #3a3215; color: #f2d36b; }
.e4a-wsoort.verwijderd { background: #45201c; color: #f19a8f; }
.e4a-bestanden { padding: 0 8px 12px; font: 11px var(--mono); }
.e4a-best { padding: 3px 6px; border-radius: 2px; cursor: pointer; color: var(--ink-dim); word-break: break-all; }
.e4a-best:hover { background: var(--panel2); color: var(--ink); }
.e4a-best.on { background: var(--panel2); color: var(--hivis); }
.e4a-best.nieuw { color: #9fd69a; } .e4a-best.gewijzigd { color: #f2d36b; }
.e4a-code, .e4a-diff { margin: 0 18px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 10px 12px;
  font: 11.5px/1.5 var(--mono); white-space: pre-wrap; word-break: break-word; }
.e4a-diff div { white-space: pre-wrap; }
.e4a-diff-plus { background: #1d3a22; color: #b8ecb2; }
.e4a-diff-min { background: #3e1f1b; color: #f2b0a7; }
.e4a-diff-zelfde { color: var(--ink-dim); }
.e4a-diff-gat { color: var(--ink-dim); text-align: center; }
.e4a-meldingen { margin: 0; padding-left: 16px; font: 11px var(--mono); color: #f3c27a; }

/* ---------------- venster ---------------- */
.e4a-modal-achter { position: fixed; inset: 0; background: rgba(5, 8, 9, .66); display: flex; align-items: center; justify-content: center; z-index: 50; }
.e4a-modal { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; width: min(520px, 94vw); max-height: 88vh;
  display: flex; flex-direction: column; box-shadow: 0 18px 60px rgba(0, 0, 0, .5); }
.e4a-modal.breed { width: min(980px, 96vw); }
.e4a-modal h2 { margin: 0; padding: 16px 20px 10px; font-size: 16px; }
.e4a-modal-lijf { padding: 0 20px 10px; overflow-y: auto; line-height: 1.5; }
.e4a-modal-knoppen { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--line); }
.e4a-veld { display: block; margin: 10px 0; }
.e4a-veld .lab { display: block; font-size: 11px; color: var(--ink-dim); margin-bottom: 4px; }
.e4a-veld.chk { display: flex; gap: 8px; align-items: center; }
.e4a-veld.chk input { width: auto; }
.e4a-veld .hint { display: block; color: var(--ink-dim); margin-top: 3px; font-size: 11px; }
#e4a-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--panel2); border: 1px solid var(--line);
  padding: 8px 14px; border-radius: 3px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 60; }
#e4a-toast.on { opacity: 1; }

/* tabellen in vensters (analyse, toets) */
.e4a-tabel { width: 100%; border-collapse: collapse; font-size: 12px; margin: 6px 0 14px; }
.e4a-tabel th, .e4a-tabel td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.e4a-tabel th { color: var(--ink-dim); font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.e4a-tabel td.getal { text-align: right; font-family: var(--mono); }
.e4a-kolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px; }
.e4a-h4 { margin: 12px 0 4px; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--hivis); }
.e4a-goed { color: var(--ok); } .e4a-fout { color: var(--bad); } .e4a-let { color: var(--warn); }
.e4a-balk { height: 6px; background: var(--panel2); border-radius: 3px; overflow: hidden; margin-top: 3px; }
.e4a-balk i { display: block; height: 100%; background: var(--hivis); }

/* ---------------- dialoog editor ---------------- */
.e4a-dl-links .block { padding: 10px 12px; }
.e4a-groep { border-bottom: 1px solid var(--line); }
.e4a-groepkop { display: flex; align-items: center; gap: 6px; padding: 8px 12px; cursor: pointer; font: 600 10px var(--mono);
  text-transform: uppercase; letter-spacing: .14em; color: var(--ink-dim); }
.e4a-groepkop:hover { color: var(--ink); }
.e4a-groepkop .tel { margin-left: auto; }
.e4a-groepkop .pijl { width: 10px; display: inline-block; }
.e4a-spreker { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 22px; cursor: pointer; font-size: 13px; }
.e4a-spreker:hover { background: var(--panel2); }
.e4a-spreker.on { background: var(--panel2); box-shadow: inset 3px 0 0 var(--hivis); }
.e4a-spreker .naam { flex: 1 1 auto; }
.e4a-spreker .n { font: 11px var(--mono); color: var(--ink-dim); }
.e4a-spreker .n.vol { color: var(--hivis); }
.e4a-tag { font: 600 9px var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 1px 5px; border-radius: 2px;
  background: var(--panel2); border: 1px solid var(--line); color: var(--ink-dim); }
.e4a-tag.nieuw { color: #9fd69a; border-color: #2f5a36; }
.e4a-tag.uit { color: #f19a8f; border-color: #5a2f2a; }
.e4a-tag.start { color: #14181a; background: var(--hivis); border-color: var(--hivis); }
.e4a-tag.stem { color: var(--route); border-color: #2b4c5a; }

.e4a-dl-mid { padding: 0 0 60px; }
.e4a-dl-kop { padding: 16px 22px 12px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 2; }
.e4a-dl-kop .regel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.e4a-dl-kop .knoppen { margin-left: auto; display: flex; gap: 6px; }
.e4a-dl-kop .info { margin-top: 4px; font: 11px var(--mono); color: var(--ink-dim); }
.e4a-leeg { padding: 40px 22px; color: var(--ink-dim); line-height: 1.6; max-width: 640px; }

.e4a-gesprek { margin: 16px 22px 0; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.e4a-gesprek.sel { border-color: var(--hivis); }
.e4a-gkop { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.e4a-gkop b { font-size: 14px; }
.e4a-gkop .ruimte { flex: 1 1 auto; }
.e4a-trigger { padding: 6px 12px; font-size: 12px; color: var(--ink-dim); border-bottom: 1px solid var(--line); }
.e4a-trigger.leeg { font-style: italic; }
.e4a-nodes { padding: 8px 10px 10px; }
.e4a-node { border: 1px solid var(--line); border-radius: 3px; background: var(--bg); margin-bottom: 8px; }
.e4a-node.sel { border-color: var(--hivis); }
.e4a-node.start { box-shadow: inset 3px 0 0 var(--hivis); }
.e4a-nkop { display: flex; align-items: center; gap: 6px; padding: 5px 8px; cursor: pointer; }
.e4a-nkop .ruimte { flex: 1 1 auto; }
.e4a-node > textarea { display: block; width: calc(100% - 16px); margin: 0 8px 6px; min-height: 40px; }
.e4a-opties { padding: 0 8px 8px 22px; }
.e4a-optie { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; padding: 2px 0; border-radius: 3px; }
.e4a-optie.sel { background: var(--panel2); box-shadow: 0 0 0 1px var(--hivis); }
.e4a-optie > input[type=text] { flex: 1 1 auto; }
.e4a-optie > select { width: 150px; flex: 0 0 150px; }
.e4a-optie .pijl { color: var(--ink-dim); }
.e4a-greep { cursor: grab; color: var(--ink-dim); padding: 0 3px; user-select: none; font-size: 13px; }
.e4a-greep:active { cursor: grabbing; }
.e4a-x { background: none; border: none; color: var(--ink-dim); cursor: pointer; font-size: 15px; padding: 0 4px; }
.e4a-x:hover { color: var(--bad); }
.e4a-mini { background: none; border: 1px solid var(--line); color: var(--ink-dim); cursor: pointer; border-radius: 2px; font-size: 11px; padding: 1px 6px; }
.e4a-mini:hover { color: var(--hivis); border-color: var(--hivis); }
.e4a-badges { display: flex; gap: 3px; }
.e4a-drop-voor { box-shadow: 0 -3px 0 var(--hivis) !important; }
.e4a-drop-na { box-shadow: 0 3px 0 var(--hivis) !important; }
.e4a-drop-in { outline: 2px dashed var(--hivis); }
.e4a-sleept { opacity: .45; }
.e4a-voeg { margin: 4px 10px 0; }

.e4a-subtabs { display: flex; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 2; }
.e4a-subtabs button { flex: 1 1 0; background: none; border: none; border-bottom: 2px solid transparent; color: var(--ink-dim);
  padding: 10px 6px; cursor: pointer; font: inherit; font-size: 12px; }
.e4a-subtabs button.on { color: var(--hivis); border-bottom-color: var(--hivis); }
.e4a-eig { padding: 4px 14px 30px; }
.e4a-eig h3 { margin: 16px 0 6px; font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-dim); }
.e4a-dl-rechts label.lab { display: block; font-size: 11px; color: var(--ink-dim); margin: 8px 0 3px; }
.e4a-v { min-width: 0; }
.e4a-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.e4a-na { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.e4a-na .e4a-tag { display: inline-flex; gap: 4px; align-items: center; text-transform: none; font-weight: 500; font-size: 10px; }
.e4a-na .e4a-tag button { background: none; border: none; color: inherit; cursor: pointer; padding: 0; }
.e4a-rij { display: flex; gap: 6px; align-items: center; }
.e4a-rij > * { flex: 1 1 auto; }
.e4a-rij > .btn { flex: 0 0 auto; }

.e4a-proef { padding: 10px 14px 30px; }
.e4a-proef .regels { margin-top: 12px; }
.e4a-proef .r { padding: 7px 10px; border-radius: 3px; margin-bottom: 6px; line-height: 1.45; font-size: 13px; }
.e4a-proef .r.npc { background: var(--panel2); }
.e4a-proef .r.speler { background: #1e2c33; color: #cfe6f1; margin-left: 24px; }
.e4a-proef .r .wie { display: block; font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-dim); margin-bottom: 2px; }
.e4a-proef .keuze { display: block; width: 100%; text-align: left; margin: 4px 0; }
.e4a-proef .verborgen { font-size: 11px; color: var(--ink-dim); padding: 3px 8px; border-left: 2px solid var(--line); margin: 3px 0; }
.e4a-proef .einde { text-align: center; color: var(--ink-dim); font-style: italic; margin: 12px 0; }
.e4a-proef .van { font: 9px var(--mono); color: var(--route); margin-left: 6px; }
.e4a-ctl { padding: 10px 14px 30px; }
.e4a-cm { padding: 6px 8px; border-left: 3px solid var(--line); margin-bottom: 5px; background: var(--panel2); cursor: pointer; font-size: 12px; line-height: 1.4; }
.e4a-cm.fout { border-left-color: var(--bad); } .e4a-cm.let { border-left-color: var(--warn); } .e4a-cm.info { border-left-color: var(--route); }
.e4a-cm code { display: block; margin-top: 2px; }

/* kadaster en ontwerp: het blok van Editor4All */
.e4a-blok h3 { color: var(--hivis) !important; }
.e4a-blok select { width: 100%; margin-top: 4px; background: var(--panel2); border: 1px solid var(--line); color: var(--ink); border-radius: 3px; padding: 6px; }

/* functies en instellingen */
.e4a-fn-rechts, .e4a-in-rechts { width: 340px !important; flex: 0 0 340px !important; }
.e4a-fn-form .e4a-pad { max-width: 760px; }
.e4a-fn-blok { margin-top: 18px; }
.e4a-fn-blok h3, .e4a-fn-form h3 { margin: 0 0 4px; font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-dim); }
.e4a-fn-eis { margin: 4px 0; }
.e4a-fn-form label.lab { display: block; font-size: 11px; color: var(--ink-dim); margin: 8px 0 3px; }
.e4a-fn-form .e4a-tabel input { width: 100%; }
.e4a-fn-lijst .e4a-spreker code { font-size: 10px; }
.e4a-in-rij { display: grid !important; grid-template-columns: minmax(140px, 1fr) 130px 90px 28px; gap: 8px; align-items: center; margin: 3px 0; }
.e4a-in-lab { font-size: 12px; }
.e4a-fout { color: var(--bad); }
.e4a-in-uitleg { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: help; }

/* weekbalans */
.e4a-wb-links { width: 300px !important; flex: 0 0 300px !important; }
.e4a-wb-rechts { width: 370px !important; flex: 0 0 370px !important; }
.e4a-wb-links label.lab { display: block; font-size: 11px; color: var(--ink-dim); margin: 8px 0 3px; }
.e4a-wb-links select, .e4a-wb-links input[type=number] { width: 100%; background: var(--panel2); border: 1px solid var(--line); color: var(--ink); border-radius: 3px; padding: 5px 6px; font: inherit; }
.e4a-wb-dv { border-bottom: 1px dashed var(--line); padding: 6px 0; }
.e4a-wb-dv > select { margin-bottom: 4px; }
.e4a-wb-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.e4a-wb-kaart { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 3px; padding: 8px 10px; }
.e4a-wb-kaart.min { border-left-color: var(--bad); } .e4a-wb-kaart.plus { border-left-color: var(--ok); }
.e4a-wb-kaart .soort { font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-dim); }
.e4a-wb-kaart .getal { font: 600 18px var(--mono); margin: 2px 0; }
.e4a-wb-tabel { overflow-x: auto; }
.e4a-wb-tabel td, .e4a-wb-tabel th { white-space: nowrap; }
.e4a-wb-groep td { background: var(--panel2); font: 600 10px var(--mono) !important; text-transform: uppercase; letter-spacing: .1em; color: var(--hivis); }
.e4a-wb-daalt { color: #e9a79d; } .e4a-wb-stijgt { color: #a6d9a0; }
.e4a-lijn polyline, .e4a-lijn line { fill: none; stroke: var(--ink-dim); stroke-width: 1.5; }
.e4a-lijn.min polyline { stroke: var(--bad); } .e4a-lijn.plus polyline { stroke: var(--ok); }
.e4a-wb-week { margin-bottom: 6px; }

/* dorpsgenerator */
.e4a-modal.e4a-dg { width: min(1280px, 97vw); height: 90vh; }
.e4a-dg .e4a-modal-lijf { flex: 1 1 auto; }
.e4a-dg-kolommen { display: grid; grid-template-columns: 280px 1fr 300px; gap: 22px; }
.e4a-dg h3 { margin: 4px 0 8px; font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--hivis); }
.e4a-dg-mid { max-height: calc(90vh - 150px); overflow-y: auto; }
.e4a-dg-mid select { padding: 3px 4px; }
.e4a-dg-uit td { opacity: .55; }
.e4a-dg-meter { margin-bottom: 12px; }
.e4a-dg-meter .e4a-rij span { font-size: 12px; color: var(--ink-dim); }
.e4a-dg-meter b { flex: 0 0 auto; font-family: var(--mono); }
.e4a-dg-knoppen { margin-top: 16px; }
.e4a-dg input[type=range] { width: 100%; }

/* de kop: compact, en bij weinig ruimte de tabbladen op een eigen regel */
header.top .brand { min-width: 0; }
.e4a-menuhouder { position: relative; }
.e4a-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: var(--panel); border: 1px solid var(--line);
  border-radius: 4px; padding: 6px; z-index: 40; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.e4a-menuhouder.open .e4a-menu { display: block; }
.e4a-menu .chips { flex-direction: column; gap: 4px; }
.e4a-menu .chip { text-align: left; white-space: nowrap; }
.chip.e4a-menuknop { min-width: 64px; }
.chip.e4a-teller { min-width: 28px; text-align: center; }
.chip.e4a-teller.vol { border-color: var(--hivis); color: var(--hivis); }
header.top.e4a-twee-rijen { flex-wrap: wrap; row-gap: 6px; }
header.top.e4a-twee-rijen nav.tabs { order: 3; flex: 1 0 100%; margin-left: 0; overflow-x: auto; scrollbar-width: thin; }
header.top.e4a-twee-rijen .brand p { display: none; }
/* bouwgenerator */
.e4a-modal.e4a-bg { width: min(900px, 96vw); }
.e4a-bg-kolommen { display: grid; grid-template-columns: 1fr 300px; gap: 24px; }
.e4a-bg h3 { margin: 4px 0 8px; font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--hivis); }
.e4a-bg input[type=range] { width: 100%; }
/* niets in de kop laten omlopen: dan ziet de bewaker het overlopen, en krijgen de tabbladen netjes een eigen regel */
header.top nav.tabs { flex-wrap: nowrap; }
header.top .tab { white-space: nowrap; }
header.top .brand h1, header.top .brand p { white-space: nowrap; }
header.top .topright { flex-wrap: nowrap; }

/* addons, controle, zoeken */
.e4a-ad-links { width: 280px !important; flex: 0 0 280px !important; }
.e4a-ad-rechts { width: 360px !important; flex: 0 0 360px !important; }
.e4a-ad-links .e4a-spreker { align-items: flex-start; gap: 8px; }
.e4a-ad-links .e4a-spreker input[type=checkbox] { margin-top: 3px; }
.e4a-ad-item { margin: 3px 0; flex-wrap: wrap; }
.e4a-ad-item code { font-size: 11px; }
.e4a-ad-drop { border: 1px dashed var(--line); border-radius: 4px; padding: 16px; text-align: center; color: var(--ink-dim); margin: 8px 0; }
.e4a-ad-drop.over { border-color: var(--hivis); color: var(--hivis); background: rgba(242, 183, 5, .06); }
.e4a-meldingen li.e4a-goed { color: #a6d9a0; }
.e4a-zk-lijst { max-height: 60vh; overflow-y: auto; margin-top: 10px; }
.e4a-zk-r { padding: 5px 8px; border-radius: 3px; cursor: pointer; }
.e4a-zk-r:hover { background: var(--panel2); }

/* tabblad Pool (10 oktober 2026) */
.e4a-pl-links { width: 300px !important; flex: 0 0 300px !important; }
.e4a-pl-rechts { width: 330px !important; flex: 0 0 330px !important; }
.e4a-pl-links label.lab { display: block; font-size: 11px; color: var(--ink-dim); margin: 8px 0 3px; }
.e4a-pl-links select, .e4a-pl-links input[type=number], .e4a-pl-links input[type=text] { width: 100%; background: var(--panel2); border: 1px solid var(--line); color: var(--ink); border-radius: 3px; padding: 5px 6px; font: inherit; box-sizing: border-box; }
.e4a-pl-links .e4a-rij input, .e4a-pl-links .e4a-rij select { width: auto; }
.e4a-pl-nav { display: flex; flex-direction: column; gap: 4px; }
.e4a-pl-nav .btn { text-align: left; }
.e4a-pl-nav .btn.on { border-color: var(--accent, #f2b705); color: var(--accent, #f2b705); }
.e4a-pl-tabel input { width: 52px; background: var(--panel2); border: 1px solid var(--line); color: var(--ink); border-radius: 3px; padding: 3px 4px; font: inherit; }
.e4a-pl-namen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.e4a-pl-namen textarea { width: 100%; height: 420px; box-sizing: border-box; background: var(--panel2); border: 1px solid var(--line); color: var(--ink); border-radius: 3px; padding: 6px; font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace; }
.e4a-pl-grafiek { width: 100%; height: auto; max-width: 100%; }
.e4a-pl-grafiek .raster { stroke: var(--line); stroke-width: 1; }
.e4a-pl-grafiek .as { fill: var(--ink-dim); font-size: 10px; }
.e4a-pl-grafiek path { fill: none; stroke-width: 2; }
.e4a-pl-grafiek .uitzend, .e4a-pl-uitzend { stroke: #f2b705; color: #f2b705; }
.e4a-pl-grafiek .site, .e4a-pl-site { stroke: #4fa3e0; color: #4fa3e0; }
@media (max-width: 1280px) { .e4a-pl-namen { grid-template-columns: 1fr; } .e4a-pl-namen textarea { height: 220px; } }
/* tien tabbladen (sinds de Pool): in de stand met twee rijen lopen de tabbladen door op een volgende regel */
header.top.e4a-twee-rijen nav.tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 2px; }

/* ---------------- Personeel: rooster, opvolging, ontslag (13 oktober 2026) ---------------- */
.e4a-ps-links { width: 280px !important; flex: 0 0 280px !important; }
.e4a-ps-rechts { width: 340px !important; flex: 0 0 340px !important; }
.e4a-ps-acties { display: flex; flex-wrap: wrap; gap: 6px; }
.e4a-ps-acties .btn { flex: 1 1 auto; }
.e4a-ps-lijst { padding-bottom: 12px; }
.e4a-ps-naam { max-width: 520px; margin-bottom: 10px; }
.e4a-ps-naam input { width: 100%; }
.e4a-ps-naam .lab { display: block; font-size: 11px; color: var(--ink-dim); margin-bottom: 3px; }
.e4a-ps-palet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; }
.e4a-ps-stuk { display: inline-block; padding: 5px 10px; border-radius: 3px; font: 600 12px var(--sans); cursor: grab; user-select: none; touch-action: none; }
.e4a-ps-stuk small { font-weight: 400; opacity: .8; }
.e4a-ps-stuk.vol { background: var(--hivis); color: #14181a; }
.e4a-ps-stuk.half { background: var(--route); color: #0d1a20; }
.e4a-ps-palet .e4a-klein { flex: 1 1 260px; }
.e4a-ps-plaats { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px 10px; margin-bottom: 12px; }
.e4a-ps-plaatskop { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.e4a-ps-plaatskop b { font: 600 12px var(--mono); color: var(--hivis); min-width: 18px; }
.e4a-ps-plaatskop span { flex: 1 1 auto; font-weight: 600; }
.e4a-ps-plaatskop select { max-width: 220px; }
.e4a-ps-raster { font-size: 11px; }
.e4a-ps-rij { display: grid; grid-template-columns: 30px 176px minmax(0, 1fr); align-items: center; min-height: 24px; border-radius: 2px; }
.e4a-ps-rij.kop { min-height: 16px; color: var(--ink-dim); font: 10px var(--mono); }
.e4a-ps-rij .dag { color: var(--ink-dim); font: 600 11px var(--mono); }
.e4a-ps-rij .keus { display: flex; gap: 3px; padding-right: 6px; }
.e4a-ps-rij .keus select { font-size: 11px; padding: 2px 3px; min-width: 0; }
.e4a-ps-rij .keus select:first-child { flex: 1 1 auto; }
.e4a-ps-rij .uren { position: relative; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); height: 22px; }
.e4a-ps-rij.kop .uren { height: 14px; }
.e4a-ps-rij .uur { border-left: 1px solid var(--line); padding-left: 2px; overflow: hidden; }
.e4a-ps-rij .cel { border-left: 1px solid #2a3236; border-bottom: 1px solid #2a3236; }
.e4a-ps-rij .cel.open { background: rgba(242, 183, 5, .07); }
.e4a-ps-rij .cel.door { background: repeating-linear-gradient(135deg, rgba(242, 183, 5, .35) 0 3px, transparent 3px 6px); }
.e4a-ps-rij.doel { outline: 1px dashed var(--hivis); outline-offset: 1px; }
.e4a-ps-rij .balk { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; font: 600 10px var(--mono); line-height: 18px; padding: 0 4px;
  overflow: hidden; white-space: nowrap; cursor: grab; touch-action: none; user-select: none; z-index: 1; }
.e4a-ps-rij .balk.vol { background: var(--hivis); color: #14181a; }
.e4a-ps-rij .balk.half { background: var(--route); color: #0d1a20; }
.e4a-ps-rij .balk.flex { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .28) 0 4px, transparent 4px 8px); }
.e4a-ps-rij .balk.on { box-shadow: 0 0 0 2px #fff; }
.e4a-ps-keuze { margin: 6px 0 2px; font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.e4a-ps-uitslag { margin-top: 6px; font-size: 11px; line-height: 1.5; }
.e4a-ps-erbij { display: flex; gap: 6px; align-items: center; margin: 4px 0 16px; max-width: 520px; }
.e4a-ps-erbij select { flex: 1 1 auto; }
.e4a-ps-totaal .cel.tel { background: rgba(111, 163, 107, calc(.08 + var(--n) * .55)); text-align: center; font: 10px/21px var(--mono); color: #e9f3e8; }
.e4a-ps-totaal .cel.tel.open { box-shadow: inset 0 0 0 1px rgba(242, 183, 5, .55); }
.e4a-ps-totaal .cel.tel.gat { background: rgba(210, 75, 62, .6); }
.e4a-ps-totaal .cel.tel.buiten { background: rgba(95, 168, 201, calc(.2 + var(--n) * .45)); }
.e4a-ps-hokjes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 10px; }
.e4a-ps-hokje { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 8px; }
.e4a-ps-hokje.voorstel { border-style: dashed; }
.e4a-ps-hokje .kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.e4a-ps-hokje .kop code { font-size: 10px; }
.e4a-ps-hokje .kop .e4a-klein { margin-left: auto; }
.e4a-ps-hokje .voet { display: flex; gap: 6px; margin-top: 6px; }
.e4a-ps-kaarten { list-style: none; margin: 0; padding: 0; }
.e4a-ps-kaart { display: flex; align-items: center; gap: 6px; padding: 4px 6px; margin-bottom: 3px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 3px; font-size: 12px; }
.e4a-ps-kaart .greep { cursor: grab; touch-action: none; user-select: none; color: var(--ink-dim); padding: 0 2px; }
.e4a-ps-kaart .nr { font: 600 11px var(--mono); color: var(--hivis); min-width: 16px; }
.e4a-ps-kaart .wie { flex: 1 1 auto; line-height: 1.3; }
.e4a-ps-kaart .wie em { font-style: normal; font-size: 10px; color: var(--ink-dim); }
.e4a-ps-kaart.nieuw { box-shadow: inset 3px 0 0 var(--warn); }
.e4a-ps-kaart.weg { opacity: .5; text-decoration: line-through; }
.e4a-ps-kaart.doel { outline: 1px dashed var(--hivis); }
.e4a-ps-spook { position: fixed; z-index: 99; pointer-events: none; background: var(--panel2); border: 1px solid var(--hivis); color: var(--ink);
  border-radius: 3px; padding: 3px 8px; font: 600 11px var(--mono); max-width: 240px; white-space: nowrap; overflow: hidden; opacity: .92; }
.e4a-ps-regels { margin: 0; padding-left: 16px; font-size: 12px; line-height: 1.5; color: var(--ink-dim); }
@media (max-width: 1100px) {
  .e4a-ps-links { width: 220px !important; flex-basis: 220px !important; }
  .e4a-ps-rechts { display: none; }
  .e4a-ps-rij { grid-template-columns: 26px 138px minmax(0, 1fr); }
}
.e4a-ps-code { margin: 0 !important; white-space: pre !important; overflow-x: auto; font-size: 10.5px; }
.e4a-ps-kaart .wie { min-width: 0; overflow-wrap: anywhere; }
.e4a-ps-kaart .e4a-mini { flex: 0 0 auto; }

/* ---------------- Notes: de aantekeningen in de code ---------------- */
#pane-notes .nt-links { width: 290px !important; flex: 0 0 290px !important; padding: 12px 14px 24px; box-sizing: border-box; }
#pane-notes .nt-rechts { width: 430px !important; flex: 0 0 430px !important; padding: 12px 14px 24px; box-sizing: border-box; }
#pane-notes .nt-mid { padding: 0 18px 28px; }
.nt-zoek { width: 100%; box-sizing: border-box; margin: 10px 0 2px; }
.nt-label { margin: 16px 0 6px !important; }
#pane-notes .nt-links .chips { display: flex; flex-wrap: wrap; gap: 4px; }
#pane-notes .nt-links .chip { white-space: nowrap; }
.nt-mappen { display: flex; flex-direction: column; gap: 2px; }
.nt-map { display: flex; justify-content: space-between; gap: 8px; background: none; border: 0; border-radius: 6px; color: var(--ink); padding: 5px 8px; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.nt-map:hover { background: var(--panel2); }
.nt-map.on { background: var(--panel2); color: var(--hivis); }
.nt-map span, .nt-vink span, .nt-bestand span { color: var(--ink-dim); }
.nt-vink { display: flex; gap: 6px; align-items: baseline; font-size: 13px; margin: 5px 0; cursor: pointer; }
.nt-vink span { margin-left: auto; padding-left: 6px; }
.nt-balk { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 0 10px; background: var(--bg); border-bottom: 1px solid var(--line); }
.nt-telling { margin-right: auto; font-size: 13px; color: var(--ink-dim); }
.nt-bestand { display: flex; gap: 10px; align-items: center; margin: 20px 0 6px; font-family: var(--mono); font-size: 12.5px; color: var(--route); }
.nt-bestand label { cursor: pointer; }
.nt-kaart { margin: 0 0 8px; padding: 8px 12px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.nt-kaart.gekozen { border-color: var(--hivis); }
.nt-kaart.nt-beschermd { border-left: 3px solid var(--warn); }
.nt-kaartkop { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-dim); }
.nt-plek { font-family: var(--mono); font-size: 11.5px; }
.nt-knoppen { display: flex; gap: 6px; margin-left: auto; }
.btn.nt-weg { color: var(--bad); }
.e4a-tag.nt-tag-slot { color: var(--warn); }
.e4a-tag.nt-tag-gesch { color: var(--route); }
.e4a-tag.nt-tag-dood { color: var(--bad); }
.nt-tekst { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.nt-tekst p { margin: 0 0 4px; }
.nt-wit { height: 6px; }
.nt-vast, .nt-omgezet { font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; color: var(--ink); }
.nt-dim { margin: 0 0 4px; color: var(--ink-dim); font-style: italic; }
.nt-orig { margin-top: 6px; font-size: 12px; color: var(--ink-dim); }
.nt-orig summary { cursor: pointer; }
.nt-anker { margin-top: 6px; overflow: hidden; font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); white-space: nowrap; text-overflow: ellipsis; }
.nt-bewerk { display: block; width: 100%; box-sizing: border-box; min-height: 80px; margin-top: 8px; font-family: var(--mono); font-size: 13px; }
.nt-bewerkknoppen { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 6px; }
.nt-bewerkknoppen .e4a-klein { margin-right: auto; }
.nt-meer { margin: 10px 0; }
.nt-uitlegslot { padding: 8px 10px; border-left: 3px solid var(--warn); background: var(--panel); font-size: 13px; }
.nt-uitlegdood { padding: 8px 10px; border-left: 3px solid var(--bad); background: var(--panel); font-size: 13px; }
.nt-context { overflow-x: auto; padding: 6px 0; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; font-family: var(--mono); font-size: 12px; white-space: pre; }
.nt-context div { padding: 0 10px 0 0; }
.nt-context .aan { background: rgba(242, 183, 5, 0.13); }
.nt-context b { display: inline-block; width: 3.6em; margin-right: 10px; color: var(--ink-dim); font-weight: normal; text-align: right; }

/* ---------------- vrijetijd (22 oktober 2026, punt 2.1) ---------------- */
.e4a-vt-links { width: 290px !important; flex: 0 0 290px !important; }
.e4a-vt-rechts { width: 340px !important; flex: 0 0 340px !important; }
.e4a-vt-links input[type=text], .e4a-vt-links input[type=number], .e4a-vt-links select, .e4a-vt-rechts select, .e4a-vt-rechts input[type=number] { width: 100%; }
.e4a-vt-links .lab, .e4a-vt-rechts .lab { display: block; font-size: 11px; color: var(--ink-dim); margin: 8px 0 3px; }
.e4a-vt-tweeling { display: flex; gap: 8px; }
.e4a-vt-tweeling > span { flex: 1 1 0; min-width: 0; }
.e4a-vt-tag { display: inline-block; font: 600 9px var(--mono); text-transform: uppercase; letter-spacing: .05em; padding: 1px 5px; border-radius: 2px; margin-left: 3px;
  border: 1px solid var(--line); color: var(--ink-dim); white-space: nowrap; }
.e4a-vt-tag.zonder { background: rgba(216, 145, 58, .18); border-color: var(--warn); color: #f0b56a; }
.e4a-vt-tag.half { background: rgba(95, 168, 201, .18); border-color: var(--route); color: #8cc6e0; }
.e4a-vt-tag.k-laag { color: #b8c2c4; }
.e4a-vt-tag.k-midden { color: #7fd1b9; border-color: #3c6b5e; }
.e4a-vt-tag.k-hoog { color: var(--hivis); border-color: #6b5a1c; }
.e4a-vt-item.g-zonder { box-shadow: inset 3px 0 0 var(--warn); }
.e4a-vt-item.g-half { box-shadow: inset 3px 0 0 var(--route); }
.e4a-vt-item.on { box-shadow: inset 3px 0 0 var(--hivis); }
.e4a-vt-item .n { text-align: right; line-height: 1.7; flex: 0 0 auto; white-space: nowrap; }
.e4a-vt-item .naam { min-width: 0; }
.e4a-vt-item .naam code { word-break: break-all; }
.e4a-vt-staal { display: inline-block; width: 12px; height: 12px; border-radius: 2px; flex: 0 0 12px; }
.e4a-vt-staal.groot { width: 18px; height: 18px; flex-basis: 18px; }
.e4a-vt-stuk { color: #14181a; }
/* het weekraster */
.e4a-vt-raster { font-size: 11px; margin: 4px 0 10px; }
.e4a-vt-rij { display: grid; grid-template-columns: 64px minmax(0, 1fr) 150px; align-items: center; min-height: 30px; }
.e4a-vt-rij.kop { min-height: 16px; color: var(--ink-dim); font: 10px var(--mono); }
.e4a-vt-rij .dag { color: var(--ink-dim); font: 600 11px var(--mono); }
.e4a-vt-rij.feest { margin-top: 6px; }
.e4a-vt-rij.feest .dag { color: var(--warn); }
.e4a-vt-rij .na { padding-left: 8px; font-size: 11px; }
.e4a-vt-spoor { position: relative; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); height: 26px; background: var(--panel); }
.e4a-vt-spoor.kop { height: 14px; background: none; }
.e4a-vt-spoor .uur { border-left: 1px solid var(--line); padding-left: 2px; overflow: hidden; }
.e4a-vt-spoor .cel { border-left: 1px solid #2a3236; border-bottom: 1px solid #2a3236; }
.e4a-vt-spoor .werk { position: absolute; top: 2px; bottom: 2px; background: rgba(140, 154, 158, .42); border-radius: 2px; }
.e4a-vt-spoor .kerk { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(201, 178, 124, .42) 0 4px, rgba(201, 178, 124, .14) 4px 8px);
  color: #efe3c0; font: 600 9px/26px var(--mono); text-align: center; overflow: hidden; white-space: nowrap; border-left: 1px solid #c9b27c; border-right: 1px solid #c9b27c; }
.e4a-vt-spoor .blok { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; color: #14181a; font: 600 10px/20px var(--sans); padding: 0 7px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; cursor: grab; touch-action: none; user-select: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); z-index: 1; }
.e4a-vt-spoor .blok b { pointer-events: none; font-weight: 600; }
.e4a-vt-spoor .blok.on { box-shadow: 0 0 0 2px #fff; z-index: 2; }
.e4a-vt-spoor .blok.fout { outline: 2px dashed var(--bad); }
.e4a-vt-spoor .greep { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; }
.e4a-vt-spoor .greep.l { left: 0; }
.e4a-vt-spoor .greep.r { right: 0; }
.e4a-vt-spoor .blok:hover .greep { background: rgba(0, 0, 0, .2); }
.e4a-vt-spoor.kopie .blok { opacity: .45; cursor: default; }
.e4a-vt-spoor.kopie .greep { display: none; }
.e4a-vt-rij.doel .e4a-vt-spoor { outline: 1px dashed var(--hivis); outline-offset: 1px; }
.e4a-vt-schaduw { position: absolute; top: 1px; bottom: 1px; border: 2px dashed var(--hivis); border-radius: 3px; background: rgba(242, 183, 5, .15); color: var(--hivis);
  font: 600 9px/20px var(--mono); padding: 0 3px; pointer-events: none; z-index: 3; white-space: nowrap; }
.e4a-vt-regels { margin: 6px 0 8px; padding-left: 16px; font-size: 12px; color: var(--ink-dim); line-height: 1.5; }
.e4a-vt-tijd { display: flex; align-items: center; gap: 3px; }
.e4a-vt-tijd select { flex: 1 1 0; min-width: 0; padding: 4px; }
.e4a-vt-dagen, .e4a-vt-vinkjes { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 8px; font-size: 12px; }
.e4a-vt-vinkjes label { min-width: 160px; }
.e4a-vt-legenda { list-style: none; margin: 4px 0 8px; padding: 0; font-size: 12px; }
.e4a-vt-legenda li { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.e4a-vt-legenda i, .e4a-vt-dagrij i, .e4a-vt-agenda .stip { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: 0 0 10px; }
.e4a-vt-legenda.rij { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 8px; }
.e4a-vt-legenda.rij span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-dim); }
.e4a-vt-staven { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; margin: 6px 0; }
.e4a-vt-staven .as { font: 8px var(--mono); fill: var(--ink-dim); }
.e4a-vt-staven .lijn { stroke: var(--line); }
.e4a-vt-staven .blok { fill: rgba(242, 183, 5, .08); stroke: var(--hivis); stroke-width: 1; stroke-dasharray: 3 2; }
.e4a-vt-form { max-width: 720px; }
.e4a-vt-form .lab { display: block; font-size: 11px; color: var(--ink-dim); margin: 10px 0 3px; }
.e4a-vt-drie { display: flex; gap: 8px; }
.e4a-vt-drie span { flex: 1 1 0; }
.e4a-vt-drie small { font: 600 9px var(--mono); color: var(--ink-dim); }
.e4a-vt-form input[type=color] { width: 60px; height: 30px; padding: 2px; }
.e4a-vt-form .e4a-tabel input { width: 90px; }
.e4a-vt-kort { max-width: 120px; }
.e4a-vt-gebruik a { color: var(--route); }
.e4a-vt-chk { display: flex; align-items: center; gap: 6px; margin: 8px 0; font-size: 12px; }
.e4a-vt-dagknoppen { display: flex; flex-wrap: wrap; gap: 4px; }
.e4a-vt-links input[type=range] { width: 100%; }
/* de kaart */
.e4a-vt-kaart { display: block; max-width: 760px; background: #101416; border: 1px solid var(--line); border-radius: 4px; }
.e4a-vt-kaart .weg { stroke: #2c3438; stroke-linecap: round; }
.e4a-vt-kaart .perceel { fill: none; stroke: #2a3236; stroke-width: .3; }
.e4a-vt-kaart .perceel.functie { fill: #24323a; cursor: pointer; }
.e4a-vt-kaart .perceel.woon { fill: #1e2629; cursor: pointer; }
.e4a-vt-kaart .perceel.on { stroke: var(--hivis); stroke-width: .8; }
.e4a-vt-kaart .bel { cursor: pointer; }
.e4a-vt-kaart .bel circle { stroke: #101416; stroke-width: .6; opacity: .92; }
.e4a-vt-kaart .bel.on circle { stroke: #fff; stroke-width: 1; }
.e4a-vt-kaart .bel text { font: 600 3.6px var(--sans); fill: #101416; text-anchor: middle; pointer-events: none; }
.e4a-vt-kaart .loper { fill: #6fa36b; stroke: #101416; stroke-width: .3; cursor: pointer; }
/* de tabel */
.e4a-vt-tabelhouder { overflow-x: auto; }
.e4a-vt-tabel { border-collapse: collapse; font: 10px var(--mono); }
.e4a-vt-tabel th { color: var(--ink-dim); font-weight: 600; padding: 2px 3px; min-width: 20px; }
.e4a-vt-tabel th.nu { color: var(--hivis); }
.e4a-vt-tabel td.plek { font: 11px var(--sans); padding: 2px 8px 2px 0; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.e4a-vt-tabel td.cel { text-align: center; padding: 3px 2px; background: rgba(242, 183, 5, calc(.08 + var(--n) * .8)); color: var(--ink); font-weight: 600; cursor: pointer; border: 1px solid #14181a; }
.e4a-vt-tabel td.cel.fel { color: #14181a; }
.e4a-vt-tabel td.cel.leeg { background: var(--panel); }
.e4a-vt-tabel td.cel.nu { box-shadow: inset 0 0 0 1px #fff; }
.e4a-vt-tabel tr.on td.plek { color: var(--hivis); }
/* de agenda en de dag van iemand */
.e4a-vt-agenda tr[data-persoon] { cursor: pointer; }
.e4a-vt-agenda tr.on td { background: var(--panel2); }
.e4a-vt-agenda .stip { margin-right: 6px; vertical-align: -1px; }
.e4a-vt-dagrij { list-style: none; margin: 6px 0 10px; padding: 0; font-size: 12px; }
.e4a-vt-dagrij li { display: block; padding: 4px 4px 4px 18px; position: relative; border-bottom: 1px solid var(--line); }
.e4a-vt-dagrij li i { position: absolute; left: 2px; top: 7px; }
.e4a-vt-dagrij li.nu { background: var(--panel2); box-shadow: inset 2px 0 0 var(--hivis); }
.e4a-vt-dagrij li[data-persoon] { cursor: pointer; }
.e4a-vt-uurstaven { display: grid; grid-template-columns: repeat(24, 1fr); gap: 1px; height: 60px; align-items: end; background: var(--panel); padding: 3px; border-radius: 3px; }
.e4a-vt-uurstaven span { position: relative; height: 100%; display: flex; align-items: flex-end; }
.e4a-vt-uurstaven i { display: block; width: 100%; background: var(--route); min-height: 1px; }
.e4a-vt-uurstaven span.nu i { background: var(--hivis); }
.e4a-vt-kopieer .e4a-vt-vinkjes label { min-width: 200px; }

/* ---------- tabblad Prefab Editor (25 oktober 2026, punt 2.2) ---------- */
.e4a-pu-groepen { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 4px; }
.e4a-pu-groep { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 2px 8px; text-align: left; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 3px; padding: 7px 9px; color: var(--ink); cursor: pointer; font: inherit; }
.e4a-pu-groep:hover { border-color: var(--ink-dim); }
.e4a-pu-groep.on { border-color: var(--hivis); box-shadow: inset 3px 0 0 var(--hivis); }
.e4a-pu-groep b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e4a-pu-groep code { grid-column: 1; font: 11px var(--mono); color: var(--ink-dim); word-break: break-all; }
.e4a-pu-rechten { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 3px; align-items: center; }
.e4a-pu-rechten i { font: 600 10px var(--mono); font-style: normal; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 2px; color: var(--ink-dim); }
.e4a-pu-rechten i.aan { background: var(--hivis); border-color: var(--hivis); color: #14181a; }
.e4a-pu-fout { grid-column: 1 / span 2; color: #f19a8f; font: 600 10px var(--mono); }
.e4a-pu-pad { font: 11px var(--mono); color: var(--ink-dim); font-weight: 400; margin-left: 8px; }
.e4a-pu-vak { margin: 0 18px 14px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; max-width: 760px; }
.e4a-pu-vak h3 { margin: 0 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.e4a-pu-vak.e4a-pu-uit { opacity: .55; }
.e4a-pu-deel { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); cursor: pointer; }
.e4a-pu-deel:first-of-type { border-top: none; }
.e4a-pu-deel input { margin-top: 3px; width: auto; }
.e4a-pu-deel span { display: flex; flex-direction: column; gap: 2px; }
.e4a-pu-deel small { color: var(--ink-dim); font-size: 11px; line-height: 1.45; }
.e4a-pu-sub { font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); margin: 10px 0 4px; }
.e4a-pu-keus { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; font-size: 12px; cursor: pointer; flex-wrap: wrap; }
.e4a-pu-keus input { width: auto; }
.e4a-pu-keus code { font: 11px var(--mono); color: var(--ink-dim); }
.e4a-pu-mist { color: #f19a8f; }
.e4a-pu-let { color: #f2d27a; }
.e4a-pu-let::before { content: "!"; color: var(--hivis); font-weight: 700; }
.e4a-pu-melding { margin-top: 10px; }
.e4a-pu-verslag { margin: 8px 0 0; max-height: 320px; overflow: auto; font-size: 10.5px; white-space: pre-wrap; }
.e4a-pu-rechts details summary { cursor: pointer; color: var(--ink-dim); font-size: 12px; }
.e4a-pu-plan h3 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); margin: 14px 0 4px; }
.e4a-pu-plan .e4a-veld.chk { align-items: flex-start; margin: 6px 0; }
.e4a-pu-plan .e4a-veld.chk input { margin-top: 3px; }
/* Prefab Editor: welke onderdelen meegaan (25 oktober 2026, vraag 12) */
.e4a-pu-teller { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 2px; font-size: 12px; }
.e4a-pu-rij { display: flex; gap: 2px 20px; flex-wrap: wrap; }
.e4a-pu-rij .e4a-pu-keus .muted, .e4a-pu-cat summary .muted { font: 11px var(--mono); }
.e4a-pu-cat { border-top: 1px solid var(--line); }
.e4a-pu-cat:last-child { border-bottom: 1px solid var(--line); }
.e4a-pu-cat summary { display: flex; gap: 8px; align-items: center; padding: 6px 0; cursor: pointer; font-size: 12px; list-style: none; }
.e4a-pu-cat summary::-webkit-details-marker { display: none; }
.e4a-pu-cat summary::after { content: "\25B8"; margin-left: auto; color: var(--ink-dim); }
.e4a-pu-cat[open] summary::after { content: "\25BE"; }
.e4a-pu-cat summary input { width: auto; margin: 0; }
.e4a-pu-cat summary b { font-weight: 600; }
.e4a-pu-cat.uit summary b { color: var(--ink-dim); text-decoration: line-through; }
.e4a-pu-stuks { padding: 0 0 10px 24px; columns: 2 250px; column-gap: 20px; }
.e4a-pu-stuks .e4a-pu-keus { break-inside: avoid; padding: 2px 0; }
.e4a-pu-keus.dicht { opacity: .5; cursor: default; }
.e4a-pu-knopjes { display: flex; gap: 6px; margin: 2px 0 6px; column-span: all; }
.e4a-pu-streek { font: 600 9.5px var(--mono); text-transform: uppercase; color: var(--hivis); border: 1px solid var(--hivis); border-radius: 2px; padding: 0 3px; }
/* Vrijetijd, Overzicht > Deelname (25 oktober 2026) */
.e4a-vt-deelname { max-width: 760px; }
.e4a-vt-deelname tr[data-dn] { cursor: pointer; }
.e4a-vt-deelname tr[data-dn]:hover td { background: var(--panel2); }
.e4a-vt-deelname tr.on td { background: var(--panel2); box-shadow: inset 0 1px 0 var(--hivis), inset 0 -1px 0 var(--hivis); }
.e4a-vt-deelname td.dag { min-width: 30px; }
.e4a-vt-deelname td.dag.leeg { color: var(--ink-dim); }
.e4a-vt-deelname tr[data-dn] td.dag.on { background: var(--hivis); color: #14181a; font-weight: 700; }
.e4a-vt-deelname th.feest { color: var(--hivis); }
.e4a-vt-deelname .stip { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
/* Vrijetijd: een half uur speling voor en na elk blok (25 oktober 2026) */
.e4a-vt-spoor .speling { position: absolute; top: 6px; bottom: 6px; background: repeating-linear-gradient(135deg, rgba(242, 183, 5, .16) 0 3px, transparent 3px 6px); border-radius: 2px; pointer-events: none; }
.e4a-vt-kaart circle.reiziger { stroke: #14181a; stroke-width: .35; }
/* Vrijetijd: bezoek (25 oktober 2026) — wanneer het doel thuis is (bij het slepen), en de balkjes van wie komt */
.e4a-vt-spoor .e4a-vt-thuisvenster { position: absolute; top: 0; bottom: 0; background: rgba(111, 163, 107, .32); box-shadow: inset 0 0 0 1px rgba(111, 163, 107, .8); pointer-events: none; z-index: 1; }
.e4a-vt-spoor .gastbalk { position: absolute; top: 1px; bottom: 1px; border: 1px dashed rgba(201, 162, 39, .9); border-radius: 3px; background: rgba(201, 162, 39, .08); }