/* ========================================
   Pills — shared platform-wide pill/badge component.

   Bugs, incidents, alerts, and anything else that needs a coloured
   status/priority chip should use these classes. The colour palette
   is bound to the semantic --color-alert-* tokens in
   tokens/theme-eligtas.css, so one palette change lands everywhere.

   Usage:
     <span class="pill pill-info">in_progress</span>
     <span class="pill pill-warning">pending</span>
     <select class="bf-select pill-critical">…</select>

   Modifier classes (pill-*) work standalone too — they can be
   applied to an element that already has its own base styling
   (e.g. a <select>) to tint it with the palette colour. Load
   this file AFTER component-specific CSS so the tint wins on
   equal specificity.
   ======================================== */

.pill {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: var(--radius-sm, 0.25rem);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--color-border, rgba(148, 163, 184, 0.2));
  font-family: var(--font-family-mono, ui-monospace, monospace);
  line-height: 1.3;
}

/* Size modifier — slightly denser padding/size for table rows. */
.pill-sm { padding: 0.08rem 0.45rem; font-size: 0.66rem; }

/* ----------------------------------------------------------------
   Palette modifiers — bound to --color-alert-* tokens.

   Foreground text colours are the visual "light" counterparts of
   each alert hue. Kept as literals for now; if we add
   --color-alert-*-light tokens later, swap these to var() refs.
   ---------------------------------------------------------------- */
.pill-critical {
  background: rgba(var(--color-alert-critical), 0.15);
  color: #fca5a5;
  border-color: rgba(var(--color-alert-critical), 0.3);
}
.pill-warning {
  background: rgba(var(--color-alert-warning), 0.12);
  color: #fcd34d;
  border-color: rgba(var(--color-alert-warning), 0.3);
}
.pill-info {
  background: rgba(var(--color-alert-info), 0.15);
  color: #93c5fd;
  border-color: rgba(var(--color-alert-info), 0.3);
}
.pill-safe {
  background: rgba(var(--color-alert-safe), 0.12);
  color: #86efac;
  border-color: rgba(var(--color-alert-safe), 0.3);
}
.pill-pending {
  background: rgba(var(--color-alert-pending), 0.1);
  color: var(--color-text-secondary, #94a3b8);
  border-color: rgba(var(--color-alert-pending), 0.2);
}
.pill-cancelled {
  background: rgba(var(--color-alert-pending), 0.08);
  color: var(--color-text-muted, #64748b);
  border-color: rgba(var(--color-alert-pending), 0.2);
  text-decoration: line-through;
}

/* ----------------------------------------------------------------
   Numeric count chip — separate base class from .pill because the
   visual treatment is fundamentally different: round (999px) vs
   squared, normal case vs uppercase, sans vs monospace. Used for
   small inline numeric annotations like cluster-size (×6) or
   subzone count (17). Tooltip carries the meaning so the chip
   stays compact.
   ---------------------------------------------------------------- */
.pill-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 999px;
  background: var(--color-neutral-200, #e5e7eb);
  color: var(--color-neutral-700, #374151);
  vertical-align: middle;
}