/* 图表专用展示层；不覆盖控制台其他卡片、表格或业务控件。 */
.vben-card.vben-trend-card { padding: 20px; }

.vben-trend-card > .vben-trend-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}

.vben-trend-heading p { margin-top: 4px; font-size: 12px; line-height: 1.6; }
.vben-trend-heading .vben-pill { flex: none; font-size: 11px; font-variant-numeric: tabular-nums; }

.vben-trend-card .vben-chart-wrap {
  overflow: visible;
  margin-top: 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.vben-trend-card .vben-chart-head {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--console-border, #dfe3e9);
}

.vben-chart-stat { min-width: 130px; }
.vben-trend-card .vben-chart-legend {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--console-muted, #5d6675);
  font-size: 12px;
  line-height: 1.5;
}

.vben-chart-stat-value {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 6px;
  color: var(--console-text, #202733);
  font-variant-numeric: tabular-nums;
}

.vben-chart-stat-value b { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; overflow-wrap: anywhere; }
.vben-chart-stat-value span { color: var(--console-muted, #5d6675); font-size: 12px; }
.vben-trend-card .vben-chart-legend-dot { width: 18px; height: 3px; border-radius: 2px; box-shadow: none; }
.vben-trend-card .vben-chart-tooltip-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; box-shadow: none; }
.vben-trend-card .vben-chart-legend-dot.is-online,
.vben-trend-card .vben-chart-tooltip-dot.is-online { background: #2864cf; }
.vben-trend-card .vben-chart-legend-dot.is-cpu,
.vben-trend-card .vben-chart-tooltip-dot.is-cpu { background: #8796a9; }

.vben-trend-card .vben-chart-stage {
  position: relative;
  min-width: 0;
  padding-top: 18px;
  background: transparent;
}

/* 仅 SVG 横滚，提示层留在可视宽度内，沿用原有 stage/svg 相对坐标计算。 */
.vben-chart-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #c5cfdd transparent;
  padding-bottom: 8px;
  outline-offset: 4px;
}
.vben-chart-scroll:focus-visible { outline: 2px solid var(--console-primary, #2864cf); }
.vben-chart-scroll::-webkit-scrollbar { height: 5px; }
.vben-chart-scroll::-webkit-scrollbar-thumb { background: #c5cfdd; border-radius: 3px; }
.vben-chart-scroll::-webkit-scrollbar-track { background: transparent; }

.vben-trend-card .vben-chart-canvas {
  display: block;
  width: 100%;
  min-width: 960px;
  height: auto;
  aspect-ratio: 18 / 5;
  overflow: visible;
}

.vben-trend-card .vben-chart-grid {
  opacity: 1;
  stroke: #e7ebf1;
  stroke-width: 1;
  stroke-dasharray: none;
  shape-rendering: geometricPrecision;
  animation: none;
}
.vben-trend-card .vben-chart-axis text { fill: var(--console-muted, #5d6675); font-size: 18px; font-weight: 400; letter-spacing: 0; }
.vben-trend-card .vben-chart-axis .vben-chart-axis-unit { fill: #768293; font-size: 16px; }
.vben-trend-card .vben-chart-area,
.vben-trend-card .vben-chart-line { animation: none; transform: none; filter: none; will-change: auto; }
.vben-trend-card .vben-chart-line { vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.vben-trend-card .vben-chart-line-blue { stroke: #2864cf; stroke-width: 2.4; }
.vben-trend-card .vben-chart-line-cpu { stroke: #8796a9; stroke-width: 1.8; }
.vben-trend-card .vben-chart-latest,
.vben-trend-card .vben-chart-hover-dot { stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; filter: none; pointer-events: none; }
.vben-trend-card .vben-chart-latest.is-online,
.vben-trend-card .vben-chart-hover-dot.is-online { fill: #2864cf; }
.vben-trend-card .vben-chart-latest.is-cpu,
.vben-trend-card .vben-chart-hover-dot.is-cpu { fill: #8796a9; }
.vben-trend-card .vben-chart-cursor { opacity: 0; stroke: #9caabd; stroke-width: 1; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; pointer-events: none; }
.vben-trend-card .vben-chart-hover-dot { opacity: 0; }
.vben-trend-card .vben-chart-cursor.is-visible,
.vben-trend-card .vben-chart-hover-dot.is-visible { opacity: 1; }
.vben-trend-card .vben-chart-hit rect { fill: transparent; cursor: crosshair; outline: none; }

.vben-trend-card .vben-chart-tooltip {
  position: absolute;
  z-index: 4;
  top: 26px;
  width: 206px;
  max-width: calc(100% - 20px);
  padding: 12px 14px;
  border: 0;
  border-radius: 8px;
  opacity: 0;
  color: var(--console-text, #202733);
  background: #fff;
  box-shadow: 0 8px 28px rgba(32, 39, 51, .15);
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease;
}
.vben-trend-card .vben-chart-tooltip.is-visible { opacity: 1; transform: translateY(0); }
.vben-trend-card .vben-chart-tooltip-time { margin-bottom: 9px; font-size: 12px; font-weight: 600; }
.vben-trend-card .vben-chart-tooltip-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 25px; font-size: 12px; }
.vben-trend-card .vben-chart-tooltip-row span { display: inline-flex; align-items: center; gap: 8px; color: var(--console-muted, #5d6675); }
.vben-trend-card .vben-chart-tooltip-row b { min-width: 0; overflow-wrap: anywhere; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.vben-chart-empty { display: flex; min-height: 280px; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--console-muted, #5d6675); font-size: 14px; }
.vben-chart-empty small { font-size: 12px; }

@media (max-width: 720px) {
  .vben-card.vben-trend-card { padding: 14px; }
  .vben-trend-card .vben-chart-head { gap: 28px; }
  .vben-chart-stat { min-width: 0; flex: 1; }
  .vben-chart-stat-value b { font-size: 23px; }
  .vben-trend-card .vben-chart-wrap { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .vben-trend-card .vben-chart-tooltip { transition: none; }
}