/* 招商系统专属样式。
   原则：通用组件（卡片/表格/标签/开关/设置页/权限页/监控页/消息页）一律用 base.css 里
   生产系统的现成类，本文件只保留生产没有对应物、且招商业务确实需要的几个组件。
   颜色一律走令牌，不写死色值。 */

/* ── 视图容器：与生产的 #view-* 同构 ── */
#view-lead, #view-trip, #view-boardview, #view-notify,
#view-system, #view-perms, #view-dbview, #view-settings {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ── 页面工具条 ── */
.pgbar {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top-color: var(--hair);
  box-shadow: var(--shadow-1);
  border-radius: var(--r-lg);
  padding: var(--sp-2) var(--sp-3);
}
.pgbar .sum { font-size: var(--fs-sm); color: var(--text-2); }
.pgbar .sum b { color: var(--text); font-size: var(--fs-lg); }
.pgbar .grow { flex: 1 1 auto; }

/* ── 状态标签：几何与字色由 base.css 的 .tag 提供（与生产逐字一致），这里只补招商独有的色档 ──
   ⚠ 不要在这里重新定义裸 `.tag`：那会覆盖生产样式（几何/字色/对齐全跑偏）。
     2026-10-17 审计时删掉过一条自己写的 `.tag{}`（照 .pill 抄的，不是照 .tag），特此留痕。 */
.tag.blue { background: var(--accent-soft); color: var(--accent-text); }
.tag.green { background: var(--ok-soft); color: var(--good); }
.tag.red { background: var(--ba-soft); color: var(--bad); }
.tag.warn { background: var(--wa-soft); color: var(--warn); }

/* ── 列表容器（卡片自带 margin，容器不再加 gap） ── */
.lead-list { display: block; }

/* ── 详情里的键值行 ──
   ⚠ 类名用 `.fms-kv` 而**不是** `.kv`：base.css 里已有一条 `.kv{display:flex;flex-direction:column}`，
     那是生产「字段块」的用法（键值上下堆叠）。招商这里的 DOM 是键值**成对交替**
     （`<span class="k">城市</span><span class="v">山东省…</span>`），需要左右两列；
     若沿用 `.kv` 就是覆盖生产样式，且布局会被压成一列。故改用独立类名，互不干扰。 */
.fms-kv { display: grid; grid-template-columns: 96px 1fr; gap: 6px var(--sp-3); font-size: var(--fs-sm); }
.fms-kv .k { color: var(--muted); }
.fms-kv .v { color: var(--text); word-break: break-word; }

/* ── 跟进 / 拜访记录条目 ── */
.follow-item {
  border-left: 3px solid var(--accent);
  background: var(--panel2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
}
.follow-item .hd { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 3px; }
.follow-item .tx { font-size: var(--fs-sm); line-height: 1.7; color: var(--text); white-space: pre-wrap; }

/* ── 行程步骤条 ── */
.steps { display: flex; flex-direction: column; gap: var(--sp-2); }
.step {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3); background: var(--panel);
}
.step.arrived { border-color: var(--accent); }
.step.done { opacity: .72; }
.step .sh { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.step .city { font-size: var(--fs-md); font-weight: 600; }
.step .sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }

/* ── 打卡大按钮（手机端主要动作） ── */
.checkin-bar { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.btn-checkin { min-height: 44px; padding: 0 var(--sp-5); font-size: var(--fs-md); font-weight: 600; }

/* ── 卡片内的节标题：与生产看板面板标题同形（无蓝竖条） ── */
.sect-h {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-3);
  letter-spacing: -.01em;
}

/* ── 商机漏斗 ── */
.funnel-row { display: flex; align-items: center; gap: var(--sp-3); padding: 9px 0; border-bottom: 1px solid var(--border); }
.funnel-row:last-child { border-bottom: none; }
.funnel-row .nm { width: 64px; font-size: var(--fs-sm); color: var(--text-2); }
.funnel-row .bar { flex: 1; height: 8px; background: var(--chip); border-radius: var(--r-pill); overflow: hidden; }
.funnel-row .bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }
.funnel-row .nu { width: 44px; text-align: right; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* ── 弹层内部（.sheet 已提供白底/圆角/内边距） ── */
.dlg-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-3);
}
.dlg-head .close {
  border: none; background: transparent; color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.dlg-head .close:hover { background: var(--chip); color: var(--text); }
.dlg-body { display: flex; flex-direction: column; gap: var(--sp-2); }

/* 生产 #detailBody / #modalBody 在大屏是两列 grid；招商详情是单列，头部与正文各跨满整行 */
#detailBody > .dlg-head { grid-column: 1 / -1; grid-row: 1; }
#detailBody > .dlg-body { grid-column: 1 / -1; grid-row: 2; }
#modalBody  > .dlg-head { grid-column: 1 / -1; grid-row: 1; }
#modalBody  > .dlg-body { grid-column: 1 / -1; grid-row: 2; }

/* ── 表单栅格 ── */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }
.form-grid .full { grid-column: 1 / -1; }
.fld { display: flex; flex-direction: column; gap: 5px; }
.fld label { font-size: var(--fs-xs); color: var(--text-2); }
.fld label .req { color: var(--req); margin-left: 2px; }
.fld input, .fld select, .fld textarea {
  width: 100%; box-sizing: border-box;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  padding: 8px 10px; font-family: inherit; font-size: var(--fs-sm);
  min-height: 38px;
}
.fld textarea { min-height: 84px; resize: vertical; line-height: 1.7; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
.fld .hint { font-size: var(--fs-xs); color: var(--muted); }

/* ── 客户选择器 ── */
.pick-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow-y: auto; padding: 2px; }
.pick-item {
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 6px 12px; font-size: var(--fs-sm); cursor: pointer;
  background: var(--panel2); color: var(--text-2); min-height: 32px;
  display: inline-flex; align-items: center;
}
.pick-item.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }

/* ── 空状态（小尺寸） ── */
.empty-sm { padding: var(--sp-5) var(--sp-3); text-align: center; color: var(--muted); font-size: var(--fs-sm); }

/* ── 移动端 ── */
@media (max-width: 820px) {
  html, body { overflow-x: hidden; }
  main, .content, .pgbar, .lead-list, .steps, .step, .card { min-width: 0; max-width: 100%; }
  main { padding: var(--sp-2); }
  .fms-kv { grid-template-columns: 78px 1fr; }
  .pgbar { padding: var(--sp-2); gap: var(--sp-2); }
  .pgbar .sum { flex: 1 1 100%; }
  .seg { flex-wrap: wrap; max-width: 100%; }
  .btn-checkin { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .dlg-head { gap: var(--sp-2); }
}

/* ── 我的消息 ─────────────────────────────────────────────
   结构与空态照考核系统；这条补的是考核 `.pm-empty,.mgr-empty,.nt-sec-empty`
   合并规则里的两行（display/line-height），base.css 是生产那份、没有这条别名。 */
.nt-sec-empty { display: inline-block; line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════
   监管看板 · 三版布局（核对用）
   所有类名以 bl- 开头，只作用于 #view-boardview。
   选定一版后，删掉另外两版的 CSS 与 JS 即可。
   ══════════════════════════════════════════════════════════════ */

/* 布局开关 */
.bl-switch {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: 8px 10px; margin-bottom: 12px;
}
.bl-switch .lb { font-size: var(--fs-xs); color: var(--muted); margin-right: 2px; }
.bl-switch button {
  height: 28px; padding: 0 11px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: var(--panel);
  color: var(--text-2); font: inherit; font-size: var(--fs-xs); cursor: pointer;
}
.bl-switch button:hover { border-color: var(--accent); color: var(--accent-text); }
.bl-switch button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.bl-switch .tip { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }

/* 通用两栏 */
.bl-2col { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: 12px; align-items: start; }
.bl-col { min-width: 0; }
.bl-col .card:last-child { margin-bottom: 0; }
.bl-sub { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; margin-left: 6px; }
.bl-note { font-size: var(--fs-xs); color: var(--muted); line-height: 1.7; margin-top: 8px; }
.bl-td-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }

/* A · 5 列指标 */
#view-boardview .kpi.bl-kpi5 { grid-template-columns: repeat(5, minmax(0,1fr)); }

/* A · 漏斗 */
.bl-fn { display: flex; flex-direction: column; gap: 9px; }
.bl-fn-row {
  display: grid; grid-template-columns: 56px minmax(0,1fr) 34px 74px;
  align-items: center; gap: 10px; cursor: pointer; border-radius: var(--r-sm); padding: 2px 4px;
}
.bl-fn-row:hover { background: var(--panel2); }
.bl-fn-row .nm { font-size: var(--fs-sm); color: var(--text-2); }
.bl-fn-row .bar { height: 20px; border-radius: 5px; background: var(--panel2); overflow: hidden; }
.bl-fn-row .bar i { display: block; height: 100%; border-radius: 5px; background: var(--accent); opacity: .8; }
.bl-fn-row .bar i.warn { background: var(--warn); }
.bl-fn-row .nu { font-size: var(--fs-sm); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.bl-fn-row .dy { font-size: var(--fs-xs); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.bl-fn-row .dy.bad { color: var(--bad); }

/* A · 待办 */
.bl-todos { display: flex; flex-direction: column; gap: 8px; }
.bl-todo {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 11px; border-radius: var(--r-md);
  background: var(--panel2); border: 1px solid transparent;
}
.bl-todo:hover { border-color: var(--border-strong); }
.bl-todo.bad { background: var(--ba-soft); border-color: var(--line-bad); }
.bl-todo.warn { background: var(--wa-soft); border-color: var(--line-warn); }
.bl-todo .b { flex: 1; min-width: 0; }
.bl-todo .t { font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; }
.bl-todo .s { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.bl-todo .go { font-size: var(--fs-xs); color: var(--accent-text); flex: 0 0 auto; }

/* B · 今日条 */
.bl-today {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: 12px 15px; margin-bottom: 12px;
}
.bl-today .d b { font-size: var(--fs-lg); font-weight: 600; margin-right: 8px; }
.bl-today .d span { font-size: var(--fs-xs); color: var(--muted); }
.bl-today .sp { flex: 1; }
.bl-today .mini { display: flex; gap: 18px; }
.bl-today .mini div { text-align: right; }
.bl-today .mini b { display: block; font-size: var(--fs-lg); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.bl-today .mini b.bad { color: var(--bad); }
.bl-today .mini span { font-size: 11px; color: var(--muted); }

/* B · 队列 */
.bl-grp { display: flex; align-items: center; gap: 7px; margin: 12px 0 7px; }
.bl-grp:first-of-type { margin-top: 2px; }
.bl-grp span { font-size: var(--fs-sm); font-weight: 600; }
.bl-grp span.bad { color: var(--bad); }
.bl-grp span.warn { color: var(--warn); }
.bl-grp i {
  font-style: normal; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; background: var(--chip); color: var(--muted);
}
.bl-task {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: var(--r-md); margin-bottom: 7px;
  background: var(--panel); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
}
.bl-task.bad { border-left-color: var(--bad); }
.bl-task.warn { border-left-color: var(--warn); }
.bl-task .b { flex: 1; min-width: 0; }
.bl-task .t { font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; }
.bl-task .s { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }

/* B · 行程卡 */
.bl-trip .city { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.01em; }
.bl-trip .city span { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; margin-left: 8px; }
.bl-trip .line { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.bl-trip .bar { flex: 1; height: 6px; border-radius: 3px; background: var(--panel2); overflow: hidden; }
.bl-trip .bar i { display: block; height: 100%; background: var(--accent); }
.bl-trip .tx { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.bl-trip .st { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 10px; }

/* B · 数字 */
.bl-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bl-nums b { display: block; font-size: var(--fs-2xl); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bl-nums b.bad { color: var(--bad); }
.bl-nums span { font-size: var(--fs-xs); color: var(--muted); }

/* C · 顶部条 */
.bl-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.bl-strip .sc {
  flex: 1 1 160px; display: flex; align-items: baseline; gap: 9px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: 11px 14px;
}
.bl-strip .sc b { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bl-strip .sc b.bad { color: var(--bad); }
.bl-strip .sc b.warn { color: var(--warn); }
.bl-strip .sc span { font-size: var(--fs-xs); color: var(--muted); }

/* C · 看板 */
.bl-board { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; align-items: start; }
.bl-col-card { background: var(--panel2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 8px; min-width: 0; }
.bl-col-card.alert { border-color: var(--line-bad); }
.bl-col-card .h { display: flex; align-items: center; gap: 6px; padding: 3px 5px 8px; border-bottom: 1px solid var(--border); margin-bottom: 7px; }
.bl-col-card .h .n { font-size: var(--fs-sm); font-weight: 600; }
.bl-col-card .h .c {
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; background: var(--chip); color: var(--muted);
}
.bl-col-card .h .over { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--bad); }
.bl-col-card .h .ok { margin-left: auto; font-size: 11px; color: var(--muted); }
.bl-col-card .lk { display: flex; flex-direction: column; gap: 6px; }
.bl-col-card .kd {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 8px 9px; cursor: pointer;
}
.bl-col-card .kd:hover { border-color: var(--border-strong); }
.bl-col-card .kd.warn { border-color: var(--line-warn); }
.bl-col-card .kd.stale { border-color: var(--line-bad); background: linear-gradient(180deg, var(--ba-soft), var(--panel) 60%); }
.bl-col-card .kd .nm { font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; }
.bl-col-card .kd .mt { font-size: 11px; color: var(--muted); margin-top: 2px; }
.bl-col-card .kd .nx {
  display: flex; align-items: center; gap: 5px; margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--border); font-size: 11px; color: var(--text-2);
}
.bl-col-card .kd .nx i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.bl-col-card .kd.stale .nx i { background: var(--bad); }
.bl-empty-col { text-align: center; font-size: 11px; color: var(--muted); padding: 14px 4px; }

@media (max-width: 1100px) {
  .bl-2col { grid-template-columns: 1fr; }
  .bl-board { grid-template-columns: repeat(3, minmax(0,1fr)); }
  #view-boardview .kpi.bl-kpi5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .bl-switch .tip { display: none; }
  .bl-today .mini { width: 100%; justify-content: space-between; }
  .bl-fn-row { grid-template-columns: 46px minmax(0,1fr) 30px; }
  .bl-fn-row .dy { display: none; }
  .bl-task { flex-wrap: wrap; }
  .bl-task .btn { width: 100%; justify-content: center; }
  .bl-board { display: flex; overflow-x: auto; padding-bottom: 6px; }
  .bl-col-card { flex: 0 0 76%; }
  #view-boardview .kpi.bl-kpi5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ══════════════════════════════════════════════════════════════════
   2026-10-17 布局定版（选型：客户 C / 出差 A·B·C 拆三页 / 看板 A + 待办）
   ------------------------------------------------------------------
   这些是「页面骨架」，不是新皮肤：颜色、圆角、字号、间距全部取 base.css
   的令牌；卡片、胶囊、按钮、表格仍用系统组件。命名前缀：
     ld-c-*  意向客户 · 主从双栏
     tp-a-*  出差审批 · 状态分组 + 四步进度
     tp-b-*  出差管理 · 三周排期甘特
     tp-c-*  出差汇报 · 行程驾驶舱
   ══════════════════════════════════════════════════════════════════ */

/* ── 意向客户 · 筛选条（`.fbar panel`）───────────────────────────────
   逐条照抄 base.css 的 `:is(#view-dashboard,#view-perf) .fbar` 那一套（生产系统
   订单数据页 / 人效页同款），**只把作用域换成 `#view-lead`**。
   ⚠ base.css 是生产 `<style>` 块的逐字副本、一个字都不动；招商独有的页面样式一律进本文件。
   ⚠ **不要**抄日期框那几条（`.filter-date-group` / `input[type=date]`）：本页没有日期筛选。
   ⚠ 全局有 `input,select,textarea{width:100%;min-height:44px}`，不显式收回就会被撑成
     「一项一行」—— 下面 select/input 那条就是为这个。                                   */
#view-lead .fbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:10px 13px;
  margin-bottom:12px;border-radius:var(--r-lg);--h-ctl:30px}
#view-lead .fbar .fl{font-size:12px;color:var(--hint);white-space:nowrap}
#view-lead .fbar select,#view-lead .fbar input{height:30px;width:auto;min-height:0;
  border-radius:var(--r-md);background-color:var(--m-ultra);border:1px solid var(--edge);
  color:var(--text);font-size:12.5px;padding:0 10px;box-shadow:none}
/* 搜索框宽度：生产的 `input#dKeyword` 只有 132px —— 那是"辅助条件"（一行里还挤着
   类型/品牌/两个日期框）。本页它是**主搜索**（名称 / 编码 / 联系人 / 电话四路模糊），
   且是唯一一个非胶囊条件，所以：
     · `flex:1 1 220px` → 吃掉胶囊组与右侧按钮组之间的余量，视觉上成为这一排的主体；
     · `max-width:360px` → 不无限撑满（否则整排只剩一个大输入框、按钮被推到最右，
       中间大片空白，与生产的密度语言不一致）；
     · `min-width:0` → 窄屏可收缩（默认 min-width:auto 会被 placeholder 撑住）。
   实测（本地 8200，逐视口量 box）：
     1440/1280 → 360px；1000/900 → 360/302px；768 → 360px；640 → 272px；420 → 360px；
     375 → 331px。即"始终 ≥ 272px、不超过 360px、都比下拉框（92px）宽"。
   placeholder「搜名称 / 编码 / 联系人 / 电话」实测宽 **163.2px**（12.5px 字号）+
   两侧各 10px 内边距 ≈ 183px ⇒ 即便收到 220px 也不截字（≤820 断点字号抬到 16px 时
   实测 208.9px，仍放得下）。 */
#view-lead .fbar input#leadKw{flex:1 1 220px;min-width:0;max-width:360px}
#view-lead .fbar select:focus,#view-lead .fbar input:focus{outline:none;
  border-color:var(--accent);box-shadow:var(--focus-ring)}
#view-lead .fbar .seg{display:inline-flex;background-color:var(--m-ultra);
  border:1px solid var(--edge);border-radius:var(--r-pill);padding:2px}
#view-lead .fbar .seg button{border:0;background:none;color:var(--muted);font-size:12px;
  padding:5px 12px;border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;transition:.15s}
#view-lead .fbar .seg button.on{background-color:var(--accent);color:#fff;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26)}
#view-lead .fbar .sp{margin-left:auto;display:flex;gap:8px;align-items:center}
/* 筛选条内的按钮并入 **30px 紧凑档**（与上面 input/select 同高）。
   出处：base.css:1878 那一组 `:is(#view-dashboard,#view-perf) .fbar .btn` 只覆盖生产那两页；
   本页必须自己写一条，否则 `.btn-sm`（28px）会比 30px 控件矮 2px、一排里基线不齐。 */
#view-lead .fbar .btn{height:var(--h-dense);padding:0 var(--sp-3) 1.0px;font-size:var(--fs-xs);
  border-radius:var(--r-sm)}
/* 本页视图容器是 `display:flex;flex-direction:column;gap:12px`（见本文件开头），
   `.fbar` 自带的 `margin-bottom:12px` 会与 gap 叠加成 **24px**（生产是 12px）。
   这里是招商独有的容器结构差异 ⇒ 收回 0，节奏与生产一致。 */
#view-lead .fbar{margin-bottom:0}
@media (max-width:1100px){
  #view-lead .fbar .sp{margin-left:0;width:100%;justify-content:flex-end}
}

/* ── 意向客户 · 主从双栏 ─────────────────────────────────────────── */
.ld-c-wrap {
  display: grid; grid-template-columns: 286px minmax(0, 1fr);
  gap: var(--sp-3); align-items: start;
}
.ld-c-sidecard { padding: 8px !important; margin: 0 !important; }
.ld-c-side { max-height: calc(100vh - 230px); overflow: auto; padding-right: 2px; }
.ld-c-item {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 9px; border-radius: var(--r-sm); margin-bottom: 3px;
  border-left: 3px solid transparent; background: var(--panel2);
}
.ld-c-item:hover { background: var(--chip); }
.ld-c-item.on { background: var(--accent-soft); border-left-color: var(--accent); }
.ld-c-item .b { flex: 1; min-width: 0; }
.ld-c-item .n {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ld-c-item .s { font-size: 11px; color: var(--muted); margin-top: 1px; }
.ld-c-item .d {
  font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--muted); flex: 0 0 auto;
}
.ld-c-item .d.bad { color: var(--bad); font-weight: 600; }
.ld-c-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ld-c-head .h { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; }
.ld-c-kv {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px; margin-top: 4px;
}
.ld-c-kv .r {
  display: flex; gap: 8px; align-items: baseline;
  padding: 5px 0; border-bottom: 1px solid var(--border);
}
.ld-c-kv .k { flex: 0 0 76px; font-size: var(--fs-xs); color: var(--muted); }
.ld-c-kv .v { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--text); word-break: break-word; }
.ld-c-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ld-c-stat { background: var(--panel2); border-radius: var(--r-md); padding: 8px 10px; }
.ld-c-stat b {
  display: block; font-size: var(--fs-lg); font-weight: 700;
  line-height: 1.2; font-variant-numeric: tabular-nums;
}
.ld-c-stat b.bad { color: var(--bad); }
.ld-c-stat span { font-size: 11px; color: var(--muted); }
.ld-c-tl { border-left: 2px solid var(--border-strong); padding-left: 12px; margin-top: 4px; }
.ld-c-tl-it { position: relative; padding: 4px 0 8px; }
.ld-c-tl-it::before {
  content: ''; position: absolute; left: -17px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.ld-c-tl-it .t { font-size: var(--fs-sm); color: var(--text); }
.ld-c-tl-it .s { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.6; }

/* ── 出差审批 · 状态分组 + 四步进度 ─────────────────────────────── */
.tp-a-group { margin-bottom: 4px; }
.tp-a-gh {
  display: flex; align-items: center; gap: 8px; margin: 12px 0 7px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
}
.tp-a-gh:first-child { margin-top: 0; }
.tp-a-gh .n {
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; background: var(--chip); color: var(--text-2);
}
.tp-a-gh .hint { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; margin-left: 2px; }
.tp-a-row {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 11px 13px; margin-bottom: 8px; cursor: pointer;
}
.tp-a-row:hover { border-color: var(--border-strong); }
.tp-a-row.alert { border-color: var(--line-bad); }
.tp-a-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tp-a-top .code { font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.tp-a-top .who { font-size: var(--fs-sm); color: var(--text-2); }
.tp-a-top .r { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }
.tp-steps { display: flex; align-items: center; margin-top: 11px; }
.tp-step {
  display: flex; align-items: center; gap: 5px; flex: 1 1 auto;
  font-size: 11px; color: var(--muted);
}
.tp-step:last-child { flex: 0 0 auto; }
.tp-step .d {
  width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid var(--border-strong); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; line-height: 1; color: transparent;
}
.tp-step .ln { flex: 1 1 auto; height: 1px; background: var(--border-strong); margin: 0 6px; min-width: 14px; }
.tp-step:last-child .ln { display: none; }
.tp-step.done { color: var(--text-2); }
.tp-step.done .d { background: var(--good); border-color: var(--good); color: var(--on-accent); }
.tp-step.now { color: var(--text); font-weight: 600; }
.tp-step.now .d { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); font-weight: 700; }
.tp-step.bad { color: var(--bad); font-weight: 600; }
.tp-step.bad .d { border-color: var(--bad); background: var(--ba-soft); color: var(--bad); }
.tp-a-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }

/* ── 出差管理 · 三周排期甘特 ─────────────────────────────────────── */
.tp-b-legend {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 9px;
  font-size: var(--fs-xs); color: var(--muted);
}
.tp-b-legend i {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 5px; vertical-align: -1px;
}
.tp-b-scroll { overflow-x: auto; padding-bottom: 4px; }
.tp-b-grid {
  display: grid; grid-template-columns: 76px repeat(21, minmax(46px, 1fr));
  gap: 3px; min-width: 860px;
}
.tp-b-h {
  font-size: 10px; color: var(--muted); text-align: center; line-height: 1.35;
  padding: 3px 0; border-bottom: 1px solid var(--border);
}
.tp-b-h b { display: block; font-size: 11px; color: var(--text-2); font-weight: 600; }
.tp-b-h.today { background: var(--accent-soft); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.tp-b-h.today b { color: var(--accent-text); }
.tp-b-h.we { color: var(--hint); }
.tp-b-who {
  display: flex; align-items: center; font-size: var(--fs-xs);
  color: var(--text-2); font-weight: 600; padding-left: 2px; white-space: nowrap;
}
.tp-b-cell { border-radius: 4px; background: var(--panel2); min-height: 32px; }
.tp-b-cell.today { background: var(--accent-soft); }
.tp-b-block {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 8px; border-radius: 6px; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--on-accent); overflow: hidden; white-space: nowrap;
}
.tp-b-block.executing { background: var(--accent); }
.tp-b-block.pending { background: var(--warn); }
.tp-b-block.finished { background: var(--border-strong); color: var(--text-2); }
.tp-b-block.rejected { background: var(--bad); }

/* ── 出差汇报 · 行程驾驶舱 ───────────────────────────────────────── */
.tp-c-wrap {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--sp-3); align-items: start;
}
.tp-c-sidecard { padding: 8px !important; margin: 0 !important; }
.tp-c-side { max-height: calc(100vh - 230px); overflow: auto; }
.tp-c-item {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 10px; border-radius: var(--r-sm); margin-bottom: 4px;
  background: var(--panel2); border-left: 3px solid transparent;
}
.tp-c-item:hover { background: var(--chip); }
.tp-c-item.on { background: var(--accent-soft); border-left-color: var(--accent); }
.tp-c-item .b { flex: 1; min-width: 0; }
.tp-c-item .c { font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.tp-c-item .s { font-size: 11px; color: var(--muted); margin-top: 1px; }
.tp-c-hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tp-c-hd .t { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; }
.tp-c-hd .r { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }
.tp-c-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.tp-c-k { background: var(--panel2); border-radius: var(--r-md); padding: 9px 11px; }
.tp-c-k b {
  display: block; font-size: var(--fs-xl); font-weight: 700;
  line-height: 1.2; font-variant-numeric: tabular-nums;
}
.tp-c-k b.bad { color: var(--bad); }
.tp-c-k b.warn { color: var(--warn); }
.tp-c-k span { font-size: 11px; color: var(--muted); }
.tp-c-rail { margin-top: 12px; }
.tp-c-stop {
  display: grid; grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px; padding-bottom: 12px; position: relative;
}
.tp-c-stop::before {
  content: ''; position: absolute; left: 10px; top: 22px; bottom: 0;
  width: 1px; background: var(--border-strong);
}
.tp-c-stop:last-child::before { display: none; }
.tp-c-dot {
  width: 21px; height: 21px; border-radius: 50%; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--chip); color: var(--text-2); border: 1.5px solid var(--border-strong);
}
.tp-c-stop.arrived .tp-c-dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tp-c-stop.left .tp-c-dot { background: var(--good); border-color: var(--good); color: var(--on-accent); }
.tp-c-stop .h {
  font-size: var(--fs-sm); font-weight: 600;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.tp-c-stop .l { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; line-height: 1.7; }
.tp-c-gate {
  margin-top: 6px; font-size: var(--fs-xs); padding: 6px 9px; border-radius: var(--r-sm);
  background: var(--wa-soft); color: var(--warn); line-height: 1.55;
}
.tp-c-gate.bad { background: var(--ba-soft); color: var(--bad); }
.tp-c-daily {
  font-size: var(--fs-xs); color: var(--text-2); line-height: 1.75;
  background: var(--panel2); border-radius: var(--r-md); padding: 9px 11px; margin-bottom: 6px;
}

/* ── 响应式：窄屏退化 ────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .ld-c-wrap, .tp-c-wrap { grid-template-columns: 1fr; }
  .ld-c-side, .tp-c-side { max-height: 240px; }
  .ld-c-kv { grid-template-columns: 1fr; }
  .ld-c-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .tp-c-kpi { grid-template-columns: 1fr 1fr; }
  .tp-b-grid { min-width: 760px; }
  .tp-a-top .r { margin-left: 0; width: 100%; }
  .tp-step { font-size: 10px; }
}

/* 待办条目的说明可能是长文本（异常原因是自由输入），限两行，
   别把「处理 ›」挤出卡片。这是布局修补，不改视觉语言。 */
.bl-todo .b { min-width: 0; }
.bl-todo .s {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.bl-todo .go { white-space: nowrap; }
.bl-task .b { min-width: 0; }
.bl-task .btn { flex: 0 0 auto; }

/* 移动端底部导航最多 5 项，其余收进「更多」。
   setupMobileNav() 会给第 6 项起加 .mobile-extra，但 base.css 里没有对应的隐藏规则
   （原来只有 9 个导航项，挤一挤还能用；这次加到 11 项后必须补上）。 */
@media (max-width: 820px) {
  .sidenav nav button.mobile-extra { display: none; }
}

/* ── 语义色补充：生产令牌里没有「警示描边」这一档 ────────────────
   卡片需要 1px 的红/黄描边来标出异常，但 --bad / --warn 是纯色，
   直接描边太重。这里从 --bad / --warn 派生两个半透明描边色，
   统一命名，避免各处散落 rgba 字面量。 */
:root {
  --line-bad: rgba(194, 53, 47, .34);
  --line-warn: rgba(192, 125, 18, .34);
}

/* 甘特块补齐两个漏掉的状态：
   approved（已批准待出发）原来没有任何背景色，块在页面上是隐形的——
   DOM 里存在、也能挡住点击，但用户看不见，等于没画。 */
.tp-b-block.approved { background: var(--good); }
.tp-b-block.draft { background: var(--border-strong); color: var(--text-2); opacity: .75; }

/* ══════════════════════════════════════════════════════════════════════
   紧凑指标条 .kstrip（意向客户 5 格 / 出差审批·出差管理·出差汇报 各 3 格）
   ----------------------------------------------------------------------
   ★ 逐条照抄 base.css 的 `.kstrip` 规则（base.css:3690-3754「── ① 紧凑指标条 ──」
     整段 + 3863-3885 两处响应式断点 + 4125-4129 窄屏免溢出），
     **只把作用域 `:is(#view-dashboard,#view-perf)` 换成招商的四个页面**
     `:is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport)`，
     列数按页分别定义（生产就是这么做的：数据页 5 列 / 人效页 3 列）。
     ⚠ base.css 是生产 <style> 块的逐字副本，本文件一个字都不动；
       招商页面不匹配 `:is(#view-dashboard,#view-perf)` ⇒ 必须在这里补一份。
     ⚠ 只抄确实存在的规则，不自己发明；「招商自有」的两条另起注释标明。
   ══════════════════════════════════════════════════════════════════════ */
:is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip{display:grid;gap:0;grid-auto-rows:1fr;margin-bottom:12px;
  border-radius:var(--r-lg);background-color:var(--panel2);border:1px solid var(--edge);overflow:hidden;
  box-shadow:0 30px 74px -36px var(--lift),0 2px 6px rgba(0,0,0,.22),inset 0 1px 0 var(--rim-side)}
/* 列数按页定义（生产：#view-dashboard 5 列 / #view-perf 3 列；这里 5/3/3/3） */
#view-lead .kstrip{grid-template-columns:repeat(5,minmax(0,1fr))}
#view-tripapprove .kstrip,
#view-trip .kstrip,
#view-tripreport .kstrip{grid-template-columns:repeat(3,minmax(0,1fr))}
:is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip .c{display:flex;flex-direction:column;gap:8px;padding:14px 16px;transition:.15s}
/* 只有真正能点的格子才给手型 / hover（[onclick] 只出现在有下钻的格子上） */
:is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip .c[onclick]{cursor:pointer}
:is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip .c+.c{border-left:1px solid var(--edge)}
:is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip .c[onclick]:hover{background:var(--m-ultra)}
/* 浅色主题：底色换 --panel（--panel2 在浅色下比卡片暗 = 卡片发灰），
   分隔线换 --border（--edge 在浅色下是白 85%，白底白线等于隐形）。只改浅色。 */
html[data-theme="light"] :is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip{background-color:var(--panel);border-color:var(--border)}
html[data-theme="light"] :is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip .c+.c{border-left-color:var(--border)}
html[data-theme="light"] :is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip .c:nth-child(n+3){border-top-color:var(--border)}
html[data-theme="light"] :is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip .c[onclick]:hover{background:var(--panel2)}
:is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip .cap{font-size:12px;color:var(--hint);white-space:nowrap}
/* 数值与说明同一行、两端对齐：数值占左端、说明贴右端 ⇒ 横向铺满 */
:is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip .row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
:is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip .v{font-size:var(--fs-display);font-weight:700;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
:is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip .v.r{color:var(--bad)}
:is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip .v.g{color:var(--good)}
:is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip .v.m{color:var(--muted)}
/* 窄屏 2 列时，奇数个格子的最后一个跨满整行（格子数不变、没有空槽；跨满那格不吃左边框） */
@media (max-width:1100px){
  :is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip>.c:last-child:nth-child(odd){grid-column:1/-1;border-left:0}
}
/* 视口 ≤1100 / ≤600 一律折成 2 列，行间补横线（与生产同一套降级规则） */
@media (max-width:1100px){
  :is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip .c:nth-child(3){border-left:0}
  :is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip .c:nth-child(n+3){border-top:1px solid var(--edge)}
}
@media (max-width:600px){
  :is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip .c:nth-child(3){border-left:0}
  :is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip .c:nth-child(n+3){border-top:1px solid var(--edge)}
}
/* 窄屏零横向溢出：格子自身的 min-width 收回（flex 子项默认 min-width:auto），放不下时换行 */
@media (max-width:820px){
  :is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip .c{min-width:0}
  :is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .kstrip .row{flex-wrap:wrap;min-width:0}
}

/* ── 以下两条是**招商自有**（base.css 里没有对应规则，不是抄来的）──────────
   ① 招商的 #view-lead / #view-trip 是 `display:flex;flex-direction:column;gap:12px`
     （见本文件开头），`.kstrip` 自带的 `margin-bottom:12px` 会与 gap 叠加成 24px
     （生产是 12px）⇒ 收回 0。（同一处理先例：`#view-lead .fbar{margin-bottom:0}`）
     #view-tripapprove / #view-tripreport 不在那个 flex 列表里（块级流），
     `.pgbar` 没有下边距 ⇒ 这两页反过来给 kstrip 补上边距 12px。 */
#view-lead .kstrip,#view-trip .kstrip{margin-bottom:0}
#view-tripapprove .kstrip,#view-tripreport .kstrip{margin-top:12px}

/* ② 下钻选中态：格子当前对应着「正在看的子集」时加一圈 accent 描边 + 标签变色。
     ⚠ 只描边不动底色：底色的 hover 规则在 base.css 里 specificity 更高，
       用 !important 能压过但它会连带压掉 hover 反馈；描边没有任何规则争用，天然安全。 */
:is(#view-lead,#view-trip) .kstrip .c.on{box-shadow:inset 0 0 0 1px var(--accent)}
:is(#view-lead,#view-trip) .kstrip .c.on .cap{color:var(--accent-text);font-weight:600}

/* ── 出差管理：甘特被统计卡筛过时的说明条 ─────────────────────────── */
.tp-b-filter{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px;
  font-size:var(--fs-xs);color:var(--muted)}
.tp-b-filter .btn{margin-left:auto}

/* ── 出差审批：从统计卡跳到分组后，分组标题闪一下（1.2s 后由 JS 移除 .tp-a-flash）── */
.tp-a-group.tp-a-flash>.tp-a-gh{background:var(--accent-soft);border-radius:var(--r-sm);padding:2px 6px;margin-left:-6px}

/* ── 页头工具条「去卡片化」（招商自有，只作用于这四页）──────────────────
   文字统计行搬进 `.kstrip` 之后，`.pgbar` 里只剩「新建客户 / 申请出差」按钮、
   或一句小灰提示 —— 再套一层卡片就是一块 46px 高的**空白白卡**，紧贴下面那张
   统计卡，两块并排白卡（截图实测：`#view-lead` 的 pgbar top=78 h=46，内容只有右侧一个按钮）。
   ⇒ 去掉卡片外观、只留动作行，DOM 结构不变（`.pgbar` 仍在、按钮 id/onclick 未动）。
   基线的卡片外观由 extra.css 顶部那条 `.pgbar` 提供，这里按页覆盖。 */
:is(#view-lead,#view-tripapprove,#view-trip,#view-tripreport) .pgbar{
  background:transparent;border:0;box-shadow:none;border-radius:0;padding:0;
  min-height:var(--h-dense);align-items:center}