/* ========================================
   BADGES & TAGS
======================================== */

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.badge-primary {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.badge-success {
    background: #D1FAE5;
    color: #065F46;
}

.badge-warning {
    background: #FEF3C7;
    color: #92400E;
}

.badge-error {
    background: #FEE2E2;
    color: #991B1B;
}

.badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: var(--space-xs);
}

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.pending {
    background: #FEF3C7;
    color: #92400E;
}

.status-badge.confirmed {
    background: #DBEAFE;
    color: #1E40AF;
}

.status-badge.preparing {
    background: #EDE9FE;
    color: #5B21B6;
}

.status-badge.ready {
    background: #D1FAE5;
    color: #065F46;
}

.status-badge.delivering {
    background: #FFEDD5;
    color: #9A3412;
}

.status-badge.delivered {
    background: #D1FAE5;
    color: #065F46;
}

.status-badge.cancelled {
    background: #FEE2E2;
    color: #991B1B;
}

.status-badge.active {
    background: #D1FAE5;
    color: #065F46;
}

.status-badge.inactive {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

/* Chip / Tag */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
}

.chip-remove {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.chip-remove:hover {
    background: var(--bg-tertiary);
    color: var(--text);
}