/* Usage page: where spend and quota actually go, per account and per API token.
   Cards, bars, badges, chips and the segmented control come from shell.css and
   console.css; only what is specific to this page lives here. */

.usage-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.usage-toolbar-left {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px;
}
.usage-toolbar-meta { color: var(--subtle); font-size: 10.5px; font-weight: 700; }
.tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 15px; height: 15px; padding: 0 4px; margin-left: 6px;
  border-radius: 99px; background: var(--danger); color: #fff;
  font-size: 9px; font-weight: 850; line-height: 1;
}

.metric-value.bad { color: var(--danger); }
.metric-value.ok { color: var(--accent-2); }
.usage-metrics { gap: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
.usage-metrics .metric { min-height: 88px; padding: 12px 15px; border: 0; border-right: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; }
.usage-metrics .metric:last-child { border-right: 0; }
.usage-metrics .metric-icon { width: 22px; height: 22px; border: 0; border-radius: 0; background: rgb(86 217 255 / 8%); }
.usage-metrics .metric-value { margin-top: 7px; }
.usage-panel + .usage-panel { margin-top: 12px; }
.usage-panel .panel-body { padding: 0; }

.usage-table-scroll { overflow-x: auto; }
.usage-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.usage-table th, .usage-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.usage-table th { color: var(--subtle); font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.usage-table th button { display: inline-flex; gap: 5px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-transform: inherit; }
.usage-table th button:hover { color: var(--text); }
.usage-table th button span { min-width: 8px; color: var(--accent); }
.usage-table tbody tr:hover { background: rgb(86 217 255 / 3%); }
.usage-table tbody tr:last-child td { border-bottom: 0; }
.usage-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.usage-table td strong { color: var(--text); font-weight: 750; }
.usage-table td small { display: block; max-width: 420px; margin-top: 2px; overflow: hidden; color: var(--subtle); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.usage-primary { min-width: 190px; color: var(--text); font-weight: 720; }
.usage-table-empty { height: 74px; color: var(--subtle); text-align: center !important; }

.usage-state { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-2); font-size: 10.5px; font-weight: 750; white-space: nowrap; }
.usage-state::before { width: 6px; height: 6px; background: currentColor; content: ''; }
.usage-state.bad, .usage-state.disabled, .usage-state.spent { color: var(--danger); }
.usage-state.warn, .usage-state.near-limit { color: var(--warn); }
.usage-when { min-width: 140px; color: var(--warn); font-size: 10.5px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.usage-when.unknown { color: var(--subtle); }
.usage-routes { display: flex; max-width: 330px; flex-wrap: wrap; gap: 4px; }
.usage-routes .route-chip { margin: 0; padding: 0; border: 0; border-radius: 0; }

.usage-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--border); color: var(--subtle); font-size: 10px; font-variant-numeric: tabular-nums; }
.usage-pager button { width: 28px; height: 26px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text); font-size: 11px; }
.usage-pager button:hover:not(:disabled) { border-color: var(--accent); }
.usage-pager button:disabled { opacity: .3; cursor: default; }

.usage-token-controls { display: flex; align-items: center; gap: 8px; }
.usage-token-controls input { width: min(210px, 35vw); height: 30px; padding: 0 9px; border: 1px solid var(--border); border-radius: 6px; outline: 0; background: var(--surface); color: var(--text); font-size: 10.5px; }
.usage-token-controls input:focus { border-color: var(--accent); }

@media (max-width: 680px) {
  .usage-toolbar { align-items: stretch; flex-direction: column; }
  .usage-token-controls { width: 100%; }
  .usage-token-controls input { width: 100%; }
  .usage-table { min-width: 680px; }
}

@media (max-width: 1100px) {
  .usage-metrics .metric:nth-child(2) { border-right: 0; }
  .usage-metrics .metric:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}