/* Standplaats-kaart: de in-app kaartpicker (.lkz, MapLibre/OSM) en de standplaats-
   pin-veldcontrol in het bewerkformulier (.lpv). Vlakke kaarten (1px-rand + lichte schaduw),
   huisstijl-tokens, geen accentbalken. Maat/frame van de picker-modal komen uit de
   gedeelde utility .modal-venster (modal.css); hier alleen scrim, plaatsing en de
   kaart-specifieke onderdelen. De gevendorde maplibre-gl.css wordt lazy geladen. */

/* ---- Kaartpicker-modal ------------------------------------------------------ */
/* z-index 97: de standplaats-kaart wordt vaak GEOPEND VANUIT de Locaties-detail/
   -formulierpopup (.lg-modal, 95) en het planning-keerdetail (.pl-modal, 90), dus
   hij moet daar BOVEN staan (anders opent hij erachter). Blijft bewust ONDER de
   bevestigdialoog (100, pin verwijderen), de toelichting-tip (110) en de
   contactkaart (120), die juist boven de kaart horen. */
.lkz {
  position: fixed;
  inset: 0;
  z-index: 97;
  display: grid;
  place-items: center;
  padding: 4vh 16px;
}
.lkz__scrim { position: fixed; inset: 0; background: rgba(14, 28, 47, .45); }
.lkz__venster { position: relative; z-index: 1; --modal-w-breed: min(900px, 100%); }

.lkz__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.lkz__kop h2 { margin: 0; font-size: 1.05rem; color: var(--ink-900); }
/* Icoonknoppen rechts in de kop (Bewerken-potlood + blauwe Sluiten-X) als één
   groep; alleen plaatsing, uiterlijk komt uit de globale .btn-ico. */
.lkz__kopknoppen { display: flex; align-items: center; gap: 6px; }
/* Flex-kolom zodat de kaart de hele resthoogte van de modal vult (de zoekbalk,
   hint en velden houden hun maat; de kaart groeit mee). */
.lkz__body { padding: 14px 16px; display: flex; flex-direction: column; min-height: 0; }
/* De vaste onderdelen houden hun maat; alleen de kaart (.lkz__kaartwrap) groeit. */
.lkz__zoek, .lkz__hint, .lkz__velden { flex: 0 0 auto; }

/* Icoonknop binnen de picker (de modal staat buiten .lg, dus eigen definitie -
   zelfde look als de listgrid-icoonknop). */
/* De icoonknoppen in de kop (Bewerken-potlood + Sluiten-X) gebruiken de GLOBALE
   omrande .btn-ico en de blauwe Sluiten-X (.btn-ico[data-sluit]) - geen eigen,
   randloze variant meer, zodat deze popup er net zo uitziet als de andere. */
.lkz .btn--licht {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--blue-700);
}
.lkz .btn--licht:hover { background: var(--blue-100); }

/* Adreszoek (PDOK) om snel naar een plek te vliegen. */
.lkz__zoek {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-50);
  margin-bottom: 10px;
}
.lkz__zoek svg { width: 15px; height: 15px; color: var(--muted); flex: 0 0 auto; }
.lkz__zoekveld {
  border: 0; outline: none; background: none; font: inherit; font-size: .85rem;
  color: var(--ink-900); flex: 1 1 auto; min-width: 0; height: 34px;
}
.lkz__zoek:focus-within { box-shadow: 0 0 0 3px rgba(0, 71, 128, .12); }
.lkz__suggesties {
  position: absolute;
  top: calc(100% + 2px); left: 0; right: 0;
  z-index: 5;
  margin: 0; padding: 4px;
  list-style: none;
  max-height: 220px; overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.lkz__suggestie {
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: .82rem;
  color: var(--ink-900);
}
.lkz__suggestie:hover { background: var(--blue-100); }

/* De kaart + de vaste pin in het midden (de map schuift eronder). Groeit mee met
   de modal (flex) en gebruikt zo alle beschikbare ruimte; min-height houdt 'm op
   een kleiner scherm bruikbaar. */
.lkz__kaartwrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
/* Vult de wrap op MAAT (niet enkel via inset): MapLibre voegt zelf de class
   .maplibregl-map met `position: relative` toe, wat een puur op inset gebaseerde
   absolute-positionering zou overrulen en het kaartelement zou laten inklappen
   (lege kaart). width/height:100% houdt 'm hoe dan ook op de wrap-maat. */
.lkz__kaart { position: absolute; inset: 0; width: 100%; height: 100%; }
.lkz__pin {
  position: absolute;
  left: 50%; top: 50%;
  width: 30px; height: 30px;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}
.lkz__laden {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
}
/* Pin-beheer onder de kaart in de standplaats-popup (lijst + toevoegen). Houdt zijn
   maat (de kaart erboven groeit); scrolt intern bij veel pins. */
.lkz__beheer { flex: 0 0 auto; max-height: 30vh; overflow-y: auto; margin-top: 10px; }
.lkz__beheer:empty { display: none; }

/* Read-only weergave zonder pin: nette melding gecentreerd op de kaart. */
.lkz__geenpin {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  margin: 0;
  padding: 6px 12px;
  background: rgba(255, 255, 255, .85);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: .85rem;
}
/* Lagenschakelaar (Kaart / Satelliet), rechtsboven op de kaart. Segment-knop:
   actieve laag in het accent, de andere neutraal. De bronvermelding zelf komt van
   MapLibre's ingebouwde (compacte) attribution-control. */
.lkz__lagen {
  position: absolute;
  right: 8px; top: 8px;
  z-index: 3;
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.lkz__laag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 0;
  background: var(--paper);
  color: var(--ink-900);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}
.lkz__laag + .lkz__laag { border-left: 1px solid var(--line); }
.lkz__laag svg { width: 14px; height: 14px; }
.lkz__laag:hover { background: var(--bg-50); }
.lkz__laag.is-actief { background: var(--blue-700); color: #fff; }

.lkz__hint { margin: 8px 0 0; font-size: .78rem; color: var(--muted); }
.lkz__velden { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: center; margin-top: 12px; }
.lkz__veld { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; font-size: .8rem; color: var(--ink-900); }
.lkz__veld input {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit; font-size: .85rem;
  color: var(--ink-900);
}
.lkz__vink { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; color: var(--ink-900); }
.lkz__vink input { accent-color: var(--blue-700); }

.lkz__voet {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.lkz__fout { flex: 1 1 auto; min-width: 0; font-size: .8rem; color: var(--muted); }

/* ---- Standplaats-pin als veld in het bewerkformulier (.lpv) ------------------ */
.lpv { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.lpv__pins { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lpv__pin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-50);
}
.lpv__pin-naam {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lpv__pin-stip { flex: 0 0 auto; width: 14px; height: 14px; color: var(--gold-500); }
.lpv__badge {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #7a5c00;
  background: color-mix(in srgb, var(--gold-500) 18%, white);
  border: 1px solid color-mix(in srgb, var(--gold-500) 45%, white);
  border-radius: 999px;
  padding: 0 6px;
}
.lpv__pin-acties { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.lpv__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  color: var(--blue-700);
  border-radius: var(--radius-sm);
}
.lpv__nav:hover { background: var(--blue-100); }
.lpv__nav svg { width: 15px; height: 15px; }
.lpv__leeg { font-size: .8rem; color: var(--muted); margin: 0; }
.lpv__add { align-self: flex-start; }