/* =====================================================================
   移动端样式层 —— 只在 html.is-mobile 下生效，电脑端不受影响
   ===================================================================== */

html.is-mobile { -webkit-text-size-adjust: 100%; }
html.is-mobile body { overscroll-behavior-y: contain; -webkit-tap-highlight-color: transparent; }

/* ===================== 1. 主框架 ===================== */
html.is-mobile .layout { flex-direction: row; }

html.is-mobile .side {
  position: fixed; left: 0; top: 0; bottom: 0;
  z-index: 3001; width: 78vw; max-width: 300px;
  flex: none;
  transform: translateX(-105%);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 0 32px rgba(8, 22, 38, .3);
  padding-bottom: env(safe-area-inset-bottom);
  will-change: transform;
}
html.is-mobile .side.m-open { transform: translateX(0); }
html.is-mobile .side.collapsed { flex: none; }
html.is-mobile .side.collapsed .logo .txt { display: block; }
html.is-mobile .side.collapsed .mitem span.label { display: inline; }
html.is-mobile .side.collapsed .mitem { justify-content: flex-start; }
html.is-mobile .side .mgroup { height: 40px; font-size: 13.5px; }
html.is-mobile .side .mitem { height: 44px; font-size: 14px; }

html.is-mobile .m-mask {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(8, 22, 38, .42);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

html.is-mobile .main { flex: 1; width: 100%; min-width: 0; }
html.is-mobile .topbar { height: 52px; flex: 0 0 52px; padding: 0 6px; gap: 2px; }
html.is-mobile .topbar .crumb {
  font-size: 13px; max-width: 48vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.is-mobile .topbar .crumb .crumb-group { display: none; }

html.is-mobile .tabbar {
  padding: 5px 6px 0; gap: 4px;
  overflow-x: auto; scrollbar-width: none;
}
html.is-mobile .tabbar::-webkit-scrollbar { display: none; }
html.is-mobile .tab-item {
  height: 30px; font-size: 12px; padding: 0 10px;
  max-width: 148px; flex: none; border-radius: 8px 8px 0 0;
}
html.is-mobile .tab-item .tab-x { width: 18px; height: 18px; line-height: 16px; }
html.is-mobile .tabbar .tab-tools { display: none; }

html.is-mobile .content { padding: 10px 10px calc(70px + env(safe-area-inset-bottom)); }

/* ===================== 2. 底部导航 ===================== */
/* 层级压在弹窗之下（Element Plus 的遮罩约 2000+）：抽屉打开时导航条让位，
   否则抽屉底部的「保存 / 取消」正好落在导航条底下，看着有、点不到 */
html.is-mobile .m-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
  display: flex;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 18px rgba(16, 40, 66, .06);
}
html.is-mobile .m-nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; height: 56px; font-size: 11px;
  color: #8494a4; cursor: pointer; user-select: none;
  transition: color .15s, transform .12s;
}
html.is-mobile .m-nav-item .el-icon { font-size: 21px; }
html.is-mobile .m-nav-item.on { color: var(--brand-2); font-weight: 600; }
html.is-mobile .m-nav-item:active { transform: scale(.94); }

/* ===================== 3. 页面通用（APP 观感） ===================== */
/* 吸顶标题栏：滚动时页面名固定在顶部，像原生 APP 的导航条 */
html.is-mobile .pg-head {
  position: sticky; top: 0; z-index: 900;
  margin: -10px -10px 9px; padding: 11px 12px 10px;
  background: var(--bg); flex-wrap: wrap; gap: 8px;
}
html.is-mobile .pg-head h2 { font-size: 18px; letter-spacing: -.3px; }
html.is-mobile .pg-head .sub { display: none; }
html.is-mobile .pg-head .right { margin-left: auto; gap: 6px; }
html.is-mobile .pg-head .right .el-button { min-height: 34px; padding: 6px 11px; }

html.is-mobile .card {
  border: none; border-radius: 15px; padding: 12px;
  box-shadow: 0 2px 10px rgba(16, 40, 66, .055);
}
/* 卡片列表页：外层卡片摊平，工具栏独立成块，卡片之间留呼吸 */
html.is-mobile .card.m-flat {
  background: transparent; box-shadow: none; border-radius: 0; padding: 0;
}
html.is-mobile .card.m-flat > .toolbar {
  background: #fff; border-radius: 15px; padding: 10px;
  margin-bottom: 11px; box-shadow: 0 2px 10px rgba(16, 40, 66, .055);
}

/* 工具栏一行横向滑动：搜索框占位，其余按钮靠滑动，不再挤成好几行 */
html.is-mobile .toolbar {
  gap: 6px; flex-wrap: nowrap !important;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
html.is-mobile .toolbar::-webkit-scrollbar { display: none; }
html.is-mobile .toolbar > * { flex: 0 0 auto; }
html.is-mobile .toolbar > .el-input { flex: 1 1 150px; min-width: 118px; width: auto !important; }
html.is-mobile .toolbar .el-select,
html.is-mobile .toolbar .el-date-editor { width: auto !important; min-width: 126px; max-width: 62vw; }
html.is-mobile .toolbar > .grow { display: none; }

/* ===================== 4. 弹窗 / 抽屉全屏 ===================== */
/* 遮罩铺满整屏（电脑端只盖内容区）；层级交给底部导航让位（见 .m-nav 的 z-index），
   这样抽屉底部的「取消 / 保存」不会被导航条压住，下拉弹层也不会被抽屉反压。 */
html.is-mobile .el-overlay {
  left: 0 !important; top: 0 !important;
}
html.is-mobile .el-overlay .el-overlay-dialog { inset: 0 !important; }
html.is-mobile .el-dialog {
  width: calc(100vw - 16px) !important;
  max-width: none !important;
  margin: 8px auto !important;
  border-radius: 14px !important;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 16px);
}
html.is-mobile .el-dialog__header { padding: 14px 14px 6px; flex: none; }
html.is-mobile .el-dialog__title { font-size: 16px; }
html.is-mobile .el-dialog__body {
  padding: 8px 14px 14px;
  flex: 1 1 auto; min-height: 0;
  max-height: none;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
html.is-mobile .el-dialog__footer {
  padding: 8px 14px calc(12px + env(safe-area-inset-bottom));
  flex: none; background: #fff;
  border-top: 1px solid #eef2f7;
  border-radius: 0 0 14px 14px;
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
}
html.is-mobile .el-drawer { width: 100% !important; height: 100% !important; }
html.is-mobile .el-drawer__header { margin-bottom: 0; padding: 12px 14px; flex: none; }
html.is-mobile .el-drawer__body {
  padding: 0; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* 抽屉底部按钮条：贴底、不透明、按钮均分，永远看得见点得到 */
html.is-mobile .el-drawer__footer {
  flex: none; background: #fff;
  border-top: 1px solid #eef2f7;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
}

/* ===================== 5. 表单：标签上置 ===================== */
html.is-mobile .el-form-item { display: block; margin-bottom: 14px; }
html.is-mobile .el-form-item__label,
html.is-mobile .el-form-item__label-wrap {
  display: block !important; float: none !important;
  width: auto !important; text-align: left !important;
  padding: 0 0 4px !important; line-height: 1.4 !important;
  font-size: 12.5px; color: var(--txt-2);
}
html.is-mobile .el-form-item__content { margin-left: 0 !important; }
html.is-mobile .el-form-item__content > .el-input,
html.is-mobile .el-form-item__content > .el-select,
html.is-mobile .el-form-item__content > .el-date-editor { width: 100% !important; }

/* ===================== 6. 触控尺寸 ===================== */
html.is-mobile .el-button { min-height: 38px; padding: 8px 13px; }
html.is-mobile .el-button.is-text,
html.is-mobile .el-button.is-link { min-height: 30px; padding: 4px 6px; }
html.is-mobile .el-input__wrapper,
html.is-mobile .el-select__wrapper { min-height: 38px; }
html.is-mobile .el-checkbox, html.is-mobile .el-radio { margin-right: 12px; }

/* ===================== 7. 表格兜底（未卡片化的页面） ===================== */
html.is-mobile .el-table { font-size: 12.5px; }
html.is-mobile .el-table .cell { padding: 0 8px; line-height: 1.5; }
html.is-mobile .el-table__body-wrapper { -webkit-overflow-scrolling: touch; }

/* ===================== 8. 分页 ===================== */
html.is-mobile .el-pagination { justify-content: center; }
html.is-mobile .el-pagination button,
html.is-mobile .el-pagination .el-pager li { min-width: 30px; height: 30px; }

/* ===================== 9. 业务列表卡片（DataPage 移动端） ===================== */
html.is-mobile .m-list { display: flex; flex-direction: column; gap: 10px; }
html.is-mobile .m-card {
  background: #fff; border-radius: 12px; padding: 12px 13px;
  box-shadow: 0 1px 8px rgba(16, 40, 66, .07);
  border-left: 3px solid transparent;
  transition: transform .12s;
}
html.is-mobile .m-card:active { transform: scale(.99); }
html.is-mobile .m-card.selected { border-left-color: var(--brand-2); background: #f7fbff; }
html.is-mobile .m-card-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
html.is-mobile .m-card-title {
  flex: 1; min-width: 0;
  font-size: 14.5px; font-weight: 600; color: var(--brand);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.is-mobile .m-card-bd { display: flex; flex-direction: column; gap: 5px; }
html.is-mobile .m-kv { display: flex; gap: 10px; font-size: 12.8px; line-height: 1.55; }
html.is-mobile .m-kv .k { flex: 0 0 84px; color: #8a99aa; }
html.is-mobile .m-kv .v { flex: 1; min-width: 0; color: #2c3e50; word-break: break-all; }
html.is-mobile .m-kv .v.num { color: #16456e; font-weight: 600; font-variant-numeric: tabular-nums; }
html.is-mobile .m-card-ft {
  display: flex; justify-content: flex-end; align-items: center; gap: 2px;
  margin-top: 9px; padding-top: 8px; border-top: 1px dashed #edf1f6;
}
html.is-mobile .m-empty { text-align: center; color: #9aa8b8; font-size: 13px; padding: 44px 0; }
html.is-mobile .m-more { text-align: center; padding: 12px 0 4px; }

/* 列表页分页：手机端只留上一页/页码/下一页，总条数单独一行 */
html.is-mobile .pager {
  flex-wrap: wrap; gap: 6px; padding: 12px 0 2px;
  justify-content: center; flex-direction: column; align-items: center;
}
html.is-mobile .pager .m-total { font-size: 12px; color: #8a99aa; }
html.is-mobile .el-pagination.is-background .el-pager li { min-width: 30px; }

/* 抽屉/对话框内的录入表单：手机端左右留白 */
html.is-mobile .el-drawer__body > .el-form { padding: 6px 14px 0; }
/* 底部按钮条：放不下就换行，主按钮（最后一个）多占一点宽度 */
html.is-mobile .el-drawer__footer { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
html.is-mobile .el-drawer__footer .el-button { flex: 1 1 auto; min-width: 78px; margin-left: 0 !important; }
html.is-mobile .el-drawer__footer .el-button:last-child { flex: 1 1 46%; }
html.is-mobile .el-dialog__footer .el-button { margin-left: 0 !important; }
html.is-mobile .el-message-box { width: calc(100vw - 40px) !important; max-width: 360px; }

/* ===================== 10. 登录页 ===================== */
html.is-mobile .login-wrap { flex-direction: column; height: auto; min-height: 100vh; }
html.is-mobile .login-left { flex: none; padding: 30px 22px 20px; }
html.is-mobile .login-left h1 { font-size: 20px; }
html.is-mobile .login-left p { font-size: 12.5px; }
html.is-mobile .login-left .login-tags { display: none; }
html.is-mobile .login-right { flex: 1; width: 100%; padding: 4px 16px 28px; align-items: flex-start; }
html.is-mobile .login-card { width: 100%; padding: 22px 18px; border-radius: 16px; }

/* ===================== 11. 统计条 / 统计卡 / 表单栅格 ===================== */
html.is-mobile .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html.is-mobile .stat { padding: 12px 13px; }
html.is-mobile .stat .v { font-size: 20px; margin-top: 4px; }
html.is-mobile .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* 各页面「共 N 条 ｜ 合计 ｜ 已审核」这类一行 flex 统计条：窄屏自动换行 */
html.is-mobile .stat-strip,
html.is-mobile [style*="gap:26px"],
html.is-mobile [style*="gap:28px"] { flex-wrap: wrap !important; gap: 6px 16px !important; font-size: 12.5px; }
/* 单据录入的单头表单（电脑端 3~4 列）：手机端两列，标签上置 */
html.is-mobile .m-form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 10px !important;
}
html.is-mobile .m-form-grid > .el-form-item { margin-bottom: 12px; }
html.is-mobile .m-form-grid > .el-form-item:last-child { grid-column: 1 / -1; }
/* 明细表头/合计行等横向排列的按钮组 */
html.is-mobile .el-dialog .el-table { font-size: 12px; }

/* ===================== 12. 工作台看板 ===================== */
html.is-mobile .db-wrap {
  margin: -10px; min-height: auto; padding: 12px 12px calc(78px + env(safe-area-inset-bottom));
  font-size: 12.5px;
}
html.is-mobile .db-top { gap: 10px; margin-bottom: 13px; }
html.is-mobile .db-brand { gap: 10px; }
html.is-mobile .db-brand .lg { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; }
html.is-mobile .db-brand .lg svg { width: 22px; height: 22px; }
html.is-mobile .db-brand h1 { font-size: 17px; }
html.is-mobile .db-brand p { font-size: 10px; letter-spacing: 1px; }
html.is-mobile .db-topr { gap: 6px; width: 100%; }
html.is-mobile .db-chip { padding: 6px 10px; font-size: 11.5px; border-radius: 9px; gap: 5px; }
html.is-mobile .db-chip b { font-size: 13px; }
html.is-mobile .db-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px; margin-bottom: 11px; }
html.is-mobile .db-kpi { padding: 11px 12px; border-radius: 13px; }
html.is-mobile .db-kpi .ic { width: 30px; height: 30px; border-radius: 9px; margin-bottom: 7px; }
html.is-mobile .db-kpi .ic svg { width: 16px; height: 16px; }
html.is-mobile .db-kpi .vl { font-size: 20px; letter-spacing: -.3px; }
html.is-mobile .db-kpi .lb { font-size: 11.5px; margin-bottom: 4px; }
html.is-mobile .db-kpi .ft { font-size: 10.5px; margin-top: 5px; }
html.is-mobile .db-grid { gap: 10px; margin-bottom: 10px; }
html.is-mobile .db-c3, html.is-mobile .db-c4, html.is-mobile .db-c5,
html.is-mobile .db-c6, html.is-mobile .db-c8, html.is-mobile .db-c12 { grid-column: span 12 !important; }
html.is-mobile .db-card { padding: 13px; border-radius: 14px; }
html.is-mobile .db-card-h h3 { font-size: 13.5px; }
html.is-mobile .db-chart { height: 185px; }
html.is-mobile .db-donut-wrap { flex-direction: column; height: auto; gap: 8px; }
html.is-mobile .db-donut-wrap .db-chart { height: 168px; flex: 0 0 168px; width: 168px; }
html.is-mobile .db-donut-legend { width: 100%; max-height: none; gap: 7px; }
html.is-mobile .db-short { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px; }
html.is-mobile .db-short a { padding: 10px 4px; font-size: 11px; gap: 6px; border-radius: 12px; }
html.is-mobile .db-short .si { width: 34px; height: 34px; border-radius: 10px; }
html.is-mobile .db-short .si svg { width: 17px; height: 17px; }
html.is-mobile .db-tip { display: none !important; }
html.is-mobile .db-row-item { padding: 8px 10px; gap: 9px; }
html.is-mobile .db-todo-strip { gap: 6px 12px; }
html.is-mobile .db-foot { font-size: 11.5px; }

/* ===================== 13. 零售收银台 ===================== */
html.is-mobile .rpos {
  margin: -10px; height: auto;
  padding-bottom: calc(74px + env(safe-area-inset-bottom));
  font-size: 15px;
}
html.is-mobile .rpos-top {
  flex: none; height: auto; padding: 8px 10px; gap: 8px; flex-wrap: wrap; border-radius: 10px;
}
html.is-mobile .rpos-brand { font-size: 16px; }
html.is-mobile .rpos-brand .el-icon { font-size: 19px; }
html.is-mobile .rpos-scan { order: 3; flex: 1 1 100%; min-width: 0; height: 44px; }
html.is-mobile .rpos-scan input { font-size: 16px; height: 40px; }
html.is-mobile .rpos-list { top: 48px; max-height: 46vh; }
html.is-mobile .rpos-field { font-size: 13px; flex: 1 1 auto; gap: 5px; }
html.is-mobile .rpos-field select { height: 36px; font-size: 13px; min-width: 0; max-width: 100%; }
html.is-mobile .rpos-topbtn { height: 36px; font-size: 13px; padding: 0 10px; flex: 1 1 auto; }
html.is-mobile .rpos-main { flex-direction: column; gap: 8px; margin-top: 8px; }
html.is-mobile .rpos-cart { flex: 0 0 auto; height: 44vh; min-height: 250px; }
html.is-mobile .rpos-pay { flex: 0 0 auto; width: 100%; }
html.is-mobile .rpos-phead { flex: 0 0 46px; height: 46px; font-size: 16px; padding: 0 10px; }
html.is-mobile .rpos-phead .sub { font-size: 12px; }
html.is-mobile .rpos-cbody .el-table { font-size: 13px; }
html.is-mobile .rpos-cbody .el-table th.el-table__cell .cell { font-size: 13px; }
html.is-mobile .rpos-cbody .el-table td.el-table__cell .cell { font-size: 13px; padding: 0 6px; }
html.is-mobile .rpos-name { font-size: 14px; }
html.is-mobile .rpos-sub { font-size: 11.5px; }
html.is-mobile .rpos-mny, html.is-mobile .rpos-mny-b { font-size: 14px; }
html.is-mobile .rpos-qb { width: 32px; height: 32px; font-size: 20px; }
html.is-mobile .rpos-qty input { width: 46px; height: 32px; font-size: 16px; }
html.is-mobile .rpos-price { height: 32px; font-size: 15px; }
html.is-mobile .rpos-cfoot { flex: 0 0 54px; height: 54px; font-size: 15px; padding: 0 12px; }
html.is-mobile .rpos-cfoot .big { font-size: 24px; }
html.is-mobile .rpos-paybody { overflow: visible; padding: 10px 12px 4px; }
html.is-mobile .rpos-due .num { font-size: 30px; }
html.is-mobile .rpos-due .lab { font-size: 15px; }
html.is-mobile .rpos-pms { grid-template-columns: repeat(3, 1fr); gap: 6px; }
html.is-mobile .rpos-pm { height: 48px; font-size: 13px; }
html.is-mobile .rpos-money input { height: 46px; font-size: 20px; }
html.is-mobile .rpos-quick button { width: 42px; height: 46px; font-size: 14px; }
html.is-mobile .rpos-checkout { height: 58px; font-size: 22px; }
html.is-mobile .rpos-payfoot { padding: 0 12px 12px; }
html.is-mobile .rpos-disc input, html.is-mobile .rpos-disc button { height: 44px; }
html.is-mobile .rpos-disc input { font-size: 20px; }
html.is-mobile .rpos-change .num { font-size: 24px; }

/* ===================== 14. 打印版式设计 / 画布 =====================
   电脑端是「左控件 ｜ A4 画布 ｜ 右属性」三栏，手机放不下：
   改成上下排列（控件在上、画布全宽可拖动、属性在下），画布用横向滚动查看整页 */
html.is-mobile .pcd { height: auto; min-height: calc(100vh - 120px); }
html.is-mobile .pcd-bar { flex-wrap: wrap; gap: 6px; padding: 6px 10px; font-size: 12px; }
html.is-mobile .pcd-name { margin-right: 0; }
html.is-mobile .pcd-zoom { font-size: 12px; }
html.is-mobile .pcd-main { flex-direction: column; min-height: 0; }
html.is-mobile .pcd-left, html.is-mobile .pcd-right {
  width: 100%; max-height: 210px; padding: 8px 10px;
  border: 0; border-bottom: 1px solid #e3e8ef;
}
html.is-mobile .pcd-right { border-bottom: 0; border-top: 1px solid #e3e8ef; }
html.is-mobile .pcd-stage { width: 100%; padding: 10px; justify-content: flex-start; }
html.is-mobile .pcd-pv { height: 58vh; }

/* ===================== 15. APP 化细节 ===================== */
/* 底部导航：选中项的图标带浅底胶囊 */
html.is-mobile .m-nav-item > .el-icon {
  width: 36px; height: 22px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s;
}
html.is-mobile .m-nav-item.on > .el-icon { background: rgba(31, 93, 143, .13); }

/* 输入框 / 按钮：统一圆角，输入框浅底、聚焦变白 */
html.is-mobile .el-button { border-radius: 10px; }
html.is-mobile .el-input__wrapper,
html.is-mobile .el-select__wrapper,
html.is-mobile .el-textarea__inner { border-radius: 10px !important; }
html.is-mobile .el-input__wrapper {
  background: #f7f9fc; box-shadow: none !important; border: 1px solid #e6ebf2;
}
html.is-mobile .el-input__wrapper.is-focus { border-color: var(--brand-2); background: #fff; }
html.is-mobile .el-select__wrapper { box-shadow: none !important; border: 1px solid #e6ebf2; }

/* 列表卡片：再松一点、标题再大一点 */
html.is-mobile .m-list { gap: 11px; }
html.is-mobile .m-card { padding: 13px 14px; border-radius: 15px; }
html.is-mobile .m-card-title { font-size: 15px; }
html.is-mobile .m-kv { font-size: 13px; }

/* 表格页：去掉表头排序箭头（手机端不提供字段升降序） */
html.is-mobile .el-table th .caret-wrapper { display: none !important; }
html.is-mobile .el-table th.el-table__cell.is-sortable { cursor: default; }

/* 空状态居中留白 */
html.is-mobile .el-table__empty-text { font-size: 13px; }

/* ===================== 16. 单据明细：一行一条 + 点行弹小卡片 ===================== */
/* 电脑端 14 列要左右滑四屏；手机端改成「一行一条摘要」——
   列表只留产品/数量/单价/金额，点哪一行就弹出小卡片改那一行，
   看的时候不占地方，改的时候字段又是全的。 */
html.is-mobile .doc-items-hd { padding: 0 14px; }

html.is-mobile .di-list {
  display: flex; flex-direction: column; gap: 7px;
  padding: 0 14px; margin-bottom: 4px;
}
html.is-mobile .di-empty {
  padding: 20px 0; text-align: center;
  color: #9aa6b5; font-size: 13px;
  border: 1px dashed #dfe6ee; border-radius: 12px;
}

/* —— 一行一条 —— */
html.is-mobile .di-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border: 1px solid #e7edf5; border-radius: 12px;
  background: #fff; cursor: pointer;
  transition: background .15s, border-color .15s;
}
html.is-mobile .di-row:active { background: #f1f7fd; border-color: #cddff2; }
html.is-mobile .di-idx {
  flex: none; width: 21px; height: 21px; border-radius: 50%;
  background: #eef4fb; color: #1f5d8f; text-align: center;
  font-size: 11.5px; line-height: 21px;
}
html.is-mobile .di-main { flex: 1 1 auto; min-width: 0; }
html.is-mobile .di-name {
  font-size: 13.5px; font-weight: 600; color: #14395c;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.is-mobile .di-name.ph { color: #a8b3c1; font-weight: 500; }
html.is-mobile .di-sub {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
  margin-top: 3px; font-size: 11.5px; color: #7c8a9c;
}
html.is-mobile .di-sub .mono { font-family: Consolas, monospace; color: #4a6480; }
html.is-mobile .di-chip {
  padding: 0 5px; border-radius: 4px; background: #f2f6fb; color: #6b7c8f;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.is-mobile .di-right { flex: none; display: flex; align-items: center; }
html.is-mobile .di-right b { font-family: Consolas, monospace; font-size: 13.5px; color: #0f4c81; }
html.is-mobile .di-more { color: #c4cfda; font-size: 18px; line-height: 1; margin: 0 1px 0 5px; }
html.is-mobile .di-del {
  flex: none; min-height: auto !important; min-width: 30px;
  padding: 6px !important; margin-left: -3px; color: #cbd5e0 !important;
}
html.is-mobile .di-del:active { color: #e0715f !important; }

/* —— 列表底部加行 —— */
html.is-mobile .di-add {
  margin: 1px 0 0; width: 100%;
  border-style: dashed; border-color: #cfe0f2;
  color: #2b6ea8; background: #f8fbff;
}
html.is-mobile .di-add:active { background: #eff6fd; }

/* —— 点行升起的小卡片（悬浮在底部，不是全屏抽屉） —— */
html.is-mobile .el-drawer.di-sheet {
  left: 10px; right: 10px; width: auto !important;
  bottom: calc(10px + env(safe-area-inset-bottom));
  height: auto !important; max-height: 90vh;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(16, 40, 70, .24);
}
html.is-mobile .ds { display: flex; flex-direction: column; max-height: 90vh; background: #fff; }
html.is-mobile .ds-hd {
  flex: none; display: flex; align-items: center; gap: 9px;
  padding: 11px 12px 10px; background: #f7fafd;
  border-bottom: 1px solid #eef2f7;
}
html.is-mobile .ds-tt { flex: 1 1 auto; min-width: 0; }
html.is-mobile .ds-tt b { display: block; font-size: 13px; color: #14395c; }
html.is-mobile .ds-tt span {
  display: block; font-size: 11.5px; color: #7c8a9c; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.is-mobile .ds-x { flex: none; color: #93a1b1 !important; }
html.is-mobile .ds-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px 2px;
}
html.is-mobile .ds-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
html.is-mobile .ds-f { margin-bottom: 9px; min-width: 0; }
html.is-mobile .ds-f > label {
  display: block; font-size: 11.5px; color: #8a96a6; margin-bottom: 3px;
}
html.is-mobile .ds-f > em {
  display: block; font-style: normal; font-size: 11px; color: #9aa6b5; margin-top: 2px;
}
html.is-mobile .ds-ro { display: block; padding: 3px 0; font-size: 13px; color: #33415a; }
html.is-mobile .ds-sum {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px 8px; margin: 1px 0 11px;
  padding: 8px 10px; border-radius: 10px; background: #f6f9fd;
}
html.is-mobile .ds-sum > div > i {
  display: block; font-style: normal; font-size: 11px; color: #8a96a6;
}
html.is-mobile .ds-sum > div > b {
  font-family: Consolas, monospace; font-size: 13px; color: #0f4c81;
}
html.is-mobile .ds-sum .el-switch { margin-top: 2px; }
html.is-mobile .ds-ft {
  flex: none; display: flex; gap: 8px;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid #eef2f7; background: #fff;
}
html.is-mobile .ds-ft .el-button { flex: 1 1 auto; margin-left: 0 !important; }
html.is-mobile .ds-ft .el-button:only-child { flex: 1 1 100%; }
html.is-mobile .ds-ft .ds-danger { flex: 0 0 auto; color: #c0392b; }

/* 只读明细卡片（查看单据）：键值两列 */
html.is-mobile .di-kv {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 7px 10px; margin-top: 9px;
}
html.is-mobile .di-kv > div > i {
  display: block; font-style: normal;
  font-size: 11.5px; color: #8a96a6; margin-bottom: 2px;
}
html.is-mobile .di-kv > div > b { font-size: 13.5px; color: #16456e; font-weight: 600; }
html.is-mobile .di-kv > div > em {
  display: block; font-style: normal;
  font-size: 11px; color: #9aa6b5;
}

/* 单据底部的合计：四项换 2×2 排，不再挤成一行 */
html.is-mobile .doc-total {
  display: grid !important; grid-template-columns: 1fr 1fr;
  gap: 5px 12px; justify-content: stretch !important;
  padding: 0 14px; text-align: left;
}
html.is-mobile .doc-remark { margin: 10px 14px 14px !important; width: auto; }