/*
 * Observability admin view stylesheet (.obs-* prefix).
 *
 * Spec: .claude/specs/admin-tools-redesign/ Phase 2 sweep (2026-05-02).
 * Extracted from JS-injected `<style>` block in pwa/views/observability.js
 * (textContent template at lines ~33-70). All `rgba(255,255,255,N)`
 * overlays converted to color-mix(...) tokens. New modifier classes for
 * the inline-style overrides (~31 sites → 0).
 *
 * Chart palette: 7 named colors (completed/failed/input/output/calls/
 * sonnet/opus) defined as CSS custom properties so observability.js can
 * read them via getComputedStyle without owning hex literals.
 */

:root {
  --obs-chart-completed: #94c4a3; /* success-tinted green */
  --obs-chart-failed:    #ffb4ab; /* error-tinted red */
  --obs-chart-input:     #b5c4ff; /* primary-tinted blue */
  --obs-chart-output:    #a6e6ff; /* info-tinted cyan */
  --obs-chart-calls:     #d4b593; /* warning-tinted amber */
  --obs-chart-sonnet:    #b5c4ff;
  --obs-chart-opus:      #b8c7e1;
}

.obs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 0;
}
.obs-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-on-surface, var(--text));
}
.obs-time-range { display: flex; gap: var(--space-xs); }
.obs-time-btn {
  padding: 4px 10px;
  border-radius: var(--radius-tight);
  font-size: 12px;
  font-weight: 600;
  border: none;
  background: var(--color-surface-container, var(--bg2));
  color: var(--color-on-surface-variant, var(--hint));
  cursor: pointer;
}
.obs-time-btn.active {
  background: var(--color-primary, var(--btn));
  color: var(--color-on-primary, var(--btn-text));
}
.obs-tabs-host { padding: 12px 16px 0; }
.obs-content { padding: 0 16px 16px; }
.obs-chart-wrap { margin-bottom: var(--space-sm); }
.obs-chart-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-surface, var(--text));
  margin-bottom: var(--space-base);
}
.obs-chart {
  width: 100%;
  height: 120px;
}
.obs-section { margin-bottom: var(--space-sm); }
.obs-row {
  display: flex;
  align-items: center;
  gap: var(--space-base);
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
}
.obs-row:last-child { border-bottom: none; }
.obs-row--clickable { cursor: pointer; }
.obs-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.obs-dot-green { background: var(--color-success); }
.obs-dot-yellow { background: var(--color-warning); }
.obs-dot-red { background: var(--color-error); }
.obs-dot-gray { background: var(--color-on-surface-variant); }
.obs-name {
  flex: 1;
  font-size: 13px;
  color: var(--color-on-surface, var(--text));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.obs-meta {
  font-size: 11px;
  color: var(--color-on-surface-variant, var(--hint));
  flex-shrink: 0;
}
.obs-meta--ml-4 { margin-left: var(--space-xs); }
.obs-btn {
  padding: 6px 12px;
  border-radius: var(--radius-tight);
  font-size: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}
.obs-btn:active { opacity: 0.7; }
.obs-btn-primary {
  background: var(--color-primary, var(--btn));
  color: var(--color-on-primary, var(--btn-text));
}
.obs-btn-danger {
  background: transparent;
  color: var(--color-error);
  border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
}
.obs-btn-muted {
  background: var(--color-surface, var(--bg));
  color: var(--color-on-surface-variant, var(--hint));
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent);
}
.obs-btn--xs {
  padding: 2px 8px;
  font-size: 10px;
}
.obs-controls {
  display: flex;
  gap: var(--space-base);
  margin-bottom: var(--space-sm);
}
.obs-bar-row { margin-bottom: var(--space-tight); }
.obs-bar-label {
  font-size: 12px;
  color: var(--color-on-surface-variant, var(--hint));
  width: 70px;
  text-align: right;
  flex-shrink: 0;
}
.obs-bar-track {
  flex: 1;
  height: 16px;
  background: color-mix(in srgb, var(--color-on-surface) 6%, transparent);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.obs-bar-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 0.3s;
  width: var(--obs-bar-w, 0%);
  background: var(--obs-bar-color, var(--color-primary));
}
.obs-bar-val {
  font-size: 11px;
  color: var(--color-on-surface-variant, var(--hint));
  width: 40px;
  flex-shrink: 0;
}
.obs-load-more { text-align: center; padding: var(--space-sm); }
.obs-load-more button {
  padding: 8px 20px;
  border-radius: var(--radius-default);
  font-size: 13px;
  font-weight: 600;
  background: var(--color-surface-container, var(--bg2));
  color: var(--color-on-surface-variant, var(--hint));
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent);
  cursor: pointer;
}

/* Phase 2 modifier classes — replace inline style="…" overrides */
.obs-loading {
  padding: var(--space-md);
  text-align: center;
  color: var(--color-on-surface-variant, var(--hint));
}
.obs-section-header-fallback {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: var(--space-base);
}
.obs-success-rate {
  font-weight: 400;
  color: var(--color-on-surface-variant, var(--hint));
  font-size: 11px;
}
.obs-legend {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-tight);
  font-size: 11px;
  color: var(--color-on-surface-variant);
}
.obs-legend-swatch {
  display: inline-block;
  width: 8px;
  height: 3px;
  border-radius: var(--radius-sm);
  margin-right: var(--space-xs);
  background: var(--obs-legend-color, var(--color-primary));
}
.obs-legend-swatch--ok       { background: var(--color-success); }
.obs-legend-swatch--fail     { background: var(--color-error); }
.obs-legend-swatch--input    { background: var(--color-primary); }
.obs-legend-swatch--output   { background: var(--color-tertiary); }

.obs-deferred-meta {
  font-size: 12px;
  color: var(--color-on-surface-variant, var(--hint));
}
.obs-pause-reason {
  font-size: 12px;
  color: var(--color-on-surface-variant, var(--hint));
  align-self: center;
}
.obs-event-time {
  font-size: 11px;
  color: var(--color-on-surface-variant, var(--hint));
  width: 52px;
  flex-shrink: 0;
}
.obs-event-detail {
  padding: 0 0 4px 60px;
  font-size: 11px;
  color: var(--color-on-surface-variant, var(--hint));
  line-height: 1.3;
}
.obs-job-row {
  display: flex;
  align-items: center;
  gap: var(--space-base);
  padding: 4px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface) 4%, transparent);
  flex-wrap: wrap;
}
.obs-job-name-col {
  flex: 1;
  min-width: 0;
}
.obs-job-actions {
  display: flex;
  gap: var(--space-tight);
  align-items: center;
  flex-wrap: wrap;
  margin-left: var(--space-base);
}

/* Fallback tab buttons (mountTabStrip absent) */
.obs-tab-fallback {
  padding: 8px 14px;
  border: none;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--color-on-surface-variant, var(--hint));
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.obs-tab-fallback.active {
  background: var(--color-surface-container, var(--bg2));
  color: var(--color-on-surface, var(--text));
}