/**
 * Mobile Fixes CSS - PHP Responsive Design System
 * Created: 2026-01-29
 * Purpose: Mobile-specific fixes for common issues
 *
 * This file addresses iOS-specific issues, safe-area handling,
 * and other mobile-only problems.
 */

/* ===== iOS 100vh Fix ===== */
/* iOS Safari address bar causes 100vh ≠ visible height */
.fullscreen, .full-height, .min-h-screen, .min-vh-100 {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height */
}

/* ===== Safe Area for Notch Phones ===== */
/* iPhone X+ and other phones with notches */
.safe-top {
    padding-top: env(safe-area-inset-top);
}

.safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

.safe-left {
    padding-left: env(safe-area-inset-left);
}

.safe-right {
    padding-right: env(safe-area-inset-right);
}

.safe-all {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* ===== Input Font Size Fix (iOS Zoom) ===== */
/* iOS Safari zooms when font < 16px */
input, textarea, select {
    font-size: 16px !important;
}

/* ===== Mobile-Only Utilities ===== */
@media (max-width: 600px) {
    /* Hide elements on small mobile */
    .hide-mobile {
        display: none !important;
    }

    /* Stack flex containers on mobile */
    .mobile-stack {
        flex-direction: column !important;
    }

    /* Center text on mobile */
    .mobile-center {
        text-align: center !important;
    }

    /* Full width buttons on mobile */
    .mobile-full-width {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Smaller fonts on mobile */
    .mobile-text-sm {
        font-size: 0.875rem;
    }

    /* Reduced padding on mobile */
    .mobile-p-2 {
        padding: 0.5rem;
    }

    .mobile-p-4 {
        padding: 1rem;
    }
}

/* ===== Touch Target Size ===== */
/* Ensure touch targets are at least 44x44px (iOS/Android guideline) */
button, a, .clickable {
    min-height: 44px;
    min-width: 44px;
}

@media (max-width: 600px) {
    button, a, .clickable {
        padding: 12px 16px;
    }
}

/* ===== Prevent Horizontal Scroll ===== */
body, html {
    overflow-x: hidden;
}

/* ===== Responsive Tables ===== */
@media (max-width: 600px) {
    /* Make tables scrollable horizontally */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stack table rows on mobile */
    .table-mobile-stack tr {
        display: block;
        float: left;
        width: 100%;
        margin-bottom: 1rem;
    }

    .table-mobile-stack td,
    .table-mobile-stack th {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
}

/* ===== Responsive Iframes ===== */
@media (max-width: 600px) {
    iframe {
        max-width: 100%;
        height: auto;
    }
}

/* ===== Text Selection ===== */
/* Improve text selection on mobile */
::selection {
    background: rgba(102, 126, 234, 0.3);
}

::-moz-selection {
    background: rgba(102, 126, 234, 0.3);
}

/* ===== Smooth Scrolling ===== */
html {
    scroll-behavior: smooth;
}

/* iOS doesn't support smooth scroll, provide fallback */
@supports (-webkit-overflow-scrolling: touch) {
    html {
        scroll-behavior: auto;
    }
}

/* ===== Pull-to-Refresh ===== */
/* Disable pull-to-refresh on mobile to prevent conflicts */
body {
    overscroll-behavior-y: contain;
}

/* ===== Focus States (Accessibility) ===== */
/* Better focus indicators for keyboard navigation */
button:focus, a:focus, input:focus, textarea:focus, select:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* ===== Print Styles ===== */
@media print {
    /* Hide mobile-only elements in print */
    .hide-mobile, .mobile-only {
        display: none !important;
    }

    /* Ensure background colors print */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}