/* Base template styles for layout, navigation, and mobile bar */

body {
    margin: 0;
    min-height: 100vh;
    background-color: #f9fafb;
}

/* Fixed width for greeting to prevent layout shift */
#time-greeting,
#mobile-time-greeting {
    display: inline-block;
    min-width: 150px;
}

/* Fixed header styles */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background-color: white;
}

/* Quick actions menu styles */
.quick-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background-color: white;
    /* Add safe area support for iOS Safari - padding for content */
    padding-bottom: env(safe-area-inset-bottom);
    /* Ensure bar sticks to bottom even during iOS scroll */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* Force hardware acceleration for smooth positioning */
    will-change: transform;
    /* Prevent gap during scroll - ensure it's always at viewport bottom */
    margin-bottom: 0;
    /* Ensure no gap between footer and viewport edge */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* Fix iOS Safari viewport height issues during scroll */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific fixes - ensure no gap between bar and iOS UI */
    html {
        /* Use dynamic viewport height for iOS */
        height: -webkit-fill-available;
    }
    
    body {
        /* Use dynamic viewport height for iOS */
        min-height: -webkit-fill-available;
        min-height: 100dvh;
    }
    
    .quick-actions {
        /* Position at absolute bottom of viewport */
        bottom: 0 !important;
        /* Ensure background extends fully to bottom edge */
        background-color: white;
        /* Extend padding to account for safe area properly */
        padding-bottom: max(env(safe-area-inset-bottom), 0.5rem);
        /* Ensure bar extends to very bottom - no gap */
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        /* Force position during scroll - prevent any gap */
        position: fixed !important;
        /* Ensure it stays at viewport bottom, not document bottom */
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
    
    /* Extend background color to cover safe area gap if any */
    .quick-actions::after {
        content: '';
        position: absolute;
        bottom: calc(-1 * env(safe-area-inset-bottom));
        left: 0;
        right: 0;
        height: env(safe-area-inset-bottom);
        background-color: white;
        pointer-events: none;
        z-index: -1;
    }
}

/* Fixed width containers for consistent layout */
.logo-container {
    width: 200px; /* Reduced width for logo section */
}

@media (max-width: 768px) {
    .logo-container {
        width: auto; /* Allow logo container to be flexible on mobile */
        flex: 1; /* Take available space */
    }
    
    .user-container {
        width: auto !important; /* Override fixed width on mobile */
        flex: 0 0 auto; /* Don't grow, don't shrink, auto basis */
    }
}

.menu-container {
    flex: 1; /* Take remaining space */
    margin-left: 3.5rem; /* Increased from 2rem to 3.5rem for more spacing from logo */
}

.user-container {
    width: 250px; /* Fixed width for user section */
    display: flex;
    justify-content: flex-end;
}

/* Update menu items alignment */
.desktop-menu {
    display: flex;
    justify-content: flex-start;
    gap: 2rem;
    width: 100%;
}