/**
 * Classroom Monitor shared app shell
 * Sidebar (fixed) + one content column that owns main + footer.
 * Prevents footer/content sliding under the sidebar.
 */

:root {
    --cm-sidebar-width: 260px;
    --cm-sidebar-collapsed-width: 80px;
}

.cm-app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.cm-app-shell > .classroom-footer {
    margin-top: auto;
    width: 100%;
    margin-left: 0;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    /*
     * Shell owns the left offset. Body padding is disabled when the shell is present
     * so we never double-offset or leave main/footer under the fixed sidebar.
     */
    body.with-sidebar:has(> .cm-app-shell) {
        padding-left: 0 !important;
    }

    body.with-sidebar > .cm-app-shell {
        margin-left: var(--cm-sidebar-width);
        width: calc(100vw - var(--cm-sidebar-width));
        max-width: none;
        min-height: 100vh;
        transition: margin-left 0.25s ease, width 0.25s ease;
    }

    body.with-sidebar.sidebar-collapsed > .cm-app-shell {
        margin-left: var(--cm-sidebar-collapsed-width);
        width: calc(100vw - var(--cm-sidebar-collapsed-width));
    }

    /* Legacy pages still using body padding only (no shell yet) */
    body.with-sidebar:not(:has(> .cm-app-shell)) {
        padding-left: var(--cm-sidebar-width);
        box-sizing: border-box;
    }

    body.with-sidebar.sidebar-collapsed:not(:has(> .cm-app-shell)) {
        padding-left: var(--cm-sidebar-collapsed-width);
    }
}

@media (max-width: 1023px) {
    body.with-sidebar > .cm-app-shell {
        margin-left: 0;
        width: 100%;
    }
}