/* ============================================================
   Perga Design System — pg-filter.css
   UI-S05-T02: Filter chip bar styles
   ============================================================ */

/* ── Filter Bar Container ──────────────────────────────────── */
.pg-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--pg-sp-3);
    padding: var(--pg-sp-3) var(--pg-sp-4);
    background: var(--pg-color-bg);
    border: 1px solid var(--pg-color-border);
    border-radius: var(--pg-radius-md);
    margin-bottom: var(--pg-sp-4);
    flex-wrap: wrap;
}

.pg-filter-bar__chips {
    display: flex;
    gap: var(--pg-sp-2);
    flex-wrap: wrap;
    flex: 1;
    align-items: center;
}

.pg-filter-bar__empty {
    font-size: 12px;
    color: var(--pg-color-text-tertiary);
}

.pg-filter-bar__actions {
    display: flex;
    gap: var(--pg-sp-2);
    flex-shrink: 0;
}

/* ── Filter Chip ───────────────────────────────────────────── */
.pg-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--pg-color-surface);
    border: 1px solid var(--pg-color-border-strong, #c4c4c4);
    border-radius: 20px;
    padding: 3px 8px 3px 10px;
    font-size: 12px;
    color: var(--pg-color-text);
}

.pg-filter-chip__key {
    color: var(--pg-color-text-tertiary);
}

.pg-filter-chip__val {
    font-weight: 500;
}

.pg-filter-chip__clear {
    background: none;
    border: none;
    color: var(--pg-color-text-tertiary);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    transition: all var(--pg-t-fast);
}

.pg-filter-chip__clear:hover {
    background: var(--pg-color-bg);
    color: var(--pg-color-negative, #dc2626);
}