/* =============================================================================
   BADGE PRIMITIVE
   Единый компонент для статусных меток.
   Унифицирует: .psr-badge, .office-card__badge, .ps-available-suppliers__badge
   Использует токены из /css/filament/tokens.css.
   ============================================================================= */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.35rem var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

/* --- Semantic variants --- */

.badge--neutral {
    background: var(--color-white-86);
    color: var(--color-text-body);
    border: 1px solid var(--color-border-default);
}

.badge--success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
}

.badge--warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
}

.badge--danger {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    border: 1px solid var(--color-danger-border);
}

/* --- Role variants --- */

.badge--buyer {
    background: var(--color-white-86);
    color: var(--color-brand-buyer);
    border: 1px solid var(--color-border-warm);
}

.badge--supplier {
    background: var(--color-white-86);
    color: var(--color-brand-supplier);
    border: 1px solid rgba(18, 124, 90, 0.2);
}

/* --- Size modifier --- */

.badge--sm {
    padding: 0.25rem var(--space-2);
    font-size: 0.65rem;
}

/* --- Dark mode --- */

.dark .badge--neutral {
    background: var(--color-dark-neutral-bg);
    color: var(--color-dark-neutral-text);
    border-color: var(--color-dark-border);
}

.dark .badge--success {
    background: var(--color-dark-green-bg);
    color: var(--color-dark-green-text);
    border-color: var(--color-dark-green-border);
}

.dark .badge--warning {
    background: var(--color-dark-amber-bg);
    color: var(--color-dark-amber-text);
    border-color: var(--color-dark-amber-border);
}