/* Admin API-usage page (admin.html). Layout and admin-specific pieces only; buttons, cards, tables,
 * KPIs, pills and badges come from components.css. Tokens only. */

.admin-topbar { gap: var(--space-sm); }
.admin-title { font-size: var(--fs-headline-sm); font-weight: var(--fw-headline-sm); white-space: nowrap; }
.admin-back { color: var(--text); }
.admin-live-dot { width: var(--space-sm); height: var(--space-sm); border-radius: 50%; background: var(--text-secondary); flex-shrink: 0; }
.admin-live-dot.live { background: var(--primary); animation: ts-pulse 2s ease-in-out infinite; }
.admin-header-controls { display: flex; align-items: center; gap: var(--space-sm); margin-left: auto; min-width: 0; }
.admin-range-group { overflow-x: auto; scrollbar-width: none; }
.admin-range-group::-webkit-scrollbar { display: none; }
.admin-range-group { padding: var(--space-xs); margin: calc(-1 * var(--space-xs)); } /* room for focus rings inside the scroller */
.admin-refresh-btn.spinning svg { animation: ts-spin 0.8s linear infinite; }

.admin-status-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; min-height: 32px; }
.admin-updated { font-size: var(--fs-body-sm); color: var(--text-secondary); }
.admin-updated.is-error { color: var(--error); }
.admin-client-chip {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xxs) var(--space-xxs) var(--space-xxs) var(--space-md); border-radius: var(--radius-pill);
  background: var(--neutral-pill); color: var(--on-neutral-pill);
  font-size: var(--fs-label-lg); font-weight: var(--fw-label-lg); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-chip-clear {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--on-neutral-pill); cursor: pointer;
}
.admin-chip-clear:focus-visible { outline-offset: -2px; } /* the chip clips overflow, so draw the ring inside */
.admin-chip-clear:hover { background: var(--disabled-bg); }

.admin-error-banner { border: 1px solid var(--error); }
.admin-error-banner > svg { width: var(--icon-size); height: var(--icon-size); color: var(--error); flex-shrink: 0; }
.admin-error-banner__text { flex: 1; min-width: 0; }

/* KPI row: auto-fit cards (5 / 3 / 2 per row by width). */
.admin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--gutter); }
.admin-kpis .kpi__value { font-size: var(--fs-display-sm); }
.kpi__value.is-warning { color: var(--warning); }
.kpi__value.is-error { color: var(--error); }
.kpi__skeleton { height: 36px; width: 60%; }

.admin-panel { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.admin-panel-subtitle { font-size: var(--fs-body-sm); color: var(--text-secondary); }
.admin-panel-subtitle code { color: var(--text); }
.admin-panel-title { display: inline-flex; align-items: center; gap: var(--space-sm); }

/* Requests chart: hand-rolled SVG bars (admin.js); fills from tokens via classes. */
.admin-legend { gap: var(--space-md); }
.admin-legend__item { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--fs-label-md); color: var(--text-secondary); }
.admin-legend__swatch { width: var(--space-sm); height: var(--space-sm); border-radius: 2px; background: var(--text-secondary); }
.admin-legend__swatch--error { background: var(--error); }
.admin-chart-wrap { height: 200px; display: flex; align-items: stretch; }
.admin-chart-wrap svg { width: 100%; height: 100%; }
.admin-bar { fill: var(--text-secondary); }
.admin-bar:hover { fill: var(--text); }
.admin-bar--error { fill: var(--error); }
.admin-chart-empty { margin: auto; color: var(--text-secondary); font-size: var(--fs-body-md); }
.admin-chart-skeleton { width: 100%; height: 100%; border-radius: var(--radius-sm); }

/* Live log */
.admin-log-live-indicator { width: var(--space-sm); height: var(--space-sm); border-radius: 50%; background: var(--text-secondary); }
.admin-log-live-indicator.live { background: var(--primary); }
.admin-log-toolbar { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.admin-log-filter-input { flex: 1 1 260px; font-family: var(--font-mono); font-size: var(--fs-body-sm); }
.admin-log-btn.active { background: var(--neutral-pill); color: var(--on-neutral-pill); border-color: transparent; }
.admin-log-count { font-variant-numeric: tabular-nums; }
.admin-log-table-wrap { max-height: 400px; overflow: auto; }
.admin-log-table-wrap .table td { font-size: var(--fs-body-sm); }

/* Tables */
.admin-table-wrap { min-width: 0; }
.admin-table td:nth-child(2), .admin-table td.path-cell { max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.admin-row-clickable { cursor: pointer; }
/* The drill-down control looks like the cell text it replaces; the focus ring comes from base.css. */
.admin-row-link {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.admin-row-link:hover { text-decoration: underline; }
.admin-unattributed { color: var(--text-secondary); font-style: italic; }
.admin-empty { padding: var(--space-lg) var(--space-md); font-size: var(--fs-body-md); color: var(--text-secondary); }

/* Status badges: neutral for 2xx, gold for 4xx, red for 5xx (status colours, never a fifth accent). */
.admin-badge {
  display: inline-flex; padding: var(--space-xxs) var(--space-sm); border-radius: var(--radius-pill);
  border: 1px solid var(--outline); color: var(--text-secondary);
  font-size: var(--fs-label-md); font-weight: var(--fw-label-md); font-variant-numeric: tabular-nums;
}
.admin-badge.status-4xx { color: var(--warning); border-color: var(--warning); }
.admin-badge.status-5xx { color: var(--error); border-color: var(--error); }

.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.admin-panel--wide { grid-column: 1 / -1; }

@media (max-width: 1023px) {
  .admin-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .admin-topbar { flex-wrap: wrap; }
  .admin-header-controls { flex: 1 1 100%; order: 3; margin-left: 0; justify-content: space-between; }
  .admin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
  .admin-kpis .kpi__value { font-size: var(--fs-title-lg); }
  .admin-table td { height: var(--row-height-dense); }
}

/* Activation codes (admin-codes.js). Tokens only. */
.admin-codes { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
.admin-codes-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--space-md);
  padding: var(--space-md); border: 1px solid var(--outline-variant); border-radius: var(--radius-sm);
}
.admin-codes-form[hidden], .admin-codes-created[hidden], .admin-codes-detail[hidden] { display: none; }
.admin-codes-form__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); grid-column: 1 / -1; align-items: center; }
.admin-codes-form .field__help { grid-column: 1 / -1; }
.admin-codes-inline { display: flex; gap: var(--space-sm); }
.admin-codes-inline > * { min-width: 0; flex: 1; }
.admin-codes-created, .admin-codes-detail {
  display: flex; flex-direction: column; gap: var(--space-sm);
  padding: var(--space-md); border: 1px solid var(--outline-variant); border-radius: var(--radius-sm); min-width: 0;
}
.admin-codes-created__text { font-family: var(--font-mono); resize: vertical; }
.admin-codes-subhead { font-size: var(--fs-title-md); font-weight: var(--fw-title-md); margin: 0; }
.admin-codes-filters { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; justify-content: space-between; }
.admin-codes-search { flex: 1 1 200px; min-width: 0; max-width: 320px; }
.admin-codes-codebtn { font-family: var(--font-mono); white-space: nowrap; }
.admin-codes-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-xs) var(--space-md); margin: 0; }
.admin-codes-dl dt { color: var(--text-secondary); font-size: var(--fs-body-sm); }
.admin-codes-dl dd { margin: 0; overflow-wrap: anywhere; }
.admin-code-status { font-size: var(--fs-label-md); font-weight: var(--fw-label-lg); }
.admin-code-status--active { color: var(--success); }
.admin-code-status--exhausted, .admin-code-status--expired { color: var(--text-secondary); }
.admin-code-status--revoked { color: var(--error); }
.admin-codes-audit summary { cursor: pointer; padding: var(--space-xs) 0; }