/**
 * HIDE TOP NAVIGATION ON MOBILE
 * Mobile apps use bottom navigation only - no top nav bar
 */

@media (max-width: 768px) {
    /* Hide the entire top navigation bar */
    .app-nav,
    nav.app-nav {
        display: none !important;
    }

    /* Adjust main content to start at top since no top nav */
    main,
    #app > div,
    .page-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Ensure bottom nav is visible and positioned correctly */
    .bottom-nav,
    nav.bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        background: rgba(0, 0, 0, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
    }

    /* Adjust page content for bottom nav only */
    .page,
    .dashboard-page,
    .nutrition-page,
    .training-page,
    .rehab-page,
    .community-page,
    .timetable-page,
    .profile-page {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0)) !important;
        padding-top: 0 !important;
    }

    /* Header should be minimal or hidden */
    header,
    .app-header {
        display: none !important;
    }

    /* Page titles can have reduced top padding */
    .page-header,
    h1.page-title {
        margin-top: 1rem !important;
        padding-top: 0.5rem !important;
    }
}

/* Desktop: Show top nav, hide bottom nav */
@media (min-width: 769px) {
    .bottom-nav,
    nav.bottom-nav {
        display: none !important;
    }

    .app-nav,
    nav.app-nav {
        display: flex !important;
    }
}