/* ── Поля форм (RenderT / BsBasicFormRenderer) под стиль полей add-doctor-form (.vf__) ──
   RenderT эмитит .form-group > label + .form-control/.custom-select; подгоняем их под
   спецификацию React-компонента: радиус --r-sm, бордер 1.5px --line-2, паддинг 9/12,
   шрифт 13.5, фон --paper, фокус --primary + --shadow-focus, лейбл сверху, ошибка .is-invalid.
   background-color (не background) — чтобы не стереть chevron у .custom-select. */
.form-control,
.custom-select {
    height: auto !important;
    min-height: 38px;
    padding: 9px 12px !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
}

.form-control,
.custom-select,
.select2-container .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    color: var(--ink) !important;
    background-color: var(--paper) !important;
    border: 1.5px solid var(--line-2) !important;
    border-radius: var(--r-sm) !important;
    box-shadow: none !important;
    font-family: var(--font-ui);
    transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease), background-color var(--motion-fast) var(--ease);
}

.form-control:hover,
.custom-select:hover {
    border-color: var(--ink-3) !important;
}

.form-control:focus,
.custom-select:focus,
.select2-container--focus .select2-selection,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--primary) !important;
    background-color: var(--surface) !important;
    box-shadow: var(--shadow-focus) !important;
}

.form-control::placeholder {
    color: var(--ink-3);
}

/* лейбл над полем — как .vf__label */
.form-group > label,
.form-group > .col-form-label,
.form-group > .control-label {
    margin-bottom: 6px;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-2);
}

/* состояние ошибки — как .vf__input--error */
.form-control.is-invalid,
.custom-select.is-invalid {
    border-color: var(--danger) !important;
    background-color: var(--danger-tint) !important;
}
.form-control.is-invalid:focus,
.custom-select.is-invalid:focus {
    box-shadow: 0 0 0 3px oklch(0.585 0.19 28 / 0.18) !important;
}
.invalid-feedback {
    font-size: 11.5px;
    color: var(--danger);
}

/* Vetka RenderT field renderer aligned with add-doctor-form fields */
.vetka-render-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.vetka-render-field .vf__label {
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 500;
    margin: 0;
}

.vetka-render-field__control {
    min-width: 0;
}

.vetka-render-field__control > .form-control,
.vetka-render-field__control > .custom-select,
.vetka-render-field__control > .ref-select,
.vetka-render-field__control > .select2-container {
    width: 100% !important;
}

.vetka-render-field .vf__error {
    color: var(--danger);
    font-size: 11.5px;
    font-weight: 700;
}

.vetka-render-field__hint {
    color: var(--ink-3);
    font-size: 11.5px;
    line-height: 1.35;
}