/* 2026-10-29 恢复被主题瘦身（PurgeCSS）误删的 Bootstrap 栅格/响应式工具类
   背景：static/css/style.bundle.css 里 .col-md-7 / .col-sm-12 / .justify-content-md-start /
   .justify-content-md-end 被当成"未使用"删掉了（这些类只出现在 JS 渲染的 x-pagination 组件里，
   不在模板里），导致分页行：左侧「20条/页 共 N 条」居中、右侧页码不靠右、两列还换行。
   这里按 Bootstrap 5 标准定义补回。
   注意：.col-sm-12 必须限定在 <768px，否则会盖掉后加载的 .col-md-* 宽度。 */
@media (min-width: 576px) and (max-width: 767.98px) {
  .col-sm-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 768px) {
  .col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
  .justify-content-md-start { justify-content: flex-start !important; }
  .justify-content-md-end { justify-content: flex-end !important; }
}

/* 分页行被包在 d-flex 容器里时（如 YF打卡 用 <div class="d-flex justify-content-end"> 包 x-pagination），
   .row 会退化成 shrink-to-fit 的 flex 项，宽度只剩内容宽度 → 左边「条/页 + 共 N 条」被挤、整体不贴边。
   这里强制分页 row 在 flex 父级里撑满。 */
.d-flex > .row.mt-7 { flex: 1 1 auto; width: 100%; min-width: 0; }

/* 2026-10-29 「消息通知」等 Vue 渲染页：加载时内容还没挂载 → 页面高度 = 视口，没有滚动条；
   等 Vue 挂载/重要通知弹窗打开时滚动条出现又消失，页面横向跳一下（Windows 上还会闪一条竖线）。
   预留滚动条槽位，切页/首进不再跳动。 */
html {
  /* 滚动条常驻（含内容不足一屏时），避免加载/弹窗时滚动条出现或消失导致横向跳动 */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/* 滚动条已常驻，Bootstrap 打开 modal 时仍会给 body 补 padding-right（原来用于抵消滚动条消失），
   这里滚动条并没有消失，补白反而造成 6~17px 横向跳动 → 归零。滚动锁仍由 body.modal-open{overflow:hidden} 负责。 */
body.modal-open { padding-right: 0 !important; }