/* ── assets/z_dropdown.css ───────────────────────────────────────────────────
   Styles dbc.Select / plain <select> elements with className="yt-select".
   These are standard HTML <select> elements — no React-Select, no injected
   inline styles, no specificity wars. Plain CSS wins unconditionally.
   ─────────────────────────────────────────────────────────────────────────── */

#app .yt-select,
#app select.yt-select,
#app .yt-select select {
    background-color: #0d0d1a !important;
    color:            #00d4ff !important;
    border:           1px solid #0f3460 !important;
    border-radius:    4px !important;
    font-family:      'Courier New', monospace !important;
    font-size:        11px !important;
    padding:          5px 8px !important;
    width:            100% !important;
    cursor:           pointer !important;
    outline:          none !important;
    box-shadow:       none !important;
    appearance:       auto !important;
    -webkit-appearance: auto !important;
}

#app .yt-select:focus,
#app select.yt-select:focus,
#app .yt-select select:focus {
    border-color: #00d4ff !important;
    box-shadow:   none !important;
    outline:      none !important;
}

#app .yt-select:hover,
#app select.yt-select:hover,
#app .yt-select select:hover {
    border-color: #00d4ff !important;
}

/* Option rows inside the native dropdown */
#app .yt-select option,
#app select.yt-select option,
#app .yt-select select option {
    background-color: #0d0d1a !important;
    color:            #8b949e !important;
    font-family:      'Courier New', monospace !important;
    font-size:        11px !important;
}

/* ── Panel toggle 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;
}