/* ── 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 Optimisation: Leaflet Zoom Buttons (min. 44×44 px) ──────────── */
/* Important for tablet operation on vibrating agricultural machinery         */
.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;
}

/* Slightly more spacing between zoom buttons for coarse fingers */
.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 Optimisation for Tractor Terminals ──────────── */
/* Slightly transparent white background, readable on bright tiles           */
.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;
}

/* Each layer row: generous padding for touch operation */
.leaflet-control-layers-selector {
  /* Enlarged checkbox for coarse fingers */
  width: 20px !important;
  height: 20px !important;
  margin-right: 8px !important;
  cursor: pointer;
  accent-color: #27ae60;   
}

/* Line spacing between layer entries */
.leaflet-control-layers label {
  display: flex !important;
  align-items: center !important;
  padding: 8px 0 !important;   
  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 */
.leaflet-control-layers-toggle {
  width: 44px !important;
  height: 44px !important;
  background-size: 24px 24px !important;
}

/* Separator between base and overlay layers */
.leaflet-control-layers-separator {
  margin: 6px 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.15) !important;
}

.polygon-label {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: white;
  font-weight: bold;
  font-size: 13px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  text-align: center;
}
.polygon-label::before{
  display: none !important;
}