/* Minimal custom styles — most of the layout is Tailwind utilities. */

.stream-chart-panel + .stream-chart-panel {
  margin-top: 1rem;
}

/* --- Map pins --- */

.station-pin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1a56db;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
  position: relative;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  animation: pin-pulse 1.8s ease-in-out infinite;
}

.station-pin:hover {
  transform: scale(1.45);
  animation: none;
  box-shadow: 0 0 0 5px rgba(26, 86, 219, 0.45), 0 4px 12px rgba(0, 0, 0, 0.25);
}

.station-pin--offline {
  background: #9ca3af; /* gray-400 */
  box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
  animation: none;
  opacity: 0.75;
}
.station-pin--offline:hover {
  transform: scale(1.25);
  box-shadow: 0 0 0 4px rgba(156, 163, 175, 0.45), 0 4px 10px rgba(0, 0, 0, 0.2);
  opacity: 1;
}

@keyframes pin-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(26, 86, 219, 0.6), 0 2px 6px rgba(0, 0, 0, 0.2);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(26, 86, 219, 0), 0 2px 6px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(26, 86, 219, 0), 0 2px 6px rgba(0, 0, 0, 0.2);
  }
}

/* --- Leaflet popup (used as hover tooltip) --- */

.leaflet-popup-content-wrapper {
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.leaflet-popup-content {
  margin: 12px 16px;
}

/* Fade-in animation for popups */
.leaflet-popup.hover-popup {
  animation: popup-fade-in 180ms ease-out;
}

@keyframes popup-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Reset-view control --- */

.reset-view-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  color: #374151;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}
.reset-view-btn:hover {
  background: #f3f4f6;
  color: #1a56db;
}