/* Admin usage report: KPI row and nested drill-down tables. Tokens only; tables reuse tables.css. */
.container--wide { max-width: var(--wide-width); }
@media (min-width: 1200px) { .container--wide { padding-inline: var(--space-6); } }
.usage-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-3); }
.usage-kpi { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-1); }
.usage-kpi__label { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.usage-kpi__value { color: var(--color-text); font-size: var(--text-xl); font-weight: 600; overflow-wrap: anywhere; }
.usage-table td.usage-num, .usage-table th:nth-child(n + 3) { text-align: right; }
.usage-table .request-id { font-size: var(--text-xs); }
.usage-detail > td { padding: var(--space-3) var(--space-4); background: var(--color-surface-muted); }
.usage-detail .table-wrap { box-shadow: none; }
@media (max-width: 767px) {
  .usage-table td.usage-num { text-align: left; }
  .usage-detail { padding: 0; border: 0; box-shadow: none; background: transparent; }
  .usage-detail > td { display: block; padding: 0; background: transparent; }
}