/* ============================================================
 * 列表页视口自适应
 * 目标：页面外层不出现滚动条，列表/表格区域占满可用高度并在内部滚动
 * 说明：使用 :has() 精确命中“包含表格/卡片网格”的列表页根节点，
 *       不影响首页、系统设置等内容页（它们仍在页面内容区内滚动）。
 * ============================================================ */

/* 整体骨架固定为视口高度，避免整页出现滚动条 */
.app-shell{height:100vh;height:100dvh;min-height:0;overflow:hidden}
.sidebar{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.main-area{height:100%;min-height:0;overflow:hidden}
.page-content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}

/* 列表页根容器：撑满内容区，自身不滚动 */
.page-content>div:has(>.data-table),
.page-content>div:has(>.product-grid),
.page-content>.categories-page{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}

/* 列表页内的标题栏、工具栏、提示、分页等保持自身高度，不参与压缩 */
.page-content>div:has(>.data-table)>*{flex:none}

/* 表格：占满剩余高度，表头固定，表体内部滚动 */
.page-content>div:has(>.data-table)>.data-table{flex:1 1 0;height:auto;min-height:0;display:flex;flex-direction:column}
.data-table>.el-table__inner-wrapper{flex:1 1 auto;min-height:0}
.data-table .el-table__body-wrapper{min-height:0}
.data-table .el-table__empty-block{min-height:60px}

/* 全部配件（卡片网格）：网格区域内部滚动 */
.page-content>div:has(>.product-grid)>.product-grid{flex:1 1 auto;min-height:0;overflow-y:auto;align-content:start;overscroll-behavior:contain}

/* 分类管理：左右两栏撑满高度，右侧小类表格内部滚动 */
.page-content>.categories-page>.page-heading{flex:none}
.page-content>.categories-page>.category-layout{flex:1 1 auto;min-height:0;align-items:stretch}
.page-content>.categories-page .category-tree,
.page-content>.categories-page .category-detail{display:flex;flex-direction:column;height:auto;min-height:0;max-height:none}
.category-tree>.el-card__body,
.category-detail>.el-card__body{display:flex;flex-direction:column;flex:1 1 auto;height:auto;min-height:0;overflow:hidden}
.category-tree>.el-card__body>.card-heading,
.category-detail>.el-card__body>.card-heading{flex:none}
.category-detail>.el-card__body>.el-table{flex:1 1 0;height:auto;min-height:0;display:flex;flex-direction:column}
.category-detail>.el-card__body>.el-table>.el-table__inner-wrapper{flex:1 1 auto;min-height:0}
.category-detail>.el-card__body>.list-pagination{flex:none}

/* 窄屏：分类管理两栏改为上下堆叠，整体在布局区内滚动，各卡片保留可用高度 */
@media(max-width:800px){
  .page-content>.categories-page>.category-layout{overflow-y:auto;align-content:start}
  .page-content>.categories-page .category-tree{height:300px;min-height:300px}
  .page-content>.categories-page .category-detail{height:420px;min-height:420px}
}