/* Diagramm-Bausteine. Alle Farben kommen aus den Tokens in app.css. */

.chart{width:100%}
/* Hoehe folgt der Breite, damit das Bild nicht verzerrt wird. Die Obergrenze
   verhindert, dass das Diagramm auf sehr breiten Bildschirmen den halben
   Bildschirm einnimmt. */
.chart-svg{width:100%;height:auto;max-height:340px;display:block;overflow:visible}
.chart-svg .bar{transition:opacity .12s}
.chart-svg:hover .bar{opacity:.55}
.chart-svg .bar:hover{opacity:1}

.legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px;font-size:13px;color:var(--ink-2)}
.legend-item{display:inline-flex;align-items:center;gap:7px;font-weight:550}
.legend-item i{width:11px;height:11px;border-radius:3px;display:inline-block;flex:0 0 11px}

.chart-tip{
  position:fixed;z-index:400;pointer-events:none;
  background:var(--ink);color:var(--surface);
  padding:8px 11px;border-radius:9px;font-size:12.5px;line-height:1.5;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.5);white-space:nowrap;
}
.chart-tip b{font-weight:650}

/* Rangfolge (waagerechte Balken) */
.ranked{display:flex;flex-direction:column;gap:11px}
.ranked-row{display:grid;grid-template-columns:minmax(110px,1.3fr) 3fr auto;gap:12px;align-items:center}
.ranked-label{font-size:13.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranked-track{background:var(--surface-3);border-radius:99px;height:9px;overflow:hidden}
.ranked-fill{height:100%;background:var(--series-1);border-radius:99px;transition:width .3s ease-out}
.ranked-value{font-size:13.5px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}

.spark{width:100%;height:32px;display:block;margin-top:8px;opacity:.9}

/* Umschalter Bild / Tabelle */
.chart-switch{display:flex;gap:2px;background:var(--surface-3);padding:3px;border-radius:9px}
.chart-switch button{
  border:none;background:transparent;color:var(--ink-3);cursor:pointer;
  padding:5px 11px;border-radius:7px;font-size:12.5px;font-weight:600;
}
.chart-switch button.active{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}

@media (max-width:980px){
  .ranked-row{grid-template-columns:minmax(84px,1fr) 2fr auto;gap:9px}
  .ranked-label{font-size:12.5px}
  .ranked-value{font-size:12.5px}
}