/* ============================================================================
   «Мотор-Плейс» CRM/DMS — ПРИМЕНЕНИЕ ВИЗУАЛЬНОГО ЯЗЫКА К FILAMENT.
   Значений здесь нет ни одного: все до последнего пикселя приходят токенами из
   motorplace-tokens.css. Потому и разделены два файла: менять облик можно, не
   читая этот.

   Загружается ПОСЛЕ base-theme.css (базовой темы сборщика). База написана на
   именах, а не на цветах: её 5600 строк знают `--surface`, `--ink`, `--row-h`,
   но не знают, чему они равны. Поэтому мы не переписываем разметку Filament и
   не воюем с базой — мы ПОДСТАВЛЯЕМ ЕЙ СВОИ ЗНАЧЕНИЯ. Обновление Filament или
   базы после этого не ломает облик: ломаться нечему.

   Старое содержимое файла (облик `design-v2`: Unbounded, Golos Text, #d4142a,
   жёлто-чёрная разметка беды) ушло в архив решением владельца от 11.10.2026 —
   основой стал гайдлайн заказчика. См. docs/дизайн.md.
   ============================================================================ */

/* ============================================================================
   1 · МОСТ К БАЗОВОЙ ТЕМЕ
   Левая часть — имена, которые читает base-theme.css; правая — наши токены.
   Каждое имя базы названо здесь ровно один раз, поэтому видно, что не забыто.
   ============================================================================ */
:root, body {
  /* поверхности */
  --skin-bg:   var(--mp-bg);
  --surface:   var(--mp-surface);
  --surface-2: var(--mp-surface-2);
  --rail:      var(--mp-rail);

  /* текст */
  --ink:   var(--mp-text);
  --body:  var(--mp-text-soft);
  --mute:  var(--mp-text-mute);
  --faint: var(--mp-text-faint);

  /* Акцент. База берёт его из палитры Filament (`--primary-600`), а палитру
     мы задали в панели так, что 600-й оттенок — РОВНО #B1212E гайдлайна.
     Здесь всё равно пишем токен явно: палитра Filament считается в oklch, и
     одна замена значения в токенах не должна требовать пересчёта палитры. */
  --primary:       var(--mp-accent);
  --primary-hover: var(--mp-accent-hover);
  --primary-soft:  var(--mp-accent-tint);
  --on-primary:    var(--mp-on-accent);

  /* Состояния базы ложатся на пять статусов гайдлайна. Их ровно столько же,
     и смысл совпадает: ok→готово, warn→внимание, bad→ошибка, info→в работе. */
  --ok:   var(--mp-st-o-ink); --ok-soft:   var(--mp-st-o-bg); --on-ok:   var(--mp-white);
  --warn: var(--mp-st-w-ink); --warn-soft: var(--mp-st-w-bg); --on-warn: var(--mp-white);
  --bad:  var(--mp-st-e-ink); --bad-soft:  var(--mp-st-e-bg); --on-bad:  var(--mp-white);
  --info: var(--mp-st-i-ink); --info-soft: var(--mp-st-i-bg); --on-info: var(--mp-white);
  --neutral: var(--mp-st-n-ink); --neutral-soft: var(--mp-st-n-bg);

  /* линии и форма */
  --line:        var(--mp-line);
  --line-soft:   var(--mp-line-soft);
  --line-strong: var(--mp-line-strong);
  --radius:      var(--mp-radius-sm);
  --radius-sm:   var(--mp-radius-sm);
  --radius-lg:   var(--mp-radius);
  --shadow:      var(--mp-shadow-pop);
  --shadow-sm:   var(--mp-shadow-top);

  /* текст и фокус */
  --font-base: var(--mp-size-body);
  --font-sm:   var(--mp-size-caption);
  --pad:       var(--mp-gap-card);

  /* ФОКУС — ГРАФИТОВЫЙ, А НЕ КРАСНЫЙ. Увидено живьём: поле в фокусе получало
     рамку акцента (#B1212E), а поле с ошибкой — рамку статуса «ошибка»
     (#B3261E). Два почти одинаковых красных на одной форме означают, что
     оператор на звонке не отличает «я тут стою» от «я ошибся». Гайдлайн требует
     видимый фокус (стр. 12), но цвета ему не назначает — значит выбираем мы, и
     выбираем так, чтобы красный остался за ошибкой и за одной главной кнопкой.
     ВЫВЕДЕНО: в отчёте стоит вопросом заказчику. */
  --focus:     var(--mp-text);

  /* ВЫДЕЛЕННАЯ СТРОКА — РОЗОВЫЙ ОТТЕНОК АКЦЕНТА, А НЕ СИНИЙ.
     Гайдлайн даёт для неё отдельный токен (`--hnd-red-tint #FBF1F2`, стр. 4):
     выбор строки — не «информация», а продолжение фирменного цвета. */
  --selected: var(--mp-accent-tint);
  --hover:    var(--mp-surface-2);

  /* боковое меню */
  --rail-ink:    var(--mp-rail-ink);
  --rail-mute:   var(--mp-rail-mute);
  --rail-active: var(--mp-rail-active);

  /* АКТИВНЫЙ ПУНКТ МЕНЮ. Увидено живьём: подпись активного пункта была почти
     не видна — база берёт для неё `--ink`, то есть цвет текста НА СТРАНИЦЕ
     (#1F2021), а меню в этой системе графитовое и в светлой теме тоже. Тёмное
     по тёмному. Подпись берёт цвет текста МЕНЮ, полоса слева — акцент. */
  --nav-active-bg:  var(--mp-rail-active);
  --nav-active-ink: var(--mp-rail-ink);
  --nav-active-bar: var(--mp-accent);

  /* ПЛОТНОСТЬ. База ждёт её значениями `--d-*` и сама раздаёт по правилам —
     поэтому обе плотности ТЗ подставляются одной связкой, без дублирования
     правил на каждый режим. Свои классы плотности базы (`bf-density-*`) мы НЕ
     включаем: там другие числа (строка 30, поле 28, меню 256), и они стоят с
     `!important` — наши 36/32/248 они бы перебили молча. */
  --d-row-h:     var(--mp-row);
  --d-input-h:   var(--mp-control);
  --d-btn-h:     var(--mp-btn);
  --d-btn-font:  var(--mp-size-body);
  --d-btn-pad-x: 14px;
  --d-bf-radius:    var(--mp-radius);
  --d-bf-radius-sm: var(--mp-radius-sm);
  --d-section-pad:  var(--mp-gap-card);
  --d-section-gap:  var(--mp-gap-block);
  --d-ta-badge-font: var(--mp-size-caption);
  --d-ta-badge-lh:   16px;
  --d-ta-badge-pad:  2px 8px;

  /* виджеты: значение показателя 34/800 (гайдлайн, стр. 5) */
  --w-value-font:   var(--mp-size-kpi);
  --w-value-weight: var(--mp-weight-kpi);
  --w-label-font:   var(--mp-size-caption);
  --w-label-weight: var(--mp-weight-caption);
  --w-grid-gap:     var(--mp-gap-card);

  /* ШИРИНА БОКОВОГО МЕНЮ — переменная самого Filament: он печатает её в <head>
     из настройки панели. Перебиваем здесь, а не в панели, потому что 248px —
     это гайдлайн (стр. 3 и 6), то есть часть облика; менять раскладку панели
     ради числа из темы незачем. */
  --sidebar-width: var(--mp-sidebar);
  --collapsed-sidebar-width: var(--mp-sidebar-icons);
}

/* ТОТ ЖЕ МОСТ ДЛЯ ТЁМНОЙ ТЕМЫ — И ЭТО НЕ ДУБЛИРОВАНИЕ.
   Увидено живьём: в тёмной теме таблица и поля оставались белыми. Причина —
   каскад, а не цвета: базовая тема объявляет светлые значения на `:root, body`,
   а тёмные на `.dark body`, и её тёмное объявление ВЕСОМЕЕ нашего светлого
   моста. То есть в тёмной теме база подставляла СВОИ синеватые поверхности, а
   наши графитовые до неё не доезжали.
   Значения здесь ровно те же `var(--mp-*)` — они сами переключаются ниже по
   файлу токенов. Повторён только адрес, не значение: менять по-прежнему
   нечего и негде, кроме motorplace-tokens.css. */
.dark, .dark body, body.dark {
  --skin-bg:   var(--mp-bg);
  --surface:   var(--mp-surface);
  --surface-2: var(--mp-surface-2);
  --rail:      var(--mp-rail);

  --ink:   var(--mp-text);
  --body:  var(--mp-text-soft);
  --mute:  var(--mp-text-mute);
  --faint: var(--mp-text-faint);

  --primary:       var(--mp-accent);
  --primary-hover: var(--mp-accent-hover);
  --primary-soft:  var(--mp-accent-tint);
  --on-primary:    var(--mp-on-accent);

  --ok:   var(--mp-st-o-ink); --ok-soft:   var(--mp-st-o-bg); --on-ok:   var(--mp-bg);
  --warn: var(--mp-st-w-ink); --warn-soft: var(--mp-st-w-bg); --on-warn: var(--mp-bg);
  --bad:  var(--mp-st-e-ink); --bad-soft:  var(--mp-st-e-bg); --on-bad:  var(--mp-bg);
  --info: var(--mp-st-i-ink); --info-soft: var(--mp-st-i-bg); --on-info: var(--mp-bg);
  --neutral: var(--mp-st-n-ink); --neutral-soft: var(--mp-st-n-bg);

  --line:        var(--mp-line);
  --line-soft:   var(--mp-line-soft);
  --line-strong: var(--mp-line-strong);
  --shadow:      var(--mp-shadow-pop);
  --shadow-sm:   var(--mp-shadow-top);

  --hover:    var(--mp-surface-2);
  --selected: var(--mp-accent-tint);
  --focus:    var(--mp-text);

  --rail-ink:    var(--mp-rail-ink);
  --rail-mute:   var(--mp-rail-mute);
  --rail-active: var(--mp-rail-active);

  --nav-active-bg:  var(--mp-rail-active);
  --nav-active-ink: var(--mp-rail-ink);
  --nav-active-bar: var(--mp-accent);

  --input-bg:     var(--mp-surface);
  --input-border: var(--mp-line-strong);
}

/* ============================================================================
   2 · ТИПОГРАФИКА · гайдлайн стр. 5
   Шесть пар «размер + начертание», и ни одной больше. Курсива нет.
   ============================================================================ */
body, .fi-body {
  font-family: var(--mp-font-ui);
  font-size: var(--mp-size-body);
  font-weight: var(--mp-weight-body);
  line-height: var(--mp-leading);
  /* Manrope рисует «а», «е» и «о» почти одинаковой ширины; на 14px в плотной
     таблице это читается ровнее с чуть поджатым трекингом. */
  letter-spacing: -0.003em;
}

/* Курсива в системе нет (гайдлайн, стр. 5). Выключаем у источников наклона, а
   не глобально: `font-style: normal` на всём подряд сломал бы иконочные шрифты. */
em, i, cite, address, dfn, var, blockquote { font-style: normal; }

/* Заголовок страницы: 26 / 800 ВЕРХНИМ РЕГИСТРОМ. Регистр делаем
   `text-transform`, а не словами в коде: заголовок приходит из названия
   раздела, и в хлебных крошках, вкладке и поиске он нужен обычным. */
/* `!important` здесь и ниже — не вкусовщина: базовая тема держит СВОЮ
   типографическую шкалу (заголовок 22/700, заголовок колонки 12/600 обычным
   регистром) и держит её с `!important`, потому что иначе её перебивали
   утилиты Filament. Шкала гайдлайна — 26/800 CAPS и 11,5/800 CAPS; чтобы
   встать на место базовой, ей нужна та же сила. Правило одно, адрес у него
   один, и заменить его обратно — удалить эти строки. */
.fi-header-heading {
  font-size: var(--mp-size-page) !important;
  font-weight: var(--mp-weight-page) !important;
  line-height: var(--mp-leading-tight) !important;
  text-transform: uppercase;
  letter-spacing: 0.01em !important;
  color: var(--mp-text) !important;
}
.fi-header-subheading { font-size: var(--mp-size-caption); color: var(--mp-text-mute); }

/* Заголовок карточки: 16 / 800. */
.fi-section-header-heading,
.fi-modal-heading,
.fi-wi-stats-overview-stat-label {
  font-size: var(--mp-size-card);
  font-weight: var(--mp-weight-card);
  line-height: var(--mp-leading-tight);
}
.fi-section-header-description,
.fi-modal-description { font-size: var(--mp-size-caption); color: var(--mp-text-mute); }

/* Заголовок колонки: 11,5 / 800 ВЕРХНИМ РЕГИСТРОМ.
   Три селектора — потому что надпись живёт в трёх разных узлах: в самой ячейке,
   в кнопке сортировки и в обёртке текста. База гасит регистр во всех трёх. */
.fi-ta-header-cell,
.fi-ta-header-cell-label,
.fi-ta-header-cell-sort-btn,
.fi-ta-header-cell .fi-ta-text {
  font-size: var(--mp-size-col) !important;
  font-weight: var(--mp-weight-col) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--mp-text-soft) !important;
}

/* Подпись: 12 / 500 — ярлык поля, вспомогательный текст, подсказка. */
.fi-fo-field-wrp-label,
.fi-in-entry-wrp-label,
.fi-fo-field-wrp-hint,
.fi-fo-field-wrp-helper-text,
.fi-ta-record-description,
.fi-pagination,
.fi-breadcrumbs {
  font-size: var(--mp-size-caption);
  font-weight: var(--mp-weight-caption);
}
/* ЯРЛЫК ПОЛЯ — НАД ПОЛЕМ И ЧИТАЕМЫМ ЦВЕТОМ.
   В действующей системе подпись набрана мелким серым внутри рамки, и пустое
   поле не отличить от заполненного (ТЗ, п. 2). Ярлык — текст, а не фон. */
.fi-fo-field-wrp-label, .fi-in-entry-wrp-label { color: var(--mp-text-soft); }

/* ── МОНОШИРИННОЕ: номера, VIN, артикулы, серийники (гайдлайн стр. 5 и 7).
   Целимся в разметку, которая и значит «код»: <code>, copyable-значение
   таблицы и всё, помеченное атрибутом `data-mp-code` — им пользуются экраны,
   когда колонка несёт номер. ── */
code, kbd, samp, pre,
[data-mp-code],
.mp-code {
  font-family: var(--mp-font-mono);
  font-weight: 500;
  font-size: 0.92em;   /* моношрифт при равном кегле выглядит крупнее Manrope */
  letter-spacing: 0;
}

/* ЧИСЛА В ТАБЛИЦАХ — ВПРАВО И ТАБЛИЧНЫМИ ЦИФРАМИ (гайдлайн стр. 5).
   Табличные цифры — не придирка: без них «142 300» и «14 551» в соседних
   строках не выстраиваются по разрядам, и сравнить суммы глазом нельзя. */
.fi-ta-cell, .fi-ta-header-cell, .fi-in-entry-wrp, .mp-num {
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   3 · ПЛОТНОСТЬ · ТЗ п. 3.6
   База раздаёт `--d-*` сама, здесь — то, до чего она не достаёт: высота строки
   таблицы и её заголовка, высота кнопки и поля, полоса вкладок.
   Отступы страницы и радиус карточки В ОБОИХ РЕЖИМАХ одинаковы (ТЗ, п. 3.6):
   плотность ужимает контролы, а не воздух страницы.
   ============================================================================ */
/* Высоту строки задаёт ЯЧЕЙКА, и только она. Увидено живьём: при `--row-h: 36`
   строка выходила 40 — ячейку с флажком выбора Filament поджимает собственными
   3px сверху и снизу, и она растягивала всю строку. Отсюда `!important` ровно
   на двух свойствах: высота и вертикальные отступы. Остальное базе не мешаем. */
.fi-ta-row > .fi-ta-cell {
  height: var(--mp-row) !important;
  padding-block: 0 !important;
}
/* Шапка таблицы — ВСЕ ячейки строки, а не только озаглавленные. Увидено
   живьём: шапка держалась 39,5 вместо 36, и виновата была ячейка с флажком
   «выбрать всё» — у неё класс обычной ячейки, под правило заголовков она не
   попадала и тянула строку своей межстрочной высотой. Строку держит самая
   высокая ячейка, поэтому называть надо ВСЕ. */
.fi-ta-table > thead > tr > * {
  height: var(--mp-row-head) !important;
  padding-block: 0 !important;
}
/* Межстрочную в ячейке с флажком гасим в ноль: флажок — встроенный блок, и
   большая межстрочная добавляет ему сверху и снизу полупустую строку —
   шапка вырастала с 36 до 42,5. Высоту держит `height`, а не строка текста. */
.fi-ta-table > thead > tr > .fi-ta-cell { line-height: 0 !important; }

/* Строка — ОДНОЙ ЛИНИЕЙ. Двухстрочная строка в 60px — главная претензия к
   действующей системе: оператор сравнивает строки глазами, а видит 14 из 30. */
.fi-ta-row > .fi-ta-cell > .fi-ta-col-wrp { min-height: 0; }
.fi-ta-cell .fi-ta-text-item-label { white-space: nowrap; }

.fi-btn, .fi-ac-btn-action > .fi-btn { min-height: var(--mp-btn); }
.fi-btn.fi-size-lg { min-height: var(--mp-btn-lg); }
.fi-input-wrp, .fi-input, .fi-select-input { min-height: var(--mp-control); }

/* Полоса вкладок — на месте верхней панели 64px (ТЗ, п. 4.2, отступление 1). */
.fi-tabs { min-height: var(--mp-tabs); }
.fi-tabs-item { min-height: calc(var(--mp-tabs) - 8px); }

/* Строка каталога запчастей выше остальных (гайдлайн стр. 6): в ней две строки
   текста — наименование и характеристика. Признак — атрибут на таблице. */
[data-mp-rows='catalog'] .fi-ta-row > .fi-ta-cell { height: var(--mp-row-catalog); }

/* ============================================================================
   4 · СЕТКА И РАСКЛАДКА · гайдлайн стр. 6, эталон 1440 × 900
   ============================================================================ */
.fi-main {
  /* Реестр на полтора десятка колонок в ограниченную ширину не помещается,
     поэтому страница занимает всю; отступы — 24 сверху и 28 по бокам. */
  max-width: none !important;
  padding: var(--mp-pad-top) var(--mp-pad-side) var(--mp-pad-top) !important;
}
.fi-main-ctn { background: var(--mp-bg); }
.fi-page-content { gap: var(--mp-gap-block); }
.fi-section, .fi-wi { border-radius: var(--mp-radius); border-color: var(--mp-line); }

/* ПРАВАЯ ПАНЕЛЬ 340px (гайдлайн стр. 6) — вторая колонка карточки: клиент,
   распределение, сроки, служебное. Утилита, а не компонент: ею пользуются
   авторские экраны, у Filament своей такой раскладки нет.
   «таблица · 1fr + панель · 340px» — ровно схема страницы из гайдлайна. */
.mp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--mp-panel);
  gap: var(--mp-gap-block);
  align-items: start;
}
/* Мелкие секции боковой колонки остаются на экране, пока основная
   прокручивается (ТЗ, п. 5.3), и прокручиваются внутри себя, если сами выше
   экрана. */
.mp-split > .mp-aside {
  position: sticky;
  top: var(--mp-pad-top);
  max-height: calc(100vh - var(--mp-pad-top) * 2);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--mp-gap-card);
}
/* Планшет 1024–1280: боковая колонка уходит ПОД основную (ТЗ, п. 5.9). */
@media (max-width: 1280px) {
  .mp-split { grid-template-columns: minmax(0, 1fr); }
  .mp-split > .mp-aside { position: static; max-height: none; }
}

/* ============================================================================
   5 · АКЦЕНТ — ОДИН НА ЭКРАН · гайдлайн стр. 4 и 8, ТЗ п. 4.3
   ============================================================================ */
/* Почему `!important` и почему именно здесь.
   Базовая тема красит основную кнопку 700-й ступенью палитры, а не 600-й, и
   делает это с `!important` — защита от своего же генератора: у сгенерированной
   из произвольного цвета палитры белая надпись на 600-й ступени давала 4,03:1
   при норме 4,5, и проваливалась ровно главная кнопка экрана.
   У НАС ЭТОЙ БЕДЫ НЕТ: палитра не сгенерирована, 600-я ступень — заказанный
   #B1212E, и белое на нём даёт 6,72:1 — цифру гайдлайн называет сам (стр. 12).
   Так что защита базы здесь не защищает, а подменяет фирменный цвет на темнее
   заказанного. Снимаем её той же силой — другой каскад не берёт.
   Заодно убираем её подсветку-тень: в гайдлайне у кнопок теней нет, карточки и
   кнопки отделены линией. */
.fi-btn.fi-color-primary {
  background: var(--mp-accent) !important;
  color: var(--mp-on-accent) !important;
  box-shadow: none !important;
  font-weight: 700;
  transform: none !important;
}
.fi-btn.fi-color-primary:hover { background: var(--mp-accent-hover) !important; }

/* Вторая и дальше кнопка в шапке страницы — спокойная.
   Рядом с «Новое обращение» встают «Выгрузить» и «Все фильтры», и красных
   кнопок становится три: глазу не за что зацепиться, а гайдлайн требует одну
   основную на экран. Красной остаётся ПЕРВАЯ.
   Кнопка бывает и ПРЯМЫМ потомком полосы действий, и завёрнутой в обёртку —
   названы оба случая. Увидено живьём: при одном только вложенном варианте в
   шапке реестра стояли ТРИ красные кнопки подряд («Создать», «Выгрузить Excel»,
   «Выгрузить CSV»), и главное действие ничем не выделялось. */
.fi-header-actions-ctn .fi-ac > .fi-btn.fi-color-primary:not(:first-child),
.fi-header-actions-ctn .fi-ac > *:not(:first-child) > .fi-btn.fi-color-primary {
  background: var(--mp-surface) !important;
  color: var(--mp-text) !important;
  box-shadow: inset 0 0 0 1px var(--mp-line-strong) !important;
}
.fi-header-actions-ctn .fi-ac > .fi-btn.fi-color-primary:not(:first-child):hover,
.fi-header-actions-ctn .fi-ac > *:not(:first-child) > .fi-btn.fi-color-primary:hover {
  background: var(--mp-surface-2) !important;
}
.fi-header-actions-ctn .fi-ac > .fi-btn.fi-color-primary:not(:first-child) .fi-icon,
.fi-header-actions-ctn .fi-ac > *:not(:first-child) > .fi-btn.fi-color-primary .fi-icon {
  color: var(--mp-text-soft) !important;
}

/* «Применить фильтры» и «Применить столбцы» — не главное действие экрана, а
   подтверждение настройки. Красными они дают на одном экране три-четыре
   акцента разом. Главное действие остаётся одно — то, что в шапке страницы. */
.fi-ta-filters-actions-ctn .fi-btn.fi-color-primary,
.fi-ta-col-manager-actions-ctn .fi-btn.fi-color-primary {
  background: var(--mp-surface) !important;
  color: var(--mp-text) !important;
  box-shadow: inset 0 0 0 1px var(--mp-line-strong) !important;
}
.fi-ta-filters-actions-ctn .fi-btn.fi-color-primary:hover,
.fi-ta-col-manager-actions-ctn .fi-btn.fi-color-primary:hover {
  background: var(--mp-surface-2) !important;
}

/* Активный пункт меню — второе и последнее место акцента (гайдлайн стр. 3).
   Своего правила здесь нет: база уже рисует подложку, полосу и цвет подписи,
   и делает это тремя токенами (`--nav-active-*`), которым мы выше дали свои
   значения. Второе правило о том же означало бы два хозяина у одной мысли. */

/* ССЫЛКА — НЕ АКЦЕНТ.
   Filament красит ссылки и копируемые значения цветом бренда. Бренд здесь
   красный, и телефон в журнале звонков читался как ошибка, а номер лида — как
   просрочка. Красное в этой системе значит ровно одно: главное действие.
   Ссылка берёт цвет статуса «в работе» — единственный синий в палитре. */
.fi-link.fi-color-primary,
.fi-ta-text-item.fi-color-primary,
.fi-in-text-item.fi-color-primary { color: var(--mp-st-i-ink); }

/* Показатели: один красный, остальные нейтральные (гайдлайн стр. 3 и 8).
   Поэтому акцент у значения виджета появляется только по явной метке. */
.bf-w-kpi .bf-w-value { color: var(--mp-text); }
.bf-w-kpi[data-mp-accent] .bf-w-value { color: var(--mp-accent); }

/* ============================================================================
   6 · ТАБЛИЦА · гайдлайн стр. 6–8, ТЗ п. 5.1
   ============================================================================ */
.fi-ta-header-cell {
  position: sticky;   /* шапка закреплена: реестр открывается на 40 000 строках */
  top: 0;
  z-index: 2;
  background: var(--mp-surface-2);
  white-space: nowrap;
}
/* ПЕРВАЯ КОЛОНКА ЗАКРЕПЛЕНА (ТЗ п. 5.1). Реестр на десяток колонок в 1134
   точки не помещается, и при прокрутке вбок номер уезжал — человек видел
   сроки и статус, но не знал, чьи. Закреплены флажок выбора и первая колонка
   после него; у таблицы без выбора — просто первая.
   Подложка обязательна: без неё уезжающие ячейки просвечивают сквозь номер. */
.fi-ta-table tr > .fi-ta-selection-cell,
.fi-ta-table tr > .fi-ta-selection-cell + *,
.fi-ta-table tr > :first-child:not(.fi-ta-selection-cell) {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--mp-surface);
}
.fi-ta-table tr > .fi-ta-selection-cell + * {
  left: var(--mp-ta-select-w);
  box-shadow: inset -1px 0 0 var(--mp-line);
}
.fi-ta-table tr > :first-child:not(.fi-ta-selection-cell) { box-shadow: inset -1px 0 0 var(--mp-line); }
.fi-ta-table thead tr > .fi-ta-selection-cell,
.fi-ta-table thead tr > .fi-ta-selection-cell + *,
.fi-ta-table thead tr > :first-child:not(.fi-ta-selection-cell) {
  z-index: 3;
  background: var(--mp-surface-2);
}
/* Кнопка в строке — вторичная, как «Выгрузить» в шапке: у `gray` своего
   класса цвета нет (ловушка 2), и без рамки кнопка читалась погашенной. */
.fi-ta-row .fi-ac-btn-action.fi-btn:not(.fi-color) {
  background: var(--mp-surface) !important;
  color: var(--mp-text) !important;
  box-shadow: inset 0 0 0 1px var(--mp-line-strong) !important;
}
.fi-ta-row .fi-ac-btn-action.fi-btn:not(.fi-color):hover { background: var(--mp-surface-2) !important; }
.fi-ta-row:hover > .fi-ta-cell { background: var(--mp-surface-2); }
/* Выбранная строка — розовый оттенок акцента из гайдлайна. */
.fi-ta-row:has(.fi-checkbox-input:checked) > .fi-ta-cell,
.fi-ta-row[aria-selected='true'] > .fi-ta-cell { background: var(--mp-accent-tint); }

/* ЧИСЛО — ВПРАВО (гайдлайн стр. 5). Выравнивание ставит колонка, здесь только
   разряды и моноширинность не трогаем: число набрано Manrope с табличными
   цифрами, как в гайдлайне, а моно оставлено кодам. */
.fi-ta-cell.fi-align-end .fi-ta-text-item-label { font-variant-numeric: tabular-nums; }

/* ДАТА, ТРЕБУЮЩАЯ ДЕЙСТВИЯ, ПОДСВЕЧЕНА СТАТУСОМ; прошедшее событие — обычный
   текст (гайдлайн стр. 7). Признак — атрибут на значении, а не догадка темы. */
[data-mp-due] { font-weight: 700; }
[data-mp-due='soon'] { color: var(--mp-st-w-ink); }
[data-mp-due='late'] { color: var(--mp-st-e-ink); }

/* ============================================================================
   7 · ПЯТЬ СТАТУСОВ · гайдлайн стр. 9 + ТЗ п. 4.3 («ещё и формой»)
   Пять видов Filament уже есть; мы только подставляем цвета гайдлайна.
   ФОРМА ТОЧКИ добавлена сверх гайдлайна: цвет один различают не все, и в
   чёрно-белой печати он пропадает вовсе — а печатают эти реестры каждый день.
   Текст при этом остаётся обязательным: точка усиливает, а не заменяет.
   ============================================================================ */
.fi-badge {
  border-radius: var(--mp-radius-pill);
  font-size: var(--mp-size-caption);
  font-weight: 700;
  gap: 5px;
}
/* `!important` здесь не прихоть: подложку метки база объявляет своим набором
   и с тем же весом, и без него пять статусов выходили ОДНОЙ прозрачной
   плашкой — цвет оставался только у текста. Увидено живьём 14.10.2026, когда
   цвет статуса стал приезжать из справочника. */
.fi-badge.fi-color-gray    { background: var(--mp-st-n-bg) !important; color: var(--mp-st-n-ink) !important; }
.fi-badge.fi-color-info    { background: var(--mp-st-i-bg) !important; color: var(--mp-st-i-ink) !important; }
.fi-badge.fi-color-warning { background: var(--mp-st-w-bg) !important; color: var(--mp-st-w-ink) !important; }
.fi-badge.fi-color-success { background: var(--mp-st-o-bg) !important; color: var(--mp-st-o-ink) !important; }
.fi-badge.fi-color-danger  { background: var(--mp-st-e-bg) !important; color: var(--mp-st-e-ink) !important; }

/* НЕЙТРАЛЬНАЯ МЕТКА КЛАССА ЦВЕТА НЕ ПОЛУЧАЕТ ВОВСЕ: `gray` для Filament —
   это отсутствие цвета, а не цвет, и правило выше до неё не доезжает. Без
   этой строки «Закрыт» выходил голым словом среди плашек. */
.fi-badge:not(.fi-color) { background: var(--mp-st-n-bg) !important; color: var(--mp-st-n-ink) !important; }

/* ШЕСТОГО ВИДА НЕТ. Увидено живьём: часть меток в реестре приезжала с видом
   «primary» и красилась акцентом — красная метка статуса посреди таблицы, ровно
   то, что гайдлайн запрещает прямым текстом (стр. 4: акцент — не ошибка, и не
   статус). Видов пять, и «primary» укладывается в «в работе»: так Filament
   помечает действующее, текущее, открытое.
   ВОПРОС ЗАКАЗЧИКУ: если какие-то из этих меток по смыслу «нейтральные», их
   надо развести по видам в самих разделах — тема различить их не может. */
.fi-badge.fi-color-primary {
  background: var(--mp-st-i-bg) !important;
  color: var(--mp-st-i-ink) !important;
}
.fi-badge.fi-color-primary::before { border-radius: 50% 50% 50% 0; }

/* ТОЧКА В МЕТКЕ БЕРЁТ ЦВЕТ САМОЙ МЕТКИ, И ТОЛЬКО ЕЁ.
   Увидено живьём: у метки «Передан дилеру» (синяя, «в работе») точка была
   КРАСНОЙ — базовая тема красит точку в реестре отдельным набором цветов, не
   зная про пять видов гайдлайна. Красная точка у синей метки означает, что
   форма и цвет говорят разное, а статус в этой системе читается с первого
   взгляда или не читается вовсе. Адрес правила тот же, что у базы, иначе её
   не перебить. */
.fi-ta-cell .fi-badge::before,
.fi-in-entry-wrp .fi-badge::before {
  background: currentColor !important;
  width: 7px !important;
  height: 7px !important;
}
.fi-ta-cell .fi-badge.fi-color-gray::before    { border-radius: 50% !important; }
.fi-ta-cell .fi-badge.fi-color-warning::before { border-radius: 1px !important; }
.fi-ta-cell .fi-badge.fi-color-danger::before  { border-radius: 0 !important; transform: rotate(45deg); }
.fi-ta-cell .fi-badge.fi-color-success::before { background: transparent !important; box-shadow: inset 0 0 0 2px currentColor; border-radius: 50% !important; }
.fi-ta-cell .fi-badge.fi-color-info::before,
.fi-ta-cell .fi-badge.fi-color-primary::before { border-radius: 50% 50% 50% 0 !important; }

.fi-badge::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  background: currentColor;
  border-radius: 50%;
}
/* Формы разные: круг — нейтральный, квадрат — внимание, ромб — ошибка,
   кольцо — готово, полукруг — в работе. Различимы без цвета. */
.fi-badge.fi-color-warning::before { border-radius: 1px; }
.fi-badge.fi-color-danger::before  { border-radius: 0; transform: rotate(45deg); }
.fi-badge.fi-color-success::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.fi-badge.fi-color-info::before    { border-radius: 50% 50% 50% 0; }

/* ПОЛОСА ШАГОВ согласования (гайдлайн стр. 9): пройден ✓, текущий ●, ожидает ○.
   Серый шаг цветом не подсвечивается — только значком и текстом. */
.mp-steps { display: flex; gap: var(--mp-gap-block); list-style: none; margin: 0; padding: 0; }
.mp-steps > li { display: flex; gap: 8px; align-items: flex-start; color: var(--mp-text-mute); }
.mp-steps > li::before { content: '○'; line-height: 1; font-size: 14px; }
.mp-steps > li[data-mp-step='done'] { color: var(--mp-text-soft); }
.mp-steps > li[data-mp-step='done']::before { content: '✓'; color: var(--mp-st-o-ink); }
.mp-steps > li[data-mp-step='now'] { color: var(--mp-text); font-weight: 700; }
.mp-steps > li[data-mp-step='now']::before { content: '●'; color: var(--mp-st-i-ink); }

/* ============================================================================
   8 · МЕТКИ БРЕНДОВ · гайдлайн стр. 4 и 8
   Бренд — МЕТКА, а не заливка экрана. Логотипы производителей техники не
   используются (ТЗ, п. 4.3 и 8): только текст HND / HONDA / QRX. Honda-красный
   живёт ровно в одной метке и акцентом интерфейса не становится — иначе два
   красных на экране перестают различать бренды.
   ============================================================================ */
.mp-bt {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--mp-radius-sm);
  font-size: var(--mp-size-col);
  font-weight: var(--mp-weight-col);
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mp-white);
  white-space: nowrap;
}
.mp-bt[data-mp-brand='hnd']   { background: var(--mp-hnd-red); }
.mp-bt[data-mp-brand='honda'] { background: var(--mp-honda-red); }
.mp-bt[data-mp-brand='qrx']   { background: var(--mp-qrx); }

/* ============================================================================
   9 · ПОЛЯ, ЧИПЫ, ФОКУС · гайдлайн стр. 8 и 12
   ============================================================================ */
/* Поле — БЕЛОЕ С ВИДИМОЙ РАМКОЙ (гайдлайн, стр. 8), а не серая заливка без
   границы. Базовая тема сама называет это осью характера и ждёт ровно двух
   значений — рамку мы ей и даём, своего правила не пишем: собственное правило
   рядом с её рамкой дало бы ДВЕ линии вокруг поля. */
:root, body {
  --input-bg:     var(--mp-surface);
  --input-border: var(--mp-line-strong);
}
.fi-input-wrp { border-radius: var(--mp-radius-sm); }
.fi-input::placeholder { color: var(--mp-text-faint); }

/* Рамка поля в фокусе — графитовая (см. `--focus` выше). База красит её
   `--primary` напрямую, мимо своего же токена фокуса, — поправляем здесь. */
.fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 var(--input-ring-w, 3px) color-mix(in srgb, var(--focus) 16%, transparent) !important;
}

/* ФОКУС С КЛАВИАТУРЫ ВИДЕН НА ВСЕХ ЭЛЕМЕНТАХ (гайдлайн стр. 12). Форму
   обращения заполняют на звонке, не отрывая рук от клавиатуры, — потерянный
   фокус означает «начать сначала». */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--mp-text);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ОШИБКА ВВОДА — ЦВЕТОМ СТАТУСА «ОШИБКА», НЕ АКЦЕНТОМ (гайдлайн стр. 4).
   Текст появляется после ухода с поля (стр. 11) — это уже поведение формы.
   Саму рамку ошибочного поля красит база — она берёт `--bad`, а `--bad` выше
   уже равен статусу «ошибка» гайдлайна. Своего правила не пишем. */
.fi-fo-field-wrp-error-message { color: var(--mp-st-e-ink); font-size: var(--mp-size-caption); }

/* Чип примененного отбора, 32px, с крестиком (гайдлайн стр. 8; ТЗ п. 5.1). */
.fi-ta-filter-indicator, .mp-chip {
  min-height: var(--mp-chip);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: var(--mp-radius-pill);
  background: var(--mp-surface-2);
  box-shadow: inset 0 0 0 1px var(--mp-line);
  color: var(--mp-text-soft);
  font-size: var(--mp-size-caption);
  font-weight: 600;
}

/* ============================================================================
   10 · «НЕ УКАЗАНО» И «НЕ ЗАМЕРЕНО» · ТЗ п. 4.3
   Пустое поле говорит словом, а не прочерком: в действующей системе «Не
   указано» набрано тем же серым, что значение, и заполненное поле не отличить
   от пустого. Бледнее — заметно бледнее, но читаемо.
   «Не замерено» ≠ ноль: пустая шкала читается как «всё в порядке», поэтому у
   незамеренного значения рамка пунктиром и слово вместо числа.
   ============================================================================ */
.mp-empty {
  color: var(--mp-text-faint);
  font-weight: var(--mp-weight-body);
}
.mp-unmeasured {
  display: inline-block;
  padding: 0 6px;
  border: 1px dashed var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
  color: var(--mp-text-mute);
  font-size: var(--mp-size-caption);
}

/* ОКНО РАСЧЁТА У БЛОКА ЧИСЕЛ (ТЗ, п. 4.3): «за сегодня, на 14:32» —
   как «обновлено 09.10, 12:40» в гайдлайне. Число без окна — число ниоткуда. */
.mp-asof { color: var(--mp-text-mute); font-size: var(--mp-size-caption); }

/* ============================================================================
   11 · БОКОВОЕ МЕНЮ · гайдлайн стр. 3 и 4
   Тёмная поверхность и в светлой теме: меню — рама, страница — лист.
   ============================================================================ */
.fi-sidebar, .fi-sidebar-nav { background: var(--mp-rail); color: var(--mp-rail-ink); }
.fi-sidebar-header { background: var(--mp-rail); border-color: transparent; }
.fi-sidebar-item-label { color: var(--mp-rail-ink); font-size: var(--mp-size-body); }
.fi-sidebar-item-icon { color: var(--mp-rail-mute); }
.fi-sidebar-item-btn:hover { background: var(--mp-rail-active); }
/* Заголовок группы «РАБОТА» / «РЕСУРСЫ» / «УПРАВЛЕНИЕ» — заголовок колонки. */
.fi-sidebar .fi-sidebar-group-label,
.fi-sidebar-group-label {
  color: var(--mp-rail-mute) !important;
  font-size: var(--mp-size-col) !important;
  font-weight: var(--mp-weight-col) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
/* Счётчик у пункта — число ДЕЙСТВИЙ, а не записей (гайдлайн стр. 3). */
.fi-sidebar-item-badge {
  background: var(--mp-accent);
  color: var(--mp-on-accent);
  font-size: var(--mp-size-col);
  font-weight: var(--mp-weight-col);
}
/* Название системы в шапке меню. */
.fi-logo { color: var(--mp-rail-ink); font-weight: 800; font-size: var(--mp-size-card); }

/* ============================================================================
   8 · КАРТОЧКА: БОКОВАЯ КОЛОНКА ЗАКРЕПЛЕНА · ТЗ п. 5.3
   Высота, из-под которой колонка не должна выезжать, известна здесь: полоса
   вкладок 44 (40 в компактной) плюс отступ страницы. Поэтому закрепление
   живёт в облике, а не в описании карточки.
   ============================================================================ */
.mp-aside {
  position: sticky;
  top: calc(44px + var(--mp-gap, 18px));
  align-self: start;
  /* Своя прокрутка, если справка выше экрана: иначе нижние секции
     («Служебное») становятся недостижимы вовсе. */
  max-height: calc(100vh - 44px - 2 * var(--mp-gap, 18px));
  overflow-y: auto;
}

[data-mp-density='compact'] .mp-aside {
  top: calc(40px + var(--mp-gap, 18px));
  max-height: calc(100vh - 40px - 2 * var(--mp-gap, 18px));
}

.mp-mono { font-family: var(--mp-font-mono, ui-monospace, monospace); }

/* ============================================================================
   9 · ПАНЕЛЬ ДЕЙСТВИЙ ФОРМЫ ЗАКРЕПЛЕНА · ТЗ п. 5.4
   Форма обращения длиннее экрана, и «Сохранить» уезжало под сгиб: оператор
   докручивал до низа, чтобы записать разговор, который уже закончился.
   ============================================================================ */
.fi-fo-actions,
.fi-form-actions,
main .fi-sc-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  position: sticky;
  bottom: 0;
  z-index: 20;
  gap: 10px;
  margin-inline: calc(-1 * var(--mp-gap, 18px));
  padding: 10px var(--mp-gap, 18px);
  background: var(--mp-surface, #fff);
  border-top: 1px solid var(--mp-line, #d3d8de);
}

/* Отметка о черновике — рядом с кнопками, справа: её пишет полоса вкладок
   (`/shell/tabs.js`), и она отвечает на вопрос «если я сейчас уйду». */
.mp-draft-note {
  margin-inline-start: auto;
  align-self: center;
  color: var(--mp-ink-3, #5c6571);
  font: 500 12.5px/1 var(--mp-font, system-ui, sans-serif);
}

/* Изменённое, но ещё не записанное поле (ТЗ п. 5.5): черта слева, не заливка —
   заливкой в этой системе говорят об ошибке. */
.mp-field-changed {
  position: relative;
}

.mp-field-changed::before {
  content: '';
  position: absolute;
  inset-block: 2px;
  inset-inline-start: -10px;
  width: 2px;
  border-radius: 2px;
  background: var(--mp-accent, #B1212E);
}

/* ============================================================================
   10 · ПОЛОСА ЭТАПОВ ЛИДА · ТЗ п. 5.6
   Пройденные, текущий, предстоящие. Текущий — единственный, кто несёт срок:
   у пройденных он уже ничего не решает, у предстоящих ещё не назначен.
   ============================================================================ */
.mp-stages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 10px 14px;
  list-style: none;
  border: 1px solid var(--mp-line, #d3d8de);
  border-radius: var(--mp-radius, 12px);
  background: var(--mp-surface, #fff);
}

.mp-stage {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-inline-end: 18px;
  position: relative;
  color: var(--mp-ink-3, #5c6571);
  font: 600 13px/1 var(--mp-font, system-ui, sans-serif);
}

/* Черта между этапами — порядок читается как путь, а не как набор меток. */
.mp-stage:not(:last-child)::after {
  content: '';
  width: 26px;
  height: 1px;
  margin-inline-start: 4px;
  background: var(--mp-line, #d3d8de);
}

.mp-stage__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mp-line-control, #848d99);
}

.mp-stage--done { color: var(--mp-ink-2, #47505b); }
.mp-stage--done .mp-stage__dot { background: var(--mp-st-o-ink, #1E7B45); }

.mp-stage--now { color: var(--mp-ink, #161b21); font-weight: 800; }
.mp-stage--now .mp-stage__dot {
  background: var(--mp-accent, #B1212E);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-accent, #B1212E) 20%, transparent);
}

.mp-stage--next { opacity: 0.65; }

.mp-stage__due {
  margin-inline-start: 2px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--mp-st-i-bg, #E8F0FC);
  color: var(--mp-st-i-ink, #1F5FBF);
  font: 700 11.5px/1.5 var(--mp-font, system-ui, sans-serif);
}

.mp-stage__due.is-late {
  background: var(--mp-st-e-bg, #FBE9E7);
  color: var(--mp-st-e-ink, #B3261E);
}

/* ---------------------------------------------------------------- Справочники
   Перечень слева, значения справа; перечень прокручивается сам, таблица — сама. */
.mp-dir { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--mp-gap-block); align-items: start; }
.mp-dir__list {
  position: sticky; top: var(--mp-pad-top); max-height: calc(100vh - 140px); overflow-y: auto;
  background: var(--mp-surface); border: 1px solid var(--mp-line); border-radius: var(--mp-radius);
  padding: 8px;
}
.mp-dir__find {
  width: 100%; height: var(--mp-control); padding: 0 10px; margin-bottom: 6px;
  border: 1px solid var(--mp-line); border-radius: var(--mp-radius-sm); background: var(--mp-surface);
  font: inherit; font-size: var(--mp-size-body); color: var(--mp-text);
}
.mp-dir__block {
  padding: 12px 8px 4px; font-size: var(--mp-size-caption); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--mp-text-mute);
}
.mp-dir__item {
  display: block; width: 100%; text-align: left; padding: 6px 8px; border-radius: var(--mp-radius-sm);
  font-size: var(--mp-size-body); color: var(--mp-text-soft); background: none; border: 0; cursor: pointer;
}
.mp-dir__item:hover { background: var(--mp-surface-2); color: var(--mp-text); }
.mp-dir__item.is-active { background: var(--mp-accent-tint); color: var(--mp-text); font-weight: 600; }
@media (max-width: 1023px) {
  .mp-dir { grid-template-columns: minmax(0, 1fr); }
  .mp-dir__list { position: static; max-height: 260px; }
}

/* ---------------------------------------------------------------- Матрица прав роли */
.mp-grants { overflow-x: auto; }
.mp-grants table { width: 100%; border-collapse: collapse; font-size: var(--mp-size-body); }
.mp-grants th, .mp-grants td { padding: 4px 6px; border-bottom: 1px solid var(--mp-line-soft); text-align: left; }
.mp-grants thead th {
  font-size: var(--mp-size-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--mp-text-mute); white-space: nowrap;
}
.mp-grants tbody th[scope='row'] { font-weight: 500; color: var(--mp-text); white-space: nowrap; }
.mp-grants__group th { padding-top: 14px; font-weight: 700; color: var(--mp-text-soft); border-bottom-color: var(--mp-line); }
.mp-grants select {
  height: 30px; width: 100%; min-width: 104px; padding: 0 4px; font: inherit; font-size: var(--mp-size-caption);
  border: 1px solid var(--mp-line); border-radius: var(--mp-radius-sm); background: var(--mp-surface); color: var(--mp-text);
}
.mp-grants select.is-off { color: var(--mp-text-faint); background: var(--mp-surface-2); }
.mp-grants select:disabled { opacity: 1; cursor: default; }
.mp-grants__fill select { min-width: 72px; border-style: dashed; }
.mp-grants tbody th[scope='row'] { width: 1%; }