/* ==========================================================================
   Badge System — PEGMENT Design System

   Naming:   .badge .badge--{variant}
   Variants: neutral, neutral-bold, critical, warning, success,
             neutral-text, info, accent, purple, pink, rose,
             critical-bold, orange                              (13 total)

   Configurations:
   - Text only:    .badge .badge--{variant}
   - Dot + Text:   + <span class="badge__dot">
   - Icon + Text:  + <span class="badge__icon"><svg…>
   - Label + →:    + <span class="badge__arrow">→</span>
   - Dismissible:  + <button class="badge__dismiss">×</button>
   - Avatar:       + <img class="badge__avatar">
   - Flag:         + <span class="badge__flag">🇦🇺</span>
   - Icon only:    .badge .badge--icon-only .badge--{variant}

   Sizes: .badge--sm · default (no modifier) · .badge--lg

   Size  | Padding (y x)     | Text                              | Icon-only
   ------|-------------------|-----------------------------------|----------
   sm    | 2px 8px           | Label XS Regular  — 11px / 14px   | 20×20
   def   | 2px 10px          | Body MD Medium    — 14px / 20px   | 24×24
   lg    | 4px 12px          | Body MD Medium    — 14px / 20px   | 26×26

   Dot:        6px diameter, constant across sizes, 7px gap to label
   Icon (lead): 6px box, 1px stroke, constant across sizes, 7px gap to label
   Avatar/Flag: 16px, fully rounded, constant across sizes, 6px gap to label
                — padding hugs the media on its leading edge (see below)
   ========================================================================== */

/* ─── Base (default size) ──────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-base);
  font-size: var(--text-body-md-size);          /* 14px */
  line-height: var(--text-body-md-line-height); /* 20px */
  font-weight: var(--font-weight-medium);
  padding: 2px 10px;
  border-radius: 9999px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: default;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* ─── Sizes ─────────────────────────────────────────────────────────────── */
.badge--sm {
  font-size: var(--text-label-xs-size);          /* 11px */
  line-height: var(--text-label-xs-line-height); /* 14px */
  font-weight: var(--font-weight-normal);
  padding: 2px 8px;
}

.badge--lg {
  font-size: var(--text-body-md-size);          /* 14px */
  line-height: var(--text-body-md-line-height); /* 20px */
  font-weight: var(--font-weight-medium);
  padding: 4px 12px;
}

/* ─── Colour variants (13) ────────────────────────────────────────────────
   1  neutral         — surface-sunken2 bg     / text-secondary
   2  neutral-bold    — surface-sunken2 bg     / text-primary
   3  critical        — critical-bg-subtle bg  / critical-text
   4  warning         — warning-bg-subtle bg   / warning-text
   5  success         — success-bg-subtle bg   / success-text
   6  neutral-text    — unchanged
   7  info            — unchanged
   8  accent          — brand-secondary-subtle bg / brand-secondary
   9  purple          — unchanged
   10 pink            — unchanged
   11 rose            — unchanged
   12 critical-bold   — critical-bg-subtle bg  / critical-500 (primary red)
   13 orange          — orange-50 bg           / orange-700 (new scale)
   ──────────────────────────────────────────────────────────────────────── */

.badge--neutral {
  background-color: var(--color-surface-sunken2);
  color: var(--color-text-secondary);
}

.badge--neutral-bold {
  background-color: var(--color-surface-sunken2);
  color: var(--color-text-primary);
}

.badge--critical {
  background-color: var(--color-critical-bg-subtle);
  color: var(--color-critical-text);
}

.badge--warning {
  background-color: var(--color-warning-bg-subtle);
  color: var(--color-warning-text);
}

.badge--success {
  background-color: var(--color-success-bg-subtle);
  color: var(--color-success-text);
}

.badge--neutral-text {
  background-color: var(--color-neutral-10);
  color: var(--color-neutral-500);
}

.badge--info {
  background-color: var(--color-peggy-blue-50);
  color: var(--color-peggy-blue-600);
}

.badge--accent {
  background-color: var(--color-brand-secondary-subtle);
  color: var(--color-brand-secondary);
}

.badge--purple {
  background-color: #F3E8FF;
  color: #7C3AED;
}

.badge--pink {
  background-color: #FCE7F3;
  color: #BE185D;
}

.badge--rose {
  background-color: #FFF1F2;
  color: #E11D48;
}

.badge--critical-bold {
  background-color: var(--color-critical-bg-subtle);
  color: var(--color-critical-500);
}

.badge--orange {
  background-color: var(--color-orange-50);
  color: var(--color-orange-700);
}

/* ─── Content elements ───────────────────────────────────────────────────── */

.badge__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.badge__icon {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.badge__icon svg {
  width: 100%;
  height: 100%;
}

.badge__avatar {
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}

.badge__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  overflow: hidden;
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

/* Avatar / Flag — fixed 16px circular media, tighter gap, padding hugs the
   media on its leading edge while the trailing edge keeps normal padding */
.badge:has(.badge__avatar),
.badge:has(.badge__flag) {
  gap: 6px;
}
.badge--sm:has(.badge__avatar),
.badge--sm:has(.badge__flag) {
  padding: 2px 8px 2px 3px;
}
.badge:has(.badge__avatar):not(.badge--sm):not(.badge--lg),
.badge:has(.badge__flag):not(.badge--sm):not(.badge--lg) {
  padding: 2px 10px 2px 4px;
}
.badge--lg:has(.badge__avatar),
.badge--lg:has(.badge__flag) {
  padding: 6px 12px 6px 6px;
}

.badge__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  color: currentColor;
  opacity: 0.6;
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  font-size: 0.85em;
  transition: opacity var(--transition-fast);
}
.badge__dismiss:hover { opacity: 1; }

.badge__arrow {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: currentColor;
}

/* Icon-only pill — fixed total dimensions, icon stays centered */
.badge--icon-only {
  padding: 0;
  gap: 0;
  width: 24px;
  height: 24px;
  justify-content: center;
}
.badge--icon-only.badge--sm {
  width: 20px;
  height: 20px;
}
.badge--icon-only.badge--lg {
  width: 26px;
  height: 26px;
}
.badge--icon-only .badge__icon {
  width: 12px;
  height: 12px;
}
.badge--icon-only.badge--sm .badge__icon {
  width: 10px;
  height: 10px;
}
.badge--icon-only.badge--lg .badge__icon {
  width: 13px;
  height: 13px;
}

/* ─── Status Banners (badge alerts) ──────────────────────────────────────── */

.status-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 12px;   /* default: message first, badge flush right */
  border-radius: 9999px;
  border: 1px solid transparent;
  font-size: var(--text-body-sm-size);
  font-family: var(--font-base);
  white-space: nowrap;
}

/* Badge-first variant: badge sits flush on the left instead */
.status-banner:has(.badge:first-child) {
  padding: 4px 12px 4px 4px;
}

/* When the inner badge itself carries an arrow, the arrow already reads as
   trailing space, so the outer gap tightens slightly */
.status-banner:has(.badge__arrow) {
  gap: 7px;
}

.status-banner__message {
  font-weight: var(--font-weight-medium);
}

.status-banner__arrow {
  margin-left: 2px;
  flex-shrink: 0;
}

/* Variant colours (outer pill) */
.status-banner--info {
  background-color: var(--color-peggy-blue-50);
  border-color: var(--color-peggy-blue-100);
  color: var(--color-peggy-blue-700);
}

.status-banner--neutral {
  background-color: var(--color-neutral-20);
  border-color: var(--color-neutral-30);
  color: var(--color-neutral-500);
}

.status-banner--critical {
  background-color: var(--color-critical-50);
  border-color: var(--color-critical-100);
  color: var(--color-critical-700);
}

.status-banner--warning {
  background-color: var(--color-warning-100);
  border-color: var(--color-warning-200);
  color: var(--color-warning-800);
}

.status-banner--success {
  background-color: var(--color-success-50);
  border-color: var(--color-success-100);
  color: var(--color-success-700);
}

/* Inner badge inside a status-banner: surface-default bg, sized like
   .badge--sm (apply that class in the markup), border is a lighter shade
   of the badge's own text colour, and the text-to-arrow gap tightens to 6px */
.status-banner .badge {
  background-color: var(--color-surface-default);
  border-style: solid;
  border-width: 1px;
  gap: 6px;
}

.status-banner .badge--info,
.status-banner .badge--accent {
  border-color: var(--color-brand-secondary-muted);
}
.status-banner .badge--neutral,
.status-banner .badge--neutral-bold,
.status-banner .badge--neutral-text {
  border-color: var(--color-border-default);
}
.status-banner .badge--critical,
.status-banner .badge--critical-bold {
  border-color: var(--color-critical-border);
}
.status-banner .badge--warning {
  border-color: var(--color-warning-border);
}
.status-banner .badge--success {
  border-color: var(--color-success-border);
}

/* ─── Page layout ─────────────────────────────────────────────────────────── */

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.status-banner-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}