.status-badge {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 0.125rem;
  white-space: nowrap;
  line-height: 1.2;
}

.status-badge.active {
  background: rgba(51, 80, 63, 0.4);
  border: 1px solid var(--green);
  color: #9fe2bf;
}

.status-badge.inactive {
  background: rgba(138, 115, 74, 0.2);
  border: 1px solid var(--rule);
  color: var(--ink-muted);
}

/* Both the menu item and announcement status badges double as their own
   toggle control — a plain <button> would otherwise pick up the
   browser's default chrome underneath the badge's own background/border.
   Scoped to the element type so it's a no-op wherever a status-badge is
   still a plain read-only <span>. Width is fixed per context below
   (each page's label set is a different length) so toggling never
   changes the badge's — and therefore the Status column's — width and
   shoves every other column sideways. */
button.status-badge {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  justify-content: center;
  transition: opacity .15s ease;
}

button.status-badge:hover {
  opacity: 0.8;
}

button.status-badge:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* "● Available" is the longest menu item label, ~6.7rem measured. */
.item-row button.status-badge {
  width: 7rem;
}

/* "⏳ Scheduled" is the longest announcement label, ~7rem measured. */
.ann-row button.status-badge {
  width: 7.25rem;
}

/* "○ Disabled" is the longer of the two user labels. Not scoped to
   button.status-badge like the two above — your own row's badge is a
   plain non-interactive span (see users.php), and it still needs to line
   up in the same column. */
.user-row .status-badge {
  width: 7rem;
}