/* ==========================================================================
   EAC — wykresy. Canvas jest warstwą wizualną; nośnikiem informacji
   jest tabela w <details>. Bez JS i w forced-colors zostaje sama tabela.
   ========================================================================== */

.chart {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.chart__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.chart figcaption,
.chart__caption {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.chart__title {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--text-muted);
}

.chart__meta {
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.chart__trend {
  font-size: var(--fs-small);
  white-space: nowrap;
}

.chart__trend--good {
  color: var(--status-good-fg);
}
.chart__trend--attention {
  color: var(--status-attention-fg);
}
.chart__trend--critical {
  color: var(--status-critical-fg);
}

.chart__canvas {
  position: relative;
  width: 100%;
  height: 200px;
}

.chart__canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.chart--tall .chart__canvas {
  height: 260px;
}

.chart--short .chart__canvas {
  height: 140px;
}

/* Bez JS: canvas nie ma czego pokazać, więc go chowamy i otwieramy dane */
.no-js .chart__canvas {
  display: none;
}

.no-js .chart__data > summary {
  display: none;
}

.no-js .chart__data > .chart__table-wrap {
  display: block;
}

.chart__data {
  font-size: var(--fs-small);
}

.chart__data > summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
}

.chart__data > summary::-webkit-details-marker {
  display: none;
}

.chart__data > summary::before {
  content: "▸";
  color: var(--text-muted);
}

.chart__data[open] > summary::before {
  content: "▾";
}

.chart__table-wrap {
  margin-top: var(--space-3);
  overflow-x: auto;
}

.chart__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-caption);
}

.chart__table caption {
  text-align: left;
  padding-bottom: var(--space-2);
  color: var(--text-muted);
}

.chart__table th,
.chart__table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-w) solid var(--border-soft);
  text-align: left;
}

.chart__table td.num,
.chart__table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- Legenda tekstowa ------------------------------------------------------ */

.chart-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}

.chart-legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.chart-legend__swatch {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

/* Kolor próbki legendy nazwany tokenem — CSP nie dopuszcza style="". */
.swatch--chart-1 {
  background: var(--chart-1);
}
.swatch--chart-2 {
  background: var(--chart-2);
}
.swatch--chart-3 {
  background: var(--chart-3);
}
.swatch--chart-4 {
  background: var(--chart-4);
}
.swatch--chart-5 {
  background: var(--chart-5);
}
.swatch--chart-6 {
  background: var(--chart-6);
}
.swatch--chart-track {
  background: var(--chart-track);
}
.swatch--chart-axis {
  background: var(--chart-axis);
}
.swatch--severity-critical {
  background: var(--severity-critical);
}
.swatch--severity-serious {
  background: var(--severity-serious);
}
.swatch--severity-moderate {
  background: var(--severity-moderate);
}

/* ---- Gauge ryzyka ---------------------------------------------------------- */

.risk-gauge {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.risk-gauge__value {
  font-size: var(--fs-display-md);
  line-height: var(--lh-display-md);
  letter-spacing: var(--ls-display-md);
  font-weight: var(--fw-medium);
}

.risk-gauge__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 320px;
}

/* ---- Heatmapa (CSS grid, nie canvas — czytelna dla czytnika ekranu) -------- */

.heatmap {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-caption);
}

.heatmap th {
  font-weight: var(--fw-regular);
  color: var(--text-muted);
  padding: var(--space-1) var(--space-2);
  text-align: left;
  white-space: nowrap;
}

.heatmap thead th {
  font-family: var(--font-mono);
  text-align: center;
}

.heatmap td {
  padding: 2px;
}

.heatmap__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  min-width: 40px;
  background: var(--ink-900);
  color: var(--text-on-dark);
  font-variant-numeric: tabular-nums;
}

/* Poniżej 3 wystąpień tekst na jasnym tle musi być ciemny */
.heatmap__cell[data-level="0"] {
  background: var(--surface-sunken);
  color: var(--text-muted);
}
.heatmap__cell[data-level="1"] {
  background: rgba(10, 10, 10, 0.12);
  color: var(--text-primary);
}
.heatmap__cell[data-level="2"] {
  background: rgba(10, 10, 10, 0.3);
  color: var(--text-primary);
}
.heatmap__cell[data-level="3"] {
  background: rgba(10, 10, 10, 0.55);
  color: var(--text-on-dark);
}
.heatmap__cell[data-level="4"] {
  background: rgba(10, 10, 10, 0.75);
  color: var(--text-on-dark);
}
.heatmap__cell[data-level="5"] {
  background: rgba(10, 10, 10, 0.92);
  color: var(--text-on-dark);
}

.heatmap-scale {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.heatmap-scale span[data-level] {
  width: 26px;
  height: 10px;
  background: var(--ink-900);
}

.heatmap-scale span[data-level="1"] {
  background: rgba(10, 10, 10, 0.12);
}
.heatmap-scale span[data-level="2"] {
  background: rgba(10, 10, 10, 0.3);
}
.heatmap-scale span[data-level="3"] {
  background: rgba(10, 10, 10, 0.55);
}
.heatmap-scale span[data-level="4"] {
  background: rgba(10, 10, 10, 0.75);
}
.heatmap-scale span[data-level="5"] {
  background: rgba(10, 10, 10, 0.92);
}

@media (max-width: 760px) {
  /* Reflow wykresów: zostaje wartość i trend, znika siatka i etykiety osi */
  .chart__canvas {
    height: 160px;
  }

  .risk-gauge {
    gap: var(--space-4);
  }
}