/*! mobile.css —— 县乡巡回义诊服务平台 · 移动端公共适配层
 *  =====================================================================
 *  设计约束：
 *   1) 全部规则包在 @media (max-width:768px) 内 —— >768px（PC/平板横屏）完全不受影响；
 *   2) 不改接口、不改数据结构、不改业务文案，纯展示层；
 *   3) 兼容 iOS Safari 13+ / Android Chrome 80+：
 *      不用 :has()、容器查询、flex gap、dvh、accent-color 等新特性；
 *   4) 优先级：能看清 > 能点准 > 少点几下 > 好看。
 *  引入方式：放在页面自身 <style> 之后、</head> 之前 ——
 *      <link rel="stylesheet" href="mobile.css">
 *  这样同权重选择器后者生效，页级适配段仍可在页内 <style> 里覆盖本文件。
 *  ===================================================================== */
@media (max-width: 768px) {

  /* ---------- 基础 ---------- */
  html { -webkit-text-size-adjust: 100%; }
  body {
    overflow-x: hidden;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  }
  img, video, canvas { max-width: 100%; }

  /* ---------- 表单控件：能看清、点得准 ----------
   * 16px 字号防止 iOS Safari 聚焦时自动放大整页；
   * 触点最小 42px（按钮 44px），老人手指不落空。 */
  input, select, textarea { font-size: 16px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
  select, textarea {
    min-height: 42px;
    padding-top: 7px;
    padding-bottom: 7px;
  }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  button, .btn {
    min-height: 44px;
    font-size: 15px;
  }
  label { line-height: 1.45; }

  /* ---------- 表格：不压扁，横向滚动（无 JS 方案） ----------
   * 管理端宽表格在 375px 屏上压缩必然糊；改为整表横滚，
   * 行内容保持可读，配合表头加粗即可。 */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table th, table td { white-space: nowrap; }

  /* ---------- 弹层 / 弹窗：占满屏宽，不再留 20px 边距 ---------- */
  [class*="mask"] { padding: 0 !important; }
  .modal-box, .cont-box, .mmask > * { max-width: 100vw !important; }

  /* ---------- 点击高亮：去掉蓝闪，加按钮按压反馈 ---------- */
  * { -webkit-tap-highlight-color: transparent; }
}