/**
 * LuvMyRecipe: App Shell Styles
 * Provides the mobile app layout, hiding standard scrollbars, and sticking the nav to the bottom.
 */

/* 1. App Body Reset */
/* We prevent scrolling on the body itself to avoid the whole page "bouncing" on iOS */
.lmr-app-body {
    margin: 0;
    padding: 0;
    overflow: hidden; 
    background-color: #fff8dc; /* Updated overall app background */
    font-family: sans-serif;
}

/* NEW: Top Navigation Header */
#lmr-top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff2b6; /* Hard bar color */
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    /* NEW: Hardware Safe Areas */
    padding-top: env(safe-area-inset-top);
    height: calc(60px + env(safe-area-inset-top));
    box-sizing: border-box;
}

.lmr-header-logo {
    max-height: 40px; /* Leaves 10px of breathing room on top and bottom */
    width: auto;
    object-fit: contain;
}

/* 2. Main App Container */
#lmr-app-container {
    position: fixed;
    left: 0;
    right: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* NEW: Hardware Safe Areas */
    top: calc(60px + env(safe-area-inset-top)); 
    bottom: calc(60px + env(safe-area-inset-bottom)); 
}

/* 3. Tab Visibility Setup */
/* Hide all tabs by default so they don't stack on top of each other */
.lmr-app-tab {
    display: none;
    padding: 20px;
}

/* The active class makes the current tab visible */
.lmr-app-tab.active-tab {
    display: block;
}

/* 4. Bottom Navigation Bar */
#lmr-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff2b6; /* Darker yellow base */
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 9999;
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(60px + env(safe-area-inset-bottom));
    box-sizing: border-box;
}

/* 5. Navigation Buttons */
.lmr-nav-btn {
    background-color: #fff2b6; /* Darker yellow inactive state */
    border: none;
    font-size: 15px; /* Increased from 14px for better readability */
    color: black; /* Solid black text */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 4px; /* Added breathing room for narrow screens */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Hover state for navigation buttons */
.lmr-nav-btn:hover {
    background-color: #fff8dc; /* Lighter yellow on hover */
}

/* Active state for the currently viewed tab's button */
.lmr-nav-btn.active-nav {
    background-color: #9caf88; /* Green active state */
    color: black; 
    font-weight: bold;
}

/* 6. Navigation Icon Styling */
.lmr-nav-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    /* Solid color at all times */
}

/* Make the icon solid when its tab is active */
.lmr-nav-btn.active-nav .lmr-nav-icon {
    opacity: 1; 
}