/**
 * Shell da área principal — mesmo alinhamento da dashboard em todas as páginas.
 * Carregado após os CSS específicos de cada página.
 */

body:not(.vd-app):not(.login-page) .app-shell > main.app-main{
    width:100%;
    min-width:0;
    max-width:none;
    margin:0;
    padding:0 12px 14px;
}

body:not(.vd-app):not(.login-page) .app-shell > main.app-main .page-head{
    max-width:none;
    margin:10px 0 12px;
}

body:not(.vd-app):not(.login-page) .app-shell > main.app-main :is(
    [class$="-page-stack"],
    .dashboard-page-stack
){
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
}

@media (max-width:1279px){
    body:not(.vd-app):not(.login-page) .app-shell > main.app-main{
        padding-left:14px;
        padding-right:14px;
        padding-bottom:20px;
    }
}

@media (max-width:1100px){
    body:not(.vd-app):not(.login-page) .app-shell > main.app-main{
        padding-left:12px;
        padding-right:12px;
        padding-bottom:18px;
    }
}

/* Espaço do bottom nav — só mobile/tablet; dashboard com folga maior */
@media (max-width:1279px){
    html.has-app-bottom-nav body:not(.vd-app):not(.login-page) .app-shell > main.app-main{
        padding-bottom:var(--app-bottom-nav-offset, calc(66px + env(safe-area-inset-bottom, 0px)));
    }

    html.has-app-bottom-nav:has(.page-head--dashboard) body:not(.vd-app):not(.login-page) .app-shell > main.app-main{
        padding-bottom:var(--app-bottom-nav-offset, calc(78px + env(safe-area-inset-bottom, 0px)));
    }
}