/*
  Sonuç durumları: rozet, gösterge ve bulgu noktaları
  Bu renkler marka yeşilinden ayrıdır ve sadece analiz sonuçlarında kullanılır.
*/

.badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.badge--low {
  background: var(--status-low-bg);
  color: var(--status-low-text);
}

.badge--low::before {
  background: var(--status-low);
}

.badge--caution {
  background: var(--status-caution-bg);
  color: var(--status-caution-text);
}

.badge--caution::before {
  background: var(--status-caution);
}

.badge--high {
  background: var(--status-high-bg);
  color: var(--status-high-text);
}

.badge--high::before {
  background: var(--status-high);
}

/* Veri yetersiz: risk değil, bilgi eksikliği */
.badge--unknown {
  background: var(--status-unknown-bg);
  color: var(--status-unknown-text);
}

.badge--unknown::before {
  border: 1.5px solid var(--status-unknown);
  background: transparent;
}

/* Üç parçalı risk göstergesi */
.meter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 6px;
}

.meter__segment {
  height: 4px;
  border-radius: 4px;
  background: var(--color-line);
}

.meter__segment.is-filled {
  background: var(--status-caution);
}

/* Bulgu satırının başındaki renkli nokta */
.finding {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}

.finding::before,
.status-dot {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.finding--low::before,
.status-dot--low {
  background: var(--status-low);
}

.finding--caution::before,
.status-dot--caution {
  background: var(--status-caution);
}

.finding--high::before,
.status-dot--high {
  background: var(--status-high);
}

.finding--unknown::before,
.status-dot--unknown {
  border: 1.5px solid var(--status-unknown);
  background: transparent;
}

.status-dot {
  display: inline-block;
}