/* ========================================
   MOBILE/TABLET APP-LIKE NAVIGATION
   Enhanced navigation behavior for mobile devices
   ======================================== */

/* Mobile Back Button - Hidden by default */
.mobile-back-button {
    display: none;
}

/* MOBILE & TABLET ONLY - Navigation behavior */
@media (max-width: 1024px) {
    /* Mobile Back Button Styles */
    .mobile-back-button {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: white;
        border-bottom: 1px solid #e2e8f0;
        z-index: 999;
        align-items: center;
        padding: 0 1rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .mobile-back-button button {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: none;
        border: none;
        font-size: 1rem;
        font-weight: 600;
        color: #1e293b;
        cursor: pointer;
        padding: 0.5rem;
        margin-left: -0.5rem;
        border-radius: 8px;
        transition: background-color 0.2s;
    }

    .mobile-back-button button:active {
        background-color: #f1f5f9;
    }

    .mobile-back-button svg {
        width: 24px;
        height: 24px;
        stroke: currentColor;
    }

    /* Show bottom nav only on main screens */
    body[data-page-type="main-screen"] .mobile-bottom-nav {
        display: flex !important;
    }

    /* Hide bottom nav on internal pages */
    body[data-page-type="internal-page"] .mobile-bottom-nav {
        display: none !important;
    }

    /* Show back button on internal pages */
    body[data-page-type="internal-page"] .mobile-back-button {
        display: flex !important;
    }

    /* Add top padding when back button is visible */
    body[data-page-type="internal-page"] .authenticated-content {
        padding-top: 56px;
    }

    /* Hide dashboard navbar on internal pages for cleaner look */
    body[data-page-type="internal-page"] .dashboard-navbar {
        display: none;
    }
}

/* Tablet specific adjustments (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .mobile-back-button {
        height: 64px;
        padding: 0 1.5rem;
    }
    
    .mobile-back-button button {
        font-size: 1.125rem;
        padding: 0.75rem;
    }
    
    .mobile-back-button svg {
        width: 28px;
        height: 28px;
    }
    
    body[data-page-type="internal-page"] .authenticated-content {
        padding-top: 64px;
    }
}

/* Desktop - ensure everything is shown normally */
@media (min-width: 1025px) {
    /* Force hide all mobile navigation elements on desktop */
    .mobile-back-button {
        display: none !important;
    }
    
    .mobile-bottom-nav {
        display: none !important;
    }
    
    /* Ensure desktop navbar is always visible */
    body[data-page-type="internal-page"] .dashboard-navbar {
        display: block !important;
    }
    
    /* Remove any mobile-specific padding on desktop */
    body[data-page-type="internal-page"] .authenticated-content {
        padding-top: 0 !important;
    }
    
    /* Override any mobile-specific rules for desktop */
    body[data-page-type="main-screen"] .mobile-bottom-nav,
    body[data-page-type="internal-page"] .mobile-bottom-nav {
        display: none !important;
    }
}

/* Smooth transitions for better UX */
.mobile-bottom-nav,
.mobile-back-button {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Optional: Slide-in animation for back button */
@keyframes slideInFromTop {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

body[data-page-type="internal-page"] .mobile-back-button {
    animation: slideInFromTop 0.3s ease;
}