/* =====================================================
   Nesdeck — Unified stylesheet (dark-first)
   ===================================================== */

/* --- Theme tokens --- */
:root{
  --bg:#0b1224; --panel:#111827; --muted:#1f2937; --text:#e5e7eb; --sub:#94a3b8; --brand:#60a5fa;
  --chip:#0b1227;
  /* --- UI tokens (theme-aware) --- */
  --ui-surface: var(--panel);
  --ui-surface-2: rgba(15,23,42,.72);
  --ui-plate-strong: var(--ui-plate-strong);
  --ui-plate-mid: rgba(15,23,42,.50);
  --ui-plate-weak: var(--ui-plate-weak);
  --ui-border-ultraweak: var(--ui-border-ultraweak);
  --ui-border-weak: var(--ui-border-weak);
  --ui-border: var(--ui-border);
  --ui-border-strong: var(--ui-border-strong);
  --ui-shadow: 0 10px 30px rgba(0,0,0,.35);
 --radius:18px;
  --accent-project:#60a5fa; --accent-proces:#a78bfa; --accent-markt:#22c55e;
  --danger:#ef4444; --okay:#10b981; --warn:#f59e0b;
  --control-h:40px;
  --page-pad:16px; --sidew:400px; --topbar-h:0px; --topbar-gap:12px;
  color-scheme: dark;
}

:root[data-theme="light"]{
  --bg:#f7f7fb; --panel:#ffffff; --muted:#e5e7eb; --text:#0b1224; --sub:#475569; --brand:#2563eb;
  --chip:#f2f4f7;
  /* --- UI tokens (theme-aware) --- */
  --ui-surface: var(--panel);
  --ui-surface-2: rgba(255,255,255,.92);
  --ui-plate-strong: rgba(255,255,255,.96);
  --ui-plate-mid: rgba(241,245,249,.85);
  --ui-plate-weak: rgba(226,232,240,.55);
  --ui-border-ultraweak: rgba(2,6,23,.08);
  --ui-border-weak: rgba(2,6,23,.10);
  --ui-border: rgba(2,6,23,.14);
  --ui-border-strong: rgba(2,6,23,.22);
  --ui-shadow: 0 10px 30px rgba(2,6,23,.10);

  --accent-project:#2563eb; --accent-proces:#7c3aed; --accent-markt:#16a34a;
  color-scheme: light;
}

:root[data-theme="warm"]{
  --bg:#12100e; --panel:#1b1917; --muted:#282522; --text:#f0ede9; --sub:#c7bfb6; --brand:#f59e0b;
  --chip:#161411;
  /* --- UI tokens (theme-aware) --- */
  --ui-surface: var(--panel);
  --ui-surface-2: rgba(18,16,14,.72);
  --ui-plate-strong: rgba(18,16,14,.90);
  --ui-plate-mid: rgba(18,16,14,.50);
  --ui-plate-weak: rgba(18,16,14,.14);
  --ui-border-ultraweak: var(--ui-border-ultraweak);
  --ui-border-weak: var(--ui-border-weak);
  --ui-border: var(--ui-border);
  --ui-border-strong: var(--ui-border-strong);
  --ui-shadow: 0 10px 30px rgba(0,0,0,.35);

  --accent-project:#f59e0b; --accent-proces:#d946ef; --accent-markt:#22c55e;
  color-scheme: dark;
}


:root[data-theme="holo"]{
  /* Holo Amber — warm, cinematic, datatech (like the reference image) */
  --bg:#0a0b10; --panel:#12131b; --muted:#1a1c28; --text:#f2f3f7; --sub:#b9bfcc; --brand:#ffb14a;
  --chip:#101118;
  --accent-project:#ffb14a; --accent-proces:#d946ef; --accent-markt:#22c55e;
  color-scheme: dark;

  /* --- UI tokens (theme-aware) --- */
  --ui-surface: var(--panel);
  --ui-surface-2: rgba(16,17,24,.68);
  --ui-plate-strong: rgba(16,17,24,.90);
  --ui-plate-mid: rgba(16,17,24,.52);
  --ui-plate-weak: rgba(16,17,24,.14);
  --ui-border-ultraweak: rgba(255,255,255,.08);
  --ui-border-weak: rgba(255,255,255,.10);
  --ui-border: rgba(255,255,255,.14);
  --ui-border-strong: rgba(255,255,255,.18);
  --ui-shadow: 0 12px 34px rgba(0,0,0,.45);

  /* Holo glow accents */
  --holo-amber: rgba(255,177,74,.55);
  --holo-amber-weak: rgba(255,177,74,.22);
  --holo-cyan-weak: rgba(56,189,248,.12);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scrollbar-gutter: stable; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* --- Topbar --- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:12px;
  height:var(--topbar-h);
  padding:0 var(--page-pad);
  background:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 100%), var(--bg);
  backdrop-filter:saturate(1.2) blur(4px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.app-title{ margin:0; font-size:18px; font-weight:600; white-space:nowrap; }
.spacer{ flex:1; }
.muted{ opacity:.7; margin-right:8px; }

.iconbtn, .primarybtn, .ghostbtn{
  height:var(--control-h); padding:0 12px; border-radius:12px;
  border:1px solid var(--ui-border); background:transparent; color:var(--text);
  cursor:pointer;
}
.iconbtn{ width:var(--control-h); display:inline-grid; place-items:center; padding:0; }
.iconbtn.small{ height:28px; width:28px; border-radius:8px; }
.primarybtn{ background:var(--brand); color:#fff; border:none; }
.ghostbtn{ border-color:var(--ui-border-weak); background:rgba(255,255,255,.04); }
.ghostbtn.small{ height:28px; padding:0 10px; border-radius:8px; }

.search{
  height:var(--control-h); border-radius:12px; border:1px solid var(--ui-border);
  background: var(--card-surface, var(--panel));
  color: var(--card-text, var(--text)); color:var(--text); padding:0 12px; min-width:220px;
}

#btnSearch{
  display:none;
}

/* Mobiel: zoekveld via vergrootglas-icoon */
@media (max-width: 768px){
  .topbar{
    padding:0 8px;
  }

  .search{
    flex:1;
    min-width:0;
    max-width:100%;
  }

  body:not([data-search="open"]) .search{
    display:none;
  }

  #btnSearch{
    display:inline-grid;
  }
}

/* --- Left panel (filters) --- */
.menu.panel{
  position:fixed; z-index:15;
  left:var(--page-pad); right:auto;
  top:calc(var(--topbar-h) + var(--topbar-gap)); bottom:16px;
  width:var(--sidew);
  background:var(--panel);
  /* border:1px solid var(--ui-border-ultraweak); */
  border-radius:16px;
  padding:12px;
  overflow:auto;
  transform:translateX(-140%);
  transition:transform .25s ease;
}
body.appmenu-open .menu.panel{ transform:none; }
.menu[aria-hidden="true"]{ pointer-events:none; }
.menu-head{ display:flex; align-items:center; justify-content:space-between; padding:4px 4px 8px 4px; gap:8px; }
.menu-tools{ display:flex; align-items:center; gap:6px; }
.fblock{ padding:8px 4px; }
.fblock-label{ display:block; font-size:12px; color:var(--card-sub, var(--sub)); margin:0 0 6px 2px; }

.menu-separator{
  border:none;
  border-top:1px solid var(--ui-border-weak);
  margin:8px 0 4px;
}

.card-meta-panel .f-input{
  width:100%;
  box-sizing:border-box;
  height:var(--control-h);
  border-radius:10px;
  border:1px solid var(--ui-border);
  background:var(--ui-plate-strong);
  color:var(--text);
  padding:0 10px;
  font-size:12px;
}

/* Kaartinformatie-panel alleen tonen als een kaart in bewerking is */
.card-meta-panel{
  display:none;
}

body[data-mode="edit"] .card-meta-panel{
  display:block;
}


.menu-note{
  font-size:11px;
  color:var(--sub);
  opacity:.85;
  margin:2px 2px 4px;
}

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }

/* Scrim (mobiel) */
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(2px); z-index:10; display:none; }
body.panel-open .scrim, body.appmenu-open .scrim{ display:block; }

/* --- Page wrap shifts right when panel open (desktop) --- */
@media (min-width:769px){
  body.appmenu-open .wrap{ margin-left: calc(var(--sidew) + var(--page-pad)); }
  body.appmenu-open .scrim{ display:none; }
}

@media (min-width: 769px){
  body:not([data-selactive="1"]):not([data-view-kind="matrix"]):not([data-present="1"]) #zone2Rel,
  body:not([data-selactive="1"]):not([data-view-kind="matrix"]):not([data-present="1"]) #zone2Main{
    grid-column: 3 / -1;
  }
}

/* Panel op mobiel: nooit breder dan het scherm */
@media (max-width:768px){
  .menu.panel{
    left:0;
    right:0;
    width:100%;
    max-width:100vw;
    border-radius:0 0 16px 16px;
    top:var(--topbar-h);
    bottom:0;
  }
}

/* --- Grid of cards --- */
.wrap{ padding:16px; transition:margin-left .25s ease; }
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap:16px;
}
.sentinel{ height:1px; }

/* --- Card --- */
.card{
  background: var(--card-bg, var(--card-surface, var(--panel)));
  color: var(--card-text, var(--text));
  border:1px solid var(--ui-border-ultraweak);
  border-radius:16px;
  display:flex; flex-direction:column;
  /* min-height:160px; */
  box-shadow:0 1px 0 rgba(255,255,255,.02), 0 10px 24px rgba(0,0,0,.25);
  position:relative;
}
.card[data-locked="true"]{ outline:1px dashed rgba(255,255,255,.15); }


.card-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 10px 0 10px; }
.card-head .left{ display:flex; align-items:center; gap:8px; }
.card-head .right{ display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.pill{ display:inline-block; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--ui-border-weak); color:var(--text); font-size:12px; text-transform:capitalize; }
.pill.innovatie{ background:linear-gradient(90deg, rgba(96,165,250,.14), rgba(167,139,250,.14)); }
.pill.track{ background:linear-gradient(90deg, rgba(34,197,94,.14), rgba(96,165,250,.14)); }


.pill.impact{ background:linear-gradient(90deg, rgba(234,179,8,.12), rgba(234,179,8,.06)); }
.pill.scope { background:linear-gradient(90deg, rgba(16,185,129,.12), rgba(16,185,129,.06)); }

/* Media: altijd gereserveerde ruimte */
.card-media{
  position:relative;           /* nieuw */
  width:98%;
  aspect-ratio:16/9;
  margin:10px 1% 10px 1%;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
  border:1px solid var(--ui-border-ultraweak);
}
.card-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Herkomstlabel linksboven in de afbeelding */
.card-media-badge{
  position:absolute;
  top:8px;
  left:8px;
  padding:2px 8px;
  border-radius:999px;
  font-size:10px;
  background:var(--ui-plate-strong);
  color:var(--sub);
  border:1px solid rgba(148,163,184,.7);
  pointer-events:none;
}

.card-media-badge[hidden]{
  display:none;
}

/* Toolbalk onderin de afbeelding (Upload / Plakken / Link / Reset) */
.card-media-tools{
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  display:flex;
  gap:6px;
  padding:4px 6px;
  border-radius:999px;
  background:rgba(15,23,42,.85);
  backdrop-filter:blur(8px);
  opacity:0;
  pointer-events:none;
  transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease;
}

/* Alleen tonen in bewerkingsmodus (kaart heeft class .editing) */
.card.editing .card-media-tools{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.media-btn{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.6);
  background:var(--ui-plate-strong);
  color:var(--text);
  font-size:11px;
  cursor:pointer;
}

.media-btn:hover{
  border-color:var(--brand);
  box-shadow:0 0 0 1px rgba(96,165,250,.5);
}

.media-btn-label{
  display:inline;
}

/* Op heel smalle schermen alleen de iconen tonen */
@media (max-width: 480px){
  .media-btn-label{
    display:none;
  }
}


.card-main{ padding:10px 12px 0 12px; }
.card-title{ margin:6px 0; font-size:18px; color: var(--card-text, var(--text)); }

/* Beschrijving: linebreaks respecteren */
.card-body{
  margin:0 0 10px 0;
  color: var(--card-sub, var(--sub));
  white-space: pre-wrap;       /* ← behoudt enters */
}

/* Titel + body mogen nog steeds lange woorden breken */
.card-title,
.card-body{
  overflow-wrap:anywhere;
  word-break:break-word;
}


.card-meta{
  position:relative;
  padding:6px 12px 10px 12px;
  margin-top:auto;
  overflow:hidden;
}

/* Labels links onderin: 2 rijen onder de acties door */
.card-labels{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:0;         /* geen extra ruimte onder de labels */
  width:100%;              /* vullen de hele linkerkant */
}

.card-label-row{
  position:relative;
  overflow:hidden;
  min-height:16px;
  font-size:11px;
  color:var(--sub);
  letter-spacing:.01em;
}

.card-label-row-empty{
  display:none;
}

.card-label-row-dept{
  opacity:.9;
}

.card-label-row-theme{
  opacity:.85;
}

/* De lopende band zelf */
.card-label-track{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  animation:card-label-marquee var(--ticker-duration, 24s) linear infinite;
  will-change: transform;
  transform: translate3d(0,0,0);
}

/* Segmenten in de ticker, voor naadloze loop */
.card-label-segment{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding-right:24px;
}

/* Scheiding tussen herhaalde segmenten */
.card-label-segment::after{
  content:"|";
  opacity:.6;
  font-size:10px;
  margin-left:8px;
  flex-shrink:0;
}

.card-label-dot{
  width:4px;
  height:4px;
  border-radius:999px;
  background:rgba(148,163,184,.9);
  flex-shrink:0;
}

/* Kaart-uitsluiting tonen: doorhalen + iets lichter */
.card-label-excluded{
  opacity:.55;
  text-decoration:line-through;
}


@keyframes card-label-marquee{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* Nieuwe layout voor de footer + blur achter actieknop en mini-kaart */
.meta-actions{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:flex-end;   /* cluster actieknop + minicard rechts */
  align-items:flex-end;       /* alles onderin uitlijnen */
  gap:10px;
  flex-wrap:nowrap;           /* niet meer wrappen → één vaste onderbalk */
  padding-top:4px;
  border-radius:12px;
  background:linear-gradient(
    90deg,
    var(--ui-plate-strong),
    var(--ui-plate-mid),
    var(--ui-plate-weak)
  );
  backdrop-filter:blur(10px);
}



.meta-actions-left{
  display:flex;
  flex-direction:column;   /* 2 rijen labels onder elkaar */
  justify-content:flex-end;
  align-items:flex-start;
  flex:1 1 auto;           /* neemt alle ruimte links van de knoppen */
  min-width:0;             /* ticker mag smaller worden en blijft scrollen */
  gap:2px;
}



.meta-actions-right{
  display:flex;
  gap:8px;
  align-items:flex-end;
}


.card.editing [contenteditable="true"]{
  outline:1px dashed var(--brand);
  background:rgba(96,165,250,.08);
  border-radius:8px;
  padding:2px 4px;
}

.card.editing{
  outline:2px solid rgba(96,165,250,.22);
  outline-offset:2px;
}


/* Mini-kaart: portret preview met counters rondom */
.card-mini{
  position:relative;           /* basis voor absolute counters */
  width:54px;
  height:72px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.6);
  background:rgba(15,23,42,.96);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  padding:0;
  display:block;
  cursor:pointer;
  flex-shrink:0;
}

.card-mini-thumb{
  position:absolute;
  inset:0;                     /* vult de hele mini-kaart */
}

.card-mini-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.card-mini-ghost{
  opacity:.9;
  transform:scale(1.08);
  box-shadow:0 18px 40px rgba(0,0,0,.65);
}


/* Basisstijl voor alle counters */
.mini-count{
  position:absolute;
  font-size:10px;
  font-variant-numeric:tabular-nums;
  color:var(--text);
  padding:0 4px;
  border-radius:999px;
  background:var(--ui-plate-strong);
  box-shadow:0 0 0 1px rgba(148,163,184,.7);
}

/* Niet tonen als hidden op true staat */
.mini-count[hidden]{
  display:none;
}

/* Parent: bovenin, gecentreerd */
.mini-count-parent{
  top:4px;
  left:50%;
  transform:translateX(-50%);
}

/* Sibling: links in het midden */
.mini-count-sibling{
  top:50%;
  left:4px;
  transform:translateY(-50%);
}

/* Child: onderin, gecentreerd in een cirkel */
.mini-count-child{
  bottom:4px;
  left:50%;
  transform:translateX(-50%);
}


/* Hover feedback */
.card-mini:hover{
  box-shadow:0 12px 30px rgba(0,0,0,.8);
  transform:translateY(-1px);
  border-color:var(--brand);
}


/* --- Chips --- */
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 10px; border-radius:999px;
  border:1px solid var(--ui-border-weak);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:12px;
  text-transform:capitalize;
  cursor:pointer;
}
.chip.active{ background:rgba(96,165,250,.15); border-color:rgba(96,165,250,.45); }
.chip.tri[data-state="1"]{ background:rgba(16,185,129,.18); border-color:rgba(16,185,129,.5); }
.chip.tri[data-state="2"]{ background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.5); }

/* Modus-indicator: kaart-bewerken gebruikt dezelfde chips, maar andere stijl */
body[data-mode="edit"] .menu-head h2::after{
  content:" — kaartmodus";
  font-size:11px;
  color:var(--sub);
  margin-left:4px;
  opacity:.85;
}

body[data-mode="edit"] #menu .chip{
  border-style:dashed;
}

body[data-mode="edit"] #menu .chip.active,
body[data-mode="edit"] #menu .chip.tri[data-state="1"],
body[data-mode="edit"] #menu .chip.tri[data-state="2"]{
  box-shadow:0 0 0 1px rgba(96,165,250,.45);
}

/* Overlay voor parent/sibling/child tijdens drag */
.card-link-overlay{
  position:absolute;
  inset:0;
  padding:8px;
  display:none;
  pointer-events:none;
  z-index:5;
  background:linear-gradient(180deg, rgba(15,23,42,.0), rgba(15,23,42,.75));
}

.card.drop-active .card-link-overlay{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* Toon altijd P/S/C-overlay op andere kaarten zodra je sleept */
body.card-dragging .card:not(.drag-source) .card-link-overlay{
  display:flex;
  flex-direction:column;
  gap:6px;
}


.link-zone{
  flex:1;
  min-height:20px;
  border-radius:12px;
  border:1px dashed rgba(96,165,250,.5);
  background:rgba(15,23,42,.85);
  color:var(--sub);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
}

.zone-parent{ align-self:flex-start; }
.zone-sibling{ align-self:stretch; }
.zone-child{ align-self:flex-end; }

.link-zone.is-hovered{
  border-style:solid;
  border-color:var(--brand);
  background:rgba(37,99,235,.35);
  color:var(--text);
}

/* Visuele feedback tijdens drag & na het leggen van een link */
body.card-dragging .card.drag-source{
  opacity:.65;
  outline:1px dashed rgba(148,163,184,.6);
}

.card.link-flash{
  box-shadow:0 0 0 2px rgba(96,165,250,.9), 0 10px 24px rgba(0,0,0,.5);
  transition:box-shadow .25s ease;
}

.card.selected{
  box-shadow:0 0 0 2px rgba(96,165,250,.8), 0 10px 24px rgba(0,0,0,.45);
  border-color:rgba(96,165,250,.7);
}

/* Highlight voor gekozen kaart + relaties */
/* .card.related{
  box-shadow:0 0 0 2px rgba(34,197,94,.7), 0 10px 24px rgba(0,0,0,.5);
}

.card.selected.related{
  box-shadow:0 0 0 2px rgba(96,165,250,.8), 0 0 0 4px rgba(34,197,94,.6), 0 10px 24px rgba(0,0,0,.55);
} */

/* Basis: iets “aan” maar neutraal */
.card.related{
  box-shadow:0 0 0 2px rgba(148,163,184,.25), 0 10px 24px rgba(0,0,0,.5);
}

/* Type-onderscheid */
.card.rel-child{
  box-shadow:0 0 0 2px rgba(34,197,94,.7), 0 10px 24px rgba(0,0,0,.5);
}
.card.rel-sibling{
  box-shadow:0 0 0 2px rgba(251,191,36,.7), 0 10px 24px rgba(0,0,0,.5);
}
.card.rel-parent{
  box-shadow:0 0 0 2px rgba(56,189,248,.7), 0 10px 24px rgba(0,0,0,.5);
}

/* Selected + type ring */
.card.selected.rel-child{
  box-shadow:0 0 0 2px rgba(96,165,250,.8), 0 0 0 4px rgba(34,197,94,.55), 0 10px 24px rgba(0,0,0,.55);
}
.card.selected.rel-sibling{
  box-shadow:0 0 0 2px rgba(96,165,250,.8), 0 0 0 4px rgba(251,191,36,.55), 0 10px 24px rgba(0,0,0,.55);
}
.card.selected.rel-parent{
  box-shadow:0 0 0 2px rgba(96,165,250,.8), 0 0 0 4px rgba(56,189,248,.55), 0 10px 24px rgba(0,0,0,.55);
}

/* Kleine badge linksboven (C/S/P) */
.card.rel-child::before,
.card.rel-sibling::before,
.card.rel-parent::before{
  position:absolute;
  bottom:8px;
  left:8px;
  width:20px;
  height:20px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  color:var(--text);
  backdrop-filter: blur(6px);
  pointer-events:none;
}

.card.rel-child::before{
  content:"↓";
  border:1px solid rgba(34,197,94,.7);
  background:rgba(34,197,94,.88);
  z-index: 4;
}
.card.rel-sibling::before{
  content:"=";
  border:1px solid rgba(251,191,36,.7);
  background:rgba(251,191,36,.88);
  z-index: 4;
}
.card.rel-parent::before{
  content:"↑";
  border:1px solid rgba(56,189,248,.7);
  background:rgba(56,189,248,.88);
  z-index: 4;
}


/* --- Relations overlay --- */
.rel-overlay{
  position:fixed;
  inset:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.85);
  backdrop-filter:blur(4px);
}

.rel-dialog{
  width:min(960px, 96vw);
  max-height:90vh;
  background:var(--panel);
  border-radius:18px;
  border:1px solid rgba(148,163,184,.35);
  box-shadow:0 24px 60px rgba(0,0,0,.7);
  padding:16px 18px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.rel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-bottom:4px;
  border-bottom:1px solid rgba(148,163,184,.4);
}

.rel-head h2{
  margin:0;
  font-size:16px;
}

.rel-body{
  padding-top:4px;
  padding-bottom:4px;
  overflow:auto;
}

.rel-subtitle{
  margin:0 0 8px 0;
  font-size:12px;
  color:var(--sub);
}

.rel-columns{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.rel-column h3{
  margin:0 0 4px 0;
  font-size:13px;
  color:var(--sub);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.rel-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* Elke relatie is een rij: titel + verwijder-knop */
.rel-list li{
  display:flex;
  align-items:center;
  gap:6px;
}

.rel-link-btn{
  flex:1 1 auto;              /* neemt de ruimte in */
  text-align:left;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.45);
  background:var(--ui-plate-strong);
  color:var(--text);
  font-size:12px;
  cursor:pointer;
}

.rel-link-btn:hover{
  border-color:var(--brand);
  background:rgba(37,99,235,.28);
}

/* Kleine knop om relatie te verbreken */
.rel-unlink-btn{
  flex:0 0 auto;
  width:24px;
  height:24px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.4);
  background:rgba(15,23,42,.95);
  color:var(--sub);
  display:grid;
  place-items:center;
  font-size:12px;
  cursor:pointer;
}

.rel-unlink-btn:hover{
  border-color:var(--brand);
  color:var(--brand);
  background:rgba(15,23,42,1);
}


.rel-foot{
  display:flex;
  justify-content:flex-end;
  padding-top:4px;
  border-top:1px solid rgba(148,163,184,.3);
}

@media (max-width: 768px){
  .rel-dialog{
    width:96vw;
    max-height:92vh;
    padding:12px 10px 10px;
  }
  .rel-columns{
    grid-template-columns:1fr;
  }
}

/* --- Utilities --- */
.hidden{ display:none !important; }

body.card-dragging .card:not(.drag-source) .card-link-overlay{
  display:flex;
  flex-direction:column;
  gap:6px;
}


/* --- Opties-knop rechtsonder op de kaart --- */
.card-options{
  margin-left:0;           /* direct links naast de minicard */
  position:relative;
  display:flex;
  align-items:center;
}


.card-options-btn{
  width:32px;
  height:32px;
  border-radius:999px;
  border:none;
  padding:0;
  background:transparent;
  cursor:pointer;
  position:relative;
}

.card-options-btn:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

.options-svg{
  width:100%;
  height:100%;
}

.file-hidden{
  position: fixed;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Pulserende buitenring */
.options-ring{
  fill:var(--ui-plate-strong);
  stroke:rgba(148,163,184,.7);
  stroke-width:1.5;
  transform-origin:24px 24px;
  animation:options-pulse 1.8s ease-out infinite;
}

.options-dot{
  fill:var(--brand);
  opacity:0.9;
}

/* Icoon in het midden (edit, lock, download, delete, vinkje) */
.card-options-glyph{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:16px;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}

.card[data-options-state="default"] .card-options-glyph{
  opacity:0;
  transform:scale(.7);
}

.card[data-options-state="edit"] .card-options-glyph,
.card[data-options-state="download"] .card-options-glyph,
.card[data-options-state="delete"] .card-options-glyph,
.card[data-options-state="lock"] .card-options-glyph{
  opacity:1;
  transform:scale(1);
}

/* Optioneel iets meer nadruk bij niet-default states */
.card[data-options-state="edit"] .options-ring,
.card[data-options-state="download"] .options-ring,
.card[data-options-state="delete"] .options-ring,
.card[data-options-state="lock"] .options-ring{
  stroke:var(--brand);
}

/* Klein pulserend effect van de cirkel */
@keyframes options-pulse{
  0%{ transform:scale(1); opacity:.7; }
  70%{ transform:scale(1.35); opacity:0; }
  100%{ transform:scale(1.35); opacity:0; }
}

/* Menu met de vier opties, naast de knop */
.card-options-menu{
  position:absolute;
  right:40px;
  bottom:0;
  display:flex;
  gap:6px;
  padding:4px 6px;
  border-radius:999px;
  background:rgba(15,23,42,.98);
  border:1px solid rgba(148,163,184,.5);
  box-shadow:0 12px 30px rgba(0,0,0,.7);
  opacity:0;
  pointer-events:none;
  transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease;
  z-index:5;
}

.card-options-item{
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.6);
  background:rgba(15,23,42,.95);
  color:var(--text);
  font-size:14px;
  display:inline-grid;
  place-items:center;
  padding:0;
  cursor:pointer;
}

.card-options-item:hover{
  border-color:var(--brand);
  box-shadow:0 0 0 1px rgba(96,165,250,.5);
}

/* --- Weergave toggle (Kaarten / Balken) --- */
.segmented{
  display:flex;
  gap:6px;
  padding:4px;
  border-radius:12px;
  border:1px solid var(--ui-border-weak);
  background:rgba(255,255,255,.04);
}

.segbtn{
  flex:1;
  height:32px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  font-size:12px;
  cursor:pointer;
}

.segbtn.active{
  background:rgba(96,165,250,.18);
  border-color:rgba(96,165,250,.5);
}

/* Active state ook voor ghostbtn (gebruik in view-toggle) */
.segmented .ghostbtn.active{
  background:rgba(96,165,250,.18);
  border-color:rgba(96,165,250,.5);
}


/* Menu zichtbaar wanneer data-attribute gezet is */
.card[data-options-open="1"] .card-options-menu{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* Kleine optimalisatie op mobiel (iets dichter bij de knop) */
@media (max-width: 768px){
  .card-options-menu{
    right:36px;
    bottom:2px;
  }
}


/* --- Mini-kaarten voor relaties (Parents / Siblings / Children) --- */
/* --- Relatie-dragzones in de mini-kaart --- */
/* Mini-kaart zelf is de referentie voor de overlay */

/* Overlay ligt in de mini-kaart, boven thumbnail + counters */
.card-mini .card-link-overlay{
  position:absolute;
  inset:0;
  display:none;
  pointer-events:none;
  z-index:2;
  padding:0;
  background:transparent;
}

/* Alleen tonen als deze kaart een actieve drop-target is tijdens drag */
body.card-dragging .card.drop-active .card-mini .card-link-overlay{
  display:block;
  pointer-events:auto;
}

/* Drie verticale zones in de mini-kaart: boven/midden/onder */
.card-mini .card-link-overlay .link-zone{
  position:absolute;
  border:none;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  pointer-events:auto;
}

/* Parent: bovenste derde */
.card-mini .card-link-overlay .zone-parent{
  top:0;
  left:0;
  right:0;
  height:33%;
}

/* Sibling: middelste zone */
.card-mini .card-link-overlay .zone-sibling{
  top:33%;
  left:0;
  right:0;
  bottom:33%;
}

/* Child: onderste derde */
.card-mini .card-link-overlay .zone-child{
  bottom:0;
  left:0;
  right:0;
  height:34%;
}

/* Hover/drag feedback in de mini-kaart */
.card-mini .card-link-overlay .link-zone.is-hovered{
  background:linear-gradient(180deg, var(--ui-plate-mid), var(--ui-plate-strong));
  box-shadow:0 0 0 1px rgba(96,165,250,.8) inset;
}

/* Extra feedback op target-kaarten tijdens drag */
body.card-dragging .card.drop-active{
  outline:1px dashed rgba(148,163,184,.8);
}

body.card-dragging .card.drop-active .card-mini{
  transform:scale(1.05);
  box-shadow:0 12px 30px rgba(0,0,0,.65);
}

/* =====================================================
   Balken-weergave: strak + hoogte gelijk aan minikaart
   ===================================================== */
   body[data-view="bars"]{
    --bar-mini-w:54px;
    --bar-mini-h:72px;
  }
  
  /* Minder “kaartruimte eromheen” */
  body[data-view="bars"] .wrap{ padding:8px; }
  body[data-view="bars"] .grid{ gap:8px; }     /* geen forced 1-col, wel compacter */
  
  /* Card zelf compact */
  body[data-view="bars"] .card{
    min-height:unset;
    box-shadow:none;
    border-radius:12px;
  }
  
  /* Geen losse header/body/afbeelding (behalve bij bewerken, indien gewenst) */
  body[data-view="bars"] .card:not([data-bar-open="1"]) .card-head{ display:none; }
  body[data-view="bars"] .card:not([data-bar-open="1"]) .card-main{ display:none; }
  body[data-view="bars"] .card:not([data-bar-open="1"]):not(.editing) .card-media{ display:none; }
  
  
  /* Footer/onderbalk: exact even hoog als minikaart */
  body[data-view="bars"] .card-meta{
    padding: 4px;
    margin-top:10;
  }
  

  
  /* Rechts: mini + opties altijd exact binnen dezelfde hoogte */
  body[data-view="bars"] .card-mini{
    width:var(--bar-mini-w);
    height:var(--bar-mini-h);
  }
  
  body[data-view="bars"] .meta-actions-right{
    align-items:stretch;
  }
  
  /* Links: tekst + ticker moeten binnen minikaart hoogte blijven */
  body[data-view="bars"] .meta-actions-left{
    height:100%;
    overflow:hidden;
    justify-content:space-between;   /* boven: tekst, onder: labels */
    gap:4px;
  }
  
  /* Slot waar jij titel+beschrijving in hebt geplaatst */
  body[data-view="bars"] .card:not([data-bar-open="1"]):not(.editing) .meta-text-slot{
    flex:1 1 auto;
    min-height:0;
    min-width:0;
    overflow:hidden;
    margin:0;
  }
  
  /* Titel: 1 regel */
  body[data-view="bars"] .card:not([data-bar-open="1"]):not(.editing) .card-title{
    font-size:11px;
    line-height:1.1;
    margin:6px 8px; 
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  
  /* Beschrijving: max 2 regels (anders haal je de minikaart hoogte niet) */
  body[data-view="bars"] .card:not([data-bar-open="1"]):not(.editing) .card-body{
    font-size:9px;
    line-height:1.15;
    margin:3px 8px;
    color:var(--sub);
  
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
  }
  
  /* Labels compacter + 1 rij (thema-rij uit) */
  body[data-view="bars"] .card[data-bar-open="1"] .card-labels{
    overflow:hidden;
    width:100%;
  }
  
  body[data-view="bars"] .card[data-bar-open="1"] .card-label-row{
    height:12px;       /* 1 strakke regel */
    min-height:12px;
    font-size:10px;
    line-height:1.1;
    margin:3px 4px; 
  }
  
  body[data-view="bars"]  .card[data-bar-open="1"] .card-label-row-theme{
    display:none;
  }

  /* Zorg dat we kunnen “ankeren” */
body[data-view="bars"]  .card[data-bar-open="1"] .meta-actions{
  position:relative;
}

/* (optioneel) net iets lager voor ‘onder’ gevoel */
body[data-view="bars"] .card-options-btn{
  transform:translateY(2px);
}

body[data-view="bars"] .card:not([data-bar-open="1"]) .meta-actions{
  height:var(--bar-mini-h);
  min-height:var(--bar-mini-h);
  align-items:stretch;
  padding:0;
  gap:8px;
  border-radius:6px;
}

body[data-view="bars"] .card:not([data-bar-open="1"]) .card-options{
  position:absolute;
  right:calc(var(--bar-mini-w));
  bottom:0px;
  z-index:4;
}

/* Opengeklapt: gedraagt zich als kaart (maar we blijven in bars view) */
body[data-view="bars"] .card[data-bar-open="1"]{
  /* min-height:160px; */
  box-shadow:0 1px 0 rgba(255,255,255,.02), 0 10px 24px rgba(0,0,0,.25);
  border-radius:16px;
}

body[data-view="bars"] .card[data-bar-open="1"] .card-meta{
  padding:6px 12px 10px 12px;
  margin-top:auto;
}

body[data-view="bars"] .card[data-bar-open="1"] .meta-actions{
  height:auto;
  min-height:unset;
  align-items:flex-end;
  padding-top:4px;
  border-radius:12px;
}

body[data-view="bars"] .card[data-bar-open="1"] .card-options{
  position:relative;
  right:auto;
  bottom:auto;
}

body[data-view="bars"] .card[data-bar-open="1"] .meta-text-slot{
  display:none; /* tekst zit weer in .card-main */
}

.card-bar-back{
  display:none;
  width:28px;
  height:28px;
  border-radius:8px;
  border:1px solid var(--ui-border-weak);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
}

body[data-view="bars"] .card[data-bar-open="1"] .card-bar-back{
  display:inline-grid;
  place-items:center;
  margin-left:6px;
}



/* =====================================================
   Selectie-paneel (split/focus)
   ===================================================== */
body[data-selactive="1"][data-selmode="split"] main.wrap,
body[data-selactive="1"][data-selmode="focus"] main.wrap{
  display:flex;
  flex-direction:column;
  height: calc(100vh - var(--topbar-h));
  overflow:hidden;
  padding: var(--page-pad);
  gap:12px;
}

body[data-selactive="1"][data-selmode="split"] #grid{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding-bottom:4px;
}

body[data-selactive="1"][data-selmode="focus"] #grid{ display:none; }

.selection-pane{
  background:var(--panel);
  border:1px solid var(--ui-border-ultraweak);
  border-radius:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.02), 0 10px 24px rgba(0,0,0,.25);
  padding:12px;
  display:flex;
  gap:12px;
  max-height: 42vh;
}

body[data-selmode="focus"] .selection-pane{
  flex:1 1 auto;
  max-height:none;
}

.selection-left{
  flex:0 0 320px;
  width:320px;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
  min-height:0;
}

.selection-right{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:hidden;
  min-height:0;
}

.sel-group{ display:flex; flex-direction:column; gap:6px; }
.sel-group-title{
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--sub);
}

.sel-bars{ display:flex; flex-direction:column; gap:6px; }

.sel-bar{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--ui-border-weak);
  background: rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
  text-align:left;
}
.sel-bar:hover{ background: rgba(255,255,255,.05); }
.sel-bar.active{ outline:1px solid rgba(96,165,250,.55); }

.sel-bar-title{
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sel-bar-meta{
  font-size:12px;
  color:var(--sub);
  white-space:nowrap;
  flex:0 0 auto;
}

.sel-empty{
  padding:8px 10px;
  border-radius:12px;
  border:1px dashed var(--ui-border-weak);
  color:var(--sub);
}

.sel-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.sel-card-tools{ display:flex; align-items:center; gap:6px; }
.sel-card-title{
  font-weight:600;
  font-size:14px;
  color:var(--sub);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sel-card-host{
  overflow:auto;
  min-height:0;
  padding-right:2px;
}

.sel-placeholder{
  padding:16px;
  border-radius:16px;
  border:1px dashed var(--ui-border-weak);
  color:var(--sub);
}

.sel-card{
  background: rgba(0,0,0,.10);
  border:1px solid var(--ui-border-ultraweak);
  border-radius:16px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sel-card-pills{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.sel-pill-row{ display:flex; gap:8px; flex-wrap:wrap; }

.sel-card-media img{
  width:100%;
  height:auto;
  aspect-ratio: 16 / 9;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--ui-border-ultraweak);
  display:block;
}

.sel-card-h{
  margin:0;
  font-size:18px;
  line-height:1.15;
}

.sel-card-body p{
  margin:0;
  color:var(--text);
  line-height:1.35;
  white-space:pre-wrap;
}

.sel-tags{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:2px;
}

.sel-tag-row{ display:flex; gap:10px; }
.sel-tag-k{ width:86px; color:var(--sub); font-size:12px; }
.sel-tag-v{ flex:1 1 auto; color:var(--text); font-size:12px; opacity:.95; }

/* Mobiel: alles onder elkaar (geen zij-highlight) */
@media (max-width:768px){
  .selection-pane{ flex-direction:column; max-height:none; }
  .selection-left{ width:100%; flex:0 0 auto; }
}


/* =====================================================
   Detailpaneel: geselecteerde kaart als echte kaart (preview)
   ===================================================== */
.selection-pane .detail-card{
  width:min(100%, var(--sel-card-w, 360px));
  align-self:flex-start;
}

.selection-pane .detail-card.preview .card-options,
.selection-pane .detail-card.preview .card-mini,
.selection-pane .detail-card.preview .card-media-tools,
.selection-pane .detail-card.preview .card-link-overlay{
  pointer-events:none;
}

/* In bars-weergave: voorkom dat de compact/bars-regels de preview-kaart 'platdrukken' */
body[data-view="bars"] .selection-pane .detail-card .card-label-row{
  height:auto;
  min-height:16px;
  font-size:11px;
  line-height:1.2;
  margin:0;
}

body[data-view="bars"] .selection-pane .detail-card .card-label-row-theme{
  display:block;
}

body[data-view="bars"] .selection-pane .detail-card .card-labels{
  overflow:visible;
}

body[data-view="bars"] .selection-pane .detail-card .meta-actions{
  height:auto;
  min-height:unset;
  align-items:flex-end;
  padding-top:4px;
  border-radius:12px;
}


/* --- Right panel (menu/views) --- */
.menu.panel.panel-right{
  left:auto;
  right:var(--page-pad);
  transform:translateX(140%);
}
body.appmenu-open .menu.panel.panel-right{
  transform:none;
}



.menu-tabpanels{ padding:0; }
.menu-tabpanel{ display:none; }
.menu-tabpanel.active{ display:block; }

.menu-inline-tools{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:4px 4px 0 4px;
}

.filter-metrics{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-height:28px;
}

.metric-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--ui-border-weak);
  background: rgba(255,255,255,.03);
  color: var(--card-sub, var(--sub));
  font-size:11px;
  line-height:1;
  user-select:none;
}

.metric-pill strong{
  color: var(--text);
  font-weight:700;
  letter-spacing:.2px;
}

/* Views tree (accordion) */
.views-tree{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}
.view-group{
  border:1px solid var(--ui-border-ultraweak);
  border-radius:12px;
  padding:6px 8px;
  background:rgba(255,255,255,.03);
}
.view-group > summary{
  cursor:pointer;
  user-select:none;
  font-size:12px;
  color:var(--text);
  list-style:none;
}
.view-group > summary::-webkit-details-marker{ display:none; }
.view-children{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px 2px 2px;
}

.view-children .ghostbtn.active{
  background:rgba(96,165,250,.14);
  border-color:rgba(96,165,250,.28);
  color:var(--text);
}

/* =========================
   Quadranten matrix view
   ========================= */
.matrix-view{
  display:none;
}
body[data-view-kind="matrix"] .matrix-view{
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid var(--ui-border-ultraweak);
  border-radius:16px;
  overflow:hidden;
}
/* body[data-view-kind="matrix"] #grid{ display:none; } */

.matrix-head{
  position:sticky;
  top:0;
  z-index:3;
  padding:12px;
  border-bottom:1px solid var(--ui-border-ultraweak);
  background:rgba(255,255,255,.02);
}
.matrix-body{
  display:grid;
  grid-template-columns: 1fr; /* was: 320px 1fr */
  gap:16px;
  padding:12px;
  align-items:stretch;
  flex:1 1 auto;
  min-height:0;
}
@media (max-width:768px){
  body[data-view-kind="matrix"] .matrix-body{ grid-template-columns:1fr; }
}

.matrix-left{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  overflow:auto;
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* matrix title/subtitle live in .matrix-head */
.matrix-h-title{ font-size:14px; font-weight:700; }
.matrix-h-sub{ font-size:11px; color:var(--sub); opacity:.9; }

.matrix-right{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.matrix-itemlist{
  overflow:visible;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-right:4px;
}
.matrix-item{
  display:flex;
  gap:8px;
  align-items:center;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid var(--ui-border-weak);
  background:rgba(255,255,255,.04);
  cursor:grab;
  user-select:none;
}
.matrix-item:active{ cursor:grabbing; }
.matrix-item .mi-dot{
  width:8px; height:8px; border-radius:999px;
  background:var(--ui-border-strong);
  flex:0 0 auto;
}
.matrix-item[data-placed="1"] .mi-dot{ background:rgba(96,165,250,.9); }
.matrix-item .mi-title{
  font-size:12px;
  line-height:1.2;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.matrix-right{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.matrix-canvas-wrap{
  display:grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: 1fr auto;
  gap:10px;
  align-items:stretch;
}

.matrix-y-label{
  grid-column:1;
  grid-row:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  padding:6px 0;
  color:var(--sub);
  font-size:11px;
}
.matrix-y-label .axis-label{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-weight:700;
  color:rgba(255,255,255,.72);
}

.matrix-x-label{
  grid-column:2;
  grid-row:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--sub);
  font-size:11px;
  padding:0 6px;
}
.matrix-x-label .axis-label{
  font-weight:700;
  color:rgba(255,255,255,.72);
}

.matrix-canvas{
  grid-column:2;
  grid-row:1;
  position:relative;
  background:var(--panel);
  border:1px solid var(--ui-border-ultraweak);
  border-radius:16px;
  min-height:520px;
  overflow:hidden;
}

.matrix-canvas::before,
.matrix-canvas::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
/* middenlijnen */
.matrix-canvas::before{
  background:
    linear-gradient(to right, transparent 49.6%, var(--ui-border-weak) 50%, transparent 50.4%),
    linear-gradient(to top,  transparent 49.6%, var(--ui-border-weak) 50%, transparent 50.4%);
}
/* subtle grid */
.matrix-canvas::after{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to top, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity:.35;
}

.matrix-quadrants{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.matrix-q{
  position:relative;
  padding:10px;
}
.matrix-q-name{
  position:absolute;
  top:10px;
  left:10px;
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.78);
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.matrix-q.drag-over{
  outline:2px solid rgba(96,165,250,.55);
  outline-offset:-2px;
  background:rgba(96,165,250,.06);
}

.matrix-nodes{
  position:absolute;
  inset:0;
}

.matrix-node{
  position:absolute;
  transform:translate(-50%, -50%);
  max-width:240px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--ui-border-weak);
  background:rgba(15,23,42,.92);
  color:var(--text);
  font-size:12px;
  line-height:1.2;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  cursor:grab;
  user-select:none;
}
.matrix-node:active{ cursor:grabbing; }

.matrix-node .mn-title{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:220px;
}

.matrix-node .mn-hint{
  display:block;
  margin-top:4px;
  font-size:10px;
  color:rgba(255,255,255,.55);
}


/* Views: rows with actions */
.view-row{ display:flex; gap:8px; align-items:center; }
.view-row .view-btn{ flex:1 1 auto; text-align:left; }
.view-row .view-actions{ display:flex; gap:6px; }
.view-row .view-actions .iconbtn.small{ width:30px; height:30px; border-radius:10px; }
.view-row .view-actions .iconbtn.small:hover{ background:var(--ui-border-ultraweak); }

/* Matrix node remove button */
.matrix-node .mn-remove{
  position:absolute;
  top:6px; right:6px;
  width:22px; height:22px;
  border-radius:999px;
  border:1px solid var(--ui-border);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.75);
  font-size:14px;
  line-height:1;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.matrix-node:hover .mn-remove{ display:flex; }
.matrix-node .mn-remove:hover{ background:rgba(239,68,68,.16); border-color:rgba(239,68,68,.28); color:rgba(255,255,255,.9); }

/* Matrix settings panel */
.matrix-left-head-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.matrix-left-tools{ display:flex; align-items:center; gap:6px; }
.matrix-settings{ margin-top:10px; padding:10px; border-radius:14px; border:1px solid var(--ui-border-weak); background:rgba(255,255,255,.03); }
.matrix-settings.hidden{ display:none; }
.matrix-settings .ms-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.matrix-settings label{ display:flex; flex-direction:column; gap:6px; font-size:11px; color:var(--sub); }
.matrix-settings input{ height:var(--control-h); border-radius:10px; border:1px solid var(--ui-border); background:var(--ui-plate-strong); color:var(--text); padding:0 10px; font-size:12px; }
.matrix-settings .ms-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }



/* ==========================================================
   Zones UI (rail + 3 zones)
   ========================================================== */

:root{
  --rail-w: 62px;
  --rail-wave-w: 52px;
  --rail-wave-overhang: 36px;
  --z1w: 360px;
  --z2w: 520px;
  --z1w-collapsed: 0px;
  --z2w-collapsed: 0px;
  --resizer-w: 8px;
  --resizer-w-collapsed: 0px;
}

/* Layout grid */
.zones-shell{
  position:relative;
  height: calc(100dvh - var(--topbar-h));
  display:grid;
  grid-template-columns:
    var(--z1w-eff, var(--z1w))
    var(--rail-w)
    var(--z2w-eff, var(--z2w))
    var(--res23w-eff, var(--resizer-w))
    1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "zone1 rail zone2top res23 zone3"
    "zone1 rail zone2rel res23 zone3"
    "zone1 rail zone2main res23 zone3";
  gap:0;
  margin:0;
  padding:0;
  min-width:0;
}

/* ----------------------------------------------------------
   Rail (altijd zichtbaar) — scheiding Zone 1 / Zone 2 controls
   ---------------------------------------------------------- */

.zone-rail{
  grid-area: rail;
  position:relative;
  z-index:25;
  min-width:0;
  overflow:visible;
  /* border-left: 1px solid var(--ui-border-ultraweak); */
  /* border-right: 1px solid var(--ui-border-ultraweak); */
  /* --rail-bg:
    radial-gradient(140px 220px at 20% 15%, rgba(22, 41, 65, 0.18) 0%, rgba(96,165,250,0) 70%),
    radial-gradient(180px 280px at 0% 70%, rgba(167,139,250,.16) 0%, rgba(167,139,250,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 40%, rgba(0,0,0,0) 100%),
    rgba(17,24,39,.55); */
  /* background: var(--rail-bg); */
  backdrop-filter: blur(10px) saturate(1.2);
}

.zone-rail::after,
.zone-rail::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: var(--rail-wave-w);
  background: var(--rail-bg);
  /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%20600'%20preserveAspectRatio='none'%3E%0A%20%20%3Cpath%20fill='white'%20d='M0%200H38C56%200%2060%2078%2038%20112C16%20146%2016%20226%2038%20260C60%20294%2056%20372%2038%20406C20%20440%2020%20520%2038%20556C56%20592%2056%20600%2038%20600H0Z'/%3E%0A%3C/svg%3E"); */
  /* mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%20600'%20preserveAspectRatio='none'%3E%0A%20%20%3Cpath%20fill='white'%20d='M0%200H38C56%200%2060%2078%2038%20112C16%20146%2016%20226%2038%20260C60%20294%2056%20372%2038%20406C20%20440%2020%20520%2038%20556C56%20592%2056%20600%2038%20600H0Z'/%3E%0A%3C/svg%3E"); */
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events:none;
  opacity:.95;
}

.zone-rail::after{
  right: calc(var(--rail-wave-overhang) * -1);
  filter: drop-shadow(12px 0 18px rgba(0,0,0,.35));
}

.zone-rail::before{
  left: calc(var(--rail-wave-overhang) * -1);
  transform: scaleX(-1);
  filter: drop-shadow(-12px 0 18px rgba(0,0,0,.35));
}

/* Als Zone 1 dicht is (of zones verborgen): geen linkse wave (voorkomt horizontale scroll) */
body:not(.appmenu-open) .zone-rail::before,
body[data-zones="hidden"] .zone-rail::before{
  display:none;
}
.rail-stack{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding: 10px 8px;
}

.rail-group{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  width:100%;
}

.rail-spacer{
  flex:1;
}

.rail-divider{
  width: 38px;
  height: 1px;
  background: var(--ui-border-weak);
  opacity:.9;
}

.rail-btn{
  width: 40px;
  height: 40px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  border:1px solid var(--ui-border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 10px 24px rgba(0,0,0,.22);
}
.rail-btn:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
}
.rail-btn:active{ transform: translateY(0px) scale(.98); }

.rail-btn[disabled]{ opacity:.38; cursor:not-allowed; transform:none; }

.rail-btn--zones{
  background: linear-gradient(180deg, rgba(96,165,250,.16), rgba(167,139,250,.14));
  border-color: var(--ui-border-strong);
}
.rail-btn--zones:hover{ background: linear-gradient(180deg, rgba(96,165,250,.22), rgba(167,139,250,.18)); }

.rail-btn--add{
  background: linear-gradient(180deg, rgba(96,165,250,.22), rgba(96,165,250,.10));
  border-color: rgba(96,165,250,.40);
}
.rail-btn--add:hover{
  background: linear-gradient(180deg, rgba(96,165,250,.28), rgba(96,165,250,.14));
  border-color: rgba(96,165,250,.55);
}

.rail-svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity:.92;
}

/* Active states (only when the related zone is actually open/visible) */
body.appmenu-open:not([data-zones="hidden"])[data-menu-tab="filters"] .rail-btn[data-menu-tab="filters"],
body.appmenu-open:not([data-zones="hidden"])[data-menu-tab="views"]   .rail-btn[data-menu-tab="views"],
body.appmenu-open:not([data-zones="hidden"])[data-menu-tab="io"]      .rail-btn[data-menu-tab="io"]{
  background: rgba(96,165,250,.14);
  border-color: rgba(96,165,250,.34);
}

body.appmenu-open:not([data-zones="hidden"])[data-menu-tab="settings"] .rail-btn[data-menu-tab="settings"],
 body.appmenu-open:not([data-zones="hidden"])[data-menu-tab="theme"] .rail-btn[data-menu-tab="theme"]{
  background: rgba(96,165,250,.14);
  border-color: rgba(96,165,250,.34);
}


body:not([data-zones="hidden"]):not([data-zone2="collapsed"])[data-view="cards"] .rail-btn[data-view="cards"],
body:not([data-zones="hidden"]):not([data-zone2="collapsed"])[data-view="bars"]  .rail-btn[data-view="bars"]{
  background: rgba(96,165,250,.14);
  border-color: rgba(96,165,250,.34);
}

#btnRailZones.active{
  background: var(--ui-border-ultraweak);
  border-color: rgba(255,255,255,.26);
}

#btnRailZone2Collapse.active{
  background: var(--ui-border-ultraweak);
  border-color: rgba(255,255,255,.26);
}

/* Flip icons for restore/expand states */
body[data-zones="hidden"] #btnRailZones .rail-svg{ transform: rotate(180deg); }
body[data-zone2="collapsed"] #btnRailZone2Collapse .rail-svg{ transform: scaleX(-1); }

/* Rail segmented group */
.rail-seg{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  width:100%;
}

/* ----------------------------------------------------------
   Zone 1 (menu)
   ---------------------------------------------------------- */

.zones-shell #appMenu.menu.panel{
  grid-area: zone1;
  position:relative;
  inset:auto;
  width:100%;
  height:100%;
  max-width:none;
  transform:none !important;
  transition:none;
  border-radius:0;
  overflow:auto;
  container-type: inline-size; /* Zone 1 container: responsive grids */
}

/* ----------------------------------------------------------
   Zone 1 — responsive grids (Import/Export + Instellingen)
   - switches 2-col grids to 1-col when Zone 1 becomes narrow
   ---------------------------------------------------------- */
@container (max-width: 520px){
  #tabIO .grid2,
  #tabSettings .grid2{ grid-template-columns: 1fr; }

  #tabSettings .pv-style-grid,
  #tabSettings .pv-rel-grid{ grid-template-columns: 1fr; }

  #tabSettings .matrix-settings .ms-grid{ grid-template-columns: 1fr; }
}

/* Fallback (viewport-based) for browsers without container queries */
@media (max-width: 520px){
  #tabIO .grid2,
  #tabSettings .grid2{ grid-template-columns: 1fr; }

  #tabSettings .pv-style-grid,
  #tabSettings .pv-rel-grid{ grid-template-columns: 1fr; }

  #tabSettings .matrix-settings .ms-grid{ grid-template-columns: 1fr; }
}


body:not(.appmenu-open) .zones-shell{ --z1w-eff: var(--z1w-collapsed); }
body.appmenu-open .zones-shell{ --z1w-eff: var(--z1w); }

body:not(.appmenu-open) #appMenu{ display:none; }

/* ----------------------------------------------------------
   Zone 2 header + main
   ---------------------------------------------------------- */

#zone2Rel{
  grid-area: zone2rel;
  background: var(--bg);
  border-bottom: 1px solid var(--ui-border-ultraweak);
  padding: 10px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}


#zone2Relations{
  background: var(--panel);
  border: 1px solid var(--ui-border-ultraweak);
  border-radius: 16px;
  padding: 10px;
  overflow:auto;
  max-height: 42vh;
}
#zone2Relations .selection-left{ width:100%; flex: 0 0 auto; }

#zone2Main{
  grid-area: zone2main;
  overflow:auto;
  padding: 16px;
  min-width:0;
}

/* Zone 2 top search bar
   - Sits above Zone 2a (relations) and Zone 2b (list).
   - Auto-collapses on scroll when Zone 2a is inactive (smooth).
*/
#zone2SearchSlot{
  grid-area: zone2top;
  background: var(--bg);
  border-bottom: 1px solid var(--ui-border-ultraweak);
  padding: 10px 12px;
  min-width:0;

  /* smooth collapse (no abrupt jump) */
  overflow:hidden;
  max-height: 160px;
  transition: max-height .22s ease, padding .22s ease, border-color .22s ease;
}

#zone2Searchbar{
  display:flex;
  align-items:center;
  gap:10px;
  transition: opacity .16s ease, transform .22s ease;
}

#zone2Searchbar .zone2-search{
  flex:1;
  min-width:0;
}

#zone2Searchbar #resultCount{
  margin-left:auto;
  margin-right:0;
  white-space:nowrap;
  font-size:12px;
  opacity:.75;
}

body[data-z2search="hidden"] #zone2SearchSlot{
  max-height: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  border-bottom-color: transparent;
}

body[data-z2search="hidden"] #zone2Searchbar{
  opacity:0;
  transform: translateY(-8px);
  pointer-events:none;
}

/* ----------------------------------------------------------
   Zone 3 (detail / views)
   ---------------------------------------------------------- */

#zone3{
  grid-area: zone3;
  overflow:auto;
  padding: 16px;
  min-width:0;
  background: var(--bg);
  border-left: 1px solid var(--ui-border-ultraweak);
}

#zone3 .matrix-view{ margin:0; }
#zone3 #selectionPane.selection-pane{ max-height:none; height:auto; }

/* When detail is not active and matrix is not active: hide Zone 3 and let Zone 2 span */
body:not([data-selactive="1"]):not([data-view-kind="matrix"]):not([data-present="1"]) #zone3{ display:none; }
body:not([data-selactive="1"]):not([data-view-kind="matrix"]):not([data-present="1"]) #resizer23{ display:none; }
body:not([data-selactive="1"]):not([data-view-kind="matrix"]):not([data-present="1"]) #zone2Rel,
body:not([data-selactive="1"]):not([data-view-kind="matrix"]):not([data-present="1"]) #zone2Main{ grid-column: 3 / -1; }

/* Keep grid visible even in matrix mode (zone2 remains source list) */
body[data-view-kind="matrix"] #grid{ display:grid !important; }

/* Hide matrix's own itemlist in left column (we use Zone 2 list) */
body[data-view-kind="matrix"] #matrixItemList{ display:none; }

/* ----------------------------------------------------------
   Collapses & hidden states
   ---------------------------------------------------------- */

/* Zone 2 collapsed */
body[data-zone2="collapsed"] .zones-shell{ --z2w-eff: var(--z2w-collapsed); --res23w-eff: var(--resizer-w-collapsed); }
body[data-zone2="collapsed"] #zone2SearchSlot,
body[data-zone2="collapsed"] #zone2Main,
body[data-zone2="collapsed"] #zone2Rel{ display:none; }

/* Zones hidden (zone1 + zone2) */
body[data-zones="hidden"] .zones-shell{
  --z1w-eff: 0px;
  --z2w-eff: 0px;
  --res23w-eff: 0px;
}
body[data-zones="hidden"] #appMenu,
body[data-zones="hidden"] #zone2SearchSlot,
body[data-zones="hidden"] #zone2Rel,
body[data-zones="hidden"] #zone2Main,
body[data-zones="hidden"] #resizer12,
body[data-zones="hidden"] #resizer23{ display:none !important; }

/* Zones hidden: hide rail chrome too (keep only the toggle button as a floating restore) */
body[data-zones="hidden"] .zones-shell{
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "zone3";
}

/* Take the rail out of the grid when zones are hidden; show only the quick-restore button */
body[data-zones="hidden"] #zoneRail{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  width: auto;
  height: auto;
  padding: 0;
  z-index: 80;
  background: transparent;
  backdrop-filter: none;
}
body[data-zones="hidden"] #zoneRail::before,
body[data-zones="hidden"] #zoneRail::after{ display:none; }

body[data-zones="hidden"] #zoneRail .rail-stack{
  padding: 0;
  gap: 0;
  height: auto;
  min-height: 0;
}
body[data-zones="hidden"] #zoneRail .rail-stack > *:not(#btnRailZones){
  display:none !important;
}


/* ----------------------------------------------------------
   Resizers
   ---------------------------------------------------------- */

.zone-resizer{
  background: rgba(255,255,255,.04);
  cursor: col-resize;
}
.zone-resizer:hover{ background: var(--ui-border-ultraweak); }
#resizer23{ grid-area: res23; }

/* Resizer 12 zit in de rail (tussen Zone 1 en 2) */
#resizer12.rail-resizer{
  position:absolute;
  top:0; bottom:0;
  left:-4px;
  width: var(--resizer-w);
  background: transparent;
  z-index: 60;
}
#resizer12.rail-resizer:hover{ background: var(--ui-border-ultraweak); }
body.dragging{ cursor: col-resize; user-select:none; }

/* Remove legacy wrap offset since grid handles layout */
.wrap{ margin-left:0 !important; padding:0 !important; }

/* ----------------------------------------------------------
   Mobile (rail fixed, zones stack; zone1 as overlay)
   ---------------------------------------------------------- */

@media (max-width: 768px){
  .zone-rail::before{ display:none; }

  /* .zones-shell{
    grid-template-columns: var(--rail-w) 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "rail zone2top"
      "rail zone2rel"
      "rail zone2main"
      "rail zone3";
    height: auto;
    min-height: calc(100dvh - var(--topbar-h));
  }

@media (max-width: 900px){ */

  /* 1) Fix: grid mag niet meegroeien met content */
  .zones-shell{
    grid-template-columns: var(--rail-w) 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "rail zone2top"
      "rail zone2rel"
      "rail zone2main"
      "rail zone3";

    /* was: height:auto + min-height:calc(...) */
    height: calc(100dvh - var(--topbar-h));
    height: calc(100svh - var(--topbar-h)); /* iOS/Safari vriendelijk */
    min-height: 0;
    overflow: hidden; /* voorkomt dat Zone2 + Zone3 als 1 lange pagina scrollen */
  }

  /* 2) Belangrijk: grid-children mogen wél scrollen (min-height:0 is cruciaal in grid) */
  #zone2Main,
  #zone3{
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 3) Rail mag scrollen als knoppen hoger worden dan viewport */
  .zone-rail{
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* rail-stack had height:100%; op mobiel beter loslaten zodat rail kan scrollen */
  .rail-stack{
    height: auto;
    min-height: 100%;
  }

  /* 4) Als Zone 3 actief is: maak het echt “1 paneel” (geen extra rijen) */
  body[data-mobilezone="zone3"] .zones-shell{
    grid-template-rows: 1fr;
    grid-template-areas: "rail zone3";
  }

  /* 5) Als zones hidden is: idem (rail blijft, zone3 vult) */
  body[data-zones="hidden"] .zones-shell{
    grid-template-rows: 1fr;
    grid-template-areas: "rail zone3";
  }

  body[data-zones="hidden"] .zones-shell{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "zone3";
  }


  /* Zone 1 becomes overlay on mobile */
  #appMenu.menu.panel{
    position: fixed;
    top: var(--topbar-h);
    bottom: 0;
    left: var(--rail-w);
    width: min(420px, calc(100vw - var(--rail-w)));
    height: auto;
    border-radius: 0 16px 16px 0;
    border: 1px solid var(--ui-border-weak);
    transform: translateX(-120%);
    transition: transform .22s ease;
    z-index: 30;
    display:block; /* override collapsed hide so overlay can open */
  }


  /* Zone 1 moet op mobiel een overlay zijn (buiten de grid) */
  .zones-shell #appMenu.menu.panel{
    position: fixed;
    top: var(--topbar-h);
    bottom: 0;
    left: var(--rail-w);
    width: min(420px, calc(100vw - var(--rail-w)));
    height: auto;

    border-radius: 0 16px 16px 0;
    border: 1px solid var(--ui-border-weak);

    /* override desktop: transform:none !important */
    transform: translateX(-120%) !important;
    transition: transform .22s ease;

    z-index: 30;
    display: block; /* zorg dat hij kan “inschuiven” */
  }

  body.appmenu-open .zones-shell #appMenu.menu.panel{
    transform: translateX(0) !important;
  }

  /* Laat mobile de overlay niet “verdwijnen” via desktop-collapselogica */
  body:not(.appmenu-open) .zones-shell #appMenu{
    display: block;
  }


  body.appmenu-open #appMenu.menu.panel{ transform: translateX(0); }
  body:not(.appmenu-open) #appMenu{ display:block; }

  /* In mobile: no drag-resizers */
  #resizer12, #resizer23{ display:none !important; }

  #zone3{ border-left:none; padding: 12px; }
  #zone2Main{ padding: 12px; }

  /* In zones-hidden: keep rail visible, zone3 fills */
  body[data-zones="hidden"] .zones-shell{
    grid-template-areas:
      "rail zone3"
      "rail zone3"
      "rail zone3"
      "rail zone3";
  }

  /* ----------------------------------------------------------
     Mobile: 1 zone tegelijk (rail blijft links)

     Sturing via: body[data-mobilezone="zone1|zone2|zone3"]
     - zone1 = menu overlay (Zone 2/3 niet beschikbaar)
     - zone2 = lijst (zone2Rel + zone2Main)
     - zone3 = detail/views
     ---------------------------------------------------------- */

  /* default = Zone 2 (als JS nog niets gezet heeft) */
  body:not([data-mobilezone]) #zone3{ display:none; }

  /* Zone 1 actief: alleen rail + menu overlay */
  body[data-mobilezone="zone1"] #zone2SearchSlot,
  body[data-mobilezone="zone1"] #zone2Rel,
  body[data-mobilezone="zone1"] #zone2Main,
  body[data-mobilezone="zone1"] #zone3{
    display:none !important;
  }

  /* Zone 2 actief: verberg Zone 3 */
  body[data-mobilezone="zone2"] #zone3{
    display:none !important;
  }

  /* Zone 3 actief: verberg Zone 2 */
  body[data-mobilezone="zone3"] #zone2SearchSlot,
  body[data-mobilezone="zone3"] #zone2Rel,
  body[data-mobilezone="zone3"] #zone2Main{
    display:none !important;
  }

  /* Zone 3 moet in mobile ook echt de volledige kolom vullen */
  body[data-mobilezone="zone3"] .zones-shell{
    grid-template-areas:
      "rail zone3"
      "rail zone3"
      "rail zone3";
  }


  /* --- Mobile hardening: voorkom viewport-oprekken + 2D scroll --- */

  /* Grid-child mag de track niet vergroten (cruciaal in CSS Grid) */
  .zone-rail{
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Zone 2/3: alleen verticaal scrollen */
  #zone2Main,
  #zone3{
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Cards/grid mogen nooit breder zijn dan het paneel */
  #grid.grid{ grid-template-columns: 1fr; }
  .card{ min-width: 0; }

  /* Body zelf niet laten “meescrollen” (alle scroll zit in panelen) */
  html, body{
    height: 100%;
    overflow: hidden;
  }

  /* Relatiespaneel begrenzen zodat Zone2Main ruimte houdt */
  #zone2Rel{
    min-height: 0;
    max-height: 30svh;
    overflow: auto;
  }
}

@media (max-width: 768px){
  /* Mobile reset: voorkom impliciete kolommen door desktop grid-column span */
  #zone2Rel,
  #zone2Main{
    grid-column: auto !important;
  }
}
/* ==========================================================
   Rail v2 — two-sided dock (Zone2 rechts, Zone1 links)
   Plak onder de bestaande rail styles.
   ========================================================== */

/* 1) Oude rail-wave uit (die zegt nu niets over 'van wie' de knoppen zijn) */
.zone-rail::before,
.zone-rail::after{
  display:none;
}

/* 2) Subtiele split-tint in de rail (links=zone1, rechts=zone2) */
.zone-rail{
  background:
    linear-gradient(90deg,
      rgba(96,165,250,.08) 0%,
      rgba(96,165,250,.02) 47%,
      /* var(--ui-border-weak) 50%, */
      rgba(167,139,250,.02) 53%,
      rgba(167,139,250,.08) 100%),
    var(--rail-bg);
}

/* 3) Elke rail-group krijgt een “dock-plate” + buttons uitlijnen naar hun zijde */
.rail-group{
  position:relative;
  z-index:0;
  padding: 8px 0;
}

/* Zone 2: naar rechts uitlijnen */
.rail-group[data-group="zone2"]{
  align-items:flex-end;
  padding-right: 8px;
  --dock-bg: linear-gradient(180deg, rgba(167,139,250,.22), rgba(17,24,39,.18));
}
.rail-group[data-group="zone2"] .rail-seg{ align-items:flex-end; }

/* Zone 1: naar links uitlijnen */
.rail-group[data-group="zone1"]{
  align-items:flex-start;
  padding-left: 8px;
  --dock-bg: linear-gradient(180deg, rgba(96,165,250,.20), rgba(17,24,39,.18));
}

/* Dock plate achter de knoppen */
.rail-group[data-group="zone2"]::before,
.rail-group[data-group="zone1"]::before{
  content:"";
  position:absolute;
  top:-10px; bottom:-10px;
  border-radius: 18px;
  border:1px solid var(--ui-border-weak);
  background: var(--dock-bg);
  box-shadow: 0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
  pointer-events:none;
  z-index:-1;
}

/* Plate meer naar de “eigen” kant */
.rail-group[data-group="zone2"]::before{ left: 14px; right: 2px; }
.rail-group[data-group="zone1"]::before{ left: 2px; right: 14px; }

/* 4) Optioneel: kleine “connector-wave” per group richting z’n zone */
.rail-group[data-group="zone2"]::after,
.rail-group[data-group="zone1"]::after{
  content:"";
  position:absolute;
  top:-10px; bottom:-10px;
  width: 26px;
  background: var(--dock-bg);
  /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%20600'%20preserveAspectRatio='none'%3E%0A%20%20%3Cpath%20fill='white'%20d='M0%200H38C56%200%2060%2078%2038%20112C16%20146%2016%20226%2038%20260C60%20294%2056%20372%2038%20406C20%20440%2020%20520%2038%20556C56%20592%2056%20600%2038%20600H0Z'/%3E%0A%3C/svg%3E"); */
  /* mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%20600'%20preserveAspectRatio='none'%3E%0A%20%20%3Cpath%20fill='white'%20d='M0%200H38C56%200%2060%2078%2038%20112C16%20146%2016%20226%2038%20260C60%20294%2056%20372%2038%20406C20%20440%2020%20520%2038%20556C56%20592%2056%20600%2038%20600H0Z'/%3E%0A%3C/svg%3E"); */
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events:none;
  opacity:.95;
  z-index:-2;
}

.rail-group[data-group="zone2"]::after{
  right: -12px; /* richting Zone 2 */
  filter: drop-shadow(10px 0 16px rgba(0,0,0,.30));
}

.rail-group[data-group="zone1"]::after{
  left: -12px; /* richting Zone 1 */
  transform: scaleX(-1);
  filter: drop-shadow(-10px 0 16px rgba(0,0,0,.30));
}

/* Als Zone 1 dicht is: geen connector links (zelfde gedachte als je eerdere wave-hardening) */
body:not(.appmenu-open) .rail-group[data-group="zone1"]::after{
  display:none;
}

/* Mobiel: nooit links laten uitsteken (voorkomt horizontale scroll) */
@media (max-width:768px){
  .rail-group[data-group="zone1"]::after{ display:none; }
}
/* ==========================================================
   Rail + Zone1 tint lichter, Zone2-knoppenblok krijgt "oude" rail-vulling
   ========================================================== */

/* 1) Rail: bewaar huidige (donkere) rail als "deep" en zet rail zelf lichter */
/* #zoneRail.zone-rail{
  /* dit is 1-op-1 je huidige rail background (oude look) */
  /* --rail-bg-deep:
    radial-gradient(140px 220px at 20% 15%, rgba(96,165,250,.18) 0%, rgba(96,165,250,0) 70%),
    radial-gradient(180px 280px at 0% 70%, rgba(167,139,250,.16) 0%, rgba(167,139,250,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 40%, rgba(0,0,0,0) 100%),
    rgba(17,24,39,.55); */

  /* iets lichter dan deep (pas vooral de laatste rgba aan voor meer/minder licht) */
  /* --rail-bg-light: */
    /* radial-gradient(140px 220px at 20% 15%, rgba(96,165,250,.14) 0%, rgba(96,165,250,0) 72%), */
    /* radial-gradient(180px 280px at 0% 70%, rgba(167,139,250,.12) 0%, rgba(167,139,250,0) 74%), */
    /* linear-gradient(90deg, var(--ui-border-ultraweak) 0%, rgba(255,255,255,.03) 46%, rgba(0,0,0,0) 100%), rgba(31,41,55,.38); */
    /* linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 55%, rgba(0,0,0,0) 100%), */
    /* rgba(31,41,55,.82); */

  /* laat alles dat var(--rail-bg) gebruikt (ook je waves) automatisch de lichte variant nemen */
  /* --rail-bg: var(--rail-bg-light); */
/* } */

/* 2) Zone 1: net iets lichter dan standaard panel */
.zones-shell #appMenu.menu.panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 55%, rgba(0,0,0,0) 100%),
    rgba(31,41,55,.82);
}

/* 3) Alleen achter de Zone-2 knoppen (rail-group) een "deep" plate met afgeronde linkerkant */
#zoneRail .rail-group[data-group="zone2"]{
  position:relative;
  padding: 10px 8px;      /* ruimte zodat de plate niet strak tegen content zit */
  z-index:0;
}

#zoneRail .rail-group[data-group="zone2"]::before{
  content:"";
  position:absolute;
  top: 4px;
  bottom: 4px;
  right: 0;
  left: 10px;             /* laat links een strook rail zichtbaar -> hoort bij Zone 2 */
  background: var(--rail-bg-deep);
  border: 1px solid var(--ui-border-ultraweak);
  border-radius: 18px 0 0 18px;  /* afgerond links, strak rechts */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 22px rgba(0,0,0,.18);
  pointer-events:none;
  z-index:-1;
}

/* zorg dat knoppen boven de plate laten renderen */
#zoneRail .rail-group[data-group="zone2"] > *{
  position:relative;
  z-index:1;
}

/* ==========================================================
   Rail — minimal, geïntegreerd tussen Zone 1 & Zone 2
   Doel: rail valt weg in het geheel (geen dock-plates / waves / gradients),
   knoppen voelen als standaard 'ghost' knoppen.
   ========================================================== */

#zoneRail.zone-rail{
  background: var(--panel);
    background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 55%, rgba(0,0,0,0) 100%),
    rgba(31,41,55,.82);
  /* border-left: 1px solid rgba(255,255,255,.06); */
  /* border-right: 1px solid rgba(255,255,255,.06); */
  backdrop-filter: none;
}

/* kill all decorative pseudo-elements (oude waves / dock plates / connector shapes) */
#zoneRail.zone-rail::before,
#zoneRail.zone-rail::after{
  content: none !important;
  display: none !important;
}

#zoneRail .rail-group::before,
#zoneRail .rail-group::after,
#zoneRail .rail-group[data-group="zone1"]::before,
#zoneRail .rail-group[data-group="zone1"]::after,
#zoneRail .rail-group[data-group="zone2"]::before,
#zoneRail .rail-group[data-group="zone2"]::after{
  content: none !important;
  display: none !important;
}

/* groepen: geen extra padding/offsets, gewoon stacken */
#zoneRail .rail-group,
#zoneRail .rail-group[data-group="zone1"],
#zoneRail .rail-group[data-group="zone2"]{
  padding: 0;
  align-items: center;
}

/* knoppen: match met ghost/icon knoppen in de zones (flat, geen shadow/tilt) */
/* #zoneRail .rail-btn{
  border-radius: 12px;
  border: 1px solid var(--ui-border-weak);
  background: rgba(255,255,255,.04);
  box-shadow: none;
  transform: none;
  transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
#zoneRail .rail-btn:hover{
  background: rgba(255,255,255,.06);
  border-color: var(--ui-border-strong);
}
#zoneRail .rail-btn:active{ transform:none; } */

/* speciale knoppen niet 'glanzen' */
#zoneRail .rail-btn--zones,
#zoneRail .rail-btn--add{
  background: rgba(255,255,255,.04);
  border-color: var(--ui-border-weak);
}
#zoneRail .rail-btn--zones:hover,
#zoneRail .rail-btn--add:hover{
  background: rgba(255,255,255,.06);
  border-color: var(--ui-border-strong);
}

/* divider rustiger (geen gradient-bar) */
#zoneRail .rail-divider{
  width: 34px;
  height: 1px;
  background: var(--ui-border-weak);
  margin: 6px auto;
}

/* Rail: visuele lane alleen voor Zone 2 knoppenblok */
#zoneRail .rail-group[data-group="zone2"]{
  width: var(--rail-w);
  padding: var(--rail-wave-overhang) 8px;
  left: 8 px;
  border-radius: 18px 0 0 18px; /* rond aan Zone-2 kant */
  /* background: linear-gradient(270deg,
    rgba(0,0,0,0) 0%,
    rgba(167,139,250,.08) 60%,
    rgba(167,139,250,.12) 100%
  );
  border-right: 1px solid rgba(167,139,250,.22); */
  background: var(--bg);
}

/* Als Zone 2 is ingeklapt: lane rustiger */
body[data-zone2="collapsed"] #zoneRail .rail-group[data-group="zone2"]{
  background: linear-gradient(270deg,
    rgba(0,0,0,0) 0%,
    rgba(167,139,250,.04) 70%,
    rgba(167,139,250,.06) 100%
  );
  background: var(--bg);
  /* border-right-color: rgba(167,139,250,.14); */
}

/* Fix: Zone-2 rail buttons exact onder elkaar */
#zoneRail .rail-group[data-group="zone2"]{
  align-items: center;          /* of: flex-end, maar kies 1 */
}

#zoneRail .rail-group[data-group="zone2"] .rail-seg{
  align-items: inherit;         /* matcht precies met de rail-group */
  width: auto;                  /* optioneel: voorkomt 'volle breedte' gedrag */
}


/* Bulkbar (Mail-style multi-select) */
.bulkbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  margin-top:8px;
  border-radius:14px;
  border:1px solid var(--ui-border-weak);
  background:rgba(0,0,0,.22);
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}
.bulkbar.hidden{ display:none; }
.bulkbar-text{ color:var(--text); font-size:13px; }
.bulkbar-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }

.ghostbtn.active{
  background: var(--ui-border-weak);
  border-color: rgba(255,255,255,.24);
}
.ghostbtn.danger{
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.50);
}

/* Card select checkbox */
.card-selectbox{
  position:absolute;
  top:10px;
  left:10px;
  width:22px;
  height:22px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.22);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:6;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.card-selectbox::after{
  content:"";
  width:10px;
  height:6px;
  border-left:2px solid rgba(255,255,255,.92);
  border-bottom:2px solid rgba(255,255,255,.92);
  transform: rotate(-45deg);
  opacity:0;
}
.card-selectbox.is-checked::after{ opacity:1; }
body[data-multiselect="1"] .card-selectbox{ display:flex; }
@media (hover:none){
  .card-selectbox{ display:flex; }
}

/* Mixed chip state (bulk label mode) */
.chip.mixed,
.chip.tri.mixed,
.chip.tri[data-state="m"]{
  outline: 1px dashed rgba(255,255,255,.22);
  outline-offset: 2px;
}
.chip.tri[data-state="m"]{
  background: rgba(148,163,184,.12);
  border-color: rgba(148,163,184,.35);
}

/* Optional: primary selection hint */
.card.selected-primary{
  box-shadow:0 0 0 2px rgba(34,211,238,.70), 0 10px 24px rgba(0,0,0,.45);
  border-color:rgba(34,211,238,.70);
}

body[data-z2search="hidden"] .bulkbar{
  opacity:0;
  transform: translateY(-6px);
}


/* ----------------------------------------------------------
   Presentation View (Zone 3, desktop)
   ---------------------------------------------------------- */

#zone3{ position: relative; }

@media (min-width: 900px){
  html, body{ height: 100%; }

  /* Presentatiemodus: focus (Zone 3), zonder scroll */
  body[data-present="1"]{
    overflow: hidden;
    height: 100dvh;
    overscroll-behavior: none;
  }
  body[data-present="1"] .zones-shell{ height: 100dvh; overflow: hidden; }
  /* Presentatie blijft binnen Zone 3 zodat de rail/menu bereikbaar blijft */
  body[data-present="1"] #presentationView.presentation-view{ position: absolute; inset: 0; z-index: 10; }


  body[data-present="1"] #zone3{
    overflow: hidden;
    padding: 0;
  }

  /* presentatie neemt Zone 3 over */
  #presentationView.presentation-view{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
  }

    .pv-close-fab{
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 25;
    background: rgba(0,0,0,.32);
    border: 1px solid var(--ui-border);
    backdrop-filter: blur(10px) saturate(1.1);
  }


  .pv-topbar{
    height: 52px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--ui-border-ultraweak);
    background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,0)), var(--bg);
  }

  .pv-titles{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .pv-title{
    font-size: 16px;
    font-weight: 650;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pv-subtitle{
    font-size: 12px;
    color: var(--sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pv-top-right{ display:flex; align-items:center; gap:8px; }

  .pv-stage{
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* extra top padding zodat de zwevende sluit-knop niet over de sheet hangt */
    padding: 56px 18px 18px;
  }

  .pv-sheet{
    width: min(1400px, calc(100% - 8px));
    height: calc(100% - 8px);
    border-radius: 18px;
    background: var(--panel);
    border: 1px solid var(--ui-border-weak);
    box-shadow: 0 18px 60px rgba(0,0,0,.45);
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
  }

  .pv-slide{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .pv-hero{
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid var(--ui-border-ultraweak);
    overflow: hidden;
  }

  .pv-hero-img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .pv-hero-icon{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 56px;
    color: rgba(255,255,255,.78);
    text-shadow: 0 10px 40px rgba(0,0,0,.45);
  }

  .pv-icon-badge{
    position: absolute;
    right: 12px;
    bottom: 12px;
    height: 34px;
    min-width: 34px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    font-size: 18px;
    border: 1px solid var(--ui-border-strong);
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(8px);
  }

  .pv-content{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;

  /* PowerPoint-achtige safe area */
  width: 100%;
  max-width: var(--pv-content-max, 1040px);
  margin: 0 auto;
  padding: var(--pv-pad-t, 26px) var(--pv-pad-r, 32px) var(--pv-pad-b, 30px) var(--pv-pad-l, 32px);
}

  .pv-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .pv-chip{
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--ui-border-weak);
    background: rgba(255,255,255,.04);
    color: var(--text);
    font-size: 12px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pv-chip-id{ border-color: var(--ui-border-strong); background: rgba(255,255,255,.06); }
  .pv-chip-level{ border-color: rgba(96,165,250,.35); }
  .pv-chip-track{ border-color: rgba(167,139,250,.35); }
  .pv-chip-scope{ border-color: rgba(34,197,94,.35); }
  .pv-chip-impact{ border-color: rgba(245,158,11,.35); }
  .pv-chip-dept{ opacity:.95; }
  .pv-chip-theme{ opacity:.92; }

  .pv-body{
  flex: 1;
  min-height: 0;
  padding: var(--pv-body-pad, 14px 14px);
  border-radius: 14px;
  border: var(--pv-body-border, 1px solid var(--ui-border-weak));
  background: var(--pv-body-bg, rgba(0,0,0,.14));
  overflow: hidden; /* no scroll */
  white-space: pre-wrap;
  line-height: 1.55;
  font-size: 14px;
}

  .pv-nav{
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    pointer-events: none;
  }
  .pv-nav .iconbtn{ pointer-events: auto; }
  .pv-nav-meta{
    pointer-events: none;
    font-size: 12px;
    color: var(--sub);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--ui-border-weak);
    background: rgba(0,0,0,.22);
  }

  /* Relatie overlay */
  .pv-rel-overlay{
    position: absolute;
    inset: 0;
    pointer-events: none;

    --pv-rel-pad: 12px;
    --pv-bubble-size: 78px;
    --pv-bubble-thumb-w: 78px;
    --pv-bubble-thumb-h: 78px;
    --pv-bubble-thumb-r: 999px;
    --pv-bubble-width: 120px;
  }
  .pv-rel-overlay[data-layout="off"]{ display:none; }
  .pv-rel-overlay .pv-bubble{ pointer-events: auto; }

  /* Classic (randen) */
  .pv-rel-ring{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    width: min(920px, calc(100% - 32px));
  }
  .pv-rel-parents{ top: 64px; }
  .pv-rel-children{ bottom: 64px; }

  .pv-rel-side{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pv-rel-left{ left: 12px; }
  .pv-rel-right{ right: 12px; }

  .pv-rel-stack{ display:flex; flex-direction:column; gap: 12px; }

  /* Positioned (op dia) */
  .pv-rel-overlay[data-layout="positioned"] .pv-rel-group{
    top: auto; bottom: auto; left: auto; right: auto;
  }
  .pv-rel-overlay[data-layout="positioned"] .pv-rel-ring{
    left: auto;
    transform: none;
    width: auto;
    max-width: min(920px, calc(100% - 32px));
  }

  .pv-rel-overlay[data-layout="positioned"] .pv-rel-siblings{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: min(920px, calc(100% - 32px));
  }
  .pv-rel-overlay[data-layout="positioned"] .pv-rel-siblings .pv-rel-side{
    position: static;
    top: auto;
    transform: none;
    width: auto;
    justify-content: center;
  }
  .pv-rel-overlay[data-layout="positioned"] .pv-rel-siblings .pv-rel-left{ left: auto; }
  .pv-rel-overlay[data-layout="positioned"] .pv-rel-siblings .pv-rel-right{ right: auto; }

  /* 9-grid mapping (data-pos) */
  .pv-rel-overlay[data-layout="positioned"] .pv-rel-group[data-pos="tl"]{ top: var(--pv-rel-pad); left: var(--pv-rel-pad); }
  .pv-rel-overlay[data-layout="positioned"] .pv-rel-group[data-pos="tc"]{ top: var(--pv-rel-pad); left: 50%; transform: translateX(-50%); }
  .pv-rel-overlay[data-layout="positioned"] .pv-rel-group[data-pos="tr"]{ top: var(--pv-rel-pad); right: var(--pv-rel-pad); }

  .pv-rel-overlay[data-layout="positioned"] .pv-rel-group[data-pos="cl"]{ top: 50%; left: var(--pv-rel-pad); transform: translateY(-50%); }
  .pv-rel-overlay[data-layout="positioned"] .pv-rel-group[data-pos="cc"]{ top: 50%; left: 50%; transform: translate(-50%,-50%); }
  .pv-rel-overlay[data-layout="positioned"] .pv-rel-group[data-pos="cr"]{ top: 50%; right: var(--pv-rel-pad); transform: translateY(-50%); }

  .pv-rel-overlay[data-layout="positioned"] .pv-rel-group[data-pos="bl"]{ bottom: var(--pv-rel-pad); left: var(--pv-rel-pad); }
  .pv-rel-overlay[data-layout="positioned"] .pv-rel-group[data-pos="bc"]{ bottom: var(--pv-rel-pad); left: 50%; transform: translateX(-50%); }
  .pv-rel-overlay[data-layout="positioned"] .pv-rel-group[data-pos="br"]{ bottom: var(--pv-rel-pad); right: var(--pv-rel-pad); }

  /* Bubbles */
  .pv-bubble{
    border: none;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    display: grid;
    justify-items: center;
    gap: 6px;
    width: var(--pv-bubble-width);
  }
  .pv-bubble.no-title{ gap: 0; }

  .pv-bubble-thumb{
    width: var(--pv-bubble-thumb-w);
    height: var(--pv-bubble-thumb-h);
    border-radius: var(--pv-bubble-thumb-r);
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  .pv-bubble-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .pv-bubble-icon, .pv-bubble-dot{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 26px;
    color: rgba(255,255,255,.82);
  }
  .pv-bubble-badge{
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 14px;
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(8px);
  }
  .pv-bubble-title{
    font-size: 12px;
    color: var(--sub);
    text-align: center;
    max-width: var(--pv-bubble-width);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pv-bubble.no-title .pv-bubble-title{ display:none; }

  .pv-bubble-more{
    height: var(--pv-bubble-thumb-h);
    width: var(--pv-bubble-thumb-w);
    border-radius: var(--pv-bubble-thumb-r);
    display: grid;
    place-items: center;
    border: 1px dashed rgba(255,255,255,.22);
    color: var(--sub);
    background: rgba(0,0,0,.18);
  }

/* extra safety: nooit deze view op mobiel */
@media (max-width: 899px){
  #presentationView{ display:none !important; }
}


/* =============================================================================
   Desktop kaarttemplates (per kaart) — thema-afhankelijk, mobiel expliciet uit
   ============================================================================= */
@media (min-width: 900px){
  .card[data-bgimg="1"],
  .card[data-illuimg="1"],
  .card[data-tpl]{
    position: relative;
  }

  .card[data-bgimg="1"]{
    overflow: hidden;
  }

  .card[data-bgimg="1"]::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--tpl-bg-img);
    background-size: var(--tpl-bg-size, cover);
    background-position: var(--tpl-bg-pos, center);
    opacity: var(--tpl-bg-opacity, .35);
    filter: blur(var(--tpl-bg-blur, 0px));
    transform: scale(1.06);
    z-index: 0;
    pointer-events: none;
  }

  .card[data-illuimg="1"]::after{
    content: "";
    position: absolute;
    width: var(--tpl-illu-size, 28%);
    height: var(--tpl-illu-size, 28%);
    background-image: var(--tpl-illu-img);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .95;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.25));
    z-index: 0;
    pointer-events: none;

    /* default = rechtsonder */
    right: 12px;
    bottom: 12px;
  }

  /* Illustratie posities (illuPos: tr/br/bl/tl/cr/cl) */
  .card[data-illu-pos="tr"]::after{ right:12px; top:12px; bottom:auto; left:auto; }
  .card[data-illu-pos="br"]::after{ right:12px; bottom:12px; top:auto; left:auto; }
  .card[data-illu-pos="bl"]::after{ left:12px; bottom:12px; top:auto; right:auto; }
  .card[data-illu-pos="tl"]::after{ left:12px; top:12px; bottom:auto; right:auto; }
  .card[data-illu-pos="cr"]::after{ right:12px; top:50%; bottom:auto; left:auto; transform: translateY(-50%); }
  .card[data-illu-pos="cl"]::after{ left:12px; top:50%; bottom:auto; right:auto; transform: translateY(-50%); }

  /* Zorg dat card content boven de pseudo-layers zit */
  .card[data-bgimg="1"] > *,
  .card[data-illuimg="1"] > *{
    position: relative;
    z-index: 1;
  }

  /* Content-anchor + align */
  .card .card-main{
    display:flex;
   flex-direction:column;
    justify-content: var(--tpl-content-justify, flex-start);
    text-align: var(--tpl-content-align, left);
  }

  /* Typografie */
  .card .card-title{
    font-size: var(--tpl-title-size, 18px);
  }
  .card .card-body{
    font-size: var(--tpl-body-size, 14px);
  }

  /* Glas-overlay voor leesbaarheid */
  .card[data-glass="1"] .card-text{
    background: var(--tpl-glass-bg, rgba(15, 23, 42, .45));
    border: 1px solid var(--ui-border);
    backdrop-filter: blur(var(--tpl-glass-blur, 10px));
    border-radius: 14px;
    padding: 10px;
  }

  /* Templates met afbeelding als achtergrond (hero verbergen) */
  .card[data-tpl="photo-bg"] .card-media,
  .card[data-tpl="photo-glass"] .card-media,
  .card[data-tpl="illu-corner"] .card-media,
  .card[data-tpl="background-photo"] .card-media,
  .card[data-tpl="document"] .card-media,
  .card[data-tpl="poster"] .card-media{
    display:none;
  }

  .card[data-tpl="poster"] .card-title{
    font-weight: 800;
    letter-spacing: .01em;
  }
  
  /* ---- Preset templates (Zone 2 card tiles) ---- */

  /* hero-top: media full-bleed bovenin */
  .card[data-tpl="hero-top"] .card-media{
    width: 100%;
    margin: 0;
    border-radius: 16px 16px 12px 12px;
    aspect-ratio: var(--tpl-hero-ar, 21/9);
  }

  /* background-photo: gebruikt imageMode=bg (pseudo-layer), media wordt verborgen */
  .card[data-tpl="background-photo"]{
    overflow: hidden;
  }

  /* split-left / split-right: media links/rechts + tekst ernaast */
  .card[data-tpl="split-left"],
  .card[data-tpl="split-right"]{
    display: grid;
    grid-template-columns: 44% 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "head head"
      "media main"
      "meta meta";
    align-items: stretch;
    gap: 0;
  }
  .card[data-tpl="split-right"]{
    grid-template-areas:
      "head head"
      "main media"
      "meta meta";
  }

  .card[data-tpl="split-left"] .card-head,
  .card[data-tpl="split-right"] .card-head{ grid-area: head; }

  .card[data-tpl="split-left"] .card-media,
  .card[data-tpl="split-right"] .card-media{
    grid-area: media;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    aspect-ratio: auto;
    border: 0;
  }

  .card[data-tpl="split-left"] .card-main,
  .card[data-tpl="split-right"] .card-main{
    grid-area: main;
    padding: 10px 12px 0 12px;
  }

  .card[data-tpl="split-left"] .card-meta,
  .card[data-tpl="split-right"] .card-meta{ grid-area: meta; }

  /* poster: typografie iets steviger (layout blijft simpel) */
  .card[data-tpl="poster"] .card-title{
    font-size: var(--tpl-title-size, 22px);
  }

  /* document: "papier"-gevoel (zonder media) */
  .card[data-tpl="document"] .card-text{
    background: rgba(255,255,255,.03);
    border: 1px solid var(--ui-border-ultraweak);
    border-radius: 14px;
    padding: 12px;
  }
}

/* =============================================================================
   Kaartstijl-overlay (desktop)
   ============================================================================= */
.card-style-overlay{
  position: fixed;
  inset: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.55);
}
.card-style-overlay.hidden{ display:none; }

.card-style-dialog{
  width: min(1120px, 96vw);
  max-height: min(720px, 92vh);
  background: var(--panel);
  border: 1px solid var(--ui-border-weak);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
}

.card-style-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ui-border-ultraweak);
}
.card-style-head h2{
  margin:0;
  font-size: 16px;
  line-height: 1.2;
}
.card-style-sub{
  margin-top: 4px;
  font-size: 12px;
  color: var(--sub);
}

.card-style-body{
  padding: 14px 16px 16px 16px;
  overflow:auto;
}

.cs-layout{
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 16px;
}
.cs-preview-title{
  font-size: 12px;
  color: var(--sub);
  margin-bottom: 8px;
}
.cs-preview-host{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
}
.cs-preview-host .card{
  width: 360px;
  max-width: 100%;
}

.cs-row{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  align-items:center;
  margin-bottom: 10px;
}
.cs-label{
  font-size: 12px;
  color: var(--sub);
}
.cs-quick{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cs-scope{
  margin-top: 2px;
}
.cs-scope-opts{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--sub);
}
.cs-radio input{ transform: translateY(1px); }

.cs-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin-top: 10px;
}

.cs-field{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 10px;
}
.cs-field-wide{ grid-column: 1 / -1; }
.cs-field-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.cs-field-label{
  font-size: 12px;
  color: var(--sub);
}
.cs-auto{
  font-size: 12px;
  color: var(--sub);
  display:flex;
  align-items:center;
  gap: 6px;
}
.cs-field input[type="color"]{
  width: 100%;
  height: 34px;
  border: 0;
  background: transparent;
}
.cs-field input[type="range"]{
  width: 100%;
}
.cs-check{
  display:flex;
  gap: 10px;
  align-items:center;
  color: var(--sub);
  font-size: 12px;
}

.cs-actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  flex-wrap: wrap;
}

/* Op mobiel: stijl-overlay niet gebruiken */
@media (max-width: 899px){
  #pvStyle,
  #btnSelCardSettings{
    display:none !important;
  }
  /* card-style-overlay is allowed on mobile (opens from Instellingen → Zone 2) */
  .card-style-overlay{
    padding: 12px;
  }
}

@media (max-width: 980px){
  .cs-layout{ grid-template-columns: 1fr; }
  .cs-preview-host .card{ width: 100%; }
}


/* =============================================================================
   Presentatie templates (Zone 3) — desktop only
   ============================================================================= */

@media (min-width: 900px){
  /* Variabele typografie + content-layout (scope: presentatie view) */
  #presentationView{
    color: var(--text);
  }
  #presentationView .pv-title{
    font-size: var(--pv-title-size, 16px);
  }
  #presentationView .pv-subtitle{
    color: var(--sub);
  }
  #presentationView .pv-content{
    justify-content: var(--pv-content-justify, flex-start);
    text-align: var(--pv-content-align, left);
    align-items: var(--pv-content-align-items, flex-start);
  }
  #presentationView .pv-sheet-titles{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }
  #presentationView .pv-sheet-title{
    font-size: var(--pv-title-size, 24px);
    font-weight: 760;
    letter-spacing: .2px;
    line-height: 1.12;
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #presentationView .pv-sheet-subtitle{
    font-size: 12px;
    color: var(--sub);
    opacity: .92;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #presentationView .pv-body{
    font-size: var(--pv-body-size, 14px);
  }

  /* Hero hoogte via percentage van sheet (0..70) */
  #presentationView .pv-hero{
    aspect-ratio: auto;
    height: calc(var(--pv-hero-pct, 42) * 1%);
  }

  /* Sheet surface override */
  .pv-sheet{
    background: var(--pv-surface, var(--panel));
  }

/* PowerPoint-achtige presets per template (alleen layout/typografie; UI-waarden blijven leidend) */
.pv-sheet[data-tpl="standard"]{
  --pv-content-max: 1080px;
  --pv-pad-t: 22px;
  --pv-pad-r: 32px;
  --pv-pad-b: 30px;
  --pv-pad-l: 32px;
}

.pv-sheet[data-tpl="photo-bg"],
.pv-sheet[data-tpl="photo-glass"]{
  --pv-content-max: 980px;
  --pv-pad-t: 44px;
  --pv-pad-r: 48px;
  --pv-pad-b: 46px;
  --pv-pad-l: 48px;
  --pv-body-bg: rgba(0,0,0,.18);
  --pv-body-border: 1px solid var(--ui-border);
}

/* Extra shade over background images (leesbaarheid) */
.pv-sheet[data-tpl="photo-bg"] .pv-slide::before,
.pv-sheet[data-tpl="photo-glass"] .pv-slide::before,
.pv-sheet[data-tpl="poster"] .pv-slide::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.54));
  opacity: var(--tpl-shade, .85);
  pointer-events:none;
  z-index: 0;
}
.pv-sheet[data-tpl="photo-bg"] .pv-slide > *,
.pv-sheet[data-tpl="photo-glass"] .pv-slide > *,
.pv-sheet[data-tpl="poster"] .pv-slide > *{
  position: relative;
  z-index: 1;
}

.pv-sheet[data-tpl="photo-bg"] .pv-sheet-title,
.pv-sheet[data-tpl="photo-bg"] .pv-sheet-subtitle,
.pv-sheet[data-tpl="photo-glass"] .pv-sheet-title,
.pv-sheet[data-tpl="photo-glass"] .pv-sheet-subtitle,
.pv-sheet[data-tpl="poster"] .pv-sheet-title,
.pv-sheet[data-tpl="poster"] .pv-sheet-subtitle{
  text-shadow: 0 14px 46px rgba(0,0,0,.55);
}

.pv-sheet[data-tpl="photo-glass"][data-glass="1"] .pv-sheet-titles{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--ui-border);
  background: var(--tpl-glass-bg, rgba(15, 23, 42, .45));
  backdrop-filter: blur(var(--tpl-glass-blur, 12px));
}

/* illu-corner: slide-achtig, zonder hero; reserveer ruimte richting illu */
.pv-sheet[data-tpl="illu-corner"]{
  --pv-content-max: 980px;
  --pv-pad-t: 44px;
  --pv-pad-r: 48px;
  --pv-pad-b: 44px;
  --pv-pad-l: 48px;
  --pv-body-bg: rgba(0,0,0,.10);
}
.pv-sheet[data-tpl="illu-corner"] .pv-hero{ display:none; }

.pv-sheet[data-tpl="illu-corner"][data-illu-pos="br"],
.pv-sheet[data-tpl="illu-corner"][data-illu-pos="tr"],
.pv-sheet[data-tpl="illu-corner"][data-illu-pos="cr"]{
  --pv-pad-r: calc(48px + clamp(150px, 24vw, 340px));
}
.pv-sheet[data-tpl="illu-corner"][data-illu-pos="bl"],
.pv-sheet[data-tpl="illu-corner"][data-illu-pos="tl"],
.pv-sheet[data-tpl="illu-corner"][data-illu-pos="cl"]{
  --pv-pad-l: calc(48px + clamp(150px, 24vw, 340px));
}
.pv-sheet[data-tpl="illu-corner"][data-illu-pos="tr"],
.pv-sheet[data-tpl="illu-corner"][data-illu-pos="tl"]{
  --pv-pad-t: calc(44px + clamp(40px, 6vw, 120px));
}
.pv-sheet[data-tpl="illu-corner"][data-illu-pos="br"],
.pv-sheet[data-tpl="illu-corner"][data-illu-pos="bl"]{
  --pv-pad-b: calc(44px + clamp(30px, 5vw, 110px));
}

/* poster: clean en typografisch, geen meta-chips */
.pv-sheet[data-tpl="poster"]{
  --pv-content-max: 1100px;
  --pv-pad-t: 64px;
  --pv-pad-r: 64px;
  --pv-pad-b: 70px;
  --pv-pad-l: 64px;
  --pv-body-bg: transparent;
  --pv-body-border: 1px solid transparent;
  --pv-body-pad: 0;
}
.pv-sheet[data-tpl="poster"] .pv-meta{ display:none; }
.pv-sheet[data-tpl="poster"] .pv-body{
  background: transparent;
  border-color: transparent;
  padding: 0;
  text-shadow: 0 14px 46px rgba(0,0,0,.55);
  line-height: 1.45;
}


  /* Achtergrond + illustratie layers op de sheet */
  .pv-sheet[data-bgimg="1"],
  .pv-sheet[data-illuimg="1"],
  .pv-sheet[data-tpl]{
    position: relative;
  }

  .pv-sheet[data-bgimg="1"]::before{
    content:"";
    position:absolute;
    inset:0;
    background-image: var(--tpl-bg-img);
    background-size: var(--tpl-bg-size, cover);
    background-position: var(--tpl-bg-pos, center);
    opacity: var(--tpl-bg-opacity, .35);
    filter: blur(var(--tpl-bg-blur, 0px));
    transform: scale(1.06);
    z-index: 0;
    pointer-events: none;
  }

  .pv-sheet[data-illuimg="1"]::after{
    content:"";
    position:absolute;
    width: var(--tpl-illu-size, 28%);
    height: var(--tpl-illu-size, 28%);
    background-image: var(--tpl-illu-img);
    background-repeat:no-repeat;
    background-size:contain;
    opacity:.95;
    filter: drop-shadow(0 14px 32px rgba(0,0,0,.35));
    z-index:0;
    pointer-events:none;

    right: 14px;
    bottom: 14px;
  }

  /* illu positions */
  .pv-sheet[data-illu-pos="tr"]::after{ right:14px; top:14px; bottom:auto; left:auto; }
  .pv-sheet[data-illu-pos="br"]::after{ right:14px; bottom:14px; top:auto; left:auto; }
  .pv-sheet[data-illu-pos="bl"]::after{ left:14px; bottom:14px; top:auto; right:auto; }
  .pv-sheet[data-illu-pos="tl"]::after{ left:14px; top:14px; bottom:auto; right:auto; }
  .pv-sheet[data-illu-pos="cr"]::after{ right:14px; top:50%; bottom:auto; left:auto; transform: translateY(-50%); }
  .pv-sheet[data-illu-pos="cl"]::after{ left:14px; top:50%; bottom:auto; right:auto; transform: translateY(-50%); }

  /* Content boven layers */
  .pv-sheet[data-bgimg="1"] > *,
  .pv-sheet[data-illuimg="1"] > *{
    position: relative;
    z-index: 1;
  }

  /* Glas-overlay (leesbaarheid) — op body (tekstvlak) */
  .pv-sheet[data-glass="1"] .pv-body{
    background: var(--tpl-glass-bg, rgba(15, 23, 42, .45));
    border: 1px solid var(--ui-border);
    backdrop-filter: blur(var(--tpl-glass-blur, 12px));
  }

  /* Templates: hero (foto) verbergen wanneer de sheet zelf het beeld draagt */
  .pv-sheet[data-tpl="photo-bg"] .pv-hero,
  .pv-sheet[data-tpl="photo-glass"] .pv-hero,
  .pv-sheet[data-tpl="poster"] .pv-hero{
    display:none;
  }

  .pv-sheet[data-tpl="poster"] .pv-body{
    text-align: center;
  }
}

/* =============================================================================
   Presentatie stijl panel in Zone 1 (compact)
   ============================================================================= */
.pv-style-panel .pv-style-controls.hidden{ display:none; }

.pv-style-row{ margin-top: 8px; }
.pv-style-quick{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.pv-style-scope-opts{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.pv-style-radio{
  display:flex;
  gap: 6px;
  align-items:center;
  font-size: 12px;
  color: var(--sub);
}

.pv-style-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.pv-style-field{
  border: 1px solid var(--ui-border-ultraweak);
  background: rgba(0,0,0,.10);
  border-radius: 12px;
  padding: 10px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.pv-style-field-wide{ grid-column: 1 / -1; }

.pv-style-field-head{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.pv-style-field-label{
  font-size: 12px;
  color: var(--sub);
}
.pv-style-auto{
  font-size: 12px;
  color: var(--sub);
  display:flex;
  gap: 6px;
  align-items:center;
}

.pv-style-check{
  display:flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--text);
}

.pv-style-panel.pulse{ outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 14px; }

.pv-style-actions{
  margin-top: 10px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}



/* =============================================================================
   Presentatie relaties panel in Zone 1 (compact)
   ============================================================================= */
.pv-rel-panel .pv-rel-controls.hidden{ display:none; }

.pv-rel-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.pv-rel-field{
  border: 1px solid var(--ui-border-ultraweak);
  background: rgba(0,0,0,.10);
  border-radius: 12px;
  padding: 10px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.pv-rel-field-wide{ grid-column: 1 / -1; }

/* =============================================================================
   Zone 2 kaartstijl panel in Zone 1 (Instellingen)
   ============================================================================= */
.z2-style-panel{
  margin-top: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--ui-border-weak);
  background: rgba(255,255,255,.03);
}

.z2-style-controls{ margin-top: 8px; }
.z2-style-controls.hidden{ display:none; }

/* Kleine spacing-consistentie (sluit aan op pv-style-panel) */
.z2-style-actions{ margin-top: 10px; }
.z2-style-hint,
#z2StyleHint{ margin-top: 6px; }

/* Disabled state (panel) */
.z2-style-panel.is-disabled,
.z2-style-panel[aria-disabled="true"],
.z2-style-panel[data-disabled="1"]{
  opacity: .55;
}

/* Disabled state (controls) */
.z2-style-panel .ghostbtn:disabled,
.z2-style-panel .ghostbtn[disabled],
.z2-style-panel button:disabled{
  opacity: .42;
  cursor: not-allowed;
  background: rgba(255,255,255,.02);
  border-color: var(--ui-border-ultraweak);
  color: rgba(229,231,235,.65);
  box-shadow: none;
}

/* Als alleen het panel 'disabled' is gemarkeerd (zonder disabled-attr op de knoppen) */
.z2-style-panel.is-disabled .ghostbtn,
.z2-style-panel[aria-disabled="true"] .ghostbtn,
.z2-style-panel[data-disabled="1"] .ghostbtn{
  cursor: not-allowed;
}

 /* =====================================================
    Nesdeck — Unified stylesheet (dark-first)
    ===================================================== */

/* =========================
   Zone 1 → Stijl (Theme cards)
   ========================= */
.theme-select-hidden{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.theme-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  margin-top:8px;
}

.theme-card{ width:100%; }

.theme-card{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px;
  border-radius:14px;
  border:1px solid var(--ui-border-weak);
  background:rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
  text-align:left;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}

.theme-card:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.20);
}

.theme-card.is-active{
  border-color:rgba(96,165,250,.55);
  box-shadow:0 0 0 1px rgba(96,165,250,.35) inset;
  background:rgba(96,165,250,.08);
}

.theme-card-preview{
  flex:0 0 64px;
  width:64px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--ui-border-weak);
  overflow:hidden;
  position:relative;
}

.tprev-top{
  height:14px;
  opacity:.95;
}
.tprev-body{
  height:calc(100% - 14px);
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.tprev-line{
  height:6px;
  border-radius:999px;
  opacity:.9;
}
.tprev-line.short{ width:70%; opacity:.75; }
.tprev-pill{
  margin-top:auto;
  height:7px;
  width:44%;
  border-radius:999px;
}

.theme-card-meta{ min-width:0; }
.theme-card-title{ font-size:12px; font-weight:700; }
.theme-card-sub{
  font-size:11px;
  color:var(--sub);
  opacity:.9;
  margin-top:2px;
}

/* Preview palettes per theme (mini “kaart” feel) */
.theme-card-preview[data-theme-preview="dark"]{
  background:#0b1224;
}
.theme-card-preview[data-theme-preview="dark"] .tprev-top{
  background:linear-gradient(90deg, rgba(96,165,250,.35), rgba(167,139,250,.22));
}
.theme-card-preview[data-theme-preview="dark"] .tprev-line{
  background:rgba(229,231,235,.18);
}
.theme-card-preview[data-theme-preview="dark"] .tprev-pill{
  background:rgba(96,165,250,.65);
}

.theme-card-preview[data-theme-preview="light"]{
  background:#f7f7fb;
  border-color:rgba(2,6,23,.12);
}
.theme-card-preview[data-theme-preview="light"] .tprev-top{
  background:linear-gradient(90deg, rgba(37,99,235,.30), rgba(124,58,237,.18));
}
.theme-card-preview[data-theme-preview="light"] .tprev-line{
  background:rgba(2,6,23,.14);
}
.theme-card-preview[data-theme-preview="light"] .tprev-pill{
  background:rgba(37,99,235,.62);
}

.theme-card-preview[data-theme-preview="warm"]{
  background:#12100e;
}
.theme-card-preview[data-theme-preview="warm"] .tprev-top{
  background:linear-gradient(90deg, rgba(245,158,11,.32), rgba(217,70,239,.18));
}
.theme-card-preview[data-theme-preview="warm"] .tprev-line{
  background:rgba(240,237,233,.18);
}
.theme-card-preview[data-theme-preview="warm"] .tprev-pill{
  background:rgba(245,158,11,.70);
}


.theme-card-preview[data-theme-preview="holo"]{
  background:
    radial-gradient(26px 18px at 18% 36%, rgba(255,177,74,.30), rgba(255,177,74,0) 70%),
    radial-gradient(22px 18px at 62% 44%, rgba(255,177,74,.18), rgba(255,177,74,0) 72%),
    radial-gradient(18px 18px at 78% 70%, rgba(56,189,248,.12), rgba(56,189,248,0) 74%),
    linear-gradient(180deg, #0a0b10, #070812);
  border-color:rgba(255,255,255,.12);
}
.theme-card-preview[data-theme-preview="holo"] .tprev-top{
  background:linear-gradient(90deg, rgba(255,177,74,.42), rgba(56,189,248,.16));
}
.theme-card-preview[data-theme-preview="holo"] .tprev-line{
  background:rgba(242,243,247,.18);
}
.theme-card-preview[data-theme-preview="holo"] .tprev-pill{
  background:rgba(255,177,74,.78);
}

/* “data lines + nodes” overlay (preview only) */
.theme-card-preview[data-theme-preview="holo"]::before,
.theme-card-preview[data-theme-preview="holo"]::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.theme-card-preview[data-theme-preview="holo"]::before{
  opacity:.65;
  background:
    /* subtle network lines */
    linear-gradient(18deg, rgba(255,177,74,.18), rgba(255,177,74,0) 55%),
    linear-gradient(160deg, rgba(56,189,248,.12), rgba(56,189,248,0) 58%),
    linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0) 45%),
    linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,0) 55%);
  mix-blend-mode:screen;
  transform:translate3d(0,0,0);
  animation: tprevHoloDrift 7.5s ease-in-out infinite alternate;
}
.theme-card-preview[data-theme-preview="holo"]::after{
  opacity:.75;
  background:
    /* glowing nodes */
    radial-gradient(4px 4px at 22% 44%, rgba(255,177,74,.85), rgba(255,177,74,0) 70%),
    radial-gradient(3px 3px at 36% 62%, rgba(255,177,74,.55), rgba(255,177,74,0) 72%),
    radial-gradient(3px 3px at 58% 48%, rgba(56,189,248,.55), rgba(56,189,248,0) 74%),
    radial-gradient(4px 4px at 72% 64%, rgba(255,177,74,.60), rgba(255,177,74,0) 70%),
    radial-gradient(3px 3px at 84% 40%, rgba(217,70,239,.42), rgba(217,70,239,0) 76%);
  filter: blur(.15px);
  animation: tprevHoloNodes 4.5s ease-in-out infinite alternate;
}
@keyframes tprevHoloDrift{
  0%{ transform: translate3d(-1.2%, -0.8%, 0) scale(1.02); }
  100%{ transform: translate3d( 1.2%,  0.8%, 0) scale(1.03); }
}
@keyframes tprevHoloNodes{
  0%{ transform: translate3d(-0.8%, 0.4%, 0); opacity:.55; }
  100%{ transform: translate3d( 0.8%,-0.4%, 0); opacity:.80; }
}
@media (prefers-reduced-motion: reduce){
  .theme-card-preview[data-theme-preview="holo"]::before,
  .theme-card-preview[data-theme-preview="holo"]::after{
    animation:none !important;
  }
}


/* “System” krijgt een split-preview (donker/licht) */
.theme-card-preview[data-theme-preview="system"]{
  background:
    linear-gradient(90deg, #0b1224 0 50%, #f7f7fb 50% 100%);
  border-color:var(--ui-border-weak);
}
.theme-card-preview[data-theme-preview="system"] .tprev-top{
  background:
    linear-gradient(90deg, rgba(96,165,250,.35) 0 50%, rgba(37,99,235,.30) 50% 100%);
}
.theme-card-preview[data-theme-preview="system"] .tprev-line{
  background:
    linear-gradient(90deg, rgba(229,231,235,.18) 0 50%, rgba(2,6,23,.14) 50% 100%);
}
.theme-card-preview[data-theme-preview="system"] .tprev-pill{
  background:
    linear-gradient(90deg, rgba(96,165,250,.65) 0 50%, rgba(37,99,235,.62) 50% 100%);

  }


/* --- Light theme readability adjustments (targeted) --- */
:root[data-theme="light"] .f-input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea{
  box-shadow: 0 1px 0 rgba(2,6,23,.04);
}

:root[data-theme="light"] .card-options-menu,
:root[data-theme="light"] .card-media-tools,
:root[data-theme="light"] .meta-actions{
  box-shadow: var(--ui-shadow);
}

:root[data-theme="light"] .media-btn,
:root[data-theme="light"] .rel-link-btn{
  border-color: var(--ui-border);
}

:root[data-theme="light"] .media-pill{
  border-color: rgba(2,6,23,.18);
}



/* =====================================================
   Holo theme — subtle motion + cinematic background
   ===================================================== */
:root[data-theme="holo"] body{
  position:relative;
  overflow-x:hidden;
}

/* Animated bokeh / data-glow backdrop */
:root[data-theme="holo"] body::before,
:root[data-theme="holo"] body::after{
  content:"";
  position:fixed;
  inset:-20vh -20vw;
  pointer-events:none;
  z-index:-1;
  transform:translate3d(0,0,0);
}

:root[data-theme="holo"] body::before{
  background:
    radial-gradient(900px 520px at 22% 38%, rgba(255,177,74,.22), rgba(255,177,74,0) 60%),
    radial-gradient(700px 420px at 62% 46%, rgba(255,177,74,.14), rgba(255,177,74,0) 62%),
    radial-gradient(520px 420px at 78% 62%, rgba(56,189,248,.10), rgba(56,189,248,0) 64%),
    radial-gradient(420px 420px at 36% 74%, rgba(217,70,239,.08), rgba(217,70,239,0) 66%),
    linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35));
  filter: blur(0px) saturate(1.05);
  opacity:.95;
  animation: ndHoloDrift 18s ease-in-out infinite alternate;
}

:root[data-theme="holo"] body::after{
  background:
    radial-gradient(10px 10px at 12% 28%, rgba(255,177,74,.45), rgba(255,177,74,0) 70%),
    radial-gradient(9px 9px at 18% 62%, rgba(255,177,74,.28), rgba(255,177,74,0) 72%),
    radial-gradient(8px 8px at 34% 44%, rgba(56,189,248,.22), rgba(56,189,248,0) 72%),
    radial-gradient(10px 10px at 58% 36%, rgba(255,177,74,.32), rgba(255,177,74,0) 70%),
    radial-gradient(8px 8px at 72% 58%, rgba(217,70,239,.18), rgba(217,70,239,0) 74%),
    radial-gradient(9px 9px at 84% 42%, rgba(255,177,74,.26), rgba(255,177,74,0) 72%);
  opacity:.55;
  filter: blur(0.2px);
  animation: ndHoloParticles 9s ease-in-out infinite alternate;
}

/* Softer interactive motion (cards/buttons/panels) */
:root[data-theme="holo"] .card,
:root[data-theme="holo"] .tile,
:root[data-theme="holo"] .panel,
:root[data-theme="holo"] .iconbtn,
:root[data-theme="holo"] button{
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease,
    filter .22s ease;
}

:root[data-theme="holo"] .card:hover,
:root[data-theme="holo"] .tile:hover,
:root[data-theme="holo"] .panel:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 42px rgba(0,0,0,.42);
}

:root[data-theme="holo"] .iconbtn:hover,
:root[data-theme="holo"] button:hover{
  transform: translateY(-1px);
}

:root[data-theme="holo"] .iconbtn:active,
:root[data-theme="holo"] button:active{
  transform: translateY(0px) scale(.99);
}

/* A gentle “living UI” glow on plates */
:root[data-theme="holo"] .panel,
:root[data-theme="holo"] .card{
  box-shadow:
    0 0 0 1px var(--ui-border-ultraweak) inset,
    0 12px 34px rgba(0,0,0,.40);
}

:root[data-theme="holo"] .panel::after,
:root[data-theme="holo"] .card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: radial-gradient(560px 220px at 20% 0%, rgba(255,177,74,.10), rgba(255,177,74,0) 65%);
  opacity:.65;
  mix-blend-mode: screen;
}

/* Keyframes */
@keyframes ndHoloDrift{
  0%   { transform: translate3d(-1.5%, -1.0%, 0) scale(1.02); }
  100% { transform: translate3d( 1.5%,  1.0%, 0) scale(1.03); }
}
@keyframes ndHoloParticles{
  0%   { transform: translate3d(-0.8%, 0.4%, 0); opacity:.45; }
  100% { transform: translate3d( 0.8%,-0.4%, 0); opacity:.62; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  :root[data-theme="holo"] body::before,
  :root[data-theme="holo"] body::after{
    animation:none !important;
  }
  :root[data-theme="holo"] .card,
  :root[data-theme="holo"] .tile,
  :root[data-theme="holo"] .panel,
  :root[data-theme="holo"] .iconbtn,
  :root[data-theme="holo"] button{
    transition:none !important;
  }
}

  /* =====================================================
     Nesdeck — Unified stylesheet (dark-first)
     ===================================================== */
 
 /* Rail: active state (ook gebruikt door “Groepeer”) */
 #zoneRail .rail-btn.active{
   background: rgba(96,165,250,.18);
   border-color: rgba(96,165,250,.50);
 }
 
 /* =====================================================
   Grouped / nested decks (stacked child objects)
   ===================================================== */

#zoneRail .rail-btn.active{
  background: rgba(96,165,250,.18);
  border-color: rgba(96,165,250,.50);
}

/* caret in title (parent met childs) */
.card .tree-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  border-radius: 10px;
  border: 1px solid var(--ui-border-weak);
  background: rgba(255,255,255,.06);
  color: inherit;
  cursor: pointer;
}
.card .tree-toggle:hover{
  background: rgba(255,255,255,.10);
}

/* stack container onder parent */
.card .card-stack{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.card .stack-row{
  display:flex;
  align-items:center;
  gap: 8px;
  width: 100%;
  text-align:left;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--ui-border-ultraweak);
  background: rgba(255,255,255,.04);
  color: inherit;
  cursor: pointer;
}

/* relation highlight in stack rows */
.card .stack-row.related{
  outline: 2px solid rgba(96,165,250,.45);
}
.card .stack-row.rel-parent{ outline-color: rgba(34,197,94,.45); }
.card .stack-row.rel-child{ outline-color: rgba(250,204,21,.50); }
.card .stack-row.rel-sibling{ outline-color: rgba(168,85,247,.50); }
.card .stack-row.rel-self{ outline-color: rgba(96,165,250,.70); }

.card .stack-row:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
}

.card .stack-toggle{
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid var(--ui-border-weak);
  background: rgba(255,255,255,.06);
  color: inherit;
  cursor: pointer;
}

.card .stack-sym{
  opacity: .75;
  font-size: 14px;
  width: 18px;
  display:inline-flex;
  justify-content:center;
}

.card .stack-title{
  flex: 1;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card .stack-sib{
  opacity: .7;
  font-weight: 800;
}

/* substack: geen indent (alleen symbolen) */
.card .stack-sub{
  display:flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 0;
  margin-left: 0;
}
}

/* --- Filterview scope: minder label-ruis (je werkt bewust met kleinere dataset) --- */
body[data-scope="1"]:not([data-mode="edit"]) .card-labels{
  display:none;
}


/* --- Platform / routing test layer --- */
.platform-panel{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--ui-border-weak);
}
.platform-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.platform-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.platform-field span{ font-size:11px; color:var(--sub); }
.platform-field-wide{ grid-column:1 / -1; }
.platform-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.platform-routebox{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid var(--ui-border-weak);
  border-radius:12px;
  background:var(--ui-plate);
}
.platform-route-row{ display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.platform-route-row:first-child{ margin-top:0; }
.platform-routebox code{
  display:block;
  padding:7px 9px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:11px;
  overflow:auto;
  white-space:nowrap;
}
body.readonly-mode #zoneRail [data-action="group"],
body.readonly-mode #btnRailAddCard,
body.readonly-mode #btnImport,
body.readonly-mode #btnImportMerge,
body.readonly-mode #btnClearCards{
  opacity:.45;
}
body.readonly-mode .platform-routebox{
  border-color:color-mix(in srgb, var(--accent,#7dd3fc) 40%, transparent);
}
@media (max-width: 680px){
  .platform-grid{ grid-template-columns:1fr; }
}