/* ============================================================================
   TipsChampions - Minimal Responsive Fixes
   ============================================================================
   Step 23D: Only fixes that Bootstrap 5 doesn't provide
   
   Contents:
   - iOS input zoom prevention
   - Safe area insets for notched devices
   - Smooth scrolling with reduced motion support
   - Minor touch improvements
   ============================================================================ */


/* ============================================================================
   iOS INPUT ZOOM PREVENTION
   ============================================================================
   iOS Safari zooms in when focusing inputs with font-size < 16px.
   This is annoying UX - setting 16px minimum prevents it.
   ============================================================================ */

@media (max-width: 991.98px) {
    .form-control,
    .form-select,
    textarea {
        font-size: 16px;
    }
}


/* ============================================================================
   SAFE AREA INSETS (Notched Devices)
   ============================================================================
   iPhone X, 11, 12, 13, 14+ have notches and home indicators.
   This ensures content isn't hidden behind them.
   ============================================================================ */

@supports (padding: max(0px)) {
    /* Navbar respects top notch */
    .navbar {
        padding-top: max(0.5rem, env(safe-area-inset-top));
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
    
    /* Footer respects bottom home indicator */
    footer,
    .admin-footer {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
    
    /* Admin sidebar respects left edge and top */
    .admin-sidebar {
        padding-top: max(0px, env(safe-area-inset-top));
        padding-left: max(0px, env(safe-area-inset-left));
    }
    
    /* Fixed bottom elements (like bulk action bars) */
    .fixed-bottom,
    .sticky-bottom {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}


/* ============================================================================
   SMOOTH SCROLLING
   ============================================================================
   Enable smooth scrolling, but respect user's reduced motion preference.
   ============================================================================ */

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}


/* ============================================================================
   TOUCH TARGET MINIMUM SIZE
   ============================================================================
   Apple recommends 44x44px minimum for touch targets.
   Only apply to elements that might be too small.
   ============================================================================ */

@media (max-width: 991.98px) {
    /* Pagination links */
    .page-link {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Close buttons */
    .btn-close {
        width: 1.5em;
        height: 1.5em;
        padding: 0.5rem;
    }
}


/* ============================================================================
   VIEWPORT FIT
   ============================================================================
   Ensure the viewport extends into safe areas (for background colors).
   Note: Also requires viewport meta tag with viewport-fit=cover
   ============================================================================ */

@supports (padding: env(safe-area-inset-top)) {
    body {
        /* Extend background into safe areas */
        padding: 0;
    }
}


/* ============================================================================
   END OF MINIMAL RESPONSIVE FIXES
   ============================================================================ */