/* OK4U admin body polish (Тир 4) — слой поверх django-unfold.
   Бренд берётся из unfold-переменных --color-primary-* → games фиолетовый / CRM бирюзовый автоматически.
   Только additive-правила: ничего не ломает разметку unfold, максимум визуальный fallback. */

/* ===== Changelist: колонки по ширине контента + горизонтальный скролл вместо «сдавливания» =====
   У unfold обёртка таблицы уже overflow-x-auto, но table.w-full растягивает колонки в ширину вьюпорта.
   width:auto заставляет колонки сжаться по контенту, min-width:100% не даёт схлопнуться на узких таблицах. */
@media (min-width: 1024px) {
  table#result_list { width: auto; min-width: 100%; }
}
/* кап на колонку, чтобы одна длинная (текст сообщения и т.п.) не раздувала строку безгранично */
table#result_list td { max-width: 32rem; }

/* ===== Changeform: fieldset'ы → отдельные карточки с явным разделением ===== */
form fieldset.module {
  margin-bottom: 1.25rem;
  border: 1px solid var(--color-base-200, rgba(128, 128, 128, 0.22));
  border-radius: 0.625rem;
  overflow: hidden;
}
.dark form fieldset.module {
  border-color: var(--color-base-800, rgba(255, 255, 255, 0.10));
}

/* Заголовок секции: бренд-акцент слева */
form fieldset.module > h2 {
  border-left: 3px solid var(--color-primary-500, #14b8a6);
}

/* Иконка, которую вставляет ok4u-admin.js в заголовки секций */
.ok4u-h-icon {
  font-size: 18px;
  line-height: 1;
  margin-right: 0.4rem;
  vertical-align: middle;
  color: var(--color-primary-500, #14b8a6);
}

/* ===== Object-tools в шапке (история / смотреть на сайте / кастомные) — разнести =====
   Django рендерит их как <li> подряд, у unfold между ними нет отступа → ссылки слипаются
   («Добавить другаИсторияСмотреть на сайте»). gap на flex-контейнере разносит. */
ul:has(> li > a.historylink),
ul:has(> li > a.viewsitelink) { gap: 1rem; }

/* ===== Иконка в заголовке страницы (h1 хлебных крошек) =====
   Вставляет ok4u-admin.js, зеркалит иконку активного пункта сайдбара. */
.ok4u-title-icon {
  font-size: 20px;
  line-height: 1;
  margin-right: 0.45rem;
  vertical-align: middle;
  color: var(--color-primary-500, #14b8a6);
}