/* ============================================================================
   MAP LAYOUT - Leaflet Map Container & Location Markers
   ============================================================================

   Map container positioning and Leaflet overrides.
   Loaded as critical CSS (synchronously).

   Migrated from: components/styles/base.css (map + marker sections)
                   components/styles/filter.css (#map + .user-location-dot)
   ============================================================================ */

/* ============================================================================
   MAP CONTAINER
   ============================================================================ */

#map {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  touch-action: pinch-zoom pan-x pan-y;
}

/* Dark map theme - targets LAB colors:
   lab(14.9, 0.96, 0.35) ~ #262626  (darkest, background)
   lab(16.5, 0.01, 0)    ~ #2b2b2b  (land areas)
   lab(25.3, 0.01, 0)    ~ #3d3d3d  (roads/features)
   lab(34.0, 0.01, 0)    ~ #525252  (labels/text)
*/
.leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(1.5) contrast(0.85) saturate(0.1);
}

/* ============================================================================
   LOCATION MARKER - Custom SVG Icon with Smooth Rotation
   ============================================================================ */

/* Ensure Leaflet's divIcon wrapper doesn't clip the drop-shadow */
.location-marker-icon,
.navigation-location-icon {
  background: none !important;
  border: none !important;
  overflow: visible !important;
}

/* Smooth heading rotation for the SVG icon (used during navigation) */
.location-svg-icon {
  transition: transform 0.3s ease-out;
  transform-origin: center center;
}