/* spectrum-platform-next/styles/views-usage.css
   Usage dashboard + cross-event roll-up. Ported visual language from
   spectrum-platform-pages/styles.css (.usage-*) but rebuilt on the new app's
   design tokens (tokens.css). Mobile-first: tiles wrap, tables scroll, charts
   stay usable at phone width. */

/* ── Page shell ─────────────────────────────────────────────────────────────── */
/* min-height + visible overflow (was height:100% + overflow-y:auto): the %
   height never resolved (#app is min-height, so the flex chain isn't definite)
   — the page grew and the DOCUMENT scrolled while the dead overflow-y:auto
   still counted as the nearest scrollport, which silently disabled
   position:sticky on the event sub-header inside. Scrolling stays on the
   document; the sticky header now pins against the viewport. */
.usage-page,
.usage-rollup-page {
  min-height: 100%;
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  color: var(--text-1);
  font-family: var(--font-ui);
  box-sizing: border-box;
}

/* Header — reuses the slate band identity from the original .usage-header. */
.usage-page > .usage-header,
.usage-rollup-page > .usage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  margin: calc(-1 * var(--s4)) calc(-1 * var(--s4)) 0;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.usage-title { display: flex; align-items: center; gap: var(--s3); min-width: 0; flex: 1; }
.usage-title-text { display: flex; align-items: baseline; gap: var(--s3); min-width: 0; flex-wrap: wrap; }
.usage-title-text h1 {
  font-size: 18px; font-weight: 600; margin: 0; color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.usage-runtime { color: var(--text-muted); font-size: 13px; font-family: var(--font-mono); }
.usage-actions { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; flex-wrap: wrap; }

/* Event-shell Usage header reuses the monitor's .m-subhdr band verbatim — single
   source of truth for height / padding / --bg-1 color, so it's identical to the
   Live/Replay bar. We only (a) bleed it past the .usage-page padding so it's flush
   and full-width like the monitor's, and (b) shrink Usage's own action buttons +
   runtime meta to that compact scale. The back arrow is gone — the event title is
   the link back to the events list (the tab selectors only switch within an event). */
/* Match the Live tab exactly: 12px horizontal content inset (Live's .m-body pad)
   instead of the page's 16px, and an 8px header→first-content gap (Live's .m-body
   top pad) instead of the page's 24px flex gap. The header stays full-bleed (its
   horizontal margin matches the new 12px pad); other sections keep their 24px gap. */
.usage-page { padding-left: 12px; padding-right: 12px; }
.usage-page > .usage-subhdr { margin: calc(-1 * var(--s4)) -12px calc(8px - var(--s5)); }
.usage-subhdr .usage-btn { height: 22px; padding: 0 10px; font-size: 11.5px; }
.usage-subhdr .usage-btn svg { width: 13px; height: 13px; }
.usage-subhdr .usage-runtime { font-size: 12px; }

/* Embedded in the monitor shell's Usage tab: the shell's persistent header +
   tabs sit above, and .m-body provides the scroll + 12px inset — so the page
   drops its own height/padding. Refresh/Export/Share are folded into the stats
   row (right side), not a separate toolbar; the runtime stays in its KPI tile. */
.usage-page.usage-embedded { min-height: 0; padding: 0; gap: var(--s4); }
/* Stats row = KPI tiles (flex-grow) + action buttons (right). Non-embedded views
   only have the tiles child, so it just fills the row (no visual change). */
.usage-statrow { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.usage-statrow > .usage-tiles { flex: 1 1 320px; min-width: 0; }
.usage-statrow > .usage-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; flex: 0 0 auto; }
/* Left source-health dot — matches the monitor's aggregate dot (.m-aggdot.ok),
   but self-contained here since that class is injected only by the monitor. */
.usage-aggdot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--live); box-shadow: 0 0 8px var(--live); }

/* Buttons (header + modals) — match the app's .btn-secondary look. */
.usage-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  background: var(--bg-raised); color: var(--text-1); border: 1px solid var(--border);
  border-radius: var(--r-sm); cursor: pointer; line-height: 1;
}
.usage-btn:hover { background: var(--border); }
.usage-btn-primary { background: var(--accent-strong); border-color: transparent; color: #fff; }
.usage-btn-primary:hover { background: var(--accent); }
.usage-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── KPI tiles (banded) ─────────────────────────────────────────────────────── */
.usage-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s3);
}
.usage-tile {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--r-md); padding: var(--s4) var(--s4) var(--s3);
  border-left: 3px solid var(--border);
}
.usage-tile-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s2);
}
.usage-tile-value {
  font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--text-1);
  font-variant-numeric: tabular-nums; line-height: 1;
}
/* Color banding (active/total ratio + time-weighted util). */
.usage-tile[data-color="green"]  { border-left-color: var(--ok); }
.usage-tile[data-color="green"]  .usage-tile-value { color: var(--ok); }
.usage-tile[data-color="yellow"] { border-left-color: var(--warn); }
.usage-tile[data-color="yellow"] .usage-tile-value { color: var(--warn); }
.usage-tile[data-color="red"]    { border-left-color: var(--danger); }
.usage-tile[data-color="red"]    .usage-tile-value { color: var(--danger); }

/* ── Chart panel ────────────────────────────────────────────────────────────── */
.usage-chart-panel,
.usage-owner-panel {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--r-md); padding: var(--s4);
}
.usage-chart-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  margin-bottom: var(--s3); flex-wrap: wrap;
}
.usage-chart-title { font-size: 13px; font-weight: 600; color: var(--text-1); }
.usage-window-label {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 12px; color: var(--text-muted); flex-wrap: wrap;
}
.usage-window-select {
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text-1); font-size: 13px; padding: 5px 8px; cursor: pointer;
}
.usage-custom-summary { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }

.usage-chart { width: 100%; min-height: 240px; position: relative; }
.usage-chart-fallback {
  display: flex; align-items: center; justify-content: center; min-height: 200px;
  color: var(--text-muted); font-size: 13px; font-style: italic;
}
.usage-chart-caption {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
  margin-top: var(--s2); text-align: center;
}

/* uPlot dark-theme overrides so it reads on the card background. */
.usage-chart .u-axis, .usage-modal-chart .u-axis { color: var(--text-muted); }
.usage-chart .uplot, .usage-modal-chart .uplot { width: 100% !important; }
.usage-chart .u-title { color: var(--text-2); }

/* Empty-state banner (no activity in window). */
.usage-chart-empty {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s3); padding: var(--s3) var(--s4);
  background: var(--bg-2); border: 1px dashed var(--border); border-radius: var(--r-sm);
}
.usage-chart-empty-icon { color: var(--warn); flex-shrink: 0; }
.usage-chart-empty-title { font-size: 13px; font-weight: 600; color: var(--text-1); }
.usage-chart-empty-hint { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ── Chart legend (pinnable owner chips) ────────────────────────────────────── */
.usage-chart-legend { margin-top: var(--s3); }
.usage-legend-caption { font-size: 11px; color: var(--text-muted); margin-bottom: var(--s2); }
.usage-legend-chips { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.usage-legend-item {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2);
}
.usage-legend-item.is-zero { opacity: .6; }
.usage-legend-chip { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.usage-legend-zero { color: var(--text-muted); font-style: italic; }
.usage-legend-pin {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: 2px;
  color: var(--text-muted); border-radius: var(--r-sm); line-height: 1;
}
.usage-legend-pin:hover { color: var(--text-1); background: var(--bg-raised); }
.usage-legend-pin.is-pinned { color: var(--warn); }

/* ── Owner table ────────────────────────────────────────────────────────────── */
.usage-owner-panel-head { font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: var(--s3); }
.usage-owner-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.usage-owner-table {
  width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text-1);
}
.usage-owner-table th {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted); padding: 8px 12px; text-align: left;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.usage-owner-table th.num, .usage-owner-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.usage-owner-table td.num { font-family: var(--font-mono); }
.usage-owner-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.usage-owner-table tbody tr:hover td { background: var(--bg-raised); }
.usage-owner-empty { text-align: center; color: var(--text-muted); padding: 16px; font-style: italic; }

.usage-owner-name { display: flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.usage-row-pin, .usage-row-expand {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: 3px;
  color: var(--text-muted); border-radius: var(--r-sm); line-height: 1;
  min-width: 26px; min-height: 26px;
}
.usage-row-pin:hover, .usage-row-expand:hover { color: var(--text-1); background: var(--bg-raised); }
.usage-row-pin.is-pinned { color: var(--warn); }
.usage-row-name-btn {
  background: none; border: none; cursor: pointer; color: var(--text-1);
  font: inherit; font-weight: 500; padding: 2px 0; text-align: left;
}
.usage-row-name-btn:hover { color: var(--accent); text-decoration: underline; }
.usage-owner-expand { text-align: right; }

/* ── Status line ────────────────────────────────────────────────────────────── */
.usage-status { font-size: 12px; color: var(--text-muted); min-height: 16px; font-family: var(--font-mono); }

/* ── Modals (custom range, marker breakdown) ────────────────────────────────── */
.usage-modal-overlay {
  position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center;
  background: rgba(5, 7, 10, .72); backdrop-filter: blur(2px); padding: var(--s4);
}
.usage-modal {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px);
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
}
.usage-modal-markers { width: min(820px, calc(100vw - 32px)); }
.usage-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4) var(--s4) var(--s3); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0;
}
.usage-modal-header h3 { font-size: 14px; font-weight: 600; color: var(--text-1); margin: 0; }
.usage-modal-close {
  background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px;
  padding: 2px 6px; border-radius: var(--r-sm); line-height: 1;
}
.usage-modal-close:hover { color: var(--text-1); background: var(--bg-raised); }
.usage-modal-body { padding: var(--s4); overflow-y: auto; flex: 1; color: var(--text-1); font-size: 13px; }
.usage-modal-row { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); flex-wrap: wrap; }
.usage-modal-row > label:first-child { min-width: 70px; color: var(--text-2); font-size: 13px; }
.usage-modal-row input[type="date"],
.usage-modal-row input[type="text"],
.usage-modal-row select {
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text-1); font-size: 13px; padding: 6px 8px; min-height: 32px;
}
.usage-modal-row input[type="text"] { flex: 1; min-width: 0; }
.usage-modal-actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s4); }
.usage-range-hint { color: var(--text-muted); font-size: 12px; margin: 0 0 var(--s3); }
.usage-range-error { color: var(--danger); font-size: 12px; margin-top: var(--s2); }

/* ── Share modal ────────────────────────────────────────────────────────────── */
.usage-share-body { display: flex; flex-direction: column; }
.usage-share-scope-opts { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.usage-share-scope-opts label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-2); }
.usage-share-created { display: flex; gap: var(--s2); align-items: center; margin: var(--s3) 0; flex-wrap: wrap; }
.usage-share-created input {
  flex: 1; min-width: 180px; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text-1); font-family: var(--font-mono); font-size: 12px; padding: 7px 9px;
}
.usage-share-sep { border: none; border-top: 1px solid var(--border-subtle); margin: var(--s4) 0; }
.usage-share-h { font-size: 12px; font-weight: 600; color: var(--text-2); margin: 0 0 var(--s2); }

.usage-modal-tokens { width: 100%; border-collapse: collapse; font-size: 12px; }
.usage-modal-tokens th {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.usage-modal-tokens th.num, .usage-modal-tokens td.num { text-align: right; font-variant-numeric: tabular-nums; }
.usage-modal-tokens td { padding: 7px 8px; border-bottom: 1px solid var(--border-subtle); color: var(--text-2); vertical-align: middle; }
.usage-token-label { color: var(--text-1); font-weight: 500; }
.usage-share-note { margin: 0 0 var(--s2); font-size: 11px; color: var(--text-muted); }
.usage-token-scope { color: var(--text-muted); font-size: 11px; }
.usage-token-actions { display: flex; align-items: center; gap: var(--s2); justify-content: flex-end; white-space: nowrap; }
.usage-token-revoke {
  background: none; border: 1px solid var(--border); color: var(--danger); border-radius: var(--r-sm);
  font-size: 11px; padding: 3px 8px; cursor: pointer;
}
.usage-token-revoke:hover { background: var(--danger-dim); }
.usage-token-revoke:disabled { opacity: .5; cursor: not-allowed; }
.usage-token-disabled { color: var(--text-muted); font-size: 11px; font-style: italic; }

/* ── Marker-breakdown modal ─────────────────────────────────────────────────── */
.usage-modal-chart { width: 100%; min-height: 240px; margin-bottom: var(--s4); position: relative; }
.usage-modal-loading, .usage-modal-empty, .usage-modal-error, .usage-modal-fallback {
  display: flex; align-items: center; justify-content: center; min-height: 200px;
  color: var(--text-muted); font-size: 13px; font-style: italic; text-align: center;
}
.usage-modal-error { color: var(--danger); }
.usage-modal-markers-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.usage-modal-markers-table th {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.usage-modal-markers-table th.num, .usage-modal-markers-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.usage-modal-markers-table td { padding: 7px 8px; border-bottom: 1px solid var(--border-subtle); color: var(--text-1); }
.usage-marker-row { cursor: pointer; }
.usage-marker-row:hover > td { background: var(--bg-raised); }
.usage-marker-row.is-marker-pinned > td { background: var(--accent-soft); }
.usage-marker-pin-cell, .usage-marker-chevron { width: 26px; }
.usage-marker-pin {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px;
  background: none; border: none; cursor: pointer; color: var(--text-muted); border-radius: var(--r-sm);
}
.usage-marker-pin:hover { color: var(--text-1); background: var(--bg-2); }
.usage-marker-pin.is-pinned { color: var(--warn); }
.usage-marker-chevron { color: var(--text-muted); }

.usage-marker-sessions-cell { padding: 0 !important; background: var(--bg-2); }
.usage-marker-sessions-loading, .usage-marker-sessions-error, .usage-marker-sessions-empty {
  padding: var(--s3) var(--s4); font-size: 12px; color: var(--text-muted);
}
.usage-marker-sessions-error { color: var(--danger); }
.usage-marker-sessions-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.usage-marker-sessions-table th {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); padding: 6px var(--s4); text-align: left;
  border-bottom: 1px solid var(--border-subtle); text-transform: uppercase; letter-spacing: .06em;
}
.usage-marker-sessions-table th.num, .usage-marker-sessions-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.usage-marker-sessions-table td { padding: 6px var(--s4); color: var(--text-2); border-bottom: 1px solid var(--border-subtle); }
.usage-modal-status {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  margin-top: var(--s4); font-size: 12px; color: var(--text-muted);
}

/* ── Cross-event roll-up ────────────────────────────────────────────────────── */
.usage-rollup-status { font-size: 13px; color: var(--text-muted); }
.usage-rollup-scope {
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text-1); font-size: 13px; padding: 6px 10px; cursor: pointer; min-width: 180px; min-height: 32px;
}
.usage-rollup-tablewrap {
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.usage-rollup-table, .usage-rollup-events-table {
  width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text-1);
}
.usage-rollup-table th {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.usage-rollup-table th.num, .usage-rollup-table td.num,
.usage-rollup-events-table th.num, .usage-rollup-events-table td.num {
  text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono);
}
.usage-rollup-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.usage-rollup-row { cursor: pointer; }
.usage-rollup-row:hover > td { background: var(--bg-raised); }
.usage-rollup-row.is-expanded > td { background: var(--bg-2); }
.usage-rollup-chevron { width: 24px; color: var(--text-muted); }
.usage-rollup-name { font-weight: 500; color: var(--text-1); white-space: nowrap; }
.usage-rollup-spark { min-width: 140px; }
.usage-rollup-sparkline { display: flex; align-items: center; gap: 2px; height: 14px; }
.usage-rollup-spark-bar { height: 8px; background: var(--accent); border-radius: var(--r-pill); opacity: .8; min-width: 2px; }

.usage-rollup-events-cell { padding: 0 !important; background: var(--bg-0); }
.usage-rollup-events-table { font-size: 12px; }
.usage-rollup-events-table th {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); padding: 6px 12px 6px 40px; text-align: left;
  border-bottom: 1px solid var(--border-subtle); text-transform: uppercase; letter-spacing: .06em;
}
.usage-rollup-events-table th.num { padding-left: 12px; }
.usage-rollup-events-table td { padding: 6px 12px; color: var(--text-2); border-bottom: 1px solid var(--border-subtle); }
.usage-rollup-events-table td:first-child { padding-left: 40px; }
.usage-rollup-event-link { color: var(--accent); text-decoration: none; }
.usage-rollup-event-link:hover { text-decoration: underline; }

.usage-rollup-range-label { display: flex; flex-direction: column; gap: var(--s1); font-size: 12px; color: var(--text-2); margin-bottom: var(--s3); }
.usage-rollup-range-actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s3); }

/* ── Mobile tweaks ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .usage-page > .usage-header,
  .usage-rollup-page > .usage-header { padding: var(--s3) var(--s4); align-items: flex-start; }
  .usage-header .usage-actions { width: 100%; }
  .usage-tile-value { font-size: 22px; }
  .usage-modal { width: 100%; max-height: 92vh; }
  .usage-modal-markers { width: 100%; }
  .usage-chart-header { align-items: flex-start; }
}