/**
 * Standalone (non-WordPress) /reports/ layout, layered on top of the shared
 * frame in lib/page-frame.css. The frame gives us the slate backdrop, a centred
 * max-width column with grey side borders, the pinned header, and the fixed
 * (viewport-height, internal-scroll) app-shell mode via .hp-page--fixed.
 * Here we only tune the frame variables and the app scroll behaviour.
 * Safe to live-edit in Chrome DevTools.
 */

:root {
    --hp-frame-bg: #3e4a5e;
    --hp-frame-surface: #fff;
    --hp-frame-max-width: 1600px;
    --hp-frame-border: 3px solid #d4d4d4;
}

/*
 * The static bootstrap injects template.html into this wrapper. display:contents
 * removes the wrapper from the box tree so its child (#app) stays a direct
 * flex item of .hp-page and the scrolling layout below keeps working.
 */
.hp-page #hp-report-mount {
    display: contents;
}

/*
 * The app fills the remaining height and its inner .tbl_container scrolls.
 * min-height:0 is essential: without it this flex item refuses to shrink
 * below its content, so the table would push the page taller instead of
 * scrolling internally.
 */
.hp-page #app {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
}