/* ============================================
   1. ОСНОВНЫЕ СТИЛИ СТРАНИЦЫ
   ============================================ */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f5f5f5;
}

/* Form — весь экран, не карточка посередине; кто хочет "окошко" — оборачивает нужную часть формы
   в Group со своим Background color (см. Elements/Group.js). Модалки (.modal-container/.modal-body
   ниже) — отдельный, не связанный с этим классом стиль, их эта правка не касается. */
.form-container {
    background-color: white;
    padding: 20px;
    box-sizing: border-box;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* container-type — нужен для Group Orientation "Horizontal on wide screens" (см.
       Widgets/Group.css, @container вместо @media): без него @container ничего не найдёт выше по
       дереву и не сработает — см. также .modal-body ниже для форм внутри модалок. */
    container-type: inline-size;
}

/* ============================================
   2. ПОЛЯ ВВОДА И КНОПКИ
   ============================================ */
/* Единый принцип (обсуждение 2026-09-30): отступ между соседями — ВСЕГДА gap контейнера-родителя,
   НИКОГДА собственный margin виджета. Раньше здесь было margin-bottom — работало только пока поле
   стояло одно под другим (типичный сценарий), но ломалось, когда то же поле оказывалось в ГОРИЗОНТАЛЬНОЙ
   строке рядом с кнопками (Doc_Tickets.List) — margin-bottom как был, так и оставался, добавляя
   невидимую высоту, которую honestly не видно глазами, но браузер её всё равно учитывает при
   Align vertical:Stretch (см. Widgets/Group.js) — кнопка "дотягивалась" не до видимого низа поля,
   а до конца этого невидимого отступа. gap не создаёт этой проблемы: он не принадлежит ни одному
   ребёнку персонально, поэтому нет "своего" отступа, который можно ошибочно посчитать вместе с
   высотой. Заодно gap не даёт эффекта у КРАЙНИХ элементов (первое поле не отъезжает вниз лишний раз,
   как было бы с margin-top) — все совпадения по одной оси теперь только у Group/Form-родителя.
   flex-direction:column — то же самое, что и раньше давал обычный display:block (дети растягиваются
   на всю ширину по умолчанию, align-items:stretch — дефолт колонки), явно, а не как побочный эффект
   блочной раскладки. Подпись (label) внутри поля (Widgets/Field.js и др.) — тоже ребёнок этого же
   flex-контейнера, поэтому отступ между подписью и самим контролом ушёл сюда же (см. удаление
   margin-bottom у .field-caption во всех копиях) — один источник правды на оба случая: и "поле от
   поля", и "подпись от своего же контрола" — та же самая идея one cell = один прямоугольник,
   расстояние между прямоугольниками не хранится внутри них самих.

   Половина spacing, не полный (обсуждение 2026-10-03): подпись визуально "принадлежит" своему
   контролу — отступ между ними должен быть заметно меньше, чем между РАЗНЫМИ полями (тот gap —
   у родительской Group/Table, отдельное правило, этим calc() не затронут). Проверено: .field-group
   везде ровно два ребёнка (подпись+контрол), третьего (hint/error) нигде нет — делить gap пополам
   безопасно для всех виджетов сразу. */
.field-group {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing, 10px) / 2);
}

/* label/input/textarea/select/button больше НЕ стилизуются здесь по голому тегу — см.
   client/js/Widgets/*.css (Field.css/.form-control и т.д.): каждый виджет отвечает за свой
   внешний вид сам, стиль применяется только там, где сам виджет явно проставил нужный класс.
   Раньше общее правило по тегу непреднамеренно "утекало" на другие виджеты, использующие тот же
   HTML-тег для другой цели (пример: RadioGroup оборачивает каждый вариант ответа в <label>,
   получал чужую жирность/отступы, предназначенные только для настоящих подписей полей). */

.button-group {
    margin-top: var(--spacing, 10px);
}

.error {
    color: red;
    padding: 10px;
    background-color: #ffeeee;
    border-radius: 4px;
}

/* ============================================
   3. ГРУППЫ (ФОРМЫ, ГРУППЫ ПОЛЕЙ)
   ============================================ */
/* Ничто внутри формы не сжимается ниже своего естественного размера */
.form-container *, .modal-body * {
    flex-shrink: 0;
}

/* Вложенные группы (type: "group") — вертикально по умолчанию */
[class$="-container"]:not(.form-container) {
    display: flex;
    flex-direction: column;
    padding: var(--spacing, 10px);
}




/* ============================================
   4. ТАБЛИЦЫ — вынесено в Elements/Table.css (подключается отдельным <link>, см. client-form.html)
   ============================================ */

/* ============================================
   5. МОДАЛЬНЫЕ ОКНА
   ============================================ */
.modal-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-layer .modal-container {
    position: relative;
    background-color: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 1200px;
    height: 90%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Крестик — единственное, что отличает модалку от обычной страницы (кроме размера/оверлея):
   заголовок формы рендерится тем же renderForm(..., true), что и на обычной странице, прямо внутри
   .modal-body — отдельной строки-шапки под него больше нет (см. client-form-modal.js). */
.modal-layer .modal-close {
    position: absolute;
    top: 4px;
    right: 8px;
    cursor: pointer;
    /* --font-size не наследуется сюда от .modal-body (см. form-renderer.js) — крестик лежит рядом с
       ней, не внутри (.modal-container > .modal-close + .modal-body, см. client-form-modal.js), так
       что var() всегда резолвится в дефолтный фолбэк 14px+6=20px. Это нормально: крестик — фиксированный
       элемент chrome модалки, не содержимое формы, его позиция (top/right) тоже не завязана на
       --spacing по той же причине. */
    font-size: calc(var(--font-size, 14px) + 6px);
    line-height: 1;
    color: #666;
    z-index: 1;
}
.modal-layer .modal-close:hover {
    color: #000;
}

.modal-layer .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    /* Своя ширина модалки (не вся страница целиком) — см. тот же комментарий у .form-container
       выше: без этого группа "Horizontal on wide" внутри модалки ориентировалась бы на ширину
       всего окна браузера, а не на реально доступное ей место в модалке. */
    container-type: inline-size;
}

/* Классы .combobox-*/.lookup-* переехали в client/js/Widgets/Combobox.css и Field.css — см.
   комментарий выше про то, почему каждый виджет теперь хранит свой стиль сам. */