/**
 * Badge Component
 *
 * Semantic badge classes for consistent status indication across the system.
 *
 * STATE MAPPING (Appointment/TherapyPlan):
 * - PENDING → .badge--info (blue)
 * - IN_PROGRESS → .badge--info (blue)
 * - COMPLETED → .badge--success (green)
 * - NO_SHOW → .badge--warning (yellow)
 * - CANCELLED → .badge--neutral (gray)
 * - LATE_CANCEL → .badge--danger (red)
 * - EXPIRED → .badge--neutral (gray)
 *
 * USAGE:
 * <span class="badge badge--success">Completato</span>
 * <span class="badge badge--info">In Corso</span>
 */

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: 9999px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    line-height: 1;
    white-space: nowrap;
}

/* Semantic variants */
.badge--info {
    background-color: var(--badge-info);
    color: white;
}

.badge--success {
    background-color: var(--badge-success);
    color: white;
}

.badge--warning {
    background-color: var(--badge-warning);
    color: white;
}

.badge--danger {
    background-color: var(--badge-danger);
    color: white;
}

.badge--neutral {
    background-color: var(--badge-neutral);
    color: white;
}

/* Size variants */
.badge--sm {
    padding: var(--spacing-0-5) var(--spacing-1-5);
    font-size: 0.625rem; /* 10px */
}

.badge--lg {
    padding: var(--spacing-1-5) var(--spacing-3);
    font-size: var(--font-size-sm);
}

/* Outline variants */
.badge--outline {
    background-color: transparent;
    border: 1px solid currentColor;
}

.badge--outline.badge--info {
    color: var(--badge-info);
}

.badge--outline.badge--success {
    color: var(--badge-success);
}

.badge--outline.badge--warning {
    color: var(--badge-warning);
}

.badge--outline.badge--danger {
    color: var(--badge-danger);
}

.badge--outline.badge--neutral {
    color: var(--badge-neutral);
}

/* Icon support */
.badge i,
.badge svg {
    margin-right: var(--spacing-1);
    font-size: 0.875em;
}

.badge i:last-child,
.badge svg:last-child {
    margin-right: 0;
    margin-left: var(--spacing-1);
}

/* Pill variant (default is already pill-shaped) */
.badge--pill {
    border-radius: 9999px;
}

/* Dot indicator */
.badge--dot {
    padding-left: var(--spacing-3);
    position: relative;
}

.badge--dot::before {
    content: '';
    position: absolute;
    left: var(--spacing-1-5);
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}