/**
 * Mapbox Custom Styles
 * Custom styling for Mapbox GL JS popups and markers
 */

/* Mapbox Popup Styling - Dark Theme */
.mapboxgl-popup-content {
  background-color: #1c1c1c !important;
  color: white !important;
  padding: 15px 20px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
  border: 1px solid #333 !important;
  min-width: 200px !important;
}

.mapboxgl-popup-content div,
.mapboxgl-popup-content p,
.mapboxgl-popup-content span,
.mapboxgl-popup-content strong,
.mapboxgl-popup-content h3,
.mapboxgl-popup-content h4 {
  color: white !important;
}

.mapboxgl-popup-tip {
  border-top-color: #1c1c1c !important;
}

.mapboxgl-popup-close-button {
  display: none !important;
}

/* Custom Marker Styles */
.custom-marker {
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  /* No transition on position to prevent lag when panning */
}

.custom-marker:hover {
  transform: scale(1.2);
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  /* Only transition the hover effects */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Mapbox Controls Styling */
.mapboxgl-ctrl-group {
  background: rgba(31, 41, 55, 0.95) !important;
  border: 1px solid rgba(100, 116, 139, 0.3) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

.mapboxgl-ctrl-group button {
  background-color: transparent !important;
  color: #e2e8f0 !important;
}

.mapboxgl-ctrl-group button:hover {
  background-color: rgba(100, 116, 139, 0.2) !important;
}

.mapboxgl-ctrl-group button + button {
  border-top: 1px solid rgba(100, 116, 139, 0.3) !important;
}

/* Mapbox Attribution */
.mapboxgl-ctrl-attrib {
  background-color: rgba(31, 41, 55, 0.8) !important;
  color: #94a3b8 !important;
  font-size: 10px !important;
}

.mapboxgl-ctrl-attrib a {
  color: #0ea5e9 !important;
}

/* Mapbox Logo */
.mapboxgl-ctrl-logo {
  opacity: 0.6 !important;
}

/* Map Container Styling */
.mapboxgl-map {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Ensure map containers have proper sizing */
#mini-map,
#danger-mini-map {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Setup map needs to inherit from parent .setup-map class */
#setup-map {
  position: relative;
  width: 100%;
  min-height: 450px; /* Ensure minimum height */
}

/* Loading state for maps */
.map-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background: rgba(31, 41, 55, 0.95);
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  color: white;
}

.map-loading .loading-spinner {
  margin: 0 auto 10px;
}