/* ═══════════════════════════════════════════
   Leaflet map overrides — match agrodat.md visual treatment.
   Leaflet CSS is loaded globally in base.html; these rules
   adapt zoom controls, popups, tooltips, and marker pins.
   ═══════════════════════════════════════════ */

.leaflet-container {
  font-family: 'Rubik', sans-serif;
  background: var(--surface-raised);
}

.leaflet-control-zoom {
  margin: 0 12px 12px 0 !important;
  border: 0 !important;
  border-radius: var(--radius-row) !important;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.18);
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  font-size: 0 !important;
  background-color: var(--white-90) !important;
  border: 0 !important;
  color: var(--text-secondary);
  transition: background-color 0.15s ease-out;
}

.leaflet-control-zoom-in:hover,
.leaflet-control-zoom-out:hover {
  background-color: var(--text-on-primary) !important;
  color: var(--primary);
}

.leaflet-control-zoom-in {
  border-bottom: 1px solid rgba(var(--shadow-rgb), 0.08) !important;
}

.leaflet-control-zoom-in::before,
.leaflet-control-zoom-out::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.leaflet-control-zoom-in::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M15.857 10.9524H11.0951V15.7143C11.0951 16.2381 10.6666 16.6666 10.1427 16.6666C9.61893 16.6666 9.19036 16.2381 9.19036 15.7143V10.9524H4.42846C3.90465 10.9524 3.47607 10.5238 3.47607 9.99998C3.47607 9.47617 3.90465 9.0476 4.42846 9.0476H9.19036V4.28569C9.19036 3.76188 9.61893 3.33331 10.1427 3.33331C10.6666 3.33331 11.0951 3.76188 11.0951 4.28569V9.0476H15.857C16.3808 9.0476 16.8094 9.47617 16.8094 9.99998C16.8094 10.5238 16.3808 10.9524 15.857 10.9524Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M15.857 10.9524H11.0951V15.7143C11.0951 16.2381 10.6666 16.6666 10.1427 16.6666C9.61893 16.6666 9.19036 16.2381 9.19036 15.7143V10.9524H4.42846C3.90465 10.9524 3.47607 10.5238 3.47607 9.99998C3.47607 9.47617 3.90465 9.0476 4.42846 9.0476H9.19036V4.28569C9.19036 3.76188 9.61893 3.33331 10.1427 3.33331C10.6666 3.33331 11.0951 3.76188 11.0951 4.28569V9.0476H15.857C16.3808 9.0476 16.8094 9.47617 16.8094 9.99998C16.8094 10.5238 16.3808 10.9524 15.857 10.9524Z' fill='black'/></svg>");
}

.leaflet-control-zoom-out::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M4.27887 11.3945C3.67774 11.3945 3.19043 10.9072 3.19043 10.3061C3.19043 9.70496 3.67774 9.21765 4.27887 9.21765H15.4353C16.0365 9.21765 16.5238 9.70496 16.5238 10.3061C16.5238 10.9072 16.0365 11.3945 15.4353 11.3945H4.27887Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M4.27887 11.3945C3.67774 11.3945 3.19043 10.9072 3.19043 10.3061C3.19043 9.70496 3.67774 9.21765 4.27887 9.21765H15.4353C16.0365 9.21765 16.5238 9.70496 16.5238 10.3061C16.5238 10.9072 16.0365 11.3945 15.4353 11.3945H4.27887Z' fill='black'/></svg>");
}



.leaflet-control-zoom a.leaflet-disabled {
  color: var(--text-muted);
  cursor: default;
}

.leaflet-popup-content-wrapper {
  background: var(--white-92) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.18) !important;
  padding: var(--space-1);
}

.leaflet-popup-content {
  margin: 10px 14px !important;
  font-size: var(--text-sm) !important;
  line-height: 1.4 !important;
}

.leaflet-popup-tip {
  background: var(--white-92) !important;
  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.12);
}

.leaflet-tooltip {
  padding: 5px var(--space-3) !important;
  font-size: var(--text-sm) !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  background: var(--white-92) !important;
  border-radius: var(--radius-card) !important;
  border: 0 !important;
  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.15) !important;
  color: var(--text-primary) !important;
}

.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
  display: none;
}

.station-marker-pin {
  width: 18px;
  height: 26px;
}

.station-marker-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter:
    drop-shadow(0 0 1.5px var(--text-on-primary))
    drop-shadow(0 0 2.5px rgba(var(--shadow-rgb), 0.3))
    drop-shadow(0 2px 4px rgba(var(--shadow-rgb), 0.35));
}

.station-marker-pin.moved .station-marker-svg {
  filter:
    drop-shadow(0 0 4px var(--warning-70))
    drop-shadow(0 2px 4px rgba(var(--shadow-rgb), 0.35));
}

.station-marker-shape {
  fill: var(--marker-color, var(--primary));
  stroke: var(--text-on-primary);
  stroke-width: 1.5;
  stroke-linejoin: round;
  paint-order: stroke;
}

[data-theme="dark"] .station-marker-svg {
  filter:
    drop-shadow(0 0 1.5px var(--text-on-primary))
    drop-shadow(0 0 2.5px rgba(var(--shadow-rgb), 0.55))
    drop-shadow(0 2px 5px rgba(var(--shadow-rgb), 0.6));
}

[data-theme="dark"] .station-marker-pin.moved .station-marker-svg {
  filter:
    drop-shadow(0 0 4px var(--warning-70))
    drop-shadow(0 2px 5px rgba(var(--shadow-rgb), 0.6));
}

[data-theme="dark"] .leaflet-control-zoom {
  box-shadow: 0 2px 12px rgba(var(--shadow-rgb), 0.55) !important;
}

[data-theme="dark"] .leaflet-control-zoom a {
  background-color: var(--surface-dark-96) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--white-08) !important;
}

[data-theme="dark"] .leaflet-control-zoom a:hover {
  background-color: var(--surface-elevated-100) !important;
  color: var(--primary) !important;
}

[data-theme="dark"] .leaflet-control-zoom a.leaflet-disabled {
  color: var(--neutral-overlay-35) !important;
  background-color: var(--surface-dark-70) !important;
}

[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .leaflet-popup-tip,
[data-theme="dark"] .leaflet-tooltip {
  background: var(--surface-elevated-96) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .leaflet-tooltip-top:before,
[data-theme="dark"] .leaflet-tooltip-bottom:before,
[data-theme="dark"] .leaflet-tooltip-left:before,
[data-theme="dark"] .leaflet-tooltip-right:before {
  display: none;
}

[data-theme="dark"] .station-marker-pin {
  border-color: var(--bg-elevated);
}

.stations-map {
  width: 100%;
  height: 560px;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  margin-top: var(--space-2);
}

.map-wrapper {
  position: relative;
}

.map-legend-overlay {
  position: absolute;
  top: 16px;
  left: 12px;
  z-index: 1000;
  pointer-events: auto;
}

.map-legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-row);
  font-size: var(--text-2xs);
  font-weight: 500;
  color: var(--text-secondary);
  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.18);
  white-space: nowrap;
}

.map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.map-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.map-legend-dot.online { background: var(--success); }
.map-legend-dot.offline { background: var(--danger); }
.map-legend-dot.decommissioned { background: var(--text-muted); }
.map-legend-dot.moved {
  background: var(--warning);
}

.geometry-map {
  width: 100%;
  height: 320px;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border-light);
  background: var(--surface-raised);
  isolation: isolate;
}

.station-popup-link {
  display: inline-block;
  margin-top: var(--space-2);
  color: var(--primary);
  font-weight: 500;
}

.station-popup-link:hover {
  text-decoration: underline;
}

.station-popup-id {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--text-2xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.station-popup {
  font-size: var(--text-sm);
  min-width: 180px;
}

.station-popup-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}

.station-popup-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
}

.station-popup-status-label {
  font-weight: 500;
}

.station-tooltip {
  background: var(--white-92);
  border: 0;
  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.18);
  padding: 0;
}

.station-tooltip-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.station-tooltip-name::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pin-color, var(--primary));
  border: 1.5px solid var(--text-on-primary);
  box-shadow: 0 0 0 1px rgba(var(--shadow-rgb), 0.12);
  flex-shrink: 0;
}

.station-popup-wrapper .leaflet-popup-content-wrapper {
  background: var(--white-96);
}

[data-theme="dark"] .station-popup-wrapper .leaflet-popup-content-wrapper {
  background: var(--surface-elevated-96);
}

.leaflet-basemap-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6);
  text-align: center;
  background: var(--surface);
  color: var(--text-primary);
  z-index: 500;
}

.leaflet-basemap-error__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--danger);
}

.leaflet-basemap-error__detail {
  font-size: var(--text-xs);
  color: var(--text-muted);
  max-width: 360px;
  line-height: 1.5;
}