/* Base status badge component */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.2px;
  line-height: 1;
  border: 1px solid transparent;
  background: transparent;
  transition: transform 0.2s ease;
}

.status-badge:hover {
  transform: translateY(-1px);
}

.status-badge-success {
  border-color: #66bb6a !important;
  color: #66bb6a !important;
  background: rgba(102, 187, 106, 0.14) !important;
}

.status-badge-danger {
  border-color: #ef5350 !important;
  color: #ef5350 !important;
  background: rgba(239, 83, 80, 0.14) !important;
}

.status-badge-warning {
  border-color: #ffa726 !important;
  color: #ffa726 !important;
  background: rgba(255, 167, 38, 0.14) !important;
}

.status-badge-info {
  border-color: var(--primary-blue) !important;
  color: var(--primary-blue) !important;
  background: color-mix(
    in srgb,
    var(--primary-blue) 14%,
    transparent
  ) !important;
}

body.theme-light .status-badge-success {
  border-color: #28a745 !important;
  color: #28a745 !important;
  background: rgba(40, 167, 69, 0.16) !important;
}

body.theme-light .status-badge-danger {
  border-color: #dc3545 !important;
  color: #dc3545 !important;
  background: rgba(220, 53, 69, 0.16) !important;
}

body.theme-light .status-badge-warning {
  border-color: #ff9800 !important;
  color: #ff9800 !important;
  background: rgba(255, 152, 0, 0.16) !important;
}

body.theme-light .status-badge-info {
  border-color: var(--primary-blue) !important;
  color: var(--primary-blue) !important;
  background: color-mix(
    in srgb,
    var(--primary-blue) 16%,
    transparent
  ) !important;
}

/* Brand-derived variant, for chips that should reflect the project's own
   accent color rather than a fixed semantic status (success/danger/etc). */
.status-badge-brand {
  border-color: color-mix(
    in srgb,
    var(--primary-blue) 55%,
    transparent
  ) !important;
  color: var(--primary-blue) !important;
  background: color-mix(
    in srgb,
    var(--primary-blue) 14%,
    transparent
  ) !important;
}

.status-badge-neutral {
  border-color: #9e9e9e !important;
  color: #bdbdbd !important;
  background: rgba(158, 158, 158, 0.12) !important;
}

body.theme-light .status-badge-neutral {
  border-color: #757575 !important;
  color: #616161 !important;
  background: rgba(117, 117, 117, 0.12) !important;
}

/* Dot variant: colored dot + plain text, no pill background/border. For
   inline use next to a heading (e.g. "Free tier · Inactive") rather than
   the standalone pill look. Layer onto an existing status-badge-* class to
   keep its color, just change the presentation. */
.status-badge-dot {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  gap: 6px;
}
.status-badge-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}