/*
 * layout_scroll.css — shared fix for the flex/grid min-height: 0 trap.
 *
 * Several dashboard templates lock the page shell to `height: calc(100vh - Npx); overflow: hidden;`
 * and expect nested `.panel-body` scroll containers to take the overflow. Grid and flex items
 * default to `min-height: auto`, which prevents those panels from shrinking below their content
 * height, so the inner `overflow-y: auto` never fires and content gets clipped by the outer shell.
 *
 * This partial applies `min-height: 0` to the shared `.panel-body` scrollable child and the
 * verified panel container classes via `:where()` so it stays at zero specificity — the mobile
 * overrides in each template (which use `!important`) continue to win on narrow viewports.
 *
 * Utility classes `.scroll-shell` / `.scroll-panel` / `.scroll-body` are exposed for new pages
 * that want to opt into the pattern without reinventing it.
 *
 * See tasks/27a-skills-page-scrollbar-fix.md for the bug context (Card 109).
 */

:where(
    .skills-panel,
    .notes-panel,
    .mining-panel,
    .applicants-panel,
    .members-panel,
    .results-panel,
    .assets-panel,
    .blacklist-panel,
    .flags-panel,
    .panel-body
) {
    min-height: 0;
}

/* Shared utility classes for future dashboards. Page templates can adopt these
   instead of hand-rolling a new `.foo-layout` / `.foo-panel` pair. */
.scroll-shell {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px);
    min-height: 0;
    overflow: hidden;
}

.scroll-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.scroll-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}