/* Zoekpalet (component): de globale zoekfunctie als gecentreerde overlay,
   geopend via het "Zoeken"-item in de zijbalk of Ctrl/Cmd+K (of "/").
   Vlakke kaart (1px-rand + schaduw), geen accentbalk. Alleen geladen door
   index.html; de resultaatpresentatie komt overeen met de oude topbalk-lijst. */

.zoekpalet { position: fixed; inset: 0; z-index: 90; }
.zoekpalet__scrim { position: absolute; inset: 0; background: rgba(28, 42, 57, .45); }

/* Venster hoog in beeld (commandopalet-conventie): zoekveld bovenin, de
   resultatenlijst scrollt zelf, onderin een voet met toetshints. Maat + frame
   komen uit de gedeelde utility (.modal-venster --breed, modal.css): een VASTE
   hoogte i.p.v. max-height = stilstaand venster terwijl de resultaten live
   wijzigen (geen springende onderrand). De eigen top-positionering blijft hier;
   de lokale tokens houden de eigen, bredere maat. */
.zoekpalet__venster {
  position: absolute;
  top: 12vh;
  left: 50%;
  transform: translateX(-50%);
  --modal-w-breed: min(1280px, calc(100vw - 32px));
  --modal-h-breed: min(560px, 70vh);
}

/* Zoekveld: groot en borderloos; het venster zelf is het kader. */
.zoekpalet__veld {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.zoekpalet__veld svg { width: 19px; height: 19px; flex: 0 0 19px; color: var(--muted); }
.zoekpalet__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1rem;
  color: var(--ink-900);
  outline: none;
}
.zoekpalet__input::placeholder { color: var(--muted); }

/* Resultaten: geen horizontale scroll; ronde hoeken clippen via het venster. */
.zoekpalet__resultaten { flex: 1 1 auto; overflow: hidden auto; padding: 6px 0; }
.zoekpalet__hint { padding: 18px 16px; text-align: center; color: var(--muted); font-size: .86rem; }

/* Categorie-band (arcering) - scheidt de groepen visueel. */
.zoekpalet__groep {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0 2px;
  padding: 5px 16px;
  background: var(--bg-50);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.zoekpalet__resultaten > .zoekpalet__groep:first-child { margin-top: 0; border-top: 0; }
.zoekpalet__groep svg { width: 13px; height: 13px; }
/* per categorie een eigen accentkleur op het icoon */
.zoekpalet__groep--acties svg { color: var(--blue-700); }
.zoekpalet__groep--contacten svg { color: var(--gold-500); }
.zoekpalet__groep--locaties svg { color: var(--ok); }
.zoekpalet__groep--voertuigen svg { color: var(--warn); }
.zoekpalet__groep--gemeenten svg { color: var(--muted); }

/* Compacte resultaatrij met categorie-stip. */
.zoekpalet__item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: 6px 16px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.zoekpalet__item:hover, .zoekpalet__item.is-active { background: var(--sidebar-active); }
.zoekpalet__dot {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--muted);
}
.zoekpalet__item--acties .zoekpalet__dot { background: var(--blue-700); }
.zoekpalet__item--contacten .zoekpalet__dot { background: var(--gold-500); }
.zoekpalet__item--locaties .zoekpalet__dot { background: var(--ok); }
.zoekpalet__item--voertuigen .zoekpalet__dot { background: var(--warn); }
.zoekpalet__item--gemeenten .zoekpalet__dot { background: var(--muted); }
.zoekpalet__tekst { display: flex; flex-direction: column; min-width: 0; }
.zoekpalet__titel {
  font-size: .88rem;
  line-height: 1.3;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zoekpalet__sub {
  font-size: .76rem;
  line-height: 1.25;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Voet met toetshints: stil, alleen ter ondersteuning. */
.zoekpalet__voet {
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  background: var(--bg-50);
  color: var(--muted);
  font-size: .74rem;
}
.zoekpalet__voet span { display: inline-flex; align-items: center; gap: 5px; }
.zoekpalet__voet kbd {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: .7rem;
}