/* 
   mobile.css
   Dedicated mobile styles for Bros Before Hours.
   Everything inside this file ONLY applies below 768px, ensuring desktop is 100% untouched. 
*/

@media (max-width: 768px) {
    /* 1. Viewport & Fluidity */
    img, video { 
        max-width: 100%; 
        height: auto; 
    }
    
    html, body {
        overflow-x: hidden;
        font-size: 16px; /* Ensure base font is at least 16px for readability */
    }

    /* 2. Touch Targets */
    .btn, .vibe-nav-item, .sidebar-item, button {
        min-height: 44px;
        min-width: 44px;
    }

    /* 3. Layout Restructuring (Mobile First) */
    .app-layout {
        flex-direction: column-reverse; /* Put nav at the bottom */
        height: 100vh;
        width: 100vw;
    }

    /* 4. Bottom Navigation Bar */
    .vibe-nav {
        width: 100%;
        height: 60px;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 0;
        border-top: 1px solid var(--vibe-border);
        background: var(--vibe-sidebar-bg);
        z-index: 2000;
        position: fixed;
        bottom: 0;
        left: 0;
    }

    .vibe-nav-bottom {
        flex-direction: row;
        margin-top: 0;
        gap: 8px;
    }

    .vibe-nav-item {
        margin-bottom: 0;
        padding: 8px;
    }

    /* 5. Main Content Area */
    .vibe-main {
        flex: 1;
        width: 100%;
        margin: 0;
        border-radius: 0;
        margin-bottom: 60px; /* Space for bottom nav */
        display: flex;
        flex-direction: column;
    }

    .vibe-header {
        padding: 0 16px;
        height: 56px;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .vibe-title {
        font-size: 1.1rem;
        white-space: nowrap;
    }

    /* Shrink buttons in topbar on mobile so they fit */
    #topbar-right {
        gap: 8px !important;
    }
    #topbar-right .btn {
        padding: 4px 8px;
        font-size: 0.8rem;
        min-width: auto;
    }

    .vibe-content-scroll {
        padding: 12px;
    }

    /* Fix Explore Map Layout on Mobile */
    .explore-layout {
        height: calc(100vh - 56px - 60px - 24px) !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    .explore-sidebar {
        width: 100% !important;
        height: 45% !important;
        padding: 0.75rem !important;
        border-bottom: 1px solid var(--vibe-border);
        overflow-y: auto !important;
    }
    .explore-map-container {
        width: 100% !important;
        height: 55% !important;
        min-height: 200px !important;
    }

    /* Fix AI Assistant Height on Mobile */
    #ai-assistant-container {
        height: calc(100vh - 56px - 60px - 24px) !important;
        max-height: calc(100vh - 56px - 60px - 24px) !important;
    }

    /* 6. Off-Canvas Sidebar */
    .vibe-sidebar {
        position: fixed;
        top: 0;
        left: -300px; /* Hidden by default */
        width: 280px;
        height: calc(100vh - 60px); /* Account for bottom nav */
        z-index: 1000;
        margin-top: 0;
        border-radius: 0;
        border-right: 1px solid var(--vibe-border);
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: var(--vibe-surface);
    }

    /* Class toggled by Hamburger menu */
    .mobile-sidebar-open .vibe-sidebar {
        left: 0;
    }

    /* Sidebar Overlay */
    .mobile-sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .mobile-sidebar-open .mobile-sidebar-overlay {
        display: block;
        opacity: 1;
    }

    /* 7. Show Hamburger Menu */
    #mobile-menu-btn {
        display: inline-flex !important;
    }

    /* 8. FullCalendar Mobile Adjustments */
    .fc .fc-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .fc .fc-toolbar-title {
        font-size: 1.1rem !important;
        text-align: center;
    }

    /* 9. Modals Full Width */
    .modal {
        width: 95%;
        margin: auto;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Theme Picker Mobile */
    .theme-picker-grid {
        grid-template-columns: 1fr;
    }
}