/**
 * iOS Safari Layout Fixes for Mix Builder
 * Addresses iOS-specific layout issues when songs are added to mix
 */

/* iOS Detection and Base Fixes */
@supports (-webkit-touch-callout: none) {
    /* This targets iOS Safari specifically */
    
    /* Fix body scrolling and viewport issues */
    body {
        position: relative !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: auto !important; /* Disable momentum scrolling on body */
        overscroll-behavior: contain !important;
    }
    
    /* iOS Safe Area Support */
    body {
        padding-top: env(safe-area-inset-top, 0) !important;
        padding-left: env(safe-area-inset-left, 0) !important;
        padding-right: env(safe-area-inset-right, 0) !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
    }
    
    /* Fix viewport height issues specific to iOS Safari */
    .mix-builder-section {
        min-height: -webkit-fill-available !important;
        /* Fallback for older iOS versions */
        min-height: calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0)) !important;
    }
    
    /* Fix Mix Builder Container Layout Issues */
    .mix-builder-container {
        position: relative !important;
        isolation: isolate !important; /* Create new stacking context */
        contain: layout style !important; /* Less aggressive than 'strict' for iOS */
    }
    
    .mix-builder-layout {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 20px !important;
        position: relative !important;
        z-index: 1 !important;
        /* Fix flexbox issues on iOS */
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
    }
    
    /* Left Column (Workout Structure) Fixes */
    .mix-builder-left {
        flex: 0 0 auto !important;
        width: 45% !important;
        position: relative !important;
        z-index: 2 !important;
        contain: layout !important; /* Lighter containment for iOS */
    }
    
    /* Right Column (Available Songs) Fixes */
    .mix-builder-right {
        flex: 1 1 auto !important;
        position: relative !important;
        z-index: 1 !important;
        max-width: calc(55% - 20px) !important;
        contain: layout !important; /* Lighter containment for iOS */
        
        /* Fix iOS scrolling issues */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        
        /* Force hardware acceleration for smoother scrolling */
        transform: translateZ(0) !important;
        will-change: scroll-position !important;
    }
    
    /* Fix workout slots positioning */
    .workout-slots {
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        contain: layout !important;
    }
    
    .workout-slot {
        position: relative !important;
        z-index: 2 !important;
        isolation: isolate !important;
        transform: translateZ(0) !important; /* Force hardware acceleration */
        
        /* Ensure slots don't overlap */
        margin-bottom: 0 !important;
        
        /* Fix touch interaction on iOS */
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
    
    /* Fix song cards positioning and rendering */
    .mix-song-item {
        position: relative !important;
        z-index: 1 !important;
        transform: translateZ(0) !important; /* Force hardware acceleration */
        isolation: isolate !important;
        contain: layout style !important;
        
        /* Prevent iOS touch delays */
        -webkit-touch-callout: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* Fix floating buttons on iOS */
    .mix-builder-floating-buttons {
        position: sticky !important; /* Better than absolute on iOS */
        top: env(safe-area-inset-top, 20px) !important;
        z-index: 100 !important;
        
        /* Ensure buttons don't interfere with layout */
        pointer-events: none !important;
        
        /* iOS rendering optimization */
        transform: translateZ(0) !important;
        isolation: isolate !important;
    }
    
    .mix-builder-floating-buttons > * {
        pointer-events: auto !important;
    }
    
    /* Fix song list scrolling */
    .mix-song-list {
        position: relative !important;
        z-index: 1 !important;
        
        /* iOS-optimized scrolling */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        
        /* Hardware acceleration */
        transform: translateZ(0) !important;
        will-change: scroll-position !important;
        
        /* Lighter containment for iOS compatibility */
        contain: layout !important;
        
        /* Prevent scrolling momentum issues */
        scroll-behavior: auto !important;
    }
    
    /* Fix add-to-mix buttons on iOS */
    .btn-add-to-mix {
        position: relative !important;
        z-index: 10 !important;
        
        /* iOS touch optimization */
        -webkit-touch-callout: none !important;
        -webkit-tap-highlight-color: transparent !important;
        
        /* Ensure button is clickable */
        pointer-events: auto !important;
        
        /* Hardware acceleration */
        transform: translateZ(0) !important;
    }
    
    /* Fix modal overlays on iOS */
    .modal {
        position: fixed !important;
        z-index: 1000 !important;
        
        /* iOS viewport fix */
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: -webkit-fill-available !important;
        
        /* Prevent iOS bounce scrolling */
        overscroll-behavior: none !important;
        -webkit-overflow-scrolling: auto !important;
    }
}

/* iOS Mobile Specific Fixes */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 968px) {
        /* Stack layout vertically on mobile iOS */
        .mix-builder-layout {
            flex-direction: column !important;
            gap: 20px !important;
        }
        
        .mix-builder-left,
        .mix-builder-right {
            width: 100% !important;
            max-width: 100% !important;
        }
        
        /* Ensure proper ordering on mobile */
        .mix-builder-left {
            order: 0 !important;
        }
        
        .mix-builder-right {
            order: 1 !important;
            max-height: 50vh !important; /* Prevent taking up entire screen */
        }
        
        /* Fix floating buttons for mobile iOS */
        .mix-builder-floating-buttons {
            top: env(safe-area-inset-top, 15px) !important;
            left: env(safe-area-inset-left, 15px) !important;
            right: env(safe-area-inset-right, 15px) !important;
        }
        
        /* Optimize song list for mobile iOS */
        .mix-song-list {
            max-height: 40vh !important;
            min-height: 200px !important;
        }
        
        /* Fix workout slots on mobile */
        .workout-slot {
            margin-bottom: 10px !important;
        }
        
        /* Prevent iOS zoom on input focus and enhance filter interaction */
        input, textarea, select {
            font-size: 16px !important; /* Prevents zoom on iOS */
        }
        
        /* Mobile filter enhancements for iOS (Bug #4 & #5 fixes) */
        .mix-filter,
        #mix-search-input,
        .filters-toggle {
            font-size: 16px !important; /* Prevent zoom */
            -webkit-touch-callout: none !important;
            -webkit-tap-highlight-color: transparent !important;
            touch-action: manipulation !important;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        
        /* Ensure filter containers don't overflow on iOS */
        .song-filters,
        .filters-collapsible,
        .filters-content,
        .mix-genre-filter-container {
            width: 100% !important;
            max-width: 100% !important;
            overflow: hidden !important;
            box-sizing: border-box !important;
        }
        
        /* Fix genre dropdown positioning on iOS */
        .mix-dropdown-content {
            position: absolute !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            z-index: 9999 !important;
        }
    }
}

/* iOS Landscape Orientation Fixes */
@supports (-webkit-touch-callout: none) {
    @media (orientation: landscape) and (max-height: 500px) {
        /* Optimize for iOS landscape mode */
        .mix-builder-section {
            min-height: 100vh !important;
        }
        
        .mix-builder-right {
            max-height: calc(100vh - 150px) !important;
        }
        
        .mix-song-list {
            max-height: calc(100vh - 200px) !important;
        }
        
        /* Adjust floating buttons for landscape */
        .mix-builder-floating-buttons {
            top: 10px !important;
        }
    }
}

/* iOS Keyboard Appearance Fixes */
@supports (-webkit-touch-callout: none) {
    /* When iOS keyboard is visible, adjust layout */
    .ios-keyboard-visible .mix-builder-section {
        height: auto !important;
        min-height: auto !important;
    }
    
    .ios-keyboard-visible .mix-builder-right {
        max-height: 30vh !important;
    }
    
    .ios-keyboard-visible .mix-song-list {
        max-height: 25vh !important;
    }
}

/* Fix iOS-specific rendering bugs */
@supports (-webkit-touch-callout: none) {
    /* Prevent iOS from applying automatic text size adjustments */
    * {
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
    
    /* Fix iOS font rendering */
    body, input, textarea, select, button {
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
    
    /* Disable iOS selection highlights that can interfere with layout */
    .mix-builder-section * {
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
    
    /* Re-enable selection for text inputs and content */
    input, textarea, .selectable-text {
        -webkit-user-select: text !important;
        user-select: text !important;
    }
    
    /* Fix iOS click delays */
    .clickable, button, .btn, .btn-add-to-mix {
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }
}

/* Debug mode for iOS issues */
.ios-debug .mix-builder-layout,
.ios-debug .workout-slot,
.ios-debug .mix-song-item {
    border: 1px solid rgba(255, 0, 0, 0.3) !important;
    background: rgba(255, 0, 0, 0.05) !important;
}

.ios-debug .mix-builder-left {
    border: 2px solid rgba(0, 255, 0, 0.5) !important;
}

.ios-debug .mix-builder-right {
    border: 2px solid rgba(0, 0, 255, 0.5) !important;
}