/* Usage and Console page styles, scoped under .page-usage and .page-console. */

.page-console .console-wrap { max-width: 72rem; }
.page-usage .usage-wrap { max-width: 64rem; }

:is(.page-usage, .page-console) {
  & .nowrap { white-space: nowrap; }
  & .stack { grid-template-columns: minmax(0, 1fr); }
  & .tabs, & .tab-panel { min-width: 0; }
  & .console-toolbar { gap: 0.5rem; }
  & .console-toolbar .panel-title { font-size: var(--text-base, 1rem); }

  /* stats and meters */
  & .stat-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
  & .card-title { font-size: var(--text-base); }
  & .usage-body > .card { padding-block: 1.25rem; gap: 1rem; }
  @media (max-width: 480px) {
    & .usage-body .card :is(.card-header, .card-content) { padding-inline: 1rem; }
    & .stat .card-content { padding-inline: 1rem; }
    & .stat-value { font-size: var(--text-xl); }
  }
  & .stat { gap: 0; padding-block: 1.25rem; }
  & .stat .card-content { gap: 0.375rem; padding-inline: 1.25rem; }
  & .stat-value { text-align: left; font-size: var(--text-2xl); line-height: 2rem; font-weight: 600; letter-spacing: -0.025em; }
  & .meter { position: relative; height: 0.375rem; overflow: hidden; border-radius: var(--radius-full); background: var(--muted); }
  & .meter-fill { display: block; height: 100%; border-radius: inherit; background: var(--chart-2); transition: width var(--duration-slow) var(--ease); }
  & .meter-high .meter-fill { background: var(--warning); }
  & .meter-over .meter-fill { background: var(--destructive); }

  /* bar charts, drawn at the host's width */
  & .bar-chart { width: 100%; min-height: 184px; overflow: hidden; }
  & .bar-chart-svg { display: block; max-width: 100%; }
  & .grid-line { stroke: var(--border); stroke-width: 1; }
  & .axis-label { fill: var(--muted-foreground); font-size: 11px; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
  & .bar-chart-requests { --bar: var(--chart-2); }
  & .bar-chart-cost { --bar: var(--chart-1); }
  & .bar { fill: var(--bar); transition: opacity var(--duration) var(--ease); }
  & .bar:hover { opacity: 0.75; }
  & .bar-zero { fill: var(--border); }

  /* sparklines in tables */
  & .sparkline { display: block; width: 7.5rem; height: 1.5rem; }
  & .spark-bar { fill: var(--chart-2); }
  & .spark-zero { fill: var(--border); }

  /* limits */
  & .limit-list { display: grid; gap: 0; }
  & .limit-row {
    display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; row-gap: 0.125rem; align-items: baseline;
    padding-block: 0.625rem; border-bottom: 1px solid var(--border); font-size: var(--text-sm);
  }
  & .limit-row:last-child { border-bottom: 0; }
  & .limit-row dd.num { font-weight: 600; }
  & .limit-row dd.muted { grid-column: 1 / -1; }

  & .usage-details summary { cursor: pointer; color: var(--muted-foreground); padding-block: 0.25rem; border-radius: var(--radius-sm); }
  & .usage-details summary:hover { color: var(--foreground); }
  & .usage-details summary:focus-visible { outline: none; box-shadow: var(--ring-shadow); }
  & .usage-details[open] summary { margin-bottom: 0.5rem; }

  & .table .num { font-variant-numeric: tabular-nums; }
  & .table tfoot th, & .table tfoot td { border-top: 1px solid var(--border); font-weight: 600; }
}

/* console */
.page-console {
  & .console-back { margin-bottom: 0.5rem; margin-inline-start: -0.75rem; }
  & .page-header .row { gap: 0.5rem 0.75rem; }
  & .console-identity { margin-bottom: 2rem; }
  & .console-identity-card { padding-block: 1rem; }
  & .identity-list { display: grid; gap: 0.75rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); font-size: var(--text-sm); }
  & .identity-list dt { font-size: var(--text-xs); color: var(--muted-foreground); margin-bottom: 0.125rem; }
  & .identity-list dd { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; overflow-wrap: anywhere; }
  & .console-section { margin-top: 0.5rem; }
  & .console-link { font-weight: 500; color: var(--foreground); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--foreground) 30%, transparent); text-underline-offset: 3px; border-radius: var(--radius-sm); }
  & .console-link:hover { color: var(--accent-text); text-decoration-color: currentColor; }
  & .console-link:focus-visible { outline: none; box-shadow: var(--ring-shadow); }

  & .console-tabs-scroll { min-width: 0; max-width: 100%; overflow-x: auto; }
  & .console-tabs { width: max-content; max-width: none; }
  & .tab-panel { padding-top: 1rem; }
  & .tab-panel:focus-visible { outline: none; box-shadow: var(--ring-shadow); border-radius: var(--radius-md); }

  & .key-label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-weight: 500; }
  & .key-actions { flex-wrap: nowrap; gap: 0.25rem; }
  & .console-keys td, & .console-audit td { vertical-align: middle; }
  & .audit-details { display: grid; gap: 0.125rem; font-size: var(--text-xs); }
  & .audit-details div { display: flex; flex-wrap: wrap; gap: 0.375rem; }
  & .audit-details dt { color: var(--muted-foreground); }
  & .audit-details dd { overflow-wrap: anywhere; }

  & .json-editor { min-height: 20rem; max-height: 70vh; font-size: var(--text-xs); line-height: 1.25rem; tab-size: 2; white-space: pre; overflow: auto; field-sizing: fixed; }
  & .console-settings { max-width: 40rem; }
}

/* dialogs render outside the page root */
.dialog {
  & .console-fieldset { border: 0; padding: 0; margin: 0; }
  & .token-input { font-size: var(--text-xs); }
}
.token-dialog .alert { text-align: left; }

@media (prefers-reduced-motion: reduce) {
  :is(.page-usage, .page-console) :is(.meter-fill, .bar) { transition: none; }
}