/* ==========================================================================
   移动端友好交互层  mobile.css   v1
   --------------------------------------------------------------------------
   铁律（勿破）：
   1. 所有规则一律包在 @media (max-width:768px) 内 —— 桌面端零影响。
   2. 只改表现，绝不碰数据、不动业务逻辑、不改任何接口。
   3. 表格改造需由 mobile-ui.js 先打标记（.mob-card / .mob-scroll）才生效，
      脚本未加载时页面保持原样 —— 绝不误伤。
   4. 桌面端专用元素 .pc-only / 移动端专用 .mob-only 由本文件统一托管。
   ========================================================================== */

/* 桌面端：隐藏移动端专属元素 */
.mob-only{ display:none !important; }

@media (max-width:768px){

  .pc-only{ display:none !important; }
  .mob-only{ display:block !important; }

  /* ── 1. 基础：禁止页面级横向滚动（内容由各自容器滚动，不裁掉内容） ── */
  body{ overflow-x:hidden; }
  *{ -webkit-tap-highlight-color:rgba(15,23,42,.06); }

  /* ── 2. 表单控件：16px 防 iOS 聚焦自动放大；触控高度 ≥38px ── */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select, textarea{
    font-size:16px !important;
    min-height:38px;
  }
  textarea{ min-height:72px; }
  input[type="checkbox"], input[type="radio"]{
    width:18px !important; height:18px !important;
  }
  select{ padding:6px 8px !important; }

  /* ── 3. 触控目标 ≥40px（拇指可点，告别「点不中」） ── */
  button{ min-height:40px !important; }
  .btn,.btn-sm,.btn-lg,
  .btn-primary,.btn-ghost,.btn-outline,.btn-gray,
  .btn-success,.btn-danger,.btn-warning,
  .btn-save,.btn-cancel,
  .tab-action-btn,
  .pagination a,.pagination button,.pager a,.pager button{
    min-height:40px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
  }
  .modal-close{ width:36px !important; height:36px !important; font-size:22px !important; }

  /* ── 4. 表格 ──────────────────────────────────────────────
     4.1 .mob-scroll：含合并单元格/嵌套表/无表头 → 横向滚动 + 首列吸附
     4.2 .mob-card ：标准列表 → 卡片化（无需横向拖动即可读全一条记录）
     标记由 mobile-ui.js 依据表结构自动判定，未标记的表保持原样 */
  table.mob-scroll{
    display:block !important;
    width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  table.mob-scroll th:first-child,
  table.mob-scroll td:first-child{
    position:sticky; left:0; z-index:2; background:#fff;
  }

  table.mob-card{
    display:block !important;
    width:100% !important;
    border:none !important;
    overflow:visible !important;
  }
  table.mob-card thead{ display:none !important; }
  table.mob-card tbody{ display:block !important; }
  table.mob-card > tbody > tr,
  table.mob-card > tr{
    display:block !important;
    margin:0 0 10px !important;
    padding:10px 12px !important;
    background:#fff;
    border:1px solid #e5e7eb !important;
    border-radius:10px;
    box-shadow:0 1px 2px rgba(15,23,42,.05);
  }
  table.mob-card td{
    display:flex !important;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:5px 0 !important;
    border:none !important;
    text-align:right !important;
    font-size:14px;
    line-height:1.45;
    word-break:break-word;
  }
  table.mob-card td::before{
    content:attr(data-label);
    flex:0 0 84px;
    max-width:42%;
    color:#64748b;
    font-size:12px;
    font-weight:600;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  table.mob-card td:empty{ display:none !important; }
  /* 合计行保留并单独成卡，避免金额被隐藏 */
  table.mob-card tfoot{ display:block !important; }
  table.mob-card tfoot tr{
    display:block !important;
    padding:8px 12px !important;
    background:#f8fafc;
    border:1px solid #e5e7eb !important;
    border-radius:10px;
  }
  table.mob-card tfoot td{
    display:flex !important; justify-content:space-between;
    padding:3px 0 !important; border:none !important; font-weight:700;
  }
  table.mob-card tfoot td::before{ color:#475569; font-weight:700; }

  /* ── 5. 弹窗：接近全屏 + 内部滚动 + 按钮换行铺满 ── */
  .modal-bg > .modal,
  .modal-mask > .modal,
  .modal-bg > .modal-box,
  .modal-mask > .modal-box{
    width:96vw !important;
    max-width:96vw !important;
    max-height:86vh !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    border-radius:12px !important;
  }
  .modal-btns{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    padding-bottom:calc(8px + env(safe-area-inset-bottom)) !important;
  }
  .modal-btns > *{ flex:1 1 45% !important; min-height:44px !important; }

  /* ── 6. 工具栏 / 筛选行 / 分页：自动换行，不再挤成一团 ── */
  .toolbar,.filter-bar,.search-bar,.action-bar,.top-bar,.list-header,.page-header,
  [class*="toolbar"],[class*="filter"],[class*="action-bar"]{
    flex-wrap:wrap !important;
    gap:8px;
  }
  .toolbar > *,.filter-bar > *,.search-bar > *{ flex:1 1 auto; }
  .pagination,.pager{ flex-wrap:wrap !important; gap:6px !important; }

  /* ── 7. 多列栅格 → 单列 ── */
  .stats,.stat-grid,.card-grid,.grid-2,.grid-3,.grid-4{
    grid-template-columns:1fr !important;
  }

  /* ── 8. 外壳：汉堡按钮内嵌进标签栏左侧，避免遮住第一个标签 ── */
  #tab-bar{ padding-left:44px !important; }
  #hamburger{
    top:4px !important; left:6px !important;
    width:34px !important; height:34px !important; font-size:16px !important;
  }
  .yyzg-tabbar{ padding-left:44px !important; }
  .yyzg-hamburger{
    top:4px !important; left:6px !important;
    width:34px !important; height:34px !important;
  }

  /* ── 9. 悬浮 FAB 统一收拢到右下安全区 ── */
  [id$="FabSave"],[id$="Fab"],.fab{
    bottom:calc(16px + env(safe-area-inset-bottom)) !important;
  }
}