/**
 * iOS Safari Compatibility Fixes
 * Fixes: safe-area-inset, 100vh, backdrop-filter, select2, sticky, gap fallback
 * Also includes: pull-to-refresh indicator styles
 */

/* ============================================================
   0. Pull-to-Refresh indicator
   ============================================================ */
#ptr-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    overflow: hidden;
    z-index: 99999;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    will-change: height;
    /* push page content down as indicator appears */
    margin-bottom: 0;
}
#ptr-indicator #ptr-arrow {
    font-size: 16px;
    transition: transform .2s ease;
}
#ptr-indicator #ptr-text {
    letter-spacing: .3px;
}

/* ============================================================
   1. Safe-Area Insets — all fixed-bottom elements
   Applies to: mobile action bars, submit sections, FABs
   ============================================================ */

/* Generic: any element with bottom: 0 and position: fixed */
.submit-section-mobile,
.mobile-quick-actions,
.mobile-tabbar,
[class*="fab-container"],
#fab-container {
    /* Add iPhone home-bar padding (safe-area-inset-bottom) */
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

/* Landscape notch — left/right safe-area */
@supports (padding-left: env(safe-area-inset-left)) {
    .submit-section-mobile,
    .mobile-quick-actions {
        padding-left: max(15px, env(safe-area-inset-left, 0px));
        padding-right: max(15px, env(safe-area-inset-right, 0px));
    }
}

/* Increase bottom padding of page content to clear the safe-area+bar */
@media (max-width: 767px) {
    body.has-mobile-bar .content,
    .content-wrapper {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
}

/* ============================================================
   2. 100vh Fix — iOS Safari address bar
   Use 100dvh where supported, fallback to 100vh
   ============================================================ */
.mr-page,
.dr-page,
.dr-show,
.dc-page,
[class*="create-wizard"],
[class*="master-timeline"],
[class*="morning-round"],
.patient-profile-page,
.quick-prescribe-page {
    min-height: 100vh; /* fallback */
    min-height: 100dvh; /* iOS 15.4+ / modern browsers */
}

/* Panels that use height: 100vh */
#quick-entry-panel,
#slide-out-panel,
.quick-entry-panel,
.slide-out-panel {
    height: 100vh; /* fallback */
    height: 100dvh;
    /* Also handle bottom overflow from home bar */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Modals using calc(100vh) */
@supports (height: 100dvh) {
    .modal-dialog .modal-content[style*="max-height"] {
        max-height: calc(100dvh - 20px) !important;
    }
    @media (max-width: 767px) {
        .modal.in .modal-dialog {
            max-height: calc(100dvh - 20px);
            overflow-y: auto;
        }
    }
}

/* ============================================================
   3. backdrop-filter — add -webkit- prefix everywhere
   ============================================================ */
[style*="backdrop-filter"],
.ws-action-bar,
.mr-header {
    -webkit-backdrop-filter: inherit;
}

/* Specific known elements */
.ws-action-bar {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* ============================================================
   4. position: sticky — iOS bug mitigation
   Inside overflow:auto/scroll containers, sticky doesn't work.
   Convert sticky bottom-bars to fixed as fallback on iOS.
   ============================================================ */
@supports (-webkit-touch-callout: none) {
    /* iOS only */
    .ws-action-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Compensate: add padding to parent so content isn't hidden behind bar */
    .ws-workspace {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }
}

/* ============================================================
   5. Select2 — touch-action fix (prevents tap delay on iOS)
   ============================================================ */
.select2-container,
.select2-container--default .select2-selection--single,
.select2-results__option {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Ensure min touch target size */
.select2-container--default .select2-selection--single {
    min-height: 44px !important;
    line-height: 42px;
}

/* ============================================================
   6. gap fallback for older iOS Safari (< 14.1)
   ============================================================ */
@supports not (gap: 8px) {
    .mobile-tabbar .tabbar-item {
        margin: 0 4px;
    }
    .submit-section-mobile .btn + .btn,
    .mobile-quick-actions .btn + .btn {
        margin-right: 8px;
    }
}

/* ============================================================
   7. Input font-size >= 16px everywhere — prevents iOS auto-zoom
   ============================================================ */
@media (max-width: 767px) {
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ============================================================
   8. Momentum scrolling on scrollable containers
   ============================================================ */
.overflow-scroll,
[class*="scroll"],
.modal-body,
.quick-entry-panel .panel-body,
.slide-out-panel .panel-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* table-responsive: horizontal scroll only — vertical MUST propagate to parent */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain; /* prevent horizontal overscroll chaining only */
    /* overscroll-behavior: contain is intentionally NOT used — blocks vertical scroll propagation */
}

/* Main page scroll container — Tailwind classes don't match [class*="scroll"] */
#scrollable-container {
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   9. Prevent double-tap zoom + ensure touch responsiveness
   iOS WebKit requires cursor:pointer on elements for click
   event delegation to work. Also fix touch-action for all
   interactive elements.
   ============================================================ */
button, .btn, a[role="button"] {
    touch-action: manipulation;
}

/* iOS click event delegation fix:
   iOS WebKit does NOT bubble click events from non-natively-interactive
   elements unless they have cursor:pointer. Apply to all common
   interactive patterns used in the app. */
.drop_down,
.sidebar-menu a,
.sidebar-menu li,
.treeview-menu a,
.treeview-menu li,
[onclick],
[data-toggle],
[data-dismiss],
[data-target],
.kanban-card-content,
.protocol-btn,
.med-chip,
.action,
.clickable,
.dataTables_wrapper tbody tr {
    cursor: pointer;
}

/* ============================================================
   10. Root cause fix: nested overflow container — iOS scroll
   #scrollable-container uses height:100vh + overflow-y:auto
   which creates a nested scroll context on iOS.
   This breaks event propagation, DataTable rendering, and
   causes sidebar/button click failures on ALL iOS devices.
   Fix applies to ALL iOS screen sizes (not just mobile).
   ============================================================ */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari + Chrome + all WebKit browsers */
    html, body {
        height: auto;
        min-height: 100%;
    }
    #scrollable-container {
        overflow-y: visible !important;
        height: auto !important;
    }
    /* Ensure the flex layout still fills viewport height */
    .thetop {
        min-height: 100vh;
        min-height: 100dvh;
    }
    /* Sidebar overlay must remain scrollable */
    .small-view-side-active {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}