/* css/v5-forms.css */

/* ============================================================
   FORMS — поля ввода
   ============================================================ */

.v5-field-group {
    display: flex;
    flex-direction: column;
    gap: var(--v5-gap-min);
}

.v5-field-label {
    font-size: var(--v5-font-normal);
    font-weight: 500;
    color: var(--v5-primary-hover);
}

.v5-field-input {
    width: 100%;
    min-height: var(--v5-height-normal);
    padding: var(--v5-padding);
    border: var(--v5-border-width) solid var(--v5-primary-base);
    border-radius: var(--v5-radius);
    background: var(--v5-primary-light);
    color: var(--v5-primary-base);
    font-size: var(--v5-font-normal);
    font-family: inherit;
    transition: all 0.2s;
}

.v5-field-input:focus {
    outline: none;
    border-color: var(--v5-primary-base);
    box-shadow: 0 0 0 var(--v5-gap-min) var(--v5-primary-light);
}

.v5-field-input:disabled {
    opacity: 0.5;
    background: var(--v5-primary-bg);
    cursor: not-allowed;
}

/* ============================================================
   КЛИКАБЕЛЬНОЕ ПОЛЕ
   ============================================================ */

.v5-field-clickable {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v5-gap-normal);
    padding: var(--v5-gap-normal);
    background: var(--v5-primary-light);
    border: var(--v5-border-width) solid var(--v5-primary-base);
    border-radius: var(--v5-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    height: var(--v5-height-normal);
    min-height: var(--v5-height-normal);
    max-height: var(--v5-height-normal);
}

.v5-field-clickable:hover:not(.v5-disabled) {
    background: var(--v5-primary-hover);
}

.v5-field-clickable.v5-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--v5-primary-bg);
}

.v5-field-clickable .v5-value {
    flex: 1;
    font-size: var(--v5-font-normal);
    color: var(--v5-primary-base);
    word-break: break-word;
}

.v5-field-clickable .v5-value.v5-placeholder {
    color: var(--v5-primary-hover);
    opacity: 0.6;
    font-style: italic;
}



.v5-field-clickable:hover:not(.v5-disabled) .v5-icon {
    color: var(--v5-primary-base);
}

/* ============================================================
   ЧЕКБОКС
   ============================================================ */

.v5-field-checkbox {
    display: flex;
    align-items: center;
    gap: var(--v5-gap-normal);
}

.v5-field-checkbox input {
    width: calc(18px * var(--v5-scale));
    height: calc(18px * var(--v5-scale));
    padding: 0;
}

/* ============================================================
   ЦВЕТОВОЙ ВВОД
   ============================================================ */

.v5-color-input {
    width: calc(30px * var(--v5-scale));
    height: calc(25px * var(--v5-scale));
    border: var(--v5-border-width) solid var(--v5-primary-base);
    border-radius: var(--v5-radius);
    padding: 0;
    background: none;
    cursor: pointer;
}