/* ==========================================================================
   SIMULATOR & GPS TELEMETRY SPECIFIC STYLES
   Custom Leaflet Maps, Markers, HUD & Gauges
   ========================================================================== */

/* Leaflet Dark Mode Tiles & Map Container */
.leaflet-container {
  background-color: #060a12 !important;
  font-family: var(--font-main) !important;
}

/* Custom dark tile filter for clean night/cyber aesthetic */
.custom-dark-tiles .leaflet-tile {
  filter: brightness(0.7) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.65);
}

/* Custom Route Markers */
.marker-route-start {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.6);
  cursor: pointer;
}

.marker-route-end {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.6);
  cursor: pointer;
}

.marker-route-stop {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5);
  cursor: pointer;
}

/* Animated Vehicle Marker (Car / Van) */
.vehicle-live-marker {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s linear;
}

.vehicle-icon-inner {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: 2.5px solid #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 20px;
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.8), 0 4px 10px rgba(0, 0, 0, 0.5);
  z-index: 2;
  position: relative;
}

.vehicle-radar-wave {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(56, 189, 248, 0.7);
  animation: vehicleRadarPulse 1.8s ease-out infinite;
  z-index: 1;
}

@keyframes vehicleRadarPulse {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Custom Leaflet Popups */
.leaflet-popup-content-wrapper {
  background: rgba(15, 23, 42, 0.95) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  padding: 4px 8px !important;
}

.leaflet-popup-tip {
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.popup-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: #38bdf8;
  margin-bottom: 4px;
}

.popup-desc {
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.4;
}

/* Map Watermark / Overlay Banner */
.map-overlay-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 500;
  background: rgba(13, 21, 39, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 14px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.map-badge-icon {
  color: #38bdf8;
  font-size: 18px;
}

.map-badge-text {
  display: flex;
  flex-direction: column;
}

.map-badge-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.map-badge-sub {
  font-size: 0.65rem;
  color: #94a3b8;
  font-family: var(--font-mono);
}

/* Map Route Legend */
.map-legend-overlay {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 500;
  background: rgba(13, 21, 39, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 14px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.72rem;
  color: #cbd5e1;
}

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

.legend-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.legend-blue { background: #2563eb; }
.legend-green { background: #10b981; }
.legend-red { background: #ef4444; }
.legend-yellow { background: #f59e0b; }

/* Custom Range Slider styling for all browsers */
input[type=range].timeline-slider {
  background: linear-gradient(to right, #38bdf8 0%, #38bdf8 var(--slider-progress, 0%), rgba(255, 255, 255, 0.1) var(--slider-progress, 0%), rgba(255, 255, 255, 0.1) 100%);
}

/* Pulse animation on speed changes */
.speed-pulse {
  animation: speedGlow 0.4s ease-out;
}

@keyframes speedGlow {
  0% { text-shadow: 0 0 30px #38bdf8; transform: scale(1.04); }
  100% { text-shadow: 0 0 20px rgba(59, 130, 246, 0.5); transform: scale(1); }
}