/* ============================================================
   FORMS — общие элементы форм: ошибки, сетка полей, всплывающие
   сообщения об успехе/ошибке, модалка подтверждения, капча.
   Используется на всех страницах с формами (create_app, crm,
   dispatch, dashboard, public_company_form и т.д.).
   ============================================================ */

/* ------------------------------------------------------------
   ПОЛЕ ФОРМЫ: вертикальный ритм и подпись.

   Одно правило на весь проект. Раньше каждая страница описывала это
   сама — .ca-field (create_app) и .select-field (update_app) содержали
   один и тот же набор: padding-top:1em сверху, у подписи margin-top:0,
   margin-bottom:.5em и серый var(--c-muted). Значения совпадали, но жили в
   двух файлах и расходились при каждой правке.

   Классы оставлены прежние: переименовывать их значило бы править все
   шаблоны разом. Специфика (ширина колонок, зазоры сетки) по-прежнему
   у страниц — здесь только то, что обязано быть общим.
   ------------------------------------------------------------ */
.ca-field,
.select-field{ padding-top: var(--gap-field); }

.ca-field label,
.select-field label{
  display: block;
  /* margin-top:0 — иначе .pure-form-stacked label{margin:.25em 0} из
     pure.css (правило той же специфичности, но объявленное позже) добавит
     ещё .25em сверху, и отступ станет 1.25em вместо ровно 1em: сам
     padding-top выше его уже даёт. */
  margin-top: 0;
  margin-bottom: var(--gap-label);
  color: var(--c-muted);
  /* Высота подписи не должна зависеть от того, есть ли у неё иконка-
     подсказка: .tip-icon — 1.1rem с vertical-align:middle, то есть
     занимает .8em над базовой линией и .3em под ней (1.1em всего), тогда
     как у текста ascender+descender около 1em. Любой line-height от 1.1em
     вмещает оба варианта, и поля соседних колонок одного ряда встают на
     одной высоте. */
  line-height: var(--line-label);
}

.errorlist {
    color: #e35f5f;
}

/* Отключаем встроенную в Pure.css красную подсветку :invalid при фокусе
   (например, у обязательного select "Исполнитель заявки" с пустым первым
   пунктом — браузер сразу считает поле невалидным). Возвращаем тот же
   синий фокус, что и у остальных полей формы. */
.pure-form input:focus:invalid,
.pure-form select:focus:invalid,
.pure-form textarea:focus:invalid {
    color: inherit;
    border-color: var(--c-accent);
}
/* У чекбоксов, радио и файловых полей Pure красит не рамку, а OUTLINE
   отдельным правилом — без этого сброса поле выбора файла с required
   обводилось красным просто потому, что файл ещё не выбран (поймали на
   загрузке показаний в разделе «Счётчики»). Ошибка до первой попытки
   отправки — ложная тревога: незаполненное поле не то же самое, что
   неверно заполненное. */
.pure-form input[type=checkbox]:focus:invalid:focus,
.pure-form input[type=file]:focus:invalid:focus,
.pure-form input[type=radio]:focus:invalid:focus {
    outline-color: var(--c-accent);
}

/* Текст ошибки под конкретным полем формы (create_pay, public_company_form) */
.field-error {
    color: #e35f5f;
    margin-top: .35em;
}

/* Сводка ошибок формы вверху страницы (add/update_contractor,
   add/update_management_company) — тот же цвет, что у .field-error,
   просто оформлен как блок */
.error-list {
    background: #f2dede;
    color: #e35f5f;
    border-radius: 6px;
    padding: .6em .8em;
    margin: .5em 0 1em;
}

.error-list ul {
    margin: 0;
    padding-left: 1.2em;
}

.error-list li {
    margin: .2em 0;
}

/* Сброс браузерного оформления <fieldset> вокруг группы чекбоксов (customization) */
.fieldset-reset {
    border: 0;
    padding: 0;
    margin: .5em 0;
}

.checkbox-lg {
    margin-right: .5em;
    transform: scale(1.35);
    transform-origin: left center;
}

/* Превью логотипа УК на публичной форме заявки и странице успеха */
.company-logo-preview {
    width: 180px;
    height: 180px;
    object-fit: contain;
    pointer-events: none;
}

.company-branding-section {
    align-items: flex-start;
}

.company-branding-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-field);
}

.company-logo-picker {
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--c-surface);
    border: 1px dashed var(--c-border);
}

.company-logo-placeholder {
    color: var(--c-muted);
    font-size: .75rem;
    line-height: 1.3;
    text-align: center;
}

.company-qr-preview {
    width: auto;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.company-qr-preview img {
    max-height: 180px;
}

/* Платёжные иконки (МИР/Visa/Mastercard) в блоке оплаты (customization) */
.payment-icon {
    height: 1em;
    width: auto;
    vertical-align: middle;
    padding-top: .5em;
}

.payment-icon + .payment-icon {
    margin-left: 1.5em;
}

/* Pure Grids: канавки между колонками формы (по доке Pure) */
.pure-g.form-grid > [class*="pure-u"] {
    box-sizing: border-box;
    padding-left: .5rem;
    padding-right: .5rem;
}

/* выравниваем ряд так, чтобы крайние поля совпадали с контейнером */
.form-grid { margin-left: -.5rem; margin-right: -.5rem; }

/* единый вертикальный отступ между блоками формы */
.form-field { margin-bottom: 1em; }

/* Ряд флагов заявки (Аварийная/Платная/Повтор) — update_app.html и
   create_app.html: в ряд, зазор 2em (flex-wrap — чтобы на узком экране
   чекбоксы с иконками не вылезали за край, а переносились на новую строку). */
.checkbox-field{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2em;
    padding-top: 1em;
}
/* Pure.css даёт .pure-checkbox margin:.5em 0 (наследие вертикальной раскладки
   чекбоксов один под другим) — здесь ряд горизонтальный, зазор уже задан gap
   и padding-top контейнера, а этот margin только добавлял лишние пиксели
   сверху первого чекбокса поверх padding-top.

   Сам чекбокс, подпись и иконка при этом стоят по одной оси. Раньше это
   писалось инлайном на КАЖДОЙ такой подписи (create_app, update_app,
   карточка исполнителя): без выравнивания нативный чекбокс сидит на базовой
   линии текста, то есть ниже его середины, а иконка-звёздочка «Юрлицо» —
   выше. Инлайновые копии в тех шаблонах остались и просто дублируют это
   правило теми же значениями; в новой разметке они не нужны. */
.checkbox-field .pure-checkbox{
    margin: 0;
    display: flex;
    align-items: center;
    gap: .4em;
}

.success-message {
    position: fixed;
    color: var(--c-surface-muted);
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: mediumseagreen;
    padding: 20px;
    border-radius: 5px;
    z-index: 999;
    width: 350px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.success-message.show {
    opacity: 1;
}

#captcha-container {
    display: flex;
    justify-content: center;
    width: 400px;
    margin: 0 auto;
}

/* Резерв места под виджет капчи */
.captcha-reserved { min-height: 120px; display: flex; align-items: center; }

/* Тост-уведомления (Django messages) — components/notifications.css,
   разметка partial/notifications.html, поведение users/js/notifications.js. */