/*-- public/css/mobile.css  --*/

/**
 * Fitness Tracker - Mobile CSS
 * Mobile-specific styles for the application
 */
/* Mobile bottom navigation */
.mobile-nav {
    display: none;
}

/* Mobile Styles (max-width: 768px) */
@media (max-width: 768px) {
    body {
        padding-bottom: 70px; /* Space for mobile nav */
    }
    
    /* Hide sidebar on mobile */
    .sidebar {
        display: none;
    }
    
    /* Full width main content */
    .main-content {
        margin-left: 0;
        padding: 15px;
    }
    

    
    /* Only show mobile navigation on mobile screens */
    @media (max-width: 768px) {
        body {
            padding-bottom: 60px; /* Space for mobile nav */
        }
        
        /* Hide sidebar on mobile */
        .sidebar {
            display: none;
        }
        
        /* Full width main content */
        .main-content {
            margin-left: 0;
            padding: 15px;
        }
        
        /* Mobile bottom navigation - only visible on mobile */
        .mobile-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: var(--surface-color);
            border-top: 1px solid var(--border-color);
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            height: 60px;
            padding-bottom: env(safe-area-inset-bottom, 0);
        }
        
        .mobile-nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px 5px;
            color: var(--on-background);
            text-decoration: none;
            transition: color 0.2s ease;
        }
        
        /* Simple hover effect */
        .mobile-nav-item:hover, 
        .mobile-nav-item:active {
            color: var(--primary-color);
        }
        
        /* Active state - only color the icon and add top border */
        .mobile-nav-item.active .mobile-nav-icon {
            color: var(--primary-color);
        }
        
        /* Top line for active item */
        .mobile-nav-item.active::before {
            content: '';
            position: absolute;
            top: 0;
            left: 30%;
            right: 30%;
            height: 3px;
            background-color: var(--primary-color);
        }
        
        .mobile-nav-icon {
            font-size: 20px;
            margin-bottom: 3px;
        }
        
        .mobile-nav-label {
            font-size: 10px;
            text-align: center;
        }
    }
    
    /* Small mobile devices (max-width: 375px) */
    @media (max-width: 375px) {
        /* Smaller mobile nav */
        .mobile-nav {
            height: 50px;
        }
        
        .mobile-nav-icon {
            font-size: 18px;
        }
        
        .mobile-nav-label {
            font-size: 9px;
        }
    }
    
    /* Handle iPhone X and newer safe areas */
    @supports (padding: max(0px)) {
        .mobile-nav {
            padding-bottom: max(0px, env(safe-area-inset-bottom));
        }
        
        body {
            padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
        }
    }
    
    /* Page headers */
    h1 {
        font-size: 1.5rem;
    }
    
    .page-header {
        padding: 10px 0;
        margin-bottom: 15px;
    }
    
    /* Cards */
    .card {
        margin-bottom: 15px;
    }
    
    .card-header {
        padding: 12px 15px;
    }
    
    .card-body {
        padding: 15px;
    }
    
    /* Forms */
    .form-label {
        margin-bottom: 3px;
    }
    
    .form-control, .form-select, .btn {
        font-size: 14px;
        padding: 8px 12px;
    }
    
    /* Camera and image capture */
    .camera-placeholder {
        min-height: 150px;
    }
    
    #cameraPreview, #captureCanvas {
        max-height: 250px;
    }
    
    /* Food tracking */
    .food-item {
        padding-bottom: 12px;
        margin-bottom: 12px;
    }
    
    .food-image img {
        width: 70px;
        height: 70px;
    }
    
    .food-description p {
        font-size: 14px;
        margin-bottom: 5px;
    }
    
    /* Exercise tracking */
    .exercise-form {
        padding: 10px;
    }
    
    /* Stats boxes */
    .stats-box {
        padding: 10px;
    }
    
    .stats-number {
        font-size: 1.5rem;
    }
    
    /* Date selector */
    .date-selector {
        padding: 10px;
    }
    
    /* Modals */
    .modal-header {
        padding: 10px 15px;
    }
    
    .modal-body {
        padding: 15px;
    }
    
    .modal-footer {
        padding: 10px 15px;
    }
    
    /* Responsive tables */
    .table-responsive {
        margin-bottom: 15px;
    }
    
    /* Better tap targets */
    .btn, .form-control, .form-select, .nav-link {
        min-height: 44px; /* Apple minimum touch target size */
    }
    
    .btn-sm {
        min-height: 36px;
    }
    
    /* Improve mobile form layouts */
    .row .col, .row .col-md-6 {
        margin-bottom: 10px;
    }
}

/* Small mobile devices (max-width: 375px) */
@media (max-width: 375px) {
    /* Even more compact UI */
    .card-body {
        padding: 12px;
    }
    
    h1 {
        font-size: 1.4rem;
    }
    
    /* Smaller bottom navigation */
    .mobile-nav {
        height: 55px;
    }
    
    .mobile-nav-icon {
        font-size: 18px;
    }
    
    .mobile-nav-label {
        font-size: 9px;
    }
    
    /* Vertical stacking for certain forms */
    .row.small-stack {
        flex-direction: column;
    }
    
    .row.small-stack > [class*="col-"] {
        width: 100%;
    }
}

/* Mobile landscape orientation */
@media (max-height: 500px) and (orientation: landscape) {
    .mobile-nav {
        height: 45px;
    }
    
    .mobile-nav-label {
        display: none;
    }
    
    .mobile-nav-icon {
        font-size: 20px;
        margin-bottom: 0;
    }
    
    body {
        padding-bottom: 45px;
    }
}

/* Handle iPhone X and newer safe areas */
@supports (padding: max(0px)) {
    .mobile-nav {
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        height: auto;
    }
    
    body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
    }
}

/* Pull-to-refresh indication */
@keyframes pull-indicator {
    0% { transform: translateY(-10px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.pull-indicator {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 10px;
    animation: pull-indicator 0.3s ease-out;
}

/* Dark mode adjustments for mobile */
@media (prefers-color-scheme: dark) {
    /* Only apply if user hasn't set preference explicitly */
    body:not([data-theme]) {
        --background-color: #121212;
        --surface-color: #1E1E1E;
        --on-background: #FFFFFF;
        --on-surface: #FFFFFF;
        --border-color: #333333;
    }
}