/* Base styles for Bike Tour Planner */
:root {
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #1b2533;
  --muted: #5b6b7a;
  --primary: #2c5aa0;
  --primary-2: #4a90e2;
  --border: #e6e9ef;
  --shadow: 0 6px 24px rgba(19, 33, 68, 0.08);
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
}

/* Fullscreen map */
.container { height: 100vh; }
.map-container { width: 100%; height: 100vh; position: relative; }
#map { width: 100%; height: 100vh; }
@supports (height: 100svh) {
  .container { height: 100svh; }
  .map-container { height: 100svh; }
  #map { height: 100svh; }
}
/* Improve tile crispness on mobile Safari/Firefox */
.leaflet-tile {
  image-rendering: -webkit-optimize-contrast; /* Safari */
  image-rendering: crisp-edges; /* Firefox/Chromium */
}
@media (max-width: 768px) {
  .map-container { height: 100vh !important; }
  #map { height: 100vh !important; }
}

/* Hide Leaflet UI controls (zoom and attribution) */
.leaflet-control-zoom, .leaflet-control-attribution { display: none !important; }

.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.btn.primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border-color: transparent;
  color: #fff;
}

.hidden { display: none !important; }

/* Selection marker styling for inline SVG divIcon */
.leaflet-div-icon.btp-sel-marker {
  background: transparent;
  border: none;
}

/* Ensure map captures touch gestures without scrolling page */
#map, .map-container, .container { touch-action: none; }

/* Info panel safe-area bottom compensation */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .info-panel { bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* Reserve a bit of space at bottom of map for the info panel when present */
.map-container { padding-bottom: env(safe-area-inset-bottom, 0); }

/* Legend + Scale theming */
.leaflet-control-scale {
  margin-bottom: calc(12px + env(safe-area-inset-bottom, 0));
  margin-right: calc(12px + env(safe-area-inset-right, 0));
  filter: drop-shadow(0 6px 24px rgba(19,33,68,0.12));
}
.leaflet-control-scale-line {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}

.btp-legend {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: var(--shadow);
  margin: 0 12px 12px 12px;
  margin-bottom: calc(12px + env(safe-area-inset-bottom, 0));
}
.btp-legend .legend-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.btp-legend .legend-line { display: inline-block; width: 28px; height: 0; border-top: 4px solid currentColor; }
.btp-legend .legend-line.green { color: #018752; }
.btp-legend .legend-line.orange { color: #f08c00; }
.btp-legend .legend-line.red { color: #e03131; }
.btp-legend .legend-label { font-size: 13px; color: var(--muted); }
.btp-legend .legend-sep { height: 1px; background: var(--border); margin: 6px 0; }
.btp-legend .legend-user-dot { width: 12px; height: 12px; border-radius: 50%; background: #2E7AFE; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border); display: inline-block; }

/* Ensure controls don’t overlap bottom info panel too much on wide screens */
@media (min-width: 1000px) {
  .leaflet-bottom.leaflet-right { margin-bottom: 84px; }
}