/* e3b.css -- tabs en documenten: nieuw, open, opslaan, opslaan als, sluiten.
 *
 * NEEMT #tabs OVER VAN e1a.css (.tab/.x daar mag weg zodra dit gemerged is -- zie
 * eindverslag). Vorm is VS Code: 35px (--tab-h, al zo gekozen door het fundament),
 * een stip in plaats van het kruisje op een dirty tab die niet actief/gehoverd is (de
 * stip wint altijd), sluitknop-breedte altijd gereserveerd zodat hover de tabbreedte niet
 * laat springen, naam afgekapt met ellipsis (nooit hard geclipt). */

.e3btab {
  display: flex; align-items: center; gap: 6px;
  padding: 0 6px 0 12px; height: 100%;
  min-width: 90px; max-width: 200px;
  font: var(--ui-fs) var(--font-ui); color: var(--text-dim);
  background: var(--surface2);
  border-right: 1px solid var(--rule);
  border-top: 2px solid transparent;
  cursor: pointer; white-space: nowrap; user-select: none;
  flex: 0 0 auto;
  position: relative;
}
.e3btab:hover { color: var(--text); background: var(--surface); }
.e3btab.on {
  background: var(--bg); color: var(--text-strong);
  border-top-color: var(--accent-hi);
}
.e3btab.dragging { opacity: 0.4; }
.e3btab.drop-before::before,
.e3btab.drop-after::after {
  content: ""; position: absolute; top: 4px; bottom: 4px; width: 2px;
  background: var(--accent-hi);
}
.e3btab.drop-before::before { left: 0; }
.e3btab.drop-after::after { right: 0; }

.e3btab-cap {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex: 1 1 auto;
}

/* ALTIJD 18px BREED, gevuld of leeg -- de sluitknop-ruimte wisselt nooit van maat,
 * anders verspringt de hele strip zodra de muis over een tab beweegt. */
.e3btab-close {
  width: 18px; height: 18px; flex: 0 0 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px; color: var(--text-muted);
}
.e3btab-close:hover { background: var(--rule); color: var(--text-strong); }
.e3btab-close svg { display: block; }

/* DE STIP, zoals VS Code: een dirty tab toont ALTIJD de stip -- ook de actieve, want
 * juist daar zie je dat er iets onopgeslagen is -- en de stip wordt het kruisje zodra je
 * op de sluitknop wijst. (Eerder verdween de stip op de actieve tab en stond er dan niets:
 * geen teken van onopgeslagen werk en geen knop om te sluiten.) */
.e3btab-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-dim);
}
.e3btab.on .e3btab-dot { background: var(--text-strong); }
.e3btab-close.dirty svg { display: none; }
.e3btab-close.dirty:hover svg { display: block; }
.e3btab-close.dirty:hover .e3btab-dot { display: none; }

/* de naambalk/bevestigingsstrook is nu altijd e5b's Studio.dialog (.dlgscrim/.dlgcard
   in e5b.css) -- e3b had hier ooit een eigen fallback (S-0000-0241), die is weg. */

/* ---- custom tabs zonder pad (S-0000-0237) -------------------------------------------- */
/* Een view-tab ziet er hetzelfde uit als een documenttab (.e3btab), maar heeft geen dirty-
 * stip en zijn eigen data-attribuut i.p.v. data-path. */
.e3bviewtab { }

/* #editor DRAAGT OF DE TEKST-EDITOR OF DE ACTIEVE VIEW, NOOIT BEIDE. e1a vult #editor met
 * #gutter/#viewport (de tekst) en #empty (de "open een bestand"-melding); zodra een view
 * actief is verbergt #editor.viewactive die drie, en toont alleen het gemounte
 * .e3bview-element van de actieve view (zie e3b.js: alleen v.el.hidden=false voor de
 * actieve, de rest hidden). e1a.js kent deze class niet en hoeft hem niet te kennen --
 * puur CSS, geen aanraking van e1a's eigen bestand. */
#editor.viewactive #gutter,
#editor.viewactive #viewport,
#editor.viewactive .empty,
#editor.viewactive #ime {
  display: none;
}
.e3bview {
  position: absolute; inset: 0;
  overflow: auto;
}