/* ── assets/dropdown.css ──────────────────────────────────────────────────────
   Targets dcc.Dropdown with className="yt-select".
   Dash 2.x uses React-Select v1 internally. Class names:
     .Select, .Select-control, .Select-multi-value-wrapper,
     .Select-placeholder, .Select-value, .Select-value-label,
     .Select-single-value, .Select-input, .Select-arrow-zone,
     .Select-arrow, .Select-menu-outer, .Select-menu, .Select-option
   Prefix #app gives specificity (1,1,x) which beats all Bootstrap rules.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Outer wrapper ───────────────────────────────────────────────────────── */
#app .yt-select,
#app .yt-select .dash-dropdown {
    background-color: #0d0d1a !important;
    color:            #00d4ff !important;
}

/* ── Inner .Select container ─────────────────────────────────────────────── */
#app .yt-select .Select,
#app .yt-select .Select.is-focused,
#app .yt-select .Select.is-open,
#app .yt-select .Select.is-pseudo-focused,
#app .yt-select .Select.has-value {
    background-color: #0d0d1a !important;
    color:            #00d4ff !important;
}

/* ── Control box (the visible "button" area) ─────────────────────────────── */
#app .yt-select .Select-control {
    background-color: #0d0d1a !important;
    border:           1px solid #0f3460 !important;
    border-radius:    4px !important;
    box-shadow:       none !important;
    color:            #00d4ff !important;
    cursor:           pointer !important;
}
#app .yt-select .Select.is-open    > .Select-control,
#app .yt-select .Select.is-focused > .Select-control {
    background-color: #0d0d1a !important;
    border-color:     #00d4ff !important;
    box-shadow:       none !important;
}

/* ── Multi-value wrapper ─────────────────────────────────────────────────── */
#app .yt-select .Select-multi-value-wrapper {
    background-color: #0d0d1a !important;
}

/* ── Placeholder text ────────────────────────────────────────────────────── */
#app .yt-select .Select-placeholder {
    color:            #484f58 !important;
    background-color: #0d0d1a !important;
}

/* ── Selected value — all variants used across React-Select / Dash builds ── */
#app .yt-select .Select-value,
#app .yt-select .Select-value-label,
#app .yt-select .Select-single-value {
    color:            #00d4ff !important;
    background-color: #0d0d1a !important;
}

/* ── Arrow zone ──────────────────────────────────────────────────────────── */
#app .yt-select .Select-arrow-zone {
    background-color: #0d0d1a !important;
}
#app .yt-select .Select-arrow {
    border-top-color: #8b949e !important;
}
#app .yt-select .Select.is-open .Select-arrow {
    border-top-color:    transparent !important;
    border-bottom-color: #8b949e !important;
}

/* ── Search input wrapper ────────────────────────────────────────────────── */
#app .yt-select .Select-input {
    background-color: #0d0d1a !important;
    border:           none !important;
    box-shadow:       none !important;
}

/* ── Autofill defeat keyframe ────────────────────────────────────────────── */
@keyframes yt-autofill-dark {
    from { background-color: #0d0d1a; color: #00d4ff; }
    to   { background-color: #0d0d1a; color: #00d4ff; }
}

/* ── Actual <input> inside the search wrapper ────────────────────────────── */
#app .yt-select .Select-input > input {
    background-color:        #0d0d1a !important;
    color:                   #00d4ff !important;
    -webkit-text-fill-color: #00d4ff !important;
    caret-color:             #00d4ff !important;
    border:                  none    !important;
    box-shadow:              none    !important;
    -webkit-box-shadow:      none    !important;
    outline:                 none    !important;
    animation-name:          yt-autofill-dark !important;
    animation-fill-mode:     both    !important;
    animation-duration:      9999s   !important;
}
#app .yt-select .Select-input > input:-webkit-autofill,
#app .yt-select .Select-input > input:-webkit-autofill:hover,
#app .yt-select .Select-input > input:-webkit-autofill:focus {
    -webkit-text-fill-color: #00d4ff !important;
    -webkit-box-shadow:      0 0 0px 1000px #0d0d1a inset !important;
}

/* ── Dropdown menu panel ─────────────────────────────────────────────────── */
#app .yt-select .Select-menu-outer {
    background-color: #0d0d1a !important;
    border:           1px solid #0f3460 !important;
    box-shadow:       0 4px 16px rgba(0,0,0,0.6) !important;
    z-index:          9999 !important;
}
#app .yt-select .Select-menu {
    background-color: #0d0d1a !important;
}

/* ── Option rows ─────────────────────────────────────────────────────────── */
#app .yt-select .Select-option {
    background-color: #0d0d1a !important;
    color:            #8b949e !important;
    font-family:      'Courier New', monospace !important;
    font-size:        11px !important;
}
#app .yt-select .Select-option.is-focused,
#app .yt-select .Select-option:hover {
    background-color: #0f3460 !important;
    color:            #00d4ff !important;
}
#app .yt-select .Select-option.is-selected {
    background-color: #0f3460 !important;
    color:            #00d4ff !important;
}
#app .yt-select .Select-option.is-disabled {
    color: #444466 !important;
}
#app .yt-select .Select-noresults {
    background-color: #0d0d1a !important;
    color:            #484f58 !important;
}

/* ── Panel toggle (Show/Hide checklist labels) ───────────────────────────── */
#app .yt-panel-toggle,
#app .yt-panel-toggle > div {
    background-color: transparent !important;
}
#app .yt-panel-toggle label,
#app .yt-panel-toggle > div > label {
    background-color: transparent !important;
    color:            #888 !important;
    font-family:      'Courier New', monospace !important;
    font-size:        12px !important;
    font-weight:      normal !important;
    cursor:           pointer !important;
    margin-bottom:    0 !important;
    padding:          0 !important;
}
#app .yt-panel-toggle label:hover,
#app .yt-panel-toggle > div > label:hover {
    color: #00d4ff !important;
}