/* ============================================================================
   ERP 移动端适配层  erp-mobile.css
   创建：2026-10-21

   设计系统（admin-design-system.css / employee-design-system.css）本身只做了
   「侧栏收起 / 统计卡改两列」这两件事，剩下的通用移动端问题一片空白：
   表格撑破页面、输入框字号过小导致 iOS 聚焦放大、按钮点不中、弹窗超出屏幕。

   这里集中处理，由所有 ERP 模板统一引入。桌面端不受影响（规则都在 @media 里）。
   ========================================================================== */

@media (max-width: 820px) {

  /* ---------- 1. 侧栏：宽度不超过屏幕的 82% ---------- */
  .ads-sidebar {
    width: min(82vw, 300px);
    box-shadow: 0 0 32px rgba(0, 0, 0, .22);
  }

  /* 侧栏打开时禁止背景滚动，否则手指一划整页跟着动，抽屉却不动 */
  body.ads-drawer-open {
    overflow: hidden;
  }

  /* ---------- 2. 输入框 16px ---------- */
  /* iOS Safari 对 <16px 的输入框会在聚焦时强制放大整页，
     手机上点一下输入框画面就"跳"一下，是移动端最刺眼的体验问题之一。 */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea,
  .ads-input,
  .ads-select,
  .ads-textarea,
  .eds-input {
    font-size: 16px !important;
    min-height: 44px;
    box-sizing: border-box;
  }

  textarea,
  .ads-textarea {
    min-height: 88px;
  }

  /* ---------- 3. 点按目标 ---------- */
  button,
  .btn,
  .ads-btn,
  .eds-btn,
  [role="button"],
  input[type="submit"],
  input[type="button"] {
    min-height: 42px;
    touch-action: manipulation;   /* 去掉 iOS 的 300ms 点按延迟 */
  }

  .ads-btn-sm,
  .eds-btn-sm {
    min-height: 38px;
  }

  /* ---------- 4. 表格：容器内横滑，不撑破页面 ---------- */
  .ads-table-wrap,
  .eds-table-wrap,
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  table:not(.no-mobile-scroll) {
    display: block;
    width: max-content;
    min-width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    font-size: 13.5px;
  }

  /* Bootstrap 已经包了 .table-responsive 的就不要再套一层滚动区 */
  .table-responsive > table {
    display: table;
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  th, td {
    padding: 9px 10px;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  /* 备注/内容类单元格允许换行，避免整行被一长串文字拉得过宽 */
  td.ads-cell-wrap,
  td.eds-cell-wrap {
    white-space: normal;
    min-width: 160px;
  }

  /* ---------- 5. 页头与工具栏：竖排、按钮可换行 ---------- */
  .ads-page-header,
  .eds-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .ads-page-header h1,
  .eds-page-header h1 { font-size: 19px; }

  .ads-page-header p,
  .eds-page-header p { font-size: 13px; }

  .ads-toolbar,
  .eds-toolbar,
  .ads-filter-bar,
  .ads-actions,
  .eds-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* 搜索框在手机上独占一行，别和按钮挤在一起 */
  .ads-toolbar input[type="search"],
  .ads-toolbar input[type="text"],
  .eds-toolbar input[type="search"],
  .eds-toolbar input[type="text"] {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* ---------- 6. 卡片内边距收紧，多留内容宽度 ---------- */
  .ads-card-body,
  .eds-card-body { padding: 14px; }

  .ads-card-header,
  .eds-card-header { padding: 12px 14px; }

  /* ---------- 7. 分页 ---------- */
  .ads-pagination,
  .pagination { flex-wrap: wrap; }

  .ads-page-link { min-width: 40px; height: 40px; }

  /* ---------- 8. 弹窗 ---------- */
  .modal-dialog {
    max-width: calc(100vw - 20px);
    margin: 10px auto;
  }

  .modal-body { max-height: 68vh; overflow-y: auto; }

  /* ---------- 9. 图表容器限高，避免在小屏上占满整屏 ---------- */
  .ads-chart-container,
  .eds-chart-container { height: 220px !important; }

  /* ---------- 10. toast 位置：别盖住底部操作按钮 ---------- */
  .ads-toast-area {
    left: 12px;
    right: 12px;
    bottom: 12px;
    top: auto;
  }

  pre, code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }
}

@media (max-width: 480px) {

  /* 小屏手机：正文与标题再降一档 */
  body { -webkit-text-size-adjust: 100%; }

  .ads-content,
  .eds-content { padding: 12px; }

  .ads-stat-card .stat-value { font-size: 21px; }
  .ads-stat-card .stat-label { font-size: 12px; }

  /* 统计卡一列铺满，两列时数字会被挤到换行 */
  .ads-stats-grid { grid-template-columns: 1fr; }

  /* 列表页的"操作"列竖排按钮收紧 */
  td .ads-btn,
  td .btn { min-height: 36px; padding: 4px 10px; font-size: 13px; }

  table { font-size: 13px; }
  th, td { padding: 8px 8px; }
}

/* 触屏：去掉 hover 位移，避免点不中 */
@media (hover: none) and (pointer: coarse) {
  .ads-card:hover,
  .eds-card:hover,
  .ads-stat-card:hover,
  .btn:hover { transform: none; }
}

/* ============================================================================
   以下为 2026-10-21 手机端体检（报告类/ERP手机端体检_20261021.md）定位出的
   具体缺陷，逐条按根因修复。每条都注明测量到的数字，便于回归验证。
   ========================================================================== */

@media (max-width: 768px) {

  /* ---------- P0：顶栏被当成弹性列，吃掉一半屏宽 ----------
     实测（390 视口）：header.ads-mobile-header 变成 205×1331 的竖条，
     main.ads-content 只剩 185px 宽；360 视口下只剩 155px。
     根因：admin-design-system.css:73 的 body{display:flex} 在这里毫无用处
     （侧栏已 display:none），却把顶栏和主内容并排放。

     ⚠ 这里不能用 body:has(.ads-mobile-header) —— 本机 Edge 是 86 版，
     `:has()` 不解析，整条规则会被静默丢弃，等于没修（第二轮回测就是这样
     整条没生效、main 仍然 185px）。改成靠 admin_base.html 的 body.ads-shell 类，
     只影响带移动顶栏的后台页面，不会波及靠 body flex 居中的登录页。 */
  body.ads-shell {
    display: block;
  }

  /* 防御性：flex 子项默认 min-width:auto 会被内部超宽表格顶破 */
  .ads-content,
  .eds-content {
    min-width: 0;
  }

  /* ---------- P1：两列网格在小屏压成单列 ----------
     .ads-grid-2 写死 1fr 1fr 且原断点没覆盖；
     使用监控页因此把 3 列表格塞进 68px（实测）。 */
  .ads-grid-2,
  .ads-grid-3 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ---------- P1：表头不换行是表格被撑宽的主因 ----------
     客户管理 11 列、表宽 1200px，横滑 7.5 屏（390）/ 9.3 屏（360）。
     表格占满屏后，再靠收紧内边距把横向距离压下来。 */
  .ads-table-wrapper {
    position: relative;
    -webkit-overflow-scrolling: touch;
  }

  .ads-table thead th {
    font-size: 11px;
    padding: 8px 6px;
  }

  .ads-table tbody td {
    padding: 8px 6px;
  }

  /* ---------- P1：客户端首页「退出」按钮被挤出屏幕 ----------
     实测 div.uds-navbar-actions 右边界 442px（视口 390），
     退出按钮只有 17px 可点且被父级 overflow:hidden 裁掉。
     原有隐藏规则写的是 .uds-navbar-user .user-name，但这两个
     <span class="user-name"> 并不在 .uds-navbar-user 里面，命中不到。 */
  .uds-navbar-actions {
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
  }

  .uds-navbar-actions .user-name,
  .uds-navbar .user-name {
    display: none;
  }

  .uds-navbar-actions .uds-btn {
    flex: 0 0 auto;
    min-height: 40px;
    min-width: 40px;
  }

  /* 客户端的两个小控件：汉堡按钮只有 38px 宽、「退出」小按钮只有 28px 高 */
  .uds-hamburger {
    min-width: 40px;
    min-height: 42px;
  }

  .uds-btn-sm {
    min-height: 40px;
  }

  /* ---------- P2：点按目标不足 40px ----------
     实测：删除按钮 36×24、导出按钮 69×27、保存按钮 77×34、
     复选框 16×16、分页 36×36、图标按钮 36×36。
     手指点不准就会误触删除，这是列表页最需要修的一类。
     统一按 WCAG 2.2 AA 的 24px 最低 + 移动端惯例 40px 来给。 */
  .ads-btn-sm,
  .eds-btn-sm,
  .btn-sm {
    min-height: 40px;
    min-width: 40px;
  }

  .ads-btn,
  .eds-btn,
  .btn {
    min-height: 40px;
  }

  .ads-btn-icon {
    width: 42px;
    height: 42px;
  }

  .ads-page-link {
    min-width: 42px;
    height: 42px;
  }

  input[type="checkbox"],
  input[type="radio"],
  /* admin_users.html 页面内联样式用 ID 选择器写死了 16px，
     特异性(1,0,0)比属性选择器(0,1,1)高，通用规则会被压回去。
     这里带上 !important 并把 ID 一起列出来，做成防回归的兜底。 */
  #selectAll,
  #selectAllHead {
    width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    flex-shrink: 0;          /* 别被挤压回 16px */
    vertical-align: middle;
  }

  /* 侧栏展开按钮（☰）：admin-design-system.css:416 给的是 padding:4px + font-size:24px
     → 宽 32px、高 44px，宽不够当点按目标。 */
  .ads-mobile-header button {
    min-width: 40px;
    min-height: 40px;
  }

  /* 表格行内的操作按钮：只保高度，宽度按内容，避免一行挤爆 */
  td .ads-btn,
  td .btn,
  td .eds-btn {
    min-height: 40px;
    min-width: 40px;
    padding-left: 10px;
    padding-right: 10px;
  }

  /* ---------- P2：输入框 16px ----------
     实测 .ads-form-control 14px、.ads-form-select 12px、
     .eds-form-input 14px、#empSearchInput 13px。
     客户端 CSS（user-design-system.css:426）早就写对了，后端两份一直没跟上。 */
  .ads-form-control,
  .ads-form-select,
  .ads-form-textarea,
  .eds-form-input,
  .eds-form-select,
  .eds-form-textarea,
  #empSearchInput {
    font-size: 16px !important;
  }

  /* ---------- P2：图表画布溢出容器 ----------
     实测 canvas#deptChart 宽 300px，右边界 538px（视口 390）。
     Chart.js 会按像素尺寸写死 canvas 的 style 宽度，必须用 !important 压住。 */
  .ads-chart-container canvas,
  .eds-chart-container canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ---------- P2：Toast 在窄屏溢出 ----------
     .ads-toast-item 最小宽 260px + right:20px，320px 屏必然溢出。 */
  .ads-toast-item,
  .eds-toast-item {
    min-width: 0;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
  }

  /* ---------- P2：登录页「注册 / 忘记密码」点按区域过小（70×21）---------- */
  .login-links a,
  .login-container .login-footer a {
    display: inline-block;
    min-height: 40px;
    line-height: 40px;
    padding: 0 4px;
  }
}

@media (max-width: 390px) {
  /* 小屏进一步压缩表格字体，减少横滑距离 */
  .ads-table thead th { font-size: 10.5px; }
  .ads-table tbody td { padding: 8px 5px; }
}