/*
 * Chip-input component — visuele chips met autocomplete voor
 * komma-gescheiden naamlijsten (bv. team members).
 */

.chip-input-wrapper {
    position: relative;
}

.chip-input {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    background: #fff;
    min-height: calc(1.5em + 1.2rem + 2px);
    cursor: text;
}

.chip-input:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    outline: 0;
}

.chip-input .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #e7f1ff;
    color: #0a58ca;
    border: 1px solid #b6d4fe;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.85rem;
    line-height: 1.4;
}

.chip-input .chip .chip-remove {
    cursor: pointer;
    opacity: 0.65;
    font-size: 0.85rem;
    padding: 0 0.15rem;
    border: 0;
    background: transparent;
    color: inherit;
}

.chip-input .chip .chip-remove:hover { opacity: 1; }

.chip-input .chip-entry {
    flex: 1 1 120px;
    min-width: 120px;
    border: none;
    outline: none;
    font-size: 0.9rem;
    padding: 0.1rem 0.25rem;
    background: transparent;
}

[data-bs-theme="dark"] .chip-input { background: #2b3035; border-color: #495057; color: #dee2e6; }
[data-bs-theme="dark"] .chip-input .chip { background: #1c2f4a; color: #9ec5fe; border-color: #31537f; }
[data-bs-theme="dark"] .chip-input .chip-entry { color: #dee2e6; }