/* Structural defaults for SearchableSelect overlay content (teleported into OverlayHost).
   Apps may override via the public class contract and CSS variables. */
.elx-ui-searchable-select-overlay {
    --elx-ui-searchable-select-max-height: 20rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    max-height: var(--elx-ui-searchable-select-max-height);
    overflow: auto;
    overscroll-behavior: contain;
    text-align: left;
}

.elx-ui-searchable-select-overlay .elx-ui-searchable-select__listbox {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    text-align: left;
}

.elx-ui-searchable-select-overlay .elx-ui-searchable-select__status {
    padding: 0.5rem 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
    text-align: left;
}

.elx-ui-searchable-select-overlay .elx-ui-searchable-select__group {
    list-style: none;
    margin: 0;
    padding: 0;
}

.elx-ui-searchable-select-overlay .elx-ui-searchable-select__group-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.elx-ui-searchable-select-overlay .elx-ui-searchable-select__group-header {
    padding: 0.5rem 0.875rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--bs-secondary-color, #6c757d);
    text-align: left;
}

.elx-ui-searchable-select-overlay .elx-ui-searchable-select__option {
    display: block;
    margin: 0 0.25rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.375rem;
    cursor: pointer;
    color: var(--bs-body-color, #212529);
    transition: background-color 120ms ease, color 120ms ease;
    text-align: left;
}

.elx-ui-searchable-select-overlay .elx-ui-searchable-select__option:hover:not(.elx-ui-searchable-select__option--disabled) {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-emphasis-color, #111827);
}

.elx-ui-searchable-select-overlay .elx-ui-searchable-select__option--active {
    background-color: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-emphasis-color, #111827);
}

.elx-ui-searchable-select-overlay .elx-ui-searchable-select__option--selected {
    font-weight: 600;
    background-color: var(--bs-primary-bg-subtle, #cfe2ff);
    color: var(--bs-emphasis-color, #212529);
}

.elx-ui-searchable-select-overlay .elx-ui-searchable-select__option--selected:hover,
.elx-ui-searchable-select-overlay .elx-ui-searchable-select__option--selected.elx-ui-searchable-select__option--active {
    background-color: var(--bs-primary-bg-subtle, #cfe2ff);
    color: var(--bs-emphasis-color, #212529);
}

.elx-ui-searchable-select-overlay .elx-ui-searchable-select__option--disabled {
    color: var(--bs-secondary-color, #adb5bd);
    cursor: not-allowed;
}