/* 全局布局稳定性修复：只处理溢出、收缩和小屏适配，不改变业务结构 */
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; overflow-x: clip; }
body { min-width: 320px; max-width: 100%; overflow-x: hidden; }
#pageContainer, .main-content, .sidebar, .app-card, .card, .card-body,
.modal-content, .modal-body, .table-responsive, .tab-content, .tab-pane {
  min-width: 0;
}
.main-content { width: auto; max-width: 100%; }
#pageContainer { max-width: 100%; }
.page-header, .toolbar, .filter-toolbar, .list-toolbar, .table-toolbar,
.page-actions, .card-header, .modal-header, .modal-footer {
  min-width: 0; flex-wrap: wrap;
}
.page-header > *, .toolbar > *, .filter-toolbar > *, .list-toolbar > *,
.table-toolbar > *, .page-actions > * { min-width: 0; max-width: 100%; }
/* 表格保留横向滚动，不挤压列内容导致错位 */
.table-responsive { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive > .table { margin-bottom: 0; }
.table { max-width: 100%; }
.table th, .table td { vertical-align: middle; }
/* 长名称、备注、路径允许换行；条码等由模块自身规则控制 */
.text-break, .product-name, .supplier-name, .remark, .description,
.page-subtitle, .card-text { overflow-wrap: anywhere; }
/* 表单控件在 flex/grid 中可收缩，避免撑破筛选栏 */
.form-control, .form-select, input, select, textarea { max-width: 100%; min-width: 0; }
img, video, canvas, svg { max-width: 100%; }
/* 网格子项必须允许收缩，避免长内容撑开整行 */
[class*="-grid"], .row, .d-flex { min-width: 0; }
.row > *, [class*="-grid"] > * { min-width: 0; }
/* 弹窗不超出可视区域 */
.modal-dialog { max-width: min(900px, calc(100vw - 24px)); }
.modal-dialog-scrollable .modal-body { overflow-y: auto; }
@media (max-width: 768px) {
  .main-content { width: 100%; max-width: 100%; min-width: 0; }
  .page-header { align-items: stretch; }
  .page-header .page-actions, .page-header .d-flex { flex-wrap: wrap; }
  .filter-toolbar, .toolbar, .list-toolbar, .table-toolbar { align-items: stretch; }
  .filter-toolbar > .form-control, .filter-toolbar > .form-select,
  .toolbar > .form-control, .toolbar > .form-select { flex: 1 1 130px; }
  .modal-dialog { width: auto; margin: 10px; }
  .modal-dialog-centered { min-height: calc(100% - 20px); }
  .modal-footer { justify-content: flex-end; }
}
@media (max-width: 480px) {
  .main-content { padding-left: 8px; padding-right: 8px; }
  .page-header h1, .page-header h2, .page-header h3, .page-header h4 { max-width: 100%; overflow-wrap: anywhere; }
  .page-actions .btn { max-width: 100%; white-space: normal; }
  .card-header { gap: 8px; }
}