* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  background: #f2f4f8; color: #1f2d3d; font-size: 14px;
}
#app { height: 100vh; display: flex; flex-direction: column; }

/* ---------- 顶部 ---------- */
.topbar {
  height: 52px; background: #1d3f74; color: #fff; display: flex; align-items: center;
  padding: 0 16px; gap: 22px; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.topbar .logo { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; letter-spacing: .5px; }
.topbar .logo .bee { font-size: 20px; }
.topbar nav { display: flex; gap: 4px; flex: 1; }
.topbar nav .nav-item {
  padding: 6px 14px; border-radius: 6px; cursor: pointer; color: #cdd9ea; font-size: 14px;
  transition: all .15s;
}
.topbar nav .nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.topbar nav .nav-item.active { background: #fff; color: #1d3f74; font-weight: 600; }
.topbar .right-info { font-size: 12px; color: #b8c8dd; display: flex; gap: 14px; align-items: center; }
.topbar .right-info b { color: #fff; }
.topbar .sync-btn {
  cursor: pointer; padding: 4px 10px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.08); transition: background .15s; user-select: none;
}
.topbar .sync-btn:hover { background: rgba(255,255,255,.18); }
.topbar .sync-btn:active { background: rgba(255,255,255,.28); }
.topbar .sync-btn .sync-label { font-size: 12px; }

/* 成本价模式警示条（全局，任何页面都可见） */
.force-cost-bar {
  background: #c0392b; color: #fff; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px; font-size: 14px; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.force-cost-bar b { font-weight: 700; }
.force-cost-bar .fcb-btn {
  background: #fff; color: #c0392b; border: none; border-radius: 6px; padding: 6px 14px;
  font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.force-cost-bar .fcb-btn:hover { background: #ffe9e6; }
.force-cost-bar .fcb-btn:active { background: #ffd9d4; }

/* ---------- 布局 ---------- */
.main { flex: 1; display: flex; min-height: 0; }

/* 历史报价单 — 手机端卡片式列表 */
.h-cards { display: flex; flex-direction: column; gap: 10px; padding: 12px; overflow-y: auto; width: 100%; box-sizing: border-box; }
.h-card { background: #fff; border: 1px solid #e3e8f0; border-radius: 10px; padding: 12px; flex-shrink: 0; }
.h-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.h-price { font-size: 18px; font-weight: 800; color: #d94a1e; white-space: nowrap; }
.h-card-mid { display: flex; gap: 10px; align-items: baseline; margin-top: 6px; font-size: 13px; flex-wrap: wrap; }
.h-card-foot { display: flex; gap: 14px; margin-top: 6px; font-size: 12px; color: #5a6b82; }
.h-profit { color: #1a9e4b; font-weight: 700; }
/* 历史单卡片操作区：按钮从 3 个长到 6 个（明细/打印/复制到配单台/转销售单/删除），
   手机宽度放不下一行 → 允许换行、每个按钮最小 88px，免得「复制到配单台」被挤成两行。
   flex-basis 88px 让 Flexbox 自然排成每行 2~3 个，不用写媒体查询。 */
.h-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.h-card-actions button {
  flex: 1 1 88px; min-width: 88px; padding: 8px 0; border-radius: 6px; border: 1px solid #d0d8e3;
  background: #f6f8fb; font-size: 13px; color: #1d3f74; cursor: pointer; min-height: 34px;
  white-space: nowrap;
}
.h-card-actions button:active { background: #e8eef6; }
.h-card-actions button.danger { color: #c0392b; }
/* 「转销售单」是这一屏里唯一动钱动库存的操作，用暖色跟其它按钮区分开 */
.h-card-actions button.sale { color: #b26a00; border-color: #f0d0a0; background: #fff8ec; }

/* AI 智能分类状态条 */
.ai-bar {
  background: #eef4ff; border: 1px solid #cfe0ff; color: #1d3f74;
  border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
  font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ai-bar.busy { background: #fff7e6; border-color: #ffd591; color: #8a5a00; }
.ai-bar.ok { background: #eefaf1; border-color: #b7e4c7; color: #1a6b3c; }
/* AI 真的失败了（全链模型都不可用、退到规则兜底）—— 不能再显示绿色"成功"外观 */
.ai-bar.warn { background: #fdf2f2; border-color: #f3c1c1; color: #a33; }
.ai-retry {
  margin-left: auto; padding: 6px 12px; border-radius: 6px; border: 1px solid currentColor;
  background: #fff; color: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.ai-retry:hover { opacity: .85; }
.ai-retry:disabled { opacity: .5; cursor: default; }

/* 配单台 */
.quote-workspace { display: flex; width: 100%; min-height: 0; }
.pick-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 12px 14px 0; }
.cart-panel {
  width: 400px; background: #fff; border-left: 1px solid #e3e8f0;
  display: flex; flex-direction: column; min-height: 0;
}
.cart-head { padding: 12px 16px; border-bottom: 1px solid #edf0f5; font-weight: 700; font-size: 15px; display:flex; justify-content:space-between; align-items:center;}
.cart-body { flex: 1; overflow-y: auto; padding: 8px 12px; }
/* 配置单大区分组：浅色底 + 黑色粗体 + 虚下划线 —— 客户一眼看懂这台机器配了哪些大件。
 * 左右用负边距抵消 .cart-body 的内边距，让色条通到两侧（移动端同为 12px，一致）。
 * 大类归并与顺序见 /groups.js；这里只管长什么样。 */
.cart-group {
  background: #eef3fa;
  border-bottom: 1px dashed #9fb0c6;
  padding: 5px 12px;
  margin: 10px -12px 0;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 1px;
}
.cart-group:first-child { margin-top: 0; }
.cart-foot { border-top: 1px solid #edf0f5; padding: 10px 14px; background: #fafbfd; }

.cat-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cat-tab {
  padding: 5px 13px; border-radius: 16px; background: #fff; border: 1px solid #d9e0ea;
  cursor: pointer; font-size: 13px; color: #44546a; user-select: none; transition: all .12s;
}
.cat-tab:hover { border-color: #1d3f74; color: #1d3f74; }
.cat-tab.active { background: #1d3f74; color: #fff; border-color: #1d3f74; font-weight: 600; }

.search-row { display: flex; gap: 8px; margin-bottom: 10px; }
.search-row .el-input { max-width: 340px; }

.pick-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 10px; align-content: start; padding-bottom: 10px;}
.pick-card {
  background: #fff; border: 1px solid #e3e8f0; border-radius: 8px; padding: 10px 12px; cursor: pointer;
  transition: all .13s; position: relative;
}
.pick-card:hover { border-color: #1d3f74; box-shadow: 0 3px 10px rgba(29,63,116,.12); transform: translateY(-1px); }
.pick-card .tag-row { display:flex; justify-content: space-between; gap:6px; }
.pick-card .cat-tag { font-size: 11px; color: #1d3f74; background: #e9effa; padding: 1px 7px; border-radius: 8px; }
/* 选择记忆徽标：常选 N 次（琥珀）/ 本单已选（绿）—— 让用户看懂列表为什么这么排 */
.pick-card .pick-tag { font-size: 11px; color: #a2701a; background: #fdf3e0; padding: 1px 7px; border-radius: 8px; white-space: nowrap; }
.pick-card .pick-tag-in { color: #1a7f4b; background: #e6f7ee; }
.pick-card .m-brand { font-size: 12px; color: #7a8aa0; }
.pick-card .m-model { font-weight: 700; font-size: 14px; margin: 4px 0 2px; word-break: break-all; }
.pick-card .m-spec { font-size: 12px; color: #8a97ab; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pick-card .price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.pick-card .sale { color: #d94a1e; font-weight: 700; font-size: 17px; }
.pick-card .cost { color: #a0aaba; font-size: 12px; text-decoration: line-through; }
.pick-card .add-hint { position: absolute; right: 10px; bottom: 8px; font-size: 18px; color: #1d3f74; }
.pick-card.out { opacity: .55; }
.pick-card .price-date { position:absolute; top: 8px; right: 8px; font-size: 10px; color:#b0bcca;}

/* 购物清单 */
.cart-item { display:flex; align-items:center; gap:8px; padding: 8px 2px; border-bottom: 1px dashed #edf0f5; }
.cart-item .ci-info { flex: 1; min-width: 0; }
.cart-item .ci-model { font-size: 13px; font-weight: 600; word-break: break-all; }
.cart-item .ci-sub { font-size: 11px; color: #97a3b5; }
.cart-item .ci-qty { display:flex; align-items:center; gap:4px; }
.cart-item .ci-qty .qbtn { width: 22px; height: 22px; border-radius: 4px; border: 1px solid #d4dbe6; background: #fff; cursor: pointer; line-height: 1; color:#44546a;}
.cart-item .ci-qty .qnum { width: 30px; text-align: center; font-weight: 600; }
.cart-item .ci-price { text-align: right; min-width: 70px; }
.cart-item .ci-price .p1 { color: #d94a1e; font-weight: 700; }
.cart-item .ci-price .p0 { font-size: 11px; color: #a0aaba; }
.cart-item .ci-del { color: #c0c9d6; cursor: pointer; font-size: 15px; padding: 2px 4px; }
.cart-item .ci-del:hover { color: #d03050; }

.sum-row { display: flex; justify-content: space-between; font-size: 13px; color: #55637a; padding: 2px 0; }
.sum-row.big { font-size: 15px; }
.sum-row .v-cost { color:#55637a; }
.sum-row .v-sale { color:#d94a1e; font-weight:800; font-size:20px; }
.sum-row .v-profit { color:#1a9e4b; font-weight:700; }
.profit-line { margin-top: 4px; padding-top: 6px; border-top: 1px dashed #dfe6ef; display:flex; justify-content: space-between; font-size: 13px;}
/* ★ 2026-09-25 修（店主反馈"右边配置单列有一点点横向滚动条"）：
   原来三个按钮挤一行，而右侧栏可用宽只有 ~352px，三个按钮的最小内容宽度加起来 ~392px
   —— 必然溢出 ~30px，把整页撑出横向滚动条。这不是"差一点"，是**结构上放不下**。
   改法：允许换行 + 主操作「保存并打印报价单」独占一行（它是这个面板的主按钮），
   另两个小按钮平分第二行。⚠ 第一个按钮模板里有 inline `style="flex:1"` ⇒ 必须 `!important` 才盖得住。
   ⚠ 手机端（@media 900px）本来就已经是这个行为（见下面 .btn-bar 那几条），这里只是让桌面端对齐。 */
.btn-bar { display:flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.btn-bar > .el-button:first-child { flex: 1 1 100% !important; }
.btn-bar > .el-button:not(:first-child) { flex: 1 1 0; min-width: 0; }

/* ---------- 通用页面容器 ---------- */
.page { flex: 1; overflow-y: auto; padding: 16px 18px; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; flex-wrap: wrap;}
.page-title { font-size: 18px; font-weight: 700; }
.panel { background: #fff; border-radius: 8px; border: 1px solid #e3e8f0; padding: 14px; margin-bottom: 12px; }
.panel-title { font-weight: 700; margin-bottom: 10px; font-size: 14px; color: #1f2d3d; }
.muted { color: #97a3b5; font-size: 12px; }

/* 导入 */
.imp-stat { display:flex; gap:16px; flex-wrap:wrap; margin: 10px 0; }
.imp-stat .chip { background:#f6f8fb; border:1px solid #e3e8f0; padding: 6px 12px; border-radius: 20px; font-size: 13px; display:flex; gap:6px; align-items:center;}
.chip .n { font-weight: 800; font-size: 15px; }
.chip.new .n { color:#1d3f74; }
.chip.up .n { color:#d03050; }
.chip.down .n { color:#1a9e4b; }
.chip.invalid .n { color:#b6a000; }

.tag-status { font-size: 11px; padding: 1px 8px; border-radius: 9px; white-space: nowrap; }
.tag-new { background:#e9effa; color:#1d3f74; }
.tag-up { background:#fdeaea; color:#d03050; }
.tag-down { background:#e7f7ee; color:#1a9e4b; }
.tag-unchanged { background:#eef1f5; color:#7a8aa0; }
.tag-invalid { background:#fdf6e0; color:#a88600; }
/* 同型号不同价里被「按贵的算」跳过的那条：不用红/绿（它既不是涨也不是跌），用紫色区分 */
.tag-merged { background:#f0e9fd; color:#7048b6; }
.chip.merged { background:#f7f2ff; border-color:#e0d3fa; }
.chip.merged .n { color:#7048b6; }

/* 状态徽标 (中文化) */
.el-tag { border-radius: 6px; }
.imp-table .cell { font-size: 13px; }
.imp-table input { border: 1px solid transparent; padding: 2px 6px; border-radius: 4px; width: 100%; background: transparent; }
.imp-table input:hover { border-color: #d4dbe6; background: #fff; }
.imp-table input:focus { outline: none; border-color: #1d3f74; background: #fff; }

/* 打印 */
@media print {
  .no-print { display: none !important; }
}

/* ================ 移动端适配 (<=900px) ================ */
.desktop-only { display: initial; }
.mobile-only { display: none; }

@media (max-width: 900px) {
  body { font-size: 14px; }
  .desktop-only { display: none !important; }
  .mobile-only { display: initial !important; }
  .no-print { display: none !important; }

  /* 顶栏: 换行显示全部菜单(之前横向滚动导致「历史报价单」被挤出屏幕看不到) */
  .topbar { height: auto; min-height: 48px; padding: 6px 8px; gap: 6px; flex-wrap: wrap; align-items: center; }
  .topbar .logo { font-size: 12px; }
  .topbar .logo .bee { font-size: 15px; }
  .topbar nav {
    display: flex; gap: 3px; flex-wrap: wrap; flex: 1 1 100%; order: 3;
    overflow: visible;
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav .nav-item {
    padding: 5px 9px; font-size: 11px; white-space: nowrap; flex: 0 0 auto;
    background: rgba(255,255,255,.07);
  }
  .topbar .right-info { display: flex; margin-left: auto; }
  .topbar .right-info > span:not(.sync-btn) { display: none; }  /* 手机端只留同步按钮,统计文字省空间 */
  .topbar .sync-btn {
    display: inline-flex !important; padding: 6px 10px; font-size: 15px;
  }
  .topbar .sync-btn .sync-label { display: none; }

  /* 手机端配单台顶部: 类目下拉 + 历史单快捷入口 */
  .mobile-top-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
  .mobile-top-row .mobile-cat-select { flex: 1; width: auto; margin-bottom: 0; }
  .m-history-btn {
    flex-shrink: 0; padding: 9px 12px; border-radius: 6px; border: 1px solid #1d3f74;
    background: #fff; color: #1d3f74; font-size: 13px; font-weight: 700;
    white-space: nowrap; cursor: pointer; min-height: 40px;
  }
  .m-history-btn:active { background: #eaf0f8; }

  /* 配单台: 上下堆叠, 购物车改底部抽屉 */
  .main { flex: 1; min-height: 0; overflow: hidden; }
  .quote-workspace { flex-direction: column; height: 100%; }
  .pick-panel { padding: 8px 10px 0; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
  .cart-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    width: 100%; border-left: none; border-top: 1px solid #d9e0ea;
    box-shadow: 0 -4px 16px rgba(0,0,0,.12);
    background: #fff; max-height: 70vh;
    transform: translateY(calc(100% - 56px));  /* 默认只露 56px 摘要栏 */
    transition: transform .22s ease;
  }
  .cart-panel.expanded { transform: translateY(0); }
  .cart-head { padding: 12px 14px; cursor: pointer; user-select: none; }
  .cart-head::after { content: '▲'; float: right; transition: transform .2s; }
  .cart-panel.expanded .cart-head::after { content: '▼'; }
  .cart-body { padding: 6px 12px; }
  .cart-foot { padding: 10px 12px 14px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }

  /* 类目: 用下拉框, 全宽, 触摸友好 */
  .cat-tabs { display: none; }
  .mobile-cat-select { margin-bottom: 8px; }
  .mobile-cat-select .el-input__inner { font-size: 15px; height: 44px; line-height: 44px; }

  /* 搜索: 全宽, 触摸友好 */
  .search-row { flex-direction: column; gap: 6px; }
  .search-row .el-input { max-width: 100% !important; }
  .search-row .el-input__inner { font-size: 15px; height: 44px; line-height: 44px; }

  /* 产品网格: 2 列, 触摸目标放大 */
  .pick-grid { grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 80px; }
  .pick-card { padding: 10px; }
  .pick-card .m-model { font-size: 12px; }
  .pick-card .m-spec { -webkit-line-clamp: 2; }
  .pick-card .sale { font-size: 15px; }
  .pick-card:active { background: #f6f8fb; }

  /* 购物车摘要 (折叠态) */
  .cart-summary-mobile { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; }
  .cart-summary-mobile .label { font-size: 12px; color: #55637a; }
  .cart-summary-mobile .total { color: #d94a1e; font-weight: 800; font-size: 16px; }
  .cart-summary-mobile .count { background: #1d3f74; color: #fff; border-radius: 10px; padding: 1px 8px; font-size: 11px; margin-left: 4px; }

  /* 购物车项触摸区放大 */
  .cart-item { padding: 10px 2px; }
  .cart-item .ci-qty .qbtn { width: 32px; height: 32px; font-size: 15px; }
  .cart-item .ci-qty .qnum { width: 36px; font-size: 14px; }
  .cart-item .ci-model { font-size: 13px; }
  .cart-item .ci-price .p1 { font-size: 14px; }

  /* 按钮: 触摸友好 */
  .btn-bar { gap: 6px; flex-wrap: wrap; }
  .btn-bar .el-button { min-height: 44px; font-size: 14px; }
  .btn-bar .el-button[style*="flex:1"] { flex: 1 1 100% !important; }
  .btn-bar > * { flex: 1; }

  /* 报价合计字号 */
  .sum-row .v-sale { font-size: 20px; }
  .sum-row.big { font-size: 15px; }

  /* 弹窗全屏 */
  .el-dialog { width: 92vw !important; max-width: 92vw; margin: 8vh auto !important; }
  .el-dialog__body { padding: 16px 18px; }
}

/* 桌面端确保 mobile-only 默认隐藏 */
@media (min-width: 901px) {
  .mobile-only { display: none !important; }
}

/* 系统设置里「打印单抬头预览」—— 尽量还原打印页的观感，让用户改完当场看到效果 */
.shop-preview {
  width: 100%;
  max-width: 420px;
  border: 1px solid #cfd8e5;
  border-radius: 6px;
  padding: 12px 14px;
  background: #fff;
}
.shop-preview .sp-title {
  font-size: 19px;
  font-weight: 800;
  color: #1d3f74;
  letter-spacing: 2px;
  border-bottom: 2px solid #1d3f74;
  padding-bottom: 8px;
}
.shop-preview .sp-name {
  font-size: 14px;
  font-weight: 700;
  color: #1d3f74;
  margin-top: 7px;
  letter-spacing: .5px;
}
.shop-preview .sp-line { font-size: 12px; color: #555; margin-top: 3px; }
.shop-preview .sp-empty { font-size: 12px; color: #97a3b5; margin-top: 7px; }

/* =====================================================================
 * 进销存（P1 入库闭环）
 * ===================================================================== */

/* ---------- 首页「产品入库」横幅 ---------- */
.inv-hero {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 16px;
  background: linear-gradient(90deg, #eef4ff 0%, #f7faff 60%, #ffffff 100%);
  border-bottom: 1px solid #dbe6f5;
}
.inv-hero .ihb {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 24px 8px 18px; min-height: 56px;
  border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, #2a6fd6 0%, #1d3f74 100%);
  color: #fff; box-shadow: 0 4px 12px rgba(29, 63, 116, .28);
  transition: transform .12s, box-shadow .12s;
}
.inv-hero .ihb:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(29, 63, 116, .34); }
.inv-hero .ihb:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(29, 63, 116, .3); }
.inv-hero .ihb .ihb-ico { font-size: 27px; line-height: 1; }
.inv-hero .ihb .ihb-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 19px; font-weight: 800; letter-spacing: 1px; }
.inv-hero .ihb .ihb-txt small { font-size: 11px; font-weight: 400; opacity: .82; letter-spacing: 0; }

.inv-hero .ihk-row { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-hero .ihk {
  min-width: 84px; padding: 5px 12px; border-radius: 9px;
  background: #fff; border: 1px solid #e3e8f0; text-align: center;
}
.inv-hero .ihk b { display: block; font-size: 15px; font-weight: 800; color: #1d3f74; line-height: 1.35; }
.inv-hero .ihk span { display: block; font-size: 11px; color: #97a3b5; }
.inv-hero .ihk.warn { background: #fff8e6; border-color: #f4dfa8; }
.inv-hero .ihk.warn b { color: #b8860b; }
.inv-hero .ihk.danger { background: #fdeaea; border-color: #f5c2c2; }
.inv-hero .ihk.danger b { color: #c0392b; }

.inv-hero .ihn-row { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.inv-hero .ihn-row span {
  font-size: 12px; color: #1d3f74; cursor: pointer;
  padding: 5px 11px; border-radius: 15px; background: #fff;
  border: 1px solid #d8e2f0; white-space: nowrap; transition: all .15s;
}
.inv-hero .ihn-row span:hover { background: #1d3f74; color: #fff; border-color: #1d3f74; }

/* ---------- 首页「维修登记」大按钮（与「产品入库」并排，2026-09-24 新增） ----------
   刻意换成**青绿**而不是再一个蓝色：两个按钮天天要点，颜色一样会点错。
   尺寸/圆角/阴影全部沿用 .ihb，所以两个按钮看起来是一套的。 */
.inv-hero .ihb-repair {
  background: linear-gradient(135deg, #12a594 0%, #0b7263 100%);
  box-shadow: 0 4px 12px rgba(11, 114, 99, .28);
}
.inv-hero .ihb-repair:hover { box-shadow: 0 7px 18px rgba(11, 114, 99, .34); }
.inv-hero .ihb-repair:active { box-shadow: 0 2px 8px rgba(11, 114, 99, .3); }

/* ---------- 首页「工单看板」大按钮（2026-09-25 新增） ----------
   三个按钮并排，颜色必须互不相同：蓝=入库、青绿=登记、**琥珀=看板**。
   看板是"去看"，不是"去录"，所以用一个更"提醒"的暖色。 */
.inv-hero .ihb-board {
  background: linear-gradient(135deg, #e0910f 0%, #b45309 100%);
  box-shadow: 0 4px 12px rgba(180, 83, 9, .28);
}
.inv-hero .ihb-board:hover { box-shadow: 0 7px 18px rgba(180, 83, 9, .34); }
.inv-hero .ihb-board:active { box-shadow: 0 2px 8px rgba(180, 83, 9, .3); }

/* ---------- 首页「上门派单」大按钮（2026-09-28 新增） ----------
   四个按钮并排，颜色必须互不相同：蓝=入库、青绿=登记、琥珀=看板、**紫=派单**。
   为什么是紫：它跟「工单看板」都是"看单子"的活儿，但一个到店、一个上门，
   店主点错一次就白跑一趟 —— 用蓝色系（跟入库撞）或琥珀（跟看板撞）都不行，
   紫在这排里和另外三个的色相距离都够远。
   ⚠ 尺寸/圆角/阴影全部沿用 .ihb，所以四个按钮看起来是一套的。 */
.inv-hero .ihb-dispatch {
  background: linear-gradient(135deg, #7c53d6 0%, #5636a8 100%);
  box-shadow: 0 4px 12px rgba(86, 54, 168, .28);
}
.inv-hero .ihb-dispatch:hover { box-shadow: 0 7px 18px rgba(86, 54, 168, .34); }
.inv-hero .ihb-dispatch:active { box-shadow: 0 2px 8px rgba(86, 54, 168, .3); }

/* =====================================================================
 * 维修登记弹窗（public/repair.js）
 * ===================================================================== */
.rid-dlg .el-dialog__body { padding-top: 6px; }
.rid-hint {
  background: #f2f7ff; border: 1px solid #cfe0f5; border-radius: 6px;
  padding: 9px 12px; font-size: 13px; color: #33475f; margin-bottom: 12px;
}
.rid-hint b { color: #1d3f74; }
.rid-sec {
  font-size: 13px; font-weight: 700; color: #1d3f74;
  border-left: 3px solid #12a594; padding-left: 8px; margin: 14px 0 8px;
}
.rid-sec small { font-weight: 400; color: #8b98a8; font-size: 11.5px; margin-left: 6px; }
.rid-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 7px 0; }
.rid-l { flex: 0 0 104px; font-size: 13px; color: #5a6b82; text-align: right; }
.rid-l em { font-style: normal; font-size: 10.5px; color: #12a594; margin-left: 4px; }
.rid-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rid-chip {
  font-weight: 400; font-size: 12.5px; color: #33475f; cursor: pointer;
  padding: 4px 11px; border-radius: 14px; background: #fff;
  border: 1px solid #d8e2f0; user-select: none; transition: all .12s;
}
.rid-chip:hover { border-color: #12a594; color: #0b7263; }
.rid-chip.on { background: #12a594; border-color: #12a594; color: #fff; }
/* 外观/配件是"防纠纷"字段，未选中时也给它一点存在感（浅黄底） */
.rid-chip.warn { background: #fffaf0; border-color: #f0dcbc; }
.rid-chip.warn.on { background: #d98324; border-color: #d98324; color: #fff; }
/* ★「设备类型」下拉（2026-09-25 店主反馈：手机端 6 个 chip 要占 3 行，太费屏幕）
   ⚠⚠ 这条**必须在全局** —— 它承担的是"电脑端不显示"的职责，放进 @media 就没意义了。
   手机端在 @media (max-width:900px) 里把它打开，同时把**该行**的 chips 关掉。 */
.rid-sel { display: none; }
.rid-tip { font-size: 11.5px; color: #97a3b5; }
/* 「一键收全款 / 不收」—— 收款是现场动作，按钮要比输入框更显眼才好按 */
.rid-btn {
  font-weight: 600; font-size: 12.5px; color: #0b7263; cursor: pointer;
  padding: 5px 12px; border-radius: 6px; background: #eefaf7;
  border: 1px solid #bfe6df; user-select: none; transition: all .12s;
}
.rid-btn:hover { border-color: #12a594; background: #e2f6f1; }
.rid-btn.on { background: #12a594; border-color: #12a594; color: #fff; }
/* 收完钱当场告诉前台「还剩多少」—— 这句话常常要念给客户听，所以给足对比度 */
.rid-deal { font-size: 12.5px; color: #33475f; }
.rid-deal b { color: #b3261e; font-size: 14px; }
.rid-deal.ok { color: #0b7263; }
.rid-deal.ok b { color: #0b7263; }
.rid-deal.warn { color: #c2410c; font-weight: 600; }
.rid-hit { font-size: 12.5px; color: #0b7263; font-weight: 600; }
.rid-hit.muted { color: #97a3b5; font-weight: 400; }
.rid-hist {
  background: #fbfdff; border: 1px solid #e3e8f0; border-radius: 6px;
  padding: 8px 12px; margin: 4px 0 2px;
}
.rid-hist-t { font-size: 12px; color: #5a6b82; margin-bottom: 6px; line-height: 1.9; }
.rid-hist-t b { color: #1d3f74; }
/* 维修记录 / 购买记录分两组 —— 买过什么（电脑、打印机）是报价前最关键的信息 */
.rid-hist-g { margin-top: 8px; }
.rid-hist-gt {
  font-size: 12px; color: #33475f; font-weight: 600;
  padding-bottom: 3px; border-bottom: 1px solid #e9eef6; margin-bottom: 3px;
}
.rid-hist-gt small { color: #97a3b5; font-weight: 400; margin-left: 6px; }
.rid-hist-r {
  display: flex; gap: 12px; align-items: center; font-size: 12.5px; color: #33475f;
  padding: 4px 6px; border-radius: 4px; cursor: pointer; flex-wrap: wrap;
}
.rid-hist-r:hover { background: #eef4ff; }
.rid-hist-r b { color: #1d3f74; font-family: Consolas, monospace; }
.rid-hist-r .muted { color: #97a3b5; }
/* 购买记录行：多一列「买了什么」摘要、一列金额 */
.rid-hist-r.buy { background: #fbfcfe; }
.rid-hist-r.buy.open { background: #eef4ff; }
.rid-hist-r.buy .brief { flex: 1 1 180px; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.rid-hist-r.buy .amt { color: #a8451a; font-weight: 600; }
.rid-hist-r.buy .due { color: #c0392b; font-size: 11.5px; }
/* 展开的明细 */
.rid-buy { padding: 3px 6px 6px 22px; border-left: 2px solid #dbe4f2; margin: 0 0 2px 6px; }
.rid-bi {
  display: flex; gap: 10px; align-items: center; font-size: 12px; color: #5a6b82;
  padding: 2px 0;
}
.rid-bi b { color: #33475f; font-weight: 600; }
.rid-bi .c { flex: 0 0 56px; color: #97a3b5; }
.rid-bi .lt { margin-left: auto; color: #a8451a; }
.rid-preview { margin-top: 16px; border-top: 1px dashed #c9d3e0; padding-top: 10px; }
.rid-pv-t { font-size: 12px; color: #5a6b82; margin-bottom: 6px; }
.rid-pv-b {
  background: #fdfcf8; border: 1px solid #eee3cd; border-radius: 6px;
  padding: 9px 12px; font-size: 12.5px; color: #33475f;
}
.rid-pv-b > div { display: flex; gap: 8px; margin: 3px 0; }
.rid-pv-b span { flex: 0 0 44px; color: #97a3b5; }
.rid-pv-b b { font-weight: 400; }

/* =====================================================================
 * 📷 拍照留档（2026-09-28 店主请求）
 *
 * 店主原话：「维修登记的地方，增加一个拍照按钮，一行就行，图片不用显示和打印，
 *          需要看的话，点击按钮弹窗查看就行」。
 *
 * ★★ 这里只有两条**全局**规则，都是"电脑端也要生效"的隔离手段：
 *   ① `.rid-shot-in { display: none }` —— 真正的 file input 藏起来，
 *      由上面那个 `<b class="rid-btn">` 去 click() 它（原生 input 在电脑上丑、在手机上更丑）。
 *      放在全局是因为"藏"这件事两端都要做。
 *   ② `.rid-btn.danger` —— 「删掉这张」是**不可逆**动作，红色警示。
 * 其余（触控高度、弹窗全屏、缩略图尺寸）全部关在下面的 @media (max-width:900px) 里。
 * ===================================================================== */
.rid-shot-in { display: none; }
.rid-btn.danger { color: #b3261e; background: #fdecec; border-color: #f7cdc9; }
.rid-btn.danger:hover { border-color: #b3261e; background: #fbdcdc; }

/* 「查看已拍」弹窗的内容骨架 —— ⚠ 这一层在**全局**：它是弹窗的骨架样式，
   关进 @media 的话电脑端打开这个弹窗就没样式了（同 `.prg-drop` 的道理）。 */
.rid-shotwrap { text-align: center; }
.rid-shotbig {
  max-width: 100%; max-height: 58vh; object-fit: contain;
  border-radius: 8px; background: #f2f4f8; display: block; margin: 0 auto;
}
.rid-shotbar {
  display: flex; gap: 9px; align-items: center; justify-content: center;
  flex-wrap: wrap; margin-top: 10px;
}
.rid-shotthumbs { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; margin-top: 11px; }
.rid-shotth {
  width: 62px; height: 62px; object-fit: cover; border-radius: 7px; cursor: pointer;
  border: 2px solid transparent; opacity: .72; transition: all .12s;
}
.rid-shotth:hover { opacity: 1; }
.rid-shotth.on { border-color: #12a594; opacity: 1; }
.rid-shotwrap > .rid-tip { display: block; margin-top: 11px; line-height: 1.7; text-align: left; }

@media (max-width: 900px) {
  /* ===================================================================
   * 维修登记弹窗 · 手机端（店员在店里用手机登记）
   *
   * 为什么专门做一套 —— 2026-09-25 用 390×844 真机尺寸量出来的三个毛病：
   *   ① **提交按钮在 1706px 处**（整表 11 行、body 高 1534px）⇒ 手机上要滑两屏
   *      才够得着「登记并打印两联」。前台站在客户面前翻半天，就是这里最难看。
   *   ② **触控目标太小**：chip 高 26px、输入框 30px、底部按钮 32px。
   *      手指点不准（业界下限 44px），点了没反应会以为"系统卡了"。
   *   ③ 输入框字号 14px **< 16px** ⇒ iOS 一聚焦就自动放大整页，且**不会自己缩回来**。
   *
   * ⚠⚠ 整段都在 @media (max-width: 900px) 里 ⇒ **桌面端（>900px）一个字节都不碰**。
   *     断点与 app.js 的 `isMobile = window.innerWidth <= 900` 保持一致，不另立第二套口径。
   * =================================================================== */

  /* ---- 弹窗改成「整页表单」：手机上不留 8vh 空白，全部拿来放字段 ---- */
  /* ⚠ 选择器写成 `.rid-dlg.el-dialog, .rid-dlg .el-dialog` 两种都覆盖 ——
     Element Plus 把自定义 class 合并到 `.el-dialog` 自身（实测 `.rid-dlg .el-dialog` 取不到），
     但换个 EP 版本也可能挂到外层。两写一遍，免得日后升级后**静默失效**。
     ⚠ 必须 `!important`：上面那条通用规则 `.el-dialog { width: 92vw !important }`（第 308 行）
       也带 !important，两条同为 !important 时**比选择器权重**，`.el-dialog.rid-dlg` 更高才赢。 */
  .rid-dlg.el-dialog, .rid-dlg .el-dialog {
    width: 100vw !important; max-width: 100vw !important;
    margin: 0 !important; border-radius: 0; min-height: 100vh;
  }
  /* 标题栏吸顶 + 关闭按钮放大到 44px（原来 16px 的小叉，手机上很难戳中） */
  .rid-dlg .el-dialog__header {
    position: sticky; top: 0; z-index: 4; background: #fff;
    padding: 11px 14px; margin-right: 0; border-bottom: 1px solid #e8eef6;
  }
  .rid-dlg .el-dialog__title { font-size: 17px; }
  .rid-dlg .el-dialog__headerbtn { width: 44px; height: 44px; top: 5px; right: 3px; }
  .rid-dlg .el-dialog__headerbtn .el-dialog__close { font-size: 19px; }
  .rid-dlg .el-dialog__body { padding: 4px 14px 14px; }

  /* ★★ 提交按钮**吸底**：滑到哪儿都能一键提交（本轮最值钱的一条）
     ⚠ sticky 的滚动祖先就是 `.el-overlay-dialog`（它 `overflow:auto`），
       而 `.el-dialog` 自身没设 overflow ⇒ 不会被中间层截断成"粘不住"。 */
  .rid-dlg .el-dialog__footer {
    position: sticky; bottom: 0; z-index: 4; background: #fff;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e8eef6; box-shadow: 0 -6px 16px rgba(16,32,58,.07);
    display: flex; gap: 8px; align-items: stretch;
  }
  /* ⚠ `margin-left:0 !important` 是为了压掉 EP 的 `.el-button + .el-button { margin-left:12px }`，
     否则 flex 布局下会多出一截、把第三个按钮挤下去。 */
  .rid-dlg .el-dialog__footer .el-button { margin: 0 !important; min-height: 48px; font-size: 15px; padding: 0 12px; }
  .rid-dlg .el-dialog__footer .el-button:nth-child(1) { flex: 0 0 64px; }   /* 取消 */
  .rid-dlg .el-dialog__footer .el-button:nth-child(2) { flex: 1 1 0; }      /* 只登记 */
  .rid-dlg .el-dialog__footer .el-button:nth-child(3) { flex: 1.5 1 0; }    /* 登记并打印两联 */

  /* ---- 提示条：手机上压紧（原来 13px 字号占掉第一屏 99px）---- */
  .rid-hint { font-size: 11.5px; padding: 7px 9px; margin-bottom: 9px; line-height: 1.55; }

  /* ---- 字段行：标签当小标题、输入框一律全宽 ---- */
  .rid-row { gap: 6px; margin: 8px 0; }
  .rid-l { flex: 0 0 100%; text-align: left; font-size: 12px; color: #7b8798; line-height: 1.35; }
  .rid-l em { font-size: 10px; }
  /* ★ `<span class="rid-l"></span>` 是占位用的空标签（外观/故障/补充说明那 4 行），
     手机上还让它白占一整行就纯属浪费竖向空间。 */
  .rid-l:empty { display: none; }
  .rid-sec { font-size: 13px; margin: 12px 0 6px; }
  .rid-sec small { font-size: 10.5px; margin-left: 4px; }

  /* ★★ 输入框：**16px 字**（<16px 会让 iOS 聚焦时放大整页）+ 44px 高（手指点得准）
     ⚠ `width: auto !important` 是为了压掉模板里的行内 `style="width:210px"` 之类 ——
       行内样式权重最高，不加 !important 压不住。 */
  .rid-dlg .el-input__inner,
  .rid-dlg .el-input-number .el-input__inner { font-size: 16px !important; height: 44px; line-height: 44px; }
  .rid-dlg .rid-row > .el-input,
  .rid-dlg .rid-row > .el-input-number {
    flex: 1 1 100%; width: auto !important; min-width: 0;
  }
  .rid-dlg .rid-row > .el-input .el-input__wrapper,
  .rid-dlg .rid-row > .el-input-number .el-input__wrapper { width: 100%; }
  .rid-dlg .rid-row > .rid-chips,
  .rid-dlg .rid-row > .rid-tip,
  .rid-dlg .rid-row > .rid-hit { flex: 1 1 100%; }

  /* ---- 触控目标：chip 38px、收款按钮 40px（原来 26 / 28px） ---- */
  .rid-chip { font-size: 13.5px; padding: 9px 15px; border-radius: 999px; min-height: 38px;
              display: inline-flex; align-items: center; }
  .rid-chips { gap: 7px; }
  .rid-btn { font-size: 13.5px; padding: 10px 14px; min-height: 40px; border-radius: 8px;
             display: inline-flex; align-items: center; justify-content: center;
             flex: 1 1 0; text-align: center; }
  .rid-deal { flex: 1 1 100%; font-size: 13px; line-height: 1.55; }
  .rid-deal b { font-size: 16px; }
  .rid-tip { font-size: 12px; }
  .rid-hit { font-size: 12.5px; }

  /* ---- 老客户档案：一行一点的，至少 44px 高 ---- */
  .rid-hist { padding: 9px 11px; }
  .rid-hist-t { font-size: 12.5px; line-height: 1.8; }
  .rid-hist-r { gap: 4px 10px; font-size: 13px; min-height: 44px; padding: 8px; align-items: center; }
  /* 手机上没有 hover，「买了什么」的摘要不该再单行省略 —— 直接换行给全 */
  .rid-hist-r.buy .brief { flex: 1 1 100%; white-space: normal; overflow: visible; text-overflow: clip; }
  .rid-hist-r.buy .due { font-size: 12px; }
  .rid-bi { font-size: 12.5px; gap: 8px; flex-wrap: wrap; }

  /* ---- 客户联预览：手机上也走「标签 + 值」同一行（值本身很短，竖排纯浪费）---- */
  .rid-preview { margin-top: 12px; padding-top: 8px; }
  .rid-pv-t { font-size: 12px; margin-bottom: 5px; }
  .rid-pv-b { font-size: 12.5px; padding: 8px 10px; }
  .rid-pv-b > div { display: flex; gap: 7px; margin: 4px 0; }
  .rid-pv-b span { flex: 0 0 36px; font-size: 11.5px; }

  /* ---- 触摸反馈：本页没有全局 tap-highlight，补一个 :active ---- */
  .rid-chip:active, .rid-btn:active { transform: scale(.97); }

  /* ---- ★ 设备类型：chips 换下拉，省 2 行（2026-09-25 店主反馈）----
     ⚠⚠ 只作用于 `.rid-row-type` **这一行** —— 外观配件 / 故障 那两行的 chips 不受影响
        （它们本来就该点选，而且本来也没占几行）。绝不能写成 `.rid-chips { display:none }`。
     ⚠ 不写 `appearance:none`：手机端**原生下拉**（带系统选择器/滚轮）比自制弹层好用。 */
  .rid-dlg .rid-row-type .rid-chips { display: none; }
  .rid-dlg .rid-sel {
    display: block; flex: 1 1 100%; width: auto !important; min-width: 0;
    height: 44px; font-size: 16px; padding: 0 10px;
    border: 1px solid #d9e0ea; border-radius: 8px; background: #fff; color: #1f2d3d;
  }
  .rid-dlg .rid-sel:focus { border-color: #12a594; outline: none; }

  /* ---- 📷 拍照留档（2026-09-28）----
     ⚠⚠ 整段都在 @media 里 ⇒ 桌面端（>900px）那一行仍是"一行摆平"的紧凑样子。
     手机上要做三件事：
       ① 「拍照 / 查看」两个按钮撑到 44px（`📷 拍照` 是员工站在客户面前第一个要点的东西）；
       ② 「已拍 N 张」那句提示整行显示（挤在按钮后面会被压成两三个字一行）；
       ③ 查看弹窗改成**全屏**（620px 的弹窗在 390px 屏上要把图缩得很小，
          而"看清客户机器上的划痕"正是这个弹窗存在的唯一理由）。 */
  .rid-dlg .rid-row.rid-shot { gap: 8px; }
  /* ⚠⚠ 必须**显式**写 min-height:44px —— 上面通用的 `.rid-btn` 只给了 40px，
     而"拍照"是员工当着客户面第一个要点的东西，手指点不准最伤体验。
     只作用于照片这一行，不动别的行（收款那些按钮保持原样）。 */
  .rid-dlg .rid-row.rid-shot .rid-btn {
    flex: 0 0 auto; min-height: 44px; padding: 0 16px;
    font-size: 14px; border-radius: 9px;
  }
  .rid-dlg .rid-shot .rid-tip { flex: 1 1 100%; font-size: 12px; line-height: 1.5; }
  .rid-dlg .rid-shot .rid-tip b { color: #0b7263; font-size: 14px; }

  /* 查看已拍：手机端全屏（与 .rid-dlg 同一套做法，选择器两种都写） */
  .rid-shotdlg.el-dialog, .rid-shotdlg .el-dialog {
    width: 100vw !important; max-width: 100vw !important;
    margin: 0 !important; border-radius: 0; min-height: 100vh;
  }
  .rid-shotdlg .el-dialog__header {
    position: sticky; top: 0; z-index: 4; background: #fff;
    padding: 11px 14px; margin-right: 0; border-bottom: 1px solid #e8eef6;
  }
  .rid-shotdlg .el-dialog__headerbtn { width: 44px; height: 44px; top: 5px; right: 3px; }
  .rid-shotdlg .el-dialog__body { padding: 8px 12px; }
  .rid-shotdlg .el-dialog__footer {
    position: sticky; bottom: 0; background: #fff; border-top: 1px solid #e8eef6; padding: 10px 14px;
  }
  .rid-shotdlg .el-dialog__footer .el-button { min-height: 48px; width: 100%; }
  /* 大图：手机上给足高度（一张 4:3 的照片在 390px 宽下要能看到细节） */
  .rid-shotdlg .rid-shotbig { max-height: 52vh; }
  .rid-shotdlg .rid-shotbar .rid-btn { flex: 0 0 auto; font-size: 13.5px; }
  .rid-shotdlg .rid-shotth { width: 58px; height: 58px; }
}

/* ---------- 进销存页签 ---------- */
.inv-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid #e0e6ef; margin-bottom: 12px; }
.inv-tab {
  padding: 8px 16px; font-size: 14px; color: #5a6b82; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .15s;
}
.inv-tab:hover { color: #1d3f74; }
.inv-tab.active { color: #1d3f74; font-weight: 700; border-bottom-color: #1d3f74; }
.inv-tab.soon { color: #b9c3d1; }
.inv-tab.soon:hover { color: #8e9bb0; }

/* ---------- 通用小件 ---------- */
.inv-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.inv-sum {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  background: #f6f8fb; border: 1px solid #e6ecf4; border-radius: 7px;
  padding: 8px 12px; margin-bottom: 10px; font-size: 13px; color: #5a6b82;
}
.inv-sum .is-item b { color: #1d3f74; font-size: 14px; }
.inv-sum .is-item b.red { color: #d03050; }

/* ---------- 大列表分页条（库存状况 / 商品管理共用） ----------
   ⚠ 存在理由不是"好看"，是**性能**：2648 行一次渲染会卡住主线程。
     做法与导入页一致（原生 select + 四个按钮），不引入 Element Plus 分页组件。
   ⚠ 颜色一律走主题变量会更好，但本文件本来就是硬编码色值，跟随现状。 */
.inv-pager {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 8px; font-size: 13px; color: #5a6b82;
}
.inv-pager b { color: #1d3f74; }
.inv-pager select {
  padding: 2px 6px; border: 1px solid #dde3ec; border-radius: 4px;
  background: #fff; color: inherit; font-size: 13px; cursor: pointer;
}
.inv-pager button {
  padding: 3px 10px; border: 1px solid #dde3ec; background: #fff;
  border-radius: 4px; cursor: pointer; font-size: 13px; color: #5a6b82;
}
.inv-pager button:hover:not(:disabled) { border-color: #1d3f74; color: #1d3f74; }
.inv-pager button:disabled { opacity: .45; cursor: not-allowed; }
/* 配单台的分页条（★ 2026-09-25）：`.pick-panel` 的 padding 是 `12px 14px 0` —— **下边距为 0**，
   原设计靠 `.pick-grid` 自己的 padding-bottom 收尾。分页条成了面板最后一个子元素之后，
   它就会**紧贴视口最下沿**（实测 bottom 正好 = 视口高 1000，零余量），
   视觉上和浏览器横向滚动条挤在一起。这里单独给它一条下边距。
   ⚠ 用**新前缀类**而不是改 `.inv-pager`：那条类同时被库存页/产品库用着，
      全局加 margin-bottom 会顺带给它们多出一块空白。 */
.qpager { margin-bottom: 12px; }
.inv-sum .is-item b.green { color: #1a9e4b; }
.red { color: #d03050; }
.green { color: #1a9e4b; }
.b { font-weight: 700; }

.ptype { font-size: 11px; padding: 2px 8px; border-radius: 9px; white-space: nowrap; background: #eef1f5; color: #7a8aa0; }
.ptype.supplier { background: #e9effa; color: #1d3f74; }
.ptype.customer { background: #e7f7ee; color: #1a9e4b; }
.ptype.both { background: #f7f2ff; color: #7048b6; }

.frm-2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.frm-2col .el-form-item { margin-bottom: 14px; }

/* ---------- 库存状况 KPI ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 12px; }
.kpi { background: #fff; border: 1px solid #e3e8f0; border-radius: 9px; padding: 12px 14px; }
.kpi .kpi-n { font-size: 21px; font-weight: 800; color: #1d3f74; line-height: 1.3; }
.kpi .kpi-l { font-size: 12px; color: #97a3b5; margin-top: 2px; }
.kpi.warn { background: #fffaf0; border-color: #f0dcae; }
.kpi.warn .kpi-n { color: #b8860b; }
.kpi.danger { background: #fdf2f2; border-color: #f0c8c8; }
.kpi.danger .kpi-n { color: #c0392b; }
/* 资金总览（2026-09-26 请求⑫）用：账面资金为正 = 绿，与上面 warn/danger 同一套语义。
   ⚠ 只加 `.kpi.ok` 这一条 —— 不裸写 `.ok`，那是短类名，跨模块会互撞。 */
.kpi.ok { background: #f4fbf7; border-color: #cbe8d8; }
.kpi.ok .kpi-n { color: #1a9e4b; }

/* ---------- 资金总览：期初未录入警示条（2026-09-26 请求⑫） ----------
   ⚠⚠ 这条**故意是全局的、不进 @media**：它是**功能提示**，不是版式微调 ——
     期初没录时算出来的余额只是"从系统上线那天算起的净额"，
     而它看起来像个真余额。电脑端和手机端都**必须**看得见这条提醒。
     错得很安静的余额，比一个明显不对的余额危险得多。
   ⚠ 类名带 `ast-` 前缀：短类名（`.warn` / `.notice`）跨模块会互撞（repair-board.html
     里就有一个自己的 .notice.warn），所以这里不蹭它、也不新建裸类名。 */
.ast-warn {
  background: #fffaf0; border: 1px solid #f0dcae; border-left: 4px solid #d99a1e;
  border-radius: 8px; padding: 10px 12px; margin-bottom: 12px;
  font-size: 13px; color: #7a5a12; line-height: 1.75;
}

/* ---------- 入库录入弹窗 ---------- */
.sii-head { display: flex; gap: 10px; align-items: center; }
.sii-head .el-input { flex: 1; }

.sii-results {
  max-height: 224px; overflow-y: auto; margin: 4px 0 10px;
  border: 1px solid #dbe6f5; border-radius: 8px; background: #fbfcfe;
  /* ⚠⚠ 这一行不是装饰，是**换行的前提**。
     以前只写了 border/radius，「销售单」页签排在最前（弹出框能完整展开）所以看不出问题；
     但「进货单」页签是列表最后一个，它一弹出来整页就有了纵向滚动条，
     `.sii-results` 的宽度被这 10px 一挤 —— 结果每一行都差那么一点点、刚好把
     「＋ 加入」那个 `<span>` 挤到 224px 的盒子外面（`overflow: hidden` 直接剪掉）。
     视觉上只见右边短了一截，功能上就是**搜到了却点不到「加入」**。
     店主 2026-09-27 原话：鼠标放到商品上光标会变手型，但点了没反应。 */
  overflow-x: hidden;
}
.sii-res {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  cursor: pointer; border-bottom: 1px solid #eef2f8; font-size: 13px;
}
/* ★ 2026-09-27：加了勾选框（.sir-chk）之后，一行里要塞「勾选+品类+品名+规格+库存+进价+加入」，
   13px 下在窄一点的弹窗里会刚好挤出边界。缩到 12.5px 并收紧内距，给「＋ 加入」留出稳定的落脚地。 */
.sii-resbar + .sii-res, .sii-res { font-size: 12.5px; }
.sii-res:last-child { border-bottom: none; }
.sii-res:hover { background: #eef4ff; }
.sii-res .sir-cat { flex-shrink: 0; font-size: 11px; padding: 1px 7px; border-radius: 8px; background: #e9effa; color: #1d3f74; }
.sii-res .sir-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sii-res .sir-spec { color: #97a3b5; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sii-res .sir-stock { flex-shrink: 0; color: #1a9e4b; font-size: 12px; }
.sii-res .sir-stock.zero { color: #c0c8d4; }
.sii-res .sir-cost { flex-shrink: 0; color: #97a3b5; font-size: 12px; }
.sii-res .sir-add {
  flex-shrink: 0; color: #2a6fd6; font-weight: 700; font-size: 12px;
  /* ⚠⚠ 见 .sii-results 上的注释：这一块是「点得到 / 点不到」的分界线，
     别再让它参与收缩（flex-shrink:0 已够，这里再把换行锁死，避免窄弹窗里被拆成两行把行高顶掉）。 */
  white-space: nowrap; margin-left: auto;
}

/* ★★ 搜索结果：勾选 + 全选 + 批量加入（店主 2026-09-27：「一条一条点＋加入太麻烦」）
   结构：结果列表顶部一条 .sii-resbar（全选 + 已勾选数 + 加入已选），每行左侧一个 .sir-chk。 */
.sii-resbar {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; border-bottom: 1px solid #e6edf7; background: #f4f8ff;
}
.sii-resbar .sir-all { font-size: 13px; }
.sii-res .sir-chk { flex-shrink: 0; margin-right: 2px; }
.sii-res.on { background: #e8f1ff; }
.sii-res.on:hover { background: #e1ecff; }
.sir-hint { padding: 10px 12px; font-size: 12px; color: #97a3b5; }

.sii-form {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #f6f8fb; border: 1px solid #e6ecf4; border-radius: 8px;
  padding: 9px 12px; margin-bottom: 10px;
}
.sii-form .sif-l, .sii-foot .sif-l { font-size: 12px; color: #5a6b82; white-space: nowrap; }
.sii-table { width: 100%; }
.sii-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sii-total { font-size: 13px; color: #5a6b82; }
.sii-total b { color: #1d3f74; }
.sii-total b.red { color: #d03050; font-size: 17px; }

/* ---------- ★ 单据草稿栏（2026-09-27 请求㉑：销售单 / 进货单「存草稿，下次接着录」） ----------
   ⚠ 电脑端样式就是这样，手机端的调整全部关在文件末尾的 @media (max-width: 900px) 里。 */
.draft-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fbfaf4; border: 1px dashed #e2d9b8; border-radius: 8px;
  padding: 7px 12px; margin: 0 0 10px;
}
.draft-bar .draft-hint { font-size: 12px; color: #8a7c4d; }
.draft-bar .draft-cur { color: #d08c30; font-weight: 600; }
.draft-search { margin-bottom: 8px; }
.draft-dlg .el-table { font-size: 13px; }

/* ---------- 盘点 ---------- */
.adj-body .adj-name { font-size: 15px; margin-bottom: 2px; }
.adj-body .adj-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; }
.adj-body .adj-row > span:first-child { color: #5a6b82; }

/* ---------- 商品管理：左侧类目树 ---------- */
.cat-wrap { display: flex; gap: 12px; align-items: flex-start; }
.cat-side {
  width: 224px; flex-shrink: 0; background: #fff; border: 1px solid #e3e8f0;
  border-radius: 8px; overflow: hidden; position: sticky; top: 0;
}
.cat-side .cs-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; background: #f6f8fb; border-bottom: 1px solid #e6ecf4; font-size: 13px;
}
.cat-side .cs-list { max-height: 620px; overflow-y: auto; padding: 4px 0; }
.cat-side .cs-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 12px; font-size: 13px; cursor: pointer; color: #3d4d63;
}
.cat-side .cs-item:hover { background: #f2f6fc; }
.cat-side .cs-item.active { background: #e9effa; color: #1d3f74; font-weight: 700; }
.cat-side .cs-item.top { font-weight: 600; }
.cat-side .cs-item.sub { padding-left: 28px; font-size: 12.5px; color: #5a6b82; }
.cat-side .cs-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-side .cs-n { font-size: 11px; color: #a8b3c2; flex-shrink: 0; }
.cat-side .cs-ops { display: none; gap: 4px; flex-shrink: 0; }
.cat-side .cs-item:hover .cs-ops { display: flex; }
.cat-side .cs-ops i {
  font-style: normal; font-size: 12px; color: #8e9bb0;
  padding: 0 3px; border-radius: 3px; line-height: 1.4;
}
.cat-side .cs-ops i:hover { background: #1d3f74; color: #fff; }
.cat-side .cs-foot { padding: 9px 12px; border-top: 1px solid #eef2f8; line-height: 1.6; }
.cat-main { flex: 1; min-width: 0; }

/* 打印时不显示。
   注意：**不能靠 .no-print 类** —— 本项目 `@media (max-width:900px)` 里有一条
   `.no-print { display:none !important }`（既有的，顶栏就靠它在手机上隐身），
   给它加 no-print 会连带把整个横幅在手机上也藏掉（2026-09-22 就是这么把手机端
   唯一的进销存入口藏没的）。所以这里单独写一条只作用于打印的规则。 */
@media print { .inv-hero { display: none !important; } }

/* ---------- 移动端 ---------- */
@media (max-width: 900px) {
  /* 首页入库横幅：手机端是**进销存的唯一入口**（顶栏在手机上被 .no-print 隐藏），
     所以必须显示，但要压扁 —— 按钮占满一行，下面一行快捷入口、一行 KPI。 */
  .inv-hero { gap: 8px; padding: 8px 10px; }
  .inv-hero .ihb { flex: 1 1 100%; min-width: 0; min-height: 48px; padding: 7px 14px; }
  .inv-hero .ihb .ihb-ico { font-size: 22px; }
  .inv-hero .ihb .ihb-txt { font-size: 16px; letter-spacing: .5px; }
  .inv-hero .ihb .ihb-txt small { font-size: 11px; letter-spacing: 0; }
  .inv-hero .ihn-row { order: 2; margin-left: 0; width: 100%; display: flex; gap: 6px; flex-wrap: wrap; }
  .inv-hero .ihk-row { order: 3; width: 100%; display: flex; gap: 4px; }
  .inv-hero .ihk { flex: 1 1 0; min-width: 0; padding: 3px 4px; }
  .inv-hero .ihk b { font-size: 13px; }
  .inv-hero .ihk span { font-size: 10px; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .frm-2col { grid-template-columns: 1fr; }
  .cat-wrap { flex-direction: column; }
  .cat-side { width: 100%; position: static; }
  .cat-side .cs-list { max-height: 240px; }
  .sii-res .sir-spec, .sii-res .sir-cost { display: none; }
  /* ★ 手机端：勾选框和「加入已选」都要够得着（触控下限 44px，同 .filters / .rid-* 的口径）——
     店主平时就在手机上开单，勾选框才 16px 的话一次也点不准。
     ⚠ 用**显式的 min-height: 44px**，别用 padding / transform 去凑：
       我第一版写的是 `padding: 12px 0`（≈40px）＋ `transform: scale(1.3)`，
       前者差 4px 不达标、后者只放大"看起来"的点，两者都不能算数。 */
  .sii-resbar { padding: 2px 10px; flex-wrap: wrap; }
  .sii-resbar .el-checkbox, .sii-res .sir-chk {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .sii-resbar .el-button { min-height: 44px; padding: 0 14px; }
  .sii-res .sir-chk { margin-right: 4px; }
}

/* ==========================================================================
 * 「转销售单」弹窗（.qts-*）  —— 历史报价单成交后把报价变成真实成交
 * 结构：客户/日期条 → 可改的成交明细表 → 合计与整单优惠 → 收款区
 * 配色跟配单台一致（主色 #1d3f74，金额/警示用 #c0392b、#b26a00）
 * ========================================================================== */
.qts-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.qts-l { font-size: 13px; color: #55627a; font-weight: 700; }
.qts-hint {
  background: #f4f7fb; border: 1px solid #e0e8f2; border-radius: 6px;
  padding: 8px 10px; font-size: 12.5px; color: #55627a; line-height: 1.7; margin-bottom: 8px;
}
.qts-table { width: 100%; border-collapse: collapse; }
.qts-table th {
  background: #f0f4fa; border: 1px solid #dfe6ef; padding: 6px 5px;
  font-size: 12.5px; font-weight: 700; color: #33415c; text-align: left;
}
.qts-table td { border: 1px solid #e6ecf4; padding: 4px 5px; font-size: 13px; vertical-align: middle; }
.qts-table td.num, .qts-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.qts-table td.neg { color: #c0392b; font-weight: 700; }
.qts-empty { text-align: center; color: #97a3b5; padding: 22px 0 !important; }
.qts-x { color: #c0392b; cursor: pointer; font-weight: 700; }
.qts-x:hover { opacity: .7; }
.qts-addrow { margin-top: 8px; display: flex; align-items: center; flex-wrap: wrap; }
/* 金额区：靠右，合计那行放大加粗 —— 店主核对时第一眼就看这一列 */
.qts-sum { margin-top: 12px; margin-left: auto; width: 320px; max-width: 100%; }
.qts-srow {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; font-size: 13px; color: #33415c;
}
.qts-srow.big {
  border-top: 1px solid #e0e8f2; margin-top: 4px; padding-top: 8px; font-weight: 700;
}
.qts-big { font-size: 20px; font-weight: 800; color: #c0392b; font-variant-numeric: tabular-nums; }
.qts-pay { margin-top: 14px; border-top: 1px dashed #d8e0ea; padding-top: 12px; }
.qts-prow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
/* 收款提示条：三种口径（未收/未收满/多收）用颜色区分，避免店主看错账 */
.qts-remain {
  background: #fff8ec; border: 1px solid #f0d0a0; color: #8a5a00;
  border-radius: 6px; padding: 9px 11px; font-size: 13px; line-height: 1.7;
}
.qts-remain.ok { background: #eefaf1; border-color: #b7e4c7; color: #1a6b3c; }
.qts-remain.over { background: #eef4ff; border-color: #cfe0ff; color: #1d3f74; }

/* =====================================================================
 * 权限管理（2026-09-25）—— 顶栏用户区 + 员工管理 + 红冲申请
 *
 * ⚠⚠ 全部类名一律带 `au-` / `who` 前缀。**这是硬要求，不是洁癖**：
 *   本文件里已经有 `.k` `.c` `.r` 这类单字母短类名，跨模块撞一次就是
 *   「凭空多出 22px 的高度」，屏幕上看不出来、只有量了才知道（踩过一次）。
 * ⚠ 触控目标 ≥44px、字号 ≥16px 的地方见注释 —— 手机端是员工主要的使用场景。
 * ===================================================================== */

/* ---------- 顶栏：用户名 + 下拉 ---------- */
.topbar nav .nav-dot {
  display: inline-block; min-width: 16px; height: 16px; line-height: 16px;
  margin-left: 5px; padding: 0 4px; border-radius: 8px;
  background: #e74c3c; color: #fff; font-size: 11px; font-weight: 700; text-align: center;
}
.topbar .who { position: relative; }
.topbar .who-chip {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 4px 10px; border-radius: 16px; background: rgba(255,255,255,.12); color: #fff;
}
.topbar .who-chip:hover { background: rgba(255,255,255,.22); }
.topbar .who-chip b { font-size: 12.5px; }
.topbar .who-chip small { font-size: 11px; opacity: .75; }
.topbar .who-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 176px; background: #fff; border-radius: 10px; padding: 6px;
  box-shadow: 0 8px 26px rgba(16,32,58,.22);
}
.topbar .who-m-acc {
  padding: 7px 10px; font-size: 12px; color: #8b97a6; border-bottom: 1px solid #eef2f7; margin-bottom: 4px;
}
.topbar .who-m-i {
  padding: 10px 10px; border-radius: 7px; font-size: 13.5px; color: #22324a; cursor: pointer; white-space: nowrap;
}
.topbar .who-m-i:hover { background: #f2f6fb; }
.topbar .who-m-i.danger { color: #c0392b; }
.topbar .who-m-i.danger:hover { background: #fdeceb; }
/* 点空白处收起下拉。⚠ 它是一个透明遮罩，必须低于菜单本身（菜单 z-index:60） */
.who-veil { position: fixed; inset: 0; z-index: 50; }

/* ---------- 通用：卡片式列表（员工管理 / 红冲申请共用） ---------- */
.au-wrap { padding: 4px 0 20px; }
.au-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.au-muted { font-size: 12.5px; color: #7b8798; }
.au-tip { margin-left: auto; }
.au-empty {
  padding: 44px 0; text-align: center; color: #9aa6b5; font-size: 14px;
  background: #fff; border-radius: 12px; border: 1px dashed #dfe6ef;
}
.au-btn {
  height: 36px; padding: 0 14px; border: 1px solid #d3dbe6; border-radius: 9px;
  background: #fff; color: #22324a; font-size: 13.5px; font-family: inherit; cursor: pointer;
  white-space: nowrap;
}
.au-btn:hover { border-color: #b6c5d8; background: #f7fafd; }
.au-btn:disabled { opacity: .5; cursor: default; }
.au-btn.pri { background: linear-gradient(135deg, #1d3f74, #2d5fa8); border-color: #1d3f74; color: #fff; font-weight: 600; }
.au-btn.pri:hover { opacity: .92; background: linear-gradient(135deg, #1d3f74, #2d5fa8); }
.au-btn.dgr { color: #c0392b; border-color: #eccac4; }
.au-btn.dgr:hover { background: #fdeceb; }

.au-sel {
  height: 36px; padding: 0 8px; border: 1px solid #d3dbe6; border-radius: 9px;
  background: #fff; color: #22324a; font-size: 13.5px; font-family: inherit;
}

/* 一行一个员工 / 一条申请 —— ★ 版式纪律：一条一条的横条，不做网格卡片
   （工单看板 2026-09-25 否掉网格的理由同样适用：字段多、要能一眼横着读完） */
.au-row {
  display: flex; align-items: flex-start; gap: 12px;
  background: #fff; border: 1px solid #e6ecf4; border-radius: 12px;
  padding: 13px 15px; margin-bottom: 9px;
}
.au-row.au-off { opacity: .62; background: #fafbfd; }
.au-main { flex: 1; min-width: 0; }
.au-name { font-size: 15px; font-weight: 600; color: #16202e; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.au-uname { font-size: 12.5px; font-weight: 400; color: #8b97a6; }
.au-self { font-size: 11.5px; color: #1a6b3c; background: #e9f7ef; border-radius: 8px; padding: 1px 7px; }
.au-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 12.5px; color: #6b7a8d; margin-top: 6px;
}
.au-role { border-radius: 8px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.au-r-admin { background: #eaf1fd; color: #1d3f74; }
.au-r-finance { background: #eefaf1; color: #1a6b3c; }
.au-r-staff { background: #f2f5f9; color: #5a6b80; }
.au-perms-n { cursor: help; }
.au-warn { color: #b26a00; background: #fff8ec; border-radius: 8px; padding: 1px 8px; }
.au-warn-o { color: #b3261e; background: #fdecec; }
.au-acts { display: flex; gap: 7px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

/* 红冲申请的行：内容更长，操作按钮换到下一行 */
.au-row-col { flex-direction: column; }
.au-row-col .au-acts { justify-content: flex-start; margin-top: 10px; }
.au-doc { border-radius: 8px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.au-d-purchase { background: #fff2e8; color: #a04a10; }
.au-d-sale { background: #eef4ff; color: #1d3f74; }
.au-amt { font-weight: 700; font-variant-numeric: tabular-nums; color: #c0392b; }
.au-st-pending { background: #fff8ec; color: #b26a00; }
.au-st-approved { background: #eefaf1; color: #1a6b3c; }
.au-st-rejected { background: #f2f5f9; color: #5a6b80; }
.au-reason {
  margin-top: 8px; font-size: 13px; color: #33415c; line-height: 1.6;
  background: #f7fafd; border-left: 3px solid #d3dbe6; border-radius: 0 7px 7px 0; padding: 7px 11px;
}

/* 分页（服务端分页；条数走 total，不是 list.length —— 后者只有当前页） */
.au-pager {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef2f7;
}
.au-pager .au-sel { height: 30px; font-size: 13px; padding: 0 6px; }
.au-pager .au-btn { height: 30px; padding: 0 11px; font-size: 13px; }

/* ---------- 弹窗（原生实现，不用 el-dialog）----------
   ⚠ 刻意不用 el-dialog：它是 teleport 到 body 的，而这一整套界面可能被
     打印/截图工具遍历 DOM 时漏掉（element-from-point、取景框那类脚本）。原生一个 div 最省事。 */
.au-mask {
  position: fixed; inset: 0; z-index: 2100; background: rgba(16,32,58,.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 14px; overflow: auto;
}
.au-dlg {
  width: 100%; max-width: 680px; background: #fff; border-radius: 14px;
  box-shadow: 0 12px 40px rgba(16,32,58,.28); display: flex; flex-direction: column;
}
.au-dlg-s { max-width: 440px; }
.au-dlg-t { padding: 17px 20px 12px; font-size: 16px; font-weight: 700; color: #16202e; border-bottom: 1px solid #eef2f7; }
.au-dlg-b { padding: 16px 20px 4px; }
.au-dlg-f {
  display: flex; justify-content: flex-end; gap: 9px;
  padding: 12px 20px 16px; border-top: 1px solid #eef2f7;
}
.au-f { margin-bottom: 14px; }
.au-f > label { display: block; font-size: 13px; font-weight: 600; color: #44546a; margin-bottom: 6px; line-height: 1.5; }
.au-i {
  display: block; width: 100%; height: 42px; padding: 0 12px;
  /* ⚠ 16px 不能改小：小于 16px 时 iOS 聚焦会自动放大整页且不缩回来 */
  font-size: 16px; color: #16202e; background: #fff;
  border: 1.5px solid #d3dbe6; border-radius: 9px; outline: none;
  -webkit-appearance: none; appearance: none;
}
select.au-i { height: 42px; }
.au-i:focus { border-color: #2d5fa8; box-shadow: 0 0 0 3px rgba(45,95,168,.13); }
.au-i:disabled { background: #f4f6f9; color: #8b97a6; }
.au-hint { display: block; margin-top: 5px; font-size: 12px; font-weight: 400; color: #8b97a6; line-height: 1.55; }
.au-err {
  margin: 4px 0 10px; padding: 9px 12px; border-radius: 9px;
  background: #fdecec; color: #b3261e; border: 1px solid #f7cdc9; font-size: 13px;
}
.au-tipbox {
  margin: 4px 0 12px; padding: 9px 12px; border-radius: 9px;
  background: #eaf3ff; color: #1a4c8f; border: 1px solid #cfe3fb; font-size: 12.5px; line-height: 1.6;
}

/* 权限勾选：分组 + 大点击区（手机端手指点得中） */
.au-grp { border: 1px solid #e6ecf4; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.au-grp-h {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; font-weight: 700; color: #44546a; margin-bottom: 9px;
}
.au-grp-a button {
  margin-left: 6px; border: 0; background: #f0f3f8; color: #2d5fa8;
  border-radius: 7px; padding: 3px 9px; font-size: 12px; font-family: inherit; cursor: pointer;
}
.au-grp-a button:hover { background: #e3e9f2; }
.au-perms { display: flex; flex-wrap: wrap; gap: 8px; }
.au-perm {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  min-height: 34px; padding: 5px 11px; border-radius: 9px;
  border: 1.5px solid #e2e8f0; background: #fbfcfe; font-size: 13px; color: #44546a;
}
.au-perm.on { border-color: #2d5fa8; background: #eef4ff; color: #1d3f74; font-weight: 600; }
.au-perm input { width: 16px; height: 16px; accent-color: #2d5fa8; }

/* =====================================================================
 * 📷 识别进货单（请求⑯）—— 选图 / 核对 两屏共用
 * ⚠ 手机端规则一律关进 @media（见文件末尾），**电脑端不受影响**。
 * ===================================================================== */
.prg-stepbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.prg-step {
  font-size: 13px; color: #7a8aa0; padding: 3px 12px; border-radius: 14px;
  background: #f2f5fa; border: 1px solid #e3e8f0; white-space: nowrap;
}
.prg-step.on { background: #1d3f74; border-color: #1d3f74; color: #fff; font-weight: 600; }
.prg-arrow { color: #c0c8d4; }

/* ---- 第 1 步：拖放区 + 缩略图 ---- */
.prg-drop {
  border: 2px dashed #b9c6da; border-radius: 12px; background: #fafcff;
  padding: 34px 18px; text-align: center; cursor: pointer; transition: .15s;
}
.prg-drop:hover, .prg-drop.over { border-color: #2d5fa8; background: #eef4ff; }
.prg-drop-t { font-size: 15px; font-weight: 700; color: #1f2d3d; margin-bottom: 6px; }
.prg-drop-s { font-size: 12px; color: #97a3b5; }
.prg-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.prg-thumb { position: relative; width: 124px; }
.prg-thumb img {
  width: 124px; height: 160px; object-fit: cover; border-radius: 8px;
  border: 1px solid #e3e8f0; background: #f7f9fc; display: block;
}
.prg-thumb-x {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; line-height: 22px;
  text-align: center; border-radius: 50%; background: rgba(29, 42, 61, .72); color: #fff;
  font-size: 12px; cursor: pointer;
}
.prg-thumb-x:hover { background: #d03050; }
.prg-thumb-n {
  position: absolute; left: 4px; bottom: 4px; padding: 1px 7px; border-radius: 8px;
  background: rgba(29, 42, 61, .72); color: #fff; font-size: 11px;
}
.prg-tip {
  margin-top: 12px; padding: 10px 12px; border-radius: 9px;
  background: #f7f9fc; border: 1px solid #e3e8f0; font-size: 12.5px; color: #44546a; line-height: 1.85;
}

/* ---- 第 2 步：核对 ---- */
.prg-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prg-supname { font-size: 14px; color: #1f2d3d; }
.prg-table { width: 100%; margin-top: 10px; }
.prg-off { text-decoration: line-through; color: #b6c0cd; }
.prg-miss { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.prg-sum {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 10px; padding: 9px 12px; border-radius: 9px;
  background: #f7f9fc; border: 1px solid #e3e8f0;
}
.prg-sum .is-item { font-size: 13px; color: #5a6b82; }
.prg-sum .is-item b { color: #1d3f74; font-size: 14px; }

/* ---- 与单据印的合计对账（"数量×单价互换"是唯一金额验不出的错，所以单列一条） ---- */
.prg-chk {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 12px; border-radius: 9px;
  background: #f7f9fc; border: 1px solid #e3e8f0; font-size: 12.5px;
}
.prg-chk .prg-chk-t { font-weight: 600; color: #5a6b82; }
.prg-chk .prg-chk-i { color: #5a6b82; }
.prg-chk .prg-chk-i b { color: #1d3f74; font-size: 13.5px; }
.prg-chk .prg-chk-x { color: #97a3b5; }
.prg-chk.good { background: #f2fbf5; border-color: #cbead7; }
.prg-chk.good .prg-chk-t { color: #1a9e4b; }
.prg-chk.bad { background: #fef4f2; border-color: #f6c9bd; }
.prg-chk.bad .prg-chk-t { color: #d94a1e; }
.prg-chk.bad .prg-chk-x { color: #d94a1e; }
.prg-chk.prg-fix { background: #fffaef; border-color: #f3e0b5; }
.prg-chk.prg-fix .prg-chk-t { color: #b8860b; }

/* ★ 重复上传的图被 md5 挑出来时那条黄条（2026-09-27）。
   ⚠ 故意用**自己的** class、**不挂** .prg-chk —— verify 里的 prgChk() 探针是按
     .prg-chk:not(.prg-fix) 找对账条的，这里多挂一个 prg-chk 会让探针抓到两个元素，
     对账断言就会假红（"探针抓到谁"这件事比样式本身更容易出事）。 */
.prg-dup {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 12px; border-radius: 9px;
  background: #fffaef; border: 1px solid #f3e0b5; font-size: 12.5px;
}
.prg-dup .prg-dup-t { font-weight: 600; color: #b8860b; }
.prg-dup .prg-dup-i { color: #5a6b82; }
.prg-dup .prg-dup-x { color: #97a3b5; }

.prg-pick { max-height: 380px; overflow: auto; margin-top: 8px; }
.prg-pick-hint { padding: 12px 0; color: #97a3b5; font-size: 12px; }

/* ---------- 手机端 ---------- */
@media (max-width: 900px) {
  .au-tip { display: none; }                 /* 顶栏说明文字在小屏上是纯噪音 */
  .au-row { flex-direction: column; gap: 10px; }
  .au-acts { justify-content: flex-start; width: 100%; }
  .au-acts .au-btn { height: 40px; }         /* 手指点得到 */
  .au-dlg { max-width: 100%; }
  .au-mask { padding: 12px 8px; align-items: flex-start; }
  .au-pager { gap: 6px; }
  .au-pager .au-btn { height: 36px; }
  .topbar .who-chip small { display: none; } /* 小屏只留名字，省顶栏空间 */
  .topbar .who-chip b { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* 📷 识别进货单：手机上"拍照 → 核对"是主场景，整段只管小屏 */
  .prg-dlg { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
  .prg-dlg .el-dialog__body { padding: 10px 12px; overflow-x: hidden; }
  .prg-drop { padding: 22px 12px; }
  .prg-drop-t { font-size: 14px; }
  .prg-thumb, .prg-thumb img { width: 92px; }
  .prg-thumb img { height: 122px; }
  /* ⚠⚠ 手机上输入框**必须 ≥16px**：小于 16px 时 iOS 一聚焦就把整页放大，
     店主拍完单再点到「数量」那一格，界面会"突然变大"跑版（本项目手机端纪律之一）。
     数量 / 进价 是这屏唯一要动手改的地方，更不能出事。
     ⚠ 两个坑：
       ① 字号要设在 `.el-input` / `.el-select`（**父节点**）上 —— EP 的
          `.el-input__inner { font-size: inherit }` 是从父级继承的，
          只改 inner 的话 `.el-input--small`（12px）那一层还在。
       ② 新版 EP 的 select 不是 el-input 结构（是 .el-select__wrapper/.el-select__input），
          所以 el-input 那一套选择器**盖不到下拉框**，必须另写一条。
       ③ 「选择商品」子弹窗是 append-to-body 的**兄弟节点**，不在 .prg-dlg 里面，
          选择器要写两份。 */
  .prg-dlg .el-input, .prg-dlg .el-input__inner, .prg-dlg .el-input-number,
  .prg-dlg .el-select, .prg-dlg .el-select__input, .prg-dlg .el-select__wrapper,
  .prg-pickdlg .el-input, .prg-pickdlg .el-input__inner, .prg-pickdlg .el-select__input { font-size: 16px; }
  .prg-step { font-size: 12px; padding: 2px 9px; }
  .prg-form .el-select, .prg-form .el-input { width: 100% !important; }
  /* ---- 明细表在手机上改成"一行一张卡" ----
     ⚠ 为什么必须改：390px 宽塞 7 列，数量 / 进价 / 操作全在屏幕外，
       而这一屏偏偏是手机上**最该好用**的那屏（店主拍完单要逐行核对、改数量改进价）。
       靠横向滚动去够「数量」那一格，等于把这个功能在手机上废掉。
     ⚠ 全靠 @media ⇒ **电脑端那套表格一个像素都没动**。
     ⚠ 下面 nth-child 与列顺序**死死绑定**：
        1 序号 / 2 单据上写的 / 3 数量 / 4 进价 / 5 小计 / 6 对到哪个商品 / 7 操作。
        哪天在模板里加/挪了一列，这里必须同步改（否则标签会串位）。 */
  .prg-table .el-table__header-wrapper { display: none; }
  .prg-table .el-table__body-wrapper { overflow: visible; }
  .prg-table table { table-layout: auto !important; width: 100% !important; }
  .prg-table colgroup { display: none; }
  .prg-table .el-table__body tbody tr.el-table__row {
    display: block; border: 1px solid #e3e8f0; border-radius: 10px;
    padding: 9px 11px; margin-bottom: 10px; background: #fff;
  }
  .prg-table .el-table__body tbody tr.el-table__row > td {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border: none !important; padding: 3px 0 !important; width: auto !important;
  }
  .prg-table .el-table__body tbody tr.el-table__row > td .cell { width: 100%; }
  .prg-table .el-table__body tbody tr.el-table__row > td:nth-child(1) { display: none; }  /* 序号：卡片里没意义 */
  .prg-table .el-table__body tbody tr.el-table__row > td:nth-child(5) { display: none; }  /* 小计：手机上省掉，总数在下面汇总条里 */
  .prg-table .el-table__body tbody tr.el-table__row > td:nth-child(3)::before,
  .prg-table .el-table__body tbody tr.el-table__row > td:nth-child(4)::before,
  .prg-table .el-table__body tbody tr.el-table__row > td:nth-child(6)::before {
    flex-shrink: 0; color: #97a3b5; font-size: 13px;
  }
  .prg-table .el-table__body tbody tr.el-table__row > td:nth-child(3)::before { content: '数量'; }
  .prg-table .el-table__body tbody tr.el-table__row > td:nth-child(4)::before { content: '进价'; }
  .prg-table .el-table__body tbody tr.el-table__row > td:nth-child(6) { align-items: flex-start; }
  .prg-table .el-table__body tbody tr.el-table__row > td:nth-child(6)::before { content: '对到商品'; padding-top: 2px; }
  /* 单据上写的那一列当卡片标题：加条分隔线，和下面几行分开 */
  .prg-table .el-table__body tbody tr.el-table__row > td:nth-child(2) {
    border-bottom: 1px dashed #eef1f5 !important; padding-bottom: 7px !important; margin-bottom: 4px;
  }
  .prg-table .el-table__body tbody tr.el-table__row > td:nth-child(7) { justify-content: flex-start; flex-wrap: wrap; gap: 4px; padding-top: 6px !important; }
  .prg-table .el-table__body tbody tr.el-table__row > td:nth-child(7) .el-button { min-height: 40px; font-size: 14px; }
  .prg-pickdlg { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
  .prg-pick { max-height: 52vh; }
  /* 底部按钮粘住，滚动时点得到（与其它手机端弹窗一致） */
  .prg-dlg .el-dialog__footer {
    position: sticky; bottom: 0; background: #fff; border-top: 1px solid #eef1f5;
    padding-top: 10px; z-index: 2;
  }
  .prg-dlg .el-dialog__footer .el-button { min-height: 44px; }
}


/* =====================================================================
 * 上门派单页（2026-09-28 第四十一轮）
 *
 * ⚠⚠ 分段纪律（与本项目既有 mobile-fix 段完全一致）：
 *   · 上半段（.disp-* 基础样式）是**全局**的 —— 电脑端与手机端共用。
 *   · 下半段整段关在 `@media (max-width: 900px)` 里 ⇒ **电脑端一个字节都不碰**。
 *     这条是店主反复强调的硬约束：「电脑端的无需变动」。
 *
 * ⚠ 本文件是 **LF** 行尾（与 app.js 的 CRLF 不同），追加时不要带 \r。
 * ===================================================================== */

/* ---------------- 基础：顶部工具条 ---------------- */
/* ⚠⚠ min-width:0 是**必须**的：.disp-wrap 是 .main（flex 容器）的子项，
   flex 子项默认 min-width:auto ⇒ 里面任何不肯换行的内容（长地址/长客户名）
   都会把整个 wrap 顶宽（实测手机端 434px vs 390px 视口 ⇒ 看板能横向拖动）。
   ⚠ 只加在 .disp-col 上**没用** —— 撑宽的是 wrap 这一层，得从最外层断掉。 */
.disp-wrap { padding: 12px 14px 24px; flex: 1; min-width: 0; max-width: 100%; }

.disp-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.disp-bar-l { display: flex; align-items: baseline; gap: 10px; }
.disp-title { font-size: 18px; color: #1d3f74; }
.disp-sub { font-size: 12px; color: #97a3b5; }
.disp-bar-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- 派单页「← 回配单台」（2026-09-28 新增） ----------
   ⚠⚠ **电脑端必须隐藏**（默认 display:none），只在手机端打开。
      理由：手机端整个 .topbar 带 no-print 被藏、首页那排大按钮又只在配单台渲染
      ⇒ 工程师一点进派单页就**出不去**了。这个按钮是手机端的救命出口。
      但电脑端有完整顶栏导航，再来个返回键是多余的，还会挤掉右边三个按钮的宽度
      —— 本项目铁律「电脑端不许动」，所以老老实实关进 @media。
   ⚠⚠ 同样**不加 no-print 类** —— 那条规则在手机上也会把它藏掉，正好把这个
      手机端唯一的出口干没了（就是 .disp-tabsmobile 栽过的同一个坑，见 §31.1）。 */
.disp-back { display: none; }

.disp-search {
  height: 34px; padding: 0 10px; width: 240px;
  border: 1px solid #e3e8f0; border-radius: 6px; outline: none;
  font-size: 13px; color: #33475f; background: #fff;
}
.disp-search:focus { border-color: #2d5fa8; }

.disp-btn {
  height: 34px; padding: 0 14px; border-radius: 6px; cursor: pointer;
  font-size: 13px; border: 1px solid transparent; white-space: nowrap;
}
.disp-btn.primary { background: #1d3f74; color: #fff; }
.disp-btn.primary:hover { background: #2d5fa8; }
.disp-btn.ghost { background: #fff; color: #5a6b82; border-color: #e3e8f0; }
.disp-btn.ghost:hover { border-color: #2d5fa8; color: #2d5fa8; }
.disp-btn.ai { background: #eef4ff; color: #2d5fa8; border-color: #cddcf5; }
.disp-btn.ai:hover { background: #dde9ff; }

/* ---------------- 基础：看板五列 ---------------- */
.disp-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: start; }

.disp-col {
  background: #f7f9fc; border: 1px solid #e9eef6; border-radius: 8px;
  min-height: 160px; display: flex; flex-direction: column;
}
.disp-col-h {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 10px; border-bottom: 1px solid #e9eef6;
  font-size: 13px; color: #33475f;
}
.dch-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dch-n {
  background: #e3e8f0; color: #5a6b82; font-size: 11px;
  padding: 1px 6px; border-radius: 9px; margin-left: auto;
}
.dch-hint { font-size: 11px; color: #97a3b5; margin-left: 4px; }

.disp-col-b { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.disp-empty { text-align: center; color: #b6c0cf; font-size: 12px; padding: 18px 0; }

/* ---------------- 基础：单张卡片 ---------------- */
.disp-card {
  background: #fff; border: 1px solid #e3e8f0; border-radius: 8px;
  padding: 9px 10px; cursor: pointer; transition: box-shadow .15s, border-color .15s;
  /* ★ 卡片里任何一段超长文本（长客户名 / 长地址 / 长故障）都不许把卡片撑宽。
     配合手机端 .disp-col{min-width:0} 一起，彻底断掉"看板横向溢出"。 */
  min-width: 0; overflow-wrap: anywhere;
}
.disp-card:hover { box-shadow: 0 2px 10px rgba(29, 63, 116, .10); border-color: #c9d6e8; }
.disp-card.urgent { border-left: 3px solid #d94a1e; }

.dc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.dc-no { font-size: 11px; color: #97a3b5; font-family: ui-monospace, Consolas, monospace; }
.dc-rel { font-size: 11px; color: #b6c0cf; }
.dc-line { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.dc-name { font-size: 14px; color: #1d3f74; }
.dc-svc {
  font-size: 11px; color: #2d5fa8; background: #eef4ff;
  padding: 1px 6px; border-radius: 4px; flex: none;
}
.dc-addr { font-size: 12px; color: #5a6b82; margin-bottom: 2px; word-break: break-all; }
.dc-fault {
  font-size: 12px; color: #33475f; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dc-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.dc-who { font-size: 11px; color: #5a6b82; }
.dc-pay { font-size: 11px; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.dc-pay.ok { background: #e8f6ec; color: #1a9e4b; }
.dc-pay.part { background: #fff6e5; color: #d94a1e; }
.dc-pay.unpaid { background: #fdecea; color: #c0392b; }

.dc-acts { display: flex; gap: 5px; flex-wrap: wrap; }
.dc-a {
  font-size: 12px; padding: 3px 10px; border-radius: 5px; cursor: pointer;
  border: 1px solid transparent; background: #f2f5fa; color: #5a6b82;
  text-decoration: none; line-height: 1.5;
}
.dc-a:hover { filter: brightness(.96); }
.dc-a.primary { background: #1d3f74; color: #fff; }
.dc-a.done { background: #12a594; color: #fff; }
.dc-a.money { background: #1a9e4b; color: #fff; }
.dc-a.ghost { background: #fff; border-color: #e3e8f0; }

/* ⚠ 手机端专用的一行页签，电脑端**必须**隐藏（它在 @media 里打开） */
.disp-tabsmobile { display: none; }

/* 打印时不显示派单工具条与手机页签。
   ⚠⚠ **不能给它们加 `no-print` 类** —— 本项目 @media (max-width:900px) 里
   有一条 `.no-print{display:none !important}`（顶栏就靠它在手机上隐身），
   加了它这两块在**手机上**会被连带藏掉（2026-09-22 首页横幅就是这么没的）。
   所以这里单独写只作用于打印的规则。 */
@media print {
  .disp-bar, .disp-tabsmobile { display: none !important; }
}

/* ---------------- 弹窗内的表单 ---------------- */
.disp-dlg .el-dialog__body { padding-top: 10px; }

.dnf-f, .dbf-f { margin-bottom: 13px; }
.dnf-f > label, .dbf-f > label {
  display: block; font-size: 13px; color: #5a6b82; margin-bottom: 5px;
}
.dnf-f > label i, .dbf-f > label i { color: #c0392b; font-style: normal; }
.dnf-tip, .dbf-tip { font-size: 12px; color: #97a3b5; margin-top: 4px; }
.dbf-tip { display: inline-block; margin-left: 8px; }
.dnf-raw {
  font-size: 12px; color: #5a6b82; background: #f7f9fc;
  border: 1px solid #e9eef6; border-radius: 6px; padding: 7px 9px;
  white-space: pre-wrap; word-break: break-all; max-height: 110px; overflow: auto;
}
.dbf-warn {
  font-size: 12px; color: #b8860b; background: #fffbf0;
  border-left: 3px solid #e6b422; padding: 6px 9px; margin-top: 6px; border-radius: 3px;
}
.dbf-head {
  background: #f7f9fc; border-radius: 6px; padding: 8px 10px; margin-bottom: 13px;
  display: flex; flex-direction: column; gap: 3px;
}
.dbf-head b { font-size: 13px; color: #1d3f74; font-family: ui-monospace, Consolas, monospace; }
.dbf-head span { font-size: 12px; color: #5a6b82; }
.dbf-addr { color: #97a3b5 !important; }

.dnf-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* ---------------- AI 解析弹窗 ---------------- */
.dp-hint {
  font-size: 12px; color: #5a6b82; background: #eef4ff;
  border-radius: 6px; padding: 9px 11px; margin-bottom: 11px; line-height: 1.7;
}
.dp-act { margin-top: 10px; text-align: right; }
.dp-list { margin-top: 14px; border-top: 1px dashed #e3e8f0; padding-top: 11px; }
.dp-list-h { font-size: 12px; color: #5a6b82; margin-bottom: 8px; }
.dp-item {
  border: 1px solid #e3e8f0; border-radius: 7px; padding: 9px 11px; margin-bottom: 8px;
  background: #fcfdff;
}
.dpi-top { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.dpi-top b { font-size: 14px; color: #1d3f74; }
.dpi-conf { font-size: 11px; padding: 1px 6px; border-radius: 4px; }
.dpi-conf.high { background: #e8f6ec; color: #1a9e4b; }
.dpi-conf.medium { background: #fff6e5; color: #d94a1e; }
.dpi-conf.low { background: #fdecea; color: #c0392b; }
.dpi-urgent { font-size: 11px; background: #fdecea; color: #c0392b; padding: 1px 6px; border-radius: 4px; }
.dpi-row { font-size: 12px; color: #5a6b82; margin-bottom: 2px; word-break: break-all; }
.dpi-bad { color: #c0392b; font-size: 11px; margin-left: 6px; }
.dpi-act { margin-top: 7px; text-align: right; }

/* ---------------- 详情 ---------------- */
.dd-top { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; flex-wrap: wrap; }
.dd-no { font-size: 15px; color: #1d3f74; font-family: ui-monospace, Consolas, monospace; }
.dd-status { color: #fff; font-size: 12px; padding: 2px 9px; border-radius: 4px; }
.dd-pay { font-size: 12px; padding: 2px 9px; border-radius: 4px; background: #f2f5fa; color: #5a6b82; }
.dd-pay.paid { background: #e8f6ec; color: #1a9e4b; }
.dd-pay.partial { background: #fff6e5; color: #d94a1e; }
.dd-pay.unpaid { background: #fdecea; color: #c0392b; }
.dd-sec {
  border-top: 1px solid #eef1f5; padding-top: 9px; margin-top: 9px;
  display: flex; flex-direction: column; gap: 6px;
}
.dd-sec.link { background: #f7f9fc; border-radius: 6px; padding: 9px 11px; border-top: none; }
.dd-r { display: flex; gap: 10px; font-size: 13px; }
.dd-r > span { color: #97a3b5; flex: none; width: 68px; }
.dd-r > b { color: #33475f; font-weight: 500; word-break: break-all; }
.dd-r > b.warn { color: #c0392b; }
.dd-r > b i { font-style: normal; font-size: 11px; color: #97a3b5; }
.dd-r.col { flex-direction: column; gap: 5px; }
.dd-raw {
  font-size: 12px; color: #5a6b82; background: #f7f9fc; border-radius: 5px;
  padding: 7px 9px; white-space: pre-wrap; word-break: break-all; max-height: 120px; overflow: auto;
}
.dd-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ---- 改派 ---- */
.da-job { font-size: 13px; color: #1d3f74; margin-bottom: 10px; }
.da-tip { font-size: 12px; color: #97a3b5; margin-top: 9px; line-height: 1.6; }

/* =====================================================================
 * ★★ 手机端（≤900px）—— **只在这一段里**改手机表现，电脑端完全不受影响
 * ===================================================================== */
@media (max-width: 900px) {

  /* 顶部工具条：竖排、按钮撑满、搜索框全宽（手指点得到） */
  .disp-wrap { padding: 10px 10px 20px; }
  .disp-bar { flex-direction: column; align-items: stretch; gap: 9px; margin-bottom: 10px; }
  /* ⚠ 原来这里是 justify-content: space-between（标题左、副标题右）。
     现在行首多了个「← 回配单台」，若继续 space-between 会把返回键、
     标题、副标题**三等分**拉开，返回键飘在最左、标题跑中间，很难看也难点。
     ⇒ 改成 flex-start + 允许换行：返回键和标题挨着，副标题放不下就换行。
     ★★ 触控高度显式 44px（本项目铁律：别用 padding 凑高度）。 */
  .disp-bar-l { justify-content: flex-start; flex-wrap: wrap; align-items: center; gap: 8px; }
  .disp-back {
    display: inline-flex; align-items: center;
    height: 44px; min-height: 44px; padding: 0 14px;
    font-size: 14px; font-weight: 600; color: #1d3f74;
    background: #fff; border: 1px solid #d8e2f0; border-radius: 9px;
    cursor: pointer; white-space: nowrap;
  }
  .disp-back:active { background: #eef4ff; }
  .disp-title { font-size: 16px; }
  .disp-sub { width: 100%; }   /* 副标题独占一行，不跟标题抢地方 */
  .disp-bar-r { gap: 7px; }
  .disp-search { width: 100%; height: 40px; font-size: 16px; /* ≥16px 防 iOS 自动放大 */ }
  .disp-btn { height: 40px; min-height: 40px; font-size: 14px; flex: 1; padding: 0 8px; }
  /* 「新建派单」要更显眼、占满一整行 */
  .disp-btn.primary { flex-basis: 100%; order: -1; height: 44px; min-height: 44px; font-size: 15px; }

  /* ★ 五列看板 → 单列显示 + 一行可点的页签（横向可滑，五列都够得到） */
  .disp-tabsmobile {
    display: flex; gap: 6px; overflow-x: auto; padding-bottom: 9px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .disp-tabsmobile::-webkit-scrollbar { display: none; }
  .dtm {
    flex: none; min-width: 78px; min-height: 48px; padding: 6px 10px;
    border: 1px solid #e3e8f0; border-radius: 8px; background: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    cursor: pointer;
  }
  .dtm.on { background: #1d3f74; border-color: #1d3f74; }
  .dtm.on .dtm-n, .dtm.on .dtm-l { color: #fff; }
  .dtm-n { font-size: 16px; font-weight: 700; color: #1d3f74; line-height: 1.1; }
  .dtm-l { font-size: 11px; color: #7d8a9c; }

  .disp-board { grid-template-columns: 1fr; }
  .disp-col.mobile-hide { display: none; }
  /* ⚠⚠ min-width:0 是**必须**的（不是可有可无）：
     grid/flex 子项默认 min-width:auto ⇒ 卡片里那串长地址（"建设路9号院3号楼502"）
     或长故障描述不肯换行时，会把整列**撑得比屏幕还宽**（实测 414px vs 390px
     视口），手机上看板就能横向拖动。只写 min-height:0 修不了这个 ——
     width 与 height 是两个独立的自动最小尺寸，得**分别**归零。 */
  .disp-col { min-height: 0; min-width: 0; }
  .dch-hint { display: none; }

  /* 卡片：字大、按钮大（触控 ≥44px），信息不挤压 */
  .disp-card { padding: 11px 12px; border-radius: 10px; }
  .dc-no { font-size: 12px; }
  .dc-name { font-size: 16px; }
  .dc-svc { font-size: 12px; }
  .dc-addr { font-size: 14px; }
  .dc-fault { font-size: 14px; -webkit-line-clamp: 3; }
  .dc-who, .dc-pay { font-size: 12px; }

  /* ⚠⚠ 按钮必须显式给 min-height：只写 padding 在真机上点不到（本项目已踩过的坑） */
  .dc-acts { gap: 7px; margin-top: 7px; }
  .dc-a {
    min-height: 44px; padding: 0 14px; font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 1 1 auto;
  }

  /* 弹窗：全屏宽、底部按钮 sticky（滚动时点得到） */
  .disp-dlg { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
  .disp-dlg .el-dialog__body { padding: 10px 12px; max-height: 68vh; overflow-y: auto; }
  .disp-dlg .el-dialog__footer {
    position: sticky; bottom: 0; background: #fff; border-top: 1px solid #eef1f5;
    padding-top: 10px; z-index: 2;
  }
  .disp-dlg .el-dialog__footer .el-button { min-height: 44px; }
  /* ⚠ 输入框也要 ≥16px，否则 iOS Safari 聚焦时会自动放大整页 */
  .disp-dlg .el-input__inner, .disp-dlg .el-textarea__inner { font-size: 16px; }
  .dbf-tip { display: block; margin-left: 0; margin-top: 5px; }

  /* 详情里两栏变一栏（手机窄，68px 标签列占太多） */
  .dd-r { flex-direction: column; gap: 2px; }
  .dd-r > span { width: auto; font-size: 12px; }

  .dnf-foot .el-button, .dd-foot .el-button { min-height: 44px; flex: 1; }
}