/* ===========================================================
   mobile.css — 全站移动端 / 平板适配（手机、平板访问后台）

   ⚠️ 纯新增文件，**不修改** main.css / auth.css。
   本文件只包含 @media 媒体查询内的覆盖与补充，加载顺序在
   main.css 与 auth.css 之后，因此同特异度规则可安全覆盖。
   断点沿用项目既有口径：1024 / 760 / 640 / 420。

   覆盖目标：
     1) 平板（≤1024）   —— 栅格折行更合理、表格高度收敛
     2) 手机（≤760）    —— 触控目标、表格横向滚动 + 首列吸附、
                           表单防 iOS 聚焦缩放、弹窗底部安全区
     3) 小屏（≤420）    —— 单列化、按钮满宽
     4) 横屏矮屏        —— 压缩纵向占用
   =========================================================== */

/* ---------- 0. 通用：触控滚动与安全区变量 ---------- */
:root {
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

/* ===========================================================
   1. 平板 / 中屏（≤1024）
   =========================================================== */
@media (max-width: 1024px) {
  /* 4/5 列统计栅格在平板上 2 列更易读 */
  .grid.g4, .grid.g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 2:1 / 1:2 / 3:2 这类「主内容+侧栏」在平板上竖排 */
  .grid.g-2-1, .grid.g-1-2, .grid.g-3-2 { grid-template-columns: 1fr; }
  /* 长表格别把整页撑高，交给内部滚动 */
  .tbl-wrap { max-height: 460px; }
  .tbl-wrap.short { max-height: 300px; }
}

/* ===========================================================
   2. 手机 / 竖屏平板（≤760）
   =========================================================== */
@media (max-width: 760px) {
  /* ---------- 2.1 触控目标：小按钮/胶囊放大到可点 ---------- */
  .btn-xs { padding: 5px 10px; font-size: 11.5px; min-height: 30px; border-radius: 7px; }
  .btn-sm { padding: 7px 12px; min-height: 34px; }
  .link-btn { padding: 4px 0; }
  .chip { padding: 6px 12px; min-height: 30px; }
  .icon-btn { min-width: 34px; min-height: 34px; }

  /* ---------- 2.2 chip 行：单行横向滑动，不折成三行 ---------- */
  .chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 3px;
  }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }

  /* ---------- 2.3 表单：避免 iOS「聚焦即放大页面」（<16px 触发） ---------- */
  .input, .select, .textarea { font-size: 16px; padding: 9px 11px; }
  .field > span { font-size: 12px; }
  .field { margin-bottom: 11px; }
  .form-grid { gap: 0; }

  /* ---------- 2.4 关键值列表：窄屏堆叠，不再被挤成两列窄条 ---------- */
  .kv { grid-template-columns: 1fr; gap: 1px 0; }
  .kv dt { font-size: 11px; }
  .kv dd { margin: 0 0 9px; font-weight: 500; }
  .kv dd:last-child { margin-bottom: 0; }

  /* ---------- 2.5 统计卡：main.css 把 .g4/.g5 折成 1 列 → 收回 2 列 ----------
     仅在子元素确实都是 .stat 时生效（:has），否则维持 main.css 的 1 列 */
  .grid.g4:has(> .stat),
  .grid.g5:has(> .stat) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid.g4 > .stat .stat-value,
  .grid.g5 > .stat .stat-value { font-size: 18px; }
  .stat { padding: 12px 12px 11px; }
  .stat-value { font-size: 20px; }
  .stat-foot { flex-wrap: wrap; gap: 4px 8px; }

  /* ---------- 2.6 表格：外层横向滚动 + 首列吸附 ---------- */
  .tbl-wrap { max-height: none; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl-wrap.short { max-height: 300px; }
  /* 表头本已是 sticky top；首列再加 sticky left（两者可共存，勿互相覆盖） */
  .tbl thead th:first-child { left: 0; z-index: 3; }
  .tbl tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--card);
    box-shadow: 1px 0 0 var(--line-2);
  }
  .tbl tbody tr:hover td:first-child { background: var(--card-2); }
  .tbl th, .tbl td { padding: 8px 10px; }
  /* 单元格内的说明块允许换行，避免整行被一个长备注撑爆 */
  .tbl td .note, .tbl td .kv, .tbl td .row-between { white-space: normal; }

  /* ---------- 2.7 弹窗（main.css 已转底部卡片）：补安全区与竖排按钮 ---------- */
  .modal { max-height: 90vh; }
  .modal.wide { max-width: 100%; }
  .modal-head { padding: 13px 14px; }
  .modal-body { padding: 14px; -webkit-overflow-scrolling: touch; }
  .modal-foot {
    padding: 11px 14px calc(11px + var(--safe-b));
    flex-wrap: wrap;
  }
  .modal-foot .btn { flex: 1 1 auto; justify-content: center; }

  /* ---------- 2.8 内容区：底部让开安全区 ---------- */
  .page { padding-bottom: calc(36px + var(--safe-b)); }
  .card-body { padding: 13px; }
  .card-body.tight { padding: 10px; }
  .note { padding: 9px 11px; }
  .row-between { flex-wrap: wrap; gap: 8px; }
  .toast-layer { padding-left: var(--safe-l); padding-right: var(--safe-r); }

  /* ---------- 2.9 侧边抽屉：顺滑滚动 + 底部安全区 ---------- */
  .sidebar { -webkit-overflow-scrolling: touch; padding-bottom: var(--safe-b); overflow-y: auto; }

  /* ---------- 2.10 浮动帮助按钮：底部安全区（用 body 前缀提高特异度，
       否则会被运行时注入的 .help-fab 基础样式按「后写优先」盖掉） ---------- */
  body .help-fab {
    right: calc(12px + var(--safe-r));
    bottom: calc(12px + var(--safe-b));
    padding: 8px 11px;
  }
}

/* ===========================================================
   3. 小屏手机（≤420）
   =========================================================== */
@media (max-width: 420px) {
  /* 统计卡：原来折成单列，5 张卡要吃掉大半屏（微信里打开要先滑一屏才看到房态）。
     改成两列 + 紧凑字号，一屏能看到房态日历的开头。
     sub 文案只占一行，超长省略——完整数据下面还有明细块。 */
  .grid.g4:has(> .stat),
  .grid.g5:has(> .stat) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .grid.g4 > .stat,
  .grid.g5 > .stat { padding: 9px 10px; }
  .grid.g4 > .stat .stat-value,
  .grid.g5 > .stat .stat-value { font-size: 17px; }
  .grid.g4 > .stat .stat-foot span,
  .grid.g5 > .stat .stat-foot span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .grid.g4 > .stat .stat-label,
  .grid.g5 > .stat .stat-label { font-size: 11.5px; }

  /* 弹窗操作按钮整行铺满，避免「取消/确定」被挤成小方块 */
  .modal-foot .btn { flex: 1 1 100%; }
  .modal-foot { gap: 7px; }

  .tbl th, .tbl td { padding: 7px 9px; font-size: 12px; }
  .card-body { padding: 12px; }
  .note { padding: 8px 10px; font-size: 11.5px; }
  .kv { font-size: 12px; }

  body .help-fab { right: calc(10px + var(--safe-r)); padding: 8px 10px; }
}

/* ===========================================================
   4. 横屏矮屏手机：压缩纵向占用，弹窗更高
   =========================================================== */
@media (max-height: 480px) and (orientation: landscape) {
  .topbar { height: 44px; }
  .page { padding-top: 8px; padding-bottom: calc(20px + var(--safe-b)); }
  .modal { max-height: 96vh; }
  .modal-body { padding: 12px 14px; }
  .grid.g4:has(> .stat),
  .grid.g5:has(> .stat) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===========================================================
   5. 纯触控设备：没有真实 hover，别让「悬停才高亮」误导用户
   =========================================================== */
@media (hover: none) {
  .tbl tbody tr:hover { background: transparent; }
  .tbl tbody tr:hover td:first-child { background: var(--card); }
}