/* =============================================================================
   Pill-shaped sidebar dropdowns
   ============================================================================= */

/* Target only sidebar dropdowns via the wrapper class */
.pill-dropdown .Select-control,
.pill-dropdown .Select-multi-value-wrapper,
.pill-dropdown .Select--single > .Select-control,
.pill-dropdown .css-13cymwt-control,
.pill-dropdown .css-t3ipsp-control,
.pill-dropdown > div > div[class*="-control"] {
    border-radius: 50px !important;
    min-height: 30px !important;
    height: 30px !important;
}

/* Reduce inner input/value padding */
.pill-dropdown .Select-value,
.pill-dropdown .Select-placeholder,
.pill-dropdown .Select-input,
.pill-dropdown div[class*="-singleValue"],
.pill-dropdown div[class*="-placeholder"],
.pill-dropdown div[class*="-ValueContainer"] {
    line-height: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Shrink the dropdown indicator */
.pill-dropdown div[class*="-IndicatorsContainer"] {
    height: 30px !important;
}

/* Also target the Dash-specific rendered wrapper */
.pill-dropdown .dash-dropdown .Select-control {
    border-radius: 50px !important;
}

/* Menu (open dropdown list) – slightly rounded corners */
.pill-dropdown .Select-menu-outer,
.pill-dropdown div[class*="-menu"] {
    border-radius: 12px !important;
    overflow: hidden;
    margin-top: 4px;
}