/*
  Shared field styling for TextField, SelectField, and TagListField (Components/Ui).
  This is deliberately NOT component-scoped (.razor.css) CSS: Blazor's CSS isolation ties scoped
  styles to one specific component file, so three different components sharing the same
  ".text-field*" class names would each need their own copy of this file if it were scoped.
  Global here avoids duplicating it three times.
*/

.text-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

.text-field__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-harbor-ink);
}

.text-field__input {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    padding: var(--space-3);
    border: 1px solid var(--color-mist);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-harbor-ink);
    transition: border-color 0.15s ease;
}

.text-field__input:disabled {
    background-color: var(--color-paper);
    cursor: not-allowed;
}

.text-field__input--error {
    border-color: var(--color-error);
}

.text-field__error {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-error);
}

.text-field__help {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-slate);
}

/* TagListField-specific (chips) */
.tag-list-field__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.tag-list-field__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background-color: var(--color-paper);
    border: 1px solid var(--color-mist);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
}

.tag-list-field__chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-slate);
    font-size: var(--font-size-base);
    line-height: 1;
    padding: 0;
}

.tag-list-field__chip-remove:hover {
    color: var(--color-error);
}

.tag-list-field__input-row {
    display: flex;
    gap: var(--space-2);
}

.tag-list-field__input-row .text-field__input {
    flex: 1;
}