/* Console monitoring page. Chart colours were validated for colour-blind separation and contrast in both themes:
   light #3155f5 / #d03b3b on #fff, dark #5f7ff5 / #e66767 on #141d2d. Text always uses ink tokens, never series colours. */
.usage-monitor{
  --viz-series:#3155f5;--viz-critical:#d03b3b;--viz-grid:#edf0f6;--viz-axis:#cfd6e6;--viz-track:#eef1f8;--viz-hover:#f3f5fb;
  --viz-tip:#1b2030;--viz-tip-text:#fff;--viz-tip-muted:#b9c1d6;
  --viz-mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;
}
html[data-theme=dark] .usage-monitor{
  --viz-series:#5f7ff5;--viz-critical:#e66767;--viz-grid:#222d43;--viz-axis:#34425e;--viz-track:#1d2840;--viz-hover:#19233a;
  --viz-tip:#e9eefa;--viz-tip-text:#10182a;--viz-tip-muted:#4d5a75;
}

.mon-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.mon-tabs button{min-height:44px;padding:0 16px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font:500 14px inherit;white-space:nowrap;cursor:pointer;margin-bottom:-1px}
.mon-tabs button:hover{color:var(--ink)}
.mon-tabs button[aria-selected=true]{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}

.mon-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:18px 0 8px}
.mon-segment{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--viz-hover)}
.mon-segment button{min-height:36px;padding:0 12px;border:0;border-right:1px solid var(--border);background:transparent;color:var(--ink);font:500 12px inherit;white-space:nowrap;cursor:pointer}
.mon-segment button:last-child{border-right:0}
.mon-segment button[aria-pressed=true]{background:var(--blue);color:#fff}
html[data-theme=dark] .mon-segment button[aria-pressed=true]{background:#3453d9}
.mon-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
.mon-filters select{width:auto;min-width:132px;max-width:190px;min-height:36px;margin:0;font-size:12px}
.mon-check{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin:0;font-size:12px;color:var(--muted);white-space:nowrap;cursor:pointer}
.mon-check input{width:auto;min-height:0;margin:0}
.usage-monitor :is(.mon-tabs button,.mon-segment button,.mon-col,.mon-filters select,summary,.text-button):focus-visible{outline:3px solid #91a7ff;outline-offset:-2px}
.mon-note{margin:0 0 18px;font-size:12px;line-height:1.6;color:var(--muted)}

.usage-monitor .mon-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
.mon-tile strong{display:block;margin-top:8px;font:600 23px/1.15 var(--viz-mono);letter-spacing:-.6px;font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
.mon-panel{margin-bottom:18px}
.mon-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}

/* Column chart: thin bars from one baseline, 2px surface gaps, recessive grid, one shared tooltip. */
.mon-chart{padding:4px 20px 18px}
.mon-chart-body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px}
.mon-y{height:180px;display:flex;flex-direction:column;justify-content:space-between;text-align:right;font:500 10px/1 var(--viz-mono);color:var(--muted);transform:translateY(-4px)}
.mon-scroll{overflow-x:auto;overflow-y:visible;padding-top:2px}
.mon-plot{position:relative}
.mon-cols{height:180px;display:flex;align-items:stretch;gap:2px;border-bottom:1px solid var(--viz-axis);
  background:linear-gradient(var(--viz-grid),var(--viz-grid)) 0 0/100% 1px no-repeat,linear-gradient(var(--viz-grid),var(--viz-grid)) 0 50%/100% 1px no-repeat}
.mon-col{flex:1 1 0;min-width:0;padding:0;border:0;border-radius:4px 4px 0 0;background:transparent;display:flex;justify-content:center;cursor:default}
.mon-col:is(:hover,:focus-visible){background:var(--viz-hover)}
.mon-stack{width:100%;max-width:24px;height:100%;display:flex;flex-direction:column-reverse;gap:2px}
.mon-stack i{display:block;flex:none;min-height:2px}
.mon-stack i:last-child{border-radius:4px 4px 0 0}
.usage-monitor i.series{background:var(--viz-series)}
.usage-monitor i.critical{background:var(--viz-critical)}
.mon-xs{display:flex;gap:2px;height:16px;margin-top:7px}
.mon-x{flex:1 1 0;min-width:0;font:500 10px/1 var(--viz-mono);color:var(--muted);white-space:nowrap}
.mon-tip{position:absolute;top:6px;z-index:2;transform:translateX(-50%);display:grid;gap:4px;min-width:128px;padding:9px 11px;border-radius:8px;background:var(--viz-tip);color:var(--viz-tip-text);font-size:12px;line-height:1.3;white-space:nowrap;pointer-events:none;box-shadow:0 10px 26px -12px #0b122599}
.mon-tip[hidden]{display:none}
.mon-tip-title{font:500 10px/1.2 var(--viz-mono);color:var(--viz-tip-muted)}
.mon-tip-row{display:flex;align-items:center;gap:6px}
.mon-tip-row b{font:600 12px var(--viz-mono);font-variant-numeric:tabular-nums}
.mon-tip-row span{color:var(--viz-tip-muted)}
.mon-key{display:inline-block;flex:none;width:10px;height:3px;border-radius:2px}
.mon-legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 10px;padding:0;font-size:12px;color:var(--ink)}
.mon-legend li{display:flex;align-items:center;gap:7px}
.mon-legend .mon-key{height:10px}
.mon-table-view{margin-top:14px;font-size:12px}
.mon-panel>.mon-table-view{margin:0;padding:0 20px 16px}
.mon-panel>.table-wrap{border-top:1px solid var(--border)}
.mon-table-view summary{width:max-content;color:var(--blue);font-weight:500;cursor:pointer;padding:4px 0}
.mon-table-view .table-wrap{margin-top:8px;max-height:260px;overflow:auto;border:1px solid var(--border);border-radius:8px}

/* Ranked bars: magnitude, so one hue; the value sits at the bar end as text. */
.mon-bars{list-style:none;margin:0;padding:4px 20px 18px;display:grid;gap:11px}
.mon-bars li{display:grid;grid-template-columns:minmax(84px,1.1fr) minmax(0,2.2fr) auto 46px;gap:12px;align-items:center;font-size:13px;color:var(--ink)}
.mon-bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mon-bar-track{display:block;height:10px;border-radius:0 4px 4px 0;background:var(--viz-track)}
.mon-bar-track i{display:block;height:100%;min-width:2px;border-radius:0 4px 4px 0;background:var(--viz-series)}
.mon-bars b{font:600 12px var(--viz-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.mon-bars small{font-size:11px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.mon-inline{display:grid;grid-template-columns:64px auto;gap:8px;align-items:center;white-space:nowrap}

.mon-explore-controls{display:flex;flex-wrap:wrap;gap:12px 26px;margin-bottom:16px}
.mon-explore-controls>div{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;font-size:12px;color:var(--muted)}
.mon-list-tools{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:0 20px 14px}
.mon-search{display:flex;flex-wrap:wrap;gap:8px}
.mon-search input{width:230px;max-width:100%;min-height:36px;margin:0;font:12px var(--viz-mono)}
.mon-list-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:14px 20px;font-size:12px;color:var(--muted)}
.mon-detail td{background:var(--viz-hover)}
.mon-detail dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 18px;margin:0;font:12px/1.5 var(--viz-mono)}
.mon-detail dt{color:var(--muted)}
.mon-detail dd{margin:0;overflow-wrap:anywhere;color:var(--ink)}
.mon-detail[hidden]{display:none}
.mon-empty{padding:44px 20px;text-align:center}
.mon-empty h3{margin:0 0 6px;font-size:16px}
.mon-empty p{margin:0 0 16px;color:var(--muted);font-size:13px}

@media(max-width:1180px){.usage-monitor .mon-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){
  .mon-split{grid-template-columns:minmax(0,1fr)}
  .mon-filters{margin-left:0;width:100%}
}
@media(max-width:720px){
  .usage-monitor .mon-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mon-toolbar>.mon-segment{display:flex;width:100%}
  .mon-segment button{flex:1 1 0;min-width:0;min-height:44px;padding:0 6px;overflow:hidden;text-overflow:ellipsis}
  .mon-explore-controls .mon-segment{flex-wrap:wrap}
  .mon-filters select{flex:1 1 140px;max-width:none;min-height:44px}
  .mon-chart{padding:4px 14px 16px}
  .mon-bars{padding:4px 14px 16px}
  .mon-bars li{grid-template-columns:minmax(0,1fr) auto 42px;gap:4px 10px}
  .mon-bar-track{grid-column:1/-1;grid-row:2}
  .mon-list-tools,.mon-list-foot{padding-left:14px;padding-right:14px}
  .mon-search input{width:100%}
}
.mon-filters .mon-tag-value{width:150px;min-height:36px;margin:0;font-size:12px;padding:7px 10px}
.mon-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.mon-tag{font:11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;padding:1px 6px;border-radius:4px;background:#eef2ff;color:#4b5f9e;white-space:nowrap}
html[data-theme=dark] .mon-tag{background:#1f2c52;color:#b5c7ff}
.mon-key-cell{display:grid;gap:5px;max-width:230px}.mon-key-cell b{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mon-key-cell code{font-size:11px;color:var(--muted);white-space:nowrap}

/* Request log (sub2api-style): every row opens the details drawer. */
.mon-row-hint{margin:0;padding:0 23px 12px}
/* Beats html[data-theme] .workspace td (workspace-polish.css) so eleven columns fit at 1440 px. */
html[data-theme] .usage-monitor .mon-request-table :is(th,td){padding:12px 8px;vertical-align:top}
html[data-theme] .usage-monitor .mon-request-table :is(th,td):first-child{padding-left:20px}
html[data-theme] .usage-monitor .mon-request-table :is(th,td):last-child{padding-right:20px}
.mon-request-table .row-id{margin-top:3px}
.usage-monitor .mon-request-table td.mono{font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums}
.mon-request-row{cursor:pointer;transition:background .12s}
.mon-request-row:hover,.mon-request-row:focus-within{background:var(--viz-hover)}
.usage-monitor .mon-request-table .mon-model-link{display:block;min-height:0;padding:2px 0;font-size:12px;font-weight:600;color:var(--ink);text-align:left}
.usage-monitor .mon-request-table .mon-model-link:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.usage-monitor .mon-model-link:focus-visible{outline:3px solid #91a7ff;outline-offset:2px;border-radius:3px}
.badge.pending{color:#9a6511;background:#fff5e2}
.badge.inflight{color:#3155f5;background:#eef2ff}
html[data-theme=dark] .badge.pending{color:#f2c27a;background:#3f3220}
html[data-theme=dark] .badge.inflight{color:#a9bbff;background:#1f2a4a}
.mon-detail{display:grid;gap:22px}
.mon-detail-section h3{margin:0 0 2px;font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--blue)}
.mon-detail-section .detail-fields>div{padding:11px 0}
.mon-detail-section .detail-fields dd.mono{font-variant-numeric:tabular-nums}
.mon-detail-section .mon-note{margin:10px 0 0}
@media(prefers-reduced-motion:reduce){.mon-request-row{transition:none}}
.mon-provider{display:block;font-size:11px;font-weight:600;color:var(--muted)}
.mon-error-code{max-width:88px;overflow:hidden;text-overflow:ellipsis}
.mon-customer-cell :is(b,small){display:block;max-width:120px;overflow:hidden;text-overflow:ellipsis}
/* One label column in the request drawer, whatever the shared drawer grid does elsewhere. */
html[data-theme] .mon-detail .detail-fields{grid-template-columns:minmax(0,1fr)}
html[data-theme] .mon-detail .detail-fields>div{grid-template-columns:120px minmax(0,1fr);gap:16px}
/* Narrow screens scroll the log sideways inside its panel instead of clipping the right-hand columns. */
.mon-request-wrap{overflow-x:auto;overscroll-behavior-x:contain}
.mon-refresh{min-height:36px;margin:0;font-size:12px}.mon-refresh[aria-busy=true]{cursor:progress;opacity:.6}