/**
 * iOS Safari Select2 Dropdown Fixes
 * Ensures dropdowns are visible and properly positioned on iPhone/iPad
 * IMPORTANT: These fixes are scoped to iOS only to avoid breaking desktop
 */

/* iOS-specific Select2 dropdown fixes using feature detection */
@supports (-webkit-touch-callout: none) {
    /* This targets iOS Safari specifically */
    
    .select2-container {
        z-index: 9999 !important;
    }

    .select2-dropdown {
        z-index: 99999 !important;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .select2-container--open {
        z-index: 99999 !important;
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    /* This targets iOS Safari specifically */
    
    .select2-container--open .select2-dropdown {
        position: fixed !important;
        z-index: 999999 !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .select2-container--open .select2-dropdown--below {
        border-top: 1px solid #aaa;
    }
    
    .select2-container--open .select2-dropdown--above {
        border-bottom: 1px solid #aaa;
    }
    
    /* Fix for select2 input focus on iOS */
    .select2-search--dropdown .select2-search__field {
        -webkit-appearance: none;
        appearance: none;
    }
    
    /* Ensure dropdown results are visible */
    .select2-results {
        max-height: 300px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .select2-results__options {
        max-height: 280px !important;
        overflow-y: auto !important;
    }
    
    /* Fix for location dropdown in POS header */
    .pos-header .select2-container {
        z-index: 99999 !important;
    }
    
    .pos-header .select2-dropdown {
        z-index: 999999 !important;
        margin-top: 2px;
    }
}

/* Additional iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    /* Prevent iOS zoom on focus */
    .select2-search__field {
        font-size: 16px !important;
    }

    /* Fix backdrop issue on iOS */
    .select2-container--open .select2-dropdown {
        background: white !important;
        border: 1px solid #aaa !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }

    /* Make sure results are clickable on iOS */
    .select2-results__option {
        padding: 8px 12px !important;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    }

    .select2-results__option--highlighted {
        background-color: #5897fb !important;
        color: white !important;
    }
    
    /* Fix for select2 container width on iOS mobile */
    @media (max-width: 768px) {
        .select2-container {
            width: 100% !important;
            min-width: 150px;
        }
        
        .select2-dropdown {
            min-width: 150px;
        }
    }
}