/**
 * 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 - EXATAMENTE IGUAL AO ANDROID */
    .bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        /* Sem safe-area para igualar ao Android */
        height: var(--nav-height) !important;
        background: var(--bg-primary) !important;
    }

    /* Scrollable Main Content - EXATAMENTE IGUAL AO ANDROID */
    .main-content {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        
        /* Padding for fixed elements - SEM safe-area para igualar ao Android */
        padding-top: calc(var(--header-height) + 20px) !important;
        padding-bottom: calc(var(--nav-height) + 20px) !important;
        
        /* Scroll Configuration */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        
        /* 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;
    }

}

/* ==========================================
   GLOBAL FORM STYLES (Fixes Visits & Modals)
   ========================================== */
.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

/* Generic form inputs - EXCLUDING exercise cards */
.modal-body .form-input:not(.series-input), 
.modal-body .form-control:not(.series-input),
.cv-modal-body .form-input,
.settings-view .form-input,
#tab-info .form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 1rem;
    color: var(--text-primary);
    background: var(--bg-secondary);
    transition: all 0.2s ease;
    display: block;
    box-sizing: border-box;
    font-family: inherit;
}

.form-input:focus, 
.form-control:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--bg-primary);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

select.form-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

textarea.form-input {
    min-height: 100px;
    resize: vertical;
}