/* ── Reset & Fullscreen Map ──────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #1a1a1a;
  font-family: system-ui, -apple-system, sans-serif;
}

#map {
  width: 100%;
  height: 100%;
}

/* ── Loading Overlay ─────────────────────────────────────────────────────── */
#ui-loader {
  position: fixed;
  inset: 0;                          /* top/right/bottom/left: 0 */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  /* Smooth fade-out via JS toggling .hidden */
  transition: opacity 0.3s ease;
}

#ui-loader.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ── Touch-Optimierung: Leaflet-Zoom-Buttons (min. 44×44 px) ────────────── */
/* Wichtig für Tablet-Bedienung auf vibrierenden Landmaschinen               */
.leaflet-bar a {
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  font-size: 20px !important;
}

.leaflet-touch .leaflet-bar a {
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
}

/* Etwas mehr Abstand zwischen den Zoom-Buttons für grobe Finger */
.leaflet-bar {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.leaflet-bar a:first-child {
  border-radius: 4px 4px 0 0;
}

.leaflet-bar a:last-child {
  border-radius: 0 0 4px 4px;
}

/* ── Layer-Control: Mobile-Optimierung für Traktor-Terminals ─────────────── */
/* Leicht transparenter weißer Hintergrund, gut lesbar auf hellen Kacheln    */
.leaflet-control-layers {
  background: rgba(255, 255, 255, 0.92) !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
  font-size: 1rem !important;
  min-width: 160px;
}

/* Expanded panel (when toggle is open) */
.leaflet-control-layers-expanded {
  padding: 10px 14px !important;
}

/* Jede Layer-Zeile: großzügiges Padding für Touch-Bedienung */
.leaflet-control-layers-selector {
  /* Vergrößerte Checkbox für grobe Finger */
  width: 20px !important;
  height: 20px !important;
  margin-right: 8px !important;
  cursor: pointer;
  accent-color: #27ae60;   /* grüne Checkbox passend zum Feldgrenzen-Stil */
}

/* Zeilenabstand zwischen den Layer-Einträgen */
.leaflet-control-layers label {
  display: flex !important;
  align-items: center !important;
  padding: 8px 0 !important;   /* min. 44 px Gesamthöhe pro Zeile */
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.leaflet-control-layers label:last-child {
  border-bottom: none;
}

/* Toggle-Button (das kleine Schichten-Icon) */
.leaflet-control-layers-toggle {
  width: 44px !important;
  height: 44px !important;
  background-size: 24px 24px !important;
}

/* Separator zwischen Base- und Overlay-Layern */
.leaflet-control-layers-separator {
  margin: 6px 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.15) !important;
}