.app-field {
    display: grid;
    gap: 0.65rem;
}

.app-field--disabled {
    opacity: 0.68;
}

.app-field__label {
    font-size: var(--bes-font-size-sm);
    font-weight: var(--bes-font-weight-semibold);
    letter-spacing: -0.01em;
    color: var(--bes-color-text-primary);
}

.app-field__description {
    font-size: var(--bes-font-size-xs);
    line-height: 1.55;
    color: var(--bes-color-text-secondary);
}

.app-field__error {
    font-size: var(--bes-font-size-xs);
    line-height: 1.5;
    color: var(--bes-color-danger-text);
}

.app-field__control-wrapper {
    position: relative;
}

.app-field__loader {
    position: absolute;
    top: 50%;
    right: var(--bes-space-4);
    transform: translateY(-50%);
    pointer-events: none;
}

.app-field__control {
    width: 100%;
    min-height: 3.15rem;
    padding: 0.82rem 1rem;
    border: 1px solid var(--bes-color-border-strong);
    border-radius: calc(var(--bes-radius-md) + 0.08rem);
    background: var(--bes-color-surface-primary);
    color: var(--bes-color-text-primary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition:
        border-color 140ms ease,
        box-shadow 140ms ease,
        background-color 140ms ease;
}

.app-field__control::placeholder {
    color: var(--bes-color-text-secondary);
}

.app-field__control:hover {
    border-color: rgba(37, 99, 235, 0.48);
}

.app-field__control:focus {
    outline: none;
    border-color: var(--bes-color-accent-primary);
    box-shadow: 0 0 0 4px var(--bes-color-focus-ring);
}

.app-field__control:disabled,
.app-field__control[readonly] {
    cursor: not-allowed;
    background: var(--bes-color-surface-secondary);
}

.app-field--invalid .app-field__control {
    border-color: rgba(180, 35, 24, 0.5);
}

.app-field--invalid .app-field__control:focus {
    box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.14);
}

.app-field__control--loading {
    padding-right: 3rem;
}

.app-field__control--select {
    appearance: none;
    padding-right: 3.2rem;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--bes-color-text-secondary) 50%),
        linear-gradient(135deg, var(--bes-color-text-secondary) 50%, transparent 50%);
    background-position:
        calc(100% - 1.35rem) calc(50% - 0.14rem),
        calc(100% - 1rem) calc(50% - 0.14rem);
    background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
    background-repeat: no-repeat;
}

.app-field__control--textarea {
    min-height: 8.5rem;
    resize: vertical;
}

@media (prefers-color-scheme: dark) {
    .app-field__control {
        background: var(--bes-color-surface-primary);
    }

    .app-field__control:disabled,
    .app-field__control[readonly] {
        background: var(--bes-color-surface-secondary);
    }
}