/* MyMappi map mood: warm by day, deep green-blue at night, readable at every zoom. */
html body .app-shell .map-stage.map-focus #map,
html body .app-shell .map-stage.map-focus .maplibregl-canvas-container,
html body .app-shell .map-stage.map-focus .maplibregl-canvas {
  background: #e8f1ec !important;
}

html body .app-shell .map-stage.map-focus.map-sunrise #map,
html body .app-shell .map-stage.map-focus.map-morning #map {
  background: #f2eadb !important;
}

html body .app-shell .map-stage.map-focus.map-sunset #map {
  background: #eadfce !important;
}

html body .app-shell .map-stage.map-focus.map-night #map,
html body .app-shell .map-stage.map-focus.map-night .maplibregl-canvas-container,
html body .app-shell .map-stage.map-focus.map-night .maplibregl-canvas {
  background: #071d26 !important;
}

html body .app-shell .map-stage.map-focus.map-sunrise .leaflet-tile,
html body .app-shell .map-stage.map-focus.map-sunrise .maplibregl-canvas {
  filter: sepia(0.08) saturate(1.08) brightness(1.025) contrast(1.035) hue-rotate(-2deg) !important;
}

html body .app-shell .map-stage.map-focus.map-morning .leaflet-tile,
html body .app-shell .map-stage.map-focus.map-morning .maplibregl-canvas {
  filter: sepia(0.045) saturate(1.07) brightness(1.025) contrast(1.035) !important;
}

html body .app-shell .map-stage.map-focus.map-day .leaflet-tile,
html body .app-shell .map-stage.map-focus.map-day .maplibregl-canvas {
  filter: sepia(0.018) saturate(1.055) brightness(1.018) contrast(1.04) !important;
}

html body .app-shell .map-stage.map-focus.map-sunset .leaflet-tile,
html body .app-shell .map-stage.map-focus.map-sunset .maplibregl-canvas {
  filter: sepia(0.075) saturate(1.08) brightness(1.01) contrast(1.055) hue-rotate(-3deg) !important;
}

html body .app-shell .map-stage.map-focus.map-night .leaflet-tile,
html body .app-shell .map-stage.map-focus.map-night .maplibregl-canvas {
  filter: brightness(0.76) saturate(1.06) contrast(1.14) hue-rotate(5deg) !important;
}

html body .app-shell .map-stage.map-focus.map-rain:not(.map-night) .leaflet-tile,
html body .app-shell .map-stage.map-focus.map-rain:not(.map-night) .maplibregl-canvas,
html body .app-shell .map-stage.map-focus.map-cloudy:not(.map-night) .leaflet-tile,
html body .app-shell .map-stage.map-focus.map-cloudy:not(.map-night) .maplibregl-canvas {
  filter: sepia(0.015) saturate(0.98) brightness(1.005) contrast(1.055) !important;
}

html body .app-shell .map-stage.map-focus.map-night .maplibregl-ctrl-attrib {
  border-color: rgba(181, 224, 214, 0.18) !important;
  color: #d8ebe5 !important;
  background: rgba(4, 29, 38, 0.86) !important;
  box-shadow: 0 6px 18px rgba(0, 12, 20, 0.22) !important;
}

html body .app-shell .map-stage.map-focus .maplibregl-canvas,
html body .app-shell .map-stage.map-focus .leaflet-tile {
  transition: filter 520ms cubic-bezier(0.2, 0.7, 0.25, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .app-shell .map-stage.map-focus .maplibregl-canvas,
  html body .app-shell .map-stage.map-focus .leaflet-tile {
    transition: none !important;
  }
}