/* Custom styles for map dropdowns */

/* Style for selected items in multi-select dropdowns - non-transparent background */
#map-point-select-dropdown .Select-value,
#image-layer-toggle .Select-value,
#map-point-select-dropdown .Select-value-label,
#image-layer-toggle .Select-value-label {
    background-color: rgba(33, 150, 243, 1) !important;  /* Solid blue background */
    color: white !important;
    border-radius: 3px;
    padding: 2px 8px;
    margin: 2px;
}

/* Ensure all text within selected values is white */
#map-point-select-dropdown .Select-value *,
#image-layer-toggle .Select-value *,
#map-point-select-dropdown .Select-value-label *,
#image-layer-toggle .Select-value-label * {
    color: white !important;
}

/* For newer Dash versions using react-select */
#map-point-select-dropdown .css-1rhbuit-multiValue,
#image-layer-toggle .css-1rhbuit-multiValue {
    background-color: rgba(33, 150, 243, 1) !important;  /* Solid blue background */
}

/* Multi-value label text - white color */
#map-point-select-dropdown .css-12jo7m5,
#image-layer-toggle .css-12jo7m5,
#map-point-select-dropdown [class*="multiValue"],
#image-layer-toggle [class*="multiValue"],
#map-point-select-dropdown [class*="MultiValue"],
#image-layer-toggle [class*="MultiValue"] {
    color: white !important;
}

/* Additional coverage for multi-value label */
#map-point-select-dropdown [class*="multiValueLabel"],
#image-layer-toggle [class*="multiValueLabel"],
#map-point-select-dropdown [class*="MultiValueLabel"],
#image-layer-toggle [class*="MultiValueLabel"] {
    color: white !important;
    background-color: transparent !important;
}

/* Remove button styling */
#map-point-select-dropdown .css-xb97g8,
#image-layer-toggle .css-xb97g8 {
    color: rgba(255, 255, 255, 0.8) !important;
}

#map-point-select-dropdown .css-xb97g8:hover,
#image-layer-toggle .css-xb97g8:hover {
    color: white !important;
}

/* Dropdown menu styling */
#map-point-select-dropdown .Select-menu-outer,
#image-layer-toggle .Select-menu-outer {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* For newer Dash versions */
#map-point-select-dropdown .css-26l3qy-menu,
#image-layer-toggle .css-26l3qy-menu {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

/* Dropdown option hover */
#map-point-select-dropdown .Select-option:hover,
#image-layer-toggle .Select-option:hover {
    background-color: rgba(33, 150, 243, 0.2) !important;
}

/* For newer Dash versions */
#map-point-select-dropdown .css-1n7v3ny-option:hover,
#image-layer-toggle .css-1n7v3ny-option:hover {
    background-color: rgba(33, 150, 243, 0.2) !important;
}

/* Selected option in dropdown menu */
#map-point-select-dropdown .Select-option.is-selected,
#image-layer-toggle .Select-option.is-selected {
    background-color: rgba(33, 150, 243, 0.3) !important;
}

/* For newer Dash versions */
#map-point-select-dropdown .css-9gakcf-option,
#image-layer-toggle .css-9gakcf-option {
    background-color: rgba(33, 150, 243, 0.3) !important;
}

/* Placeholder text */
#map-point-select-dropdown .Select-placeholder,
#image-layer-toggle .Select-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* For newer Dash versions */
#map-point-select-dropdown .css-1wa3eu0-placeholder,
#image-layer-toggle .css-1wa3eu0-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Input text color */
#map-point-select-dropdown input,
#image-layer-toggle input {
    color: white !important;
}

/* Control (main container) styling */
#map-point-select-dropdown .Select-control,
#image-layer-toggle .Select-control {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* For newer Dash versions */
#map-point-select-dropdown .css-1pahdxg-control,
#image-layer-toggle .css-1pahdxg-control {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Focused state */
#map-point-select-dropdown .Select-control.is-focused,
#image-layer-toggle .Select-control.is-focused {
    border-color: rgba(33, 150, 243, 0.8) !important;
    box-shadow: 0 0 0 1px rgba(33, 150, 243, 0.5) !important;
}

/* For newer Dash versions */
#map-point-select-dropdown .css-1pahdxg-control:hover,
#image-layer-toggle .css-1pahdxg-control:hover {
    border-color: rgba(33, 150, 243, 0.8) !important;
}