/*
 * assets/dropdown.css
 * ───────────────────────────────────────────────────────────────────────────
 * Fixes invisible search text inside dcc.Dropdown on dark (CYBORG) theme.
 *
 * Dash renders dcc.Dropdown as a React-Select component. The live search
 * input sits inside:
 *   .dash-dropdown .Select-input > input      (react-select v1 / Dash <2.9)
 *   .dash-dropdown input[type="text"]          (react-select v2+ / Dash ≥2.9)
 *   .dash-dropdown .VirtualizedSelectFocusedOption (focused option row)
 *
 * Bootstrap CYBORG sets body color to ~#adafae on a near-black background,
 * but the Select input inherits a transparent or white background which
 * causes the typed text to be invisible.
 * ───────────────────────────────────────────────────────────────────────────
 */

/* ── Outer container ─────────────────────────────────────────────────────── */
.dash-dropdown .Select-control,
.dash-dropdown .Select--single > .Select-control {
    background-color: #1a1d26 !important;
    border: 1px solid #2e3147 !important;
    border-radius: 4px !important;
    color: #c8d0e0 !important;
}

/* ── The live-search <input> — this is the invisible text fix ────────────── */
.dash-dropdown .Select-input > input,
.dash-dropdown input[type="text"],
.dash-dropdown input {
    color: #c8d0e0 !important;
    background: transparent !important;
    caret-color: #4a90d9 !important;   /* visible cursor */
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
}

/* ── Placeholder text ────────────────────────────────────────────────────── */
.dash-dropdown .Select-placeholder,
.dash-dropdown .Select--single .Select-value-label {
    color: #4a5168 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
}

/* ── Currently selected value label ─────────────────────────────────────── */
.dash-dropdown .Select-value-label {
    color: #c8d0e0 !important;
}

/* ── Dropdown menu panel ─────────────────────────────────────────────────── */
.dash-dropdown .Select-menu-outer {
    background-color: #13161f !important;
    border: 1px solid #2e3147 !important;
    border-top: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7) !important;
    z-index: 9999 !important;
}

.dash-dropdown .Select-menu {
    background-color: #13161f !important;
}

/* ── Individual option rows ──────────────────────────────────────────────── */
.dash-dropdown .Select-option {
    background-color: #13161f !important;
    color: #8892a4 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    /* padding: 8px 12px !important; */
}

.dash-dropdown .Select-option:hover,
.dash-dropdown .Select-option.is-focused {
    background-color: #1a1d26 !important;
    color: #c8d0e0 !important;
}

.dash-dropdown .Select-option.is-selected {
    background-color: #1e2a3a !important;
    color: #4a90d9 !important;
}

/* ── Arrow / clear icons ─────────────────────────────────────────────────── */
.dash-dropdown .Select-arrow-zone,
.dash-dropdown .Select-clear-zone {
    color: #4a5168 !important;
}

.dash-dropdown .Select-arrow-zone:hover,
.dash-dropdown .Select-clear-zone:hover {
    color: #8892a4 !important;
}

/* ── Focus ring ──────────────────────────────────────────────────────────── */
.dash-dropdown .Select-control:hover,
.dash-dropdown.is-focused .Select-control,
.dash-dropdown.is-open .Select-control {
    border-color: #4a90d9 !important;
    box-shadow: 0 0 0 1px #4a90d9 !important;
}