/* ==========================================================================
   LERUOCARE UNBREAKABLE MASTER LAYOUT (CSS GRID MACRO-STRUCTURE)
   ========================================================================== */

:root {
    --sidebar-width: 260px;
    --navbar-height: 70px;
}

/* Master Grid Container */
body.has-sidebar #app-root {
    display: grid !important;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important;
    height: 100vh !important;
    width: 100vw !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--bg-sand, #F4F1E1) !important;
}

/* 1. The Sidebar Column */
body.has-sidebar #sidebar-root {
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background-color: var(--bg-sand, #F4F1E1) !important;
    border-right: 1px solid var(--border-color, #EAE5D1) !important;
    z-index: 100 !important;
    box-sizing: border-box !important;
}

/* 2. The Main Column (Houses Navbar and Scrollable Content) */
body.has-sidebar #main-column {
    display: grid !important;
    grid-template-rows: var(--navbar-height) minmax(0, 1fr) !important;
    height: 100vh !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* 3. The Navbar (Fixed Top Header) */
body.has-sidebar #navbar-root {
    height: var(--navbar-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 32px !important;
    border-bottom: 1px solid var(--border-color, #EAE5D1) !important;
    background-color: var(--bg-sand, #F4F1E1) !important;
    box-sizing: border-box !important;
    z-index: 50 !important;
}

/* 4. The Content Area (The ONLY scrollable viewport) */
body.has-sidebar #content-root {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 32px !important;
    background-color: var(--bg-sand, #F4F1E1) !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* Mobile Sidebar Backdrop Overlay */
.mobile-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(44, 62, 80, 0.5);
    backdrop-filter: blur(2px);
    z-index: 999;
}

.mobile-sidebar-overlay.active {
    display: block;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS BREAKPOINTS (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
    body.has-sidebar #app-root {
        grid-template-columns: 1fr !important;
    }

    body.has-sidebar #sidebar-root {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 280px !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 1000 !important;
        box-shadow: 4px 0 16px rgba(0,0,0,0.15) !important;
    }

    body.has-sidebar #sidebar-root.mobile-open {
        transform: translateX(0) !important;
    }

    body.has-sidebar #navbar-root {
        padding: 0 16px !important;
    }

    body.has-sidebar #content-root {
        padding: 16px !important;
    }
}