/* e2a.css -- zoeken, vervangen, ga-naar-regel. Tokens uit core.css; VS Code is de
 * visuele lat (localfiles/webclient/BRIEFING.md): de zoekbalk rechtsboven in de editor,
 * zwevend, met dezelfde schaduw en radius als een VS Code-widget. */

.e2a-findbar {
  position: absolute; top: 8px; right: 20px; z-index: 5;
  background: var(--surface2); border: 1px solid var(--rule); border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  font: var(--ui-fs) var(--font-ui); color: var(--text);
  max-width: min(420px, calc(100% - 40px));
}
.e2a-findbar[hidden] { display: none; }
.e2a-row { display: flex; align-items: center; gap: 2px; padding: 4px 6px; }
.e2a-field {
  position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 120px;
  background: var(--bg); border: 1px solid var(--rule); border-radius: 3px;
}
.e2a-field:focus-within { border-color: var(--focus); }
.e2a-input, .e2a-rinput {
  flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: 0;
  color: var(--text); font: inherit; padding: 4px 6px;
}
.e2a-count { padding: 0 6px; color: var(--text-dim); font-size: calc(var(--ui-fs) * 11 / 13); white-space: nowrap; }
.e2a-toggle {
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border-radius: 3px; color: var(--text-dim); font-size: calc(var(--ui-fs) * 11 / 13); cursor: pointer; user-select: none;
}
.e2a-toggle:hover { background: var(--hover); color: var(--text); }
.e2a-toggle.on { background: var(--accent); color: var(--accent-tx); }
.e2a-toggle.open svg { transform: rotate(180deg); }
.e2a-btn {
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 3px; color: var(--text-dim);
  font: inherit; cursor: pointer;
}
.e2a-btn:hover { background: var(--hover); color: var(--text); }
.e2a-replacerow .e2a-btn { width: auto; padding: 0 8px; }
.e2a-spacer { width: 22px; flex: 0 0 auto; }

/* de treffermarkering: EIGEN laag in #code, geen wijziging aan de rijen van e1a
 * (die worden bij elke aanslag opnieuw getekend -- zie e1a.css's contain: strict). */
.e2a-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.e2a-hit {
  position: absolute; height: var(--line-h);
  background: color-mix(in srgb, var(--attn) 35%, transparent);
  border-radius: 2px;
}
.e2a-hit-cur { background: var(--selection); outline: 1px solid var(--focus); }

/* ga naar regel: een lichte balk, zelfde plek als de zoekbalk maar smaller -- VS Code
 * toont hem ook zwevend boven de editor, niet als apart paneel. */
.e2a-gotobar {
  position: absolute; top: 8px; right: 20px; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface2); border: 1px solid var(--rule); border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  padding: 4px 8px; font: var(--ui-fs) var(--font-ui);
}
.e2a-gotobar[hidden] { display: none; }
.e2a-goinput {
  width: 160px; background: var(--bg); border: 1px solid var(--rule); border-radius: 3px;
  color: var(--text); font: inherit; padding: 4px 6px; outline: 0;
}
.e2a-goinput:focus { border-color: var(--focus); }
.e2a-gohint { color: var(--text-dim); font-size: calc(var(--ui-fs) * 11 / 13); white-space: nowrap; }

/* het paneel "zoeken in bestanden" (sidebar view "search"). S-0000-0368: de rij liep uit
 * het paneel -- "Aa", "ab" en "Search" kregen de generieke .e2a-toggle/.e2a-btn-maten
 * (22px, voor de ICOONKNOPPEN in de zwevende zoekbalk hierboven), en die 22px is te smal
 * voor het WOORD "Search" (gemeten scrollWidth 33px tegen clientWidth 22px, met
 * overflow:visible liep de tekst dus 11px over de knop-rand heen). VS Code laat bij het
 * versmallen alleen het invoerveld krimpen; de toggles en de knop houden hun eigen,
 * toereikende breedte. Dus: het veld krijgt min-width:0 (kan krimpen tot niets), de rest
 * van de rij flex-shrink:0 (nooit kleiner dan zijn inhoud) en de Search-knop width:auto
 * met padding in plaats van de vaste 22px. */
.e2a-searchbar { display: flex; align-items: center; gap: 4px; padding: 8px; border-bottom: 1px solid var(--rule); }
.e2a-fq {
  flex: 1 1 auto; min-width: 0; background: var(--bg); border: 1px solid var(--rule); border-radius: 3px;
  color: var(--text); font: var(--ui-fs) var(--font-ui); padding: 5px 8px; outline: 0;
}
.e2a-fq:focus { border-color: var(--focus); }
.e2a-searchbar [data-fog] { flex: 0 0 auto; }
.e2a-searchbar [data-act="go"] { flex: 0 0 auto; width: auto; padding: 0 10px; white-space: nowrap; }
.e2a-results { overflow: auto; font: var(--ui-fs) var(--font-ui); }
.e2a-status { padding: 10px 12px; color: var(--text-dim); }
.e2a-file {
  padding: 6px 10px 2px; color: var(--text-strong); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.e2a-n { color: var(--text-dim); font-weight: 400; }
.e2a-hitrow {
  display: flex; gap: 8px; padding: 2px 10px 2px 20px; cursor: pointer;
  white-space: nowrap; overflow: hidden;
}
.e2a-hitrow:hover { background: var(--hover); }
.e2a-ln { color: var(--text-dim); min-width: 2.5em; text-align: right; }
.e2a-pre {
  color: var(--text); font-family: var(--font-code); overflow: hidden; text-overflow: ellipsis;
}

/* light theme only (S-0000-0382 group C): the floating find/goto bars become soft
 * cards, using the light shape/elevation tokens -- dark is untouched (same guard as
 * core.css's #menubar .dropdown block). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .e2a-findbar,
  :root:not([data-theme="dark"]) .e2a-gotobar {
    background: var(--surface-card); border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
  }
}
:root[data-theme="light"] .e2a-findbar,
:root[data-theme="light"] .e2a-gotobar {
  background: var(--surface-card); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}