/* ==========================================================================
   skin-mobile-first.css  ·  移动端优先风（大按钮 / 卡片流 / 44px 触摸目标）
   素材来源（真实扒取，未手编）：
     vant v4.9.15 — lib/index.css  `:root,:host` 设计令牌块
       --van-primary-color: #1989fa      --van-border-color: #ebedf0
       --van-background: #f7f8fa         --van-background-2: #fff
       --van-text-color: #323233         --van-text-color-2: #969799
       --van-padding-md: 16px            --van-radius-lg: 8px
       --van-font-size-md: 14px          --van-font-size-lg: 16px
       --van-font-bold: 600              --van-duration-base: .3s / --van-ease-out: ease-out
     触摸目标 44px：沿用工作台既有 --fh-touch: 44px（Apple HIG / Material 同值）
   启用：<html data-fh-skin="mobile">
   ========================================================================== */

html[data-fh-skin="mobile"] {
  --mob-primary: #1989fa;
  --mob-primary-rgb: 25, 137, 250;
  --mob-primary-dark: #0570db;
  --mob-border: #ebedf0;
  --mob-bg: #f7f8fa;
  --mob-surface: #ffffff;
  --mob-text: #323233;
  --mob-text-2: #969799;
  --mob-pad: 16px;
  --mob-radius: 8px;
  --mob-touch: 48px;
  --mob-ease: cubic-bezier(0.25, 0.8, 0.25, 1);

  --sk-primary: #1989fa;
  --sk-primary-rgb: 25, 137, 250;
  --sk-primary-hover: #0570db;
  --sk-radius: 8px;
  --sk-radius-sm: 6px;
  --sk-radius-lg: 8px;
  --sk-border-color: #ebedf0;
  --sk-border-color-translucent: #ebedf0;
  --sk-bg-surface: #ffffff;
  --sk-bg-surface-tertiary: #f7f8fa;
  --sk-shadow-card: 0 1px 2px rgba(0, 0, 0, .04);
  --sk-shadow-input: none;
  --sk-body-color: #323233;
  --sk-secondary-color: #969799;

  --fh-primary: #1989fa;
  --fh-primary-hover: #0570db;
  --fh-primary-soft: #e8f3ff;
  --fh-text: #323233;
  --fh-text-2: #646566;
  --fh-text-muted: #969799;
  --fh-bg-page: #f7f8fa;
  --fh-bg-card: #ffffff;
  --fh-border: #ebedf0;
  --fh-border-strong: #dcdee0;
  --fh-radius: 8px;
  --fh-radius-lg: 8px;
  --fh-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  --fh-touch: 48px;
}

/* ---------- 骨架：浅灰底 + 大留白 ---------- */
html[data-fh-skin="mobile"] body,
html[data-fh-skin="mobile"] #pageContainer {
  background: var(--mob-bg) !important;
  font-size: 15px !important;
  -webkit-text-size-adjust: 100%;
}
html[data-fh-skin="mobile"] .topbar {
  background: #fff !important;
  border-bottom: 1px solid var(--mob-border) !important;
  min-height: 56px !important;
}

/* ---------- 卡片流：无缝白块 + 轻阴影 + 8px 圆角 ---------- */
html[data-fh-skin="mobile"] .card,
html[data-fh-skin="mobile"] .stat-card,
html[data-fh-skin="mobile"] .module-container,
html[data-fh-skin="mobile"] .lg-card,
html[data-fh-skin="mobile"] .lg-kpi,
html[data-fh-skin="mobile"] .wh-kpi {
  background: var(--mob-surface) !important;
  border: 0 !important;
  border-radius: var(--mob-radius) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04) !important;
  margin-bottom: 12px !important;
  transition: transform .2s var(--mob-ease), box-shadow .2s var(--mob-ease) !important;
}
html[data-fh-skin="mobile"] .card:active,
html[data-fh-skin="mobile"] .stat-card:active {
  transform: scale(0.985) !important;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
}
html[data-fh-skin="mobile"] .card-header {
  background: #fff !important;
  border-bottom: 1px solid var(--mob-border) !important;
  padding: 14px var(--mob-pad) !important;
  border-radius: var(--mob-radius) var(--mob-radius) 0 0 !important;
}
html[data-fh-skin="mobile"] .card-title,
html[data-fh-skin="mobile"] .card h3 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--mob-text) !important;
}
html[data-fh-skin="mobile"] .card-body { padding: var(--mob-pad) !important; }
html[data-fh-skin="mobile"] .module-header h2 { font-size: 18px !important; color: var(--mob-text) !important; }
html[data-fh-skin="mobile"] .module-header p { color: var(--mob-text-2) !important; }

/* KPI：大数字 + 主色 */
html[data-fh-skin="mobile"] .stat-value,
html[data-fh-skin="mobile"] .stat-num,
html[data-fh-skin="mobile"] .stat-card b,
html[data-fh-skin="mobile"] .lg-kpi b,
html[data-fh-skin="mobile"] .wh-kpi b {
  font-size: 26px !important;
  font-weight: 600 !important;
  color: var(--mob-primary) !important;
  line-height: 1.15 !important;
}
html[data-fh-skin="mobile"] .stat-label,
html[data-fh-skin="mobile"] .lg-kpi span,
html[data-fh-skin="mobile"] .wh-kpi span { font-size: 13px !important; color: var(--mob-text-2) !important; }

/* ---------- 按钮：48px 触摸目标、8px 圆角、全宽 ---------- */
html[data-fh-skin="mobile"] .btn,
html[data-fh-skin="mobile"] .lg-btn,
html[data-fh-skin="mobile"] .wh-btn,
html[data-fh-skin="mobile"] .dm-btn,
html[data-fh-skin="mobile"] .bc-tab {
  min-height: var(--mob-touch) !important;
  height: auto !important;
  padding: 0 20px !important;
  border-radius: var(--mob-radius) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border: 1px solid var(--mob-border) !important;
  background: #fff !important;
  color: var(--mob-text) !important;
  box-shadow: none !important;
  transition: background .2s var(--mob-ease), transform .12s var(--mob-ease) !important;
}
html[data-fh-skin="mobile"] .btn:active { transform: scale(0.97) !important; background: #f2f3f5 !important; }
html[data-fh-skin="mobile"] .btn-primary,
html[data-fh-skin="mobile"] .btn.btn-primary,
html[data-fh-skin="mobile"] .lg-btn.pri,
html[data-fh-skin="mobile"] .wh-btn.pri,
html[data-fh-skin="mobile"] .dm-btn.on,
html[data-fh-skin="mobile"] .bc-tab.active {
  background: var(--mob-primary) !important;
  border-color: var(--mob-primary) !important;
  color: #fff !important;
}
html[data-fh-skin="mobile"] .btn-primary:active { background: var(--mob-primary-dark) !important; }
/* 卡片内的操作按钮组：整行铺开，避免挤成小方块 */
html[data-fh-skin="mobile"] .card .btn + .btn { margin-left: 8px; }
@media (max-width: 640px) {
  html[data-fh-skin="mobile"] .card .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ---------- 表单：44/48px 高、圆角、iOS 防缩放 16px ---------- */
html[data-fh-skin="mobile"] .form-control,
html[data-fh-skin="mobile"] .form-input,
html[data-fh-skin="mobile"] .card select,
html[data-fh-skin="mobile"] .card textarea,
html[data-fh-skin="mobile"] .card input:not([type="checkbox"]):not([type="radio"]) {
  min-height: 46px !important;
  padding: 12px 14px !important;
  font-size: 16px !important;
  border-radius: var(--mob-radius) !important;
  border: 1px solid var(--mob-border) !important;
  background: #fff !important;
  box-shadow: none !important;
}
html[data-fh-skin="mobile"] .form-control:focus,
html[data-fh-skin="mobile"] .form-input:focus {
  border-color: var(--mob-primary) !important;
  box-shadow: 0 0 0 3px rgba(25, 137, 250, .14) !important;
  outline: 0 !important;
}

/* ---------- 表格：小字号 + 横滑（不转卡片，保留信息密度） ---------- */
html[data-fh-skin="mobile"] .table,
html[data-fh-skin="mobile"] .data-table,
html[data-fh-skin="mobile"] .biz-table {
  font-size: 13.5px !important;
}
html[data-fh-skin="mobile"] .table > :not(caption) > * > * {
  padding: 12px 10px !important;
}
html[data-fh-skin="mobile"] .table > thead > tr > * {
  background: #f7f8fa !important;
  color: var(--mob-text-2) !important;
  font-size: 12.5px !important;
}
html[data-fh-skin="mobile"] .fk-tbl-scroll > .table { min-width: 520px !important; }

/* ---------- 弹层：底部抽屉观感 ---------- */
html[data-fh-skin="mobile"] .modal,
html[data-fh-skin="mobile"] .modal-content,
html[data-fh-skin="mobile"] .modal-box,
html[data-fh-skin="mobile"] .ui-modal {
  border-radius: 16px 16px 0 0 !important;
  border: 0 !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .12) !important;
}
html[data-fh-skin="mobile"] .badge {
  border-radius: 999px !important;
  padding: 2px 10px !important;
  background: #e8f3ff !important;
  color: var(--mob-primary) !important;
  font-size: 12px !important;
}
/* 底部安全区（iPhone 刘海屏） */
html[data-fh-skin="mobile"] #pageContainer {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}
/* 窄屏实测修正：520px 分 9 列时中文被压成竖排，加宽到 760px 并禁止单元格折行，
   靠 .fk-tbl-scroll 横向滑动查看（wrap 实测 overflow-x:auto 生效）。 */
@media (max-width: 640px) {
  html[data-fh-skin="mobile"] .fk-tbl-scroll > .table { min-width: 760px !important; }
}
html[data-fh-skin="mobile"] .table > thead > tr > *,
html[data-fh-skin="mobile"] .table > tbody > tr > * {
  white-space: nowrap !important;
}
/* 页签行不折行，改为横滑 */
html[data-fh-skin="mobile"] .tabs > *,
html[data-fh-skin="mobile"] .bc-tab,
html[data-fh-skin="mobile"] .fh-nav-tools > * {
  white-space: nowrap !important;
}
html[data-fh-skin="mobile"] .tabs {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html[data-fh-skin="mobile"] .tabs::-webkit-scrollbar { display: none; }