/* ============================================
TREINIO INPUT COMPONENT
============================================ */



/* === Базовый сброс для ВСЕХ input === */
.input,
input.input,
textarea.input,
select.input {
    width: 100%;
    height: var(--control-height-md);
    padding: 0 var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background-color: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-input);
    line-height: 1;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    transition: border-color var(--transition-hover) var(--transition-ease),
                background-color var(--transition-hover) var(--transition-ease),
                box-shadow var(--transition-hover) var(--transition-ease);
}

textarea.input {
    height: auto;
    padding: var(--space-3);
    line-height: 1.5;
    resize: vertical;
    min-height: 80px;
}

/* === Autofill — Chrome/Safari насильно перекрашивают фон === */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
.input:-webkit-autofill:active {
    /* inset box-shadow на 1000px перекрывает любой фон браузера */
    -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset ;
    -webkit-text-fill-color: var(--text-primary) ;
    /* "замораживаем" transition на 60000s — браузер не сможет анимировать свой фон */
    transition: background-color 0s 60000s, color 0s 60000s;
    caret-color: var(--text-primary);
}

/* === Placeholder === */
.input::placeholder {
    color: var(--text-tertiary);
}

/* === Hover (все, кроме error и disabled) === */
.input:hover:not(:disabled):not(.input-error) {
    background-color: var(--bg-input-hover);
    border-color: var(--border-hover);
}

/* === Focus === */
.input:focus:not(.input-error) {
    border-color: var(--border-focus);
    box-shadow: var(--ring-focus);
    background-color: var(--bg-input);
}

/* === Error === */
.input-error {
    background-color: var(--bg-input);
    border-color: var(--color-danger);
}

/* Error hover — был пропущен, добавляем */
.input-error:hover:not(:disabled) {
    background-color: var(--bg-input-hover);
    border-color: var(--color-danger);
}

/* Error focus — фикс белого вспыха */
.input-error:focus {
    background-color: var(--bg-input);
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* === Disabled === */
.input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--bg-input-disabled);
}

/* === With icon === */
.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon .input {
    padding-left: calc(var(--space-3) + 24px);
}

.input-icon {
    position: absolute;
    left: var(--space-3);
    color: var(--text-secondary);
    pointer-events: none;
}

/* === Password toggle === */
.input-password .input {
    padding-right: calc(var(--space-3) + 32px);
}

.input-action-btn {
    position: absolute;
    right: var(--space-2);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 0;
    transition: all var(--transition-hover) var(--transition-ease);
}

.input-action-btn:hover {
    color: var(--text-primary);
    background-color: var(--bg-input-hover);
}

/* === Row === */
.input-row {
    display: flex;
    gap: var(--space-3);
}

.input-row .input {
    flex: 1;
}

/* === Label === */
.input-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--font-label);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
}

/* === Group === */
.input-group {
    margin-bottom: var(--space-4);
    max-width: 400px;
}

.input-group:last-child {
    margin-bottom: 0;
}

/* === Error text === */
.input-error-text {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-xs);
    color: var(--color-danger);
}