/* ========================================================
   BADGES — Small status descriptors and labels
   ======================================================== */

.badge {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  font-size: var(--text-2xs);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--r-full);
  background-color: var(--primary-subtle);
  color: var(--primary);
  border: 1px solid var(--primary-muted);
}

[data-theme="dark"] .badge {
  background-color: var(--accent-subtle);
  color: var(--accent);
  border-color: var(--accent-muted);
}

/* Accent badge — gold background with dark text */
.badge-accent {
  background-color: var(--accent);
  color: var(--accent-foreground);
  border: 1px solid var(--accent);
}

/* ========================================================
   STATUS PILLS — Active / Hidden / Published / Draft badges
   Used by the admin dashboard tables.
   ======================================================== */

.status-active,
.status-published {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  font-size: var(--text-2xs);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  border-radius: var(--r-full);
  background-color: var(--success-subtle);
  color: var(--success);
  border: 1px solid var(--success-muted);
}

.status-inactive,
.status-archived {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  font-size: var(--text-2xs);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  border-radius: var(--r-full);
  background-color: var(--bg-alt);
  color: var(--muted);
  border: 1px solid var(--border);
}

.status-draft {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  font-size: var(--text-2xs);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  border-radius: var(--r-full);
  background-color: var(--warning-subtle);
  color: var(--accent-foreground);
  border: 1px solid var(--warning-muted);
}