/**
 * Map Styles
 *
 * Styles for the Leaflet map and station markers.
 * Marker size: 12px diameter per README.
 */

/* Map container */
.map-container {
  position: fixed;
  top: 60px; /* Header height */
  left: 0;
  right: 0;
  bottom: 0;
}

#map {
  width: 100%;
  height: 100%;
}

/* Station markers */
.station-marker {
  width: var(--marker-size);
  height: var(--marker-size);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

/* Marker color classes */
.station-marker--green {
  background-color: var(--color-delay-green);
}

.station-marker--yellow {
  background-color: var(--color-delay-yellow);
}

.station-marker--orange {
  background-color: var(--color-delay-orange);
}

.station-marker--red {
  background-color: var(--color-delay-red);
}

.station-marker--unknown {
  background-color: var(--color-text-light);
}

/* Severe delay indicator - red border ring */
.station-marker--severe {
  box-shadow: 0 0 0 var(--marker-border-width) var(--color-severe);
}

/* Hover effect - scale 1.3x */
.station-marker:hover {
  transform: scale(1.3);
  z-index: var(--z-tooltip) !important;
}

/* Blinking animation */
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.station-marker--blinking {
  animation: blink var(--blink-duration) ease-in-out infinite;
}

/* Dimmed state (when hovering another marker) */
.station-marker--dimmed {
  opacity: 0.4;
}

/* Leaflet popup customization */
.leaflet-popup-content-wrapper {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.leaflet-popup-content {
  margin: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-family);
}

/* Tooltip content */
.marker-tooltip {
  min-width: 180px;
}

.marker-tooltip__name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-xs);
}

.marker-tooltip__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.marker-tooltip__stat {
  display: flex;
  justify-content: space-between;
}

.marker-tooltip__stat-value {
  font-weight: 500;
  color: var(--color-text);
}

.marker-tooltip__stat-value--warning {
  color: var(--color-delay-orange);
}

.marker-tooltip__stat-value--danger {
  color: var(--color-delay-red);
}

/* Map controls */
.leaflet-control-zoom {
  border-radius: var(--radius-md) !important;
  border: none !important;
  box-shadow: var(--shadow-md) !important;
}

.leaflet-control-zoom a {
  color: var(--color-text) !important;
  border-radius: var(--radius-sm) !important;
}

.leaflet-control-zoom a:hover {
  background-color: var(--color-bg-alt) !important;
}

/* Map attribution */
.leaflet-control-attribution {
  background-color: rgba(255, 255, 255, 0.8) !important;
  font-size: var(--font-size-xs);
}