:root{
  --topbar:#111827;
  --canvas:#f4f5f7;
  --card:#ffffff;
  --border:#e5e7eb;
  --border2:#d1d5db;
  --text:#1f2937;
  --muted:#6b7280;
  --faint:#9ca3af;
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --danger:#dc2626;
  --success:#16a34a;
  --warn:#d97706;
  --radius:12px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  /* 侧边栏（对齐 TG-HR 的深蓝配色） */
  --sider-bg:#0d2c4f;
  --sider-bg-2:#0a2340;
  --sider-border:#0a2340;
  --sider-text:#c6d2e2;
  --sider-text-dim:#8ba0bd;
  --sider-hover-bg:#143a63;
  --sider-active-bg:#0a2340;
  --sider-active-text:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Segoe UI","Microsoft YaHei",-apple-system,sans-serif;background:var(--canvas);color:var(--text);font-size:14px;line-height:1.6}
.hidden{display:none!important}
a{color:var(--primary)}

/* ============================================================
   企微/微信内置浏览器的视口高度处理（2026-10-26）
   ------------------------------------------------------------
   ⚠️ 为什么不能用纯 100vh：
      企微内置浏览器有顶部标题栏 + 底部工具栏，**100vh 算的是整个窗口高度**，
      不等于「实际能显示内容的那一屏」→ 页面底部被工具栏盖住一截，
      底部固定的按钮（确定/取消）点不到。
   ⚠️ 100dvh（动态视口高度）是正解，但老版本企微 WebView 不认 →
      所以用 JS 实时算一个 --app-vh 变量兜底。
   ⚠️ 软键盘弹起时 visualViewport.height 会变 → 变量跟着变 →
      底部固定条自动上抬，不会被键盘盖住。
   ============================================================ */
:root{--app-vh:100vh}
@supports (height:100dvh){ :root{--app-vh:100dvh} }
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overscroll-behavior-y:none;min-height:var(--app-vh)}

/* ---------- 登录 ---------- */
.login-wrap{min-height:var(--app-vh);display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#0f172a,#1e293b)}
.login-card{width:360px;background:#fff;border-radius:16px;padding:36px 32px;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.login-logo{font-size:20px;font-weight:600;color:#111827;margin-bottom:4px}
.login-logo span{color:var(--primary)}
.login-sub{font-size:12px;color:var(--muted);margin-bottom:24px}
.login-tip{font-size:12px;color:var(--faint);margin-top:16px;text-align:center}
.qr-loading{padding:30px 0;text-align:center;color:var(--muted);font-size:13px}
#ww_qr_box{display:flex;justify-content:center;margin:4px 0}
#ww_qr_box iframe{max-width:100%}
.mode-toggle{margin-top:12px}

/* 企业微信快速登录按钮 + 分隔线（电脑端，2026-10-25） */
.fast-login-btn{margin-bottom:4px}
.login-divider{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:12px;margin:14px 0 2px}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--border2)}

/* 手机浏览器引导：去企业微信打开（2026-10-25） */
.mg-box{text-align:center;padding:10px 0 2px}
.mg-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:18px;background:#eef6ff;color:var(--primary);margin-bottom:14px}
.mg-title{font-size:16px;font-weight:600;color:#111827;margin-bottom:10px}
.mg-desc{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:16px}
.mg-hint{font-size:12px;color:var(--faint);margin-top:12px;line-height:1.6}

/* 登录页底部说明（对齐 TG-HR 的「仅限天罡在职员工使用」） */
.login-foot-note{margin-top:22px;padding-top:14px;border-top:1px solid var(--border2)}

/* ---------- 通知（样式在「应用外壳」段统一维护） ---------- */
.notif-wrap{position:relative}
.notif-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);
  font-weight:600;font-size:14px}
.notif-head a{color:var(--primary);font-size:12px;cursor:pointer;font-weight:400}
.notif-list{max-height:340px;overflow:auto}
.notif-item.unread{background:#eff6ff}
.notif-item.unread .notif-msg{font-weight:600}

/* ============================================================
   应用外壳：深蓝侧边栏 + 白色顶栏 + 内容区（对齐 TG-HR）
   ⚠️ 为什么改成侧边栏：原来 16 个菜单挤在顶栏，手机端顶栏整个被 CSS 隐藏
   （.topbar .nav{display:none}），底部 4 标签又装不下 → 「角色权限」这类
   深层页面在手机上根本点不到。侧边栏能分组、能折叠、能二级展开。
   ============================================================ */
.app{display:flex;min-height:var(--app-vh)}
.sider{width:232px;background:var(--sider-bg);display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;z-index:20;transition:width .18s ease}
.sider-logo{height:60px;display:flex;align-items:center;padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap;overflow:hidden;background:var(--sider-bg-2)}
.sider-logo .logo-badge{width:32px;height:32px;border-radius:6px;background:var(--primary);
  color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sider-logo .logo-text{font-size:15px;font-weight:600;margin-left:10px;color:#fff;
  display:flex;flex-direction:column;line-height:1.2}
.sider-logo .logo-sub{font-size:9px;font-weight:400;color:var(--sider-text-dim);letter-spacing:1px;text-transform:uppercase}
.collapse-btn{margin-left:auto;width:26px;height:26px;border:1px solid rgba(255,255,255,.25);
  background:transparent;border-radius:6px;display:flex;align-items:center;justify-content:center;
  color:var(--sider-text-dim);flex-shrink:0;transition:all .15s}
.collapse-btn:hover{border-color:#fff;color:#fff}
.collapse-btn svg{width:15px;height:15px}
.sider-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}
.sider-nav::-webkit-scrollbar{width:5px}
.sider-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
.nav-group{margin-bottom:2px}
.nav-group-title{padding:12px 20px 5px;font-size:10.5px;color:var(--sider-text-dim);
  letter-spacing:1.2px;white-space:nowrap;overflow:hidden}
/* 一级菜单项：图标 + 文字 + 展开箭头 */
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 20px;color:#e3e9f2;
  font-size:14px;cursor:pointer;white-space:nowrap;transition:background .15s;position:relative}
.nav-item:hover{background:var(--sider-hover-bg);color:#fff}
.nav-item.active{background:var(--sider-active-bg);color:#fff}
.nav-item svg{width:18px;height:18px;flex-shrink:0}
.nav-item .arr{margin-left:auto;font-size:10px;color:var(--sider-text-dim);transition:transform .15s}
/* 二级菜单（缩进） */
.sub-items{overflow:hidden}
.sub-item{display:flex;align-items:center;gap:10px;padding:8px 20px 8px 46px;font-size:13.5px;
  color:var(--sider-text);cursor:pointer;white-space:nowrap;transition:background .15s}
.sub-item:hover{background:var(--sider-hover-bg);color:#fff}
.sub-item.active{background:var(--sider-active-bg);color:#fff;font-weight:600}
.sub-item svg{width:15px;height:15px;flex-shrink:0}
.sider-foot{border-top:1px solid rgba(255,255,255,.08);padding:12px 16px;display:flex;
  align-items:center;gap:10px;white-space:nowrap;overflow:hidden;background:var(--sider-bg-2)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.sider-userinfo{min-width:0}
.sider-name{font-size:13px;color:#fff;overflow:hidden;text-overflow:ellipsis}
.sider-role{font-size:11px;color:var(--sider-text-dim);overflow:hidden;text-overflow:ellipsis}

/* 主区域 */
.layout{flex:1;margin-left:232px;display:flex;flex-direction:column;min-width:0;transition:margin-left .18s ease}
.header{height:56px;background:#fff;border-bottom:1px solid var(--border);display:flex;
  align-items:center;padding:0 24px;position:sticky;top:0;z-index:10}
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--faint)}
.crumb .cur{color:var(--text);font-weight:600;font-size:14px}
.crumb .sep{color:#cbd5e1}
.header-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.me{font-size:13px;color:var(--muted)}
.me b{color:var(--text);font-weight:600}
.notif-btn{background:transparent;border:none;color:#6b7280;cursor:pointer;padding:6px;border-radius:8px;display:flex;align-items:center}
.notif-btn:hover{color:var(--text);background:#f1f5f9}
.notif-badge{position:absolute;top:-2px;right:-2px;background:var(--danger);color:#fff;font-size:11px;
  min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;font-weight:600}
.notif-panel{position:absolute;right:0;top:38px;width:340px;max-height:420px;overflow:auto;background:#fff;
  border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.13);z-index:60;padding:6px}
.notif-panel::before{content:"";position:absolute;right:14px;top:-6px;width:10px;height:10px;background:#fff;
  border-left:1px solid var(--border);border-top:1px solid var(--border);transform:rotate(45deg)}
.notif-item{padding:10px 12px;border-radius:8px;cursor:pointer}
.notif-item:hover{background:#f8fafc}
.notif-title{font-size:13px;font-weight:600;color:var(--text)}
.notif-msg{font-size:13px;color:var(--text);line-height:1.5}
.notif-time{font-size:11px;color:var(--faint);margin-top:3px}
.notif-empty{padding:24px;text-align:center;color:var(--faint);font-size:13px}

/* 侧边栏折叠态 */
.app.collapsed .sider{width:64px}
.app.collapsed .layout{margin-left:64px}
.app.collapsed .sider-logo{padding:0;justify-content:center}
.app.collapsed .sider-logo .logo-text,
.app.collapsed .nav-group-title,
.app.collapsed .nav-item span,
.app.collapsed .sider-userinfo,
.app.collapsed .sider-logo .collapse-btn,
.app.collapsed .sub-items{display:none}
.app.collapsed .sider-nav{padding:12px 0}
.app.collapsed .nav-item{justify-content:center;padding:11px 0;margin:1px 10px}
.app.collapsed .sider-foot{justify-content:center;padding:12px 0}
.app.collapsed .nav-item[data-tip]:hover::after{content:attr(data-tip);position:fixed;left:66px;margin-top:-2px;
  background:#1f2937;color:#fff;font-size:12px;padding:5px 10px;border-radius:5px;white-space:nowrap;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.15)}
/* 收起后展开按钮（悬浮在侧边栏顶部） */
.expand-float{position:fixed;left:0;top:0;width:64px;height:60px;z-index:21;display:none;
  align-items:center;justify-content:center;background:var(--sider-bg-2);border-bottom:1px solid rgba(255,255,255,.08)}
.app.collapsed .expand-float{display:flex}
.expand-float .collapse-btn{display:flex;width:26px;height:26px;margin:0}

/* ---------- 布局 ---------- */
.content{padding:24px;flex:1;min-width:0}
.page-title{font-size:20px;font-weight:600;margin:0 0 4px}
.page-sub{font-size:13px;color:var(--muted);margin:0 0 20px}

/* ---------- 卡片 ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:16px}
/* 表格列多时横向滚动，而不是把「操作」按钮裁掉 */
.card:has(> table.responsive){overflow-x:auto}
table.responsive td:last-child{position:sticky;right:0;background:var(--card);
  box-shadow:-7px 0 8px -8px rgba(0,0,0,.18)}
.dark table.responsive td:last-child{background:#0b1220;box-shadow:none}
/* 操作列可能有多个按钮（编辑 / 绑定企微 / 审批人…），彼此要留缝 */
table.responsive td:last-child > .btn + .btn{margin-left:6px}
table.responsive td:last-child > .btn{white-space:nowrap}

/* ---------- 角色权限矩阵 ---------- */
/* ⚠️ 这张表**不能用** table.responsive 的移动端卡片布局：
   矩阵是「行=权限项、列=角色」的二维结构，转成卡片就没法看了。
   所以单独一套样式，窄屏时横向滚动。 */
.perm-table{table-layout:fixed;width:100%;min-width:760px;border-collapse:separate;border-spacing:0}
.perm-table th,.perm-table td{border-bottom:1px solid var(--border);padding:9px 10px;text-align:center;vertical-align:middle}
.perm-table th.perm-col-name{width:34%;text-align:left}
.perm-col-head{background:var(--bg,#f8fafc)}
.perm-role-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap}
.perm-locked{font-size:10px;color:var(--faint);margin-top:2px}
.perm-reset{border:none;background:none;color:var(--faint);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;border-radius:4px}
.perm-reset:hover{color:var(--primary);background:rgba(37,99,235,.08)}
.perm-group td{background:var(--bg,#f8fafc);font-size:12px;font-weight:600;color:var(--text);text-align:left;letter-spacing:.5px}
.perm-label-cell{text-align:left !important}
.perm-name{font-size:13px;color:var(--text);font-weight:500}
.perm-desc{font-size:11px;color:var(--faint);line-height:1.4;margin-top:2px}
.perm-cell{position:relative}
.perm-check input{width:17px;height:17px;cursor:pointer;accent-color:var(--primary);vertical-align:middle}
.perm-check input:disabled{cursor:not-allowed;opacity:.45}
.perm-mark{display:inline-block;margin-left:4px;font-size:10px;color:#b45309;background:#fef3c7;
  border-radius:4px;padding:0 4px;line-height:15px;vertical-align:middle}
.perm-hint{margin-bottom:12px;line-height:1.7}
.perm-dirty{font-size:12px;color:#b45309;margin-right:6px}
/* 矩阵表窄屏时横向滚动（.card:has(> table.responsive) 只管带 responsive 的表） */
.table-wrap{overflow-x:auto}
.card h3{margin:0 0 12px;font-size:15px;font-weight:600}
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:1fr 1fr}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border2);background:#fff;color:var(--text);padding:8px 14px;border-radius:8px;font-size:14px;cursor:pointer;text-decoration:none;line-height:1.2}
.btn:hover{background:#f9fafb}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-danger{background:#fff;border-color:#fca5a5;color:var(--danger)}
.btn-danger:hover{background:#fef2f2}
.btn-success{background:var(--success);border-color:var(--success);color:#fff}
.btn-warn{background:#fff;border-color:#fcd34d;color:var(--warn)}
.btn-sm{padding:5px 10px;font-size:13px}
.btn-block{width:100%;justify-content:center;padding:10px}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- 表单 ---------- */
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:9px 12px;border:1px solid var(--border2);border-radius:8px;font-size:14px;font-family:inherit;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.field .req{color:var(--danger)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media(max-width:640px){.form-row,.form-row3{grid-template-columns:1fr}}
.err{color:var(--danger);font-size:13px;margin-bottom:12px}
.hint{font-size:12px;color:var(--faint);margin-top:4px}

/* ---------- 表格 ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
tr:hover td{background:#fafafa}
tr.clickable{cursor:pointer}
.link{color:var(--primary);cursor:pointer;text-decoration:none}
.link:hover{text-decoration:underline}
.mono{font-family:Consolas,monospace;font-size:12px}

/* ---------- 徽章 ---------- */
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap}
.b-gray{background:#f3f4f6;color:#4b5563}
.b-amber{background:#fef3c7;color:#b45309}
.b-blue{background:#dbeafe;color:#1d4ed8}
.b-red{background:#fee2e2;color:#b91c1c}
.b-teal{background:#ccfbf1;color:#0f766e}
.b-indigo{background:#e0e7ff;color:#4338ca}
.b-green{background:#dcfce7;color:#15803d}
.b-purple{background:#ede9fe;color:#6d28d9}

/* ---------- 时间线 ---------- */
.timeline{position:relative;padding-left:24px}
.timeline:before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--border2)}
.tl-item{position:relative;padding:0 0 18px}
.tl-item:before{content:"";position:absolute;left:-21px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--primary);border:2px solid #fff;box-shadow:0 0 0 2px var(--border2)}
.tl-item.reject:before{background:var(--danger)}
.tl-time{font-size:12px;color:var(--faint)}
.tl-act{font-weight:600}
.tl-comment{font-size:13px;color:var(--muted)}

/* ---------- 工具栏 ---------- */
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.toolbar .spacer{flex:1}
.filter-group{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.filter-group .chip{padding:5px 12px;border-radius:999px;border:1px solid var(--border2);font-size:13px;cursor:pointer;white-space:nowrap;background:#fff}
.filter-group .chip.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* ---------- 统计卡 ---------- */
.stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.stat .num{font-size:28px;font-weight:600;line-height:1.2}
.stat .lbl{font-size:13px;color:var(--muted);margin-top:2px}
.stat .num.red{color:var(--danger)}.stat .num.green{color:var(--success)}.stat .num.amber{color:var(--warn)}.stat .num.blue{color:var(--primary)}

/* ---------- 暗色看板 ---------- */
.dark{background:#0b1220;border-radius:var(--radius);padding:20px;color:#e2e8f0}
.dark .stat{background:#111a2e;border-color:#1e293b;color:#e2e8f0}
.dark .stat .lbl{color:#94a3b8}
.dark .stat .num{color:#f8fafc}
.dark h2,.dark h3{color:#f1f5f9}
.dark table th{color:#94a3b8;border-color:#1e293b}
.dark table td{color:#e2e8f0;border-color:#1e293b}
.dark tr:hover td{background:#16213a}
.dark .badge.b-gray{background:#1e293b;color:#cbd5e1}
.dark .muted{color:#94a3b8}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:13px}
.bar-row .bar-label{width:150px;color:#cbd5e1;text-align:right;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.bar-track{flex:1;height:18px;background:#1e293b;border-radius:4px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,#3b82f6,#60a5fa);border-radius:4px}
.bar-val{width:44px;color:#94a3b8;font-size:12px}

/* ---------- 模态框 ---------- */
.modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal{background:#fff;border-radius:14px;width:520px;max-width:100%;max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--border);font-weight:600;display:flex;justify-content:space-between;align-items:center}
.modal-body{padding:20px}
.modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}
.modal-close{cursor:pointer;color:var(--muted);font-size:20px;line-height:1}

/* ---------- toast ---------- */
.toast{position:fixed;top:68px;left:50%;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 20px;border-radius:8px;font-size:14px;z-index:200;box-shadow:0 4px 20px rgba(0,0,0,.3)}

/* ---------- 打印提示卡 ---------- */
.print-preview{border:1px dashed var(--border2);border-radius:8px;padding:16px;background:#fafafa}
.empty{padding:40px;text-align:center;color:var(--faint)}
.tag{display:inline-block;font-size:12px;color:var(--primary);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 8px;border-radius:6px;margin-right:6px}
.red-text{color:var(--danger);font-weight:600}
.green-text{color:var(--success);font-weight:600}
.amber-text{color:var(--warn);font-weight:600}
.muted{color:var(--faint)}

/* ---------- 理货 / 批次 ---------- */
/* 汇总表里的「缺口」列：正数富余、负数缺料 */
.gap-pos{display:inline-block;min-width:62px;text-align:center;padding:2px 8px;border-radius:6px;
  background:#f0fdf4;border:1px solid #bbf7d0;color:var(--success);font-weight:700;font-size:13px}
.gap-neg{display:inline-block;min-width:62px;text-align:center;padding:2px 8px;border-radius:6px;
  background:#fef2f2;border:1px solid #fecaca;color:var(--danger);font-weight:700;font-size:13px}
.gap-zero{display:inline-block;min-width:62px;text-align:center;padding:2px 8px;border-radius:6px;
  background:#f3f4f6;border:1px solid #e5e7eb;color:var(--muted);font-size:13px}
/* 理货明细行里的输入框 */
.inp-std,.inp-lot,.inp-picked,.inp-olot,.inp-opicked{
  font-family:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--border);
  border-radius:6px;background:#fff;width:100%;max-width:190px}
.inp-picked,.inp-opicked{max-width:110px}
input[type=checkbox]{width:16px;height:16px;cursor:pointer;vertical-align:middle}

/* ---------- 移动端适配 ---------- */
@media(max-width:680px){
  .content{padding:14px}
  /* 手机上侧边栏自动收成图标条（64px），只显示图标 */
  .sider{width:64px}
  .sider-logo .logo-text,
  .nav-group-title,
  .nav-item span,
  .sider-userinfo,
  .sider-logo .collapse-btn{display:none}
  .layout{margin-left:64px}
  .nav-item{justify-content:center;padding:11px 0}
  .header{padding:0 12px;height:52px}
  /* 手机上也要知道「我是谁登录的」——只保留名字，不显示角色标签 */
  .me{display:block;font-size:12px;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .header-right{gap:8px}
  #meBindBtn{display:none}
  .page-title{font-size:18px}
  .toolbar{gap:8px}
  .filter-group{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .btn{padding:9px 14px}
  .btn-sm{padding:7px 11px}
  .form-row,.form-row3{grid-template-columns:1fr}
  .modal{width:100%;margin:10px;border-radius:12px;max-height:92vh}
  .actions{display:flex;gap:8px;flex-wrap:wrap}

  /* 表格 → 卡片式 */
  table.responsive thead{display:none}
  table.responsive,table.responsive tbody,table.responsive tr,table.responsive td{display:block;width:100%}
  table.responsive tr{margin-bottom:12px;border:1px solid var(--border);border-radius:12px;padding:10px 14px;background:#fff;box-shadow:var(--shadow)}
  table.responsive td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:none;padding:6px 0;text-align:right}
  table.responsive td:before{content:attr(data-label);font-weight:600;color:var(--muted);font-size:12px;flex-shrink:0;text-align:left}
  table.responsive tr.clickable:active{background:#f3f4f6}
  .dark table.responsive tr{background:#111a2e;border-color:#1e293b}
  .dark table.responsive td{color:#e2e8f0}
  .dark table.responsive td:before{color:#94a3b8}
  .dark table.responsive tr.clickable:active{background:#16213a}
}

/* ============================================================
 * 业务员分步申请向导
 * ============================================================ */
/* 步骤条 */
.stepper{display:flex;align-items:center;margin:0 0 18px;padding:14px 10px;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto}
.step{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px;flex-shrink:0}
.step-dot{width:26px;height:26px;border-radius:50%;background:#e5e7eb;color:#9ca3af;display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:600}
.step-label{font-size:11px;color:var(--muted);white-space:nowrap}
.step.active .step-dot{background:var(--primary);color:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.14)}
.step.active .step-label{color:var(--primary);font-weight:600}
.step.done .step-dot{background:var(--success);color:#fff}
.step.done .step-label{color:var(--muted)}
.step-line{flex:1;height:2px;background:var(--border);min-width:14px;margin:0 2px;margin-bottom:20px}

/* 固定底部操作条 */
.wiz-bar{position:sticky;bottom:0;z-index:40;display:flex;align-items:center;gap:10px;
  background:#fff;border-top:1px solid var(--border);padding:12px 0;margin-top:16px;
  box-shadow:0 -2px 12px rgba(0,0,0,.05)}
.wiz-bar .spacer{flex:1}
.wiz-bar .btn-primary{min-width:110px;justify-content:center}

/* 检索框 */
.search-box{display:flex;gap:8px;margin-bottom:10px}
.search-box input{flex:1;padding:10px 12px;border:1px solid var(--border2);border-radius:8px;font-size:14px;font-family:inherit}
.search-box input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}

/* 快捷标签行 */
.quick-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.quick-label{font-size:12px;color:var(--muted);flex-shrink:0}

/* ---------- 基础 chip（可点选标签）----------
 * ⚠️ 这里必须定义基础 .chip：销售机会的「阶段 / 预计年用量 / 竞争情况」
 *    用的是裸 class="chip"，之前没有基础样式 → 渲染成普通文字、没有指针、
 *    也没有 .active 高亮，用户点了完全没反馈，判定为「没法点选」。
 *    .filter-group .chip 与 .chip.soft 的优先级更高，会覆盖这里的取值。 */
.chip{display:inline-flex;align-items:center;justify-content:center;gap:4px;
  padding:6px 13px;border:1px solid var(--border2);border-radius:999px;
  background:#fff;color:var(--text);font-size:13px;font-family:inherit;
  cursor:pointer;white-space:nowrap;user-select:none;-webkit-user-select:none;
  transition:border-color .12s,background .12s,color .12s,box-shadow .12s}
.chip:hover{border-color:var(--primary);background:#f8fafc;color:var(--primary)}
.chip:active{transform:translateY(1px)}
.chip.active{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:500;
  box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.chip.active:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff}
.chip.soft{background:#f3f4f6;border-color:#e5e7eb;color:#4b5563}
.chip.soft:hover{background:#e5e7eb;border-color:var(--border2);color:var(--text)}
.chip.soft.active{background:var(--primary);border-color:var(--primary);color:#fff}
.chip.inline{display:inline-block;margin:2px 4px 0 0}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
/* 移动端：加大可点区域 */
@media(max-width:680px){
  .chip{padding:8px 14px;font-size:14px}
}

/* 卡片标题行（标题 + 右侧操作） */
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card-head h3{margin:0}
.card-head-act{display:flex;align-items:center;gap:8px}

/* 定制样品配方区
 * ⚠️ 配方区要**换行到下一行并占满整行**（flex:1 1 100%），
 *    不要给 .item-row 加 flex-direction:column —— 那会把产品名/重量/快捷值
 *    全压成竖排一行，看起来全散了。 */
.formula-box{flex:1 1 100%;width:100%;margin-top:4px;padding:12px;border:1px dashed var(--border2);
  border-radius:10px;background:#fafbfc}
.formula-box .field{margin-bottom:8px}
.formula-box textarea{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;
  line-height:1.7;padding:9px 11px;border:1px solid var(--border2);border-radius:8px;resize:vertical}
.formula-box textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.formula-block{margin-top:10px}
.formula-block h5{margin:0 0 6px;font-size:13px;color:var(--muted);font-weight:600}
.mini-table{width:100%;border-collapse:collapse;font-size:12.5px}
.mini-table th,.mini-table td{border:1px solid var(--border);padding:6px 9px;text-align:left}
.mini-table th{background:#f8fafc;color:var(--muted);font-weight:600}

/* 「＋ 定制样品」入口 chip */
.chip.custom-chip{border-style:dashed;border-color:var(--primary);color:var(--primary);background:#eff6ff}
.chip.custom-chip:hover{background:#dbeafe}

/* 可排序表头 */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--primary)}

/* 结果列表 */
.result-list{margin-top:6px}
.result-head{font-size:12px;color:var(--muted);padding:6px 2px 10px}
.result-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);
  border-radius:10px;margin-bottom:10px;cursor:pointer;transition:border-color .15s,background .15s;background:#fff}
.result-item:hover{border-color:var(--primary);background:#f8fafc}
.result-item.sel{border-color:var(--primary);background:#eff6ff;box-shadow:0 0 0 1px var(--primary)}
.ri-main{flex:1;min-width:0}
.ri-title{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ri-sub-inline{font-weight:400;font-size:12px;color:var(--muted)}
.ri-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px;font-size:12px;color:var(--muted)}
.ri-addr{color:var(--faint)}
.ri-stock{color:var(--faint)}
.tag.owner{background:#fef3c7;color:#b45309;border-color:#fde68a}
.tag.mine{background:#dcfce7;color:#15803d;border-color:#bbf7d0}
.tag.danger{background:#fee2e2;color:#b91c1c;border-color:#fecaca}
.sub{font-size:12px;color:var(--muted);font-weight:400;margin-top:2px}

/* 已选客户横幅 */
.chosen-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 14px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;margin-bottom:12px}

/* 样品性质大类选择 */
.type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.type-item{display:flex;align-items:center;justify-content:center;text-align:center;gap:8px;
  min-height:58px;line-height:1.4;padding:12px 14px;border:1px solid var(--border2);
  border-radius:10px;cursor:pointer;font-size:13px;background:#fff;transition:all .15s}
.type-item:hover{border-color:var(--primary);background:#f8fafc}
.type-item.sel{border-color:var(--primary);background:#eff6ff;color:var(--primary);font-weight:600;
  box-shadow:0 0 0 1px var(--primary)}
.type-icon{font-size:16px;flex-shrink:0}

/* 历史机会 */
.hist-list{display:flex;flex-direction:column;gap:8px}
.hist-item{padding:10px 12px;border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:13px}
.hist-item:hover{border-color:var(--primary);background:#f8fafc}

/* 摘要 / 汇总 */
.summary{display:flex;flex-direction:column}
.sum-row{display:flex;gap:12px;padding:7px 0;border-bottom:1px dashed var(--border);font-size:13px}
.sum-row:last-child{border-bottom:none}
/* 摘要里可点击跳回修改的行 */
.sum-row.editable{cursor:pointer;border-radius:6px;padding-left:8px;padding-right:8px;margin-left:-8px;margin-right:-8px;transition:background .12s}
.sum-row.editable:hover{background:#f1f5f9}
.sum-row.editable:active{background:#e2e8f0}
.sum-row.editable .sum-v{flex:1;position:relative}
.sum-row.editable .miss{color:var(--danger,#EF4444)}
.edit-hint{flex-shrink:0;font-size:11px;color:var(--primary,#014DB2);border:1px solid currentColor;border-radius:4px;padding:1px 6px;opacity:.85}
/* 已选样品横幅 */
.sel-banner{background:#eef6ff;border:1px solid #c7ddfb;color:#014DB2;border-radius:8px;padding:9px 12px;margin-bottom:12px;font-size:13px}
.sel-banner .hint-inline{margin-left:8px;color:#6B7280;font-size:12px}
#qtyNow b{color:#014DB2;font-size:14px}

/* 多产品明细列表（一单多牌号） */
.item-list{display:flex;flex-direction:column;gap:8px}
.item-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px solid var(--border);border-radius:8px;padding:9px 11px;background:#fff}
.item-row .ir-main{flex:1;min-width:140px}
.item-row .ir-name{font-weight:600;font-size:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.item-row .ir-code{font-size:12px;color:var(--muted);font-weight:400}
.item-row .ir-spec{font-size:12px;color:var(--muted);margin-top:2px}
.item-row .ir-qty{display:flex;align-items:center;gap:4px}
.item-row .ir-input{width:96px;padding:7px 9px;border:1px solid var(--border);border-radius:6px;font-size:14px}
.item-row .ir-input:focus{outline:none;border-color:var(--primary)}
.item-row .ir-unit{font-size:12px;color:var(--muted)}
.item-row .ir-quick{display:flex;gap:4px;flex-wrap:wrap}
.item-row .ir-quick .chip{font-size:12px;padding:3px 7px}
.item-row .ir-del{flex-shrink:0;padding:5px 9px;line-height:1}
@media(max-width:680px){
  .item-row .ir-main{flex:1 1 100%}
  .item-row .ir-input{flex:1;width:auto}
  .item-row .ir-quick{flex:1 1 100%}
}
.tag.warn{background:#FEF3C7;color:#92400E}
.sum-k{width:84px;color:var(--muted);flex-shrink:0}
.sum-v{flex:1;display:flex;flex-direction:column}
.sum-v b{font-weight:600}

/* 提交确认弹窗 */
.confirm-box{max-height:60vh;overflow:auto}
.cb-sec{border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:12px}
.cb-sec h4{margin:0 0 8px;font-size:13px;color:var(--muted);font-weight:600}
.cb-sec.approval.need{border-color:#fcd34d;background:#fffbeb}
.cb-sec.approval.none{border-color:#bbf7d0;background:#f0fdf4}
.ap-row{display:flex;gap:10px;font-size:13px;padding:4px 0;align-items:flex-start}
.ap-flag{background:var(--warn);color:#fff;padding:1px 10px;border-radius:999px;font-size:12px;font-weight:600;flex-shrink:0}
.ap-flag.ok{background:var(--success)}
.ap-k{color:var(--muted);width:60px;flex-shrink:0}
.ap-v{font-weight:600}

/* 提交成功 */
.success-box{text-align:center;padding:12px 0}
.success-icon{width:56px;height:56px;border-radius:50%;background:var(--success);color:#fff;font-size:30px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.success-title{font-size:17px;font-weight:600;margin-bottom:6px}
.success-no{color:var(--muted);font-size:13px;margin-bottom:12px}
.success-msg{font-size:13px;line-height:1.8;background:#f9fafb;border-radius:10px;padding:12px;margin-bottom:10px;text-align:left}

/* 重复单提示 */
.dup-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.dup-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #fcd34d;
  background:#fffbeb;border-radius:8px;font-size:13px;flex-wrap:wrap}

@media(max-width:680px){
  .stepper{padding:12px 6px}
  .step-label{font-size:10px}
  .type-grid{grid-template-columns:1fr 1fr}
  .wiz-bar{padding:10px 0}
  .wiz-bar .btn{flex-shrink:0}
  .wiz-bar .btn-primary{min-width:96px}
  .result-item{padding:11px 12px}
  .sum-k{width:76px}
  .cb-sec{padding:10px 12px}
}

/* 企微审批推送状态 */
.wecom-ok{margin-top:10px;background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;border-radius:8px;padding:9px 12px;font-size:13px}
.wecom-fail{margin-top:10px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:8px;padding:9px 12px;font-size:13px}
.wecom-fail .hint{display:block;margin-top:4px;color:#7c2d12}

/* ============================================================
 * 移动端底部 4 标签
 * ============================================================ */
.mnav{display:none}
@media(max-width:680px){
  .mnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:#fff;border-top:1px solid var(--border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -2px 12px rgba(0,0,0,.06)}
  .mnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:4px 0;color:var(--muted);text-decoration:none;font-size:11px;cursor:pointer}
  .mnav a svg{width:22px;height:22px;stroke-width:1.8}
  .mnav a.active{color:var(--primary)}
  .mnav a.active svg{stroke-width:2}
  /* 给底部标签让出空间 */
  .content{padding-bottom:74px}
  body{font-size:15px}
}

/* ============================================================
 * 角色化首页（工作台）
 * ============================================================ */
.home-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.hh-hello{font-size:20px;font-weight:600;line-height:1.3}
.hh-role{font-size:13px;color:var(--muted);margin-top:2px}
.hh-new{flex-shrink:0}
.hero{background:linear-gradient(135deg,#1e3a8a,#014DB2);color:#fff;border-radius:16px;padding:20px 22px;margin-bottom:16px;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;box-shadow:0 6px 20px rgba(1,77,178,.22)}
.hero-num{font-size:40px;font-weight:600;line-height:1.1}
.hero-lbl{font-size:14px;opacity:.92}
.hero-sub{font-size:12px;opacity:.78;margin-top:2px}
.hero-urgent{font-size:12px;background:rgba(255,255,255,.18);border-radius:999px;padding:2px 10px;margin-top:6px}
.hero .btn-primary{margin-top:14px;background:#fff;border-color:#fff;color:#014DB2}
.hero .btn-primary:hover{background:#eaf1fd}
.count-pill{display:inline-block;background:#eef2f7;color:var(--muted);border-radius:999px;padding:0 9px;font-size:12px;font-weight:500;vertical-align:middle}
.shortcut-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.shortcut-row .sc{cursor:pointer}

/* dtTable 自检条：有按钮没绑定动作（2026-10-26 新增）
   —— 这是「死按钮」的最后一道防线：一旦发生，线上立刻可见，不靠用户报障 */
.dt-audit-bar{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;
  border-radius:8px;padding:8px 12px;margin:0 0 10px;font-size:13px}

/* 待办总览条（2026-10-26 新增）
   ------------------------------------------------------------
   一屏看完「我现在要处理什么」，点数字直接跳对应模块。
   ⚠️ 数字为 0 的用灰色（不是红），只有 hot（异常/待补录）才标红 ——
      否则一排红数字看着像出事了，其实是「没有待办」。 */
.todo-strip{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.todo-pill{flex:1 1 112px;min-width:112px;background:#fff;border:1px solid var(--border);
  border-radius:12px;padding:10px 13px;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:1px;box-shadow:var(--shadow);
  transition:border-color .15s,transform .1s}
.todo-pill:hover{border-color:var(--primary)}
.todo-pill:active{transform:scale(.985)}
.todo-pill .tp-n{font-size:22px;font-weight:600;line-height:1.25;color:var(--text)}
.todo-pill .tp-t{font-size:12px;color:var(--muted)}
.todo-pill.zero .tp-n{color:var(--faint)}
.todo-pill.hot .tp-n{color:var(--danger)}
.todo-pill.hot{border-color:#fecaca;background:#fff7f7}

/* 待办条目 */
.todo-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--border);
  border-radius:10px;margin-bottom:9px;background:#fff;cursor:pointer}
.todo-item:hover{border-color:var(--primary);background:#f8fafc}
.todo-item.urgent{border-left:3px solid var(--danger);background:#fff7f7}
.ti-main{flex:1;min-width:0}
.ti-title{font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ti-no{color:var(--muted);font-weight:400;font-size:12px}
.ti-meta{font-size:12px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ti-wait{color:var(--muted)}
.ti-wait.over{color:var(--danger);font-weight:500}
.ti-act{flex-shrink:0}
.more{text-align:center;color:var(--primary);font-size:13px;padding:8px;cursor:pointer}

/* 库存水位 */
.stock-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:13px}
.sr-name{width:150px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-bar{flex:1;height:8px;background:#eef2f7;border-radius:4px;overflow:hidden;min-width:40px}
.sr-fill{height:100%;border-radius:4px}
.sr-fill.lv-empty{background:#cbd5e1}
.sr-fill.lv-neg{background:#dc2626}
.sr-fill.lv-zero{background:#f97316}
.sr-fill.lv-low{background:#f59e0b}
.sr-fill.lv-mid{background:#eab308}
.sr-fill.lv-ok{background:#10b981}
.sr-val{width:104px;text-align:right;flex-shrink:0;font-size:12px}
.sr-val.lv-empty{color:var(--faint)}
.sr-val.lv-neg{color:#dc2626;font-weight:600}
.sr-val.lv-zero{color:#f97316;font-weight:500}
.sr-val.lv-low{color:#f59e0b}
.sr-val.lv-mid{color:#a16207}
.sr-val.lv-ok{color:#10b981}

/* 我的 */
.me-card{display:flex;align-items:center;gap:14px}
.me-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#014DB2,#1e3a8a);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;flex-shrink:0}
.me-info{flex:1;min-width:0}
.me-name{font-size:16px;font-weight:600;display:flex;align-items:center;gap:8px}
.me-uid{font-size:12px;color:var(--muted);margin-top:2px}
.menu-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);cursor:pointer}
.menu-row:last-child{border-bottom:none}
.menu-row:hover .mr-t{color:var(--primary)}
.mr-t{font-size:14px}
.mr-d{font-size:12px;color:var(--muted);margin-top:1px}
.mr-arrow{color:var(--faint);font-size:20px;line-height:1}

/* 详情页操作区 */
.act-inline{display:flex;gap:10px;flex-wrap:wrap}
.act-fixed{display:none}
@media(max-width:680px){
  .act-card{display:none}
  .act-fixed{display:flex;position:fixed;left:0;right:0;bottom:56px;z-index:55;gap:8px;
    background:#fff;border-top:1px solid var(--border);padding:8px 12px;
    box-shadow:0 -2px 12px rgba(0,0,0,.06)}
  .act-fixed:empty{display:none}
  .act-fixed .btn{flex:1;justify-content:center;min-height:46px;font-size:15px}
  .act-fixed .btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
}


/* ---------- 发货与在途（顺丰物流） ---------- */
.tip-card{border-left:3px solid var(--warn)}
.tip-line{font-size:13px;color:var(--text);margin:4px 0;line-height:1.7}
.green-text{color:var(--success)}
.red-text{color:var(--danger)}
.ship-card{border-left:3px solid var(--primary)}
.ship-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ship-head .link{font-weight:600}
.ship-cust{font-size:13px;color:var(--muted)}
.ship-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:8px}
.ship-grid>div{background:#f9fafb;border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:13px}
.ship-grid label{display:block;font-size:11px;color:var(--faint);margin-bottom:2px}
.ship-track{font-size:12px;color:var(--muted);background:#f9fafb;border:1px dashed var(--border2);
  border-radius:8px;padding:6px 10px;margin-bottom:10px}
.photo-box{border:1px dashed var(--border2);border-radius:10px;padding:10px;text-align:center;
  margin-bottom:8px;background:#f9fafb}
.photo-preview{max-width:100%;max-height:220px;border-radius:8px;display:block;margin:0 auto}

/* ---------- 发货流程步骤条（LG 2026-10-26：建运单→填单号→拍照→确认取走）---------- */
.ship-steps{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:0 0 10px}
.ss-item{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);
  background:#f1f5f9;border:1px solid var(--border);border-radius:999px;padding:3px 10px 3px 4px}
.ss-item i{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;
  border-radius:50%;background:#cbd5e1;color:#fff;font-size:11px;font-style:normal;font-weight:600}
.ss-item.done{color:var(--success);background:#ecfdf5;border-color:#a7f3d0}
.ss-item.done i{background:var(--success)}
.ss-item.cur{color:var(--primary);background:#eff6ff;border-color:#93c5fd;font-weight:600;
  box-shadow:0 0 0 3px rgba(37,99,235,.10)}
.ss-item.cur i{background:var(--primary)}
.ss-sep{width:12px;height:1px;background:var(--border2);flex:0 0 12px}
/* 页面顶部的流程说明 */
.flow-steps{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.flow-steps .fs{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text);
  background:#f8fafc;border:1px solid var(--border);border-radius:8px;padding:5px 12px}
.flow-steps .fs i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:var(--primary);color:#fff;font-size:12px;font-style:normal;font-weight:600}
/* 卡片里的留证照片缩略图 */
.ship-photo{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.ship-photo img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
.ship-photo span{font-size:12px;color:var(--muted)}

@media(max-width:680px){
  .ship-grid{grid-template-columns:1fr 1fr}
  .ship-card .actions{gap:6px}
  .ship-card .actions .btn{flex:1 1 46%;justify-content:center;min-height:40px}
  .ship-grid>div{padding:6px 8px;font-size:12px}
  .ss-item{font-size:11px;padding:2px 8px 2px 3px}
  .ss-sep{width:6px;flex:0 0 6px}
  .flow-steps .fs{font-size:12px;padding:4px 9px}
}

/* ---------- 表格排版细节 ----------
 * 之前的毛病：单号/客户/重量被挤成两行（"SR20261024-\n016"），操作按钮竖着排。
 * 修法：短字段 nowrap，长文本（样品名/规则）单行省略 + title 悬浮看全文。 */
.nowrap{white-space:nowrap}
.td-trunc{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-rule{font-size:12px;color:var(--warn)}
@media(max-width:680px){
  .nowrap{white-space:normal}
  .td-trunc{max-width:none;white-space:normal}
}

/* ---------- 样品性质两层 / 标签名称 / 定制样品库 ---------- */
/* 明细行里的「标签名称」输入框：标签上打印的名字，默认同样品名 */
.ir-label{display:block;margin-top:6px}
.ir-label>span{display:block;font-size:11px;color:var(--faint);margin-bottom:3px}
.ir-label-input{width:100%;max-width:320px;padding:6px 9px;font-size:13px;
  border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--text)}
.ir-label-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(37,99,235,.12)}
/* 细分类别卡片（性质大类选中后展开） */
.sub-card{border-left:3px solid var(--primary)}
/* 需要填具体信息的细类 */
.chip[data-need-text="1"]::after{content:"✎";margin-left:3px;opacity:.55;font-size:11px}
.chip.off{opacity:.45;text-decoration:line-through}
/* 配方明细预览（定制样品） */
.formula-head{font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600}
.mini-formula{margin-top:10px}
.mini-input{width:80px;padding:5px 8px;font-size:13px;border:1px solid var(--border);
  border-radius:6px;background:#fff;color:var(--text)}
.mini-input:focus{outline:none;border-color:var(--primary)}
/* 后台性质页里的字段勾选 chip */
#c_fields .chip{cursor:pointer}

/* 样品性质后台页：大类名单独一列，别被挤成两行 */
table.responsive td:first-child .nowrap{white-space:nowrap}
.nature-cat-cell{min-width:88px}

/* ---------- 身份切换（debug 模式） ---------- */
/* 切换身份是「我暂时借用别人的权限」，视觉上必须显眼 ——
   否则操作人自己都忘了现在是谁在操作，责任链就断了。 */
.identity-switch-card{border-color:#f59e0b;background:linear-gradient(180deg,#fffbeb 0%,var(--card) 60px)}
.identity-switch-card h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:15px;font-weight:600}
.tag-debug{background:#fef3c7;color:#b45309;border-color:#fde68a}
.impersonate-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;
  padding:10px 12px;border-radius:8px;margin:10px 0;font-size:13px}
.impersonate-banner .sub{color:#991b1b;font-size:12px}
.impersonate-banner button{margin-left:auto}
.impersonate-mark{color:#b91c1c}
.impersonate-tip{display:inline-block;margin-left:6px;font-size:11px;
  background:#fee2e2;color:#b91c1c;border:1px solid #fecaca;
  padding:0 6px;border-radius:6px;vertical-align:middle}

/* ---------- 参与人名单（试用白名单） ---------- */
/* 这个卡片是「谁能进本系统」的边界说明，必须一眼看懂当前是开是关。 */
.part-card{border-color:#0ea5e9;background:linear-gradient(180deg,#f0f9ff 0%,var(--card) 70px);margin-bottom:12px}
.part-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.part-head b{font-size:15px;font-weight:600}
.part-state{font-size:11px;padding:1px 7px;border-radius:999px;margin-left:8px;vertical-align:middle;border:1px solid}
.part-state.on{background:#dcfce7;color:#15803d;border-color:#86efac}
.part-state.off{background:#f1f5f9;color:#64748b;border-color:#cbd5e1}
.part-desc{font-size:12.5px;color:var(--muted);line-height:1.7;margin-top:4px}
.part-desc b{color:var(--text)}
.part-tag{font-size:12px;padding:2px 9px;border-radius:6px;border:1px solid;white-space:nowrap}
.part-tag.on{background:#dcfce7;color:#15803d;border-color:#86efac}

/* ---------- 多角色 & 角色权限页（2026-10-25） ---------- */

/* 子页签（角色权限页的「权限矩阵 / 用户角色分配」） */
.subtabs{display:flex;gap:6px;margin:0 0 14px;border-bottom:2px solid var(--border)}
.subtab{background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;
  padding:8px 16px;font-size:14px;color:var(--muted);cursor:pointer;font-family:inherit}
.subtab:hover{color:var(--text)}
.subtab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}

/* 角色多选控件 */
.role-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.role-picker.inline{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:4px;margin-top:2px}
.role-chk{display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid var(--border);
  border-radius:8px;cursor:pointer;font-size:13px;background:var(--card);user-select:none}
.role-chk:hover{border-color:var(--primary);background:#f0f9ff}
.role-chk input{width:15px;height:15px;accent-color:var(--primary);cursor:pointer;margin:0}
.role-chk span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 用户角色分配表 */
.ur-table{table-layout:fixed;width:100%;min-width:680px;border-collapse:separate;border-spacing:0}
.ur-table th,.ur-table td{border-bottom:1px solid var(--border);padding:10px;text-align:left;vertical-align:top}
.ur-table th{background:var(--bg,#f8fafc);font-size:13px;color:var(--muted);font-weight:600}
.ur-table tbody tr:hover{background:#f8fafc}

/* 多角色标签：主角色加个底色区分 */
.tag.role-primary{background:#dbeafe;color:#1d4ed8;border-color:#bfdbfe}

/* ============================================================
   数据表格（Tabulator）—— 对齐 TG-HR 的表格呈现
   ============================================================ */
.tabulator{font-size:13px;border:none;background:transparent}
.tabulator .tabulator-header{background:#f8fafc}
.tabulator .tabulator-header .tabulator-col{background:#f8fafc;border-right:1px solid #f1f5f9;
  color:#64748b;font-weight:600;font-size:12.5px}
.tabulator .tabulator-header .tabulator-col:hover{color:var(--primary)}
.tabulator .tabulator-row{border-bottom:1px solid #f1f5f9}
.tabulator .tabulator-row.tabulator-row-even{background:#fff}
.tabulator .tabulator-row:hover{background:#f8fafc!important}
.tabulator .tabulator-row.tabulator-selected{background:#eff6ff!important}
.tabulator-row .tabulator-cell{border-right:none;padding:10px 14px;color:var(--text)}
.tabulator .tabulator-placeholder{padding:40px;color:var(--faint);text-align:center}
/* 操作列冻结在右侧 */
.tabulator .tabulator-col.tabulator-frozen{frozen;background:#fff}
.tabulator .tabulator-row .tabulator-cell.tabulator-frozen{background:#fff}
.tabulator .tabulator-row:hover .tabulator-cell.tabulator-frozen{background:#f8fafc}
/* 表头排序箭头 */
.tabulator .tabulator-col .tabulator-arrow{color:var(--faint);border-top-color:var(--faint)}
.tabulator .tabulator-col.tabulator-sortable:hover .tabulator-arrow{border-bottom-color:var(--primary)}
/* 行内操作链接（TG-HR 风格：蓝色文字 + 分隔线） */
.tabulator .row-ops{display:flex;flex-wrap:wrap;gap:3px 8px;justify-content:center;align-items:center}
.tabulator .row-op{color:var(--primary);cursor:pointer;font-size:13px;white-space:nowrap}
.tabulator .row-op:hover{opacity:.75}
.tabulator .row-op.danger{color:var(--danger)}
.tabulator .row-op-sep{color:var(--border2);margin:0 4px;font-size:12px}
/* 表格里的可点链接（点击进详情） */
.tabulator .row-link{color:var(--primary);cursor:pointer}
.tabulator .row-link:hover{text-decoration:underline}
/* 移动端：表格保持横向滚动，不转成卡片（转卡片会丢列间关系） */
@media(max-width:680px){
  .tabulator{font-size:12.5px}
  .tabulator-row .tabulator-cell{padding:9px 10px}
}

/* ============================================================
   表格页结构（对齐 TG-HR）
   ============================================================ */
/* 筛选条：表格上方的一行，放检索框 + 视图切换 + 列设置 */
.filters{display:flex;gap:10px;padding:12px 0;flex-wrap:wrap;align-items:center;
  border-bottom:1px solid var(--border)}
.filters input{padding:8px 12px;border:1px solid var(--border2);border-radius:8px;
  font-size:13px;outline:none;min-width:150px;transition:border .15s;font-family:inherit}
.filters input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(37,99,235,.12)}
.extra-filters{display:inline-flex;gap:10px;align-items:center;flex-wrap:wrap}
.extra-filters input{min-width:110px}
.extra-filters select{padding:8px 12px;border:1px solid var(--border2);border-radius:8px;
  font-size:13px;outline:none;background:#fff;color:var(--text);font-family:inherit}
.filters .spacer{flex:1 1 0;min-width:0}

/* 列设置下拉 */
.colset-wrap{position:relative;margin-left:auto}
.colset-btn{border:1px solid var(--border2);background:#fff;color:var(--muted);
  padding:7px 13px;border-radius:8px;font-size:13px;cursor:pointer;font-family:inherit}
.colset-btn:hover{border-color:var(--primary);color:var(--primary)}
.colset-menu{position:absolute;right:0;top:38px;background:#fff;border:1px solid var(--border);
  border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:8px;width:230px;
  max-height:380px;overflow-y:auto;z-index:50}
.colset-menu label{display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:13px;
  cursor:pointer;border-radius:5px;white-space:nowrap}
.colset-menu label:hover{background:#f5f7fa}
.colset-menu input{flex-shrink:0;margin:0;accent-color:var(--primary);min-width:auto;padding:0}
.colset-foot{border-top:1px solid var(--border);margin-top:8px;padding:8px 8px 0}
.colset-save{width:100%;padding:7px 0;border:none;background:var(--primary);color:#fff;
  border-radius:6px;font-size:12.5px;cursor:pointer;font-family:inherit}
.colset-save:hover{background:var(--primary-dark)}

/* 分页条 */
.pager{display:flex;gap:8px;padding:12px 0;justify-content:flex-end;align-items:center;
  font-size:13px;color:var(--muted)}
.pager button{padding:6px 12px;border:1px solid var(--border2);background:#fff;border-radius:6px;font-size:13px}
.pager button:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.pager button:disabled{opacity:.4;cursor:default}

/* ============================================================
   精简模式（手机 / 企业微信内置浏览器）
   ============================================================
   ⚠️ **唯一判据是 body[data-env]，不是媒体查询**。
      理由：企微内置浏览器的视口宽度跟着宿主窗口走（不一定 ≤680px），
      而「企微 PC 客户端拉窄」也该精简 —— 媒体查询管不到这些。
      data-env 由 app.js 的 resolveEnv() 决定：
        服务端 UA 判定来源（wecom/mobile/desktop）+ 前端宽度修正。
      逻辑与取值见 app.js 顶部「运行环境检测」。

   ⚠️ 为什么要做精简（2026-10-25 LG 从企微里发来截图）：
      企微里**侧边栏图标条(64px) + 顶栏 + 底部导航三栏并存**，
      内容被压成两条窄缝 —— 标题「工作台」都折行了，一个卡片看不全。
      而且手机上「全面功能」本来就没意义：角色权限、用户管理、盘库、
      顺丰发货这些在窄屏里根本没法操作，误触成本还高。
      → 手机/企微：侧边栏全隐藏，底部导航接管，功能只留核心 6 个。
      → 要全面功能：**电脑浏览器**打开（桌面版一个不少）。 */

/* —— ① 侧边栏彻底让位（不是收成图标条） —— */
body[data-env="mobile"] .sider,
body[data-env="wecom"] .sider{display:none}
body[data-env="mobile"] .layout,
body[data-env="wecom"] .layout{margin-left:0}
body[data-env="mobile"] .expand-float,
body[data-env="wecom"] .expand-float{display:none}
/* 收起态的 margin 也要归零，否则会留一条空白 */
body[data-env="mobile"] .app.collapsed .layout,
body[data-env="wecom"] .app.collapsed .layout{margin-left:0}

/* —— ② 底部导航接管（只要在精简模式就显示，与宽度无关） —— */
body[data-env="mobile"] .mnav,
body[data-env="wecom"] .mnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:#fff;border-top:1px solid var(--border);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -2px 12px rgba(0,0,0,.06)}
body[data-env="mobile"] .mnav a,
body[data-env="wecom"] .mnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:4px 0;color:var(--muted);text-decoration:none;font-size:11px;cursor:pointer}
body[data-env="mobile"] .mnav a svg,
body[data-env="wecom"] .mnav a svg{width:22px;height:22px;stroke-width:1.8}
body[data-env="mobile"] .mnav a.active,
body[data-env="wecom"] .mnav a.active{color:var(--primary)}
body[data-env="mobile"] .mnav a.active svg,
body[data-env="wecom"] .mnav a.active svg{stroke-width:2}
/* 给底部标签让出空间（否则最后一张卡片被盖住） */
body[data-env="mobile"] .content,
body[data-env="wecom"] .content{padding-bottom:78px}

/* —— ③ 顶栏压扁：恒定一行，绝不换行 —— */
body[data-env="mobile"] .header,
body[data-env="wecom"] .header{height:48px;padding:0 12px;gap:10px}
body[data-env="mobile"] .crumb,
body[data-env="wecom"] .crumb{min-width:0;flex:1;white-space:nowrap;overflow:hidden}
body[data-env="mobile"] .crumb>span:first-child,
body[data-env="mobile"] .crumb>.sep,
body[data-env="wecom"] .crumb>span:first-child,
body[data-env="wecom"] .crumb>.sep{display:none}
body[data-env="mobile"] .crumb .cur,
body[data-env="wecom"] .crumb .cur{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 身份与退出在「我的」页里（viewMe 有「退出登录」按钮），顶栏不再重复占位 */
body[data-env="mobile"] #meName,
body[data-env="wecom"] #meName,
body[data-env="mobile"] #logoutBtn,
body[data-env="wecom"] #logoutBtn{display:none}
body[data-env="mobile"] .header-right,
body[data-env="wecom"] .header-right{gap:8px;flex-shrink:0}
/* 通知面板在窄屏里不能超出屏幕 */
body[data-env="mobile"] .notif-panel,
body[data-env="wecom"] .notif-panel{position:fixed;left:12px;right:12px;top:56px;width:auto;max-height:60vh}

/* —— ④ 表格 → 卡片列表（不依赖媒体查询，精简模式一律卡片） ——
   Tabulator 在窄屏里必须左右拖才能看全，交互极差；
   精简模式下前端直接跳过 Tabulator，用原生 table + .responsive → 卡片。 */
body[data-env="mobile"] table.responsive thead,
body[data-env="wecom"] table.responsive thead{display:none}
body[data-env="mobile"] table.responsive,
body[data-env="wecom"] table.responsive,
body[data-env="mobile"] table.responsive tbody,
body[data-env="wecom"] table.responsive tbody,
body[data-env="mobile"] table.responsive tr,
body[data-env="wecom"] table.responsive tr,
body[data-env="mobile"] table.responsive td,
body[data-env="wecom"] table.responsive td{display:block;width:100%}
body[data-env="mobile"] table.responsive tr,
body[data-env="wecom"] table.responsive tr{margin-bottom:12px;border:1px solid var(--border);
  border-radius:12px;padding:10px 14px;background:#fff;box-shadow:var(--shadow)}
body[data-env="mobile"] table.responsive td,
body[data-env="wecom"] table.responsive td{display:flex;justify-content:space-between;align-items:center;
  gap:12px;border:none;padding:6px 0;text-align:right}
body[data-env="mobile"] table.responsive td:before,
body[data-env="wecom"] table.responsive td:before{content:attr(data-label);font-weight:600;
  color:var(--muted);font-size:12px;flex-shrink:0;text-align:left}
body[data-env="mobile"] table.responsive tr.clickable:active,
body[data-env="wecom"] table.responsive tr.clickable:active{background:#f3f4f6}
/* 卡片里的操作按钮列（.row-ops）不换行 */
body[data-env="mobile"] .row-ops,
body[data-env="wecom"] .row-ops{flex-wrap:wrap;justify-content:flex-end}

/* —— ⑤ 卡片/表格容器不再横向滚动 —— */
body[data-env="mobile"] .table-wrap,
body[data-env="wecom"] .table-wrap{overflow-x:visible}

/* —— ⑥ 手机上顶栏不再显示「绑定企微」按钮（我的页里有） —— */
body[data-env="mobile"] #meBindBtn,
body[data-env="wecom"] #meBindBtn{display:none}

/* —— ⑦ 精简版提示条（手机版只留核心功能 → 明确告诉用户去哪用完整版） —— */
.lite-hint{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;padding:10px 12px;
  background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;color:#1e40af;font-size:12.5px;line-height:1.7}
.lite-hint-txt{flex:1;min-width:0}
.lite-hint-txt b{color:#1d4ed8}
.lite-hint-x{flex-shrink:0;background:#fff;border:1px solid #bfdbfe;color:#1d4ed8;
  border-radius:7px;padding:4px 10px;font-size:12px;cursor:pointer;font-family:inherit;white-space:nowrap}
.lite-hint-x:hover{background:#dbeafe}

/* ============================================================
   「全部功能」抽屉 + 精简模式的可用性补强（2026-10-26）
   ============================================================
   ⚠️ LG 反馈「功能禁用的有点多，最好都能在手机上操作」→
      **功能全部放开**，这里解决的是「在窄屏里怎么用得上」：
        ① 侧边栏在窄屏里点不到 → 用全屏抽屉列出全部功能
        ② 宽表格必须左右滑 → 全部转成卡片
        ③ 表单两列挤在一起 → 强制单列
        ④ 弹窗宽度不够 → 手机上全屏
        ⑤ 按钮太小点不准 → 加大点击区 */

/* —— 抽屉（仅精简模式可用） —— */
.drawer{display:none}
body[data-env="mobile"] .drawer.open,
body[data-env="wecom"] .drawer.open{display:flex;position:fixed;inset:0;z-index:120;
  flex-direction:column;background:#fff;animation:dwIn .16s ease-out}
@keyframes dwIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
body.drawer-open{overflow:hidden}
.drawer-head{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
  padding:12px 14px;border-bottom:1px solid var(--border);background:#fff}
.drawer-title{font-size:16px;font-weight:600;color:var(--text)}
.drawer-x{width:34px;height:34px;border:none;background:#f3f4f6;border-radius:9px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:#6b7280}
.drawer-x svg{width:19px;height:19px}
.drawer-x:hover{background:#e5e7eb;color:#111827}
.drawer-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:12px 14px calc(24px + env(safe-area-inset-bottom,0px))}
.dw-group{margin-bottom:16px}
.dw-group-title{font-size:12px;color:var(--muted);margin:0 0 8px 2px}
.dw-items{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dw-item{display:flex;align-items:center;gap:8px;padding:13px 12px;
  border:1px solid var(--border);border-radius:11px;background:#fff;cursor:pointer;
  font-size:14px;color:var(--text);text-align:left;font-family:inherit;min-width:0}
.dw-item svg{width:18px;height:18px;flex-shrink:0;stroke-width:1.8;color:var(--muted)}
.dw-item.active{border-color:var(--primary);background:#eff6ff;color:var(--primary)}
.dw-item.active svg{color:var(--primary)}
.dw-tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dw-item:active{background:#f3f4f6}

/* —— 顶栏菜单按钮（仅精简模式显示） —— */
.menu-btn{display:none;width:34px;height:34px;border:none;background:transparent;
  border-radius:8px;color:#6b7280;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0}
.menu-btn svg{width:20px;height:20px}
.menu-btn:hover{background:#f1f5f9;color:var(--text)}
body[data-env="mobile"] .menu-btn,
body[data-env="wecom"] .menu-btn{display:flex}

/* —— 表单：窄屏一律单列（原来只在 ≤640px 生效，精简模式要更宽也单列） —— */
body[data-env="mobile"] .form-row,
body[data-env="wecom"] .form-row,
body[data-env="mobile"] .form-row3,
body[data-env="wecom"] .form-row3{grid-template-columns:1fr}

/* —— 弹窗：手机上全屏，不再挤在中间 ——
   ⚠️ 高度用 var(--app-vh)（JS 按 visualViewport 实时算）：
      企微内 100vh 会把底部工具栏那一截算进去 → 确定/取消按钮被盖住点不到；
      软键盘弹起时 --app-vh 变小 → 弹窗跟着缩，按钮不会被键盘盖住。 */
body[data-env="mobile"] .modal,
body[data-env="wecom"] .modal{width:100%;max-width:100%;height:var(--app-vh);max-height:var(--app-vh);
  margin:0;border-radius:0}
body[data-env="mobile"] .modal-mask,
body[data-env="wecom"] .modal-mask{padding:0}
body[data-env="mobile"] .modal-body,
body[data-env="wecom"] .modal-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
body[data-env="mobile"] .modal-foot,
body[data-env="wecom"] .modal-foot{padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  display:flex;gap:8px;flex-wrap:wrap}
body[data-env="mobile"] .modal-foot .btn,
body[data-env="wecom"] .modal-foot .btn{flex:1;justify-content:center;min-width:96px}

/* —— 按钮：手机上加大点击区 —— */
body[data-env="mobile"] .btn,
body[data-env="wecom"] .btn{padding:10px 15px;font-size:14.5px}
body[data-env="mobile"] .btn-sm,
body[data-env="wecom"] .btn-sm{padding:8px 12px;font-size:13.5px}
/* 行内操作按钮（表格卡片里的 查看/复制/继续填写）也要够大 */
body[data-env="mobile"] .row-op,
body[data-env="wecom"] .row-op{padding:6px 10px;font-size:13px}
body[data-env="mobile"] .chip,
body[data-env="wecom"] .chip{padding:9px 14px;font-size:14px}

/* —— 分组标题/快捷入口：窄屏下换行更好点 —— */
body[data-env="mobile"] .shortcut-row,
body[data-env="wecom"] .shortcut-row{gap:8px}
body[data-env="mobile"] .card-head,
body[data-env="wecom"] .card-head{gap:8px}
body[data-env="mobile"] .card-head h3,
body[data-env="wecom"] .card-head h3{font-size:15px}

/* —— 库存/配置类页面的筛选条：窄屏下允许换行，不要挤成一条 —— */
body[data-env="mobile"] .filter-group,
body[data-env="wecom"] .filter-group{flex-wrap:wrap;overflow-x:visible}
body[data-env="mobile"] .toolbar,
body[data-env="wecom"] .toolbar{flex-wrap:wrap;gap:8px}

/* ============================================================
   可搜索下拉选择器（产品 / 物料 / SKU）
   ============================================================
   ⚠️ LG 2026-10-26 要求：产品类下拉超过 10 个就要能筛。
      实现上做了三层保险：
        ① 类别 chips（产品有 category）—— 先按类别缩一轮
        ② 关键字检索（名称/牌号/英文名/别名/规格全字段）
        ③ 关键字检索时**只显示前 5 条**（选项太多反而挑花眼）
      选项 ≤10 个的**保持原生 select 不动**（见 mountPicker 阈值）。

   ⚠️ **原生 select 不删，只是视觉隐藏**：
      它是值载体，所有 $('#xxx').value 取值和 onchange 联动都靠它。
   ============================================================ */
.psel{position:relative;width:100%}
/** 原生 select：留着当值载体，但视觉上让位给自定义触发器 */
.psel .psel-native{position:absolute!important;left:0;top:0;width:1px!important;height:1px!important;
  opacity:0;pointer-events:none;padding:0!important;border:0!important;margin:0!important;overflow:hidden}

.psel-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:9px 12px;border:1px solid var(--border2);border-radius:8px;font-size:14px;font-family:inherit;
  background:#fff;color:var(--text);cursor:pointer;text-align:left;line-height:1.4}
.psel-trigger:hover{border-color:#c4cfdd}
.psel-trigger:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.psel-cur{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psel-cur.ph{color:var(--faint)}
.psel-arrow{flex-shrink:0;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--muted);transition:transform .15s}
.psel.open .psel-arrow{transform:rotate(180deg)}

/** 浮层面板：桌面端 fixed 定位（JS 按触发器位置算，够不到就向上展开） */
.psel-panel{display:none;position:fixed;z-index:150;background:#fff;border:1px solid var(--border);
  border-radius:12px;box-shadow:0 14px 40px rgba(15,23,42,.18);padding:10px}
.psel-panel.open{display:block}

.psel-search input{width:100%;padding:9px 11px;border:1px solid var(--border2);border-radius:8px;
  font-size:14px;font-family:inherit;background:#fff;color:var(--text)}
.psel-search input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}

/** 类别筛选：横排可滑动，类别多了也不换行撑高 */
.psel-cats{display:flex;gap:6px;overflow-x:auto;padding:9px 0 7px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.psel-cats::-webkit-scrollbar{display:none}
.psel-cat{flex-shrink:0;padding:5px 12px;border:1px solid var(--border2);border-radius:999px;background:#fff;
  font-size:12.5px;color:var(--muted);cursor:pointer;font-family:inherit;white-space:nowrap;line-height:1.5}
.psel-cat:hover{background:#f1f5f9;color:var(--text)}
.psel-cat.active{background:var(--primary);border-color:var(--primary);color:#fff}

.psel-list{max-height:260px;overflow-y:auto;margin-top:2px;-webkit-overflow-scrolling:touch}
.psel-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;
  border-radius:8px;cursor:pointer;font-size:14px;color:var(--text)}
.psel-opt:hover{background:#f1f5f9}
.psel-opt.sel{background:#eff6ff;color:#1d4ed8;font-weight:600}
.psel-opt-tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psel-opt-cat{flex-shrink:0;font-size:11.5px;color:var(--muted);background:#f1f5f9;
  padding:2px 7px;border-radius:5px}
.psel-opt.sel .psel-opt-cat{background:#dbeafe;color:#1d4ed8}
.psel-empty{padding:22px 10px;text-align:center;color:var(--faint);font-size:13px}
.psel-more{padding:8px 10px 2px;font-size:11.5px;color:var(--faint);text-align:center;line-height:1.6}

/* —— 移动端 / 企微：改成底部抽屉 ——
   窄屏上浮层会被视口切掉，底部抽屉才点得准。
   判据依旧是 body[data-env]（企微内屏宽度跟宿主窗口走，媒体查询管不到）。 */
.psel-mask{display:none}
body[data-env="mobile"] .psel-mask,
body[data-env="wecom"] .psel-mask{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:140}
body[data-env="mobile"] .psel-panel,
body[data-env="wecom"] .psel-panel{left:0!important;right:0;top:auto!important;bottom:0!important;
  width:auto!important;max-height:78vh;border-radius:16px 16px 0 0;display:none;flex-direction:column;
  padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px));z-index:150}
body[data-env="mobile"] .psel-panel.open,
body[data-env="wecom"] .psel-panel.open{display:flex}
body[data-env="mobile"] .psel-list,
body[data-env="wecom"] .psel-list{max-height:none;flex:1;min-height:0}
body[data-env="mobile"] .psel-opt,
body[data-env="wecom"] .psel-opt{padding:13px 10px;font-size:15px}
body[data-env="mobile"] .psel-trigger,
body[data-env="wecom"] .psel-trigger{padding:11px 12px;font-size:15px}
body[data-env="mobile"] .psel-cat,
body[data-env="wecom"] .psel-cat{padding:7px 13px;font-size:13px}

/* ============================================================
   产品选择页（整屏）· 分步流程第 1 步
   ------------------------------------------------------------
   ⚠️ LG 2026-10-26 19:43：弹窗里套浮层下拉在企微里太脆弱
      （软键盘一弹，面板就闪没）→ 改成真正的**整屏页面**：
      深色顶栏 + 吸顶检索条 + 白底产品卡片列表 + 底部操作条。
   ============================================================ */
.ppage{position:fixed;top:0;left:0;right:0;bottom:0;height:var(--app-vh);z-index:130;
  background:#f1f5f9;display:flex;flex-direction:column;animation:ppageIn .18s ease}
@keyframes ppageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.ppage-head{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:#0f172a;color:#fff;padding-top:calc(12px + env(safe-area-inset-top,0px))}
.ppage-back{width:34px;height:34px;flex-shrink:0;border:0;border-radius:9px;background:rgba(255,255,255,.12);
  color:#fff;font-size:24px;line-height:1;cursor:pointer;font-family:inherit;display:flex;
  align-items:center;justify-content:center;padding:0 0 2px}
.ppage-back:hover{background:rgba(255,255,255,.2)}
.ppage-title{flex:1;font-size:16px;font-weight:600;letter-spacing:.3px}
.ppage-count{font-size:12.5px;color:#94a3b8;flex-shrink:0}

/* 吸顶检索条：检索框 + 类别 chips */
.ppage-bar{flex-shrink:0;background:#fff;padding:10px 14px 8px;border-bottom:1px solid #e2e8f0}
.ppage-kw{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px;font-size:15px;
  font-family:inherit;background:#f8fafc;color:var(--text)}
.ppage-kw:focus{outline:none;border-color:var(--primary);background:#fff;
  box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.ppage-cats{display:flex;gap:6px;overflow-x:auto;padding:9px 0 3px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.ppage-cats::-webkit-scrollbar{display:none}
.ppage-cat{flex-shrink:0;padding:6px 12px;border:1px solid #cbd5e1;border-radius:999px;background:#fff;
  font-size:13px;color:#475569;cursor:pointer;font-family:inherit;white-space:nowrap;line-height:1.5}
.ppage-cat:hover{background:#f1f5f9}
.ppage-cat.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* 产品列表：白卡片，手机上直接点 */
.ppage-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 14px 20px;
  display:flex;flex-direction:column;gap:8px}
.ppage-item{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;text-align:left;
  padding:12px 14px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;cursor:pointer;
  font-family:inherit;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.ppage-item:hover{border-color:#c4cfdd}
.ppage-item.sel{border-color:var(--primary);background:#eff6ff;box-shadow:0 0 0 2px rgba(37,99,235,.14)}
.ppage-item-main{flex:1;min-width:0;font-size:15px;color:var(--text);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ppage-item-cat{flex-shrink:0;font-size:11.5px;color:var(--muted);background:#f1f5f9;padding:2px 8px;
  border-radius:6px}
.ppage-item.sel .ppage-item-cat{background:#dbeafe;color:#1d4ed8}
.ppage-item-meta{flex-basis:100%;font-size:12px;color:var(--faint)}
.ppage-empty{padding:50px 20px;text-align:center;color:var(--muted);font-size:14px;line-height:1.9}
.ppage-more{padding:6px 4px 0;font-size:12px;color:var(--faint);text-align:center}

/* 底部操作条 */
.ppage-foot{flex-shrink:0;display:flex;gap:10px;padding:10px 14px;background:#fff;
  border-top:1px solid #e2e8f0;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.ppage-foot .btn{flex:1;justify-content:center;min-height:44px;font-size:15px}
.ppage-foot .btn:disabled{opacity:.45;cursor:not-allowed}

/* 第 2 步：已选产品卡片（只读展示 + 重新选择） */
.picked-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#eff6ff;
  border:1px solid #bfdbfe;border-radius:12px;margin-bottom:16px}
.picked-main{flex:1;min-width:0}
.picked-name{font-size:15px;font-weight:600;color:#1e3a8a;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.picked-cat{font-size:12px;color:#3b82f6;margin-top:2px}
.picked-card .btn{flex-shrink:0}

/* ============================================================
   软键盘弹起时的适配（企微/手机）
   ------------------------------------------------------------
   ⚠️ 软键盘会盖住页面底部 → 固定在底部的「确定/取消」条点不到。
      JS 检测到键盘弹起（body.kb-up）→ 这里让底部条跟着可视区上移。
   ============================================================ */
body.kb-up .ppage-foot,
body.kb-up .modal-foot{
  position:sticky;bottom:0;z-index:2}
body.kb-up .mnav{display:none}          /* 底部导航会跟键盘打架，先让位 */
body.kb-up .ppage-list,
body.kb-up .modal-body{padding-bottom:12px}

/* —— 企微内的细节修正 —— */
/* ① iOS/企微 点击输入框会放大页面（font-size<16px 触发）→ 输入类统一 16px */
body[data-env="wecom"] input:not([type="checkbox"]):not([type="radio"]),
body[data-env="wecom"] select,
body[data-env="wecom"] textarea{font-size:16px}
/* ② 长按选中弹菜单（图片/文字）会打断操作 → 禁掉图片和按钮的长按菜单 */
body[data-env="wecom"] img{-webkit-touch-callout:none;user-select:none}
body[data-env="wecom"] .btn{-webkit-touch-callout:none}
/* ③ 滚动到底不要「橡皮筋」把整个应用拉下来 */
body[data-env="wecom"] .content,
body[data-env="wecom"] .modal-body,
body[data-env="wecom"] .ppage-list{overscroll-behavior:contain}
/* ④ 企微 PC 客户端：内容区不要留出手机端的底部导航空隙 */
body[data-env="desktop"] .mnav{display:none}