/* 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; }

/* Stacked columns, one per day; a status mark sits above its column so a small count stays readable next to a big one. */
.cols { --cols-h: 240px; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; }
.cols-y { position: relative; height: var(--cols-h); font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.cols-y span { position: absolute; right: 0; line-height: 1; transform: translateY(50%); }
.cols-plot {
  display: grid; align-items: end; height: var(--cols-h); border-bottom: 1px solid var(--line-strong);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px); background-size: 100% 33.333%;
}
.cols-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; border-radius: var(--r-s) var(--r-s) 0 0; transition: background .12s ease; }
.cols-col:hover { background: var(--brand-soft); }
.cols-stack {
  display: flex; flex-direction: column; flex: none; gap: 2px; width: min(56%, 30px); overflow: hidden; border-radius: 4px 4px 0 0;
  transform-origin: bottom; animation: cols-grow .7s var(--ease) both; animation-delay: calc(var(--day, 0) * 30ms + .25s);
}
.cols-seg { display: block; flex: 0 0 0; min-height: 0; }
@keyframes cols-grow { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: none; } }
.cols-mark { display: inline-flex; align-items: center; gap: 3px; margin-bottom: 4px; font-size: 10px; font-weight: 600; line-height: 1; color: var(--bad); font-variant-numeric: tabular-nums; }
.cols-mark::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--bad); }
.cols-x { grid-column: 2; display: grid; margin-top: 7px; font-size: 11px; color: var(--ink-4); text-align: center; white-space: nowrap; }

.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: 760px) {
  .cols { --cols-h: 190px; grid-template-columns: 34px minmax(0, 1fr); column-gap: 4px; }
  .cols-x { font-size: 10px; }
  .cols-x span:not(:nth-child(3n+1)) { visibility: hidden; }
  .cols-mark { gap: 0; font-size: 0; }
}

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