/**
 * DataSourceFilter — shared dropdown-filter bar styling.
 *
 * Sits above the main data section on every accessible-data view. Theming
 * uses the canonical CSS variables from base.css (--bg-primary, --bg-secondary,
 * --text-primary, --border-color, --color-primary), which automatically swap
 * when [data-theme="dark"] is set on the root, so no separate dark-mode block
 * is required.
 *
 * Origin: docs/plan-unified-accessible-data.md §7
 */

.data-source-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.data-source-filter__group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.data-source-filter__group--date {
    gap: 0.35rem;
}

.data-source-filter__label {
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 0.25rem;
    user-select: none;
}

.data-source-filter__date,
.data-source-filter__select {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
}

.data-source-filter__select {
    min-width: 9rem;
    max-width: 16rem;
}

.data-source-filter__date:focus-visible,
.data-source-filter__select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.data-source-filter__date-sep {
    color: var(--text-secondary);
    user-select: none;
}

.data-source-filter__clear {
    margin-left: auto;
    padding: 0.25rem 0.65rem;
    background: transparent;
    color: var(--color-primary);
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    font-family: inherit;
}

.data-source-filter__clear:hover {
    text-decoration: underline;
}

.data-source-filter__clear:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
    border-radius: 4px;
}

/* Provenance chip — rendered on individual data rows that came from a
 * source other than the caller's org. Compact, low-saturation pill so it
 * doesn't compete with the row's primary content.
 */
.data-source-provenance-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--bg-tertiary, #EEF2FF);
    color: var(--text-secondary, #4338CA);
    border: 1px solid var(--border-color, #C7D2FE);
    font-size: 0.72rem;
    line-height: 1.3;
    white-space: nowrap;
    vertical-align: middle;
}

.data-source-provenance-chip[data-key="subscription"] {
    background: var(--cat-purple-tint, #F5F3FF);
    color: var(--cat-purple-text, #5B21B6);
    border-color: var(--cat-purple-border, #DDD6FE);
}

.data-source-provenance-chip[data-key="linked_account"] {
    background: var(--cat-green-tint, #ECFDF5);
    color: var(--cat-green-text, #065F46);
    border-color: var(--cat-green-border, #A7F3D0);
}

.data-source-provenance-chip[data-key="assignment"] {
    background: var(--cat-blue-tint, #EFF6FF);
    color: var(--cat-blue-text, #1E40AF);
    border-color: var(--cat-blue-border, #BFDBFE);
}

.data-source-provenance-chip[data-key="request"] {
    background: var(--cat-amber-tint, #FFFBEB);
    color: var(--cat-amber-text, #92400E);
    border-color: var(--cat-amber-border, #FDE68A);
}

.data-source-provenance-chip[data-key="share"] {
    background: var(--cat-teal-tint, #F0FDFA);
    color: var(--cat-teal-text, #115E59);
    border-color: var(--cat-teal-border, #99F6E4);
}