/* =============================================================================
   kaart.php — chipreaders in de buurt
   -----------------------------------------------------------------------------
   Voorvoegsel: .km-

   De lijst werd in JavaScript opgebouwd met emoji (een microscoop als avatar, een
   punaise, een roze telefoon op donkergroen en een tekstballon op felgroen) en
   inline stijlen. Zonder Maps-sleutel kregen bezoekers een groot leeg vlak met een
   melding die voor de beheerder bedoeld was.

   Nu twee opzetten:
   - met sleutel:   lijst links, kaart rechts
   - zonder sleutel: dezelfde kaarten over de volle breedte, geen leeg vlak
   ============================================================================= */

/* ── Zoekbalk ─────────────────────────────────────────────────────────────── */
.km-balk { background: var(--surface); border-bottom: 1px solid var(--border); padding: .85rem 0; }
.km-balk-inner { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; flex-wrap: wrap; }
.km-zoek { display: flex; align-items: center; gap: .5rem; flex: 1 1 22rem; max-width: 30rem; margin: 0; }
.km-zoek .input-group-text { background: var(--blue-light); border-color: var(--blue-border); color: var(--blue-dark); }
.km-zoek .input-group-text { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
/* De knoppen zijn sitebreed rond; in een invoergroep sluit alleen de rechterkant af. */
.km-zoek .input-group .btn { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.km-wis { color: var(--text-muted); text-decoration: none; white-space: nowrap; padding-inline: .25rem; }
.km-wis:hover { color: var(--text); }
.km-aantal { margin: 0; color: var(--text-muted); font-size: .92rem; font-weight: 600; }

.km-beheer-noot {
  margin: 1rem 0 0;
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--surface));
  border-radius: var(--radius-sm);
  padding: .7rem 1rem;
  font-size: .88rem;
}
.km-beheer-noot a { color: var(--blue-dark); font-weight: 600; }

/* ── Met kaart: lijst en kaart naast elkaar ───────────────────────────────── */
.km-split {
  display: grid;
  grid-template-columns: minmax(19rem, 25rem) minmax(0, 1fr);
  height: calc(100vh - 14rem);
  min-height: 34rem;
  border-bottom: 1px solid var(--border);
}
.km-split .km-lijst {
  overflow-y: auto;
  padding: 1rem;
  display: grid; gap: .65rem; align-content: start;
  background: var(--surface-warm);
  border-right: 1px solid var(--border);
}
.km-map { min-height: 100%; background: var(--surface-warm); }

/* ── Zonder kaart: kaarten over de volle breedte ──────────────────────────── */
.km-vol { padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2.5rem, 5vw, 3.5rem); }
.km-vol .km-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }

/* ── Een chipreader ───────────────────────────────────────────────────────── */
.km-kaart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .85rem;
}
.km-kaart-kop { display: flex; align-items: flex-start; gap: .8rem; }
.km-icoon {
  width: 2.5rem; height: 2.5rem; flex-shrink: 0;
  border-radius: 50%;
  background: var(--blue-light); color: var(--blue-dark);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.km-kaart-tekst { min-width: 0; }
.km-kaart h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin: .1rem 0 .15rem; line-height: 1.3; }
.km-kaart h3 a { color: var(--text); text-decoration: none; }
.km-kaart h3 a:hover { color: var(--blue-dark); text-decoration: underline; }
.km-plaats { margin: 0; color: var(--text-muted); font-size: .87rem; }
.km-plaats .bi { color: var(--blue); }

.km-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.km-knoppen .btn { font-weight: 600; }
.km-profiel, .km-toon { color: var(--blue-dark); text-decoration: none; padding-inline: .35rem; }
/* In de kaart staat de profiellink vaak op een eigen regel; dan lijnt hij uit met de knoppen. */
.km-kaart .km-profiel { padding-left: 0; }
.km-profiel:hover, .km-toon:hover { text-decoration: underline; color: var(--blue-darker); }

/* WhatsApp-groen, een tint donkerder dan het merkgroen van WhatsApp zelf:
   wit haalt op #128c7e maar 4,14:1, op deze tint 5,22:1. */
.km-wa { background: #0f7a6d; border-color: #0f7a6d; color: #fff; }
.km-wa:hover, .km-wa:focus { background: #0b6b58; border-color: #0b6b58; color: #fff; }

/* ── Toestanden ───────────────────────────────────────────────────────────── */
.km-status { color: var(--text-muted); margin: .5rem 0; display: flex; align-items: center; }
.km-fout { color: var(--danger); }
.km-leeg { grid-column: 1 / -1; text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); }
.km-leeg-icoon {
  width: 3.25rem; height: 3.25rem; margin: 0 auto .9rem; border-radius: 50%;
  background: var(--band-blauw); color: var(--blue-dark);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.km-leeg p { margin: 0 0 .3rem; }
.km-leeg strong { color: var(--text); }

/* ── Popup op de kaart ────────────────────────────────────────────────────── */
.km-info { max-width: 16rem; font-family: var(--font-body); padding: .1rem 0; }
.km-info h3 { font-size: .98rem; font-weight: 700; margin: 0 0 .25rem; }
.km-info p { font-size: .84rem; color: var(--text-muted); margin: 0 0 .65rem; }

@media (max-width: 860px) {
  .km-split { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .km-map { height: 22rem; min-height: 0; order: -1; }
  .km-split .km-lijst { border-right: 0; overflow: visible; }
}
@media (max-width: 480px) {
  .km-zoek { flex-wrap: wrap; }
  .km-knoppen .btn-outline-primary, .km-knoppen .km-wa { flex: 1 1 auto; }
}

/* ── Kaartpunten en popup van Leaflet ─────────────────────────────────────────
   Zonder Google-sleutel draait de kaart op Leaflet. De markering is een eigen
   divIcon, zodat hij de merkkleur uit het palet volgt en niet afhangt van de
   standaardafbeeldingen van Leaflet op de CDN. */
.km-map { position: relative; isolation: isolate; z-index: 0; }
.km-pin { background: none; border: 0; }
.km-pin span {
  display: block; width: 28px; height: 28px;
  background: var(--primary);
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 3px 8px rgba(20, 30, 40, .35);
}
.km-pin span::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  background: #fff; border-radius: 50%;
}
.km-map .leaflet-popup-content-wrapper { border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.km-map .leaflet-popup-content { margin: .8rem .9rem; font-family: var(--font-body); }
/* Leaflet kleurt alle links in de kaart met .leaflet-container a. De kaart zelf IS
   die container, dus de knoppen in de popup moeten hier expliciet hun kleur terug
   krijgen; anders verdween de tekst op de WhatsApp-knop in de knop. */
.leaflet-popup-content a.km-wa,
.leaflet-popup-content a.km-wa:hover { color: #fff; }
.leaflet-popup-content a.btn-outline-primary { color: var(--primary-dark); }
.leaflet-popup-content a.btn-outline-primary:hover { color: #fff; }
.leaflet-popup-content a.km-profiel { color: var(--blue-dark); }
.km-info .km-knoppen { flex-wrap: nowrap; }
.km-info .km-knoppen .btn { white-space: nowrap; flex-shrink: 0; }
.km-info .km-knoppen .km-profiel { white-space: nowrap; }
.km-info { max-width: none; }
.km-map .leaflet-control-attribution { font-size: .7rem; }

/* ── Zoeken op nabijheid ──────────────────────────────────────────────────── */
.km-lijst-kop {
  font-family: var(--font-body); font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 .1rem; grid-column: 1 / -1;
}
.km-kaart-kop { position: relative; }
.km-afstand {
  flex-shrink: 0; margin-left: auto; align-self: flex-start;
  background: var(--band-blauw); border: 1px solid var(--band-blauw-rand);
  color: var(--blue-dark);
  border-radius: var(--radius-pill);
  padding: .12rem .6rem; font-size: .8rem; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.km-info .km-afstand { margin-left: .35rem; vertical-align: .05em; }

/* Zoekpunt op de Leaflet-kaart: blauwe stip met witte rand, onder de chipreaders. */
.km-zoekpunt { background: none; border: 0; }
.km-zoekpunt span {
  display: block; width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue); border: 4px solid #fff;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--blue) 25%, transparent), 0 2px 6px rgba(20,30,40,.3);
}