/* qkbad 移动端适配（最小改动版）
 * 落点：index-ConPPE3g.css 里已有的 @media(max-width:720px) 块，就地扩充；
 *       外加末尾 1 条全局 .el-dialog 规则（对桌面无影响）。
 *
 * 实测问题（iPhone 竖屏 390×844 / 横屏 844×390，对比桌面 1440×900）：
 *   1. .adm-side 在 720px 以下变 position:absolute 浮层，但 .adm-body 只有 padding:14px，
 *      左侧没给侧边栏留位 → 正文被压住（首段文字被裁）。
 *   2. Element 的侧边栏折叠不是响应式的 —— 视口从桌面切到 390 时侧边栏仍是 200px
 *      绝对定位浮层，占掉一半屏宽，必须 CSS 强制 64px 图标模式。
 *   3. 表格 body 被 Element Plus 的 table-layout:fixed 压到容器宽，
 *      列内容（平台名称）消失，且无法横向滑动。
 *   4. 弹窗宽度由 Element Plus 的内联 CSS 变量 --el-dialog-width 控制（不是 width 属性），
 *      960px 固定宽 → 竖屏/横屏下「取消/保存」按钮在屏幕外点不到。
 *   5. 弹窗 z-index 低于浮层侧边栏 → 弹窗左侧被压（平台名称→台名称）。
 *   6. 触摸热区偏小（表格操作按钮 30×18）。
 */

@media(max-width:720px){
  /* ① 强制侧边栏 64px 图标模式。Element 用 inline style 设 width/flex-basis，故需 !important */
  .adm-side{ width:64px !important; flex:0 0 64px !important; }
  /* 内容区给 64px 侧边栏留出左侧空间 */
  .adm-body{ padding:14px 14px 14px 78px; }

  /* ② 弹窗层级高于浮层侧边栏 */
  .el-overlay,.el-overlay-dialog{ z-index:3000 !important; }
  .el-dialog{ z-index:3001 !important; }

  /* ③ 弹窗自适应视口宽；body 区可滚；底部按钮并排占满、加大热区 */
  .el-dialog{ --el-dialog-width:calc(100vw - 16px) !important; }
  .el-dialog__body{ max-height:66vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .el-dialog__footer{ display:flex !important; gap:8px; }
  .el-dialog__footer .el-button{ flex:1; min-height:42px; margin:0 !important; }

  /* ④ 表单标签换行、输入框 16px（防 iOS 聚焦自动缩放） */
  .el-form-item{ display:block !important; }
  .el-form-item__label{ width:auto !important; text-align:left !important; padding-bottom:4px !important; }
  .el-form-item__content{ margin-left:0 !important; }
  .el-dialog input,.el-dialog textarea{ font-size:16px !important; }

  /* ⑤ 表格：列按内容自适应 + 禁止换行，撑出可横向滚动的宽度 */
  .el-table__body,.el-table__header{ table-layout:auto !important; width:auto !important; }
  .el-table__body col,.el-table__header col{ width:auto !important; }
  .el-table__body td,.el-table__body th,.el-table__header th{ white-space:nowrap !important; }
  .el-table__body .cell,.el-table__header .cell{ white-space:nowrap !important; }
  .el-table__body-wrapper,.el-scrollbar__wrap{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }

  /* ⑥ 触摸热区放大 */
  .adm-side .el-menu-item,.adm-side .menu-group{ min-height:44px !important; }
  .adm-side .el-icon{ font-size:18px !important; }
  .el-table .el-button{ padding:8px 10px !important; }

  /* ⑦ 总览头部筛选行窄屏换行：筛选行是动态生成的无 class 内联 flex 容器
     （display:flex;gap:10px，无 flex-wrap），内含「授权有效期至…」文字块 + 固定 260px
     日期范围选择器 + 刷新按钮，窄屏单列（≈284px）会把三者横向挤出导致溢出。
     行内 style 只设了 display/gap/align-items，未设 flex-wrap——故外部加 flex-wrap 即可生效，
     无需 !important；日期选择器内联 width:260px 需 !important 覆盖为整行自适应。 */
  .g-page-head > div:last-child{ flex-wrap:wrap; }
  .g-page-head .el-date-editor{ flex:1 1 100% !important; width:100% !important; min-width:0 !important; }
  .g-page-head .el-button{ flex:0 0 auto; }
}

/* ⑦ 弹窗宽度上限 —— 一条规则通吃三端：
   桌面 1440 → 960（不变）；横屏 844 → 820；竖屏 390 → 366。
   必须覆盖 --el-dialog-width 这个内联 CSS 变量，!important 不可省。 */
.el-dialog{ --el-dialog-width:min(960px, calc(100vw - 24px)) !important; }