/* ============================================================
 * responsive.css —— 统一工作台 · 移动端共享适配层
 * ------------------------------------------------------------
 * 依赖 assets/device.js（它会给 <html> 打上 is-mobile / is-pc）。
 * 所有页面（门户 / 财务 / 证件 / 导图）都应引入本文件，
 * 新做的工作台也请直接复用，不要各写一套。
 *
 * 断点约定：手机 / 平板一律走 is-mobile；≥821px 为 PC。
 * ============================================================ */

html { -webkit-text-size-adjust: 100%; }

html.is-mobile {
  -webkit-tap-highlight-color: transparent;
  /* 由 device.js 写入真实可视高度，规避手机浏览器地址栏吃掉 100vh 的问题 */
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---------- 1. 防止横向溢出 ---------- */
html.is-mobile body { overflow-x: hidden; }
html.is-mobile img,
html.is-mobile video { max-width: 100%; height: auto; }

/* ---------- 2. 触控友好的输入框 ---------- */
/* iOS 上字体小于 16px 的表单聚焦时会自动放大整页，必须统一 16px */
html.is-mobile input,
html.is-mobile select,
html.is-mobile textarea { font-size: 16px !important; }

/* ---------- 3. 触控目标不小于 38px ---------- */
html.is-mobile .btn,
html.is-mobile .tab,
html.is-mobile .auth-tab,
html.is-mobile .link-btn { min-height: 38px; }
html.is-mobile .btn { display: inline-flex; align-items: center; justify-content: center; }
/* 需要保持小体积的按钮，自行加 .touch-sm */
html.is-mobile .btn.touch-sm,
html.is-mobile .touch-sm { min-height: 0 !important; }

/* ---------- 4. 表格与长内容横向滚动 ---------- */
html.is-mobile .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
html.is-mobile .table-wrap::-webkit-scrollbar { height: 4px; }
html.is-mobile .table-wrap::-webkit-scrollbar-thumb { background: rgba(100,116,139,.35); border-radius: 4px; }

/* 横向滚动的标签栏：隐藏滚动条，仍可滑动 */
html.is-mobile .tabs,
html.is-mobile .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
html.is-mobile .tabs::-webkit-scrollbar,
html.is-mobile .scroll-x::-webkit-scrollbar { height: 0; display: none; }

/* ---------- 5. 弹窗：手机上改为底部抽屉 ---------- */
html.is-mobile .modal-bg { padding: 0; align-items: flex-end; }
html.is-mobile .modal {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 16px 16px 0 0 !important;
  padding-bottom: calc(22px + var(--safe-b)) !important;
}
html.is-mobile .modal-root { align-items: flex-end; }
html.is-mobile .modal-box {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 16px 16px 0 0 !important;
  padding-bottom: calc(18px + var(--safe-b)) !important;
}
html.is-mobile .modal-mask { border-radius: 0; }

/* 弹窗右上角的关闭按钮，触摸区域放大 */
html.is-mobile .modal .close { padding: 8px 10px; font-size: 24px; }

/* ---------- 6. 底部固定条避开手机底部横条 ---------- */
html.is-mobile .undo-bar,
html.is-mobile .scan-controls,
html.is-mobile .bottom-bar { padding-bottom: calc(10px + var(--safe-b)) !important; }

/* ---------- 7. 拖拽类元素：禁止长按弹出菜单/选中文字 ---------- */
html.is-mobile .no-select,
html.is-mobile [draggable="true"] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ---------- 8. 全屏高度 ---------- */
html.is-mobile .full-h { height: calc(var(--vh, 1vh) * 100); }

/* ---------- 9. 按设备显示不同界面（很实用） ---------- */
/* PC 上隐藏 / 手机上隐藏 */
html.is-mobile .hide-mobile { display: none !important; }
html.is-pc     .hide-pc     { display: none !important; }

/* 只在手机上出现（PC 上默认隐藏） */
.only-mobile,
.only-mobile-flex,
.only-mobile-inline { display: none !important; }
html.is-mobile .only-mobile        { display: block !important; }
html.is-mobile .only-mobile-flex   { display: flex !important; }
html.is-mobile .only-mobile-inline { display: inline-flex !important; }

/* ---------- 10. 通用字号/间距收敛 ---------- */
html.is-mobile .hint { font-size: 12.5px; }
html.is-mobile h1 { font-size: 18px; }