/* Usage history: the daily-usage bar chart (columns, bars, axis, legend) and the
   credit ledger rows, including the shared empty state. */

/* ---------- Daily usage chart ---------- */
.chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  height: 9rem;
  padding-top: var(--space-3);
  /* One continuous axis under all 30 columns. Per-column dashes were clipped to
     4px of an 8px column at 375 and read as absent days rather than quiet ones. */
  border-bottom: 1px solid var(--chart-track);
}
.chart-col {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: background-color var(--transition-fast);
}
/* Every column carries a tooltip, so every column must show it is hoverable -
   including zero-usage days, which have no bar to highlight. --secondary rather
   than --muted: --muted is ~1.09:1 on the card and the wash was imperceptible. */
.chart-col:hover {
  background-color: var(--secondary);
}
.chart-bar {
  width: 100%;
  min-height: 3px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--chart-bar);
  opacity: 0.82;
  transition:
    opacity var(--transition-fast),
    background-color var(--transition-fast);
}
.chart-col:hover .chart-bar {
  opacity: 1;
  background: var(--info);
}
.chart-axis {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  color: var(--muted-foreground);
  font-size: var(--text-2xs);
  font-feature-settings: "tnum";
}
.chart-legend {
  margin-top: var(--space-3);
  color: var(--muted-foreground);
  font-size: var(--text-xs);
}

/* ---------- Ledger ---------- */
.ledger {
  display: flex;
  flex-direction: column;
}
.ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.ledger-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.ledger-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.ledger-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.ledger-when {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-feature-settings: "tnum";
}
.ledger-detail {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  /* break-word, not anywhere: only a genuinely over-long single token may be
     chopped, so model names keep their internal hyphens intact. */
  overflow-wrap: break-word;
}
.ledger-part.is-atomic {
  white-space: nowrap;
}
.ledger-amounts {
  text-align: right;
  white-space: nowrap;
}
.ledger-delta {
  font-size: var(--text-base);
  font-weight: 600;
  font-feature-settings: "tnum";
}
.ledger-delta.is-credit {
  color: var(--success);
}
.ledger-delta.is-debit {
  color: var(--foreground);
}
.ledger-after {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted-foreground);
  font-size: var(--text-2xs);
  font-feature-settings: "tnum";
}
.empty-state {
  padding: var(--space-6) 0;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  text-align: center;
}