/* ============================================================
   Business PC V2 — FORMS (PHASE 3)
   Единый источник стилей форм: раскладка, поля-группы,
   чекбоксы/радио/переключатели, служебные состояния.

   Общие примитивы (.form-grid, .field, .check-list) сейчас
   описаны в admin.css и применяются на других страницах тоже.
   Здесь они собраны как компоненты ТЗ (Input/Select/Checkbox/
   Switch), а страничные файлы подключаются позже и могут
   переопределить детали — поэтому вид не меняется.

   Правило подключения: ПОСЛЕ ui/inputs.css и ui/selects.css,
   но ДО site.css и страничных стилей.
   ============================================================ */

/* ---------- Checkbox / Radio ----------
   Нативные элементы со встроенным акцентом: единый цвет
   переопределён в теме (theme-mono.css). */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--color-primary); }

/* ---------- Раскладка формы ---------- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}
.form-grid .full { grid-column: 1 / -1; }

@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Группа поля ---------- */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field label {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.field input,
.field textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--color-text);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    transition: border-color 0.2s ease;
}

/* Селект в форме: вид из ui/selects.css, здесь только ширина
   и отступ под стрелку (иначе текст налезет на шеврон). */
.field select {
    box-sizing: border-box;
    width: 100%;
    font-size: 0.9rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.field textarea {
    resize: vertical;
    min-height: 90px;
    line-height: var(--line-height-base);
}

/* ---------- Списки переключателей ---------- */
.check-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}