/* ==========================================================
   mobile.css · 手机/窄屏适配（2026-09-29）
   全部移动端样式集中在此文件：
   ≤860px  侧边栏 → 底部导航（全角色）
   ≤640px  表格转卡片（配合 app.js enhanceTables 写入的 data-label）、
           弹窗改底部抽屉、输入 16px 防 iOS 缩放、触控目标加大
   ========================================================== */
/* ========== 平板 / 窄屏（≤860px）：侧边栏 → 底部导航 ========== */
@media (max-width: 860px) {
  .sidebar { display: none; }
  .content { margin-left: 0; padding: 16px 14px calc(76px + env(safe-area-inset-bottom)); max-width: 100%; }
  .mobile-nav {
    display: flex;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .mobile-nav::-webkit-scrollbar { display: none; }
  .mobile-nav .m-item { flex: 0 0 auto; min-width: 62px; padding: 8px 6px 7px; }
  .mobile-nav button.m-item { background: none; border: none; font-family: inherit; cursor: pointer; }
  .mobile-nav .m-exit { color: var(--text-3); }
  .mobile-nav .m-exit:active { opacity: .6; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-value { font-size: 22px; }
  .stat-card { padding: 13px 14px; }
  .filter-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .filter-bar select { flex-shrink: 0; }
  .page-head { margin-bottom: 14px; }
  .page-title { font-size: 17px; }
  .month-picker { flex-wrap: wrap; }
}

/* ========== 手机（≤640px）：表格转卡片、弹窗改底部抽屉、触控优化 ========== */
@media (max-width: 640px) {
  /* 输入类统一 16px：防止 iOS 聚焦时页面自动放大 */
  input, select, textarea, .filter-bar select, .filter-bar input { font-size: 16px; }

  /* ---- 表格 → 卡片（配合 app.js 的 enhanceTables 写入的 data-label） ---- */
  .table-wrap { overflow-x: visible; }
  table.tbl { display: block; }
  table.tbl thead { display: none; }
  table.tbl tbody { display: block; }
  table.tbl tr {
    display: block; background: var(--card);
    border: 1px solid var(--border); border-radius: 12px;
    padding: 4px 14px; margin-bottom: 10px; box-shadow: var(--shadow);
  }
  table.tbl tr:hover td { background: transparent; } /* 触屏没有 hover，避免闪灰 */
  table.tbl td {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 9px 0; border-bottom: 1px dashed var(--border);
    text-align: right; word-break: break-word;
  }
  table.tbl td:last-child { border-bottom: none; }
  table.tbl td::before {
    content: attr(data-label); flex-shrink: 0;
    color: var(--text-2); font-size: 12.5px; text-align: left;
  }
  /* 无字段名的单元格（空状态 / 合计整行提示）独占一行，不显示伪标签 */
  table.tbl td[colspan], table.tbl td[data-label=""] {
    display: block; text-align: left; padding: 7px 0;
  }
  table.tbl td[colspan]::before, table.tbl td[data-label=""]::before { display: none; }
  /* 卡片里单元格内的小提示（如"已超时"）占一行，避免挤压 */
  table.tbl td .form-hint { text-align: right; }

  /* ---- 弹窗 → 底部抽屉 ---- */
  .modal-mask { align-items: flex-end; padding: 0; }
  .modal { width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }
  .modal-head { padding: 14px 16px; position: sticky; top: 0; background: var(--card); z-index: 2; }
  .modal-body { padding: 14px 16px; }
  .modal-foot {
    position: sticky; bottom: 0; background: var(--card); z-index: 2;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 16px rgba(20, 30, 50, .06);
  }
  .modal-foot .btn { flex: 1; padding: 12px; font-size: 15px; }

  /* ---- 触控目标加大 ---- */
  .btn { padding: 10px 16px; }
  .btn-sm { padding: 8px 12px; font-size: 13px; }
  .section-tab .st { padding: 8px 16px; font-size: 13.5px; }
  .tag { padding: 8px 14px; font-size: 13px; }

  /* ---- 其它微调 ---- */
  .content { padding-left: 12px; padding-right: 12px; }
  .card-body { padding: 14px; }
  .card-head { padding: 12px 14px; }
  .login-card { padding: 28px 22px; }
  .sum-line { font-size: 13.5px; }
  /* Toast 移到底部导航上方，手机上顶部容易被输入法/状态栏挡住 */
  #toast { top: auto; bottom: calc(72px + env(safe-area-inset-bottom)); max-width: 86vw; }
}