/* ---- Select2 on phones (every page; loaded from partials/css) ----
   Below 768px every select2 gets the same app-style UI:
     field: 44px, rounded, 16px text (iOS doesn't zoom on focus), the
            clear × as a round button with a 44px tap area
     open list (.select2-mobile-panel, added by main.js on open): a search
            panel pinned to the top of the screen, clear of the keyboard,
            over a dimmed page; tapping the dimmed area closes it
   Larger screens keep select2's own look. */

@media (max-width: 767.98px) {
    .select2-mobile-backdrop { background: rgba(15, 23, 42, .45); inset: 0; position: fixed; z-index: 10990; }
    /* Field */
    .select2-container.select2-container--default .select2-selection--single { border-radius: 12px; height: 44px; }
    .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered { font-size: 16px; line-height: 42px; padding-left: 12px; }
    .select2-container.select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; right: 6px; }
    .select2-container.select2-container--default .select2-selection--multiple { border-radius: 12px; min-height: 44px; padding: 4px 6px; }
    .select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice { border-radius: 8px; font-size: 14px; margin-top: 4px; padding: 3px 8px 3px 24px; }
    .select2-container.select2-container--default .select2-selection--multiple .select2-search__field { font-size: 16px; height: 30px; margin-top: 4px; }

    /* clear (×): a 32px round button, its tap area padded out to 44px */
    .select2-container.select2-container--default .select2-selection--single .select2-selection__clear {
        align-items: center;
        background: #f1f5f9;
        border-radius: 50%;
        color: #64748b;
        display: flex;
        font-size: 18px;
        font-weight: 400;
        height: 32px;
        justify-content: center;
        margin: 5px 28px 0 0;
        padding: 0;
        position: relative;
        touch-action: manipulation;
        width: 32px;
    }
    .select2-container.select2-container--default .select2-selection__clear::before { content: ""; inset: -6px; position: absolute; }
    .select2-container.select2-container--default .select2-selection__clear:active { background: #fee2e2; color: #dc2626; }
    .select2-container.select2-container--default .select2-selection--single:has(.select2-selection__clear) .select2-selection__rendered { padding-right: 68px; }

    /* Open list. Select2 sets the position inline, hence !important. */
    .select2-container--open.select2-mobile-panel {
        box-shadow: none;
        border-radius: 16px;
        left: 12px !important;
        position: fixed !important;
        right: 12px;
        top: calc(12px + env(safe-area-inset-top)) !important;
        width: auto !important;
        z-index: 11000;
        pointer-events: auto;
    }
    .select2-container.select2-mobile-panel .select2-dropdown {
        border: 0;
        border-radius: 16px;
        box-shadow: 0 12px 32px rgba(15, 23, 42, .2);
        overflow: hidden;
        position: static;
        width: 100% !important;
    }
    .select2-container.select2-mobile-panel .select2-search--dropdown { border-bottom: 1px solid #edf1f6; padding: 12px; position: relative; }
    .select2-container.select2-mobile-panel .select2-search--dropdown::before {
        color: #94a3b8;
        content: "\F0349"; /* mdi-magnify */
        font: normal 20px/1 "Material Design Icons";
        left: 24px;
        pointer-events: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .select2-container.select2-mobile-panel .select2-search__field {
        background: #f1f5f9;
        border: 1px solid transparent !important;
        border-radius: 12px;
        font-size: 16px !important;
        height: 44px;
        outline: 0;
        padding: 0 12px 0 40px !important;
    }
    .select2-container.select2-mobile-panel .select2-search__field:focus { background: #fff; border-color: #a5b4fc !important; box-shadow: 0 0 0 3px rgba(83, 122, 239, .15); }
    /* about half the screen, so the list stays above an open keyboard */
    .select2-container.select2-mobile-panel .select2-results > .select2-results__options { max-height: 45vh; overscroll-behavior: contain; padding: 6px; }
    .select2-container.select2-mobile-panel .select2-results__option { border-radius: 10px; font-size: 14px; line-height: 1.4; padding: 11px 12px; }
    .select2-container.select2-mobile-panel .select2-results__option + .select2-results__option { margin-top: 2px; }
    .select2-container.select2-mobile-panel .select2-results__option--group { padding: 0; }
    .select2-container.select2-mobile-panel .select2-results__group { color: #64748b; font-size: 11px; font-weight: 600; letter-spacing: .4px; padding: 10px 12px 4px; text-transform: uppercase; }
    .select2-container.select2-mobile-panel .select2-results__option--highlighted { background: #eef2ff !important; color: #3730a3 !important; }
    .select2-container.select2-mobile-panel .select2-results__option--selected { background: #537aef !important; color: #fff !important; font-weight: 600; }
    .select2-container.select2-mobile-panel .select2-results__message { color: #64748b; padding: 18px 12px; text-align: center; }
}