/* index_mobile.css - Smartphone Bottom Navigation Transformation */

@media (max-width: 768px), screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .app-layout {
        display: block;
        min-height: 100vh;
        background-color: #f8fafc;
        padding: 0;
    }

    /* Sidebar on Mobile - Hidden by default, slides in when open */
    .app-sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        width: 280px !important;
        z-index: 100;
        display: flex !important;
        flex-direction: column;
        background-color: #ffffff;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 20px 0 50px rgba(0,0,0,0.1);
    }

    .app-sidebar.sidebar-open {
        left: 0;
    }

    /* Content Area Adjustments */
    .app-main-content {
        border-radius: 0;
        background: transparent;
        border: none;
        padding-bottom: 100px; /* Space for bottom nav */
    }

    .app-header {
        height: 3.5rem;
        padding: 0 1rem;
        background: #ffffff;
        border-bottom: 1px solid #f1f5f9;
        position: sticky;
        top: 0;
        z-index: 40;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .app-content-viewport {
        padding: 1rem;
        height: auto;
        overflow-y: visible;
    }

    /* Touch-friendly adjustments */
    button {
        min-height: 44px;
        min-width: 44px;
    }
}