/* ═══════════════════════════════════════════════════════════════════
   Components: Charts (SVG donut + horizontal bars + legend + palette)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Donut ── */
.fy-donut {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.fy-donut-svg { width: 180px; height: 180px; }

.fy-donut-center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.fy-donut-center strong { font-size: 1.7rem; font-family: var(--font-mono); }
.fy-donut-center span { font-size: var(--fs-body-s); color: var(--color-ink-soft); }

/* ── Horizontal bars ── */
.fy-hbar-svg { display: block; margin: 0 auto; }

.fy-hbar-svg .fy-chart-label { font-size: 14px; fill: var(--color-ink-soft); }
.fy-hbar-svg .fy-chart-value { font-size: 14px; fill: var(--color-ink); font-weight: 600; font-family: var(--font-mono); }

/* ── Area / line chart ── */
.fy-area-svg { display: block; margin: 0 auto; }

.fy-area-svg .fy-chart-area { fill-opacity: 0.16; }
.fy-area-svg .fy-chart-line { fill: none; stroke-width: 2.5; }
.fy-area-svg .fy-chart-label { font-size: 14px; fill: var(--color-ink-muted); }
.fy-area-svg circle { stroke: #fff; stroke-width: 1.5; }

/* ── Area chart hover (crosshair + tooltip) ── */
.fy-area-wrap { position: relative; }

.fy-chart-crosshair {
  fill: none;
  stroke: var(--color-ink-muted);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  pointer-events: none;
}

.fy-chart-tooltip {
  position: absolute;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--color-ink);
  color: #fff;
  font-size: 0.82rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
  box-shadow: var(--shadow-md);
}

/* ── Legend ── */
.fy-chart-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  width: 100%;
}

.fy-chart-legend-inline {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin-top: 10px;
}

/* ── Column chart ── */
.fy-column-wrap { width: 100%; }
.fy-column-svg { display: block; margin: 0 auto; }
.fy-column-svg .fy-chart-label { font-size: 13px; fill: var(--color-ink-muted); }
.fy-column-svg .fy-chart-value { font-size: 13px; fill: var(--color-ink); font-weight: 600; font-family: var(--font-mono); }
.fy-column-svg rect { opacity: 0.92; }
.fy-column-svg rect:hover { opacity: 1; }

/* ── Multi-series line ── */
.fy-multi-wrap { width: 100%; }
.fy-multi-svg { display: block; margin: 0 auto; }
.fy-multi-svg .fy-chart-line { fill: none; stroke-width: 2.5; }
.fy-multi-svg .fy-chart-label { font-size: 13px; fill: var(--color-ink-muted); }

/* ── Radial gauge ── */
.fy-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.fy-gauge-svg { display: block; }
.fy-gauge-svg .fy-chart-track { stroke: rgba(23, 37, 56, 0.12); }
.fy-gauge-value { font-size: 1.5rem; font-weight: 700; fill: var(--color-ink); font-family: var(--font-mono); }
.fy-gauge-label { font-size: 13px; fill: var(--color-ink-soft); }
.fy-gauge-sub { margin: 0; color: var(--color-ink-soft); font-size: 0.86rem; }

.fy-chart-legend li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  font-size: 0.9rem;
  color: var(--color-ink);
}

.fy-chart-legend i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  display: block;
}

.fy-chart-legend strong { font-family: var(--font-mono); font-weight: 600; }

/* ── Chart palette (validated colorblind-safe) ── */
.fy-chart-c0 { stroke: #e2683a; fill: #e2683a; background: #e2683a; }
.fy-chart-c1 { stroke: #3a7bd5; fill: #3a7bd5; background: #3a7bd5; }
.fy-chart-c2 { stroke: #2f9e77; fill: #2f9e77; background: #2f9e77; }
.fy-chart-c3 { stroke: #a05bb5; fill: #a05bb5; background: #a05bb5; }
.fy-chart-c4 { stroke: #d99a1f; fill: #d99a1f; background: #d99a1f; }

/* Status chart colors (risk job — semantic, always paired with labels) */
.fy-chart-ok { stroke: #2f9e77; fill: #2f9e77; background: #2f9e77; }
.fy-chart-warn { stroke: #d99a1f; fill: #d99a1f; background: #d99a1f; }
.fy-chart-serious { stroke: #e2683a; fill: #e2683a; background: #e2683a; }
.fy-chart-critical { stroke: #c0392b; fill: #c0392b; background: #c0392b; }