/**
 * CSS Niveau 3 — Modale Diagnostics (diagnostics.css)
 */
.diagnostics-modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.diagnostics-health-badge {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-family: var(--font-family-display);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.diagnostics-health-badge.is-healthy {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
}

.diagnostics-health-badge.is-warning {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}

.diagnostics-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.diag-item {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}

.diag-title {
  font-weight: 700;
  color: #f87171;
  font-size: var(--font-size-xs);
}

.diag-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.diagnostics-sub-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-text-primary);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.diagnostics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
}

.diagnostics-table th,
.diagnostics-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.diagnostics-table th {
  color: var(--color-text-muted);
  font-weight: 600;
}

.diagnostics-table td {
  color: var(--color-text-secondary);
  font-family: var(--font-family-mono);
}