/* assets/css/map.css */

/* Map-Seite: Vollhöhe */
html, body { height: 100%; }
body.page-map { margin: 0; overflow: hidden; }

/* Default: Topbar vorhanden */
:root { --topbar-h: 64px; }

/* Wenn nur 1 Device -> Topbar weg */
body.page-map.no-topbar { --topbar-h: 0px; }

/* Karte unter der Topbar */
body.page-map #map{
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  bottom: 0;

  width: auto;
  height: auto;
  margin-top: 0; /* wichtig: nicht doppelt verschieben */
}


/* obere Leiste */
body.page-map .topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  box-sizing: border-box;
  z-index: 900;
  background: rgba(243,244,246,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(148,163,184,.35);
}

html.dark body.page-map .topbar{
  background: rgba(31,41,55,.92);
  border-bottom-color: rgba(148,163,184,.25);
}

body.page-map .topbar label { font-weight: 700; font-size: 13px; }

body.page-map .topbar select{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-size: 16px; /* iOS zoom fix */
}

html.dark body.page-map .topbar select{
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

/* Leaflet Layer Control unten rechts */
body.page-map .leaflet-bottom.leaflet-right {
  bottom: 1rem !important;
  right: 1rem !important;
}

body.page-map .leaflet-popup-content { font-size: 14px; }

/* Follow Toggle Button */
body.page-map #followToggle{
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 950;
  border: 1px solid rgba(148,163,184,.6);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-radius: 9999px;
  padding: .6rem .9rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}

body.page-map #followToggle[data-on="true"]::before{ content: "🎯 "; }
body.page-map #followToggle[data-on="false"]::before{ content: "🧭 "; }

html.dark body.page-map #followToggle{
  background: rgba(55,65,81,.92);
  border-color: rgba(148,163,184,.25);
  color: #f3f4f6;
}