/* Scoped Dash dropdown fixes.
   Dash currently renders dcc.Dropdown with React Select v1 classes, while
   newer environments may use v2-style BEM classes. Keep both covered without
   applying global dark-theme overrides to every div that contains "option". */

:root {
    --dropdown-control-dark: rgba(255, 255, 255, 0.08);
    --dropdown-control-dark-hover: rgba(255, 255, 255, 0.12);
    --dropdown-control-border-dark: rgba(255, 255, 255, 0.18);
    --dropdown-menu-shadow: 0 12px 32px rgba(13, 27, 62, 0.22);
}

.top-navbar,
.top-navbar .container,
.top-navbar .container-fluid,
.top-navbar .navbar-row,
.top-navbar .navbar-section-center {
    overflow: visible !important;
}

.Select-menu-outer,
.Select__menu,
.Select__menu-portal,
div[class*="menu-portal"],
div[class*="MenuPortal"],
div[class*="menuPortal"] {
    z-index: 10050 !important;
}

/* Navbar company selector: dark control, light dropdown menu. */
#company-selector .Select-control,
.company-dropdown .Select-control,
#company-selector .Select__control,
.company-dropdown .Select__control {
    min-height: 40px !important;
    background: var(--dropdown-control-dark) !important;
    border: 1px solid var(--dropdown-control-border-dark) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

#company-selector .Select.is-focused > .Select-control,
#company-selector .Select.is-open > .Select-control,
.company-dropdown.is-focused > .Select-control,
.company-dropdown.is-open > .Select-control,
#company-selector .Select__control--is-focused,
#company-selector .Select__control--menu-is-open,
.company-dropdown .Select__control--is-focused,
.company-dropdown .Select__control--menu-is-open {
    background: var(--dropdown-control-dark-hover) !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
}

#company-selector .Select-value,
#company-selector .Select-value-label,
#company-selector .Select-input,
#company-selector .Select-input input,
#company-selector .Select__single-value,
#company-selector .Select__input input,
.company-dropdown .Select-value,
.company-dropdown .Select-value-label,
.company-dropdown .Select-input,
.company-dropdown .Select-input input,
.company-dropdown .Select__single-value,
.company-dropdown .Select__input input {
    color: #ffffff !important;
    background: transparent !important;
}

#company-selector .Select-placeholder,
.company-dropdown .Select-placeholder,
#company-selector .Select__placeholder,
.company-dropdown .Select__placeholder {
    color: rgba(255, 255, 255, 0.62) !important;
}

#company-selector .Select-arrow,
.company-dropdown .Select-arrow {
    border-color: rgba(255, 255, 255, 0.72) transparent transparent !important;
}

#company-selector .Select-menu-outer,
.company-dropdown .Select-menu-outer,
#company-selector .Select__menu,
.company-dropdown .Select__menu {
    margin-top: 6px !important;
    overflow: hidden !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--dropdown-menu-shadow) !important;
}

#company-selector .Select-menu,
.company-dropdown .Select-menu,
#company-selector .Select__menu-list,
.company-dropdown .Select__menu-list {
    background: var(--color-surface) !important;
    padding: 4px !important;
}

#company-selector .VirtualizedSelectOption,
#company-selector .Select-option,
#company-selector .Select__option,
.company-dropdown .VirtualizedSelectOption,
.company-dropdown .Select-option,
.company-dropdown .Select__option {
    display: flex !important;
    align-items: center !important;
    min-height: 40px !important;
    padding: 10px 12px !important;
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

#company-selector .VirtualizedSelectFocusedOption,
#company-selector .Select-option.is-focused,
#company-selector .Select__option--is-focused,
.company-dropdown .VirtualizedSelectFocusedOption,
.company-dropdown .Select-option.is-focused,
.company-dropdown .Select__option--is-focused {
    background: rgba(55, 81, 151, 0.08) !important;
    color: var(--color-primary) !important;
}

#company-selector .VirtualizedSelectSelectedOption,
#company-selector .Select-option.is-selected,
#company-selector .Select__option--is-selected,
.company-dropdown .VirtualizedSelectSelectedOption,
.company-dropdown .Select-option.is-selected,
.company-dropdown .Select__option--is-selected {
    background: rgba(55, 81, 151, 0.12) !important;
    color: var(--color-primary) !important;
    font-weight: 700 !important;
}

/* Page, modal, and filter dropdowns: light controls and high-contrast menus. */
.branded-dropdown .Select-control,
.custom-dropdown .Select-control,
.clean-dropdown .Select-control,
.cds-rating-dropdown .Select-control,
#modal-company-selector .Select-control,
#modal-company-cds-rating .Select-control,
#status-filter .Select-control,
.branded-dropdown .Select__control,
.custom-dropdown .Select__control,
.clean-dropdown .Select__control,
.cds-rating-dropdown .Select__control,
#modal-company-selector .Select__control,
#modal-company-cds-rating .Select__control,
#status-filter .Select__control {
    min-height: 38px !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

.branded-dropdown .Select-control:hover,
.custom-dropdown .Select-control:hover,
.clean-dropdown .Select-control:hover,
.cds-rating-dropdown .Select-control:hover,
#modal-company-selector .Select-control:hover,
#modal-company-cds-rating .Select-control:hover,
#status-filter .Select-control:hover {
    border-color: var(--color-primary-mid) !important;
}

.branded-dropdown .Select-value-label,
.custom-dropdown .Select-value-label,
.clean-dropdown .Select-value-label,
.cds-rating-dropdown .Select-value-label,
#modal-company-selector .Select-value-label,
#modal-company-cds-rating .Select-value-label,
#status-filter .Select-value-label,
.branded-dropdown .Select__single-value,
.custom-dropdown .Select__single-value,
.clean-dropdown .Select__single-value,
.cds-rating-dropdown .Select__single-value,
#modal-company-selector .Select__single-value,
#modal-company-cds-rating .Select__single-value,
#status-filter .Select__single-value {
    color: var(--color-text) !important;
}

.branded-dropdown .Select-menu-outer,
.custom-dropdown .Select-menu-outer,
.clean-dropdown .Select-menu-outer,
.cds-rating-dropdown .Select-menu-outer,
#modal-company-selector .Select-menu-outer,
#modal-company-cds-rating .Select-menu-outer,
#status-filter .Select-menu-outer,
.branded-dropdown .Select__menu,
.custom-dropdown .Select__menu,
.clean-dropdown .Select__menu,
.cds-rating-dropdown .Select__menu,
#modal-company-selector .Select__menu,
#modal-company-cds-rating .Select__menu,
#status-filter .Select__menu {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--dropdown-menu-shadow) !important;
}

.branded-dropdown .VirtualizedSelectOption,
.branded-dropdown .Select-option,
.branded-dropdown .Select__option,
.custom-dropdown .VirtualizedSelectOption,
.custom-dropdown .Select-option,
.custom-dropdown .Select__option,
.clean-dropdown .VirtualizedSelectOption,
.clean-dropdown .Select-option,
.clean-dropdown .Select__option,
.cds-rating-dropdown .VirtualizedSelectOption,
.cds-rating-dropdown .Select-option,
.cds-rating-dropdown .Select__option,
#modal-company-selector .VirtualizedSelectOption,
#modal-company-selector .Select-option,
#modal-company-selector .Select__option,
#modal-company-cds-rating .VirtualizedSelectOption,
#modal-company-cds-rating .Select-option,
#modal-company-cds-rating .Select__option,
#status-filter .VirtualizedSelectOption,
#status-filter .Select-option,
#status-filter .Select__option {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
}

.branded-dropdown .VirtualizedSelectFocusedOption,
.branded-dropdown .Select-option.is-focused,
.branded-dropdown .Select__option--is-focused,
.custom-dropdown .VirtualizedSelectFocusedOption,
.custom-dropdown .Select-option.is-focused,
.custom-dropdown .Select__option--is-focused,
.clean-dropdown .VirtualizedSelectFocusedOption,
.clean-dropdown .Select-option.is-focused,
.clean-dropdown .Select__option--is-focused,
.cds-rating-dropdown .VirtualizedSelectFocusedOption,
.cds-rating-dropdown .Select-option.is-focused,
.cds-rating-dropdown .Select__option--is-focused,
#modal-company-selector .VirtualizedSelectFocusedOption,
#modal-company-selector .Select-option.is-focused,
#modal-company-selector .Select__option--is-focused,
#modal-company-cds-rating .VirtualizedSelectFocusedOption,
#modal-company-cds-rating .Select-option.is-focused,
#modal-company-cds-rating .Select__option--is-focused,
#status-filter .VirtualizedSelectFocusedOption,
#status-filter .Select-option.is-focused,
#status-filter .Select__option--is-focused {
    background: rgba(55, 81, 151, 0.08) !important;
    color: var(--color-primary) !important;
}

.branded-dropdown .VirtualizedSelectSelectedOption,
.branded-dropdown .Select-option.is-selected,
.branded-dropdown .Select__option--is-selected,
.custom-dropdown .VirtualizedSelectSelectedOption,
.custom-dropdown .Select-option.is-selected,
.custom-dropdown .Select__option--is-selected,
.clean-dropdown .VirtualizedSelectSelectedOption,
.clean-dropdown .Select-option.is-selected,
.clean-dropdown .Select__option--is-selected,
.cds-rating-dropdown .VirtualizedSelectSelectedOption,
.cds-rating-dropdown .Select-option.is-selected,
.cds-rating-dropdown .Select__option--is-selected,
#modal-company-selector .VirtualizedSelectSelectedOption,
#modal-company-selector .Select-option.is-selected,
#modal-company-selector .Select__option--is-selected,
#modal-company-cds-rating .VirtualizedSelectSelectedOption,
#modal-company-cds-rating .Select-option.is-selected,
#modal-company-cds-rating .Select__option--is-selected,
#status-filter .VirtualizedSelectSelectedOption,
#status-filter .Select-option.is-selected,
#status-filter .Select__option--is-selected {
    background: rgba(55, 81, 151, 0.12) !important;
    color: var(--color-primary) !important;
    font-weight: 700 !important;
}