/*
 * Badge — the ONLY pill. Tone = text colour + 16 % wash of the same
 * colour, never a solid fill behind white text.
 *
 *   <span class="badge badge--success">done</span>
 *   <span class="badge badge--warning badge--dot">pending</span>
 *
 * Tones: success · warning · danger · info · neutral · primary · purple
 * · orange. The state / severity / priority modifiers below are the
 * vocabularies the views and Services already emit (StateBadge,
 * SeverityBadge, PriorityBadge) — each is an alias of a tone, kept so
 * a `badge--<state>` from the API keeps rendering. Priority colours
 * mirror Android (PriorityBadgeBucketParityTest pins them here).
 */
.badge {
    --badge-tone: var(--color-neutral);
    --badge-wash: var(--color-neutral-soft);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: 20px;
    padding: var(--sp-quarter) var(--sp-2);
    border-radius: var(--radius-pill);
    background: var(--badge-wash);
    color: var(--badge-tone);
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
}
.badge--dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.badge--sm { min-height: 16px; padding: 0 var(--sp-1); font-size: var(--fs-xxs); }
.badge .icon { width: 12px; height: 12px; }

/* ── Tones ───────────────────────────────────────────────────────── */
.badge--success { --badge-tone: var(--color-success); --badge-wash: var(--color-success-soft); }
.badge--warning { --badge-tone: var(--color-warning); --badge-wash: var(--color-warning-soft); }
.badge--danger  { --badge-tone: var(--color-danger);  --badge-wash: var(--color-danger-soft); }
.badge--info    { --badge-tone: var(--color-info);    --badge-wash: var(--color-info-soft); }
.badge--neutral { --badge-tone: var(--color-neutral); --badge-wash: var(--color-neutral-soft); }
.badge--primary { --badge-tone: var(--color-primary-hi); --badge-wash: var(--color-primary-soft); }
.badge--purple  { --badge-tone: var(--color-purple);  --badge-wash: var(--color-purple-soft); }
.badge--orange  { --badge-tone: var(--color-orange);  --badge-wash: var(--color-orange-soft); }
.badge--accent  { --badge-tone: var(--color-accent);  --badge-wash: var(--color-accent-soft); }
/* Decision states the governance queues emit. */
.badge--approved { --badge-tone: var(--color-success); --badge-wash: var(--color-success-soft); }
.badge--rejected { --badge-tone: var(--color-danger);  --badge-wash: var(--color-danger-soft); }
.badge--discarded { --badge-tone: var(--color-neutral); --badge-wash: var(--color-neutral-soft); }

/* ── Task / provider / run states (StateBadge) ───────────────────── */
.badge--pending    { --badge-tone: var(--color-state-pending);   --badge-wash: var(--color-warning-soft); }
.badge--queued     { --badge-tone: var(--color-state-pending);   --badge-wash: var(--color-warning-soft); }
.badge--running    { --badge-tone: var(--color-state-running);   --badge-wash: var(--color-primary-soft); }
.badge--processing { --badge-tone: var(--color-state-running);   --badge-wash: var(--color-primary-soft); }
.badge--working    { --badge-tone: var(--color-state-running);   --badge-wash: var(--color-primary-soft); }
.badge--training   { --badge-tone: var(--color-accent);          --badge-wash: var(--color-accent-soft); }
.badge--done       { --badge-tone: var(--color-state-done);      --badge-wash: var(--color-success-soft); }
.badge--completed  { --badge-tone: var(--color-state-done);      --badge-wash: var(--color-success-soft); }
.badge--ok         { --badge-tone: var(--color-state-done);      --badge-wash: var(--color-success-soft); }
.badge--healthy    { --badge-tone: var(--color-state-done);      --badge-wash: var(--color-success-soft); }
.badge--failed     { --badge-tone: var(--color-state-failed);    --badge-wash: var(--color-danger-soft); }
.badge--error      { --badge-tone: var(--color-state-failed);    --badge-wash: var(--color-danger-soft); }
.badge--timed_out  { --badge-tone: var(--color-state-failed);    --badge-wash: var(--color-danger-soft); }
.badge--critical   { --badge-tone: var(--color-state-failed);    --badge-wash: var(--color-danger-soft); }
.badge--cancelled  { --badge-tone: var(--color-state-cancelled); --badge-wash: var(--color-neutral-soft); }
.badge--idle       { --badge-tone: var(--color-text-muted);      --badge-wash: var(--color-neutral-soft); }
.badge--unknown    { --badge-tone: var(--color-text-muted);      --badge-wash: var(--color-neutral-soft); }
.badge--blocked    { --badge-tone: var(--color-state-blocked);   --badge-wash: var(--color-orange-soft); }
.badge--paused     { --badge-tone: var(--color-warning);         --badge-wash: var(--color-warning-soft); }
.badge--degraded   { --badge-tone: var(--color-warning);         --badge-wash: var(--color-warning-soft); }
.badge--warn       { --badge-tone: var(--color-warning);         --badge-wash: var(--color-warning-soft); }
.badge--cooldown   { --badge-tone: var(--color-orange);          --badge-wash: var(--color-orange-soft); }
/* Call-to-action ("needs data") — accent, distinct from warn. */
.badge--cta        { --badge-tone: var(--color-accent);          --badge-wash: var(--color-accent-soft); }

/* ── Severity buckets (App\Services\SeverityBadge::bucket()) ─────── */
/* `urgent` covers critical+high (Android URGENT parity); `medium`
   covers medium; everything else falls through to `.badge--info`.
   Drift-pinned in tests/Unit/SeverityBadgeBucketParityTest.php. */
.badge--urgent { --badge-tone: var(--color-state-failed); --badge-wash: var(--color-danger-soft); }
.badge--medium { --badge-tone: var(--color-warning);      --badge-wash: var(--color-warning-soft); }

/* ── Priority buckets (App\Services\PriorityBadge::bucket()) ─────── */
/* Five tiers mirroring Android's priorityBadgeColor in
   PriorityBadgeLogic.kt. Drift-pinned in PriorityBadgeBucketParityTest. */
.badge--priority-critical { --badge-tone: var(--color-priority-critical); --badge-wash: rgba(239, 68, 68, 0.16); }
.badge--priority-high     { --badge-tone: var(--color-priority-high);     --badge-wash: rgba(249, 115, 22, 0.16); }
.badge--priority-medium   { --badge-tone: var(--color-priority-medium);   --badge-wash: rgba(234, 179, 8, 0.16); }
.badge--priority-low      { --badge-tone: var(--color-priority-low);      --badge-wash: rgba(34, 197, 94, 0.16); }
.badge--priority-minimal  { --badge-tone: var(--color-priority-minimal);  --badge-wash: rgba(107, 114, 128, 0.16); }