/* ============================================
   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;
}

/* ============================================
   2. ПОЛЯ ВВОДА И КНОПКИ
   ============================================ */
.field-group {
    margin-bottom: 15px;
}

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

.button-group {
    margin-top: 20px;
}

.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: 6px 0;
}




/* ============================================
   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: 18px;
    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;
}

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