/* ============================================================
   移动端适配层（阶段一：布局地基）
   ------------------------------------------------------------
   引入位置：index.html 中 skin.css 之后（最后引入，保证覆盖）。
   设计约束：
     1) 所有规则都包在窄屏 / 无 hover 媒体查询里 —— PC 端一格不改；
     2) 只做覆盖，不删改 styles.css 既有声明，回滚 = 去掉 index.html 的 link；
     3) 不依赖任何 JS 改动（阶段一零逻辑改动），纯样式层。
   解决的问题（按重要性）：
     ① .row-actions 靠 tr:hover 才显形，手机无 hover → 每行操作按钮永远看不见，
        这是「手机上改不了数据」的真正原因，不是用户不会用；
     ② 十列表格在 390px 屏只露出 2~3 列 → 冻结首列，横滑时始终能认出是哪一行；
     ③ 弹窗 max-height:calc(100vh - 240px)，键盘弹出后正文区不足 200px，
        保存按钮被顶出屏幕 → 改为全屏 + 头尾固定 + 正文区独立滚动；
     ④ 输入框 13.5px，iOS Safari 聚焦时会自动放大页面 → 提到 16px；
     ⑤ 按钮 28~34px 命中区，手指点不准 → 提到 40px 左右。
   ============================================================ */

/* ---------- 0. 根容器：动态视口高度 + 文字缩放 + 安全区 ---------- */
@media (max-width: 900px) {
  html { -webkit-text-size-adjust: 100%; }

  /* 100vh 在 iOS Safari 是「工具栏收起后」的高度，导致底部被工具栏盖住；
     100dvh 跟随可视区域变化。先写 vh 给老浏览器兜底，再写 dvh 覆盖。 */
  .app { height: 100vh; height: 100dvh; }

  .topbar { height: 52px; padding: 0 12px; }
  .crumb { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-right { gap: 8px; }
  .user-pill span { max-width: 92px; }
  .user-pill-text em { max-width: 92px; }

  .page {
    padding: 12px 12px calc(28px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  /* 抽屉式侧栏在手机上偏窄，条目更容易误点 */
  .sidebar { width: min(78vw, 300px); }
}

/* ---------- 1. 操作按钮常显（本次最关键的一处） ----------
   PC：td 内的按钮平时透明，鼠标悬停浮现，让表格视觉干净。
   触屏：没有 hover，等价于「永久隐藏」——这类按钮包括列表的编辑/删除、
         跟进记录的改/删、合同明细的行删除，全部失效。
   条件用「窄屏 或 无 hover 能力」双覆盖：小窗 PC 也一起显形，
   触屏笔记本（hover:hover）不受影响。 */
@media (max-width: 900px), (hover: none) {
  .row-actions { opacity: 1; }
}

/* 触屏上 :hover 会「粘」在最后点过的那一行（行背景残留高亮），
   点一下别处才恢复。这里把触屏的悬停底色复位，避免误以为选中了。 */
@media (hover: none) {
  table.tbl tbody tr:hover { background: transparent; }
  table.tbl tbody tr:nth-child(even):hover { background: #fcfdff; }
}

/* ---------- 2. 命中区：按钮 / 图标钮 / 分页 ---------- */
@media (max-width: 900px) {
  .btn { min-height: 40px; padding: 9px 14px; }
  .btn.sm { min-height: 34px; padding: 7px 11px; font-size: 13px; }
  .btn.block { min-height: 46px; font-size: 15px; }

  /* 28px → 36px：拇指能点准，同时两枚并排仍放得进行尾 */
  .btn-icon { width: 36px; height: 36px; }
  .row-actions { gap: 4px; }
  .row-actions .btn-icon { margin-left: 2px; }

  .menu-toggle { padding: 10px; margin-left: -8px; }
  .pager { padding: 10px 12px; justify-content: center; }
  .pager button { min-height: 36px; padding: 7px 12px; }
}

/* ---------- 3. 表单控件：16px 防 iOS 聚焦缩放 ----------
   iOS Safari 在 input 字号 < 16px 时聚焦会自动把整页放大，
   用户必须双指缩回来，这是「手机上表单很难填」的常见原因。 */
@media (max-width: 900px) {
  input, select, textarea { font-size: 16px; padding: 11px 12px; }
  select { padding-right: 34px; background-position: right 12px center; }
  .combo input[type=text] { padding-right: 36px; }
  .combo-clear { width: 26px; height: 26px; right: 6px; }
  textarea { min-height: 96px; }
  .field > span { font-size: 13px; }
}

/* ---------- 4. 弹窗全屏 ----------
   原实现：mask 顶部对齐 + 40px 内边距，modal 无限高，正文区 max-height:calc(100vh-240px)。
   手机上键盘一弹，正文区只剩不到 200px，底部保存按钮被顶出可视范围。
   改为：整屏铺满，头尾固定，只有正文区滚动 —— 键盘弹出时正文变矮但按钮始终在。 */
@media (max-width: 900px) {
  .modal-mask { padding: 0; align-items: stretch; }
  .modal,
  .modal.narrow,
  .modal.wide {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    animation: none;
  }
  .modal-hd {
    flex: none;
    padding: 12px 14px;
    padding-top: calc(12px + env(safe-area-inset-top));
  }
  .modal-hd h3 { font-size: 15.5px; padding-right: 8px; }
  .modal-bd {
    flex: 1 1 auto;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
    overscroll-behavior: contain;
  }
  .modal-ft {
    flex: none;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  }
  /* 底部按钮铺满等宽，拇指区大；主按钮放右侧习惯保留顺序 */
  .modal-ft .btn { flex: 1 1 0; min-width: calc(50% - 4px); }
  .modal-ft .btn.block { flex: 1 1 100%; }
}

/* ---------- 5. 表格：冻结首列 + 紧凑行 ----------
   390px 屏上十列表格只露 2~3 列，横滑之后用户不知道自己在看哪一行。
   已声明 opts.freeze 的表（.tbl-frz）自带 frz 类，交给原逻辑；
   这里只给「没有冻结列」的表补首列 sticky，互不打架。
   border-collapse:collapse 下 sticky 格的右边框会被相邻列盖住，改用阴影分隔。 */
@media (max-width: 900px) {
  .tbl-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

  table.tbl { font-size: 13px; }
  table.tbl th { padding: 10px 12px; font-size: 12px; }
  table.tbl td { padding: 11px 12px; }

  table.tbl:not(.tbl-frz) th:first-child,
  table.tbl:not(.tbl-frz) td:first-child {
    position: sticky;
    left: 0;
    box-shadow: 6px 0 8px -6px rgba(15, 23, 42, .22);
  }
  table.tbl:not(.tbl-frz) th:first-child { background: #f8fafc; z-index: 3; }
  table.tbl:not(.tbl-frz) td:first-child { background: #fff; z-index: 2; }
  table.tbl:not(.tbl-frz) tbody tr:nth-child(even) td:first-child { background: #fcfdff; }

  /* 操作列贴右侧：横滑看数据时，改/删入口始终可见。
     只对「位于最后一列」的操作列生效——个别表把操作列放在中间，
     强贴右侧会浮在数据上面挡内容（renderTable 的 flex 列也从不选它，宽度可确定）。 */
  table.tbl td.cell-actions:last-child,
  table.tbl th.cell-actions:last-child {
    position: sticky;
    right: 0;
    box-shadow: -6px 0 8px -6px rgba(15, 23, 42, .22);
  }
  table.tbl th.cell-actions:last-child { background: #f8fafc; z-index: 3; }
  table.tbl td.cell-actions:last-child { background: #fff; z-index: 2; }
  table.tbl tbody tr:nth-child(even) td.cell-actions:last-child { background: #fcfdff; }
  /* 单列表（只有一列）时首列与操作列重合，避免双阴影 */
  table.tbl th:first-child.cell-actions,
  table.tbl td:first-child.cell-actions { box-shadow: none; }
}

/* ---------- 6. 详情 / 筛选 / 卡片：单列堆叠 ---------- */
@media (max-width: 900px) {
  .kv-grid { grid-template-columns: 1fr; padding: 14px; gap: 12px; }
  .flt-grid { grid-template-columns: 1fr; gap: 6px; }
  .card-head { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
  .card-body { padding: 14px; }
  .toolbar { padding: 10px 12px; gap: 8px; }
  .toolbar .search { flex: 1 1 100%; }
  .toolbar .search input { width: 100%; }
  .set-hint { padding: 10px 14px; font-size: 12.5px; }
  .empty { padding: 40px 16px; }
}

/* ---------- 7. 附件与标签：手指点得中 ---------- */
@media (max-width: 900px) {
  .file-chip { font-size: 12.5px; padding: 4px 10px 4px 7px; }
  button.file-chip.fc-btn { margin: 2px 4px 2px 0; }
}

/* ---------- 8. 横屏（手机横过来 / 小屏平板） ----------
   横向时垂直空间很紧，弹窗正文区要压缩头部、放大正文。 */
@media (max-width: 900px) and (max-height: 500px) {
  .topbar { height: 46px; }
  .modal-hd { padding: 8px 12px; }
  .modal-ft { padding: 8px 12px; }
  .modal-ft .btn { min-height: 36px; }
  .page { padding: 8px; }
}

/* ---------- 9. 卡片列表（阶段二） ----------
   表格在 390px 上只能看到「首列 + 半个第二列 + 操作列」，中间信息全靠横滑。
   卡片把一行重新排成 标题/金额 → 键值 → 状态·归属·操作，一屏 4~5 条且不横滑。
   仅在调用方显式声明 opts.card 的表启用（主列表、详情页子表），其余仍是表格。 */
@media (max-width: 900px) {
  .mcard-list { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
  .mcard {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px 12px;
    box-shadow: var(--shadow-sm);
    -webkit-tap-highlight-color: transparent;
  }
  .mcard.clickable { cursor: pointer; }
  .mcard.clickable:active { background: var(--primary-50); border-color: var(--primary-100); }

  .mcard-hd { display: flex; align-items: flex-start; gap: 10px; }
  .mcard-title {
    flex: 1 1 auto; min-width: 0;
    font-size: 14.5px; font-weight: 600; color: var(--text); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    word-break: break-word;
  }
  .mcard-title .link, .mcard-title .mono, .mcard-title b { font-size: inherit; font-weight: inherit; }
  .mcard-amt { flex: none; font-size: 14.5px; line-height: 1.45; font-variant-numeric: tabular-nums; color: var(--text); }
  .mcard-amt .num, .mcard-amt b { font-size: 14.5px; }

  .mcard-kvs { display: flex; flex-wrap: wrap; gap: 3px 14px; margin-top: 5px; }
  .mcard-kv { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; max-width: 100%; font-size: 12.5px; }
  .mcard-kv i { font-style: normal; color: var(--muted); flex: none; }
  .mcard-kv b {
    font-weight: 500; color: var(--text-2); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52vw;
  }
  .mcard-kv b .link { font-weight: 500; }

  .mcard-ft {
    display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed var(--border-2); font-size: 12px; min-height: 26px;
  }
  .mcard-tag { flex: none; }
  .mcard-tag .badge { font-size: 11.5px; padding: 1px 8px; }
  .mcard-metas { flex: 1 1 auto; min-width: 0; display: flex; gap: 10px; color: var(--muted); overflow: hidden; }
  .mcard-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mcard-acts { flex: none; display: flex; gap: 4px; margin-left: auto; }
  .mcard-acts .row-actions { opacity: 1; display: inline-flex; align-items: center; gap: 4px; }
  .mcard-acts .btn-icon { width: 34px; height: 34px; }

  /* 详情页里的子表卡片：外层已经有 .card 边框，这里压平，避免卡片套卡片 */
  .card .mcard-list { padding: 4px 8px 8px; }
  .card .mcard { box-shadow: none; border-color: var(--border-2); background: #fcfdff; }

  /* 合计条：手机放不下三项时换行，不做横滑 ——
     横滑会让「待回款」在右边缘被切掉半个字，看着像坏了，也不知道右边还有。
     换行后多占一行，但三项都看得全。 */
  .sum-bar { flex-wrap: wrap; gap: 6px 18px; padding: 10px 12px; }
  .sum-item { flex: 0 1 auto; }
  .sum-label { font-size: 11.5px; }
  .sum-val { font-size: 13px; }

  /* 分页：只留「上一页 / 第 N 页 / 下一页」，说明文字单独一行居中 */
  .pager { justify-content: center; padding: 10px 12px; gap: 8px; }
  .pager > div:first-child { flex: 1 1 100%; text-align: center; font-size: 12px; }
  .pager .pager-btns { flex: 1 1 100%; justify-content: center; }
  .pager button { min-height: 36px; min-width: 76px; font-size: 13px; }
}

/* ---------- 10. 平板宽度下卡片改双列 ----------
   768~900px 仍算移动端（菜单还是抽屉），但一屏只放一张卡会显得空荡：
   卡片被拉到 760px，标题与金额相隔半屏，眼睛要来回跑。
   这一档改双列，每列约 370px，正好接近手机的阅读宽度。 */
@media (min-width: 640px) and (max-width: 900px) {
  .mcard-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 10px;
  }
  .card .mcard-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 双列时左卡标题占两行、右卡一行，下面「合同编号」就会错开一格看着杂乱。
     把标题区固定成两行高，同排卡片的键值行就能对齐。 */
  .mcard-title { min-height: 2.9em; }
}