/* ==========================================================================
   Kloser CRM — Charts
   ========================================================================== */

.chart { width: 100%; display: block; overflow: visible; }
.chart text { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.chart .axis-label { font-size: 10px; font-weight: 560; fill: var(--text-subtle); letter-spacing: .02em; }
.chart .grid-line { stroke: var(--line-soft); stroke-width: 1; }
.chart .grid-line.base { stroke: var(--line); }
.chart .series-line { fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.chart .series-area { stroke: none; }
.chart .dot { stroke: var(--surface); stroke-width: 2; transition: r var(--t-fast) var(--ease-out); }
.chart .dot:hover { r: 6; }
.chart .bar { transition: opacity var(--t-fast) var(--ease-out); }
.chart .bar:hover { opacity: .78; }

.chart-legend { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--text-muted); }
.legend-item .key { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.legend-item button { display: contents; }
.legend-item[data-off="true"] { opacity: .38; }

.chart-tip {
  position: absolute; z-index: 10; pointer-events: none;
  padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--n-900); color: var(--n-0);
  font-size: var(--fs-11); font-weight: 550; white-space: nowrap;
  box-shadow: var(--shadow-md);
  transform: translate(-50%, calc(-100% - 10px));
  opacity: 0; transition: opacity var(--t-fast) var(--ease-out);
}
.chart-tip[data-show="true"] { opacity: 1; }
.chart-tip .tip-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-host { position: relative; }

/* Donut */
.donut-wrap { position: relative; display: grid; place-items: center; }
.donut-center {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; pointer-events: none;
}
.donut-center .dv { font-size: var(--fs-24); font-weight: 680; letter-spacing: var(--tr-display); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.donut-center .dl { font-size: var(--fs-11); color: var(--text-subtle); font-weight: 560; }
.donut-seg { transition: opacity var(--t-fast) var(--ease-out); }
.donut-seg:hover { opacity: .82; }

/* Progress ring */
.ring-track { stroke: color-mix(in srgb, var(--wp-navy) 9%, transparent); fill: none; }
.ring-fill  { fill: none; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; }

/* Sparkline */
.spark { width: 100%; height: 34px; overflow: visible; }
.spark .sp-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark .sp-area { stroke: none; }

/* Heat scale */
.heat-scale { display: flex; align-items: center; gap: 4px; }
.heat-scale .hs { width: 14px; height: 9px; border-radius: 2px; }