/* Slice 08 v2 status + badge (Epic 525 / 532).
   Status is a dot and a word, never a filled pill. Badges are tints: 10% fill,
   40% border, AA text shade. Counts are a muted number, omitted at zero. */

/* —— Status: 8px dot + word —— */
.ps-status {
  --_tone: var(--success);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  font-weight: 500;
  color: var(--foreground);
  white-space: nowrap;
}

.ps-status::before {
  content: "";
  box-sizing: border-box;
  flex: 0 0 auto;
  width: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 2);
  border-radius: 50%;
  background: var(--_tone);
  border: 1.5px solid var(--_tone);
}

.ps-status.is-small { font-size: var(--text-small-size); line-height: var(--text-small-line-height); }
.ps-status.is-muted-text { color: var(--muted-foreground); }

/* ● filled: Live / Active / Approved, Rejected / Blocked, Complete / Archived */
.ps-status.is-live,
.ps-status.is-active,
.ps-status.is-approved,
.ps-status.is-success { --_tone: var(--success); }
.ps-status.is-scheduled,
.ps-status.is-primary { --_tone: var(--primary); }
.ps-status.is-rejected,
.ps-status.is-blocked,
.ps-status.is-bad,
.ps-status.is-destructive { --_tone: var(--destructive); }
.ps-status.is-complete,
.ps-status.is-archived,
.ps-status.is-muted { --_tone: var(--muted-foreground); }

/* ○ ring: Draft / Off */
.ps-status.is-off,
.ps-status.is-draft { --_tone: var(--muted-foreground); }
.ps-status.is-off::before,
.ps-status.is-draft::before { background: transparent; }

/* ◐ half: Paused / Pending / Needs setup / N to fix */
.ps-status.is-paused,
.ps-status.is-pending,
.ps-status.is-needs-setup,
.ps-status.is-warning { --_tone: var(--warning); }
.ps-status.is-paused::before,
.ps-status.is-pending::before,
.ps-status.is-needs-setup::before,
.ps-status.is-warning::before {
  background: linear-gradient(90deg, var(--_tone) 50%, transparent 50%);
}

/* ◌ dashed: Unsaved */
.ps-status.is-unsaved { --_tone: var(--muted-foreground); }
.ps-status.is-unsaved::before {
  background: transparent;
  border-style: dashed;
}

/* —— Badge (tint) —— */
.ps-badge,
.ps-pill,
.badge {
  --_tone: var(--muted-foreground);
  --_tone-text: var(--muted-foreground);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing);
  height: 1.25rem;
  padding: 0 calc(var(--spacing) * 2);
  border: 1px solid color-mix(in srgb, var(--_tone) 40%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--_tone) 10%, transparent);
  color: var(--_tone-text);
  font-size: var(--text-small-size);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: middle;
}

.badge.rounded-pill,
.ps-badge.rounded-pill { border-radius: var(--radius-md) !important; }

.ps-badge svg,
.badge svg {
  width: var(--icon-size-badge);
  height: var(--icon-size-badge);
  flex: 0 0 auto;
}

.ps-badge.is-success,
.ps-pill-live,
.ps-pill-approved,
.ps-pill-connected,
.badge.bg-success,
.badge.text-bg-success,
.badge.bg-success-subtle {
  --_tone: var(--success);
  --_tone-text: var(--success-text);
}

.ps-badge.is-primary,
.ps-pill-scheduled,
.badge.bg-primary,
.badge.text-bg-primary,
.badge.bg-primary-subtle,
.badge.bg-info,
.badge.text-bg-info {
  --_tone: var(--primary);
  --_tone-text: var(--secondary-foreground);
}

.ps-badge.is-muted,
.ps-pill-draft,
.ps-pill-none,
.ps-pill-complete,
.ps-pill-archived,
.badge.bg-secondary,
.badge.text-bg-secondary,
.badge.bg-light,
.badge.text-bg-light,
.badge.bg-white,
.badge.bg-dark,
.badge.text-bg-dark {
  --_tone: var(--muted-foreground);
  --_tone-text: var(--muted-foreground);
}

.ps-badge.is-warning,
.ps-pill-paused,
.ps-pill-invited,
.badge.bg-warning,
.badge.text-bg-warning,
.badge.bg-warning-subtle {
  --_tone: var(--warning);
  --_tone-text: var(--warning-text);
}

.ps-badge.is-destructive,
.ps-pill-bad,
.ps-pill-failing,
.badge.bg-danger,
.badge.text-bg-danger,
.badge.bg-danger-subtle {
  --_tone: var(--destructive);
  --_tone-text: var(--destructive-text);
}

/* Bootstrap utilities (and dark-mode .bg-light) paint with !important; the tint must win. */
html body .badge[class*="bg-"] {
  background-color: color-mix(in srgb, var(--_tone) 10%, transparent) !important;
  color: var(--_tone-text) !important;
}

/* Internal account: solid fill, white text (ADO 481). Dark mode needs a darker fill for white to read. */
html body .badge.is-internal[class*="bg-"] {
  border-color: transparent;
  background-color: var(--muted-foreground) !important;
  color: var(--on-fill) !important;
}

html[data-theme="dark"] body .badge.is-internal[class*="bg-"],
html body.dark-mode .badge.is-internal[class*="bg-"] {
  background-color: var(--secondary) !important;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body .badge.is-internal[class*="bg-"] {
    background-color: var(--secondary) !important;
  }
}

/* —— Count: plain muted number after a label; omitted at zero —— */
.ps-badge.is-count,
.badge.ps-tab-count {
  height: auto;
  min-width: 0;
  padding: 0;
  margin-left: calc(var(--spacing) * 1.5);
  border: 0;
  background: none !important;
  color: var(--muted-foreground) !important;
  font-size: inherit;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.ps-badge.is-count:empty,
.ps-badge.is-count[data-count="0"],
.badge.ps-tab-count:empty,
.badge.ps-tab-count[data-count="0"] { display: none; }

.ps-badge.is-count.is-blocker { color: var(--destructive-text) !important; }