/*
 * map.css — Leaflet map container and marker styles
 *
 * Map is always full viewport width. It never shrinks under any interaction —
 * the panel overlays on top of it (see panel.css).
 * Height fills the space between the fixed nav and the bottom of the viewport.
 */

/* ── Container ────────────────────────────────────────────────── */

#map {
  position: relative;
  width: 100vw;
  height: calc((100vh - var(--nav-height)) * 0.6);
  z-index: var(--z-map);
  background-color: var(--color-navy-dark);
}

/* ── Leaflet overrides ────────────────────────────────────────── */

.leaflet-top.leaflet-right {
  top: var(--space-md);
  right: var(--space-md);
}

.leaflet-top.leaflet-left {
  top: var(--space-md);
  left: var(--space-md);
}

.leaflet-control-zoom {
  border: none !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
  box-shadow: var(--shadow-card) !important;
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  background-color: var(--color-navy) !important;
  color: var(--color-white) !important;
  border: none !important;
  font-size: 18px !important;
  line-height: 30px !important;
  width: 32px !important;
  height: 32px !important;
  transition: background-color var(--transition-fast) !important;
}

.leaflet-control-zoom-in:hover,
.leaflet-control-zoom-out:hover {
  background-color: var(--color-navy-mid) !important;
  color: var(--color-white) !important;
}

/* Leaflet attribution — keep but style subtly */
.leaflet-control-attribution {
  background-color: rgba(26, 46, 74, 0.8) !important;
  color: var(--color-grey-mid) !important;
  font-size: 10px !important;
}

.leaflet-control-attribution a {
  color: var(--color-grey-light) !important;
}

/* ── Fullscreen control ───────────────────────────────────────── */

.leaflet-control-fullscreen {
  border: none !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
  box-shadow: var(--shadow-card) !important;
}

.leaflet-control-fullscreen-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color: var(--color-navy) !important;
  color: var(--color-white) !important;
  border: none !important;
  width: 32px !important;
  height: 32px !important;
  transition: background-color var(--transition-fast) !important;
}

.leaflet-control-fullscreen-btn:hover {
  background-color: var(--color-navy-mid) !important;
  color: var(--color-white) !important;
}

/* ── Selected dot pulse animation ─────────────────────────────── */

@keyframes dot-pulse {
  0%   { opacity: 1;   transform: scale(1); }
  50%  { opacity: 0.6; transform: scale(1.3); }
  100% { opacity: 1;   transform: scale(1); }
}

/* Applied via JS to the SVG/canvas element of the selected marker's wrapper */
.marker--selected {
  animation: dot-pulse 1.6s ease-in-out infinite;
}

/* ── Mill marker (Tier 1 — custom DivIcon) ────────────────────── */

.mill-marker {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.mill-marker:hover {
  transform: scale(1.15) translateY(-2px);
}

.mill-marker--selected {
  transform: scale(1.3) translateY(-4px);
  filter: drop-shadow(0 0 6px rgba(232, 100, 42, 0.7));
}

/* Leaflet tooltip for mill names */
.leaflet-tooltip {
  background-color: var(--color-navy);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  box-shadow: var(--shadow-card);
  white-space: nowrap;
}

.leaflet-tooltip::before {
  border-top-color: var(--color-navy);
}