/* ============================================================
 * h5-premium.css — 手机 / 平板 H5 视觉与排版增强层（v1，2026-10-20）
 * ------------------------------------------------------------
 * 设计目标：
 *   1) 竖版手机（≤640px）：一屏信息密度更高，顶栏收到两行、卡片等宽等高、
 *      表格卡片化、按钮 42px 好点、底部安全区不被遮挡；
 *   2) 横版手机（高度 ≤560px）：侧栏变 64px 图标栏、顶栏单行、卡片四列，
 *      把有限的竖向空间全留给内容；
 *   3) 平板（641–1024px）：三列 KPI、更舒展的留白与字号，横屏不空不挤；
 *   4) 桌面（>1024px）：完全不受影响（所有规则都挂在 html.h5 或媒体查询内）。
 *
 * 依赖：h5-premium.js 负责给 <html> 加 h5 / h5-phone / h5-tablet / h5-landscape。
 * 顺序：必须放在各页面自带的 <style> 之后（本文件靠后加载才能覆盖旧规则）。
 * ============================================================ */

/* ---------- 0. 设计变量 ---------- */
html.h5 {
  --h5-bg: #F5F7FB;
  --h5-card: #FFFFFF;
  --h5-line: rgba(16, 24, 40, .07);
  --h5-line-strong: rgba(16, 24, 40, .12);
  --h5-t1: #1B2432;
  --h5-t2: #46536A;
  --h5-t3: #8A94A6;
  --h5-brand: #1677FF;
  --h5-r-lg: 18px;
  --h5-r-md: 14px;
  --h5-r-sm: 12px;
  --h5-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -18px rgba(16, 24, 40, .22);
  --h5-shadow-lift: 0 2px 6px rgba(16, 24, 40, .06), 0 18px 40px -20px rgba(16, 24, 40, .28);
  --h5-gap: 14px;
  -webkit-text-size-adjust: 100%;
}

/* ---------- 1. 基础质感 ---------- */
html.h5 body {
  background: linear-gradient(180deg, #F7F9FC 0%, #F3F6FA 42%, #F5F7FB 100%) !important;
  color: var(--h5-t2);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: .1px;
}
html.h5 h1, html.h5 h2, html.h5 h3, html.h5 h4 {
  color: var(--h5-t1);
  letter-spacing: -.2px;
}
html.h5 ::-webkit-scrollbar { width: 0; height: 0; }

/* 通用卡片：统一圆角 / 描边 / 柔和投影 */
html.h5 .box,
html.h5 .card,
html.h5 .panel,
html.h5 .quick-grid > *,
html.h5 .stat-card {
  border-color: var(--h5-line) !important;
  border-radius: var(--h5-r-lg) !important;
  box-shadow: var(--h5-shadow) !important;
}
html.h5 .box { padding: 16px !important; }
html.h5 .module-head h3,
html.h5 .box > h3,
html.h5 .card > h3,
html.h5 .sec-title {
  font-size: 15.5px !important;
  font-weight: 650 !important;
  letter-spacing: -.2px;
}
html.h5 .sub,
html.h5 .hint { color: var(--h5-t3); }

/* 控件：更大的点击区 + 一致的圆角 */
html.h5 .btn,
html.h5 .btn-primary,
html.h5 .btn-ghost,
html.h5 .link-btn,
html.h5 .tool-btn,
html.h5 .bizf-btn,
html.h5 .statusBtn,
html.h5 .cell-btn,
html.h5 .filter-bar button {
  min-height: 40px;
  border-radius: var(--h5-r-sm) !important;
  font-weight: 550;
  letter-spacing: .1px;
  transition: transform .14s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
html.h5 .btn:active,
html.h5 .btn-primary:active,
html.h5 .btn-ghost:active,
html.h5 .link-btn:active,
html.h5 .tool-btn:active { transform: scale(.97); }

html.h5 input,
html.h5 select,
html.h5 textarea {
  font-size: 16px !important;       /* iOS 聚焦不放大 */
  min-height: 44px;
  border-radius: var(--h5-r-sm) !important;
  border-color: var(--h5-line-strong) !important;
  background: #FAFBFD;
  max-width: 100%;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
html.h5 input:focus,
html.h5 select:focus,
html.h5 textarea:focus {
  background: #fff;
  border-color: var(--h5-brand) !important;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, .12);
  outline: none;
}

/* 表格：卡片化时更干净的层次 */
html.h5 .tbl-cards tbody tr {
  border: 1px solid var(--h5-line) !important;
  border-radius: var(--h5-r-lg) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
  padding: 14px 16px !important;
}
html.h5 .tbl-cards td { padding: 5px 0 !important; font-size: 13.5px !important; }
html.h5 .tbl-cards td::before { color: var(--h5-t3) !important; width: 80px !important; }
html.h5 .tbl-cards td:last-child { border-top-color: var(--h5-line) !important; }

html.h5 .table-wrap,
html.h5 .tbl-wrap {
  border-radius: var(--h5-r-md);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* 弹窗：底部抽屉更"高级"的圆角与抓手 */
html.h5 .modal-mask .modal {
  border-radius: 20px 20px 0 0 !important;
  box-shadow: 0 -8px 40px -12px rgba(16, 24, 40, .28) !important;
  position: relative;
}
html.h5 .modal-mask .modal::before {
  content: "";
  position: absolute;
  top: 8px; left: 50%;
  width: 38px; height: 4px;
  margin-left: -19px;
  border-radius: 999px;
  background: rgba(16, 24, 40, .14);
  pointer-events: none;
}
html.h5 .modal-mask .modal .modal-h,
html.h5 .modal-mask .modal > h3 { padding-top: 6px; }

/* ============================================================
 * 2. 顶栏：手机上从 3–4 行压到 2 行，次要操作横向滚动
 * ============================================================ */
html.h5 .topbar {
  position: sticky;
  top: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 6px;
  margin: 0 -14px 14px;
  padding: 10px 14px 8px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid var(--h5-line);
}
html.h5 .topbar h2 {
  font-size: 17px;
  font-weight: 650;
  max-width: 50vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.h5 .topbar .sp {
  margin-left: 0;
  width: 100%;
  flex: 0 0 100%;     /* 关键：默认 flex:1 1 0% 会让 width:100% 失效，永远挤在标题右边 */
  order: 9;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 4px;
  scrollbar-width: none;
}
html.h5 .topbar .sp::-webkit-scrollbar { display: none; }
html.h5 .topbar .sp > * { flex: 0 0 auto; }

html.h5 .topbar .pill {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--h5-line);
}
html.h5 .topbar .link-btn,
html.h5 .topbar .btn-ghost,
html.h5 .store-ms-btn {
  height: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-size: 12.5px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--h5-line);
}
html.h5 .topbar .user-chip {
  height: 32px;
  padding: 0 10px;
  font-size: 12.5px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--h5-line);
}
html.h5 .topbar .user-chip b {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}
html.h5 .topbar .user-chip i,
html.h5 .topbar .user-chip .st { display: none; }
html.h5 #syncText,
html.h5 #syncTextHero { display: none; }   /* 只保留状态圆点，省一行 */

/* 手机上把「人员管理 / 前台接待 / 退出」排到最前，横向滚动时先看到有用的 */
html.h5 .topbar .sp > a.link-btn { order: -2; }
html.h5 .topbar .sp > button.btn-ghost { order: -1; }
html.h5 .topbar .sp > .pill { order: 1; }
html.h5 .topbar .sp > .store-switch,
html.h5 .topbar .sp > .store-ms-wrap { order: 2; }
html.h5 .topbar .sp > .user-chip { order: 3; }

html.h5 .sk-burger {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  border-color: var(--h5-line) !important;
  background: #fff !important;
}

/* ============================================================
 * 3. 竖版手机（≤640px）
 * ============================================================ */
@media (max-width: 640px) {
  html.h5 .main { padding: 0 12px calc(26px + env(safe-area-inset-bottom)) !important; }
  html.h5 .topbar { margin: 0 -12px 12px; padding: 9px 12px 7px; }
  html.h5 .topbar h2 { font-size: 16.5px; max-width: 46vw; }
  html.h5 .topbar .sp { gap: 5px; }

  /* KPI：两列等宽等高，去掉旧规则里的"首卡通栏"造成的参差 */
  /* 用 flex 而不是 grid：最后一行的卡片会自动拉伸补满，不会留下半截空位 */
  html.h5 .stat-strip,
  html.h5 .stats {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px !important;
    margin: 0 0 14px !important;
  }
  html.h5 .stat-strip > .stat-card,
  html.h5 .stats > .stat {
    flex: 1 1 calc(50% - 5px) !important;
    width: auto !important;
    grid-column: auto !important;
    min-height: 86px;
    padding: 14px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  html.h5 .stat-card .sc-num,
  html.h5 .stat .v { font-size: 24px !important; margin: 0 0 3px !important; letter-spacing: -.6px; }
  html.h5 .stat-card .sc-label,
  html.h5 .stat .k { font-size: 12px !important; line-height: 1.35; }
  html.h5 .stat-card:hover { transform: none !important; }

  /* 门店切换收窄，给导航链接让位 */
  html.h5 .topbar .store-switch,
  html.h5 .topbar .store-ms-btn {
    max-width: 128px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 打卡卡：标题一行，大号时间 + 日期一行，不再挤在同一行 */
  html.h5 .card-head { flex-wrap: wrap; gap: 6px 10px; }
  html.h5 #clockCard .card-head { display: block; }
  html.h5 #clockCard .card-head .sp {
    display: flex; align-items: baseline; justify-content: flex-start;
    gap: 8px; margin-top: 6px; flex-wrap: wrap;
  }
  html.h5 .clock-now { font-size: 34px !important; letter-spacing: -1px; line-height: 1.1; }
  html.h5 #clockDate { font-size: 12px !important; color: var(--h5-t3); }

  html.h5 .box { padding: 14px !important; border-radius: 16px !important; }
  html.h5 .box + .box { margin-top: 12px; }

  /* 筛选栏：横向滚动的胶囊，不再挤成两行 */
  html.h5 .filter-bar,
  html.h5 .toolbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  html.h5 .filter-bar::-webkit-scrollbar { display: none; }
  html.h5 .filter-bar > *,
  html.h5 .toolbar > * { flex: 0 0 auto; }

  /* 底部 tab（人员管理页）留出安全距离 */
  html.h5 .main { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }

  /* 表单里的双列一律单列，避免挤字 */
  html.h5 .grid2,
  html.h5 .fgrid,
  html.h5 .fgrid2,
  html.h5 .rgrid { grid-template-columns: 1fr !important; }

  /* 操作按钮铺满一行，指头好点 */
  html.h5 .row-ops,
  html.h5 .tbl-cards td:last-child { gap: 8px !important; }
  html.h5 .tbl-cards td:last-child a,
  html.h5 .tbl-cards td:last-child button {
    flex: 1 1 auto;
    text-align: center;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* 超窄机（≤360px）：再收一档 */
@media (max-width: 360px) {
  html.h5 .stat-card { padding: 12px !important; min-height: 78px; }
  html.h5 .stat-card .sc-num { font-size: 21px !important; }
  html.h5 .topbar h2 { max-width: 40vw; }
}

/* ============================================================
 * 4. 平板（641–1024px，含 iPad 竖屏）
 * ============================================================ */
@media (min-width: 641px) and (max-width: 1024px) {
  html.h5 .main { padding: 16px 18px 34px !important; }
  html.h5 .topbar { margin: 0 -18px 16px; padding: 12px 18px 10px; }
  html.h5 .topbar h2 { font-size: 19px; max-width: none; }
  html.h5 .topbar .sp { width: auto; flex: 0 1 auto; order: 0; margin-left: auto; overflow: visible; padding: 0; }

  /* 平板一行四张（iPad 竖屏正好铺满），不足一行的卡片自动拉伸补位 */
  html.h5 .stat-strip,
  html.h5 .stats {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px !important;
    margin: 0 0 16px !important;
  }
  html.h5 .stat-strip > .stat-card,
  html.h5 .stats > .stat {
    flex: 1 1 calc(25% - 9px) !important;
    min-width: 0;
    width: auto !important;
    grid-column: auto !important;
    padding: 16px !important;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  html.h5 .stat-card .sc-num,
  html.h5 .stat .v { font-size: 22px !important; margin: 0 0 4px !important; letter-spacing: -.4px; }

  html.h5 .box { padding: 18px !important; }
  html.h5 .tbl-cards td { font-size: 13.5px !important; }
}

/* ============================================================
 * 5. 横版手机（高度 ≤560px）：图标栏 + 单行顶栏 + 四列 KPI
 * ============================================================ */
@media (orientation: landscape) and (max-height: 560px) {
  html.h5 .shell { flex-direction: row !important; }

  /* 侧栏 → 64px 图标栏（只留 emoji / 图标，hover 有 title 提示） */
  html.h5 .sidebar {
    position: fixed !important;
    left: 0; top: 0; bottom: 0;
    width: 64px !important;
    transform: none !important;
    z-index: 130;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0 !important;
    background: #fff !important;
    border-right: 1px solid var(--h5-line) !important;
    border-bottom: none !important;
    box-shadow: 4px 0 18px -12px rgba(16, 24, 40, .25);
    -webkit-overflow-scrolling: touch;
  }
  html.h5 .sidebar .brand,
  html.h5 .sidebar .brand-t,
  html.h5 .sidebar .nav-label,
  html.h5 .sidebar .nav-dot,
  html.h5 .sidebar .side-foot,
  html.h5 .sidebar .side-collapse { display: none !important; }
  html.h5 .sidebar .nav-group {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  html.h5 .sidebar .nav-item {
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0 !important;
    height: 42px;
    margin: 2px 8px;
    padding: 0 !important;
    border-radius: 12px;
    position: relative;
  }
  html.h5 .sidebar .nav-item .ic,
  html.h5 .sidebar .nav-item .sb-label { font-size: 17px !important; }
  html.h5 .sidebar .nav-item .sb-label { display: none !important; }
  html.h5 .sidebar .nav-item.on::before { display: none !important; }
  html.h5 .sidebar .nav-item.on { background: rgba(22, 119, 255, .10) !important; }

  html.h5 .main {
    margin-left: 64px;
    padding: 0 14px 18px !important;
  }

  /* 顶栏压成单行，操作横滚 */
  html.h5 .topbar {
    position: sticky;
    top: 0;
    z-index: 90;
    margin: 0 -14px 10px;
    padding: 6px 14px;
    flex-wrap: nowrap;
    gap: 8px;
  }
  html.h5 .topbar h2 { font-size: 15.5px; max-width: 34vw; }
  html.h5 .topbar .sp {
    width: auto;
    flex: 0 1 auto;
    order: 0;
    margin-left: auto;
    overflow-x: auto;
    padding: 0;
  }
  html.h5 .topbar .pill,
  html.h5 .topbar .link-btn,
  html.h5 .topbar .btn-ghost,
  html.h5 .topbar .user-chip { height: 30px; min-height: 30px; font-size: 12px; }
  html.h5 .sk-burger { display: none !important; }   /* 图标栏已常驻，不再需要汉堡 */
  /* 图标栏内容超过一屏时，底部给一点渐隐提示可继续下滑 */
  html.h5 .sidebar::after {
    content: "";
    position: sticky;
    bottom: 0;
    display: block;
    height: 26px;
    margin-top: auto;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 70%);
    pointer-events: none;
    flex: 0 0 auto;
  }

  /* KPI 四列一行看全 */
  html.h5 .stat-strip,
  html.h5 .stats {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px !important;
    margin: 0 0 10px !important;
  }
  html.h5 .stat-strip > .stat-card,
  html.h5 .stats > .stat {
    flex: 1 1 calc(25% - 6px) !important;
    width: auto !important;
    grid-column: auto !important;
    padding: 10px 12px !important;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  html.h5 .stat-card .sc-num,
  html.h5 .stat .v { font-size: 20px !important; margin: 0 !important; }
  html.h5 .stat-card .sc-label,
  html.h5 .stat .k { font-size: 11.5px !important; }

  html.h5 .box { padding: 12px 14px !important; border-radius: 14px !important; }

  /* 底部 tab 在横版占地方，直接隐藏（图标栏已可导航） */
  html.h5 .sk-tabbar,
  html.h5 .sk-bottombar { display: none !important; }

  /* 弹窗改成居中卡片，避免抽屉占满可视高度 */
  html.h5 .modal-mask { align-items: center !important; padding: 12px !important; }
  html.h5 .modal-mask .modal {
    width: min(660px, 94vw) !important;
    max-width: 94vw !important;
    max-height: 92vh !important;
    border-radius: 18px !important;
    animation: none !important;
  }
  html.h5 .modal-mask .modal::before { display: none; }

  /* 横版表格继续用卡片形态，但更紧凑 */
  html.h5 .tbl-cards tbody tr { padding: 10px 12px !important; margin-bottom: 8px !important; }
  html.h5 .tbl-cards td { padding: 3px 0 !important; font-size: 13px !important; }
}

/* ============================================================
 * 6. 触屏细节
 * ============================================================ */
@media (hover: none) {
  html.h5 .stat-card:hover { transform: none !important; }
  html.h5 .nav-item:hover { background: transparent; }
  html.h5 .nav-item.on:hover { background: rgba(22, 119, 255, .10); }
  html.h5 .btn:hover,
  html.h5 .link-btn:hover { box-shadow: none; }
  html.h5 a, html.h5 button { -webkit-tap-highlight-color: transparent; }
}

/* ============================================================
 * 7. 首屏观感：载入时轻微淡入，避免"跳一下"
 * ============================================================ */
@keyframes h5-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
html.h5 .content > .box,
html.h5 .content > .card,
html.h5 #viewHome .sec-title {
  animation: h5-rise .34s cubic-bezier(.16, 1, .3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  html.h5 .content > .box,
  html.h5 .content > .card { animation: none !important; }
}

/* ============================================================
 * 8. 宽表可横滑提示（JS 加 .h5-scrollable）
 * ============================================================ */
html.h5 .table-wrap.h5-scrollable,
html.h5 .tbl-wrap.h5-scrollable {
  background-image: linear-gradient(to left, rgba(16, 24, 40, .08), rgba(16, 24, 40, 0));
  background-repeat: no-repeat;
  background-size: 22px 100%;
  background-position: right center;
}

/* 吸顶顶栏存在时，锚点定位留出高度 */
html.h5 .view,
html.h5 .box[id],
html.h5 section[id] { scroll-margin-top: 96px; }

/* 长表分页按钮：指头友好 */
html.h5 .upager button,
html.h5 .cm-pager button,
html.h5 .pg {
  min-width: 38px;
  min-height: 38px;
  border-radius: 10px;
}

/* ============================================================
 * 9. 通用表格卡片化（手机竖版，JS 按列数自动加 .h5-cards）
 * ============================================================ */
@media (max-width: 640px) {
  html.h5 .table-wrap.h5-cards-wrap,
  html.h5 .tbl-wrap.h5-cards-wrap { overflow: visible !important; }

  html.h5 table.h5-cards {
    display: block;
    width: 100%;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html.h5 table.h5-cards thead { display: none; }
  html.h5 table.h5-cards tbody { display: block; }
  html.h5 table.h5-cards tbody tr {
    display: block;
    border: 1px solid #EEF1F6;
    border-radius: 14px;
    background: #FBFCFE;
    padding: 10px 12px;
    margin: 0 0 8px;
  }
  html.h5 table.h5-cards tbody tr:last-child { margin-bottom: 0; }
  html.h5 table.h5-cards tbody tr:hover { background: #FBFCFE; }
  html.h5 table.h5-cards td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border: 0 !important;
    padding: 3px 0 !important;
    font-size: 13.5px !important;
    line-height: 1.5;
    white-space: normal !important;
    word-break: break-word;
    color: var(--h5-t1);
  }
  html.h5 table.h5-cards td::before {
    content: attr(data-label);
    flex: 0 0 78px;
    color: var(--h5-t3);
    font-size: 12px;
    font-weight: 400;
  }
  html.h5 table.h5-cards td:last-child {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    padding-top: 8px !important;
    border-top: 1px dashed #E6EAF1 !important;
  }
  html.h5 table.h5-cards td:last-child::before { display: none; }
  html.h5 table.h5-cards td[colspan] { display: block !important; }
  html.h5 table.h5-cards td[colspan]::before { display: none; }
  html.h5 table.h5-cards td:empty { display: none; }
}

/* ============================================================
 * 10. 超宽表（>7 列，如人员管理 19 列）：手机上有序横滑，不再把字压成竖排
 * ============================================================ */
@media (max-width: 640px) {
  html.h5 table.dt,
  html.h5 table.dt.dt-wide {
    display: table !important;
    width: auto !important;
    min-width: 100%;
    table-layout: auto !important;
    border-collapse: separate;
    border-spacing: 0;
  }
  html.h5 table.dt th,
  html.h5 table.dt td {
    white-space: nowrap !important;
    word-break: keep-all;
    padding: 10px 12px !important;
    font-size: 12.5px !important;
    line-height: 1.4;
    min-width: 64px;
    vertical-align: middle;
  }
  html.h5 table.dt thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #F7F9FC !important;
    font-size: 12px !important;
    font-weight: 600;
    color: var(--h5-t2) !important;
  }
  /* 首列（通常是姓名 / 单号）横向滑动时钉住 */
  html.h5 table.dt th:first-child,
  html.h5 table.dt td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #fff !important;
    box-shadow: 1px 0 0 #EDF0F5;
  }
  html.h5 table.dt thead th:first-child { z-index: 4; background: #F7F9FC !important; }
  html.h5 table.dt tbody tr:nth-child(even) td:first-child { background: #FBFCFD !important; }
}

/* ============================================================
 * 11. 宽表横滑容器 + 页面兜底裁剪（防止宽表把整页撑开，连带弹窗错位）
 * ============================================================ */
html.h5 .main { overflow-x: clip; }
html.h5 .content { min-width: 0; }

@media (max-width: 640px) {
  html.h5 .h5-scrollx {
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
  }
  /* 横滑区域右侧渐隐，提示还有内容 */
  html.h5 .h5-scrollx {
    background-image: linear-gradient(to left, rgba(16, 24, 40, .07), rgba(16, 24, 40, 0));
    background-repeat: no-repeat;
    background-size: 20px 100%;
    background-position: right center;
  }
}

/* 宽表横滑提示 */
html.h5 .h5-swipe-tip {
  display: none;
}
@media (max-width: 640px) {
  html.h5 .h5-swipe-tip {
    display: block;
    font-size: 11.5px;
    color: #98A2B3;
    text-align: center;
    letter-spacing: .2px;
    padding: 8px 0 2px;
  }
}

/* ============================================================
 * 12. 细节补丁：顶栏可横滑提示 / 看板行内排布
 * ============================================================ */
@media (max-width: 640px) {
  /* 操作行右边渐隐：让人知道还能往左滑，而不是"被切断了" */
  html.h5 .topbar .sp {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 16px), transparent 100%);
  }
  /* 账号胶囊留在操作行末尾（.sp 是横滑容器，绝对定位会被裁掉，不要动它） */
  html.h5 .topbar h2 { max-width: 52vw; }

  /* 任务看板：派单行允许换行，"待派单"不再被挤成竖排 */
  html.h5 #tableBody td[data-col="assignee"] { flex-wrap: wrap; row-gap: 6px; }
  html.h5 #tableBody td[data-col="ops"]::before { display: none; }
  html.h5 #tableBody td[data-col="ops"] { justify-content: flex-start; }
  html.h5 #tableBody tr { padding: 12px 14px !important; }
}