/* =====================================================================
   DROPDOWN FIXES - Nuclear Dark Theme Override
   Version: 2024-11-25 v6 - Surgical Strike Edition

   CRITICAL: The previous versions were too aggressive with attribute
   selectors like div[class*="is-selected"] which matched controls
   instead of just options. This version is more surgical.
   ===================================================================== */

/* =========================== */
/* CSS CUSTOM PROPERTIES       */
/* =========================== */
:root {
    --dd-bg: #1e1e36;
    --dd-bg-hover: #2d2d4a;
    --dd-bg-menu: #252542;
    --dd-border: rgba(255, 255, 255, 0.12);
    --dd-border-focus: rgba(99, 102, 241, 0.5);
    --dd-text: #ffffff;
    --dd-text-muted: #718096;
    --dd-accent: #6366f1;
}

/* =========================== */
/* PORTAL Z-INDEX              */
/* =========================== */
div[class*="menu-portal"],
div[class*="MenuPortal"],
div[class*="menuPortal"] {
    z-index: 9999 !important;
}

/* =========================== */
/* NAVBAR OVERFLOW             */
/* =========================== */
.top-navbar,
.top-navbar .container,
.top-navbar .container-fluid {
    overflow: visible !important;
}

/* ================================================================== */
/* CRITICAL FIX: React-Select v1 Style Classes                        */
/* The purple background is on .Select-value and .Select-value-label  */
/* These are the OLD react-select class names (no double underscore)  */
/* ================================================================== */

.Select-value,
.Select-value-label,
span.Select-value-label {
    background-color: transparent !important;
    color: var(--dd-text) !important;
}

/* More specific selectors for modal dropdowns */
#modal-company-selector .Select-value,
#modal-company-selector .Select-value-label,
#modal-company-cds-rating .Select-value,
#modal-company-cds-rating .Select-value-label,
#company-selector .Select-value,
#company-selector .Select-value-label,
.custom-dropdown .Select-value,
.custom-dropdown .Select-value-label,
.cds-rating-dropdown .Select-value,
.cds-rating-dropdown .Select-value-label {
    background-color: transparent !important;
    color: var(--dd-text) !important;
}

/* Target by ID pattern for dynamically generated IDs */
span[id*="--value-item"],
span[id^="react-select"][id*="value"] {
    background-color: transparent !important;
    color: var(--dd-text) !important;
}

/* Ensure the Select-multi-value-wrapper is also transparent */
.Select-multi-value-wrapper {
    background-color: transparent !important;
}

/* NAVBAR COMPANY DROPDOWN - Most specific selectors */
.company-dropdown .Select-value,
.company-dropdown .Select-value-label,
.company-dropdown span.Select-value-label,
.company-dropdown .Select-multi-value-wrapper,
#company-selector .Select-value,
#company-selector .Select-value-label,
#company-selector span.Select-value-label,
#company-selector .Select-multi-value-wrapper,
.navbar-section-center .Select-value,
.navbar-section-center .Select-value-label,
.top-navbar .Select-value,
.top-navbar .Select-value-label {
    background-color: transparent !important;
    color: var(--dd-text) !important;
}

/* Nuclear override for ALL Select-value elements everywhere */
.Select.has-value .Select-value,
.Select.has-value .Select-value-label,
.Select--single.has-value .Select-value,
.Select--single.has-value .Select-value-label {
    background-color: transparent !important;
    color: var(--dd-text) !important;
}

/* ================================================================== */
/* CONTROL STYLING - The main dropdown box                            */
/* These must NOT have accent colors - only dark backgrounds          */
/* ================================================================== */

/* Target controls specifically - NOT options */
.Select__control,
div[class$="control"],
div[class*="-control"]:not([class*="option"]) {
    background-color: var(--dd-bg) !important;
    border: 1px solid var(--dd-border) !important;
    border-radius: 8px !important;
    min-height: 38px !important;
    box-shadow: none !important;
}

/* Control hover - still dark, just different border */
.Select__control:hover,
div[class$="control"]:hover,
div[class*="-control"]:not([class*="option"]):hover {
    background-color: var(--dd-bg) !important;
    border-color: var(--dd-border-focus) !important;
}

/* Control focused - dark with accent border only */
.Select__control--is-focused,
.Select__control--menu-is-open,
div[class*="control"][class*="focused"],
div[class*="control"][class*="Focused"] {
    background-color: var(--dd-bg) !important;
    border-color: var(--dd-accent) !important;
    box-shadow: 0 0 0 1px var(--dd-accent) !important;
}

/* CRITICAL: Control with value should NOT get accent background */
.Select__control--has-value,
div[class*="control"][class*="has-value"],
div[class*="control"][class*="hasValue"] {
    background-color: var(--dd-bg) !important;
}

/* ================================================================== */
/* VALUE CONTAINER & SINGLE VALUE                                     */
/* These should be transparent with white text                        */
/* ================================================================== */

.Select__value-container,
div[class*="ValueContainer"],
div[class*="valueContainer"],
div[class$="value-container"] {
    background-color: transparent !important;
    color: var(--dd-text) !important;
}

.Select__single-value,
div[class*="singleValue"],
div[class*="SingleValue"],
div[class$="single-value"] {
    color: var(--dd-text) !important;
    background-color: transparent !important;
}

.Select__placeholder,
div[class*="placeholder"],
div[class*="Placeholder"] {
    color: var(--dd-text-muted) !important;
    background-color: transparent !important;
}

/* ================================================================== */
/* INPUT                                                              */
/* ================================================================== */

.Select__input-container,
div[class*="Input"] {
    color: var(--dd-text) !important;
    background-color: transparent !important;
}

.Select__input-container input,
div[class*="Input"] input {
    color: var(--dd-text) !important;
}

/* ================================================================== */
/* INDICATORS                                                         */
/* ================================================================== */

.Select__indicators,
div[class*="indicators"],
div[class*="Indicators"] {
    background-color: transparent !important;
}

.Select__indicator,
.Select__dropdown-indicator,
.Select__clear-indicator,
div[class*="indicator"]:not([class*="Separator"]),
div[class*="Indicator"]:not([class*="Separator"]) {
    color: var(--dd-text-muted) !important;
    background-color: transparent !important;
}

.Select__indicator-separator,
div[class*="indicatorSeparator"],
div[class*="IndicatorSeparator"] {
    display: none !important;
}

/* ================================================================== */
/* MENU - The dropdown list container                                 */
/* ================================================================== */

.Select__menu,
div[class$="menu"]:not([class*="portal"]):not([class*="Portal"]),
div[class*="-menu"]:not([class*="portal"]):not([class*="Portal"]) {
    background-color: var(--dd-bg-menu) !important;
    border: 1px solid var(--dd-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    z-index: 9999 !important;
    margin-top: 4px !important;
}

.Select__menu-list,
div[class*="menuList"],
div[class*="MenuList"] {
    background-color: var(--dd-bg-menu) !important;
    padding: 4px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
}

/* ================================================================== */
/* OPTIONS - Individual items in the dropdown                         */
/* ONLY these should get accent colors when selected                  */
/* ================================================================== */

.Select__option,
div[class$="option"],
div[class*="-option"] {
    background-color: transparent !important;
    color: var(--dd-text) !important;
    padding: 10px 12px !important;
    cursor: pointer !important;
    border-radius: 4px !important;
}

/* Option hover - subtle highlight */
.Select__option:hover,
div[class$="option"]:hover,
div[class*="-option"]:hover {
    background-color: var(--dd-bg-hover) !important;
    color: var(--dd-text) !important;
}

/* Option focused - subtle highlight */
.Select__option--is-focused,
div[class*="option"][class*="focused"],
div[class*="option"][class*="Focused"] {
    background-color: var(--dd-bg-hover) !important;
    color: var(--dd-text) !important;
}

/* Option SELECTED - THIS is where accent color goes */
.Select__option--is-selected,
div[class*="option"][class*="selected"],
div[class*="option"][class*="Selected"] {
    background-color: var(--dd-accent) !important;
    color: #ffffff !important;
}

/* Selected option hover */
.Select__option--is-selected:hover,
div[class*="option"][class*="selected"]:hover,
div[class*="option"][class*="Selected"]:hover {
    background-color: #818cf8 !important;
    color: #ffffff !important;
}

/* ================================================================== */
/* ID-SPECIFIC OVERRIDES - Maximum specificity                        */
/* ================================================================== */

/* Status filter */
#status-filter .Select__control,
#status-filter div[class*="-control"] {
    background-color: var(--dd-bg) !important;
    border: 1px solid var(--dd-border) !important;
}

/* Modal company selector */
#modal-company-selector .Select__control,
#modal-company-selector div[class*="-control"] {
    background-color: var(--dd-bg) !important;
    border: 1px solid var(--dd-border) !important;
    min-height: 42px !important;
}

#modal-company-selector .Select__menu,
#modal-company-selector div[class*="-menu"]:not([class*="portal"]) {
    background-color: var(--dd-bg-menu) !important;
    max-height: 300px !important;
}

#modal-company-selector .Select__menu-list,
#modal-company-selector div[class*="menuList"] {
    max-height: 280px !important;
}

/* Modal CDS rating dropdown - CRITICAL: control must be dark */
#modal-company-cds-rating .Select__control,
#modal-company-cds-rating div[class*="-control"] {
    background-color: var(--dd-bg) !important;
    border: 1px solid var(--dd-border) !important;
    min-height: 36px !important;
}

#modal-company-cds-rating .Select__single-value,
#modal-company-cds-rating div[class*="singleValue"] {
    color: var(--dd-text) !important;
    font-weight: 600 !important;
}

#modal-company-cds-rating .Select__value-container,
#modal-company-cds-rating div[class*="ValueContainer"] {
    justify-content: center !important;
}

#modal-company-cds-rating .Select__menu,
#modal-company-cds-rating div[class*="-menu"]:not([class*="portal"]) {
    background-color: var(--dd-bg-menu) !important;
}

/* Counterparty CDS dropdowns */
div[id*="counterparty-cds"] .Select__control,
div[id*="counterparty-cds"] div[class*="-control"] {
    background-color: var(--dd-bg) !important;
    border: 1px solid var(--dd-border) !important;
}

div[id*="counterparty-cds"] .Select__single-value,
div[id*="counterparty-cds"] div[class*="singleValue"] {
    color: var(--dd-text) !important;
    font-weight: 600 !important;
}

/* Company dropdown in navbar */
#company-selector .Select__control,
#company-selector div[class*="-control"],
.company-dropdown .Select__control,
.company-dropdown div[class*="-control"] {
    background-color: var(--dd-bg) !important;
    border: 1px solid var(--dd-border) !important;
    min-height: 42px !important;
}

#company-selector .Select__value-container,
.company-dropdown .Select__value-container {
    justify-content: center !important;
}

#company-selector .Select__single-value,
.company-dropdown .Select__single-value {
    color: var(--dd-text) !important;
    text-align: center !important;
}

/* ================================================================== */
/* CLASS-BASED TARGETING                                              */
/* ================================================================== */

.custom-dropdown .Select__control,
.custom-dropdown div[class*="-control"] {
    background-color: var(--dd-bg) !important;
    border: 1px solid var(--dd-border) !important;
    border-radius: 8px !important;
}

.custom-dropdown .Select__menu,
.custom-dropdown div[class*="-menu"]:not([class*="portal"]) {
    background-color: var(--dd-bg-menu) !important;
    border: 1px solid var(--dd-border) !important;
}

.cds-rating-dropdown .Select__control,
.cds-rating-dropdown div[class*="-control"] {
    background-color: var(--dd-bg) !important;
    min-height: 36px !important;
}

.cds-rating-dropdown .Select__value-container,
.cds-rating-dropdown div[class*="ValueContainer"] {
    justify-content: center !important;
    padding: 2px 6px !important;
}

.cds-rating-dropdown .Select__single-value,
.cds-rating-dropdown div[class*="singleValue"] {
    font-weight: 600 !important;
}

/* ================================================================== */
/* CLEANUP - Ensure nested elements don't get wrong backgrounds       */
/* ================================================================== */

/* All nested elements in controls should be transparent */
.Select__control *,
div[class*="-control"] * {
    background-color: transparent !important;
}

/* All nested elements in value containers should be transparent */
.Select__value-container *,
div[class*="ValueContainer"] * {
    background-color: transparent !important;
}

/* Menu backgrounds */
.Select__menu *,
div[class*="-menu"]:not([class*="portal"]) * {
    background-color: transparent !important;
}

/* But menu and menu-list need their own background */
.Select__menu,
.Select__menu-list,
div[class*="-menu"]:not([class*="portal"]),
div[class*="menuList"] {
    background-color: var(--dd-bg-menu) !important;
}

/* And selected options need accent - be very specific */
.Select__option--is-selected,
.Select__option--is-selected *,
div[class*="option"][class*="selected"],
div[class*="option"][class*="selected"] *,
div[class*="option"][class*="Selected"],
div[class*="option"][class*="Selected"] * {
    background-color: var(--dd-accent) !important;
}

/* ================================================================== */
/* BOOTSTRAP/FRAMEWORK INTERFERENCE                                    */
/* ================================================================== */

.custom-dropdown > div,
.cds-rating-dropdown > div,
#modal-company-selector > div,
#modal-company-cds-rating > div,
#status-filter > div {
    background-color: transparent !important;
}

/* ================================================================== */
/* FIX: Ensure the Select wrapper itself is transparent               */
/* ================================================================== */

.Select,
.Select--single,
.Select--multi,
div[class*="Select--"],
div[class^="css-"][role="combobox"] {
    background-color: transparent !important;
}

/* The outer wrapper div */
.Select > div:first-child,
div[class*="Select"] > div:first-child {
    background-color: transparent !important;
}