/* ══════════════════════════════════════════════════════
   iOS Safari Compatibility Layer
   Load AFTER all other stylesheets.
   ══════════════════════════════════════════════════════ */

/* ── P0: Prevent iOS auto-zoom on input focus ──
   iOS Safari zooms the page when an input has font-size < 16px.
   This rule targets WebKit only and forces 16px on all form controls.
   Using @supports to avoid affecting non-WebKit browsers. */
@supports (-webkit-touch-callout: none) {
    input, textarea, select {
        font-size: 16px !important;
    }
}

/* ── P0: Safe-area-inset for iPhone notch (X and above) ──
   Uses max() so it never reduces existing padding to zero. */
@supports (padding: max(0px)) {
    /* Standalone pages (login, register, etc.) that use body as layout root */
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* Sidebar — ensure it doesn't sit behind the notch in landscape */
    .sidebar {
        padding-left: max(0px, env(safe-area-inset-left));
    }

    /* Main content area — respect right safe area in landscape */
    .main-content {
        padding-right: max(0px, env(safe-area-inset-right));
    }

    /* Fixed bottom elements — respect bottom safe area (home indicator) */
    .sidebar-footer {
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    }

    /* Modal overlays — full safe area awareness */
    .modal-overlay,
    .member-detail-overlay,
    .overlay {
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }
}

/* ── P1: Replace 100vh with 100dvh (dynamic viewport height) ──
   100dvh accounts for iOS Safari's collapsing address bar.
   Falls back to 100vh for browsers that don't support dvh. */
.timeout-container,
.thankyou-container,
.logout-section {
    min-height: 100vh;
    min-height: 100dvh;
}

/* ── P1: Hover states need touch-friendly alternatives ──
   Use @media (hover: hover) to scope hover effects to pointer devices,
   and always provide :active/:focus-within for touch. */

/* Table row highlights — touch-friendly */
#eventsTable tr:active td,
#instructorsTable tbody tr:active td,
#membersTable tbody tr:active td,
.mb-table tbody tr:active td,
.drilldown-table tbody tr:active td {
    background: rgba(79, 140, 255, 0.08);
}

/* Sidebar menu items — touch-friendly */
.menu > li:active,
.menu > li:focus-within {
    background: rgba(79, 140, 255, 0.06);
}
.submenu li a:active,
.submenu li a:focus-visible {
    color: var(--brand-400, #4f8cff);
}

/* Buttons — ensure visible feedback on tap */
button:active,
.btn:active,
a.btn:active,
.primary-btn:active,
.submit-btn:active,
.filter-btn:active {
    opacity: 0.85;
    transform: scale(0.98);
}

/* Stat cards — touch feedback */
a.stat-card-link:active {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.1));
}

/* ── P1: -webkit-overflow-scrolling for momentum scroll ──
   Already in responsive_overhaul.css for table containers,
   but ensure sidebar also has it. */
.sidebar {
    -webkit-overflow-scrolling: touch;
}

/* ── P2: Minimum touch target size (44x44px) ──
   Ensure common interactive elements meet Apple's 44px guideline. */
@supports (-webkit-touch-callout: none) {
    .filter-btn,
    .action-btn,
    .modal-close-btn,
    .modal-close,
    .approve-btn,
    .reject-btn,
    .browse-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Pagination and small action buttons */
    .pagination button,
    .pagination a {
        min-height: 44px;
        min-width: 44px;
    }
}