/*
 * No flash of the old native dropdowns: until custom-select.js has upgraded them (it adds
 * .custom-select-ready to <html>), the selects it will upgrade stay invisible but keep their space.
 * If the script never runs, they appear by themselves after 2.5s.
 */
html:not(.custom-select-ready) select:not([data-native], .no-select2, [multiple], .select2-hidden-accessible) {
    visibility: hidden;
    animation: custom-select-reveal 0s linear 2.5s forwards;
}

@keyframes custom-select-reveal {
    to { visibility: visible; }
}

/*
 * Look of the platform-wide custom dropdown (see assets/js/custom-select.js).
 * Select2's "classic" theme, restyled to match the form fields: same height, rounded border,
 * crimson accent. Dark mode follows the OS setting like the rest of the app.
 */
.select2-container--classic .select2-selection--single {
    height: 40px !important;
    background: #fff;
    background-image: none;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    outline: none;
}

.select2-container--classic .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
    padding-left: 12px;
    padding-right: 32px;
    color: #1f2937;
}

.select2-container--classic .select2-selection--single .select2-selection__placeholder {
    color: #9ca3af;
}

.select2-container--classic .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
    width: 32px;
    background: transparent;
    background-image: none;
    border-left: 0;
    border-radius: 0 0.375rem 0.375rem 0;
}

.select2-container--classic.select2-container--focus .select2-selection--single,
.select2-container--classic.select2-container--open .select2-selection--single {
    border-color: #A01745;
    box-shadow: 0 0 0 1px #A01745;
}

.select2-container--classic.select2-container--disabled .select2-selection--single {
    background: #f3f4f6;
    cursor: not-allowed;
    opacity: 0.7;
}

.select2-container--classic .select2-dropdown {
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
}

.select2-container--classic .select2-search--dropdown .select2-search__field {
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background: #fff;
    color: #1f2937;
    outline: none;
}

.select2-container--classic .select2-results__option {
    color: #1f2937;
}

.select2-container--classic .select2-results__option--highlighted[aria-selected],
.select2-container--classic .select2-results__option--highlighted[data-selected] {
    background-color: #A01745;
    color: #fff;
}

/* Select2's classic theme paints the open field with its own gradient and a blue border;
   these are as specific as its rules, so they win by coming later. */
.select2-container--classic.select2-container--open .select2-selection--single,
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
    background-image: none !important;
    background-color: #fff;
    border-color: #A01745;
}

.select2-container--classic.select2-container--open .select2-dropdown,
.select2-container--classic.select2-container--open.select2-container--above .select2-dropdown,
.select2-container--classic.select2-container--open.select2-container--below .select2-dropdown {
    border-color: #A01745;
}

.select2-container--classic .select2-selection--single .select2-selection__arrow b {
    border-color: #6b7280 transparent transparent;
}

@media (prefers-color-scheme: dark) {
    .select2-container--classic .select2-selection--single,
    .select2-container--classic .select2-dropdown,
    .select2-container--classic .select2-search--dropdown .select2-search__field {
        background: #1C2637;
        border-color: rgba(255, 255, 255, 0.14);
    }

    .select2-container--classic .select2-selection--single .select2-selection__rendered,
    .select2-container--classic .select2-results__option,
    .select2-container--classic .select2-search--dropdown .select2-search__field {
        color: #E6EDF7;
    }

    .select2-container--classic .select2-selection--single .select2-selection__placeholder {
        color: #94a3b8;
    }

    .select2-container--classic.select2-container--disabled .select2-selection--single {
        background: #131A26;
    }

    .select2-container--classic .select2-results__option[aria-selected="true"] {
        background-color: rgba(255, 255, 255, 0.08);
    }

    .select2-container--classic .select2-results__option--highlighted[aria-selected] {
        background-color: #A01745;
        color: #fff;
    }

    .select2-container--classic.select2-container--open .select2-selection--single,
    .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single,
    .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
        background-color: #1C2637;
    }

    .select2-container--classic .select2-selection--single .select2-selection__arrow b {
        border-color: #cbd5e1 transparent transparent;
    }
}