/* StatusBadge — canonical status pill, semantic-role driven.
 *
 * Spec: docs/enterprise-grc-review-2026-05-24/09-ux-styling-review.md § 3.5
 *
 * Token contract
 * --------------
 * Every status maps to one of 5 semantic roles. Each role pulls colour from
 * the corresponding base.css token family:
 *   --role-success  → --color-success* (active, passing, signed)
 *   --role-warning  → --color-warning* (in review, pending, draft)
 *   --role-error    → --color-danger*  (failing, cancelled, rejected)
 *   --role-info     → --color-info*    (in progress, identified)
 *   --role-neutral  → --color-neutral* (not started, retired, archived)
 *
 * Dark mode is inherited: base.css already overrides the --color-* tokens
 * inside [data-theme="dark"] and the high-contrast light theme, so this
 * file paints once and stays correct everywhere.
 *
 * Shape redundancy: status-badge.js bundles a distinct SVG per role so
 * colourblind users + grayscale prints can still distinguish states. CSS
 * only sizes the icon — never strips it.
 */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: 0.25rem 0.625rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    /* No transition by default — list views render hundreds at once and
     * paint-storms hurt scroll perf. Hover transitions are scoped below. */
}

.status-badge__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    line-height: 0;
}

.status-badge__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.status-badge__label {
    /* Text-overflow guard for dense tables — the badge clips at 28ch
     * which is comfortably wider than any built-in status label but
     * stops runaway per-org custom labels from wrecking column widths. */
    max-width: 28ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────────────────────
 * Size variants
 * ─────────────────────────────────────────────────────────────────────
 *
 * `sm`  → 0.75rem text / 1.5em icon — table cells, dense lists
 * `md`  → 0.875rem text / 1em icon  — page headers, default
 * `lg`  → 1rem text / 1em icon      — detail-panel highlights
 */
.status-badge--sm {
    padding: 0.125rem 0.5rem;
    font-size: var(--text-xs, 0.75rem);
    gap: 0.25rem;
}
.status-badge--md {
    padding: 0.25rem 0.625rem;
    font-size: var(--text-sm, 0.875rem);
}
.status-badge--lg {
    padding: 0.375rem 0.875rem;
    font-size: var(--text-base, 1rem);
    gap: 0.5rem;
}

/* ─────────────────────────────────────────────────────────────────────
 * Semantic role colours — paint via base.css tokens, NOT hex.
 * ─────────────────────────────────────────────────────────────────────
 */

.status-badge--success {
    background: var(--color-success-bg, rgba(34, 197, 94, 0.1));
    border-color: var(--color-success-border, rgba(34, 197, 94, 0.3));
    color: var(--color-success-text, #4ade80);
}
.status-badge--success .status-badge__icon { color: var(--color-success, #22c55e); }

.status-badge--warning {
    background: var(--color-warning-bg, rgba(245, 158, 11, 0.1));
    border-color: var(--color-warning-border, rgba(245, 158, 11, 0.3));
    color: var(--color-warning-text, #fbbf24);
}
.status-badge--warning .status-badge__icon { color: var(--color-warning, #f59e0b); }

.status-badge--error {
    background: var(--color-danger-bg, rgba(239, 68, 68, 0.1));
    border-color: var(--color-danger-border, rgba(239, 68, 68, 0.3));
    color: var(--color-danger-text, #f87171);
}
.status-badge--error .status-badge__icon { color: var(--color-danger, #ef4444); }

.status-badge--info {
    background: var(--color-info-bg, rgba(14, 165, 233, 0.1));
    border-color: var(--color-info-border, rgba(14, 165, 233, 0.3));
    color: var(--color-info-text, #38bdf8);
}
.status-badge--info .status-badge__icon { color: var(--color-info, #0ea5e9); }

.status-badge--neutral {
    background: var(--color-neutral-bg, rgba(100, 116, 139, 0.1));
    /* No dedicated --color-neutral-border / -text exist yet; --cat-slate
     * is the same value family. Recommended to add neutral border/text
     * tokens to base.css later. */
    border-color: var(--cat-slate-border, rgba(100, 116, 139, 0.3));
    color: var(--cat-slate-text, #cbd5e1);
}
.status-badge--neutral .status-badge__icon { color: var(--color-neutral, #64748b); }

/* ─────────────────────────────────────────────────────────────────────
 * Interaction states (only when the badge is actionable — wrapped in a
 * button or <a>). Default badges are static labels.
 * ─────────────────────────────────────────────────────────────────────
 */
a.status-badge,
button.status-badge {
    cursor: pointer;
    transition: filter 120ms ease-out, transform 120ms ease-out;
}
a.status-badge:hover,
button.status-badge:hover { filter: brightness(1.08); }
a.status-badge:active,
button.status-badge:active { transform: translateY(1px); }
a.status-badge:focus-visible,
button.status-badge:focus-visible {
    outline: 2px solid var(--color-primary, #3b82f6);
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────
 * A11y / theme adaptations
 * ─────────────────────────────────────────────────────────────────────
 */

@media (prefers-contrast: more) {
    .status-badge { border-width: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    a.status-badge, button.status-badge { transition: none; }
}