/* =============================================================
   chips.css — Chip / badge / tag component styles
   Scope: status badges, category tags, label pills
   Variables: --upf-radius-sm, --upf-space-1/2/3,
              --upf-text-secondary, --upf-color-border,
              --upf-primary-soft, --upf-success-soft,
              --upf-danger-soft, --upf-warning-soft
   ============================================================= */

/* --- Base chip --- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--upf-space-1);
    padding: var(--upf-space-1) var(--upf-space-3);
    border-radius: var(--upf-radius-sm);
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* --- Neutral (default) --- */
.chip-neutral {
    background-color: var(--upf-color-surface-muted);
    color: var(--upf-text-secondary);
    border-color: var(--upf-color-border);
}

/* --- Primary --- */
.chip-primary {
    background-color: var(--upf-primary-soft);
    color: var(--upf-primary);
}

/* --- Success / active --- */
.chip-success {
    background-color: var(--upf-success-soft);
    color: #16a34a;
}

/* --- Danger / inactive / error --- */
.chip-danger {
    background-color: var(--upf-danger-soft);
    color: #dc2626;
}

/* --- Warning --- */
.chip-warning {
    background-color: var(--upf-warning-soft);
    color: #d97706;
}

/* --- Dot indicator inside chip --- */
.chip .chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: currentColor;
    opacity: .75;
    flex-shrink: 0;
}

/* --- Outlined variant --- */
.chip-outline {
    background-color: transparent;
    border-color: currentColor;
}

/* --- Small size modifier --- */
.chip-sm {
    padding: 2px var(--upf-space-2);
    font-size: .72rem;
}

/* --- Solid primary (tag senza colore custom) --- */
.chip-solid-primary {
    background-color: #3c74d3 !important;
    color: #ffffff !important;
}