/* ============================================
   GLOBAL STYLES - Minimal Global Concerns Only
   ============================================ */

/* Z-Index Scale - Global stacking order */
app-header {
    z-index: 60;
}

app-header nav {
    z-index: 60;
}

/* Global CSS Variables - Consolidated from mobile.css and index-custom.css */
:root {
    /* Header Heights */
    --header-height-mobile: 3rem; /* 80px */
    --header-height-desktop: 5rem; /* 80px */
    
    /* Mobile Header Variables */
    --mobile-header-height-standard: 2rem; /* 80px - standard header height */
    --mobile-header-height-reduced: 2rem; /* 56px - reduced when wizard active */
    --mobile-header-logo-height: 2rem; /* 32px */
    --mobile-header-padding-x: clamp(1rem, 4vw, 1.5rem);
    --mobile-header-btn-size: 2.5rem; /* 40px min touch target */
    --mobile-header-btn-gap: 0.5rem; /* 8px gap between buttons */
    --mobile-menu-width: calc(100vw - 1rem);
    --mobile-menu-max-width: 20rem;
    --mobile-menu-offset: 0.5rem;
    
    /* Ticker Bar Height (Desktop) */
    --ticker-bar-height: 2.5rem; /* ~40px */
    
    /* Touch Targets - Mobile minimums */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;
    
    /* Z-Index Scale */
    --z-base: 1;
    --z-tooltip: 10;
    --z-dropdown: 50;
    --z-sticky: 60;
    --z-overlay: 90;
    --z-modal: 100;
    --z-popup: 1000;
    --z-tooltip-high: 9999;
    --z-toast: 10000;
}

/* iOS Input Zoom Prevention - Apply via Tailwind classes where possible */
/* This is a global concern that affects all inputs on iOS */
@media (max-width: 640px) {
    input[type="time"],
    input[type="date"],
    input[type="text"]:not([class*="text-"]),
    select {
        font-size: 16px;
    }
}

/* ============================================
   BOTTOM NAVIGATION BAR - Mobile Only
   ============================================ */

app-bottom-nav {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 55; /* Below header (60) but above content */
    padding-bottom: env(safe-area-inset-bottom, 0);
    pointer-events: none; /* Allow clicks to pass through container */
}

.bottom-nav-container {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 20px 20px 0 0;
    padding: 0.5rem 1rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0));
    pointer-events: auto; /* Re-enable clicks on content */
}

.dark .bottom-nav-container {
    background: rgba(15, 23, 42, 0.8);
    border-top-color: rgba(51, 65, 85, 0.8);
}

.bottom-nav-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 100%;
    gap: 0.5rem;
}

.bottom-nav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex: 1;
    padding: 0.75rem 0.5rem;
    min-height: 3.5rem; /* 56px - comfortable touch target */
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: rgb(100, 116, 139); /* slate-500 */
    font-size: 0.75rem;
    font-weight: 500;
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav-tab:active {
    transform: scale(0.95);
    background: rgba(241, 245, 249, 0.5);
}

.dark .bottom-nav-tab:active {
    background: rgba(30, 41, 59, 0.5);
}

.bottom-nav-tab.active {
    color: rgb(16, 185, 129); /* emerald-600 */
    background: rgba(16, 185, 129, 0.1);
}

.dark .bottom-nav-tab.active {
    color: rgb(52, 211, 153); /* emerald-400 */
    background: rgba(16, 185, 129, 0.15);
}

.bottom-nav-icon {
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 2;
    transition: all 0.2s ease;
}

.bottom-nav-tab.active .bottom-nav-icon {
    stroke-width: 2.5;
}

.bottom-nav-label {
    font-size: 0.75rem;
    line-height: 1;
    margin-top: 0.125rem;
}

/* Hide on desktop */
@media (min-width: 768px) {
    app-bottom-nav {
        display: none !important;
    }
}

/* Ensure content has bottom padding on mobile to avoid overlap with bottom nav */
/* Only apply to pages that have the bottom nav component */
@media (max-width: 767px) {
    body:has(app-bottom-nav) {
        padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0));
    }
    
    /* For pages with main content, add padding to main instead */
    body:has(app-bottom-nav) main {
        padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0));
    }
}