/* ============================================================================
   DIAGNOSTICS.CSS — extracted from components.css
   Single-owner rules for this module. Loaded eagerly right after
   components.css so the cascade order is unchanged.
   ============================================================================ */

/* ============================================================================
   Diagnostics Dashboard — SLO gauges (conic-gradient circles)
   ============================================================================ */

.diag-wrap { width: 100%; }

.diag-gauges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.slo-gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.slo-gauge {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(
    var(--gauge-color, var(--success)) calc(var(--gauge-pct, 100%) * 1),
    var(--border) 0
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.slo-gauge::before {
  content: '';
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--surface);
}

.slo-gauge-value {
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text);
}

.slo-gauge-label {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  max-width: 80px;
  font-family: var(--font-mono);
}

/* ============================================================================
   Diagnostics Dashboard — SLO cards
   ============================================================================ */

.diag-slo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.slo-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-xs);
}

.slo-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}

.slo-card-header strong { font-size: 13px; flex: 1; }

.slo-card-body { display: flex; flex-direction: column; gap: var(--sp-2); }

.slo-card-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  font-size: 13px;
}

.slo-card-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  min-width: 80px;
}

/* Status badges */
.diag-status-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.diag-status-met      { background: rgb(22 163 74 / 10%);  color: var(--success); border: 1px solid rgb(22 163 74 / 30%); }
.diag-status-at-risk  { background: rgb(217 119 6 / 10%);  color: var(--warning); border: 1px solid rgb(217 119 6 / 30%); }
.diag-status-breached { background: rgb(220 38 38 / 10%);  color: var(--danger);  border: 1px solid rgb(220 38 38 / 30%); }
.diag-status-no-data  { background: var(--surface-alt);    color: var(--text-muted); border: 1px solid var(--border); }

.burn-rate { font-weight: 700; font-family: var(--font-mono); font-size: 13px; }
.diag-burn-ok   { color: var(--success); }
.diag-burn-warn { color: var(--warning); }
.diag-burn-crit { color: var(--danger); }

.diag-slo-edit {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.diag-slo-edit label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 12px;
  color: var(--text-secondary);
}

.diag-slo-edit input {
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  width: 100px;
}

.diag-slo-edit-btns { display: flex; gap: var(--sp-2); margin-top: var(--sp-1); }

.diag-refresh-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

/* ============================================================================
   Diagnostics Dashboard — System info
   ============================================================================ */

.system-info-section {
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border);
}

.system-info-section:last-child { border-bottom: none; }

.diag-ok-banner {
  padding: var(--sp-2) var(--sp-4);
  background: rgb(22 163 74 / 10%);
  color: var(--success);
  border: 1px solid rgb(22 163 74 / 30%);
  border-radius: var(--r-sm);
  font-size: 13px;
  margin-bottom: var(--sp-3);
}

/* ============================================================================
   Diagnostics Dashboard — Smoke tests
   ============================================================================ */

.diag-smoke-wrap { width: 100%; }

.diag-smoke-header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.diag-smoke-ts { font-size: 12px; color: var(--text-muted); }
.diag-smoke-summary { font-size: 13px; color: var(--text-secondary); margin-bottom: var(--sp-3); }
.diag-smoke-output pre { font-size: 10px; margin: 0; white-space: pre-wrap; word-break: break-all; max-height: 80px; overflow-y: auto; }

.smoke-result-pass { background: rgb(22 163 74 / 10%);  color: var(--success); border: 1px solid rgb(22 163 74 / 30%); }
.smoke-result-fail { background: rgb(220 38 38 / 10%);  color: var(--danger);  border: 1px solid rgb(220 38 38 / 30%); }
.smoke-result-skip { background: var(--surface-alt);    color: var(--text-muted); border: 1px solid var(--border); }

/* ============================================================================
   Diagnostics Dashboard — Monitors
   ============================================================================ */

.monitor-card { min-width: 140px; }
.diag-monitor-note { font-size: 12px; color: var(--text-muted); margin-top: var(--sp-4); }

/* Toasts */
.diag-toast { padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm); font-size: 13px; margin-bottom: var(--sp-3); }
.diag-toast-error { background: rgb(220 38 38 / 10%); color: var(--danger); border: 1px solid rgb(220 38 38 / 30%); }