/**
 * Подсветка незаполненных обязательных полей — одна на весь back-office.
 *
 * ЗАЧЕМ ОТДЕЛЬНЫЙ ФАЙЛ. Класс `is-invalid` вешает JS почти каждого экрана
 * (сотрудники, клиенты, заказ-наряд, работы, материалы, приход, списание…), а
 * рисовал его КАЖДЫЙ экран у себя — и на двух экранах правило проигрывало
 * борьбу за приоритет собственному же оформлению полей:
 *
 *     .dc-st-form input:not([type="checkbox"]) { border: 1px solid var(--inp) }  (0,2,1)
 *     .dc-st-form .is-invalid { border-color: var(--accent) }                    (0,2,0)
 *
 * Второй селектор слабее на один элемент, поэтому рамка НЕ КРАСНЕЛА вовсе:
 * кнопка «Сохранить» молча не срабатывала, а поля выглядели обычными.
 * Замерено в браузере 28.08.2026 на «Сотрудниках» и «Клиентах» — там
 * `is-invalid` навешивался, а вычисленный `border-color` не менялся.
 *
 * ПОЧЕМУ `!important`. «Невалидно» — это состояние, которое обязано побеждать
 * базовое оформление поля всегда и на любом экране, включая ещё не написанные.
 * Держать это на балансе специфичности — значит возвращаться к той же ошибке
 * при первом же новом экране: там свои токены, свои селекторы, и проверить
 * приоритет глазами нельзя. `!important` снимает вопрос целиком.
 *
 * ПОЧЕМУ НЕ АКЦЕНТ. Раньше рамка красилась в `--accent`, а он у арендатора
 * настраиваемый: с зелёным акцентом «ошибка» подсвечивалась зелёным. Здесь
 * `--dc-red` — он специально не зависит от акцента (см. css/dc-theme.css).
 *
 * Подключается в master/view/header.php, то есть на всех страницах
 * back-office. Собственных правил `.is-invalid` в экранных стилях быть не
 * должно — за этим следит tests/Unit/InvalidFieldStyleTest.php.
 */

:root {
    --dc-invalid: var(--dc-red, #d43d51);
    --dc-invalid-ring: rgba(212, 61, 81, .22);
}

/* На тёмном фоне тот же красный уходит в грязь — берём светлее. */
:root[data-dc-theme="dark"] {
    --dc-invalid: #ff7a82;
    --dc-invalid-ring: rgba(255, 122, 130, .26);
}

/* Звёздочка у подписи обязательного поля (класс вешает dcRequired.mark).
   Псевдоэлемент, а не узел в разметке: подписи на экранах разные — где-то
   <label>, где-то <span>, — и вставлять в них ничего не нужно. */
.dc-required::after {
    content: " *";
    color: var(--dc-invalid);
    font-weight: 700;
}

/* Флажки и переключатели исключены: рамки у них нет, а кольцо вокруг
   галочки читается как «выбрано», а не как «ошибка». */
.is-invalid:not([type="checkbox"]):not([type="radio"]) {
    border-color: var(--dc-invalid) !important;
    box-shadow: 0 0 0 3px var(--dc-invalid-ring) !important;
}

/* Курсор dcRequired.report() ставит в первое незаполненное поле — и системная
   рамка фокуса (чёрная) закрывала бы у него красную. Заменяем её красной:
   фокус остаётся видимым, состояние поля — тоже. */
.is-invalid:not([type="checkbox"]):not([type="radio"]):focus {
    outline: 2px solid var(--dc-invalid) !important;
    outline-offset: 0;
}