/* Map Controls CSS - Consistent styling for opacity sliders and legends across all map views */

/* Make map container relative for absolute positioning of children */
.map-container {
  position: relative;
}

/* Core map div positioning */
#coreMap {
  position: relative;
}

/* Style and position the opacity slider - positioned relative to the map */
.opacity-slider-container {
  position: absolute;
  bottom: 8px; /* Standard OL control bottom margin */
  left: 8px; /* Standard OL control left margin */
  background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
  padding: 5px;
  border-radius: 5px;
  z-index: 1000; /* Ensure it's above map controls */
  display: flex; /* Use flexbox for layout */
  align-items: center; /* Vertically center items */
  gap: 5px; /* Space between label and slider */
  font-size: 0.8em; /* Smaller font */
}

.opacity-slider-container input[type='range'] {
  cursor: pointer;
  width: 100px;
}

.opacity-slider-container label {
  margin-bottom: 0; /* Remove default margin */
  white-space: nowrap; /* Prevent label wrapping */
}

/* Style and position the vertical map legend - positioned as OpenLayers control */
.map-legend-container {
  position: absolute;
  top: 45px; /* Position below fullscreen control (8px + 37px fullscreen button height) */
  right: 8px; /* Standard OL control right margin */
  width: 31px; /* Standard legend width */
  max-height: 300px; /* Maximum height for legend */
  min-height: 80px; /* Minimum height for legend */
  background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
  margin: 0; /* No margin */
  padding: 4px; /* Small padding */
  border: none;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3); /* Standard OL control shadow */
  z-index: 1000; /* Ensure it's above map controls */
  display: none; /* Hidden by default */
  flex-direction: column; /* Vertical layout */
  overflow: visible; /* Allow value labels to show outside */
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out; /* Smooth transitions */
  cursor: pointer; /* Indicate interactivity */
}

.map-legend-container .legend-title {
  font-size: 0.7em;
  font-weight: bold;
  text-align: center;
  padding: 2px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  white-space: nowrap;
}

.map-legend-container .legend-item {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  flex-grow: 1;
  cursor: pointer;
  min-height: 2px; /* Ensure minimum visibility */
}

/* Map legend items container */
#map-legend-items {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Special positioning adjustments to avoid OpenLayers controls */
.opacity-slider-container.avoid-ol-controls {
  left: 45px; /* Move right to avoid zoom controls */
}

.map-legend-container.avoid-ol-controls {
  top: 80px; /* Move further down if additional controls are present */
}

/* Legend value labels that appear on hover */
.legend-value-label {
  font-family: 'Roboto Mono', monospace;
}

/* Hover effect for enhanced visibility */
.map-legend-container:hover {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}