/* ORTA — общий слой поверх django-unfold.
 *
 * Здесь лежит то, чего настройкой COLORS не добиться: плотность таблиц,
 * контрастные границы, кольцо фокуса, читаемые плашки статусов и сетка
 * дашборда. Tailwind у unfold собран заранее, адаптивных вариантов
 * grid-cols в нём нет — сетки пишем своим CSS Grid.
 *
 * Две вещи, которые чинятся только здесь и никак иначе:
 *
 * 1. unfold использует .text-primary-500 на белом фоне и
 *    .dark .text-primary-500 на почти чёрном. Чтобы одно значение
 *    проходило AA в обоих случаях, нужно одновременно быть светлее
 *    и темнее — решений нет ни при каком тоне. Поэтому ступень
 *    подменяется по теме.
 *
 * 2. Единственный разделитель строк у unfold — линия base-200, на
 *    белом это контраст 1.27:1. При плотной таблице она исчезает, и
 *    строки сливаются в полотно.
 */

:root {
  --orta-row-h: 38px;
  --orta-hairline: rgb(228, 228, 231); /* zinc-200 — декоративные линии */
  --orta-rule: rgb(212, 212, 216);     /* zinc-300 — то, что должно быть видно */
  --orta-control: rgb(148, 148, 155);  /* 3.01:1 — минимум для рамки поля */
  --orta-focus: rgb(24, 24, 27);

  /* Плашки статусов. Таблица — apps/core/badges.py, здесь тёмная тема. */
  --tone-neutral-fg: #3f3f46;  --tone-neutral-bg: #f4f4f5;  --tone-neutral-border: #d4d4d8;
  --tone-info-fg: #1d4ed8;     --tone-info-bg: #eff6ff;     --tone-info-border: #bfdbfe;
  --tone-progress-fg: #0369a1; --tone-progress-bg: #f0f9ff; --tone-progress-border: #bae6fd;
  --tone-warning-fg: #b45309;  --tone-warning-bg: #fffbeb;  --tone-warning-border: #fde68a;
  --tone-success-fg: #166534;  --tone-success-bg: #f0fdf4;  --tone-success-border: #bbf7d0;
  --tone-danger-fg: #991b1b;   --tone-danger-bg: #fef2f2;   --tone-danger-border: #fecaca;
}

.dark {
  --orta-hairline: rgba(255, 255, 255, 0.10);
  --orta-rule: rgba(255, 255, 255, 0.16);
  --orta-control: rgba(255, 255, 255, 0.28);
  --orta-focus: rgb(250, 250, 250);

  --tone-neutral-fg: #a1a1aa;  --tone-neutral-bg: #27272a;  --tone-neutral-border: #3f3f46;
  --tone-info-fg: #60a5fa;     --tone-info-bg: #172554;     --tone-info-border: #1e3a8a;
  --tone-progress-fg: #38bdf8; --tone-progress-bg: #082f49; --tone-progress-border: #0c4a6e;
  --tone-warning-fg: #facc15;  --tone-warning-bg: #422006;  --tone-warning-border: #713f12;
  --tone-success-fg: #4ade80;  --tone-success-bg: #052e16;  --tone-success-border: #14532d;
  --tone-danger-fg: #f87171;   --tone-danger-bg: #450a0a;   --tone-danger-border: #7f1d1d;
}

/* --- Акцент: подмена ступени по теме, см. пункт 1 в шапке --- */

.text-primary-500,
.text-primary-600 {
  color: rgb(var(--color-primary-800));
}
.dark .text-primary-500,
.dark .text-primary-600 {
  color: rgb(var(--color-primary-200));
}
.dark .bg-primary-500 {
  background-color: rgb(var(--color-primary-200));
  color: rgb(var(--color-base-950));
}

/* --- Таблицы --- */

/* Плотность таблицы.
 *
 * !important здесь не лень: unfold задаёт паддинг ячейки утилитой
 * lg:py-3 прямо в шаблоне строки, и обычное правило по #result_list
 * до неё не дотягивается — таблица оставалась в 65 px на строку
 * вместо 38, то есть вдвое меньше строк на экран. */
#result_list th,
#result_list td {
  font-size: 13px !important;
  line-height: 18px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Строка с миниатюрой выше по определению: картинка 44 px плюс
   отступы. Пусть будет ровно столько, сколько нужно картинке. */
#result_list td:has(.orta-thumb) {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

#result_list thead th {
  font-weight: 500;
  /* Не uppercase: кириллический капс шире латинского и теряет верхние
     выносные — именно по ним слово узнаётся с одного взгляда. */
  text-transform: none;
  letter-spacing: 0;
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgb(var(--color-base-100));
  border-bottom: 1px solid var(--orta-rule);
}

.dark #result_list thead th {
  background: rgb(var(--color-base-800));
}

#result_list tbody tr {
  border-bottom: 1px solid var(--orta-hairline);
}

#result_list tbody tr:hover {
  background: rgb(var(--color-base-100));
}

.dark #result_list tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Числа выравниваем по разрядам: колонка сумм, где 9 990 и 121 000
   начинаются с разных мест, не читается как столбец. */
#result_list td.field-amount,
#result_list td.field-total,
#result_list td.field-price_display,
#result_list td.field-items_sum,
#result_list td.field-commission_sum,
#result_list td.field-payout_sum,
#result_list td.field-stock_quantity {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --- Плашки статусов --- */

.orta-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  color: var(--badge-fg);
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
}

/* В тёмной теме инлайновый стиль перебиваем переменными: цвет из
   Python подходит только светлой. */
.dark .orta-badge[data-tone="neutral"]  { --badge-fg: var(--tone-neutral-fg);  --badge-bg: var(--tone-neutral-bg);  --badge-border: var(--tone-neutral-border); }
.dark .orta-badge[data-tone="info"]     { --badge-fg: var(--tone-info-fg);     --badge-bg: var(--tone-info-bg);     --badge-border: var(--tone-info-border); }
.dark .orta-badge[data-tone="progress"] { --badge-fg: var(--tone-progress-fg); --badge-bg: var(--tone-progress-bg); --badge-border: var(--tone-progress-border); }
.dark .orta-badge[data-tone="warning"]  { --badge-fg: var(--tone-warning-fg);  --badge-bg: var(--tone-warning-bg);  --badge-border: var(--tone-warning-border); }
.dark .orta-badge[data-tone="success"]  { --badge-fg: var(--tone-success-fg);  --badge-bg: var(--tone-success-bg);  --badge-border: var(--tone-success-border); }
.dark .orta-badge[data-tone="danger"]   { --badge-fg: var(--tone-danger-fg);   --badge-bg: var(--tone-danger-bg);   --badge-border: var(--tone-danger-border); }

/* --- Поля ввода и фокус --- */

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], input[type="tel"],
input[type="search"], input[type="date"], input[type="datetime-local"],
select, textarea {
  border-color: var(--orta-control);
}

/* Кольцо фокуса. Стоковая админка его теряет, и это первое, что
   выдаёт непричёсанный интерфейс при работе с клавиатуры. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--orta-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Превью изображений в списках и вложенных блоках --- */

.orta-thumb {
  /* 36 px, а не 44: строка списка растёт ровно на высоту картинки,
     и на экране 1080p разница — три лишних товара без прокрутки. */
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--orta-hairline);
  background: rgb(var(--color-base-100));
}

/* Крупнее — в карточке товара, где по снимку принимают решение,
   а не просто узнают строку. */
.orta-thumb--lg {
  width: 56px;
  height: 56px;
}

.orta-thumb--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-base-400));
  font-size: 18px;
}

/* --- Сетка дашборда ---
 * Своим CSS Grid, потому что адаптивных grid-cols в предсобранном
 * Tailwind нет: классы вроде md:grid-cols-2 туда не попали и молча
 * не применяются. */

.orta-dash { margin-bottom: 2.5rem; }
.orta-section { margin-bottom: 2rem; }

.orta-section-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: rgb(var(--color-base-900));
}
.dark .orta-section-title { color: rgb(var(--color-base-50)); }

.orta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 12px;
}

.orta-card {
  display: block;
  padding: 14px 16px;
  border-radius: 10px;
  text-decoration: none;
  background: rgb(var(--color-base-50));
  border: 1px solid var(--orta-hairline);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dark .orta-card {
  background: rgb(var(--color-base-800));
  box-shadow: none;
}

a.orta-card:hover {
  border-color: var(--orta-control);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.07);
}

.orta-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: rgb(var(--color-base-600));
}
.dark .orta-label { color: rgb(var(--color-base-400)); }

.orta-value {
  display: block;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--color-base-900));
}
.dark .orta-value { color: rgb(var(--color-base-50)); }

.orta-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 16px;
  color: rgb(var(--color-base-500));
}

/* Ненулевая очередь — единственное, что красится. Ноль в разделе
   «требует действия» означает, что делать нечего: красить нечего. */
.orta-card--alarm.is-hot .orta-value { color: var(--tone-danger-fg); }
.orta-card--work.is-hot .orta-value { color: var(--tone-progress-fg); }

.orta-panel {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgb(var(--color-base-50));
  border: 1px solid var(--orta-hairline);
}
.dark .orta-panel { background: rgb(var(--color-base-800)); }

.orta-panel h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: rgb(var(--color-base-500));
}

.orta-panel ol,
.orta-panel ul { margin: 0; padding: 0; list-style: none; }

.orta-panel li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--orta-hairline);
  color: rgb(var(--color-base-600));
}
.dark .orta-panel li { color: rgb(var(--color-base-300)); }
.orta-panel li:last-child { border-bottom: 0; }

.orta-panel li span:last-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: rgb(var(--color-base-900));
}
.dark .orta-panel li span:last-child { color: rgb(var(--color-base-50)); }

.orta-empty {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: rgb(var(--color-base-500));
}

@media (max-width: 1024px) {
  .orta-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .orta-value { font-size: 22px; }
}

/* --- Кнопки действий в строке списка --- */

/* Действия перестали прятаться в выпадающем «Действие»: каждая строка
   показывает то, что с ней сейчас можно сделать. Тона — те же, что у
   плашек статусов, поэтому «отменить» читается опасным, а «принять» —
   утвердительным без чтения подписи. */

.orta-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.orta-actions-empty {
  color: rgb(var(--color-base-400));
}

.orta-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 19px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  color: var(--tone-neutral-fg);
  background: var(--tone-neutral-bg);
  border: 1px solid var(--tone-neutral-border);
  transition: filter 120ms ease;
}

.orta-btn:hover { filter: brightness(0.96); text-decoration: none; }
.dark .orta-btn:hover { filter: brightness(1.15); }

.orta-btn[data-tone="info"]     { color: var(--tone-info-fg);     background: var(--tone-info-bg);     border-color: var(--tone-info-border); }
.orta-btn[data-tone="progress"] { color: var(--tone-progress-fg); background: var(--tone-progress-bg); border-color: var(--tone-progress-border); }
.orta-btn[data-tone="warning"]  { color: var(--tone-warning-fg);  background: var(--tone-warning-bg);  border-color: var(--tone-warning-border); }
.orta-btn[data-tone="success"]  { color: var(--tone-success-fg);  background: var(--tone-success-bg);  border-color: var(--tone-success-border); }
.orta-btn[data-tone="danger"]   { color: var(--tone-danger-fg);   background: var(--tone-danger-bg);   border-color: var(--tone-danger-border); }

.orta-btn--lg {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 9px;
}

/* --- Страница подтверждения действия --- */

.orta-confirm {
  max-width: 620px;
  margin: 8px auto 40px;
  padding: 28px;
  border-radius: 14px;
  background: rgb(var(--color-base-50));
  border: 1px solid var(--orta-hairline);
}

.dark .orta-confirm {
  background: rgb(var(--color-base-800));
}

.orta-confirm__title {
  margin: 0 0 6px;
  font-size: 21px;
  font-weight: 600;
  line-height: 28px;
  color: rgb(var(--color-base-900));
}
.dark .orta-confirm__title { color: rgb(var(--color-base-50)); }

.orta-confirm__object {
  margin: 0 0 16px;
  font-size: 14px;
  color: rgb(var(--color-base-500));
}

.orta-confirm__note {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 20px;
  color: var(--tone-warning-fg);
  background: var(--tone-warning-bg);
  border: 1px solid var(--tone-warning-border);
}

.orta-confirm__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: rgb(var(--color-base-700));
}
.dark .orta-confirm__label { color: rgb(var(--color-base-200)); }

.orta-req { color: var(--tone-danger-fg); }

/* Поле причины рисуем явно: на карточке подтверждения оно лежит на
   такой же подложке, и без собственной рамки текстовое поле
   выглядит отсутствующим — человек не понимает, куда писать. */
.orta-confirm__input {
  width: 100%;
  margin-bottom: 6px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 20px;
  border-radius: 9px;
  color: rgb(var(--color-base-900));
  background: #ffffff;
  border: 1px solid rgb(var(--color-base-300));
}

.dark .orta-confirm__input {
  color: rgb(var(--color-base-100));
  background: rgb(var(--color-base-900));
  border-color: rgb(var(--color-base-700));
}

.orta-confirm__input:focus {
  outline: 2px solid rgb(var(--color-primary-500));
  outline-offset: 1px;
}

.orta-confirm__help {
  margin: 0 0 4px;
  font-size: 12px;
  color: rgb(var(--color-base-500));
}

.orta-confirm__buttons {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}