/* Блоки экранов платформы контроля демпинга ГК «АЯК»: карточки, таблицы, формы.

   Цветовые токены, шрифты и каркас страницы живут в `oblik.css` и грузятся
   перед этим файлом. Здесь не должно быть ни одного значения цвета «числом»:
   записанный числом цвет остаётся светлым в тёмной теме, и элемент со светлым
   фоном садится посреди тёмной страницы.

   Короткие имена переменных (`--bg`, `--card`, `--muted`, `--ayak`, `--bad`,
   `--warn`, `--good`, `--night`) объявлены в `oblik.css` псевдонимами токенов
   и переживают смену темы: `var()` подставляется в момент применения. */

.red { color: var(--ayak); }

/* ── Карточки и текст ──────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  overflow-x: auto;
}
h1 { font-size: 18px; margin: 0 0 14px; }
h2 { font-size: 16px; margin: 0 0 10px; }
h3 { font-size: 13.5px; margin: 14px 0 8px; }
.sub { color: var(--muted); font-size: 12.5px; }
.info {
  border-left: 4px solid var(--night);
  background: var(--night-s);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 12.5px;
  margin: 0 0 10px;
}
.code {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-x: auto;
  white-space: pre;
}

/* ── Кнопки ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 8px;
  padding: 6px 13px;
  font: 600 12.5px inherit;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.btn.pri { background: var(--ayak); border-color: var(--ayak); color: var(--on-ayak); }
.btn.pri:hover { background: var(--ayak-dark); }

/* ── Вход ──────────────────────────────────────────────────────────────── */
.login {
  width: 380px;
  max-width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--ayak);
  border-radius: 14px;
  padding: 26px 28px;
}
.login label { display: block; font-size: 12px; font-weight: 600; margin: 10px 0 4px; }
/* Фон и цвет текста задаются, а не оставляются браузеру. Поле без заданного фона
   браузер красит своим, и в тёмной теме оно выходит светлее всех соседних
   поверхностей: белая заплата посреди тёмной страницы. В светлой теме `--card`
   равен тому же белому, который подставил бы браузер. */
.login input[type=text], .login input[type=password] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  font: inherit;
  background: var(--card);
  color: var(--ink);
}
.login input[type=text]:focus, .login input[type=password]:focus {
  outline: 2px solid var(--ayak);
  outline-offset: 1px;
}
.login .pol { display: flex; gap: 9px; align-items: flex-start; margin: 14px 0 10px; }
.login .pol input[type=checkbox] { flex: 0 0 auto; margin: 2px 0 0; }
.login .pol label {
  flex: 1 1 auto;
  margin: 0;
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted);
}
.login .btn { width: 100%; text-align: center; padding: 10px; margin-top: 4px; }
.login .hint { color: var(--muted); font-size: 11px; margin: 12px 0 0; }
.login .error {
  border-left: 4px solid var(--bad);
  background: var(--bad-s);
  color: var(--bad);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 600;
  margin: 0 0 4px;
}
.errcode { font-size: 34px; font-weight: 800; color: var(--ayak); margin: 6px 0 0; }

/* ── Журнал партнёров ───────────────────────────────────────────────────── */
/* Флаги показываются словами, а не значками: по требованию процесса пометка
   читается без пояснений. */

.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
}
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ayak); border-color: var(--ayak); }
.tabs b {
  font-size: 12px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
}
.tabs a.on b { background: var(--ayak); color: var(--on-ayak); }
/* Второй ряд вкладок: представления внутри вкладки раздела. Мельче
   и без отступа сверху, чтобы читался подчинённым, а не вторым разделом. */
.tabs.vtoroy-ryad { margin-top: -4px; font-size: 13px; }

/* Сортируемый заголовок колонки (`_spisok.html`, макрос `zagolovok`). Общий
   для всех экранов со списками: модель отбора у них единая. */
.grid th a.sortable {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.grid th a.sortable:hover { color: var(--ink); text-decoration: underline; }
.grid th .ar { color: var(--ayak); font-size: 12px; }

/* Склейки обязаны помещаться на экране 1440, где рабочая область 1156 пикселей.
   Таблица лежит в `.tscroll`, а он ставит ей `min-width: max-content`, то есть
   ширину самой длинной строки без переносов: список вывесок растягивает её
   за край экрана, и уезжают как раз бренд, отклонение и ссылка. Отсюда три меры:
   потолок строки у внутренних блоков, а не у ячейки (`max-width` у `td`
   авторазметка таблицы не держит, тот же приём в `proverka.css`
   и `isklyucheniya.css`), и отступы со шрифтом как у списков платформы
   (`spisok.css`). */
.grid.sklejki th,
.grid.sklejki td { padding-left: 8px; padding-right: 8px; }
.grid.sklejki td { font-size: 13px; }
.grid.sklejki td small,
.grid.sklejki td .blok { display: block; max-width: 26ch; }

.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}
.filters input[type="search"] { min-width: 320px; flex: 1 1 320px; }
.filters input, .filters select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}
.filters input:focus, .filters select:focus { outline: 2px solid var(--ayak); outline-offset: 1px; }
.reset { color: var(--muted); font-size: 12.5px; }

.grid {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.grid th, .grid td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.grid th { background: var(--soft); font-size: 12px; color: var(--muted); font-weight: 600; }
.grid tbody tr:last-child td { border-bottom: none; }
.grid tbody tr:hover { background: var(--row-hover); }
.grid .num { text-align: right; white-space: nowrap; }
.grid small { display: block; color: var(--muted); font-size: 12px; }
.grid.inner { margin: 10px 0 4px; }
.name { color: var(--ink); font-weight: 600; text-decoration: none; }
.name:hover { color: var(--ayak); text-decoration: underline; }
.quiet { color: var(--muted); font-weight: 400; }

.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--soft);
  border: 1px solid var(--line);
  font-size: 12.5px;
  white-space: nowrap;
}
.flag {
  display: inline-block;
  margin: 1px 4px 1px 0;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bad-s);
  color: var(--bad);
  border: 1px solid var(--bad-b);
  font-size: 12px;
}
/* Нарушение без цены (0 ₽): учтено, но проверяет администратор.
   Янтарный, а не красный: это не «хуже нарушения», а «сначала проверь». */
.flag.proverit {
  background: var(--warn-s);
  color: var(--warn);
  border-color: var(--warn-b);
}

/* ── Карточка партнёра ──────────────────────────────────────────────────── */

.crumbs { margin: 0 0 12px; font-size: 13px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ayak); }

.passport { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 20px; margin: 14px 0; }
.passport div { border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.passport dt { color: var(--muted); font-size: 12px; }
.passport dd { margin: 2px 0 0; font-size: 13.5px; }

.ladder { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.ladder .step {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
  font-size: 12.5px;
}
.ladder .step.passed { color: var(--good); border-color: var(--good-b); background: var(--good-s); }
.ladder .step.current { color: var(--ayak); border-color: var(--ayak); font-weight: 600; }
.ladder .arrow { color: var(--muted); }

.events { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
.events li { margin-bottom: 4px; }

details { border-top: 1px solid var(--line); padding: 10px 0; }
details:first-of-type { border-top: none; }
summary { cursor: pointer; padding: 4px 0; }
summary .quiet { margin-left: 8px; font-size: 12.5px; }

/* ── Объяснение незакрытой работы ───────────────────────────────────────────
   Правило «карточка не закрывается сама» неочевидное, поэтому блок заметный:
   без прямого текста ни администратор, ни владелец процесса не поймут, почему
   дело висит, когда нарушений уже нет. */

.vnimanie {
  margin: 12px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--bad-b);
  border-left: 3px solid var(--ayak);
  border-radius: 10px;
  background: var(--bad-s);
  font-size: 13.5px;
}
.vnimanie .vyhod { margin-top: 8px; color: var(--muted); font-size: 12.5px; }
.vstroka { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* Фон и цвет заданы токенами, по той же причине, что у полей входа. */
.vstroka input[type="text"] {
  flex: 1 1 320px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  background: var(--card);
  color: var(--ink);
}

/* ── Правка карточки ────────────────────────────────────────────────────────── */

.pravka { border-top: 1px solid var(--line); margin-top: 14px; }
.pravka > summary { font-weight: 600; }
.pole-set {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 16px;
  margin-top: 10px;
}
.pole-set label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.pole-set label.shirokoe { grid-column: 1 / -1; }
/* Один класс, один смысл: «поле занимает строку целиком». В сетке параметров
   это колонка во всю ширину, в строке действий своя строка внутри flex.
   Второго класса под то же самое нет: два набора правил на один блок расходятся.
   Блок кнопок на карточке размечен `.knopki`, а не `.vstroka`, и правила,
   написанные только на `.vstroka`, до полей комментария не достают: подпись
   и поле встали бы в ряд с кнопками. Поэтому селектор называет оба блока. */
.vstroka label.shirokoe,
.knopki label.shirokoe { flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px; }
.vstroka textarea,
.knopki textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  resize: vertical;
  background: var(--card);
  color: var(--ink);
}
/* Поля ввода и выпадающие списки оформляются одним правилом: два набора правил
   на один блок расходятся молча, и в тёмной теме выпадающий список показал бы
   браузерный серый среди тёмных полей. */
.pole-set input,
.pole-set select {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-size: 13.5px;
}
.pole-set select:focus { outline: 2px solid var(--ayak); outline-offset: 1px; }
.pole-set input:focus { outline: 2px solid var(--ayak); outline-offset: 1px; }
.knopki { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }

/* ── Лоток служебных уведомлений, снизу слева ───────────────────────────────
   Живёт в общем файле, а не в стилях раздела. Скрипт `uvedomleniya.js`
   подключён в `base.html` и работает на каждой странице, а итоги действий
   печатают многие шаблоны. Из стилей одного раздела лоток на других экранах
   получался бы `position: static` и уезжал под конец страницы.
   Итоги действий не висят в потоке страницы, а уезжают сюда. Простое
   подтверждение тает само, итог с причиной ждёт, пока его закроют (разбор
   в `static/uvedomleniya.js`).

   Слева, а не справа: справа у широких таблиц живёт горизонтальная прокрутка,
   и карта уведомления накрывала бы её ровно тогда, когда таблицу листают. */
.uved-lotok {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.uved {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--good-b);
  border-left: 4px solid var(--good);
  border-radius: 10px;
  background: var(--good-s);
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: var(--sh);
  pointer-events: auto;
  animation: uved-prishlo 0.18s ease-out;
}

.uved.nope {
  border-color: var(--bad-b);
  border-left-color: var(--bad);
  background: var(--bad-s);
  color: var(--bad);
  font-weight: 600;
}

.uved-telo { flex: 1 1 auto; min-width: 0; }
.uved-telo p { margin: 0; }

.uved-krest {
  flex: 0 0 auto;
  padding: 0 2px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
}
.uved-krest:hover { opacity: 1; }

.uved.uhodit { opacity: 0; transform: translateY(6px); transition: opacity 0.2s, transform 0.2s; }

@keyframes uved-prishlo {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Кому важнее покой, чем движение: показываем сразу, без наезда. */
@media (prefers-reduced-motion: reduce) {
  .uved { animation: none; }
  .uved.uhodit { transition: none; }
}