/* ============================================================
   Dashboard Polish v1 · Linear-inspired refinement layer
   参考 Linear 设计系统：近黑画布 + 半透明白边框 + 亮度分层
   只加不删：不删除任何发光数字/渐变/状态色，仅叠加质感优化
   ============================================================ */

#page-dashboard {
  --dash-bg-deep: #0c0d0f;
  --dash-bg-panel: #131417;
  --dash-bg-elevated: #1a1b1f;
  --dash-border-subtle: rgba(255,255,255,.06);
  --dash-border-std: rgba(255,255,255,.10);
  --dash-text-primary: #f4f5f7;
  --dash-text-body: #d3d7dd;
  --dash-text-muted: #9aa0ab;
  --dash-text-faint: #636974;
  --dash-accent: #5e6ad2;
  --dash-accent-bright: #7170ff;
}

/* ---------- 1. 画布与卡片基础：亮度分层 ---------- */
#page-dashboard {
  background: var(--dash-bg-deep);
}

/* 卡片：半透明白边框替代实色深边框，亮度即层次 */
#page-dashboard .card {
  background: linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid var(--dash-border-std);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.18);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#page-dashboard .card:hover {
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 36px rgba(0,0,0,.28);
}

/* ---------- 2. 文字层级：对比度修复 ---------- */
#page-dashboard .section-title {
  color: var(--dash-text-primary);
  font-weight: 600;
  letter-spacing: .4px;
  border-bottom-color: var(--dash-border-subtle);
}
#page-dashboard .subtitle {
  color: var(--dash-text-muted);
}

/* ---------- 3. 摘要栏（exec-summary）精修 ---------- */
#page-dashboard .exec-summary-bar {
  background: linear-gradient(180deg, rgba(94,106,210,.10) 0%, rgba(255,255,255,.03) 100%);
  border: 1px solid var(--dash-border-std);
  border-radius: 14px;
  padding: 18px 24px;
  margin-bottom: 16px;
}
#page-dashboard .exec-label {
  color: var(--dash-text-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .6px;
  text-transform: uppercase;
}
#page-dashboard .exec-value {
  color: var(--dash-text-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}
#page-dashboard .exec-sub {
  color: var(--dash-text-faint);
  font-size: 11px;
}
#page-dashboard .exec-divider {
  background: var(--dash-border-std);
}

/* ---------- 4. 利润卡精修 ---------- */
#page-dashboard .profit-label {
  color: var(--dash-text-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .6px;
  text-transform: uppercase;
}
#page-dashboard .profit-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -2px;
}
#page-dashboard .profit-change {
  color: var(--dash-text-muted);
  font-variant-numeric: tabular-nums;
}
#page-dashboard .profit-change .up { color: #34d399; }
#page-dashboard .profit-change .down { color: #f87171; }

#page-dashboard .profit-breakdown {
  border-top: 1px solid var(--dash-border-subtle);
  padding-top: 14px;
  margin-top: 14px;
}
#page-dashboard .profit-item-label {
  color: var(--dash-text-faint);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
#page-dashboard .profit-item-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
#page-dashboard .profit-item-sub {
  color: var(--dash-text-faint);
  font-size: 10px;
}

#page-dashboard .kpi-row {
  border-top: 1px solid var(--dash-border-subtle);
  padding-top: 14px;
  margin-top: 14px;
}
#page-dashboard .kpi-val {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
#page-dashboard .kpi-lbl {
  color: var(--dash-text-faint);
  font-size: 10px;
  letter-spacing: .4px;
}
#page-dashboard .kpi-trend {
  color: var(--dash-text-muted);
  font-size: 10px;
}

#page-dashboard .quick-stats {
  border-top: 1px solid var(--dash-border-subtle);
  padding-top: 12px;
  margin-top: 12px;
}
#page-dashboard .quick-stat-label {
  color: var(--dash-text-faint);
  font-size: 10px;
}
#page-dashboard .quick-stat-value {
  color: var(--dash-text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* sparkline 区域 */
#page-dashboard .sparkline-label,
#page-dashboard .section-subtitle {
  color: var(--dash-text-faint);
  font-size: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* ---------- 5. 决策区精修 ---------- */
#page-dashboard .decisions-card .section-title span {
  color: var(--dash-text-primary);
}
#page-dashboard .badge {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: .2px;
}

/* ---------- 6. 智能体卡片精修 ---------- */
#page-dashboard .agents-card .section-title span {
  color: var(--dash-text-primary);
}
#page-dashboard .agent {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--dash-border-subtle);
  border-radius: 10px;
  transition: background .18s ease, border-color .18s ease;
}
#page-dashboard .agent:hover {
  background: rgba(255,255,255,.05);
  border-color: var(--dash-border-std);
}
#page-dashboard .agent.err {
  border-left: 3px solid #f87171;
}
#page-dashboard .agent.warn {
  border-left: 3px solid #fbbf24;
}
#page-dashboard .agent-name {
  color: var(--dash-text-primary);
  font-weight: 600;
}
#page-dashboard .agent-task {
  color: var(--dash-text-body);
}
#page-dashboard .agent-stats {
  color: var(--dash-text-muted);
}
#page-dashboard .agent-detail-row .label {
  color: var(--dash-text-faint);
}
#page-dashboard .agent-detail-row span:last-child {
  color: var(--dash-text-body);
  font-variant-numeric: tabular-nums;
}

/* 状态点呼吸发光（保留原有，增强层次） */
#page-dashboard .agent-dot.err {
  box-shadow: 0 0 8px rgba(248,113,113,.6);
}
#page-dashboard .agent-dot.wait {
  box-shadow: 0 0 8px rgba(251,191,36,.6);
}
#page-dashboard .agent-dot.ok {
  box-shadow: 0 0 8px rgba(52,211,153,.5);
}

/* ---------- 7. 事件时间线精修 ---------- */
#page-dashboard .events-card .section-title span {
  color: var(--dash-text-primary);
}
#page-dashboard .timeline-item {
  border-left: 2px solid var(--dash-border-subtle);
  padding-left: 14px;
  margin-left: 6px;
  position: relative;
  transition: background .18s ease;
  border-radius: 0 8px 8px 0;
  padding: 8px 10px 8px 14px;
}
#page-dashboard .timeline-item:hover {
  background: rgba(255,255,255,.03);
}
#page-dashboard .timeline-item.tl-critical { border-left-color: #f87171; }
#page-dashboard .timeline-item.tl-success { border-left-color: #34d399; }
#page-dashboard .timeline-item.tl-warning { border-left-color: #fbbf24; }
#page-dashboard .timeline-item.tl-info { border-left-color: #60a5fa; }
#page-dashboard .tl-time {
  color: var(--dash-text-faint);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}
#page-dashboard .tl-title {
  color: var(--dash-text-primary);
  font-weight: 600;
}
#page-dashboard .tl-desc {
  color: var(--dash-text-muted);
}

/* ---------- 8. 平台营收对比精修 ---------- */
#page-dashboard .platform-card .section-title span {
  color: var(--dash-text-primary);
}
#page-dashboard .platform-row {
  border-radius: 8px;
  padding: 8px 10px;
  transition: background .18s ease;
}
#page-dashboard .platform-row:hover {
  background: rgba(255,255,255,.03);
}
#page-dashboard .pf-name {
  color: var(--dash-text-body);
  font-weight: 500;
}
#page-dashboard .pf-val {
  color: var(--dash-text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
#page-dashboard .pf-trend.up { color: #34d399; }
#page-dashboard .pf-trend.down { color: #f87171; }
#page-dashboard .pf-bar-wrap {
  background: rgba(255,255,255,.05);
  border-radius: 4px;
  overflow: hidden;
}
#page-dashboard .pf-bar {
  border-radius: 4px;
  transition: width .4s ease;
}

/* ---------- 9. 决策溯源精修 ---------- */
#page-dashboard .card .subtitle {
  color: var(--dash-text-faint);
}

/* ---------- 10. 摘要卡（底部）精修 ---------- */
#page-dashboard .summary-card {
  background: linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid var(--dash-border-std);
  border-radius: 12px;
  transition: border-color .2s ease, transform .2s ease;
}
#page-dashboard .summary-card:hover {
  border-color: rgba(255,255,255,.16);
  transform: translateY(-2px);
}
#page-dashboard .summary-card h3 {
  color: var(--dash-text-primary);
  font-weight: 600;
}
#page-dashboard .summary-item {
  color: var(--dash-text-muted);
  border-left: 2px solid var(--dash-border-subtle);
  padding-left: 10px;
  transition: border-color .18s ease, color .18s ease;
}
#page-dashboard .summary-item:hover {
  color: var(--dash-text-body);
  border-left-color: var(--dash-accent-bright);
}

/* ---------- 11. 业务数据区精修 ---------- */
#page-dashboard .biz-card .section-title span {
  color: var(--dash-text-primary);
}
#page-dashboard .biz-kpi-val {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -.5px;
}
#page-dashboard .biz-kpi-lbl {
  color: var(--dash-text-faint);
  font-size: 10px;
  letter-spacing: .3px;
}

/* 转化漏斗 */
#page-dashboard .fm-label {
  color: var(--dash-text-muted);
  font-size: 11px;
}
#page-dashboard .fm-val {
  color: var(--dash-text-body);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
#page-dashboard .fm-bar-wrap {
  background: rgba(255,255,255,.05);
  border-radius: 4px;
  overflow: hidden;
}
#page-dashboard .fm-bar {
  border-radius: 4px;
  transition: width .4s ease;
}
#page-dashboard .funnel-summary {
  border-top: 1px solid var(--dash-border-subtle);
  padding-top: 12px;
  margin-top: 12px;
}
#page-dashboard .fc-label {
  color: var(--dash-text-faint);
  font-size: 10px;
}
#page-dashboard .fc-val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* 爆品 TOP5 */
#page-dashboard .tp-row {
  border-radius: 8px;
  padding: 8px 10px;
  transition: background .18s ease;
}
#page-dashboard .tp-row:hover {
  background: rgba(255,255,255,.03);
}
#page-dashboard .tp-rank {
  color: var(--dash-text-faint);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
#page-dashboard .tp-rank.top3 {
  color: #fbbf24;
}
#page-dashboard .tp-name {
  color: var(--dash-text-body);
}
#page-dashboard .tp-sales {
  color: var(--dash-text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
#page-dashboard .tp-rate {
  color: var(--dash-text-muted);
}

/* ---------- 12. 期间切换按钮精修 ---------- */
#page-dashboard .profit-switcher button,
#page-dashboard .biz-period button,
#page-dashboard .rank-period button {
  background: rgba(255,255,255,.03);
  color: var(--dash-text-muted);
  border: 1px solid transparent;
  border-radius: 6px;
  transition: all .18s ease;
}
#page-dashboard .profit-switcher button:hover,
#page-dashboard .biz-period button:hover,
#page-dashboard .rank-period button:hover {
  background: rgba(255,255,255,.07);
  color: var(--dash-text-body);
}
#page-dashboard .profit-switcher button.active,
#page-dashboard .biz-period button.active,
#page-dashboard .rank-period button.active {
  background: var(--dash-accent);
  color: #fff;
  border-color: var(--dash-accent-bright);
}

/* ---------- 13. 滚动条精修（WebKit） ---------- */
#page-dashboard ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
#page-dashboard ::-webkit-scrollbar-track {
  background: transparent;
}
#page-dashboard ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 3px;
}
#page-dashboard ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.22);
}

/* ---------- 14. 响应式：窄屏单列 ---------- */
@media (max-width: 1100px) {
  #page-dashboard .main-grid {
    grid-template-columns: 1fr;
  }
  #page-dashboard .profit-card,
  #page-dashboard .decisions-card,
  #page-dashboard .agents-card {
    grid-column: 1;
    grid-row: auto;
    max-height: none;
  }
}