/* ═══════════════════════════════════════════════════════════════════════
   PIONEER MILITARY FITNESS - NUTRITION & BARCODE MOBILE FIXES

   This file fixes 11 critical PWA/mobile compatibility issues:
   1. Nutrition grid 2-column → 1-column on mobile
   2. Food modal sizing for mobile screens
   3. Touch target sizes (44px minimum)
   4. Food tab buttons proper height
   5. Barcode video responsive scaling
   6. Barcode target box aspect ratio
   7. Camera/Upload buttons stack vertically
   8. Safe area insets for notch/gesture bar
   9. Input font sizes (prevent iOS zoom)
   10. Modal keyboard handling
   11. General mobile improvements

   Version: 1.0
   Date: 2026-03-26
   ═══════════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ISSUE #1: NUTRITION GRID - Stack meals vertically on mobile
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
    /* Single column — meal cards stacked one under the other, full width + readable. */
    .nut-meals-grid {
        grid-template-columns: 1fr !important;
        gap: 0.6rem !important;
    }
    .nut-meal-col { min-height: auto; max-height: none; overflow: hidden; }
    .nut-meal-label-row { min-width: 0; display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
    /* Smaller so "Breakfast" fits on one line without bleeding out of the row. */
    .nut-meal-name { font-size: 0.66rem; letter-spacing: 0.04em; white-space: nowrap; }
    .nut-meal-items {
        max-height: 220px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .nut-meal-item { padding: 0.4rem 0.7rem; }
    .nut-item-info { min-width: 0; }
    .nut-item-name { font-size: 0.9rem; white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; }
    .nut-add-btn {
        min-width: 40px !important;
        min-height: 40px !important;
        width: 40px !important;
        height: 40px !important;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ISSUE #2: FOOD MODAL - Proper mobile sizing with breathing room
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 600px) {
    .modal-content {
        max-width: 95vw !important;
        max-height: 85vh !important;
        margin: 0 auto;
        width: 95vw;
    }

    .food-modal-content {
        max-width: 95vw !important;
        max-height: 85vh !important;
        width: 95vw;
    }

    .modal-header {
        padding: 1rem 0.75rem !important;
    }

    .modal-body {
        padding: 0.75rem !important;
    }

    .modal-close {
        font-size: 1.8rem;
        padding: 0.5rem;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ISSUE #3: MEAL SELECTOR BUTTONS - Apple HIG 44px touch targets
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.fmt-meal-btn {
    min-height: 44px !important;
    min-width: 60px;
    padding: 10px 16px !important;
    font-size: 0.85rem !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 600px) {
    .fmt-meal-selector {
        padding: 0.5rem 0;
    }

    .fmt-meal-btns {
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .fmt-meal-btn {
        flex: 0 1 calc(50% - 0.25rem);
        min-width: 100px;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ISSUE #4: FOOD TAB BUTTONS - Proper touch targets
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.fmt-tab {
    min-height: 48px !important;
    padding: 12px 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.82rem !important;
}

@media (max-width: 600px) {
    .fmt-tab {
        padding: 10px 6px !important;
        font-size: 0.7rem !important;
        flex: 1;
        min-width: 0;
    }

    .food-modal-tabs {
        gap: 4px;
    }
}

/* Wrap tabs on very small screens */
@media (max-width: 400px) {
    .food-modal-tabs {
        flex-wrap: wrap;
    }

    .fmt-tab {
        flex: 0 1 calc(50% - 2px);
        min-height: 44px !important;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ISSUE #5: BARCODE VIDEO - Responsive scaling
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#barcode-video-container {
    max-width: 100% !important;
    width: 100%;
    margin: 1rem auto 0;
    position: relative;
}

#barcode-video {
    display: block;
    width: 100% !important;
    max-width: 500px;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
}

#barcode-overlay {
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 600px) {
    #barcode-video-container {
        max-width: calc(100% - 1rem) !important;
        margin: 0.5rem auto;
    }

    #barcode-video {
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ISSUE #6: BARCODE TARGET BOX - Proper aspect ratio
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.barcode-target-box {
    width: 85% !important;
    height: 35% !important;
    aspect-ratio: 16 / 6;
    border: 3px solid rgba(0, 255, 0, 0.8) !important;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4) !important;
}

@media (max-width: 500px) {
    .barcode-target-box {
        width: 90% !important;
        height: 30% !important;
        aspect-ratio: 4 / 1;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ISSUE #7: CAMERA/UPLOAD BUTTONS - Stack vertically on mobile
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.photo-choice-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 500px) {
    .photo-choice-buttons {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }

    .photo-choice-btn {
        min-height: 48px !important;
        font-size: 0.95rem;
        padding: 0.75rem 1rem;
        width: 100%;
    }
}

/* Camera controls buttons */
.camera-controls {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

.camera-controls button {
    min-height: 44px;
    min-width: 100px;
    padding: 0.75rem 1.5rem;
}

@media (max-width: 500px) {
    .camera-controls {
        flex-direction: column;
        gap: 0.75rem;
    }

    .camera-controls button {
        width: 100%;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ISSUE #8: SAFE AREA INSETS - iPhone notch & Android gesture bar
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

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

.modal-content {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

.modal-header {
    padding-top: calc(1rem + env(safe-area-inset-top));
}

.camera-controls,
.preview-controls {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
}

/* Bottom buttons in barcode/photo scanner */
#stop-barcode-scan,
#cancel-camera-btn,
#capture-photo-btn {
    margin-bottom: env(safe-area-inset-bottom);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ISSUE #9 & #11: INPUT FONT SIZES - Prevent iOS auto-zoom (16px minimum)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* USDA search input */
.usda-search-box input,
#usda-search-input {
    font-size: 1rem !important;
    padding: 0.75rem !important;
    min-height: 44px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
}

/* Quick picks search */
#food-search {
    font-size: 1rem !important;
    padding: 0.75rem !important;
    min-height: 44px;
}

/* All inputs in modals */
.modal-body input[type="text"],
.modal-body input[type="search"] {
    font-size: 1rem !important;
}

@media (max-width: 600px) {
    .usda-search-box {
        margin-bottom: 0.5rem;
    }

    .search-box {
        margin-bottom: 0.5rem;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ISSUE #10: KEYBOARD HANDLING - Space for mobile keyboard
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 600px) {
    .modal-body {
        max-height: calc(85vh - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Results containers scroll independently */
    .food-results,
    .usda-results,
    #food-results {
        max-height: calc(85vh - 200px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GENERAL MOBILE IMPROVEMENTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Food result items - better tap targets */
.food-result-item {
    min-height: 56px;
    padding: 0.75rem !important;
    cursor: pointer;
}

@media (max-width: 600px) {
    .food-result-item {
        min-height: 60px;
    }
}

/* Photo/Barcode hints - readable on mobile */
.photo-hint {
    font-size: 0.9rem !important;
    padding: 0.75rem;
    line-height: 1.4;
}

/* Barcode product card - better mobile layout */
.barcode-product-card {
    padding: 1rem;
}

.barcode-product-card h3 {
    font-size: 1.1rem;
    margin: 0.5rem 0;
}

/* Photo macros display */
.photo-macros {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin: 1rem 0;
}

@media (max-width: 400px) {
    .photo-macros {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

/* Nutrition macro bars - better visibility on mobile */
@media (max-width: 600px) {
    .nut-mbar {
        margin-bottom: 0.5rem;
    }

    .nut-mbar-name {
        font-size: 0.75rem;
    }

    .nut-mbar-val {
        font-size: 0.7rem;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   iOS-SPECIFIC FIXES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Prevent iOS rubber-band scrolling on modal overlay */
.modal-overlay {
    overscroll-behavior: contain;
}

/* Prevent iOS input zoom when tapping disabled inputs */
input:disabled {
    font-size: 1rem !important;
}

/* iOS video playback fixes */
video {
    -webkit-playsinline: true;
    playsinline: true;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ANDROID-SPECIFIC FIXES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Android Chrome tap highlight */
* {
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.2);
}

/* Android keyboard doesn't resize viewport */
@supports (-webkit-touch-callout: none) {
    .modal-body {
        max-height: calc(100vh - 120px);
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ACCESSIBILITY IMPROVEMENTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Focus states for keyboard navigation */
.fmt-meal-btn:focus,
.fmt-tab:focus,
.photo-choice-btn:focus {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .barcode-target-box {
        border-width: 4px !important;
    }

    .nut-meal-col {
        border-width: 2px;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   END OF MOBILE FIXES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */