/* ============================================================================
   Count Badge
   ============================================================================ */

.ffmpeg-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.5rem;
  background: var(--ffmpeg-surface-2);
  color: var(--ffmpeg-text);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid var(--ffmpeg-border);
}

.ffmpeg-count-badge--error {
  background: var(--ffmpeg-danger-bg);
  color: var(--ffmpeg-danger-badge-text);
  border-color: var(--ffmpeg-danger);
}

/* ============================================================================
   Status Badges (both dashboard-table and media-table variants)
   WCAG AA 4.5:1 contrast — uses dedicated badge text tokens
   ============================================================================ */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}

.status-badge--pending {
  background: var(--ffmpeg-warning-bg);
  color: var(--ffmpeg-warning-badge-text);
  border-color: var(--ffmpeg-warning);
}

.status-badge--converting {
  background: var(--ffmpeg-info-bg);
  color: var(--ffmpeg-info-badge-text);
  border-color: var(--ffmpeg-info);
}

.status-badge--completed {
  background: var(--ffmpeg-success-bg);
  color: var(--ffmpeg-success-badge-text);
  border-color: var(--ffmpeg-success);
}

.status-badge--failed {
  background: var(--ffmpeg-danger-bg);
  color: var(--ffmpeg-danger-badge-text);
  border-color: var(--ffmpeg-danger);
}

.status-badge--unknown {
  background: var(--ffmpeg-surface-2);
  color: var(--ffmpeg-text-muted);
  border-color: var(--ffmpeg-border);
}

/* WCAG 1.4.1 — status icons so color is not the sole differentiator */
.status-badge--pending::before {
  content: "\25CB"; /* open circle */
}

.status-badge--converting::before {
  content: "\25B6"; /* play symbol */
}

.status-badge--completed::before {
  content: "\2713"; /* checkmark */
}

.status-badge--failed::before {
  content: "\2717"; /* cross */
}

.status-badge--unknown::before {
  content: "\2014"; /* em dash */
}

/* UI-specific status badges */
.ffmpeg-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.ffmpeg-status-badge--pending {
  background: var(--ffmpeg-warning-bg);
  color: var(--ffmpeg-warning-badge-text);
}

.ffmpeg-status-badge--processing {
  background: var(--ffmpeg-info-bg);
  color: var(--ffmpeg-info-badge-text);
}

.ffmpeg-status-badge--completed {
  background: var(--ffmpeg-success-bg);
  color: var(--ffmpeg-success-badge-text);
}

.ffmpeg-status-badge--failed {
  background: var(--ffmpeg-danger-bg);
  color: var(--ffmpeg-danger-badge-text);
}

.ffmpeg-status-badge--none {
  background: var(--ffmpeg-surface-2);
  color: var(--ffmpeg-text-muted);
}

/* WCAG 1.4.1 — status icons for ffmpeg-status-badge variants */
.ffmpeg-status-badge--pending::before {
  content: "\25CB";
}

.ffmpeg-status-badge--processing::before {
  content: "\25B6";
}

.ffmpeg-status-badge--completed::before {
  content: "\2713";
}

.ffmpeg-status-badge--failed::before {
  content: "\2717";
}

.ffmpeg-status-badge--none::before {
  content: "\2014";
}
