/* App shell: lock to viewport, scroll inside content area */

html,
body {
    height: 100%;
    overflow: hidden;
}

.app-wrap {
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    grid-template-rows: var(--app-header-height) minmax(0, 1fr);
    grid-template-areas: 'header header' 'sidebar main';
}

/* Top-nav variant: sidebar sits between header and main */
.set-nav-top .app-wrap {
    grid-template-rows: var(--app-header-height) var(--menu-top-height) minmax(0, 1fr);
    grid-template-areas: 'header header' 'sidebar sidebar' 'main main';
}

/* Grid cell for main — allow flex children to constrain */
.app-body {
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

/* Flex column inside app-body (content + footer) */
.app-content {
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

/* Actual scroll container for page content */
.app-content .content-wrapper {
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Horizontal counterpart of the min-height rules: .app-body is a grid item and the
   wrappers below it are flex items, all defaulting to min-width:auto — they refuse
   to shrink below their widest descendant, so a single nowrap line or wide table
   stretched the WHOLE shell (header included) past the viewport, and the
   overflow-x:hidden above amputated the excess instead of scrolling it. With these
   the shell holds the viewport width and each page's own content decides whether
   to wrap or scroll internally. */
.app-header,
.main-content {
    min-width: 0;
}

/* The header is a flex row (hamburger · account selector · icon buttons). Let the
   selector's flex group give up width instead of shoving the icons off-screen. */
.app-header > .d-flex.flex-grow-1 {
    min-width: 0;
}

/* Sidebar scrolls independently */
.app-sidebar {
    height: 100%;
    overflow-y: auto;
}

/* In top-nav mode the grid has an extra row — keep main area constrained */
.set-nav-top .app-body {
    height: 100%;
    min-height: 0;
}