/* Ensure map container stays below navbar */
.leaflet-container {
  z-index: 1 !important;
}

/* Allow Leaflet to manage pane z-indexes naturally for dragging to work */
/* Removed forced z-index on .leaflet-pane to fix dragging issues */

.leaflet-top,
.leaflet-bottom {
  z-index: 401 !important;
}

/* Leaflet control styling to match neutral theme */
.leaflet-control-zoom a,
.leaflet-control-attribution {
  background-color: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  color: #171717 !important;
  font-weight: 300;
  font-size: 12px;
}

.leaflet-control-zoom a:hover {
  background-color: #f5f5f5 !important;
  border-color: #171717 !important;
}

.leaflet-control-attribution {
  background-color: rgba(255, 255, 255, 0.8) !important;
}

.leaflet-popup-content-wrapper {
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  font-weight: 300;
}

/* Make popups expand horizontally instead of wrapping text. */
.leaflet-popup,
.leaflet-popup-content-wrapper {
  max-width: 900px !important; /* allow wide popups when needed */
  width: auto !important;
  min-width: 160px !important;
  overflow: visible !important;
}

/* Prevent inner text from wrapping so the box grows instead */
.leaflet-popup-content {
  white-space: nowrap !important;
  display: inline-block !important; /* let width follow content */
  overflow: visible !important;
}

/* Ensure the popup tip isn't clipped when popup is wide */
.leaflet-popup-tip,
.leaflet-popup-tip-container {
  overflow: visible !important;
}

.leaflet-popup-tip {
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
}

.leaflet-container a.leaflet-popup-close-button {
  color: #737373 !important;
  font-weight: 300;
}

.leaflet-container a.leaflet-popup-close-button:hover {
  color: #171717 !important;
}

.leaflet-marker-icon,
.leaflet-marker-shadow {
  filter: grayscale(20%) brightness(95%);
}

.leaflet-marker-icon.route-distance-marker {
  width: 26px !important;
  height: 26px !important;
  background-color: rgba(255, 255, 255, 0.85) !important;
  border: 1.5px solid rgba(23, 23, 23, 0.4) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  color: #525252 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
  line-height: 1 !important;
}

/* Mobile-specific optimizations */
@media (max-width: 640px) {
  /* Improve touch targets */
  input[type="date"],
  input[type="time"],
  input[type="number"] {
    font-size: 16px; /* Prevents zoom on iOS */
    min-height: 44px; /* iOS recommended touch target size */
  }

  /* Ensure map controls are easily tappable */
  .leaflet-control-zoom a {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
  }

  /* Better scrolling on tables */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* Hide scrollbar on tables for cleaner look */
  .overflow-x-auto::-webkit-scrollbar {
    height: 4px;
  }

  .overflow-x-auto::-webkit-scrollbar-thumb {
    background-color: #d4d4d4;
    border-radius: 2px;
  }
}

/* Ensure touch-manipulation works */
.touch-manipulation {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* Temperature/label divIcons: compact dark pills */
.leaflet-marker-icon.temperature-label {
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  white-space: nowrap !important;
  display: inline-block !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.leaflet-marker-icon.temperature-label > div {
  display: inline-block !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.leaflet-marker-icon.sun-event-marker {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
}

.leaflet-marker-icon.sun-event-marker > div {
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.leaflet-marker-icon.sun-event-marker .sun-event-material-icon {
  font-family: 'Material Symbols Outlined';
  font-size: 18px;
  line-height: 1;
  color: #171717;
  font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24;
}