/* ===================== wb_dashboard_ui.css =====================
 * 数据看板（/#/dashboard）视觉优化覆盖层
 * @@ dashboard-ui @@ 20261004
 * 仅作用于主系统 Vue SPA；不改任何既有文件，由 index.html 引入。
 * 回滚：删掉 index.html 里 wb_dashboard_ui.css 与 wb_dashboard.js 两行即可。
 *
 * 设计要点：
 *   1) 统一圆角：大容器 14px、销售卡 10px（原销售区 8 / 销售卡 6 不一致）。
 *   2) 修复「逾期金额」被主题规则误染成琥珀色（与欠款总额同色）的问题，
 *      恢复为红色；欠款总额改为深墨色（主数字），层次更清晰。
 *   3) KPI 卡片增加品牌绿顶边，与下方「预警」卡片的语义色顶边呼应。
 *   4) 销售卡加柔和阴影 + 头像圆标 + 数值放大，块面更精致。
 *   5) 趋势图柱体加品牌绿渐变与圆角顶部，标题加左侧绿条。
 * ========================================================================= */

/* ---- 1) 大容器圆角 + 阴影统一 ---- */
:root[data-theme="green"] #app .sales-stats-section {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow) !important;
}

/* ---- 2) 销售卡：圆角 + 阴影 + 精致内边距 ---- */
:root[data-theme="green"] #app .sales-card {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  padding: 16px 18px !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s !important;
}
:root[data-theme="green"] #app .sales-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 26px -10px rgba(29, 43, 42, .22) !important;
  border-left-color: var(--brand-deep) !important;
}

/* ---- 3) 销售卡头像圆标（把 .sales-icon 变成小圆） ---- */
:root[data-theme="green"] #app .sales-name {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
:root[data-theme="green"] #app .sales-icon {
  flex: 0 0 auto !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--brand-weak) !important;
  color: var(--brand-deep) !important;
  font-size: 13px !important;
}

/* ---- 4) 数值配色：欠款总额深墨 / 逾期金额红色（修复误染琥珀） ---- */
:root[data-theme="green"] #app .value-number.total-num {
  color: var(--ink) !important;
  font-size: 20px !important;
}
:root[data-theme="green"] #app .value-number.overdue-num {
  color: var(--red) !important;
  font-size: 20px !important;
}
:root[data-theme="green"] #app .value-label {
  font-size: 12px !important;
}
:root[data-theme="green"] #app .sales-values {
  gap: 12px !important;
}

/* ---- 5) KPI 卡片品牌绿顶边（与预警卡语义顶边呼应） ---- */
:root[data-theme="green"] #app .dashboard-stats .stat-card {
  border-top: 3px solid var(--brand) !important;
}

/* ---- 6) 趋势图：柱体渐变 + 圆角顶 + 标签配色 + 基线 ---- */
:root[data-theme="green"] #app .bar-body {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%) !important;
  border-radius: 4px 4px 2px 2px !important;
  width: 16px !important;
}
:root[data-theme="green"] #app .bar-value {
  color: var(--ink-2) !important;
  font-weight: 600 !important;
}
:root[data-theme="green"] #app .bar-label {
  color: var(--ink-3) !important;
}
:root[data-theme="green"] #app .trend-chart-wrapper {
  border-bottom: 1px solid var(--line) !important;
}

/* ---- 7) 分区 / 趋势标题左侧绿条（仅看板内，避免污染全站） ---- */
:root[data-theme="green"] #app .sales-stats-section .section-title,
:root[data-theme="green"] #app .trend-container .trend-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
:root[data-theme="green"] #app .sales-stats-section .section-title::before,
:root[data-theme="green"] #app .trend-container .trend-title::before {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 4px !important;
  height: 18px !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, var(--brand), var(--brand-deep)) !important;
}