/*
 * Sistema global de Select2 do Conecta PCSE.
 *
 * Carregado depois do CSS específico das páginas para oferecer a mesma
 * experiência em formulários, filtros e modais. O JavaScript de cada fluxo
 * continua responsável por dados, busca remota, allowClear e dropdownParent.
 */

:root {
    --pcse-select2-height: 48px;
    --pcse-select2-radius: 13px;
    --pcse-select2-radius-inner: 10px;
    --pcse-select2-accent: var(--bs-theme, #00ff9c);
    --pcse-select2-accent-rgb: var(--bs-theme-rgb, 0, 255, 156);
    --pcse-select2-bg: transparent;
    --pcse-select2-bg-strong: rgba(0, 25, 22, 0.985);
    --pcse-select2-border: rgba(255, 255, 255, 0.25);
    --pcse-select2-border-active: rgba(var(--pcse-select2-accent-rgb), 0.72);
    --pcse-select2-ink: rgba(255, 255, 255, 0.75);
    --pcse-select2-ink-soft: rgba(255, 255, 255, 0.75);
    --pcse-select2-ink-faint: rgba(255, 255, 255, 0.4);
    --pcse-select2-transition: 180ms ease;
}

@media (max-width: 767.98px) {
    /* O Select2 injeta largura inline; no mobile o campo acompanha o formulário. */
    :is(.app-content, .modal) .select2-container {
        width: 100% !important;
        max-width: 100%;
    }

    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-selection--single,
    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-selection--multiple {
        min-height: var(--pcse-select2-height) !important;
        border: 1px solid var(--pcse-select2-border) !important;
        border-radius: var(--pcse-select2-radius) !important;
        color: var(--pcse-select2-ink);
        background: var(--pcse-select2-bg) !important;
        box-shadow: none;
        transition:
            border-color var(--pcse-select2-transition),
            box-shadow var(--pcse-select2-transition),
            background-color var(--pcse-select2-transition);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-selection--single {
        position: relative;
        display: flex !important;
        align-items: center !important;
        height: var(--pcse-select2-height) !important;
        padding: 0 !important;
    }

    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-selection--single .select2-selection__rendered {
        display: flex !important;
        align-items: center !important;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 0 3rem 0 0.9rem !important;
        overflow: hidden;
        color: var(--pcse-select2-ink) !important;
        font-size: 16px !important;
        font-weight: 500;
        line-height: normal !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-selection--single .select2-selection__placeholder {
        color: var(--pcse-select2-ink-soft) !important;
    }

    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-selection--single .select2-selection__clear {
        position: absolute;
        top: 50%;
        right: 2.25rem;
        z-index: 2;
        margin: 0;
        padding: 0.2rem;
        color: var(--pcse-select2-ink-faint);
        font-size: 1.2rem;
        line-height: 1;
        transform: translateY(-50%);
    }

    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-selection--single .select2-selection__clear:hover {
        color: var(--pcse-select2-accent);
    }

    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-selection--single .select2-selection__arrow {
        position: absolute !important;
        top: 50% !important;
        right: 0.75rem !important;
        width: 1.5rem !important;
        height: 1.5rem !important;
        transform: translateY(-50%);
    }

    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-selection--single .select2-selection__arrow b {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        margin: 0;
        border-width: 5px 4px 0;
        border-style: solid;
        border-color: var(--pcse-select2-ink-soft) transparent transparent;
        transform: translate(-50%, -35%);
    }

    :is(.select2-container--default, .select2-container--bootstrap-5).select2-container--open .select2-selection--single .select2-selection__arrow b {
        border-width: 0 4px 5px;
        border-color: transparent transparent var(--pcse-select2-accent);
        transform: translate(-50%, -65%);
    }

    :is(.select2-container--default, .select2-container--bootstrap-5).select2-container--focus .select2-selection--single,
    :is(.select2-container--default, .select2-container--bootstrap-5).select2-container--focus .select2-selection--multiple,
    :is(.select2-container--default, .select2-container--bootstrap-5).select2-container--open .select2-selection--single,
    :is(.select2-container--default, .select2-container--bootstrap-5).select2-container--open .select2-selection--multiple {
        border-color: var(--pcse-select2-border-active) !important;
        box-shadow:
            0 0 0 0.1875rem rgba(var(--pcse-select2-accent-rgb), 0.08),
            0 0 1rem rgba(var(--pcse-select2-accent-rgb), 0.08) !important;
    }

    /*
     * Seleção múltipla: tags compactas e campo de busca com 16px para impedir
     * o zoom automático do iOS.
     */
    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-selection--multiple {
        height: auto !important;
        padding: 0.3rem 0.45rem !important;
    }

    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-selection--multiple .select2-selection__rendered {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        min-height: calc(var(--pcse-select2-height) - 0.7rem);
        gap: 0.3rem;
        margin: 0;
        padding: 0 !important;
    }

    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-selection--multiple .select2-selection__choice {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        gap: 0.25rem;
        margin: 0 !important;
        padding: 0.28rem 0.62rem 0.28rem 1.65rem !important;
        border: 1px solid rgba(var(--pcse-select2-accent-rgb), 0.24) !important;
        border-radius: 999px !important;
        color: var(--pcse-select2-ink) !important;
        background: rgba(var(--pcse-select2-accent-rgb), 0.1) !important;
        font-size: 0.76rem;
        line-height: 1.2;
    }

    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-selection--multiple .select2-selection__choice__remove {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        display: grid;
        width: 1.45rem;
        place-items: center;
        border: 0 !important;
        border-right: 1px solid rgba(var(--pcse-select2-accent-rgb), 0.18) !important;
        border-radius: 999px 0 0 999px !important;
        color: var(--pcse-select2-ink-soft) !important;
        background: transparent !important;
    }

    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: #fff !important;
        background: rgba(var(--bs-danger-rgb, 255, 84, 84), 0.3) !important;
    }

    .select2-container .select2-search--inline {
        flex: 1 1 7rem;
        min-width: 6rem;
        margin: 0;
    }

    .select2-container .select2-search--inline .select2-search__field {
        width: 100% !important;
        min-height: 32px;
        margin: 0 !important;
        padding: 0.25rem 0.35rem;
        color: var(--pcse-select2-ink);
        background: transparent;
        font-size: 16px !important;
        line-height: 1.35;
    }

    .select2-container .select2-search--inline .select2-search__field::placeholder {
        color: var(--pcse-select2-ink-soft);
    }

    /* Estado desabilitado e integração com validação Bootstrap. */
    :is(.select2-container--default, .select2-container--bootstrap-5).select2-container--disabled .select2-selection--single,
    :is(.select2-container--default, .select2-container--bootstrap-5).select2-container--disabled .select2-selection--multiple,
    .is-readonly :is(.select2-container--default, .select2-container--bootstrap-5) .select2-selection {
        border-color: rgba(255, 255, 255, 0.18) !important;
        background: rgba(255, 255, 255, 0.04) !important;
        box-shadow: none;
        cursor: not-allowed;
        opacity: 1;
    }

    .is-readonly :is(.select2-container--default, .select2-container--bootstrap-5)
        :is(.select2-selection__arrow, .select2-selection__clear) {
        display: none;
    }

    .select2-hidden-accessible.is-invalid + .select2-container .select2-selection,
    select.is-invalid + .select2-container .select2-selection {
        border-color: rgba(var(--bs-danger-rgb, 255, 84, 84), 0.72) !important;
        box-shadow: 0 0 0 3px rgba(var(--bs-danger-rgb, 255, 84, 84), 0.1) !important;
    }

    /*
     * O dropdown pode ser filho do modal (`dropdownParent`) ou ser anexado ao
     * body. Os seletores abaixo cobrem as duas estratégias.
     */
    .select2-container--open {
        z-index: 1085 !important;
    }

    .select2-dropdown {
        overflow: hidden;
        border: 1px solid rgba(var(--pcse-select2-accent-rgb), 0.32) !important;
        border-radius: var(--pcse-select2-radius) !important;
        color: var(--pcse-select2-ink);
        background:
            linear-gradient(
                155deg,
                rgba(var(--pcse-select2-accent-rgb), 0.055),
                transparent 52%
            ),
            var(--pcse-select2-bg-strong) !important;
        box-shadow:
            0 20px 48px rgba(0, 0, 0, 0.42),
            inset 0 1px 0 rgba(255, 255, 255, 0.045);
        backdrop-filter: blur(18px) saturate(1.12);
        -webkit-backdrop-filter: blur(18px) saturate(1.12);
    }

    .select2-dropdown--below {
        margin-top: 4px;
    }

    .select2-dropdown--above {
        margin-top: -4px;
        margin-bottom: 4px;
    }

    .select2-search--dropdown {
        padding: 0.65rem !important;
        border-bottom: 1px solid rgba(var(--pcse-select2-accent-rgb), 0.14);
        background: rgba(0, 0, 0, 0.08);
    }

    .select2-container .select2-search--dropdown .select2-search__field {
        width: 100%;
        min-height: 44px;
        padding: 0.62rem 0.78rem;
        border: 1px solid var(--pcse-select2-border) !important;
        border-radius: var(--pcse-select2-radius-inner) !important;
        outline: 0;
        color: var(--pcse-select2-ink);
        background: var(--pcse-select2-bg) !important;
        font-size: 16px !important;
        line-height: 1.35;
        caret-color: var(--pcse-select2-accent);
        box-shadow: none;
    }

    .select2-container .select2-search--dropdown .select2-search__field:focus {
        border-color: var(--pcse-select2-border-active) !important;
        box-shadow:
            0 0 0 0.1875rem rgba(var(--pcse-select2-accent-rgb), 0.08),
            0 0 1rem rgba(var(--pcse-select2-accent-rgb), 0.08);
    }

    .select2-results {
        background: transparent;
    }

    .select2-results > .select2-results__options {
        max-height: min(32dvh, 260px) !important;
        padding: 0.35rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color:
            rgba(var(--pcse-select2-accent-rgb), 0.42)
            rgba(255, 255, 255, 0.035);
    }

    .select2-results > .select2-results__options::-webkit-scrollbar {
        width: 5px;
    }

    .select2-results > .select2-results__options::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.025);
    }

    .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(var(--pcse-select2-accent-rgb), 0.42);
    }

    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-results__option {
        display: flex;
        align-items: center;
        min-height: 44px;
        margin: 0;
        padding: 0.68rem 0.78rem !important;
        border: 0;
        border-radius: 9px;
        color: var(--pcse-select2-ink-soft);
        background: transparent;
        font-size: 0.92rem !important;
        font-weight: 500;
        line-height: 1.35;
        transition:
            color var(--pcse-select2-transition),
            background-color var(--pcse-select2-transition);
    }

    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-results__option[aria-selected='true'],
    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-results__option--selected {
        color: var(--pcse-select2-accent) !important;
        background: rgba(var(--pcse-select2-accent-rgb), 0.12) !important;
        font-weight: 700;
    }

    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-results__option--highlighted[aria-selected],
    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-results__option--highlighted.select2-results__option--selectable {
        color: #00271c !important;
        background:
            linear-gradient(
                135deg,
                var(--pcse-select2-accent) 0%,
                #1bd9b2 100%
            ) !important;
    }

    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-results__group {
        padding: 0.65rem 0.78rem 0.35rem;
        color: var(--pcse-select2-ink-faint);
        font-size: 0.68rem;
        font-weight: 750;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-results__option[aria-disabled='true'] {
        color: var(--pcse-select2-ink-faint);
        background: transparent !important;
        cursor: not-allowed;
        opacity: 0.6;
    }

    .select2-results__message,
    .select2-results__option--loading {
        justify-content: center;
        color: var(--pcse-select2-ink-soft) !important;
        font-style: italic;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-selection,
    :is(.select2-container--default, .select2-container--bootstrap-5) .select2-results__option {
        transition: none !important;
    }
}