/* ==========================================================================
   global-badge — the ONE status pill (ADR-131, UI Component Service)
   ==========================================================================

   One shape, one colour source. A badge says WHAT STATE something is in:
   success / warning / danger / info / neutral (plus the two ink-tinted role
   tones). It is never interactive — a filter you can click is a chip or a
   segmented control, not a badge.

   Render it through the partial, not by hand:

       {% include "shared/components/status_badge.html" with status=worker.status %}

   or, when the label is already computed:

       <span class="global-badge global-badge--{% status_variant x %}">…</span>

   The tone comes from status_variant() in apps/core/templatetags/ui_tags.py —
   that mapping stays the single status -> tone contract. Add a new status by
   mapping it there; no new CSS is ever needed.

   Absorbed clones (deleted in the same commit that added this file):
     .status-badge (main.css)                              — became this base
     .badge-role            components/signup-groups.css   — signup role pills
     .badge-type            templates/shared/components/milestone_checklist.html
     .status-pill           features/payment/payment-dashboard.css
     .exc-list__badge       features/exceptions-list.css
     .status-pill           templates/editing/remote_work.html (fleet board)

   Singleton-gated: a second `.global-badge {` base definition anywhere fails
   tests/interface/test_css_standards.py. Do not fork it — add a modifier.
   ========================================================================== */

.global-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    /* A pill is one line by definition: a squeezed cell narrows the text
       beside it, never folds "NO PAYOUTS" into two stacked words. */
    white-space: nowrap;
}

/* Compact. Opt-in, for a pill that rides inline in a dense row instead of
   sitting in a cell of its own: smaller and tighter, holding its own width so
   a row short of space squeezes the words beside it rather than the pill, and
   keeping the case it was handed — a clock time or a street is not a word to
   shout. Digits line up column with column down a stack of rows. */
.global-badge--compact {
    flex: 0 0 auto;
    padding: 0 var(--spacing-xsm);
    font-size: var(--font-size-2xs);
    font-variant-numeric: tabular-nums;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
}

/* Optional leading dot. Inherits the tone colour via currentColor, so a tone
   modifier is the only thing that ever has to know about colour. */
.global-badge__dot {
    width: 0.4rem;
    height: 0.4rem;
    flex: 0 0 auto;
    border-radius: var(--radius-pill);
    background: currentColor;
}

/* --------------------------------------------------------------------------
   Tones. Each group leads with the semantic tone that carries the colour; the
   status-named selectors after it are aliases so a template can use either
   `--<tone>` (emitted by {% status_variant %}) or a literal status name.
   This is the single colour source for the pill.
   -------------------------------------------------------------------------- */

/* Success (green) — completed / approved / locked-in / ready outcomes. */
.global-badge--success,
.global-badge--active,
.global-badge--confirmed,
.global-badge--assigned,
.global-badge--approved,
.global-badge--completed,
.global-badge--accepted,
.global-badge--ready,
.global-badge--open {
    background: var(--status-success-bg);
    color: var(--color-success);
}

/* Warning (amber) — awaiting action / in the queue / in use. */
.global-badge--warning,
.global-badge--pending,
.global-badge--scheduled,
.global-badge--in-use,
.global-badge--draft {
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

/* Danger (red) — RESERVED for genuine failures/errors and hard blocks. A
   cancellation or decline is not a failure; those live in the neutral group. */
.global-badge--danger,
.global-badge--failed,
.global-badge--error,
.global-badge--offline,
.global-badge--blocked,
.global-badge--revoked {
    background: var(--status-danger-bg);
    color: var(--color-error);
}

/* Neutral (grey) — calm outcomes and dormant states: cancelled, declined,
   closed, paused, inactive. Deliberately NOT red. */
.global-badge--neutral,
.global-badge--cancelled,
.global-badge--declined,
.global-badge--withdrawn,
.global-badge--inactive,
.global-badge--disabled,
.global-badge--paused,
.global-badge--closed,
.global-badge--expired,
.global-badge--other,
.global-badge--worker {
    background: var(--color-grey-200);
    color: var(--color-grey-700);
}

/* Info (platform purple) — open / neutral-active / in-flight states. */
.global-badge--info,
.global-badge--published,
.global-badge--rescheduled,
.global-badge--filled,
.global-badge--progress,
.global-badge--transient,
.global-badge--manual,
.global-badge--callback,
.global-badge--in_progress,
.global-badge--invited {
    background: var(--status-info-bg);
    color: var(--color-info);
}

/* Ink-tinted — internal / team-only tag, form-driven milestones. Ink text on
   the matching ink tint: fixed platform colors, the same on every tenant. */
.global-badge--ink,
.global-badge--internal,
.global-badge--form {
    background: var(--color-action-tint-pressed);
    color: var(--color-action);
}

/* Dark — admin role. */
.global-badge--dark,
.global-badge--admin {
    background: var(--color-grey-700);
    color: var(--color-card-bg);
}

/* --------------------------------------------------------------------------
   Size + density modifiers. The SURFACE picks the size, not the developer:
   default = normal rows and headers, --sm = dense lists and inline meta rows.
   -------------------------------------------------------------------------- */

/* Dense: exception rows, milestone type tags, table meta cells. */
.global-badge--sm {
    padding: var(--spacing-2xs) var(--spacing-sm);
    font-size: var(--font-size-2xs);
    letter-spacing: 0.02em;
}

/* Sentence-case: a badge whose label is a human phrase ("Waiting for
   approval", "Auto on booking") rather than a one-word state. */
.global-badge--sentence {
    text-transform: none;
    letter-spacing: normal;
}

.global-badge i {
    font-size: var(--font-size-2xs);
}