/* =====================================================================
   Dark theme for Dash dcc.Dropdown — NUCLEAR edition.

   Targets EVERY known class used by Dash dropdown across versions:
   - Modern Dash (v2.14+): .dash-dropdown, .dash-options-list, etc.
   - Legacy react-select v1: .Select-*, .VirtualizedSelect*
   - CSS-in-JS generated: [class*="..."] attribute selectors
   ===================================================================== */

:root {
    --dd-bg:        #1a1d24;
    --dd-bg-alt:    #22262e;
    --dd-border:    #2e323a;
    --dd-text:      #e2e5eb;
    --dd-text-sec:  #9ca3af;
    --dd-text-mute: #6b7280;
    --dd-hover:     #2a2e38;
    --dd-accent:    #4f8ff7;
}

/* ══════════════════════════════════════════════════════════════════════
   NUCLEAR RULE: force dark on EVERYTHING inside .dash-dropdown
   This is the most important rule — catches all wrappers, divs, spans.
   ══════════════════════════════════════════════════════════════════════ */
.dash-dropdown *,
.dash-dropdown *::before,
.dash-dropdown *::after {
    background-color: var(--dd-bg-alt) !important;
    color: var(--dd-text-sec) !important;
    border-color: var(--dd-border) !important;
}

/* ── DROPDOWN CONTROL (the always-visible bar) ─────────────────── */
.Select-control,
.dash-dropdown .Select-control {
    background-color: var(--dd-bg-alt) !important;
    border: 1px solid var(--dd-border) !important;
    border-radius: 6px !important;
    color: var(--dd-text-sec) !important;
}
.Select.is-focused:not(.is-open) > .Select-control,
.Select.is-open > .Select-control {
    border-color: var(--dd-accent) !important;
    box-shadow: 0 0 0 2px rgba(79,143,247,0.18) !important;
    background-color: var(--dd-bg-alt) !important;
}
.Select-value-label   { color: var(--dd-text-sec) !important; }
.Select-placeholder   { color: var(--dd-text-mute) !important; }
.Select-input > input { color: var(--dd-text) !important; background: transparent !important; }
.Select-arrow         { border-color: var(--dd-text-mute) transparent transparent !important; }
.is-open .Select-arrow{ border-color: transparent transparent var(--dd-text-mute) !important; }
.Select-clear-zone    { color: var(--dd-text-mute) !important; }

/* ── SEARCH INPUT INSIDE DROPDOWN ──────────────────────────────── */
/* The search box is an <input> inside .Select-input inside .Select-control.
   Both the wrapper div AND the input itself must be forced dark. */
.Select-input,
.dash-dropdown .Select-input,
.Select-control .Select-input,
.Select .Select-input {
    background-color: var(--dd-bg-alt) !important;
    background: var(--dd-bg-alt) !important;
}
.Select-input > input,
.Select-input input,
.dash-dropdown input,
.dash-dropdown input[type="text"],
.dash-options-list input,
.dash-search-input,
.Select-control input,
.Select input {
    background-color: var(--dd-bg-alt) !important;
    background: var(--dd-bg-alt) !important;
    color: var(--dd-text) !important;
    border-color: var(--dd-border) !important;
    border: none !important;
    outline: none !important;
    caret-color: var(--dd-text) !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
}
.dash-dropdown input::placeholder,
.Select-input input::placeholder,
.Select input::placeholder {
    color: var(--dd-text-mute) !important;
    opacity: 1 !important;
}
/* The entire Select-control row when dropdown is open */
.Select.is-open .Select-control,
.Select.is-open .Select-control * {
    background-color: var(--dd-bg-alt) !important;
}

/* ── MULTI-SELECT CHIPS ─────────────────────────────────────────── */
.Select--multi .Select-value {
    background-color: rgba(79,143,247,0.18) !important;
    border: 1px solid rgba(79,143,247,0.40) !important;
    color: var(--dd-text) !important;
    border-radius: 4px !important;
}
.Select--multi .Select-value-icon {
    border-right: 1px solid rgba(79,143,247,0.40) !important;
}
.Select--multi .Select-value-icon:hover {
    background-color: rgba(248,113,113,0.20) !important;
    color: #f87171 !important;
}

/* ══════════════════════════════════════════════════════════════════
   MODERN DASH DROPDOWN MENU (the actual fix for the dropdown list)
   ══════════════════════════════════════════════════════════════════ */

/* ── MENU CONTAINER ─────────────────────────────────────────────── */
.dash-options-list,
.dash-options-list-virtualized {
    background-color: var(--dd-bg) !important;
    border: 1px solid var(--dd-border) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55) !important;
}

/* ── INDIVIDUAL OPTION ROWS ─────────────────────────────────────── */
.dash-options-list-option,
.dash-options-list-option-wrapper {
    background-color: var(--dd-bg) !important;
    color: var(--dd-text-sec) !important;
    cursor: pointer !important;
}

/* hover state */
.dash-options-list-option:hover,
.dash-options-list-option-wrapper:hover,
.dash-options-list-option:focus,
.dash-options-list-option-wrapper:focus {
    background-color: var(--dd-hover) !important;
    color: var(--dd-text) !important;
}

/* selected option */
.dash-options-list-option[aria-selected="true"],
.dash-options-list-option-wrapper[aria-selected="true"] {
    background-color: rgba(79,143,247,0.20) !important;
    color: var(--dd-accent) !important;
}

/* keyboard-focused option */
.dash-options-list-option[data-focused="true"],
.dash-options-list-option-wrapper[data-focused="true"] {
    background-color: var(--dd-hover) !important;
    color: var(--dd-text) !important;
}

/* option text — inherit from parent */
.dash-options-list-option-text {
    color: inherit !important;
    background-color: transparent !important;
}

/* checkbox (multi-select) */
.dash-options-list-option-checkbox {
    accent-color: var(--dd-accent) !important;
}

/* ── BRUTE-FORCE: all children inside menu ─────────────────────── */
.dash-options-list *,
.dash-options-list-virtualized * {
    background-color: var(--dd-bg) !important;
    color: var(--dd-text-sec) !important;
}
.dash-options-list *:hover,
.dash-options-list-virtualized *:hover {
    background-color: var(--dd-hover) !important;
    color: var(--dd-text) !important;
}

/* ── LEGACY react-select v1 classes (just in case) ──────────────── */
.Select-menu-outer,
.Select-menu {
    background-color: var(--dd-bg) !important;
    border-color: var(--dd-border) !important;
}
.VirtualizedSelectOption,
.Select-option {
    background-color: var(--dd-bg) !important;
    color: var(--dd-text-sec) !important;
}
.VirtualizedSelectFocusedOption,
.Select-option.is-focused {
    background-color: var(--dd-hover) !important;
    color: var(--dd-text) !important;
}

/* ── CSS-IN-JS ATTRIBUTE SELECTORS (react-select v2/v3/v5) ────── */
/* These target generated class names like css-1pahdxg-control */
[class*="-control"],
[class*="-menu"],
[class*="-menuList"],
[class*="-option"],
[class*="-singleValue"],
[class*="-placeholder"],
[class*="-input"],
[class*="-indicatorContainer"],
[class*="-indicatorSeparator"],
[class*="-valueContainer"],
[class*="-multiValue"],
[class*="-multiValueLabel"],
[class*="-multiValueRemove"] {
    /* Only apply inside .dash-dropdown to avoid breaking other elements */
}
.dash-dropdown [class*="-control"] {
    background-color: var(--dd-bg-alt) !important;
    border-color: var(--dd-border) !important;
}
.dash-dropdown [class*="-menu"] {
    background-color: var(--dd-bg) !important;
    border: 1px solid var(--dd-border) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55) !important;
}
.dash-dropdown [class*="-menuList"] {
    background-color: var(--dd-bg) !important;
}
.dash-dropdown [class*="-option"] {
    background-color: var(--dd-bg) !important;
    color: var(--dd-text-sec) !important;
}
.dash-dropdown [class*="-option"]:hover,
.dash-dropdown [class*="-option"][class*="isFocused"] {
    background-color: var(--dd-hover) !important;
    color: var(--dd-text) !important;
}
.dash-dropdown [class*="-option"][class*="isSelected"] {
    background-color: rgba(79,143,247,0.20) !important;
    color: var(--dd-accent) !important;
}
.dash-dropdown [class*="-singleValue"] {
    color: var(--dd-text-sec) !important;
}
.dash-dropdown [class*="-placeholder"] {
    color: var(--dd-text-mute) !important;
}
.dash-dropdown [class*="-input"] input,
.dash-dropdown [class*="-input"] {
    color: var(--dd-text) !important;
    background: transparent !important;
}
.dash-dropdown [class*="-indicatorSeparator"] {
    background-color: var(--dd-border) !important;
}
.dash-dropdown [class*="-indicatorContainer"] {
    color: var(--dd-text-mute) !important;
}
.dash-dropdown [class*="-valueContainer"] {
    background-color: var(--dd-bg-alt) !important;
    color: var(--dd-text-sec) !important;
}
.dash-dropdown [class*="-multiValue"] {
    background-color: rgba(79,143,247,0.18) !important;
    border: 1px solid rgba(79,143,247,0.40) !important;
    border-radius: 4px !important;
}
.dash-dropdown [class*="-multiValueLabel"] {
    color: var(--dd-text) !important;
}
.dash-dropdown [class*="-multiValueRemove"] {
    color: var(--dd-text-mute) !important;
}
.dash-dropdown [class*="-multiValueRemove"]:hover {
    background-color: rgba(248,113,113,0.20) !important;
    color: #f87171 !important;
}

/* ── SCROLLBAR INSIDE MENU ──────────────────────────────────────── */
.dash-options-list ::-webkit-scrollbar,
.dash-options-list-virtualized ::-webkit-scrollbar,
.dash-dropdown ::-webkit-scrollbar { width: 6px; }
.dash-options-list ::-webkit-scrollbar-track,
.dash-options-list-virtualized ::-webkit-scrollbar-track,
.dash-dropdown ::-webkit-scrollbar-track { background: var(--dd-bg); }
.dash-options-list ::-webkit-scrollbar-thumb,
.dash-options-list-virtualized ::-webkit-scrollbar-thumb,
.dash-dropdown ::-webkit-scrollbar-thumb {
    background: var(--dd-border); border-radius: 3px;
}

/* ── NO RESULTS MESSAGE ────────────────────────────────────────── */
.dash-dropdown [class*="-noOptionsMessage"],
.Select-noresults {
    background-color: var(--dd-bg) !important;
    color: var(--dd-text-mute) !important;
}

/* ══════════════════════════════════════════════════════════════════
   PASSWORD INPUT — text-shadow trick for visible dots on dark bg.
   Text itself is transparent; text-shadow renders the visible dots.
   Verdana has the largest, most centered password bullet glyph.
   ══════════════════════════════════════════════════════════════════ */
input[type="password"],
#login-pass input,
#login-pass {
    font-family: Verdana, Geneva, sans-serif !important;
    font-size: 18px !important;
    letter-spacing: 0.125em !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 0 #e2e5eb !important;
    caret-color: #e2e5eb !important;
}
input[type="password"]::placeholder,
#login-pass input::placeholder {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    letter-spacing: normal !important;
    color: #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
    text-shadow: none !important;
}