/* ── Frosted Glass Dropdown (Dash 3.x / Radix-based) ── */

/* Force the Dash dropdown wrapper to shrink */
.dash-dropdown-wrapper {
    min-height: auto !important;
    height: auto !important;
}

/* Outer toggle / control */
.dash-dropdown .Select-control,
.dash-dropdown .dropdown .Select-control {
    min-height: 20px !important;
    height: 20px !important;
    padding: 0 4px !important;
    display: flex !important;
    align-items: center !important;
}

/* Inner text/value/input */
.dash-dropdown .Select-value,
.dash-dropdown .Select-value-label,
.dash-dropdown .Select-input,
.dash-dropdown .Select-placeholder {
    min-height: 0 !important;
    height: 20px !important;
    line-height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 10px !important;
}

/* Inner multi-value wrapper (for single select this also helps) */
.dash-dropdown .Select-value-wrapper {
    height: 20px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Dropdown content / popup */
.dash-dropdown-content {
    background: rgba(13, 17, 23, 0.6) !important;  /* frosted glass */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(48, 54, 61, 0.6) !important;
    border-radius: 3px !important;
    box-shadow: 0px 10px 38px -10px rgba(0,0,0,0.5), 0px 10px 20px -15px rgba(0,0,0,0.3);
    overflow-y: auto;
    z-index: 9999;
}

/* Options inside */
.dash-dropdown-content .Select-option {
    background-color: rgba(13, 17, 23, 0.5) !important;
    color: #6b7a99 !important;
    font-size: 11px !important;
    font-family: Verdana, sans-serif !important;
    padding: 5px 10px !important;
    cursor: pointer;
}

.dash-dropdown-content .Select-option:hover,
.dash-dropdown-content .Select-option.is-focused {
    background-color: rgba(22, 28, 40, 0.7) !important;
    color: #e8edf5 !important;
}

.dash-dropdown-content .Select-option.is-selected {
    background-color: rgba(31, 42, 61, 0.8) !important;
    color: #2eeaff !important;
}

/* ── Frosted Glass Dropdown Scrollbar ── */

/* Scrollbar track (background) */
.dash-dropdown-content::-webkit-scrollbar {
    width: 8px; /* narrow scrollbar */
}

/* Track background */
.dash-dropdown-content::-webkit-scrollbar-track {
    background: rgba(13, 17, 23, 0.3); /* semi-transparent dark */
    border-radius: 4px;
}

/* Scrollbar thumb */
.dash-dropdown-content::-webkit-scrollbar-thumb {
    background-color: rgba(96, 96, 96, 0.7); /* accent color */
    border-radius: 4px;
    border: 2px solid rgba(13, 17, 23, 0.3); /* space around thumb */
}

/* Scrollbar thumb hover */
.dash-dropdown-content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(46, 234, 255, 0.7); /* brighter on hover */
}

/* For Firefox */
.dash-dropdown-content {
    scrollbar-width: thin;           /* thin scrollbar */
    scrollbar-color: rgba(96, 96, 96, 0.7) rgba(13,17,23,0.3);
}