/* ============================================================================
   YETI - тема «бумага и чернила».

   Отдельный слой ПОВЕРХ style.css: подключается после него и переопределяет
   цвета, рамки, тени и шрифт. В style.css ничего не правится - там живёт
   вёрстка (что где стоит и как переносится), здесь только внешний вид.

   Взято из design_handoff_paper_dashboard/README.md. Что и почему изменено
   под телефон - в design_handoff_paper_dashboard/ADAPTATION.md.

   Главное ограничение: страницу заполняют СТОЯ НА УЛИЦЕ с телефона.
   Поэтому никакой min-width, никакой горизонтальной прокрутки, поля не мельче
   17px (иначе iPhone зумит форму), кнопки не ниже 52px.
   ========================================================================== */

/* ---- 1. Шрифт. Файлы лежат у нас, внешних запросов нет ------------------- */

/* IBM Plex Mono, лицензия OFL. Четыре файла: latin и cyrillic, 400 и 700.
   Суммарно ~47 КБ. Скачаны из @fontsource/ibm-plex-mono, диапазоны символов
   оттуда же - браузер тянет только тот файл, символы которого встретил.
   font-display: swap - текст виден сразу системным шрифтом, потом заменяется:
   на улице через мобильный интернет ждать белую страницу нельзя. */

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-cyrillic-400.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-cyrillic-700.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- 2. Токены ---------------------------------------------------------- */

:root {
  /* Переопределяем переменные style.css - за ними подтягивается всё,
     что ими покрашено, включая экраны, которых ещё нет. */
  --bg: #ece4d4;      /* тёплая бумага - фон страницы */
  --panel: #f7f1e5;   /* панель - лист поверх бумаги */
  --ink: #1b1812;     /* чернила: текст и все рамки */
  --muted: #6d6555;   /* приглушённый текст */
  --line: #d8cfbc;    /* линейки внутри панелей */
  --accent: #2b52c4;  /* кобальт - ссылки и фокус */

  /* Свои токены темы. */
  --faint: #a89e88;      /* плейсхолдеры, самое слабое */
  --rowline: #ddd3bf;    /* разделители строк */
  --rowhover: #f0e9d9;   /* подсветка строки под курсором */
  --sunken: #e5dcc8;     /* «выключенный» фон: архив, удалённое, неактивное */

  --red: #d94a26;        /* опасное, просроченное */
  --green: #167a48;      /* деньги, успех, главное действие */
  --cobalt: #2b52c4;     /* ссылки, нейтральный акцент */
  --violet: #7048c8;     /* документы */
  --amber: #c98a1b;      /* предупреждение (рамка) */
  --amber-ink: #a06f14;  /* предупреждение (текст, читаемее на бумаге) */

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "Cascadia Mono",
    Consolas, "Roboto Mono", "DejaVu Sans Mono", "Courier New", monospace;

  --edge: 1.5px solid var(--ink);
  --lift: 4px 4px 0 var(--ink);   /* тень панели */
  --lift-sm: 3px 3px 0 var(--ink); /* тень кнопки */
}

/* ---- 3. База ------------------------------------------------------------ */

body {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.5;
  /* Цифры в колонку: суммы, телефоны и даты выравниваются друг под другом.
     Ради этого и берётся моноширинный шрифт. Строка нужна и для запасного
     системного шрифта, если наш файл не загрузится. */
  font-variant-numeric: tabular-nums;
}

/* Нулевые скругления - главная примета стиля. Правило написано через [class],
   чтобы накрыть и те блоки, которых ещё нет: любой новый элемент с классом
   внутри шапки, страницы или подвала получит острые углы автоматически. */
.topbar [class],
.wrap [class],
.footer [class],
.wrap input,
.wrap select,
.wrap textarea,
.wrap button,
.topbar button {
  border-radius: 0;
}

/* Ссылки. Кнопки-ссылки (.btn, .bigbtn, .pager__link) исключены явно:
   без этого при наведении белый текст на зелёной кнопке становился синим
   и переставал читаться. */
a { color: var(--cobalt); }
a:hover:not(.btn):not(.bigbtn):not(.pager__link) { color: #1c3a94; }

h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 10px 0 8px;
  padding-bottom: 8px;
  border-bottom: var(--edge);
}

.lead,
.note,
.empty,
.muted,
.statnote,
.footer {
  color: var(--muted);
}

.footer {
  border-top: 1.5px solid var(--line);
  padding-top: 14px;
  font-size: 13px;
}

code {
  background: #e3d9c4;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--mono);
}

/* ---- 4. Шапка ----------------------------------------------------------- */

.topbar {
  background: var(--bg);
  color: var(--ink);
  border-bottom: var(--edge);
  padding: 10px 16px;
  gap: 10px;
}

/* Стрелка «назад» слева вверху. Размер 44x44 - это минимальная площадь,
   в которую уверенно попадает палец на ходу; меньше делать нельзя, иначе
   кнопкой не пользуются. */
.topbar__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  margin-right: 2px;
  border: var(--edge);
  box-shadow: var(--lift-sm);
  background: var(--panel);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
}

.topbar__back:hover { background: var(--rowhover); color: var(--ink); }
.topbar__back:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.logo {
  font-weight: 700;
  letter-spacing: 0.16em;
  font-size: 16px;
}

/* Красный квадрат из референса. Чисто декоративный, поэтому пустой content
   и никакой анимации: это CRM, а не живой дашборд - мигать тут нечему. */
.logo::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 9px;
  background: var(--red);
  border: 1.5px solid var(--ink);
  vertical-align: 0;
}

.topbar__sub {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Имя человека капсом не пишем: «ЖЕНЯ» - это не подпись, это крик. */
.topbar__name { color: var(--muted); font-size: 13px; }

.topbar__exit {
  background: var(--panel);
  color: var(--ink);
  border: var(--edge);
  box-shadow: 2px 2px 0 var(--ink);
  min-height: 52px;
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.topbar__exit:hover { background: var(--rowhover); }
.topbar__exit:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }

/* ---- 5. Панели ---------------------------------------------------------- */

/* Рамка чернилами и жёсткая смещённая тень - основа стиля.
   Тень не участвует в раскладке и горизонтальной прокрутки не создаёт. */
.card,
.cardbox,
.found,
.grid,
.periodbox,
.statrow,
.srclist__item,
.imgbox,
.docpreview,
.clientpick,
.item,
.total,
.due,
.scrollx {
  background: var(--panel);
  border: var(--edge);
  box-shadow: var(--lift);
}

.grid { overflow: visible; }

/* Предпросмотр шапки документа остаётся БЕЛЫМ листом, а не бежевой панелью:
   он показывает, как счёт выйдет на печати, а печатается он на белой бумаге.
   Бежевый фон здесь врал бы про результат. */
.docpreview { background: #fff; }

/* «Выключенные» блоки: архив, удалённое, служебные строки отчёта.
   Не серый холодный, а притухшая бумага - иначе выпадает из палитры. */
.cardbox--off,
.srclist__item--off,
.statrow--other,
.row--off td {
  background: var(--sunken);
  color: var(--muted);
}

@media (hover: hover) {
  .cardbox:hover { background: var(--rowhover); }
}

/* ---- 6. Плашки-заголовки секций ----------------------------------------- */

/* В референсе плашка обнимает текст, а справа от неё идёт линейка.
   У нас плашка во всю ширину: на 360px «обнимающая» плашка с хвостом-линейкой
   либо вылезает за экран, либо превращается в огрызок. Смысл тот же -
   белый капс на цветном, - но ширина честная. */
h2,
.plate {
  display: block;
  margin: 30px 0 14px;
  padding: 7px 10px;
  background: var(--ink);
  color: #fff;
  border: var(--edge);
  box-shadow: var(--lift-sm);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Цвета по смыслу разделов. Ими можно пользоваться руками:
   <h2 class="plate--money">Итого за период</h2>. */
.wrap h2.plate--jobs,      .wrap .plate--jobs      { background: var(--ink); }
.wrap h2.plate--clients,   .wrap .plate--clients   { background: var(--cobalt); }
.wrap h2.plate--money,     .wrap .plate--money     { background: var(--green); }
.wrap h2.plate--leads,     .wrap .plate--leads     { background: var(--red); }
/* На янтаре текст чернильный, а не белый: белый по #c98a1b даёт контраст
   около 2.5:1 - на солнце такую надпись не прочитать. */
.wrap h2.plate--reminders, .wrap .plate--reminders { background: var(--amber); color: var(--ink); }
.wrap h2.plate--docs,      .wrap .plate--docs      { background: var(--violet); }

/* ---- 7. Кнопки ---------------------------------------------------------- */

.btn,
.bigbtn,
.pager__link,
.clientpick__item,
.item__del {
  font-family: var(--mono);
  border: var(--edge);
  box-shadow: var(--lift-sm);
}

/* Текст по центру кнопки держит flex, а не line-height. В style.css высота
   строки равна высоте кнопки, и надпись в две строки («Сухой прогон (ничего
   не отправляет)») разъезжалась на 104 пикселя с дырой посередине. */
.btn,
.bigbtn,
.pager__link {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
}

/* Жёсткая тень рисуется ПОВЕРХ соседей и места в разметке не занимает.
   Из-за этого текст, идущий сразу за кнопкой, оказывался перечёркнут её тенью
   («не больше 100 позиций в одном документе» под кнопкой «Добавить строку»).
   Отодвигаем следующий за кнопкой текст на высоту тени с запасом. */
.btn + .note,
.btn + .lead,
.btn + p,
.bigbtn + .note,
.bigbtn + p,
.pager__link + .note,
.pager__link + p {
  margin-top: 14px;
}

.btn {
  background: var(--ink);
  color: #fff;
  min-height: 52px;
  padding: 8px 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.btn:hover { background: #37301f; }

/* Нажатие: кнопка «проваливается» на место своей тени. Единственная анимация
   в теме - зато сразу понятно, что палец попал. */
.btn:active,
.bigbtn:active,
.pager__link:active,
.clientpick__item:active,
.item__del:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

/* Фокус с клавиатуры. У полей ввода рамка кобальтом уже есть, а кнопки
   остались бы с браузерным чёрным контуром - на чернильной кнопке его
   не видно вовсе. */
.btn:focus-visible,
.bigbtn:focus-visible,
.pager__link:focus-visible,
.leadtab:focus-visible,
.topbar__exit:focus-visible,
.item__del:focus-visible,
.clientpick__item:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}

.btn:disabled {
  background: var(--sunken);
  color: var(--faint);
  border-color: var(--faint);
  box-shadow: 3px 3px 0 var(--faint);
}

.btn--ghost {
  background: var(--panel);
  color: var(--ink);
  border: var(--edge);
  font-weight: 700;
}

.btn--ghost:hover { background: var(--rowhover); }

/* Удалить. В шаблонах это всегда .btn--ghost.btn--danger, поэтому красным
   красится контур и текст, а не вся кнопка: сплошной красный блок рядом
   с «Поправить» читается как основное действие, а он не основное. */
.btn--ghost.btn--danger,
.btn--danger {
  background: var(--panel);
  color: var(--red);
  border-color: var(--red);
  box-shadow: 3px 3px 0 var(--red);
}

.btn--ghost.btn--danger:hover,
.btn--danger:hover { background: #fbe6df; }

/* Сохранить в прилипшей панели - главное действие формы, поэтому зелёная. */
.sticky-save .btn,
.sticky-save--two .btn:last-child {
  background: var(--green);
  color: #fff;
  border-color: var(--ink);
  box-shadow: var(--lift-sm);
}

.sticky-save .btn:hover,
.sticky-save--two .btn:last-child:hover { background: #1c9159; }

.sticky-save .btn--ghost,
.sticky-save--two .btn--ghost {
  background: var(--panel);
  color: var(--ink);
}

.sticky-save {
  background: rgba(236, 228, 212, 0.95);
  border-top: var(--edge);
}

.btn--narrow { padding: 8px 16px; }

/* В style.css у мелких рядов кнопок высота 44-46px. Поднимаем всё до 52:
   палец на улице, да ещё и в перчатке, точнее не станет. */
.btn--wide,
.rowbtns .btn,
.leadbtns .btn {
  min-height: 52px;
  line-height: 1.3;
}

/* Главная кнопка на главной. Зелёная - это «занести работу», то, ради чего
   человек открывает CRM стоя на объекте. */
.bigbtn {
  background: var(--green);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  padding: 18px 16px;
  box-shadow: var(--lift);
}

.bigbtn:hover { background: #1c9159; }

.bigbtn--second {
  background: var(--panel);
  color: var(--ink);
  font-size: 18px;
}

.bigbtn--second:hover { background: var(--rowhover); }

.pager__link {
  background: var(--panel);
  color: var(--ink);
  min-height: 52px;
  line-height: 1.3;
  font-weight: 700;
}

.pager__link--off {
  background: var(--sunken);
  color: var(--faint);
  border-color: var(--faint);
  box-shadow: 3px 3px 0 var(--faint);
}

.pager__pos { color: var(--muted); font-weight: 700; }

.item__del {
  background: var(--panel);
  color: var(--red);
  border-color: var(--red);
  box-shadow: 3px 3px 0 var(--red);
  min-width: 52px;
  min-height: 52px;
}

.item__del:hover { background: #fbe6df; }

.clientpick__item {
  background: var(--panel);
  color: var(--ink);
  min-height: 52px;
  box-shadow: 2px 2px 0 var(--ink);
}

.clientpick__item:hover { background: var(--rowhover); }

/* ---- 8. Поля ввода ------------------------------------------------------ */

/* Белый лист внутри бумажной панели - как поле кода в референсе.
   17px обязательны: при меньшем Safari на iPhone сам приближает страницу. */
.field__input,
.msgbox {
  background: #fff;
  border: var(--edge);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 17px;
}

.field__input::placeholder,
.msgbox::placeholder { color: var(--faint); }

.field__input:focus,
.msgbox:focus {
  outline: 2px solid var(--cobalt);
  outline-offset: 0;
  border-color: var(--cobalt);
}

select.field__input,
textarea.field__input {
  font-family: var(--mono);
  font-size: 17px;
}

/* Стрелка выпадающего списка - тем же чернильным цветом, что и рамка. */
select.field__input {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
}

/* Выбор файла: в style.css у него 15px, а телефон зумит всё, что меньше 17. */
input[type="file"].field__input { font-size: 17px; }

.field__label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.req { color: var(--red); font-weight: 700; }

.field--check input {
  width: 22px;
  height: 22px;
  accent-color: var(--green);
}

/* ---- 9. Таблицы и списки ------------------------------------------------ */

.grid th,
.grid td {
  border-bottom: 1px solid var(--rowline);
  /* Длинный адрес не имеет права растянуть таблицу вбок на телефоне. */
  overflow-wrap: anywhere;
}

.grid th {
  background: transparent;
  border-bottom: var(--edge);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.grid td { font-size: 15px; }

@media (hover: hover) {
  .grid tbody tr:hover td { background: var(--rowhover); }
}

.found__row { border-bottom: 1px solid var(--rowline); }

.found__key {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cardbox__date { color: var(--muted); font-size: 13px; }
.cardbox__title { font-weight: 700; }
.cardbox__title a { color: var(--ink); }
.cardbox__line--muted { color: var(--muted); }
.minijobs { color: var(--muted); }
.srclist__state { color: var(--muted); }
.links li::marker { color: var(--faint); }

/* ---- 10. Штампы и чипы -------------------------------------------------- */

/* Контурный штамп - «архивная», «не наш клиент». */
.tag {
  background: transparent;
  border: 1.5px solid var(--muted);
  color: var(--muted);
  padding: 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Вид работы на карточке - контурный штамп кобальтом. */
.cardbox__type {
  border: 1.5px solid var(--cobalt);
  color: var(--cobalt);
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Статус заявки и напоминания - белым по цветному, как «МОЖНО ВЗЯТЬ». */
.cardbox__type.lead--new,
.cardbox__type.lead--in_progress,
.cardbox__type.lead--done,
.cardbox__type.lead--cancelled {
  color: #fff;
  border-color: var(--ink);
}

.cardbox__type.lead--new { background: var(--red); }
.cardbox__type.lead--in_progress { background: var(--cobalt); }
.cardbox__type.lead--done { background: var(--green); }
.cardbox__type.lead--cancelled { background: var(--muted); }

/* Фильтр заявок: чипы с рамкой, выбранный залит чернилами. */
.leadtab {
  background: var(--panel);
  border: var(--edge);
  box-shadow: 2px 2px 0 var(--ink);
  color: var(--ink);
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.leadtab--on { background: var(--ink); color: #fff; }

/* Готовые штампы для новых экранов: <span class="stamp stamp--ok">оплачен</span> */
.stamp {
  display: inline-block;
  padding: 1px 7px;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stamp--ok { background: var(--green); }
.stamp--danger { background: var(--red); }
.stamp--info { background: var(--cobalt); }
.stamp--docs { background: var(--violet); }

/* Контурный вариант - когда штампов в списке много и заливка рябит. */
.stamp--warn {
  background: transparent;
  border-color: var(--amber);
  color: var(--amber-ink);
}

.stamp--quiet {
  background: transparent;
  border-color: var(--muted);
  color: var(--muted);
}

/* ---- 11. Деньги, предупреждения, опасное -------------------------------- */

/* Колонка цифр: сумма, телефон, дата. Класс для новых экранов. */
.tnum { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Деньги зелёным - но ТОЛЬКО когда сумма действительно есть.
   Поэтому это отдельный класс, а не общее правило на <strong>: в списке работ
   тот же тег держит и «42000 руб.», и «сумма не указана», а зелёная надпись
   «сумма не указана» врала бы цветом. */
.money { color: var(--green); font-weight: 700; font-variant-numeric: tabular-nums; }
.money--none { color: var(--muted); font-weight: 700; }

.card__num { color: var(--ink); font-weight: 700; }
.card__label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.statnum b { font-weight: 700; }
.statnum i { color: var(--muted); font-size: 12px; }
.statnum--money b { color: var(--green); }
.statrow__name { font-weight: 700; }
.statrow__note { color: var(--muted); }

.total__line { flex-wrap: wrap; gap: 4px 10px; }
.total__line strong { color: var(--green); }
.total__vat { color: var(--muted); }
.item__sum { color: var(--muted); }
.item__sum strong { color: var(--green); }
.item__num { color: var(--muted); font-weight: 700; }

/* Три сообщения. Отличаются толстой цветной полосой слева и цветом текста -
   на бумаге это читается быстрее, чем три оттенка заливки. */
.alert,
.warn,
.notice,
.statnote--warn,
.statrow__note--warn {
  background: var(--panel);
  border: var(--edge);
  border-left-width: 6px;
  box-shadow: var(--lift-sm);
  font-size: 15px;
}

.alert {
  border-left-color: var(--red);
  color: var(--red);
  font-weight: 700;
}

.warn,
.statnote--warn,
.statrow__note--warn {
  border-left-color: var(--amber);
  color: var(--amber-ink);
}

.notice {
  border-left-color: var(--green);
  color: var(--green);
}

.cell--bad { color: var(--red); font-weight: 700; }

/* Срок сервиса - ради этой строки затевался проект, поэтому она самая громкая
   на карточке клиента. Полоса слева остаётся, цвета - из палитры темы. */
.due { border-left-width: 8px; }
.due__label,
.due__sub { color: var(--muted); }
.due__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.due__text { font-weight: 700; }
.due--overdue { border-left-color: var(--red); }
.due--overdue .due__text { color: var(--red); }
.due--due { border-left-color: var(--green); }
.due--due .due__text { color: var(--green); }
.due--later { border-left-color: var(--cobalt); }
.due--no-data { border-left-color: var(--faint); }
.due--no-data .due__text { color: var(--muted); }

/* ---- 12. Цвет раздела по экрану ----------------------------------------- */

/* Шаблоны нам трогать нельзя, класса на <body> нет - поэтому раздел
   определяем по блоку, который встречается только на этой странице.
   Если браузер не знает :has(), правило просто игнорируется и заголовки
   остаются чернильными: ничего не ломается. */

/* Карточка клиента: только там есть блок срока сервиса. */
.wrap:has(.due) h2 { background: var(--cobalt); }

/* Заявки из ботов. */
.wrap:has(.leadtabs) h2 { background: var(--red); }

/* Напоминания об обслуживании. Текст чернильный - см. .plate--reminders. */
.wrap:has(form[action="/reminders/send"]) h2 { background: var(--amber); color: var(--ink); }

/* Документы: список и форма документа. */
.wrap:has(.newdocs) h2,
.wrap:has(.items) h2 { background: var(--violet); }

/* Статистика. Правило стоит последним не случайно: на этой странице тоже есть
   .due (доля работ, занесённых в день выполнения), и зелёный должен победить
   кобальт карточки клиента. */
.wrap:has(.periodbox) h2 { background: var(--green); }
.wrap:has(.periodbox) .card__num { color: var(--green); }

/* ---- 13. Поправки под узкий экран --------------------------------------- */

/* Моноширинный шрифт шире обычного, поэтому на 360px несколько мест
   поджимаем. Ни одно значение не опускается ниже порога читаемости:
   основной текст 15px, поля 17px, микроподписи 12px. */
@media (max-width: 420px) {
  .grid th,
  .grid td { padding: 9px 7px; }
  .grid td { font-size: 13px; }
  .grid th { font-size: 11.5px; letter-spacing: 0.04em; }

  /* Телефон и заголовки колонок не переносим: моноширинный шрифт шире
     обычного, и без этого номер рвался посреди цифр («+7 (900) 000-» /
     «00-04»), а «РАБОТ» разваливалось на «РАБО» и «Т».
     Правило только для таблицы на главной: у предпросмотра импорта
     (.grid--tight) своя прокрутка внутри .scrollx, там перенос не нужен. */
  .grid:not(.grid--tight) th,
  .grid:not(.grid--tight) td:first-child { white-space: nowrap; }
  .bigbtn { font-size: 18px; }
  .bigbtn--second { font-size: 16px; }
  h2, .plate { font-size: 12px; letter-spacing: 0.05em; }
  h1 { font-size: 20px; }
  .total__line { font-size: 18px; }
}

/* Печатные формы (счета, сметы, КП) сюда не попадают: у них своя разметка
   и свой print.css, а theme.css подключён только в layout/header.ejs. */

/* ---- 14. Быстрый ввод позиций ------------------------------------------- */

/* Кнопка «повторить строку» - чернильная, а не красная. Красный в теме занят
   удалением, и две красные кнопки рядом читались бы как «удалить» и «удалить». */
.item__copy {
  font-family: var(--mono);
  background: var(--panel);
  color: var(--ink);
  border: var(--edge);
  box-shadow: var(--lift-sm);
  min-width: 52px;
  min-height: 52px;
}

.item__copy:hover { background: var(--rowhover); }

/* Нажатие и фокус - ровно как у остальных кнопок темы. Значения повторены,
   а не «подправлены»: правило про крестик стоит выше, и любое отличие здесь
   молча переопределило бы его для уже работающей кнопки. */
.item__copy:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

.item__copy:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}

/* ⛔ Ниже - только широкий экран. Мобильный вид темы не меняется. */
@media (min-width: 900px) {
  /* Таблица позиций - один лист бумаги, а не двадцать карточек с тенью:
     двадцать смещённых теней подряд дают рябь, за которой не видно цифр. */
  .items {
    background: var(--panel);
    border: var(--edge);
    box-shadow: var(--lift);
    padding: 10px 12px;
  }

  .item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rowline);
    box-shadow: none;
    padding: 5px 0;
    margin-bottom: 0;
  }

  .item:last-child { border-bottom: 0; }

  /* Заголовки колонок - тем же капсом, что в .grid: это та же таблица. */
  .itemshead { border-bottom: var(--edge); margin-bottom: 6px; }

  .itemshead__cell {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .itemshead__cell--sum { text-align: right; }

  /* 17px в поле нужны против самопроизвольного зума Safari на iPhone.
     Здесь мышь и клавиатура, зумить некому - 16px дают более плотную строку,
     оставаясь выше порога читаемости. */
  .item .field__input { font-size: 16px; }

  .item__sum { color: var(--ink); font-variant-numeric: tabular-nums; }
  .item__num { font-size: 13px; text-align: center; }

  /* Кнопки строки уменьшены с 52px: 52 - это размер под палец, а за столом
     в них целятся мышью, и высокая кнопка растягивала бы строку. */
  .item__del,
  .item__copy {
    min-width: 36px;
    min-height: 36px;
    font-size: 18px;
    padding: 0;
  }

  .item__del { box-shadow: 2px 2px 0 var(--red); }
  .item__copy { box-shadow: 2px 2px 0 var(--ink); }

  /* Тень здесь 2px, а «провал» кнопки при нажатии задан на 3px выше по файлу -
     без поправки кнопка уезжала бы на пиксель дальше своей тени. */
  .item__del:active,
  .item__copy:active { transform: translate(2px, 2px); }
}