/* Tab Bar Fixes for Safari iOS and PWA positioning */

/* Fix tab bar to always show at bottom */
.tab-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bg-secondary, #1a1a2e);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-around;
    align-items: center; /* Center items vertically */
}

/* Tab items should be at the very top of the tab bar area */
.tab-item {
    flex: 1;
    height: 50px; /* Fixed height, not full container height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 8px 0;
    -webkit-tap-highlight-color: transparent;
}

/* Ensure content doesn't go under tab bar */
.app-content {
    padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
}

/* Safari iOS specific fixes */
@supports (-webkit-touch-callout: none) {
    .tab-bar {
        position: fixed !important;
        bottom: 0 !important;
        transform: translateZ(0); /* Force GPU acceleration */
        -webkit-transform: translateZ(0);
    }
}

/* PWA specific handled in pwa-fixes.css */

/* iPhone X and newer specific adjustments */
@supports (padding: max(0px)) {
    .tab-bar {
        padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
    }
}

/* Fix for screens to not overlap with tab bar */
.screen {
    padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)) !important;
}

/* In PWA, use THRIVE's approach */
@media (display-mode: standalone) {
    /* Tab bar at bottom like THRIVE */
    .tab-bar {
        display: flex !important;
        position: fixed !important;
        bottom: -10px !important; /* Move 10px lower for perfect positioning */
        left: 0 !important;
        right: 0 !important;
        height: 60px !important;
        background: rgba(20, 20, 20, 0.95) !important;
        backdrop-filter: saturate(180%) blur(20px) !important;
        -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
        border-top: 1px solid rgba(255, 215, 0, 0.1) !important;
        box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5) !important;
        z-index: 1000 !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
    
    /* Content padding */
    .screen {
        padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important;
    }
    
    /* Add padding to body like THRIVE */
    body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important;
    }
}