/* ============================================================
   GRIEZELWOUD — KAART
   Leaflet-overrides plus de eigen kaart-UI. Mobiel is hier de
   hoofdzaak: de kaart is vrijwel altijd een telefoon in het
   donker, met een hand die ook nog een zaklamp vasthoudt.
   ============================================================ */

.map-shell {
  position: relative;
  display: grid;
  /* minmax(0,...) is hier essentieel: zonder die 0 laat de grid de
     kaartrij meegroeien met de kaart zelf en wordt hij duizenden
     pixels hoog. */
  grid-template-rows: minmax(0, auto) minmax(0, 1fr);
  /* Zonder deze kolom groeit de grid mee met de breedste inhoud. De
     filterchips staan bewust op een rij die je opzij veegt, en die
     duwden de hele kaart buiten het scherm. */
  grid-template-columns: minmax(0, 1fr);
  height: calc(100dvh - 4.5rem);
  margin-top: calc(4.5rem + env(safe-area-inset-top));
  isolation: isolate;
  overflow: hidden;
}

@media (min-width: 62rem) {
  .map-shell {
    grid-template-columns: 24rem minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: calc(100dvh - 4.9rem);
  }
}

/* ---------- ZIJPANEEL / BEDIENING ---------- */

.map-panel {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: rgba(7, 11, 22, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
}
/* Kinderen van het paneel houden hun eigen hoogte; anders drukt flexbox
   de routekiezer plat zodra het paneel aan zijn maximum zit. Het paneel
   scrolt dan, in plaats van zijn inhoud te vermorzelen. */
.map-panel > * { flex: none; }

@media (min-width: 62rem) {
  .map-panel { border-bottom: 0; border-right: 1px solid var(--line); overflow-y: auto; }
}

.map-panel__head { padding: 1rem var(--gutter); border-bottom: 1px solid var(--line); }
.map-panel__title { font-size: var(--t-md); }
.map-panel__count { font-size: var(--t-xs); color: var(--bone-3); margin-top: .2rem; }

/* Routekiezer */
.route-picker { display: grid; gap: .5rem; padding: 1rem var(--gutter); border-bottom: 1px solid var(--line); }
@media (max-width: 61.99rem) { .route-picker { grid-auto-flow: column; grid-auto-columns: minmax(10.5rem, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .route-picker::-webkit-scrollbar { display: none; } }

.route-opt { position: relative; scroll-snap-align: start; }
.route-opt input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.route-opt__box {
  display: block;
  height: 100%;
  padding: .8rem .9rem;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--route-color, var(--line-2));
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.route-opt__box:hover { background: var(--surface-2); }
.route-opt input:checked + .route-opt__box { background: var(--surface-3); border-color: var(--route-color, var(--pumpkin)); border-left-color: var(--route-color, var(--pumpkin)); box-shadow: 0 0 22px -8px var(--route-color, var(--pumpkin)); }
.route-opt input:focus-visible + .route-opt__box { outline: 2px solid var(--focus); outline-offset: 2px; }
.route-opt__name { display: block; font-weight: 600; font-size: var(--t-sm); color: var(--bone); }
.route-opt__meta { display: block; font-size: var(--t-xs); color: var(--bone-3); margin-top: .15rem; }

/* Filters */
.filters { padding: 1rem var(--gutter); border-bottom: 1px solid var(--line); }
.filters__title { font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3); margin-bottom: .75rem; }
.filter-chips { display: flex; flex-wrap: wrap; gap: .45rem; }

.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.chip__box {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 38px;
  padding: .4rem .85rem;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--bone-2);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out);
}
.chip__box:hover { border-color: var(--line-pumpkin); color: var(--bone); }
.chip input:checked + .chip__box {
  color: var(--accent-ink);
  background: var(--chip-color, var(--pumpkin));
  border-color: transparent;
  box-shadow: 0 4px 18px -6px var(--chip-color, var(--pumpkin));
}
.chip input:focus-visible + .chip__box { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Lijst met locaties (desktop-zijpaneel) */
.map-list { display: none; flex: 1; overflow-y: auto; padding: .5rem var(--gutter) 2rem; }
@media (min-width: 62rem) { .map-list { display: block; } }

.map-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .85rem;
  width: 100%;
  padding: .9rem .75rem;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.map-list__item:hover { background: var(--surface-2); border-color: var(--line); }
.map-list__item.is-active { background: rgba(255,122,24,.12); border-color: var(--line-pumpkin); }
.map-list__emoji { font-size: 1.35rem; line-height: 1.2; }
.map-list__name { font-weight: 600; color: var(--bone); font-size: var(--t-sm); }
.map-list__meta { font-size: var(--t-xs); color: var(--bone-3); }

/* ---------- DE KAART ZELF ---------- */

.map-canvas { position: relative; width: 100%; min-width: 0; height: 100%; background: var(--void); z-index: 1; overflow: hidden; }
#map { width: 100%; height: 100%; }

/* Leaflet leest standaard als een lichte webkaart; dit maakt er nacht van. */
.leaflet-container {
  background: #050810;
  font-family: var(--font-body);
  outline: none;
}
/* Nachtkaart zonder betaalde tegelprovider: we keren de lichte
   OpenStreetMap-tegels om en draaien de kleuren terug, zodat land donker
   wordt en straatnamen licht. De laatste twee stappen leggen er de
   paarsblauwe merkzweem overheen. */
.leaflet-tile-pane {
  /* Na het omkeren wordt zwarte tekst wit. Te veel dimmen maakt
     straatnamen onleesbaar, dus houden we de helderheid hoog en zoeken
     we de sfeer in de kleurzweem. */
  filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.95)
          saturate(.55) sepia(.22) hue-rotate(195deg);
  transition: filter var(--dur-slow) var(--ease-out);
}
/* Dagstand: de gewone kaart, beter leesbaar bij daglicht */
.map-canvas.is-dag .leaflet-tile-pane { filter: none; }
.map-canvas.is-dag .leaflet-container { background: #DCD9D2; }

.leaflet-control-container .leaflet-control {
  border: 1px solid var(--line-2) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
}
.leaflet-bar a, .leaflet-bar a:hover {
  background: rgba(13,20,38,.95);
  color: var(--bone);
  border-bottom-color: var(--line);
  width: 36px; line-height: 36px; height: 36px;
}
.leaflet-bar a:hover { background: var(--surface-solid-2); color: var(--pumpkin); }

.leaflet-control-attribution {
  background: rgba(4,5,10,.82) !important;
  color: var(--bone-4) !important;
  font-size: 10px !important;
  padding: 2px 6px !important;
  border: 0 !important;
  box-shadow: none !important;
}
.leaflet-control-attribution a { color: var(--bone-3) !important; }

/* ---------- MARKERS ---------- */

.gw-marker {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  font-size: 20px;
  line-height: 1;
  background: radial-gradient(circle at 50% 35%, var(--m-color, #FF7A18) 0%, rgba(4,5,10,.92) 78%);
  border: 2px solid var(--m-color, #FF7A18);
  border-radius: 50% 50% 50% 8px;
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px rgba(4,5,10,.7), 0 0 22px -2px var(--m-color, #FF7A18), var(--shadow-md);
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out);
  cursor: pointer;
}
.gw-marker > span { transform: rotate(-45deg); display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.9)); }
.gw-marker:hover { transform: rotate(45deg) scale(1.14); box-shadow: 0 0 0 3px rgba(4,5,10,.7), 0 0 34px 2px var(--m-color, #FF7A18), var(--shadow-lg); }
.gw-marker.is-active { transform: rotate(45deg) scale(1.22); box-shadow: 0 0 0 4px rgba(232,185,59,.85), 0 0 42px 4px var(--m-color, #FF7A18); }

/* Startpunt krijgt een pulserende ring zodat je hem meteen ziet */
.gw-marker--start::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--m-color, #E8B93B);
  opacity: 0;
  animation: marker-pulse 2.6s var(--ease-out) infinite;
}
@keyframes marker-pulse {
  0%   { transform: scale(.7); opacity: .9; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .gw-marker--start::after { animation: none; opacity: .5; } }

/* Eigen positie */
.gw-me {
  width: 18px; height: 18px;
  background: #4FA3FF;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(79,163,255,.25), 0 0 20px rgba(79,163,255,.9);
}

/* ---------- ONDERBLAD (detail) ---------- */

.sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  max-height: 78%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(13,20,38,.985), rgba(7,11,22,.99));
  border-top: 1px solid var(--line-2);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform: translateY(101%);
  transition: transform var(--dur-slow) var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom);
  overscroll-behavior: contain;
}
.sheet.is-open { transform: none; }
@media (min-width: 62rem) {
  .sheet {
    left: auto; right: 1.25rem; bottom: 1.25rem;
    width: 25rem;
    max-height: calc(100% - 2.5rem);
    border-radius: var(--r-lg);
    border: 1px solid var(--line-2);
    transform: translateY(0) translateX(calc(100% + 2rem));
  }
  .sheet.is-open { transform: none; }
}

.sheet__grab { width: 42px; height: 4px; margin: .7rem auto .2rem; background: var(--line-2); border-radius: var(--r-pill); flex: none; }
@media (min-width: 62rem) { .sheet__grab { display: none; } }

.sheet__close {
  position: absolute;
  top: .85rem; right: .85rem;
  z-index: 2;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  font-size: 1.1rem;
  color: var(--bone);
  background: rgba(4,5,10,.7);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  cursor: pointer;
}
.sheet__close:hover { background: var(--pumpkin); color: var(--accent-ink); }

.sheet__scroll { overflow-y: auto; padding: .5rem var(--gutter) 1.5rem; -webkit-overflow-scrolling: touch; }

.sheet__media { aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); margin-bottom: 1.15rem; background: var(--surface-solid); }
.sheet__media img { width: 100%; height: 100%; object-fit: cover; }
.sheet__type { font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.sheet__name { font-size: var(--t-xl); margin: .25rem 0 .1rem; }
.sheet__addr { font-size: var(--t-sm); color: var(--bone-3); }
.sheet__badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.sheet__desc { color: var(--bone-2); margin-bottom: 1.25rem; }
.sheet__facts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin-bottom: 1.25rem; }
.sheet__fact { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; background: var(--surface-solid); font-size: var(--t-sm); }
.sheet__fact dt { color: var(--bone-3); }
.sheet__fact dd { margin: 0; color: var(--bone); text-align: right; font-weight: 500; }
.sheet__actions { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; }

/* ---------- ZWEVENDE KNOPPEN ---------- */

.map-fabs {
  position: absolute;
  right: .9rem;
  bottom: calc(1.1rem + env(safe-area-inset-bottom));
  z-index: 999;
  display: grid;
  gap: .55rem;
}
.fab {
  display: grid; place-items: center;
  width: 50px; height: 50px;
  font-size: 1.25rem;
  color: var(--bone);
  background: rgba(13,20,38,.94);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.fab:hover { background: var(--pumpkin); color: var(--accent-ink); border-color: transparent; transform: translateY(-2px); }
.fab.is-on { background: var(--pumpkin); color: var(--accent-ink); border-color: transparent; }

/* Legenda */
.map-legend {
  position: absolute;
  left: .9rem;
  bottom: calc(1.1rem + env(safe-area-inset-bottom));
  z-index: 998;
  padding: .8rem .95rem;
  background: rgba(7,11,22,.93);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  backdrop-filter: blur(10px);
  font-size: var(--t-xs);
  display: none;
}
.map-legend.is-open { display: block; }
@media (min-width: 62rem) { .map-legend { display: block; } }
.map-legend h4 { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-3); margin-bottom: .6rem; font-family: var(--font-body); }
.map-legend ul { list-style: none; padding: 0; display: grid; gap: .4rem; }
.map-legend li { display: flex; align-items: center; gap: .5rem; color: var(--bone-2); }

/* Melding bij nul resultaten */
.map-empty {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 900;
  width: min(88%, 22rem);
  padding: 1.5rem;
  text-align: center;
  background: rgba(7,11,22,.95);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  backdrop-filter: blur(10px);
}

/* ============================================================
   MOBIELE BEDIENING
   Staat bewust onderaan: deze regels overschrijven de componenten
   hierboven en moeten dus later komen.
   ============================================================ */

/* Op een telefoon is de kaart de hoofdzaak. De bediening erboven wordt
   daarom teruggebracht tot twee rijen die je opzij schuift: routes en
   filters. De toelichting bij de route valt weg -- die staat op de
   homepage en zou hier een derde van het scherm kosten. */
@media (max-width: 61.99rem) {
  /* Op straat wil je zoveel mogelijk kaart zien. De bediening gaat
     daarom NAAST de stapel staan en zweeft over de kaart heen, zoals in
     een navigatie-app. De kaart loopt eronder gewoon door, dus je kunt
     hem in elke richting slepen. */
  .map-shell { grid-template-rows: minmax(0, 1fr); }

  .map-panel {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 600;
    max-height: 46vh;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(7, 11, 22, .97) 62%, rgba(7, 11, 22, .82));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .8);
  }

  .map-canvas { grid-row: 1; grid-column: 1; }

  /* Routekeuze als smalle segmentenbalk: alleen de naam, geen afstand */
  .route-picker { padding-block: .5rem; gap: .4rem; grid-auto-columns: auto; }
  .route-opt__box { padding: .5rem .8rem; border-left-width: 2px; }
  .route-opt__meta { display: none; }
  .route-opt__name { font-size: var(--t-xs); white-space: nowrap; }

  /* De melding wordt hier een strook van een regel. Hij mag zichtbaar
     zijn -- op de avond zelf staat er misschien iets belangrijks in --
     maar niet ten koste van de kaart. */
  .map-panel .melding {
    margin: 0;
    width: 100%;
    max-width: none;
    padding: .5rem var(--gutter);
    gap: .5rem;
    border: 0;
    border-bottom: 1px solid var(--line-gold);
    border-radius: 0;
    flex-wrap: nowrap;
    align-items: center;
  }
  .map-panel .melding__tekst {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--t-xs);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .map-panel .melding__knop { padding: .3rem .7rem; font-size: 10px; }

  /* Kop samenvouwen tot een regel: de titel staat al in het menu */
  .map-panel__head { padding: .45rem var(--gutter); }
  .map-panel__title { display: none; }
  .map-panel__count { margin: 0; }
  .map-panel__head { padding-block: .6rem; }
  .map-panel__title { font-size: var(--t-sm); }
  .map-panel > .panel { display: none; }
  .filters__title { display: none; }
  .filters { padding-block: .7rem; }
  .route-picker { padding-block: .7rem; }

  /* Chips op een rij die je opzij veegt, met een zichtbare afsnijding
     rechts zodat duidelijk is dat er meer staat. */
  .filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-right: 1.5rem;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  }
  .filter-chips::-webkit-scrollbar { display: none; }
  .filter-chips--extra { margin-top: .45rem; }
}

@media (min-width: 62rem) {
  .filter-chips--extra { margin-top: .5rem; }
}