/* app/assets/stylesheets/components/badges.css
   ─────────────────────────────────────────────────────────────────────────────
   Pill badges. Used for seat_type, status, risk level, confidence rating.
   ───────────────────────────────────────────────────────────────────────────── */

.badge {
  display:        inline-flex;
  align-items:    center;
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height:    1;
  padding:        3px 8px;
  border-radius:  var(--radius-pill);
  white-space:    nowrap;
  border:         1px solid transparent;
}

/* ── Seat type badges ────────────────────────────────────────────────────── */

/* Seniority ramp, brightest at the top: on dark surfaces a black pill is
   invisible, so president inverts to a light chip instead. */
.badge--seat {
  background: var(--bg-raised);
  color:      var(--text-primary);
}

.badge--seat-president  { background: var(--color-white);    color: var(--color-ink-950); }
.badge--seat-governor   { background: var(--color-blue-900); color: var(--color-white); }
.badge--seat-senator    { background: var(--color-blue-700); color: var(--color-white); }
.badge--seat-mp         { background: var(--color-blue-600); color: var(--color-white); }
.badge--seat-woman-rep  { background: var(--color-blue-500); color: var(--color-white); }
.badge--seat-mca        { background: var(--color-gray-700); color: var(--color-white); }
.badge--seat-party-role { background: var(--color-gray-500); color: var(--color-white); }

/* ── Status badges ───────────────────────────────────────────────────────── */
/* Tinted fills — translucent, so they sit on any surface in the dark stack. */

.badge--status-exploratory { background: var(--tint-neutral-bg); color: var(--tint-neutral-text); border-color: var(--tint-neutral-border); }
.badge--status-declared    { background: var(--tint-blue-bg);    color: var(--tint-blue-text);    border-color: var(--tint-blue-border); }
.badge--status-active      { background: var(--tint-green-bg);   color: var(--tint-green-text);   border-color: var(--tint-green-border); }
.badge--status-suspended   { background: var(--tint-amber-bg);   color: var(--tint-amber-text);   border-color: var(--tint-amber-border); }
.badge--status-withdrawn   { background: var(--tint-neutral-bg); color: var(--tint-neutral-text); border-color: var(--tint-neutral-border); }
.badge--status-elected     { background: var(--tint-green-bg);   color: var(--tint-green-text);   border-color: var(--tint-green-border); }
.badge--status-defeated    { background: var(--tint-red-bg);     color: var(--tint-red-text);     border-color: var(--tint-red-border); }

/* ── Risk level badges ───────────────────────────────────────────────────── */

.badge--risk-low      { background: var(--tint-green-bg);  color: var(--tint-green-text);  border-color: var(--tint-green-border); }
.badge--risk-medium   { background: var(--tint-amber-bg);  color: var(--tint-amber-text);  border-color: var(--tint-amber-border); }
.badge--risk-high     { background: var(--tint-red-bg);    color: var(--tint-red-text);    border-color: var(--tint-red-border); }
.badge--risk-critical { background: var(--color-red-600);  color: var(--color-white);      border-color: var(--color-red-600); }

/* ── Confidence badges ───────────────────────────────────────────────────── */

.badge--confidence-high         { background: var(--tint-green-bg);   color: var(--tint-green-text);   border-color: var(--tint-green-border); }
.badge--confidence-medium       { background: var(--tint-blue-bg);    color: var(--tint-blue-text);    border-color: var(--tint-blue-border); }
.badge--confidence-low          { background: var(--tint-amber-bg);   color: var(--tint-amber-text);   border-color: var(--tint-amber-border); }
.badge--confidence-insufficient { background: var(--tint-neutral-bg); color: var(--tint-neutral-text); border-color: var(--tint-neutral-border); }

/* ── Invitation status badges ────────────────────────────────────────────── */

.badge--pending  { background: var(--tint-blue-bg);    color: var(--tint-blue-text);    border-color: var(--tint-blue-border); }
.badge--accepted { background: var(--tint-green-bg);   color: var(--tint-green-text);   border-color: var(--tint-green-border); }
.badge--revoked  { background: var(--tint-neutral-bg); color: var(--tint-neutral-text); border-color: var(--tint-neutral-border); }
.badge--expired  { background: var(--tint-red-bg);     color: var(--tint-red-text);     border-color: var(--tint-red-border); }

/* ── Sentiment direction badges ──────────────────────────────────────────── */

.badge--rising   { background: var(--tint-green-bg);   color: var(--tint-green-text); }
.badge--stable   { background: var(--tint-neutral-bg); color: var(--tint-neutral-text); }
.badge--declining{ background: var(--tint-red-bg);     color: var(--tint-red-text); }

/* ── Monitoring badges ───────────────────────────────────────────────────── */

.badge--monitoring-on  { background: var(--tint-green-bg);   color: var(--tint-green-text); }
.badge--monitoring-off { background: var(--tint-neutral-bg); color: var(--tint-neutral-text); }