@charset "UTF-8";
/* ============================================================================
 * iwk-mobile.css —— 窄屏(<=768px)专用的「手指点得中」补丁
 *
 * 为什么单独一个文件：
 *   第 64 轮第一次用真实手机视口（390x844 / 360x800，DPR3，mobile:true）把 50 多个
 *   页面实测了一遍 —— 之前 63 轮的浏览器验证都跑在写死的 1440x900 上（见
 *   _uiwork/probe_page.js 里的 setDeviceMetricsOverride），手机端一次都没量过。
 *   量出来一批控件的可点区域小于手指：勾选框 13~16px、迷你按钮 22~26px、
 *   layui 分页 26px。这些尺寸在桌面上完全没问题，只有窄屏才需要放大。
 *
 * 为什么敢动全局：
 *   全部规则都包在 @media (max-width:768px) 之内 —— 桌面端(>768px)一条都不匹配，
 *   所以第 1~63 轮验过的桌面布局零变化（1440x900 回归见 _uiwork/mobile_r64_*）。
 *   只改 min-height / width / padding，不改颜色、字体族、结构或任何 JS 行为。
 *
 * 目标不是 44px（那会明显改变界面观感），而是「不再一点就偏」的 18px / 32px 底线。
 *
 * 刻意不做通用 input[type=checkbox] 全放大：
 *   login.php 的日夜开关 .switch input 是 opacity:0;width:0;height:0 的隐藏原生框，
 *   无条件放大它会凭空多出一个 18px 的盒子、把开关挤歪。所以这里只按"已知会被点"
 *   的容器逐一开列（表格内、.zs-day 活动日、协议勾选框）。
 *
 * 回归：
 *   _uiwork/mobile_run.ps1  -Pages ... -Width 390 -Height 844 -Dpr 3 -Mobile 1
 *   _uiwork/acceptance.ps1                     （全站，基线 254/0/1 警告 + 1 提示）
 *   _uiwork/probe_page_run.ps1                 （1440x900 桌面回归）
 * ========================================================================== */
@media (max-width:768px){

  /* ---- 1. 勾选框：13~16px -> 18px ------------------------------------- */
  /* log.php 的 .terminal-checkbox 与 class.php 的 .table-checkbox 是页面自己
     写死 16px 的，用重复类名抬一级特异性，避免和页面里的 <style> 抢先后。 */
  .terminal-checkbox.terminal-checkbox,
  .table-checkbox.table-checkbox,
  /* guanx.php / zengsong.php 里没有任何类的裸勾选框，按所在容器收口 */
  .table-responsive input[type=checkbox],
  .table-scroll-container input[type=checkbox],
  .custom-table input[type=checkbox],
  .layui-table input[type=checkbox],
  .el-table input[type=checkbox]:not(.el-checkbox__original),
  .zs-day input[type=checkbox],
  .zs-switch input[type=checkbox],
  /* login.php 的《用户协议》勾选框 */
  #agreementLogin{
    width:18px; height:18px; min-width:18px; min-height:18px;
  }
  /* log.php 的勾号 ::after 偏移是按 16px 手调的，盒子变大后一起挪 */
  .terminal-checkbox.terminal-checkbox:checked::after{top:3px; left:6px;}
  /* 18px 的方框在手机上仍然偏小，但它已经是"看得过去"的视觉上限（再大会显得突兀）。
     对自绘的方框（.terminal-checkbox 是 appearance:none + position:relative）再用一个
     透明 ::before 把真正的可点区域撑到 28x28 —— 视觉不变，手指不容易点偏。
     ::after 是勾号，不能动；::before 没人用。原生方框会忽略伪元素，无副作用。 */
  .terminal-checkbox.terminal-checkbox::before,
  .table-checkbox.table-checkbox::before{
    content:''; position:absolute; left:-5px; right:-5px; top:-5px; bottom:-5px;
  }

  /* ---- 2. 迷你按钮：22~26px 高 -> 32px -------------------------------- */
  /* class.php / mijia.php 的 编辑 / 删除 / 添加 */
  .btn.btn-xs{min-height:32px; padding-top:0; padding-bottom:0; line-height:30px;}
  /* userlist.php 的「未开通 / 未设置」是 <span class="el-button btn-xs ...">，
     没有 --mini 后缀，要单独收 */
  .el-button.btn-xs{min-height:32px; line-height:1;}
  /* userlist.php 的 未开通 / 未设置 状态按钮，以及 add*.php 的「全选」 */
  .el-button--mini{min-height:32px; line-height:1;}
  .el-button--mini.is-plain{padding-left:12px; padding-right:12px;}
  /* gongdan.php 的「提交工单（点击展开/折叠）」（行内 padding 只设 padding，不设高度） */
  .el-button--text{min-height:32px;}
  /* docking.php / zzbz.php 的「复制 / 折叠」 */
  .doc-card-btn{min-height:32px; padding-top:0; padding-bottom:0;}
  /* shopadmin.php / shopset.php 的文字型操作链接 */
  a.sh-link{display:inline-block; padding:5px 0;}

  /* ---- 3. layui 分页条：高度 26px -> 32px，并让它在窄屏换行 ------------ */
  /* 先用 A/B 量过（_uiwork/mobile_r64_pg_before|after 的 JSON）：
     layui 的页码 a 是 box-sizing:content-box + padding:0 12px，给它加
     min-width:32px 会让每个页码 30px -> 56px（5 个共 +142px），把分页条顶得更宽。
     所以这里只加高度、不加宽度。（min-width 量的是内容盒，再叠 24px 内边距。） */
  .layui-laypage a, .layui-laypage span{height:32px; line-height:32px;}
  /* 分页条在表格底下时会被 layui 自己的
     .layui-table-page .layui-laypage input{height:26px}（特异性 0,2,1）盖住，
     所以这里用更高的特异性（0,3,1）把那 26px 顶掉，不靠加载顺序。 */
  .layui-table-page .layui-laypage input.layui-input,
  .layui-table-page .layui-laypage button.layui-laypage-btn,
  .layui-laypage input.layui-input,
  .layui-laypage button.layui-laypage-btn{height:32px; line-height:32px;}
  /* 分页条整条是 white-space:nowrap 的 inline-block，实测在 390px 屏上宽 523px，
     右边那截（共 x 条 / 每页 x 条）被祖先裁掉、手机上滚不到 —— 这是本来就有的问题，
     不是放大造成的（A/B：把本文件摘掉也是 523px）。窄屏允许换行就能全部露出来。 */
  .layui-table-page, .layui-table-pageview{white-space:normal; width:auto; text-align:center;}
  .layui-laypage{display:block; white-space:normal; text-align:center;}
  .layui-laypage > *{margin-bottom:4px;}
  /* 「20 条/页」这种带 lay-ignore 的原生下拉 layui 不接管，页面也没给高度 */
  select[lay-ignore]{height:32px;}

  /* ---- 4. element-ui 分页条：窄屏换行 --------------------------------- */
  /* qg.php 用的是 el-pagination（.el-pagination.is-background）。实测在 390px 屏上
     它自身就溢出（scrollWidth 365 > clientWidth 243），而外层 .el-card 是
     overflow:hidden —— 于是「下一页」和后面的页码被直接裁掉、手机上点不到。
     这是本来就有的问题，与本轮放大无关（A/B：摘掉本文件后 .btn-next 依然在 right=434）。
     element-ui 的 .el-pagination 默认 white-space:nowrap 且是 shrink-to-fit，
     窄屏放开换行 + 让页码行也能换行，整条就能露出来。 */
  .el-pagination.el-pagination{white-space:normal; display:block;}
  .el-pagination .el-pager{white-space:normal;}
  .el-pagination .el-pager li,
  .el-pagination .btn-prev,
  .el-pagination .btn-next{min-width:32px; height:32px; line-height:32px;}

  /* ---- 5. 登录页右上角的主题按钮：20px -> 32px ------------------------ */
  /* 它是 position:absolute 的图标按钮，单纯放大按钮会让图标整体偏右下；
     容器的 top/right 各回退 6px，图标的视觉位置保持不动。
     容器规则用重复类名抬特异性：login.php 自己的 @media 里也写了
     .theme-toggle-container{right:20px}，且它的 <style> 在本文件之后。 */
  #themeToggle.theme-icon-btn{width:32px; height:32px;}
  .theme-toggle-container.theme-toggle-container{top:14px; right:16px;}
}