/* ==========================================================================
   仕必达 CRM · 方向B「森屿自然生机」换肤层
   --------------------------------------------------------------------------
   设计交付：仕必达CRM_核心页UI升级开发交付包_方向B_20261012.docx
   - 本文件置于 bootstrap / style.css / redesign_v1.css 之后加载，用于覆盖
   - 全站统一口径：token + 侧边栏 + 顶栏 + 页面底色 + 面包屑
   - 页面级组件（.stat-card / .st-pill / .v-risk …）在 body.theme-b 下生效，
     避免影响未纳入本阶段的其他模板
   - 只改视觉，不改字段名 / 统计卡张数 / 功能入口 / 口径文案
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计 Token（方向B · 森屿）
   -------------------------------------------------------------------------- */
:root {
  /* 品牌 */
  --brand: #2f8f6b;          /* 生机绿主色 · 仅做强调 */
  --brand-deep: #1f6b4f;     /* 深森绿 · 标题/悬停 */
  --brand-soft: #eaf5ee;     /* 浅森绿底 · 选中/高亮底 */
  --accent: #d8983f;         /* 暖琥珀 · 提升/重点 */

  /* 语义色 */
  --success: #3a9d6b;        /* 成功/达标/已付款 */
  --info: #3587c9;           /* 信息/进行中 */
  --warning: #d97706;        /* 警告/待提升/待处理 */
  --danger: #d9534f;         /* 危险/异常/逾期/低值 */
  --premium: #8b5fc0;        /* 已废弃（批3）：仅线索阶段「方案沟通」仍在用，数据色一律不得使用紫色 */

  /* 中性 & 表面 */
  --ink: #17342a;
  --ink-2: #47625a;
  --ink-3: #7c948d;
  --bg: #fafcfb;
  --border: #e4ede9;
  --border-strong: #cfdfd8;

  /* 圆角 / 阴影 */
  --radius: 13px;
  --radius-sm: 8px;
  --shadow: 0 1px 4px rgba(31, 92, 70, .06);
  --font: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;

  /* 语义色浅底（供标签/卡片使用） */
  --success-soft: #e4f3e9;
  --info-soft: #eaf3fb;
  --warning-soft: #fdf3e3;
  --danger-soft: #fbeae9;
  --premium-soft: #f0e9fb;

  /* 兼容既有变量体系（style.css / redesign_v1.css / 各页面 var() 引用） */
  --primary: var(--brand);
  --primary-2: var(--brand-deep);
  --primary-3: var(--brand-soft);
  --primary-4: #f3f8f5;
  --brand-hover: var(--brand-deep);
  --brand-light: var(--brand-soft);
  --brand-bg: rgba(47, 143, 107, .08);
  --success-light: var(--success-soft);
  --warning-light: var(--warning-soft);
  --danger-light: var(--danger-soft);
  --info-light: var(--info-soft);
  --bg-page: var(--bg);
  --bg-card: #fff;
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --border-light: #eef4f1;
  --sidebar-bg: #fff;
  --sidebar-bg-hover: var(--brand-soft);
  --sidebar-text: var(--ink-2);
  --sidebar-text-active: var(--brand-deep);
  --sidebar-group-title: var(--ink-3);
  --sidebar-divider: var(--border);
  --sidebar-active-indicator: var(--brand);
  --radius-lg: var(--radius);
  --radius-xl: 16px;

  /* ---- 批3 · 数据语义色（全站唯一数据色来源，页面禁止再写十六进制） ---- */
  --c-neutral: #1f2937;   /* 中性数值：累计/总量/计数，无好坏 */
  --c-ok:      #2a7d4f;   /* 达标绿 */
  --c-warn:    #d97706;   /* 待提升琥珀 */
  --c-danger:  #d9534f;   /* 异常红 */
  --c-info:    #3587c9;   /* 进行中蓝 */
  --c-muted:   #7c948d;   /* 无数据/不适用灰 */
}

/* --------------------------------------------------------------------------
   2. 全局表面：内容区底色 / 卡片 / 表格
   -------------------------------------------------------------------------- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
}

.main-content { background: var(--bg); }

.card,
.stat-card-v2 {
  border-color: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card-header {
  background: #fff;
  border-bottom-color: var(--border-light);
}

.table > :not(caption) > * > * { border-bottom-color: var(--border-light); }

.table > thead > tr > th {
  background: var(--brand-soft);
  color: var(--ink-2);
  border-bottom-color: var(--border);
}

.table-hover > tbody > tr:hover > * { background-color: #f6fbf8; }

/* 页面头部 hero：统一森屿绿渐变 */
.brand-banner,
.wb-banner,
.hub-hero,
.delivery-hero,
.theme-hero,
.my-hero,
.ch-hero,
.hr-hero,
.sop-hero,
.pool-hero,
.lines-hero,
.remote-hero,
.admin-hero,
.kb-hero,
.marketing-hero,
.metric-hero {
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 58%, #3aa377 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 26px rgba(31, 107, 79, .18) !important;
}

/* --------------------------------------------------------------------------
   3. 左侧导航：分组标题 / 选中态 / 底部用户区
   -------------------------------------------------------------------------- */
.sidebar {
  background: #fff;
  border-right: 1px solid var(--border);
}

.sidebar .brand .brand-logo {
  background: linear-gradient(135deg, var(--brand-deep), var(--brand));
}

/* 分组标题：上移间距 + 粗体 + 浅色 */
.sidebar-section-label {
  margin-top: 10px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
}

/* 选中项：品牌绿实底 + 白字 + 圆角 8px */
.sidebar-nav-link {
  border-radius: var(--radius-sm);
  color: var(--ink-2);
}

.sidebar-nav-link:hover {
  background: var(--brand-soft);
  color: var(--brand-deep);
}

.sidebar-nav-link.active {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}

.sidebar-nav-link.active .nav-icon { color: #fff; }
.sidebar-nav-link:hover .nav-icon { color: var(--brand-deep); }
.sidebar-nav-link.active::before { display: none; }

.sidebar-nav-link .sidebar-badge { background: var(--danger); }

/* 底部用户区：浅色分组底分离 */
.sidebar-footer {
  background: var(--brand-soft);
  border-top: 1px solid var(--border);
}

.sidebar-footer .user-avatar {
  background: linear-gradient(135deg, var(--brand-deep), var(--brand));
}

.sidebar-footer .user-meta .user-name { color: var(--ink); }
.sidebar-footer .user-meta .user-role { color: var(--ink-3); }

/* --------------------------------------------------------------------------
   4. 面包屑「返回上级 | 工作台/xx」
   -------------------------------------------------------------------------- */
.ui-back-breadcrumb,
.ui-back-breadcrumb a,
.ui-back-breadcrumb span {
  color: var(--ink-3);
  font-size: 11.5px;
}

.ui-back-breadcrumb .ui-back-crumb.current span {
  color: var(--ink-2);
  font-weight: 600;
}

.ui-back-sep { color: var(--border-strong); }
.ui-back-button { color: var(--ink-2); }
.ui-back-button:hover { color: var(--brand-deep); }

/* --------------------------------------------------------------------------
   5. 状态色 class（模板里直接打 class）
   -------------------------------------------------------------------------- */
.st-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  line-height: 1.6;
}

.st-ok   { background: var(--success-soft); color: #2a7d4f; } /* 已付款/达标 */
.st-do   { background: var(--info-soft);    color: var(--info); }    /* 进行中/投递中 */
.st-warn { background: var(--warning-soft); color: var(--warning); } /* 待处理/待提升 */
.st-risk { background: var(--danger-soft);  color: var(--danger); }  /* 逾期/低值/异常 */
.st-prem { background: #f1f5f4; color: var(--c-neutral); } /* 高价值层 S/复购：批3 起用中性+重点标签，不用紫 */

/* 线索阶段专用色（2026-10-28：六个阶段互相区分，已签约用橙色突出） */
.st-stage-new     { background: #f1f5f4;             color: var(--ink-3); }    /* 新线索 · 灰 */
.st-stage-contact { background: var(--info-soft);     color: var(--info); }     /* 已联系 · 蓝 */
.st-stage-need    { background: #e2f2f0;             color: #0e8a7d; }         /* 需求评估 · 青 */
.st-stage-plan    { background: var(--premium-soft);  color: var(--premium); }  /* 方案沟通 · 紫 */
.st-stage-signed  { background: var(--warning-soft);  color: var(--warning); }  /* 已签约 · 橙 */
.st-stage-lost    { background: var(--danger-soft);   color: var(--danger); }   /* 已流失 · 红 */

/* 数据卡数值异常提示色 */
.v-risk { color: var(--danger) !important; }
.v-warn { color: var(--warning) !important; }

/* --------------------------------------------------------------------------
   6. 核心统计卡（本阶段三页使用，限定 body.theme-b 避免影响其他模板）
   -------------------------------------------------------------------------- */
body.theme-b .stat-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  height: 100%;
  position: relative;
}

body.theme-b .stat-card.hot {
  border-color: var(--brand);
  background: #f6fbf8;
  box-shadow: 0 0 0 1px var(--brand-soft);
}

body.theme-b .stat-card .k {
  font-size: 11.5px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
}

body.theme-b .stat-card .v {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.3px;
  margin-top: 4px;
  line-height: 1.25;
}

body.theme-b .stat-card .d {
  font-size: 10.5px;
  color: var(--ink-2);
  margin-top: 2px;
}

body.theme-b .stat-card .v small {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}

/* 入口卡主按钮视觉 */
/* 入口卡 hot 主卡（交付中台·求职辅导 SOP） */
body.theme-b .entry-card-hot {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand-soft);
}
body.theme-b .entry-card-hot .entry-action { color: var(--brand-deep); }

body.theme-b .entry-btn {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

body.theme-b .entry-btn:hover {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
}

/* 窄屏：统计卡换行，表格横向滚动 */
@media (max-width: 767.98px) {
  body.theme-b .stat-card .v { font-size: 19px; }
}

/* --------------------------------------------------------------------------
   7. 阶段1收尾 + 批次2「经营与人才」复用武器库
   -------------------------------------------------------------------------- */
/* 交付中台「我的目标」进度条统一品牌绿。 */
.goal-bar-fill {
  background: linear-gradient(90deg, #2f8f6b, #3f9d7c) !important;
}

/* 语义补充：蓝色信息态与中性态。 */
.st-info { background: var(--info-soft); color: var(--info); }
.st-muted { background: #f1f5f4; color: var(--ink-3); }

body.theme-b .stat-card.compact { padding: 11px 13px; }

body.theme-b .stat-card.clickable {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

body.theme-b .stat-card.clickable:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 8px 20px rgba(31, 107, 79, .10);
}

body.theme-b .theme-stat-group-label {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  margin: 2px 0 8px;
}

body.theme-b .v-brand { color: var(--brand-deep) !important; }
body.theme-b .v-info { color: var(--info) !important; }
body.theme-b .v-premium { color: var(--c-neutral) !important; }

/* 人才库关键列：LTV / 订单 / 下次回访。
   批3：累计 LTV 无好坏（决策树第 1 步），一律中性，绿色会被误读成达标。 */
body.theme-b .talent-col-ltv {
  color: var(--c-neutral) !important;
  font-weight: 700;
}

body.theme-b .talent-col-deals,
body.theme-b .talent-col-review {
  color: var(--ink) !important;
  font-weight: 650;
}

body.theme-b .talent-name-link {
  color: var(--ink) !important;
  font-weight: 750;
}

body.theme-b .talent-name-link:hover {
  color: var(--brand-deep) !important;
}

/* 客户详情：核心数据卡、空值与时间线。 */
body.theme-b .customer-hero {
  background: #fff;
  border-color: var(--border);
  border-radius: var(--radius);
}

body.theme-b .customer-title { color: var(--ink); }
body.theme-b .customer-meta { color: var(--ink-3); }
body.theme-b .timeline-kind { font-weight: 700; }

body.theme-b .timeline-card {
  border-color: var(--border);
  border-radius: var(--radius-sm);
}

body.theme-b .timeline-title { color: var(--ink); }
body.theme-b .timeline-content { color: var(--ink-2); }
body.theme-b .profile-row span:last-child { color: var(--ink); }
body.theme-b .empty-note,
body.theme-b .empty { color: var(--ink-3); }

/* 全站按钮三态：主按钮品牌绿 / 次按钮白底绿描边 / 文字链接无底纹。 */
body.theme-b .btn-primary,
body.theme-b .btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-deep);
  --bs-btn-hover-border-color: var(--brand-deep);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-deep);
  --bs-btn-active-border-color: var(--brand-deep);
  --bs-btn-disabled-bg: #93b9a8;
  --bs-btn-disabled-border-color: #93b9a8;
}

body.theme-b .btn-outline-primary,
body.theme-b .btn-outline-secondary,
body.theme-b .btn-outline-dark,
body.theme-b .btn-outline-info,
body.theme-b .btn-outline-success {
  --bs-btn-color: var(--brand-deep);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-deep);
  --bs-btn-active-border-color: var(--brand-deep);
}

body.theme-b .btn-link,
body.theme-b .theme-text-action {
  color: var(--brand-deep) !important;
  text-decoration: none;
}

body.theme-b .btn-link:hover,
body.theme-b .theme-text-action:hover {
  color: var(--brand) !important;
  text-decoration: underline;
}

body.theme-b .form-control:focus,
body.theme-b .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(47, 143, 107, .12);
}

body.theme-b .stat-card-v2 {
  border-color: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

body.theme-b .stat-card-v2:hover {
  border-color: var(--brand);
  box-shadow: 0 8px 20px rgba(31, 107, 79, .10);
}

body.theme-b .stat-card-v2 .stat-label { color: var(--ink-3); }
body.theme-b .stat-card-v2 .stat-value {
  color: var(--c-neutral);
  letter-spacing: 0;
}

body.theme-b .stat-card-v2 .stat-icon-box {
  color: var(--brand) !important;
  background: var(--brand-soft) !important;
}

body.theme-b .stat-card-v2.risk .stat-icon-box {
  color: var(--danger) !important;
  background: var(--danger-soft) !important;
}

body.theme-b .stat-card-v2.hot {
  border-color: var(--brand);
  background: #f6fbf8;
  box-shadow: 0 0 0 1px var(--brand-soft);
}

body.theme-b .btn-secondary {
  --bs-btn-color: var(--brand-deep);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-deep);
  --bs-btn-active-border-color: var(--brand-deep);
}

body.theme-b .timeline-detail summary {
  color: var(--brand-deep);
}

body.theme-b .talent-workbench-tabs a.active {
  color: var(--brand-deep);
  border-bottom-color: var(--brand);
}


/* --------------------------------------------------------------------------
   8. 批3 · 数据色组件（2026-11-04 设计总监批3指令）
   --------------------------------------------------------------------------
   页面只挂类名，不写内联色值。
   .stat-value 默认中性；只有「有目标值/明确好坏」才挂 .is-ok/.is-warn/.is-danger/.is-info
   -------------------------------------------------------------------------- */
.stat-value {
  color: var(--c-neutral);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
}

.stat-value.is-ok     { color: var(--c-ok); }
.stat-value.is-warn   { color: var(--c-warn); }
.stat-value.is-danger { color: var(--c-danger); }
.stat-value.is-info   { color: var(--c-info); }
.stat-value.is-muted  { color: var(--c-muted); }

.stat-value small,
.stat-value .unit {
  font-size: .54em;
  font-weight: 600;
  color: var(--c-muted);
  margin-left: 3px;
  letter-spacing: 0;
}

/* 兼容既有 .stat-card / .stat-card-v2 结构里的数字 */
body.theme-b .stat-card .v,
body.theme-b .stat-card-v2 .stat-value { color: var(--c-neutral); }

/* 部分页面 KPI 数字用 .value（okr_mappings / remote_assessment 等），补同一套语义档位 */
.value.is-ok     { color: var(--c-ok) !important; }
.value.is-warn   { color: var(--c-warn) !important; }
.value.is-danger { color: var(--c-danger) !important; }
.value.is-info   { color: var(--c-info) !important; }
.value.is-muted  { color: var(--c-muted) !important; }

/* 无 theme-b 的页面也能用 .v.is-* 语义档位 */
.v.is-ok     { color: var(--c-ok) !important; }
.v.is-warn   { color: var(--c-warn) !important; }
.v.is-danger { color: var(--c-danger) !important; }
.v.is-info   { color: var(--c-info) !important; }
.v.is-muted  { color: var(--c-muted) !important; }

body.theme-b .stat-card .v.is-ok,
body.theme-b .stat-card-v2 .stat-value.is-ok     { color: var(--c-ok) !important; }
body.theme-b .stat-card .v.is-warn,
body.theme-b .stat-card-v2 .stat-value.is-warn   { color: var(--c-warn) !important; }
body.theme-b .stat-card .v.is-danger,
body.theme-b .stat-card-v2 .stat-value.is-danger { color: var(--c-danger) !important; }
body.theme-b .stat-card .v.is-info,
body.theme-b .stat-card-v2 .stat-value.is-info   { color: var(--c-info) !important; }

@media (max-width: 767.98px) {
  .stat-value { font-size: 21px; }
}

/* 百分比徽章：五档唯一口径。0%（真没达成）= 红；无目标/无数据 = 灰。 */
.pct-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pct-badge.is-ok     { background: var(--brand-soft); color: var(--c-ok); }     /* >=100% */
.pct-badge.is-info   { background: #eef4fb; color: var(--c-info); }             /* 60-99% */
.pct-badge.is-warn   { background: #fdf3e3; color: var(--c-warn); }             /* 1-59% */
.pct-badge.is-danger { background: #fbeceb; color: var(--c-danger); }           /* = 0% */
.pct-badge.is-muted  { background: #f3f5f4; color: var(--c-muted); }            /* 无目标/无数据 */

/* 模块入口图标容器：统一淡绿底 + 深绿线，禁止逐卡换色 */
.entry-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 22px;
  line-height: 1;
}

.entry-icon i { color: inherit; }

/* 「进入」类动作：全站同一套 */
.entry-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.entry-action::after {
  content: '\203A';
  font-size: 14px;
  line-height: 1;
  opacity: .75;
}

.entry-action:hover {
  background: #dcefe4;
  color: var(--brand-deep);
  text-decoration: none;
}

/* 达成率仪表（经营驾驶舱等）：数字 / 进度条 / 状态标签同一档色。
   批3：同一语义全站只有一种色，不再出现「偏低琥珀、严重偏低红、低于预期红」三种表达。 */
.gauge-item .gauge-val {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-neutral);
}

.gauge-item .gauge-status {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  background: #f3f5f4;
  color: var(--c-muted);
}

.gauge-item.is-ok     .gauge-val { color: var(--c-ok); }
.gauge-item.is-info   .gauge-val { color: var(--c-info); }
.gauge-item.is-warn   .gauge-val { color: var(--c-warn); }
.gauge-item.is-danger .gauge-val { color: var(--c-danger); }
.gauge-item.is-muted  .gauge-val { color: var(--c-muted); }

.gauge-item.is-ok     .progress-bar { background: var(--c-ok); }
.gauge-item.is-info   .progress-bar { background: var(--c-info); }
.gauge-item.is-warn   .progress-bar { background: var(--c-warn); }
.gauge-item.is-danger .progress-bar { background: var(--c-danger); }
.gauge-item.is-muted  .progress-bar { background: var(--c-muted); }

.gauge-item.is-ok     .gauge-status { background: var(--brand-soft); color: var(--c-ok); }
.gauge-item.is-info   .gauge-status { background: #eef4fb; color: var(--c-info); }
.gauge-item.is-warn   .gauge-status { background: #fdf3e3; color: var(--c-warn); }
.gauge-item.is-danger .gauge-status { background: #fbeceb; color: var(--c-danger); }
.gauge-item.is-muted  .gauge-status { background: #f3f5f4; color: var(--c-muted); }