/* css/layout.css */
body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- Layout Variables --- */
:root {
    --nav-drawer-width: 280px;
    --header-height: 64px;
}

/* --- App Shell Grid --- */
.app_root {
    display: grid;
    grid-template-rows: var(--header-height) 1fr; 
    grid-template-columns: var(--nav-drawer-width) 1fr; /* Default: 2 Columns */
    height: 100%;
    transition: all 0.3s ease;
}

/* --- Header --- */
.layout_header {
    grid-row: 1;
    grid-column: 1 / -1; 
    background-color: var(--md-sys-color-surface);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    align-items: center;
    padding: 0 16px;
    z-index: 10;
}

.md3_top_app_bar {
    display: flex;
    width: 100%;
    align-items: center;
}

/* --- Drawer --- */
.layout_drawer {
    grid-row: 2;
    grid-column: 1;
    background-color: var(--md-sys-color-surface-container);
    padding: 12px;
    overflow-y: auto;
    border-right: 1px solid var(--md-sys-color-outline-variant);
}

/* --- Main Content --- */
.layout_main {
    grid-row: 2;
    grid-column: 2; /* Default: Sits in the 2nd column */
    padding: 24px;
    overflow-y: auto;
    position: relative;
}

/* --- MOBILE / TABLET OVERRIDES (Max Width 768px) --- */
@media (max-width: 768px) {
    
    /* 1. Change Grid to 1 Column */
    .app_root {
        grid-template-columns: 1fr; 
    }

    /* 2. Hide the Drawer */
    .layout_drawer {
        display: none; 
    }

    /* 3. CRITICAL FIX: Move Main Content to Column 1 */
    .layout_main {
        grid-column: 1; 
    }

    /* 4. Utility to hide header title */
    .mobile-hide {
        display: none !important;
    }
    
    /* Add this INSIDE the @media block */
    .layout_drawer.mobile-open {
        display: block !important;
        position: fixed;
        top: 64px; /* Height of the header */
        bottom: 0;
        left: 0;
        width: 280px;
        z-index: 50; /* Sit on top of everything */
        box-shadow: 4px 0 10px rgba(0,0,0,0.2); /* Drop shadow */
    }
}