/* Tag Input Component – Kendo-like styling */

.tag-input {
    display: block;
    width: 100%;
}

.tag-input-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0 0.2rem;
    background-color: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e9ecef);
    border-radius: 0.375rem;
    transition: all ease-in 0.3s;
}

    .tag-input-container:hover {
        border-color: var(--blueteq-blue, #186fad);
    }

    .tag-input-container:focus-within {
        border-color: var(--blueteq-blue, #186fad);
        outline: none;
        box-shadow: 0 0 0 3px rgba(24, 111, 181, 0.2);
    }

.tag-input-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.tag-input-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    background-color: var(--bg-tertiary, #e9ecef);
    color: var(--text-primary, #212529);
    font-size: .97rem;
    border-radius: 0.25rem;
    border: 1px solid var(--border-color-light, #dee2e6);
}

.tag-input-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    margin-left: 0.25rem;
    background: transparent;
    border: none;
    color: var(--text-secondary, #6c757d);
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    border-radius: 0.125rem;
    transition: background 0.15s, color 0.15s;
}

    .tag-input-chip-remove:hover {
        background: rgba(239, 68, 68, 0.15);
        color: #dc3545;
    }

.tag-input-field {
    flex: 1;
    min-width: 120px;
    padding: 0.25rem 0;
    border: none;
    background: transparent;
    font-size: .97rem;
    color: #495057;
}

    .tag-input-field:focus {
        outline: none;
    }

    .tag-input-field::placeholder {
        color: #495057;
    }

.tag-input:has([disabled]) .tag-input-container {
    background-color: var(--bg-tertiary, #e9ecef);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Dark mode – match Kendo inputs */
[data-theme="dark"] .tag-input-container {
    background-color: var(--input-bg, var(--bg-tertiary));
    border-color: var(--input-border, var(--border-color));
    color: var(--text-primary);
}

    [data-theme="dark"] .tag-input-container:hover {
        border-color: var(--blueteq-blue);
    }

    [data-theme="dark"] .tag-input-container:focus-within {
        border-color: var(--blueteq-blue);
        box-shadow: 0 0 0 3px rgba(24, 111, 181, 0.2);
    }

[data-theme="dark"] .tag-input-chip {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .tag-input-field {
    color: var(--text-primary);
}

    [data-theme="dark"] .tag-input-field::placeholder {
        color: var(--text-tertiary);
    }