/* ═══════════════════════════════════════════════════════════
   Chips & tags — compact inline pills
   One base, several roles (reconciled from the ColibriAuth and
   LogEasy contributions so the system has a single chip):
     • static tag        — .tn-chip (+ .tn-chip--accent for the teal tone)
     • removable tag     — .tn-chip with a trailing .tn-chip-remove (×)
     • interactive chip  — button.tn-chip / .tn-chip--button, selected via .is-active
                           (filters, toggles)
     • add chip          — .tn-chip--add, a clickable "available option" (+)
   Wrap a set in .tn-chip-set. Pairs with Bootstrap Icons.
   ═══════════════════════════════════════════════════════════ */

.tn-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.3em 0.85em;
    border-radius: 999px;
    font-size: var(--tn-font-size-xs);
    font-weight: 500;
    font-family: inherit;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--tn-bg-card);
    border: 1px solid var(--tn-border);
    color: var(--tn-text-secondary);
}

.tn-chip .bi {
    font-size: 0.9em;
}

/* ── Accent (teal) tone — linked/referenced/selected tags ──
   (.tn-chip--selected is kept as an alias for the same look) */
.tn-chip--accent,
.tn-chip--selected {
    background: var(--tn-accent-light);
    border-color: var(--tn-accent);
    color: var(--tn-accent);
}

/* ── Interactive chip — clickable filter / toggle ──
   A <button> with .tn-chip, or any element given .tn-chip--button.
   Neutral hover; selected state via .is-active. */
button.tn-chip,
.tn-chip--button {
    cursor: pointer;
    transition: background var(--tn-transition), border-color var(--tn-transition), color var(--tn-transition);
}

button.tn-chip:hover,
.tn-chip--button:hover {
    background: var(--tn-bg-hover);
    border-color: var(--tn-text-muted);
    color: var(--tn-text-primary);
}

.tn-chip.is-active {
    background: var(--tn-accent-light);
    border-color: var(--tn-accent);
    color: var(--tn-accent);
}

button.tn-chip:focus-visible,
.tn-chip--button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--tn-accent);
}

button.tn-chip:disabled,
.tn-chip--button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Add chip — a clickable "available option" you pick to add ──
   Distinct from a filter toggle: hovering signals "add" with the
   accent tone. Usually carries a leading + icon. */
.tn-chip--add {
    cursor: pointer;
    transition: background var(--tn-transition), border-color var(--tn-transition), color var(--tn-transition);
}

.tn-chip--add:hover {
    background: var(--tn-accent-light);
    border-color: var(--tn-accent);
    color: var(--tn-accent);
}

/* ── Removable tag — trailing dismiss button ── */
.tn-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15em;
    height: 1.15em;
    margin-right: -0.2em;
    margin-left: 1px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.05em;
    line-height: 1;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity var(--tn-transition), background var(--tn-transition);
}

.tn-chip-remove:hover {
    opacity: 1;
    background: rgba(13, 115, 119, 0.15);
}

/* ── Container for a wrapping set of chips ── */
.tn-chip-set {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tn-space-sm);
}