/* utilities-fill.css — заплатка на утилиты, которые шаблоны используют,
   а собранный tailwind.css не содержит (сборка, не JIT).
   Список измерен 11.08.2026, см. docs/ui-audit.md, дефект №2.
   Это НЕ дизайн-система: файл существует, чтобы вёрстка в шаблонах
   означала то, что в ней написано. По мере переписывания шаблонов — сокращать.
   Тёмная тема в проекте включается классом .dark на <html>, поэтому
   dark-варианты пишутся селектором :is(.dark *) — как в tailwind.css. */

/* ── разделители строк таблиц и списков ────────────────────────────── */
.divide-y > :not([hidden]) ~ :not([hidden]) {
  border-top-width: 1px;
  border-bottom-width: 0;
  border-top-style: solid;
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border-color-subtle);
}
.dark\:divide-gray-700:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border-color-strong);
}

/* ── поверхности с прозрачностью (модификатор /50 не собран) ────────── */
.bg-gray-900\/50 {
  background-color: color-mix(in srgb, var(--surface-inverse) 50%, transparent);
}
.dark\:bg-gray-900\/50:is(.dark *) {
  background-color: color-mix(in srgb, var(--surface-inverse) 50%, transparent);
}
.bg-gray-800\/50 {
  background-color: color-mix(in srgb, var(--surface-inverse) 50%, transparent);
}
.dark\:bg-gray-800\/50:is(.dark *) {
  background-color: color-mix(in srgb, var(--surface-inverse) 50%, transparent);
}
.dark\:hover\:bg-gray-800\/50:is(.dark *):hover {
  background-color: color-mix(in srgb, var(--surface-inverse) 50%, transparent);
}
.dark\:bg-amber-900:is(.dark *) {
  background-color: var(--warning-900);
}

/* ── размеры и выравнивание ─────────────────────────────────────────── */
.min-w-full {
  min-width: 100%;
}
.align-middle {
  vertical-align: middle;
}
.flex-row {
  flex-direction: row;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.shrink-0 {
  flex-shrink: 0;
}

/* ── отступы и гэпы, которых нет в сборке ───────────────────────────── */
.pl-2 {
  padding-left: 0.5rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pr-6 {
  padding-right: 1.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-5 {
  gap: 1.25rem;
}

/* ── единая ширина контейнера ───────────────────────────────────────── */
/* Решение Tim, 11.08.2026: 1280 px везде. Было два семейства — .container
   из Tailwind (до 1536) и .page-container страниц объектов/контрагентов
   (1280). Строки таблиц на широком мониторе растягивались и хуже
   прослеживались. Тут переопределён только верхний брейкпойнт: до 1280
   Tailwind и так даёт нужное значение. */
@media (min-width: 1536px) {
  .container {
    max-width: 1280px;
  }
}

/* ── сетки на широких экранах (собраны только sm:/md:grid-cols-2) ───── */
@media (min-width: 768px) {
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── фокус полей, набранных утилитами ──────────────────────────────────
   Сплошная сверка 23.08.2026: в шаблонах 152 разных цветовых утилиты,
   1598 вхождений. Из них 100 вхождений задают фокус СИНИМ литералом
   (`focus:border-blue-500` ×48, `focus:ring-blue-500` ×52) — это поля,
   свёрстанные утилитами мимо дизайн-системы, и они спорили с общим
   правилом кольца фокуса (docs/UI-POLISH.md), которое 23.08 приведено к
   непрозрачному outline на всех остальных полях.
   Ещё 88 вхождений (`focus:*-brand-500`) ведут на `--primary-500`, а это
   СЕРАЯ шкала — «фирменное» имя снова отдаёт серым.
   Правим не 188 мест в разметке, а сами утилиты: они и так живут в этом
   файле-заплатке. Значение одно и то же для всех — токен фокуса.
   Флага `!important` не нужно: правила в tailwind.css объявлены без него,
   а этот файл подключается следом (base.html:125 → 127). */
.focus\:border-blue-500:focus,
.focus\:border-brand-500:focus,
.focus\:border-orange-500:focus,
.focus\:border-amber-500:focus {
  border-color: var(--input-border-hover);
}

.focus\:ring-blue-500:focus,
.focus\:ring-brand-500:focus,
.focus\:ring-orange-500:focus,
.focus\:ring-amber-500:focus,
.focus\:ring-indigo-500:focus {
  --tw-ring-color: var(--focus-ring-color);
}

/* ── статусные тона: один набор вместо четырёх похожих ────────────────
   Сверка 23.08.2026: 74 цветовые утилиты красят литералом (474 вхождения).
   Большая их часть — статусные плашки на страницах админки, свёрстанные
   утилитами: `bg-green-100 text-green-800`, `bg-red-100 text-red-700`,
   `bg-amber-100 text-amber-800`, `bg-blue-100 text-blue-700` и их
   `dark:`-пары. Каждая пара сама по себе читается и проходит норму —
   но это ЧЕТЫРЕ слегка разных зелёных, красных, янтарных и синих рядом
   с уже измеренными парными токенами `--status-*`. Ровно то, что Tim
   назвал «пёстро»: один и тот же смысл окрашен по-разному в зависимости
   от того, кто верстал страницу.
   Ведём их на токены. Токены сами меняются по теме, поэтому `dark:`-пары
   ведём на те же имена: в тёмной теме побеждает `dark:`-правило, значение
   получается одно и то же — и светлая, и тёмная остаются согласованными.
   Замер после правки — в отчёте `docs/redesign/101-palette-23-08.md`. */

/* успех */
.text-green-600,
.text-green-700,
.text-green-800,
.dark\:text-green-200:is(.dark *),
.dark\:text-green-300:is(.dark *),
.dark\:text-green-400:is(.dark *) {
  color: var(--status-success-text);
}
.bg-green-50,
.bg-green-100,
.dark\:bg-green-900:is(.dark *) {
  background-color: var(--status-success-bg);
}

/* ошибка */
.text-red-500,
.text-red-600,
.text-red-700,
.dark\:text-red-300:is(.dark *),
.dark\:text-red-400:is(.dark *) {
  color: var(--status-error-text);
}
.bg-red-50,
.bg-red-100,
.dark\:bg-red-900:is(.dark *) {
  background-color: var(--status-error-bg);
}
.border-red-200,
.border-red-500 {
  border-color: var(--danger-500);
}

/* предупреждение — янтарный, жёлтый и оранжевый сходятся в один тон */
.text-amber-600,
.text-amber-700,
.text-amber-800,
.text-amber-900,
.text-yellow-500,
.text-yellow-600,
.text-yellow-800,
.text-orange-500,
.text-orange-600,
.text-orange-700,
.dark\:text-amber-200:is(.dark *),
.dark\:text-amber-300:is(.dark *),
.dark\:text-yellow-200:is(.dark *),
.dark\:text-orange-300:is(.dark *) {
  color: var(--status-warning-text);
}
.bg-amber-50,
.bg-amber-100,
.bg-yellow-100,
.bg-orange-100,
.dark\:bg-yellow-900:is(.dark *) {
  background-color: var(--status-warning-bg);
}
.border-amber-300 {
  border-color: var(--warning-500);
}

/* информация */
.text-blue-500,
.text-blue-600,
.text-blue-700,
.text-blue-800,
.text-indigo-600,
.dark\:text-blue-200:is(.dark *),
.dark\:text-blue-300:is(.dark *),
.dark\:text-blue-400:is(.dark *) {
  color: var(--status-info-text);
}
.bg-blue-50,
.bg-blue-100,
.dark\:bg-blue-900:is(.dark *) {
  background-color: var(--info-bg);
}
.border-blue-500 {
  border-color: var(--status-info-text);
}

/* ── добор мёртвых цветовых утилит ─────────────────────────────────────
   Пересчёт 23.08.2026 с учётом составных префиксов (`dark:hover:`,
   модификаторы прозрачности `/30`): в шаблонах мертвы РОВНО девять
   классов, 29 вхождений — прежняя цифра «34 класса» была ошибкой разбора,
   она резала `dark:hover:bg-gray-800` на несуществующий
   `hover:bg-gray-800`. Все девять осмысленные, поэтому не удаляем из
   разметки, а доводим до палитры.

   `bg-gray-50/50` — приглушённая подложка секции; соседние правила этого
   файла (`bg-gray-800/50`, `bg-gray-900/50`) уже написаны через
   color-mix, здесь тот же приём.
   Остальные восемь — левая полоса и рамка у флеш-сообщений и карточек
   состояния (`border-l-4 border-green-500`, `dark:border-red-700` и
   прочие): без объявления цвет границы падал на currentColor и совпадал
   с текстом. Светлые варианты берут насыщенную ступень шкалы, тёмные —
   парный светлый статусный тон, иначе граница тонет в тёмном фоне. */
.bg-gray-50\/50 {
  background-color: color-mix(
    in srgb,
    var(--surface-secondary) 50%,
    transparent
  );
}

.border-green-500 {
  border-color: var(--success-500);
}
.border-amber-500 {
  border-color: var(--warning-500);
}

.dark\:border-green-700:is(.dark *) {
  border-color: var(--status-success-text);
}
.dark\:border-red-700:is(.dark *) {
  border-color: var(--status-error-text);
}
.dark\:border-amber-600:is(.dark *) {
  border-color: var(--status-warning-text);
}
.dark\:border-blue-700:is(.dark *) {
  border-color: var(--status-info-text);
}

.dark\:bg-yellow-900\/30:is(.dark *),
.dark\:bg-amber-900\/20:is(.dark *) {
  background-color: var(--status-warning-bg);
}