/**
 * iOS-specific fixes for Pro Training App
 * Modern Approach (2025/2026) - Clean Architecture
 * Uses dvh units and overscroll-behavior to handle Safari quirks natively.
 */

/* iOS Detection */
@supports (-webkit-touch-callout: none) {

    /* ==========================================
       GLOBAL LAYOUT & APP SHELL
       ========================================== */

    /* Ensure body doesn't scroll when modal is open */
    body.modal-open {
        position: fixed;
        width: 100%;
        height: 100dvh;
        overflow: hidden;
        /* Match modal background to hide any bleed-through */
        background-color: var(--bg-primary) !important;
    }

    /* Fixed Header */
    .app-header {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000; /* Ensure above content */
        /* Handle safe area */
        padding-top: env(safe-area-inset-top) !important;
        height: calc(var(--header-height) + env(safe-area-inset-top)) !important; /* Use variable */
    }

    /* Fixed Bottom Nav */
    .bottom-nav {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        /* Handle safe area */
        padding-bottom: env(safe-area-inset-bottom) !important;
        height: calc(var(--nav-height) + env(safe-area-inset-bottom)) !important; /* Use variable */
        background: var(--bg-primary); /* Opaque background */
    }

    /* Scrollable Main Content */
    .main-content {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        
        /* Padding for fixed elements - using variables */
        padding-top: calc(var(--header-height) + env(safe-area-inset-top) + 20px) !important;
        padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 20px) !important;
        
        /* Scroll Configuration */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important; /* Prevents body scroll chaining */
        
        /* Layout */
        height: 100dvh !important;
    }

    /* ==========================================
       FULLSCREEN MODAL ARCHITECTURE
       ========================================== */

    /* FIX: Ensure modals are above header (z-1000) */
    .modal-overlay {
        z-index: 1500 !important;
    }

    .modal {
        z-index: 1501 !important;
    }

    .modal.modal-fullscreen,
    .modal.modal--fullscreen,
    .plan-modal {
        /* Position & Size */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100dvh !important; /* Dynamic Viewport Height - Adjusts to Safari bar */
        
        /* Layout */
        display: flex !important;
        flex-direction: column !important;
        
        /* Appearance */
        background: var(--bg-primary);
        z-index: 2000 !important;
        border-radius: 0 !important;
        
        /* Scroll Physics - The Magic Fix */
        overscroll-behavior: none; /* Prevents scroll chaining to body */
        overflow: hidden; /* Container itself doesn't scroll */
        
        /* Safe Areas */
        padding-top: env(safe-area-inset-top) !important;
        padding-bottom: 0 !important; /* Let children handle bottom spacing */
    }

    /* HEADER: Fixed at top */
    .plan-modal-header,
    .modal__header {
        flex-shrink: 0; /* Never shrink */
        position: relative; /* Stays in flow */
        z-index: 10;
    }

    /* TABS: Fixed below header */
    .plan-tabs,
    .modal__tabs {
        flex-shrink: 0;
        position: relative;
        z-index: 10;
        background: var(--bg-primary); /* Ensure opaque background */
    }

    /* BODY: The ONLY scrollable area */
    .plan-content,
    .modal__body {
        flex: 1 1 0% !important; /* Grow to fill space, shrink if needed */
        display: flex !important;
        flex-direction: column !important;
        
        /* Scroll Configuration */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important; /* Native momentum scroll */
        overscroll-behavior-y: contain; /* Contain scroll to this element */
        
        /* Touch Handling */
        touch-action: pan-y !important;
        
        /* Reset positioning */
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* ==========================================
       TAB PANELS (Info, Exercises, History)
       ========================================== */

    /* Panels should just flow within the scrollable body */
    .tab-panel,
    .modal__panel {
        display: none;
        width: 100%;
        /* Ensure bottom padding specifically for scrolling past FAB/Bottom bar */
        padding-bottom: calc(env(safe-area-inset-bottom) + 120px) !important; 
    }

    .tab-panel.active,
    .modal__panel--active {
        display: block !important;
        /* Do NOT set overflow here - let the parent (.plan-content) handle scrolling */
        height: auto !important;
        overflow: visible !important;
    }

    /* Special case for Exercises List to ensure full width */
    .exercises-list {
        width: 100%;
        padding-bottom: 80px; /* Internal padding */
    }

    /* ==========================================
       DRAG & DROP (Sortable.js) OPTIMIZATIONS
       ========================================== */

    /* The Item: Allows scrolling */
    .sortable-item {
        touch-action: pan-y !important; /* Allow vertical scroll start */
        transform: translateZ(0); /* Hardware acceleration */
    }

    /* The Handle: Captures Drag */
    .handle,
    .handle-container {
        /* CRITICAL: Tell browser "Hands off, app handles touch here" */
        touch-action: none !important; 
        cursor: grab;
        
        /* Increase touch target size */
        padding: 15px !important;
        margin: -10px !important; /* Negative margin to expand hit area */
        z-index: 5;
    }

    /* Visual Feedback */
    .sortable-ghost {
        opacity: 0.4;
        background: var(--bg-secondary);
    }

    .sortable-chosen {
        background: var(--bg-secondary);
    }

    /* ==========================================
       INPUTS & KEYBOARD
       ========================================== */

    /* Prevent zoom on focus */
    input, textarea, select {
        font-size: 16px !important; /* Prevents auto-zoom */
    }

    /* Ensure inputs are clickable */
    .form-control,
    .form-input,
    input, select, textarea {
        pointer-events: auto !important;
        user-select: text !important;
        -webkit-user-select: text !important;
        -webkit-appearance: none;
        appearance: none;
        border-radius: 8px !important;
    }

    /* FIX: Restore native appearance for checkboxes and radios */
    input[type="checkbox"],
    input[type="radio"] {
        -webkit-appearance: auto !important;
        appearance: auto !important;
    }
}