/* =============================================
   dark_dropdown.css — v6 (no blue value chips)
   ============================================= */

/* ─── CSS VARIABLES ─── */
.dark-dropdown,
.dash-dropdown-content {
    --Dash-Fill-Inverse-strong: #1e2a45;
    --Dash-Fill-Default:        #1a2335;
    --Dash-Text-Strong:         #ffffff;
    --Dash-Text-Muted:          #9aabca;
    --Dash-Stroke-Strong:       rgba(255,255,255,0.18);
}

/* ─── CLOSED CONTROL BOX ─── */
.dark-dropdown {
    background-color: #1a2335 !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 4px !important;
    color: white !important;
}
.dark-dropdown * {
    color: white !important;
}

/* ─── SELECTED VALUE — plain white text, no chip/bubble ─── */
.dark-dropdown .Select-value,
.dark-dropdown .dash-dropdown-value,
.dark-dropdown [class*="multiValue"],
.dark-dropdown [class*="singleValue"],
.dark-dropdown [class*="value"] {
    background-color: transparent !important;
    border: none !important;
    color: white !important;
    border-radius: 0 !important;
}
.dark-dropdown [class*="multiValue"] * { color: white !important; }

/* ─── PLACEHOLDER ─── */
.dark-dropdown .Select-placeholder,
.dark-dropdown .dash-dropdown-placeholder,
.dark-dropdown [class*="placeholder"] {
    color: #9aabca !important;
}

/* ─── ARROW / INDICATORS ─── */
.dark-dropdown .Select-arrow { border-top-color: #9aabca !important; }
.dark-dropdown [class*="dropdownIndicator"],
.dark-dropdown [class*="clearIndicator"] { color: #9aabca !important; }
.dark-dropdown [class*="indicatorSeparator"] {
    background-color: rgba(255,255,255,0.18) !important;
}
.dark-dropdown [class*="control"] {
    background-color: #1a2335 !important;
    border-color: rgba(255,255,255,0.18) !important;
    box-shadow: none !important;
}

/* ─── PORTALED POPUP CONTAINER ─── */
.dash-dropdown-content {
    background-color: #1e2a45 !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.6) !important;
    color: white !important;
}

/* ─── SEARCH BOX inside popup ─── */
.dash-dropdown-content input,
.dash-dropdown-content input[type="text"],
.dash-dropdown-content input[type="search"] {
    background-color: #11192e !important;
    color: white !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 3px !important;
}
.dash-dropdown-content input::placeholder { color: #6c7f9a !important; }

/* ─── OPTIONS LIST ─── */
.dash-options-list {
    background-color: #1e2a45 !important;
}

/* ─── INDIVIDUAL OPTIONS ─── */
.dash-options-list-option,
.dash-dropdown-option {
    background-color: #1e2a45 !important;
    color: #d0d9eb !important;
}
.dash-options-list-option:hover,
.dash-dropdown-option:hover {
    background-color: #263558 !important;
    color: white !important;
}
.dash-options-list-option.selected,
.dash-dropdown-option.selected,
.dash-options-list-option[aria-selected="true"],
.dash-dropdown-option[aria-selected="true"] {
    background-color: rgba(13,110,253,0.35) !important;
    color: white !important;
}

/* ─── SELECT ALL / DESELECT ALL header ─── */
.dash-dropdown-content [class*="select-all"],
.dash-dropdown-content [class*="selectAll"] {
    background-color: #1e2a45 !important;
    color: #9aabca !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* ─── CHECKBOXES ─── */
.dash-dropdown-content input[type="checkbox"] { accent-color: #0d6efd; }

/* ─── TIMEFRAME dbc.Select (native <select>) ─── */
select.form-select {
    background-color: #1a2335 !important;
    color: white !important;
    border-color: rgba(255,255,255,0.18) !important;
}
select.form-select option {
    background-color: #1e2a45 !important;
    color: white !important;
}

/* ─── SCROLLBAR ─── */
.dash-dropdown-content ::-webkit-scrollbar { width: 6px; }
.dash-dropdown-content ::-webkit-scrollbar-track { background: #1a2335; }
.dash-dropdown-content ::-webkit-scrollbar-thumb { background-color: #4a5a7a; border-radius: 3px; }