/* ============================================================
   layout_fix.css v1 — 响应式布局适配 (fisher 设备控制平台)
   仅追加修复布局：横向裁剪 / 溢出，不改功能、不动已有样式文件。
   目标视口: 1920/1600/1366/1280/1024/900 (DPR 1.0/1.25/1.5)
   --------------------------------------------
   注入前测得（基线）：
     - 各视口 document.scrollWidth == clientWidth，页面级无横向滚动条。
     - 唯一功能性缺陷：账号管理宽表(13列, 最小宽~1000px) 在 ≤1024 时被
       .ant-table-wrapper 的 overflow:hidden 裁剪，尾部"操作"列按钮不可达
       (1024: table right=1237 > wrap 765 ; 900: table right=1013 > wrap 876)。
     - 全局注入的国家分段筛选器是 overflow-x:auto 可滚控件（功能完好）。
     - ≤900 侧栏折叠为顶部横向菜单；默认收起状态菜单恰好在容器内不溢出。
   ============================================================ */

/* 1) 宽表横向可滚动：让 .ant-table-content 作为滚动容器，头部连同内容表一起滚，
      避免操作列被 wrapper 的 overflow:hidden 裁剪。表格自身不溢出时无副作用。 */
.ant-table-wrapper .ant-table-container {
  min-width: 0 !important;
}
.ant-table-wrapper .ant-table-content {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
/* 单元格允许收缩，配合上方 overflow 实现"内滚而非外撑" */
.ant-table-wrapper .ant-table-cell {
  min-width: 0 !important;
}

/* 2) nowrap 长文本(备注/序列号/URL 等 pill)不撑破格子：用省略号收敛 */
.ant-table-cell .ant-tag,
.ant-table-cell .ant-badge,
.ant-table-cell [class*="pill"] {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* 3) 顶栏 flex 兜底：内容偏多时允许换行，保证 pill 完整可用、不挤出视口 */
.rc-header,
.ant-layout-header {
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

/* 4) 内容区允许收缩，避免任何子内容把文档横向顶破 */
.ant-layout-content,
.ant-layout,
.ant-app {
  min-width: 0 !important;
}

/* ---- 媒体查询：窄屏强化 ---- */

/* ≤1366：卡片网格列数按自身 grid 自适应（已收敛），内容区兜底不横向溢出 */
@media (max-width: 1366px) {
  .ant-layout-content { max-width: 100% !important; }
}

/* ≤1200：账号管理宽表必须内滚，禁止外溢（对 1024/900 关键） */
@media (max-width: 1200px) {
  .ant-table-wrapper { max-width: 100% !important; }
  .ant-table-wrapper .ant-table-content { overflow-x: auto !important; }
}

/* ≤991：侧栏折叠为顶部横向菜单。默认收起态不溢出；
   仅在展开子菜单时内部出现横向滚动(可滚、不裁剪、不撑破文档)。
   此处兜底：菜单父容器不产生文档级溢出、不裁剪文本。 */
@media (max-width: 991px) {
  .ant-menu.ant-menu-root { min-width: 0 !important; }
  .ant-layout-sider-children { min-width: 0 !important; max-width: 100% !important; }
}
