/**
 * SunMonitor — Badge component CSS (Fase 4.2)
 *
 * Geconsolideerd uit style.css (~r148-153) en refresh.css (~r1332-1363).
 * refresh.css regels overschrijven style.css regels — daarom hier in dezelfde
 * volgorde: eerst legacy compact-styling, dan refresh-overrides.
 *
 * JS counterpart: /js/components/badge.js
 */

/* Legacy variants (compact mono-stijl uit style.css) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  border-radius: 12px;
  font-family: var(--mono);
  font-size: 10px;
}
.bg { background: rgba(5,150,105,.08);  color: var(--green); border: 1px solid rgba(5,150,105,.15); }
.br { background: rgba(220,38,38,.08);  color: var(--red);   border: 1px solid rgba(220,38,38,.12); }
.by { background: rgba(212,160,23,.08); color: #a16207;      border: 1px solid rgba(212,160,23,.15); }
.bb { background: rgba(3,105,161,.08);  color: var(--sky);   border: 1px solid rgba(3,105,161,.12); }
.bo { background: rgba(217,119,6,.08);  color: var(--sun);   border: 1px solid rgba(217,119,6,.12); }

/* Refresh-stijl (uniform pill, hogere specificity via .badge.X) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.5;
}

.badge.bg {  /* success */
  background: var(--color-success-soft);
  color: var(--color-success-active);
}

.badge.bb {  /* info / blue */
  background: var(--color-info-soft);
  color: var(--color-info-active);
}

.badge.br {  /* danger */
  background: var(--color-danger-soft);
  color: var(--color-danger-active);
}

.badge.bw {  /* warning */
  background: rgba(217, 119, 6, 0.12);
  color: #9a6700;
}

/* ─── Timeline status badges (tickets/storingen tabel) ─────────────
   Onafhankelijk van timeline-kind: gebruikt eigen sterkere stijl. */
.timeline-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.timeline-status .timeline-status-ico {
  font-size: 10px;
  font-weight: normal;
}
.timeline-status.is-red {
  color: #991b1b;
  background: #fee2e2;
  border-color: #fca5a5;
}
.timeline-status.is-amber {
  color: #92400e;
  background: #fed7aa;
  border-color: #fdba74;
}
.timeline-status.is-green {
  color: #166534;
  background: #d1fae5;
  border-color: #86efac;
}
.timeline-status.is-blue {
  color: #1e3a8a;
  background: #dbeafe;
  border-color: #93c5fd;
}
.timeline-status.is-gray {
  color: #374151;
  background: #e5e7eb;
  border-color: #d1d5db;
}

/* Verlies-pill voor timeline-rij (kWh + EUR per event) */
.timeline-loss-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  white-space: nowrap;
}