/* e3a.css -- verkenner. Rijhoogte 22px is VS Code's (--row-h, zie core.css). */

#tree { list-style: none; margin: 0; padding: 0 0 8px; outline: none; }
#tree:focus-visible { outline: 1px solid var(--focus); outline-offset: -1px; }

.row {
  display: flex; align-items: center; gap: 4px;
  height: var(--row-h); padding: 0 8px;
  cursor: pointer; white-space: nowrap; color: var(--text);
  contain: layout paint;
  position: relative;
}
.row:hover { background: var(--hover); }
.row.sel { background: var(--accent); color: var(--accent-tx); }
/* de rij die WEL geselecteerd is maar de boom niet de focus heeft (VS Code: gedimd blauw) */
#tree:not(:focus) .row.sel { background: var(--surface2); color: var(--text); }
.row .ico { width: 16px; height: 16px; flex: 0 0 16px; color: var(--text-dim); }
.row.sel .ico { color: var(--accent-tx); }
.row .ic.dir { color: var(--attn); }
.row .nm { overflow: hidden; text-overflow: ellipsis; }
.row .tw { width: 10px; flex: 0 0 10px; color: var(--text-dim); font-size: calc(var(--ui-fs) * 9 / 13); text-align: center; }

/* de agent-permissions-marker: alleen een hint (BESLUITEN-FASE-B), dus een klein
   slotje, geen kleurverandering van de rij zelf -- die blijft lezen als "gewoon". */
.row .lock { flex: 0 0 12px; width: 12px; height: 12px; color: var(--text-dim); opacity: .8; }
.row.sel .lock { color: var(--accent-tx); }

/* het hernoemen/nieuw-bestand-invoerveld VERVANGT de naam-span, net als VS Code:
   geen prompt() -- "leun op de browser" en "kijk naar VS Code". */
.row input.rn {
  flex: 1 1 auto; min-width: 0;
  background: var(--bg); color: var(--text-strong);
  border: 1px solid var(--focus); outline: none;
  font: inherit; padding: 0 2px; margin: -1px 0;
}

/* ---- het contextmenu ------------------------------------------------------------- */
/* EIGEN COMPONENT: dit is de enige plek in E3 die het nodig heeft. Spiegelt
   menum.ctx (src/menumodel.wz) qua items en volgorde. */
.ctxmenu {
  position: fixed; z-index: 500;
  min-width: 180px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--rule);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  padding: 4px 0;
  font: var(--ui-fs) var(--font-ui);
}
.ctxmenu .item {
  padding: 4px 12px; cursor: pointer; white-space: nowrap;
  display: flex; justify-content: space-between; gap: 16px;
}
.ctxmenu .item:hover:not(.off) { background: var(--accent); color: var(--accent-tx); }
.ctxmenu .item.off { color: var(--text-muted); cursor: default; }
.ctxmenu .sep { height: 1px; background: var(--rule); margin: 4px 0; }

/* ---- eenvoudige dialoog, ZOLANG Studio.dialog (e5b) nog niet bestaat -------------- */
/* Zelfde signatuur (confirm(tekst, knoppen) / prompt(tekst, standaard), beide een
   Promise) zodat het inwisselen voor e5b's versie geen aanroeper hoeft te raken. */
.e3a-dlg-back {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
}
.e3a-dlg {
  background: var(--surface2); color: var(--text-strong);
  border: 1px solid var(--rule); border-radius: 3px;
  min-width: 320px; max-width: 480px;
  padding: 16px; font: var(--ui-fs) var(--font-ui);
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
.e3a-dlg p { margin: 0 0 12px; white-space: pre-wrap; }
.e3a-dlg input {
  width: 100%; box-sizing: border-box;
  background: var(--bg); color: var(--text-strong);
  border: 1px solid var(--rule); padding: 4px 6px; margin-bottom: 12px;
  font: inherit;
}
.e3a-dlg .btns { display: flex; justify-content: flex-end; gap: 8px; }
.e3a-dlg button {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--rule); padding: 4px 12px; cursor: pointer;
  font: inherit;
}
.e3a-dlg button.primary { background: var(--accent); color: var(--accent-tx); border-color: var(--accent); }
.e3a-dlg button:hover { filter: brightness(1.15); }

/* light theme only (S-0000-0382 groep B): de twee zwevende oppervlakken hier -- het
 * contextmenu en de eenvoudige e3a-dialoog -- worden zachte kaarten, zoals #menubar
 * .dropdown in core.css. Dark blijft ongewijzigd (zelfde guard als daar). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ctxmenu {
    background: var(--surface-card); border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
  }
  :root:not([data-theme="dark"]) .e3a-dlg {
    background: var(--surface-card); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
  }
}
:root[data-theme="light"] .ctxmenu {
  background: var(--surface-card); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
:root[data-theme="light"] .e3a-dlg {
  background: var(--surface-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
#tree.drop { outline: 2px dashed var(--accent); outline-offset: -3px; }