/* Chart furniture around the svg that charts.js draws: legends, bar lists, progress, the hover tip. */

.chart-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-3); }
.chart-legend.col { flex-direction: column; gap: 8px; margin-top: 14px; }
.chart-legend span { display: flex; align-items: center; gap: 7px; }
.chart-legend i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.chart-legend b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }

.hbars { display: flex; flex-direction: column; gap: 10px; }
.hbar { display: grid; grid-template-columns: minmax(0, 150px) 1fr 84px; gap: 12px; align-items: center; }
.hbar .hb-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-s); }
.hbar .hb-l em { display: block; font-style: normal; font-size: var(--fs-2xs); color: var(--ink-4); }
.hbar .hb-t { height: 8px; border-radius: var(--r-full); background: var(--panel-3); overflow: hidden; }
.hbar .hb-t i { display: block; height: 100%; border-radius: var(--r-full); background: var(--c1); transition: width .5s var(--ease); }
.hbar .hb-v { text-align: right; font-size: var(--fs-s); font-weight: 600; font-variant-numeric: tabular-nums; }

.prog { height: 6px; border-radius: var(--r-full); background: var(--panel-3); overflow: hidden; }
.prog > i { display: block; height: 100%; border-radius: var(--r-full); background: var(--brand); }
.prog > i.ok { background: var(--ok); }
.prog > i.warn { background: var(--warn); }
.prog > i.bad { background: var(--bad); }

/* A chart card stretches its svg to fill the card. */
.card:has(> .chartfill) { display: flex; flex-direction: column; }
.card > .chartfill { flex: 1; display: flex; flex-direction: column; }
.card > .chartfill > div { flex: 1; display: flex; flex-direction: column; }
.card > .chartfill svg { flex: 1; min-height: 0; width: 100%; height: auto; }

.chart-tip {
  position: absolute; top: 4px; z-index: 4; display: flex; flex-direction: column; gap: 3px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--panel); box-shadow: var(--sh-pop);
  font-size: var(--fs-xs); white-space: nowrap; pointer-events: none;
}
.chart-tip .ct-l { font-size: var(--fs-2xs); color: var(--ink-4); }
.chart-tip .ct-r { display: flex; align-items: center; gap: 6px; }
.chart-tip .ct-r i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.chart-tip .ct-n { color: var(--ink-3); }
.chart-tip .ct-r b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .hbar { grid-template-columns: 1fr 60px; }
  .hbar .hb-t { grid-column: 1 / -1; }
}