/* ============================
   MainLayout (mainlayout.css)
   ============================ */

:root {
    --sidebar-w: 240px; /* bate com navmenu.css */
    --shell-pad: clamp(12px, 2.2vw, 24px);
}

/* Desktop: grid normal */
.app-layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    height: 100vh;
    overflow: hidden;
}

/* Host da sidebar (container do NavMenu) */
.layout-sidebar {
    width: var(--sidebar-w);
    height: 100vh;
    overflow: hidden;
}

/* Conteúdo principal */
.main-content {
    height: 100vh;
    overflow: auto;
    background: var(--bg, #f7f7f7);
    min-width: 0;
}

.main-shell {
    --bs-gutter-x: 1.5rem;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-top: var(--shell-pad);
    padding-bottom: var(--shell-pad);
    padding-left: calc(var(--shell-pad) + (var(--bs-gutter-x) * 0.5));
    padding-right: calc(var(--shell-pad) + (var(--bs-gutter-x) * 0.5));
    box-sizing: border-box;
}

/* Backdrop do drawer (mobile) */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1500;
}

/* Mobile: sidebar vira drawer */
@media (max-width: 991.98px) {
    .app-layout {
        grid-template-columns: 1fr;
    }

    .layout-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        max-width: 85vw;
        height: 100vh;
        transform: translateX(-110%);
        transition: transform .2s ease;
        z-index: 1600;
    }

        .layout-sidebar.is-open {
            transform: translateX(0);
        }
}

/* Telas bem estreitas */
@media (max-width: 520px) {
    :root {
        --sidebar-w: 220px;
    }
}