/* =========================================
   1. CORE SHELL (PC & BASE LAYOUT)
   ========================================= */
   #app {
    display: flex;
    height: 100dvh;
    width: 100dvw;
    overflow: hidden;
}

#sidebar-container {
    width: 240px;
    background-color: var(--bg-surface);
    border-right: 1px solid var(--border-structural);
    transition: width var(--transition-speed-normal) var(--easing-standard);
    will-change: width, transform;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 100;
}

#sidebar-container.collapsed {
    width: 70px;
}

#viewport-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-base);
    position: relative;
    overflow: hidden;
    height: 100dvh;
}

/* =========================================
   2. SELLING WORKSPACE (PC DEFAULT)
   ========================================= */
.selling-workspace {
    display: flex;
    flex-direction: row; /* Strict side-by-side for PC */
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.grid-section {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto; /* Grid scrolls independently */
}

/* Original PC Cart Style */
.cart-section {
    width: 300px;
    background-color: var(--bg-surface);
    border-left: 1px solid var(--border-structural);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform var(--transition-speed-normal) var(--easing-standard);
}


/* =========================================
   3. TABLET OVERRIDES (FLOATING CART)
   ========================================= */
@media (max-width: 768px) {
    .selling-workspace {
        display: block; 
    }
    
    .grid-section {
        height: 100%;
        padding-bottom: 120px; /* Keeps space so the Floating Button doesn't block products */
        overflow-y: auto; /* Ensures the grid scrolls perfectly */
        box-sizing: border-box;
    }
    
    .cart-section {
        position: fixed;
        bottom: calc(70px + 1rem);
        right: 0;
        height: calc(100dvh - 70px); /* Fills screen down to the mobile nav bar */
        width: 85%;
        max-width: 400px;
        border-left: 1px solid var(--border-structural);
        border-bottom: 1px solid var(--border-structural);
        border-radius: 16px 0 0 16px; /* Rounds the bottom left corner cleanly */
        box-shadow: -10px 0 40px rgba(0,0,0,0.8);
        z-index: 1500;
        overflow: hidden; 
        
        /* Hidden state - pushed off screen to the right */
        transform: translateX(105%);
        transition: transform var(--transition-speed-normal) var(--easing-standard);
    }

    .cart-section.mobile-open {
        transform: translateX(0);
    }
}


/* =========================================
   4. MOBILE OVERRIDES (BOTTOM NAV BAR)
   ========================================= */
@media (max-width: 768px) {
    #app {
        flex-direction: column;
    }

    #sidebar-container {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 70px;
        flex-direction: row;
        justify-content: space-around;
        border-right: none;
        border-top: 1px solid var(--border-structural);
        transform: none !important; /* Overrides the PC collapse transform */
        z-index: 2000;
    }

    /* Force full width on mobile even if state says 'collapsed' */
    #sidebar-container.collapsed {
        width: 100%;
    }

    #viewport-container {
        /* height: calc(100vh - 70px);  */
        height: calc(100dvh - 70px); 
    }
    
    .cart-section {
        bottom: 80px; 
        height: 65dvh; /* Maximize usable space on small phones */
    }
}

#view-layer {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

#view-layer > *:not(.selling-workspace) {
    padding-bottom: 3rem;
}