/* Import der Brand-Farben aus basic.css */
:root {
  /* Falls basic.css nicht geladen ist, Fallback-Werte */
  --primary: #006699;
  --secondary: #cc6633;
  
  /* Map-spezifische Farben */
  --map-text-dark: #333;
  --map-text-medium: #555;
  --map-border-light: #e0e0e0;
  --map-bg-hover: #f5f5f5;
}

/* WICHTIG: Damit die Map den ganzen Screen füllt */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Scrollbalken vermeiden */
}

/* Flexbox Layout, damit Header + Map genau 100% geben */
body {
    display: flex;
    flex-direction: column;
}

/* Der Header nimmt sich so viel Platz wie er braucht */
header {
    flex: 0 0 auto; 
}

/* Das Main-Element füllt den Rest */
main {
    flex: 1 1 auto;
    position: relative; /* Wichtig für Leaflet Positionierung */
}

/* Die Karte füllt das Main-Element komplett aus */
#map {
    height: 100%;
    width: 100%;
    z-index: 1;
}


/* Attribution Leiste minimalistisch */
.leaflet-container .leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.7) !important; /* Halbtransparent */
    font-size: 10px; /* Kleiner als Standard (11-12px) */
    line-height: 12px;
    padding: 2px 5px;
    color: var(--map-text-medium);
    border-radius: 4px 0 0 0; /* Hübsche Ecke */
    margin: 0;
}

/* Links darin nicht so grell blau */
.leaflet-container .leaflet-control-attribution a {
    color: var(--map-text-dark);
    text-decoration: none;
    font-weight: 600;
}

.leaflet-tooltip.my-labels {
  background-color: rgba(255, 255, 255, 0.7);
  border: transparent;
  box-shadow: none;
  font-weight: bold;
  padding: 1px 4px 0 4px;
  margin-top: 26px;
}

.leaflet-tooltip.my-cyl-label {
  background-color: transparent;
  color: white;
  border: transparent;
  box-shadow: none;
  font-size: 22px;
  font-weight: bold;
  padding: 0 ;
  margin: 0;
  z-index: -10;
}

/* Base outline/glow for sport icons so dark SVGs stay visible on dark maps */
.sport-icon {
  --sport-shadow-filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.75))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  --sport-state-filter: none;
  filter: var(--sport-shadow-filter) var(--sport-state-filter);
}

/* ############ BUTTONS ############ */
/* Locate Control - FAB Style, rechts unten (140px von unten) */
.leaflet-control-locate {
  position: fixed !important;
  bottom: 128px !important;
  right: 16px !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  z-index: 1000 !important;
}

.leaflet-control-locate a {
  font-size: 28px !important;
  height: 56px !important;
  width: 56px !important;
  line-height: 56px !important;
  background-color: var(--secondary) !important;
  border-radius: 15px !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.leaflet-control-locate a:hover {
  background-color: var(--secondary) !important;
  transform: scale(1.05) !important;
}

.leaflet-control-locate a:active {
  transform: scale(0.95) !important;
}

/* Force locate arrow/spinner to render in white regardless of plugin defaults */
.leaflet-control-locate a .leaflet-control-locate-location-arrow,
.leaflet-control-locate.active a .leaflet-control-locate-location-arrow,
.leaflet-control-locate.following a .leaflet-control-locate-location-arrow {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23fff" d="M445 4 29 195c-48 23-32 93 19 93h176v176c0 51 70 67 93 19L508 67c16-38-25-79-63-63z"/></svg>') !important;
  filter: none !important;
}

.leaflet-control-locate a .leaflet-control-locate-spinner,
.leaflet-control-locate.active a .leaflet-control-locate-spinner,
.leaflet-control-locate.following a .leaflet-control-locate-spinner {
  filter: invert(1) brightness(100%) !important;
}

/* Active state when locating */
.leaflet-control-locate.active a {
  background-color: var(--primary) !important;
  color: white !important;
}

/* When the plugin marks the button as disabled after stopping, keep our base color */
.leaflet-control-locate.disabled a,
.leaflet-control-locate a.disabled {
  background-color: var(--secondary) !important;
  color: white !important;
}

/* Zoom Controls - FAB Style, rechte Seite vertikal zentriert */
.leaflet-control-zoom {
  position: fixed !important;
  bottom: 154px !important;
  right: 16px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  border: none !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  z-index: 1000 !important;
}

.leaflet-control-zoom a {
  font-size: 28px !important;
  height: 56px !important;
  width: 56px !important;
  line-height: 56px !important;
  background-color: var(--secondary) !important;
  border: none !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.leaflet-control-zoom a:hover {
  background-color: var(--secondary) !important;
  transform: scale(1.05) !important;
}

.leaflet-control-zoom a:active {
  transform: scale(0.95) !important;
}

/* Trennlinie zwischen + und - Buttons */
.leaflet-control-zoom-in {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.leaflet-control-zoom-out {
  border-top: none !important;
}

/* Landscape Mobile / kleiner Viewport: Zoom-Buttons mehr Abstand */
@media (orientation: landscape) {
  .leaflet-control-zoom {
    right: 36px !important;
    bottom: 135px !important;
  }
  .leaflet-control-locate {
    bottom: 115px !important;
    right: 36px !important;
  }
  .leaflet-control-ranking {
    display: none !important;
  }
}

/* Ranking Button - FAB Style, oberhalb des nativen Share-Buttons */
.leaflet-control-ranking {
  position: fixed !important;
  right: 16px !important;
  top: 44px;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  z-index: 1000 !important;
}

.leaflet-control-ranking a {
  height: 56px !important;
  width: 56px !important;
  background-color: var(--secondary) !important;
  border-radius: 15px !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.leaflet-control-ranking a:hover {
  background-color: var(--secondary) !important;
  transform: scale(1.05) !important;
}

.leaflet-control-ranking a:active {
  transform: scale(0.95) !important;
}

/* ############ END BUTTONS ############ */

/* Traqivo Logo unten links - ohne Hintergrund */
.map-logo {
  position: fixed;
  bottom: 35px;
  left: 10px;
  z-index: 1000;
  pointer-events: none;
  display: inline-block;
}

.map-logo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.0) 50%);
  filter: blur(12px);
  z-index: -1;
}

.map-logo img {
  height: 82px;
  width: auto;
  display: block;
  /* Halo sits behind via ::before so logo colors stay crisp */
  filter: none;
}

@media (max-width: 768px) {
  .map-logo {
    bottom: 35px !important;
    left: 10px !important;
  }
  
  .map-logo img {
    height: 72px;
  }
}

/* Layer Control - unter dem Logo positionieren */
.leaflet-control-layers {
  margin-top: 80px !important;
  margin-left: calc(0px + env(safe-area-inset-left)) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

@media (max-width: 768px) {
  .leaflet-control-layers {
    margin-top: calc(80px + env(safe-area-inset-top)) !important;
    margin-left: calc(0px + env(safe-area-inset-left)) !important;
  }
}

/* Opentopomap tweaks */
#map.opentopomap-compensate-zoom-low .leaflet-tile-pane  > div:nth-child(1) { /* Klasse dynamisch den Tiles hinzufügen ab zoom <= 10 */
  filter: brightness(1.3)
          contrast(0.8)
          saturate(0.7)
          hue-rotate(30deg); /* Bräunlichkeit neutralisieren */
}
#map.opentopomap-compensate-zoom-high .leaflet-tile-pane  > div:nth-child(1){ /* Klasse dynamisch den Tiles hinzufügen ab zoom > 10 */
  filter: brightness(1.09)
          saturate(0.9)
          contrast(0.7)   
          hue-rotate(-15deg); /* Grünstich neutralisieren */
}