/* --- Premium Standalone Dropdown (no pill wrapper) --- */
.premium-dropdown {
    display: inline-flex;
    align-items: center;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 14px;
    min-width: 160px;
    height: 38px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    padding: 0 0.5rem 0 0.75rem;
}

.premium-dropdown:hover {
    border-color: var(--accent-purple);
    background: #FFFFFF;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.08);
}

.premium-dropdown:focus-within {
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.premium-dropdown .Select-control,
.premium-dropdown .Select__control,
.premium-dropdown .Select__control:hover,
.premium-dropdown .Select__control--is-focused {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
}

.premium-dropdown .Select-value,
.premium-dropdown .Select__single-value {
    color: var(--text-main) !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    padding-left: 2px !important;
}

.premium-dropdown .Select-arrow-zone,
.premium-dropdown .Select__indicators {
    padding-right: 2px !important;
}

.premium-dropdown .Select-arrow {
    border-top-color: #64748B !important;
    border-width: 5px 4px 0 !important;
}

.premium-dropdown .is-open .Select-arrow {
    border-color: transparent transparent #64748B !important;
    border-width: 0 4px 5px !important;
}

.premium-dropdown .Select-menu-outer,
.premium-dropdown .Select__menu {
    border-radius: 16px !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1) !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
    margin-top: 8px !important;
    z-index: 999 !important;
    min-width: 160px !important;
}

.premium-dropdown .Select-option,
.premium-dropdown .Select__option {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--text-sub) !important;
    padding: 10px 16px !important;
    transition: all 0.2s ease !important;
}

.premium-dropdown .Select-option.is-focused,
.premium-dropdown .Select__option--is-focused {
    background: rgba(124, 58, 237, 0.06) !important;
    color: var(--accent-purple) !important;
}

.premium-dropdown .Select-option.is-selected,
.premium-dropdown .Select__option--is-selected {
    background: var(--accent-purple) !important;
    color: #FFFFFF !important;
}

.premium-dropdown .Select__indicator-separator {
    display: none !important;
}

/* --- Premium Capsule Dropdown Pill Cohesive Theme --- */
.premium-dropdown-pill {
    display: inline-flex;
    align-items: center;
    background: #F8FAFC; /* Sleeker soft background */
    border: 1.5px solid #E2E8F0; /* Much cleaner light slate border */
    border-radius: 14px; /* Matches modern grid borders and rounded design */
    padding: 0 0.5rem 0 0.75rem; /* Tight, sleek internal padding */
    height: 38px; /* Sleeker, tighter vertical height */
    width: 175px; /* Perfect width preventing line wrapping */
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box;
    position: relative;
    z-index: 20;
}

/* Remove default Dash dropdown borders & background from the trigger container inside pills */
.premium-dropdown-pill .dash-dropdown,
.premium-dropdown .dash-dropdown {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.premium-dropdown-pill .dash-dropdown:focus,
.premium-dropdown-pill .dash-dropdown:focus-visible,
.premium-dropdown-pill .dash-dropdown-trigger:focus,
.premium-dropdown-pill .dash-dropdown-trigger:focus-visible {
    outline: none !important;
    border: none !important;
}

.premium-dropdown-pill .dash-dropdown-value,
.premium-dropdown-pill .dash-dropdown-value-item {
    user-select: none !important;
    -webkit-user-select: none !important;
}

.premium-dropdown-pill:hover {
    border-color: var(--accent-purple);
    background: #FFFFFF;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.08);
    z-index: 1000 !important;
}

.premium-dropdown-pill:focus-within,
.premium-dropdown-pill:has([aria-expanded="true"]),
.premium-dropdown-pill:has([data-state="open"]) {
    border-color: var(--accent-purple);
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
    z-index: 1000 !important;
}

.premium-dropdown-icon {
    color: var(--accent-purple);
    font-size: 0.85rem; /* Sleeker, standard size */
    margin-right: 0.35rem; /* Snug breathing room */
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

/* Hide default Dash dropdown borders & shadows in clean dropdown mode */
.premium-dropdown-pill .dash-dropdown-clean {
    flex-grow: 1;
    width: 100% !important;
}

/* Target and completely remove any inner border, separator or background from React-Select (handles both v1 and v2+) */
.premium-dropdown-pill .Select,
.premium-dropdown-pill .Select-control,
.premium-dropdown-pill .dash-dropdown-clean .Select,
.premium-dropdown-pill .dash-dropdown-clean .Select-control,
.premium-dropdown-pill .Select__control,
.premium-dropdown-pill .Select__control:hover,
.premium-dropdown-pill .Select__control--is-focused,
.premium-dropdown-pill .Select__control--is-focused:hover,
.premium-dropdown-pill .dash-dropdown-clean .Select__control,
.premium-dropdown-pill .dash-dropdown-clean .Select__control:hover,
.premium-dropdown-pill .dash-dropdown-clean .Select__control--is-focused,
.premium-dropdown-pill .dash-dropdown-clean .Select__control--is-focused:hover {
    border: none !important;
    border-color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    height: 34px !important; /* Adjusted to center vertically in 38px pill */
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Align and clean up the value container and indicators wrapper */
.premium-dropdown-pill .Select__value-container,
.premium-dropdown-pill .Select__indicators,
.premium-dropdown-pill .Select__indicator,
.premium-dropdown-pill .Select__dropdown-indicator,
.premium-dropdown-pill .dash-dropdown-clean .Select-value,
.premium-dropdown-pill .dash-dropdown-clean .Select__value-container,
.premium-dropdown-pill .dash-dropdown-clean .Select__indicators {
    border: none !important;
    border-color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    height: 34px !important; /* Adjusted to center vertically in 38px pill */
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Hide the ugly react-select vertical separator line */
.premium-dropdown-pill .Select__indicator-separator {
    display: none !important;
}

/* Target placeholders and selected values inside the dropdown */
.premium-dropdown-pill .dash-dropdown-clean .Select-placeholder,
.premium-dropdown-pill .dash-dropdown-clean .Select-value-label,
.premium-dropdown-pill .dash-dropdown-clean .Select__placeholder,
.premium-dropdown-pill .dash-dropdown-clean .Select__single-value {
    padding-left: 2px !important;
    color: var(--text-main) !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Make sure the single-value is centered and doesn't get offset */
.premium-dropdown-pill .dash-dropdown-clean .Select__single-value {
    line-height: normal !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    transform: none !important;
    top: auto !important;
}

/* Input container needs standard typography and zero spacing to prevent pushing text */
.premium-dropdown-pill .dash-dropdown-clean .Select__input-container,
.premium-dropdown-pill .dash-dropdown-clean .Select__input {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--text-main) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.premium-dropdown-pill .dash-dropdown-clean .Select-arrow-zone,
.premium-dropdown-pill .dash-dropdown-clean .Select__indicators {
    padding-right: 2px !important;
}

.premium-dropdown-pill .dash-dropdown-clean .Select-arrow {
    border-color: #64748B transparent transparent !important;
    border-width: 5px 4px 0 !important;
}

.premium-dropdown-pill .dash-dropdown-clean .Select__dropdown-indicator {
    color: #64748B !important;
}

.premium-dropdown-pill .dash-dropdown-clean .is-open .Select-arrow {
    border-color: transparent transparent #64748B !important;
    border-width: 0 4px 5px !important;
}

/* --- Dash 4 Native Dropdown Popover Menu --- */
.dash-dropdown-content {
    border-radius: 14px !important;
    border: 1.5px solid #E2E8F0 !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(15, 23, 42, 0.04) !important;
    background-color: #FFFFFF !important;
    overflow: hidden !important;
    margin: 0 !important;
    z-index: 99999 !important;
    min-width: 170px !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
}

.dash-dropdown-options {
    padding: 6px 0 !important;
    background-color: #FFFFFF !important;
    max-height: 280px !important;
    overflow-y: auto !important;
}

.dash-dropdown-option,
.dash-options-list-option {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--text-sub) !important;
    padding: 9px 16px !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    background-color: #FFFFFF !important;
    box-shadow: none !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    user-select: none !important;
}

.dash-dropdown-option:hover,
.dash-options-list-option:hover,
.dash-options-list-option:not(:has(input[disabled])):hover {
    background-color: rgba(124, 58, 237, 0.08) !important;
    color: var(--accent-purple) !important;
}

.dash-options-list-option.selected,
.dash-dropdown-option.selected,
.dash-dropdown-option:has(input[type='radio']:checked),
.dash-options-list-option:has(input[type='radio']:checked) {
    background-color: rgba(124, 58, 237, 0.12) !important;
    color: var(--accent-purple) !important;
    font-weight: 700 !important;
}

.dash-options-list-option.selected .dash-options-list-option-text,
.dash-dropdown-option.selected .dash-options-list-option-text,
.dash-dropdown-option:has(input[type='radio']:checked) .dash-options-list-option-text,
.dash-options-list-option:has(input[type='radio']:checked) .dash-options-list-option-text {
    color: var(--accent-purple) !important;
    font-weight: 700 !important;
}

.dash-dropdown-option input[type='radio'],
.dash-options-list-option input[type='radio'],
.dash-dropdown-option .dash-options-list-option-wrapper:has(input[type='radio']) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
}

.dash-options-list-option-text {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

/* Also support React-Select for backward compatibility */
.premium-dropdown-pill .dash-dropdown-clean .Select-menu-outer,
.premium-dropdown-pill .dash-dropdown-clean .Select__menu {
    border-radius: 16px !important; /* Extremely smooth rounded option menu */
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1) !important;
    background-color: #FFFFFF !important;
    overflow: hidden !important;
    margin-top: 8px !important;
    z-index: 99999 !important;
    min-width: 160px !important; /* Ensures plenty of room for option text */
}

.premium-dropdown-pill .dash-dropdown-clean .Select-option,
.premium-dropdown-pill .dash-dropdown-clean .Select__option {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--text-sub) !important;
    padding: 10px 16px !important;
    transition: all 0.2s ease !important;
}

.premium-dropdown-pill .dash-dropdown-clean .Select-option.is-focused,
.premium-dropdown-pill .dash-dropdown-clean .Select__option--is-focused {
    background-color: rgba(124, 58, 237, 0.06) !important;
    color: var(--accent-purple) !important;
}

.premium-dropdown-pill .dash-dropdown-clean .Select-option.is-selected,
.premium-dropdown-pill .dash-dropdown-clean .Select__option--is-selected {
    background-color: var(--accent-purple) !important;
    color: #FFFFFF !important;
}

/* --- RESPONSIVE DROPDOWN PILL --- */
@media (max-width: 767px) {
    .premium-dropdown-pill {
        width: 100% !important;
        height: 36px !important;
    }

    .premium-dropdown-pill .dash-dropdown-clean .Select__control,
    .premium-dropdown-pill .dash-dropdown-clean .Select-control {
        height: 32px !important;
    }

    .premium-dropdown-pill .dash-dropdown-clean .Select-placeholder,
    .premium-dropdown-pill .dash-dropdown-clean .Select-value-label,
    .premium-dropdown-pill .dash-dropdown-clean .Select__placeholder,
    .premium-dropdown-pill .dash-dropdown-clean .Select__single-value {
        font-size: 0.75rem !important;
    }

    .premium-dropdown-icon {
        font-size: 0.75rem !important;
    }

    .premium-dropdown-pill .dash-dropdown-clean .Select__option {
        font-size: 0.75rem !important;
    }

    .premium-dropdown {
        width: 100% !important;
        min-width: 0 !important;
        height: 36px !important;
    }

    .premium-dropdown .Select-control,
    .premium-dropdown .Select__control {
        height: 32px !important;
    }

    .premium-dropdown .Select-value,
    .premium-dropdown .Select__single-value {
        font-size: 0.75rem !important;
    }

    .premium-dropdown .Select-option,
    .premium-dropdown .Select__option {
        font-size: 0.75rem !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .premium-dropdown-pill {
        width: 160px !important;
    }

    .premium-dropdown {
        width: 160px !important;
    }
}