/* Раздел «Покупки и пользователи»: списки /orders, /users,
   /users-subscribe, /users-top-refs.

   Шапка страницы, панель фильтров, пустые состояния и заглушки загрузки
   живут в ui.css, сама таблица и бейджи — в pages.css. Здесь только то,
   чего нет ни там, ни там, и точечные переопределения для этих четырёх
   страниц. Селекторы намеренно привязаны к .data-table--*: те же классы
   ячеек используют разделы других агентов, и глобальная правка задела бы
   их. */

/* ===================== СТЫКОВКА С ШАПКОЙ СТРАНИЦЫ ===================== */

/* У .page-head свой нижний отступ, у .data-table-wrap — верхний, вместе
   выходил провал в полсотни пикселей между фильтрами и первой строкой. */
.page-head + .data-table-wrap{ margin-top:0 }
/* Панель фильтров и первая строка списка — части одного экрана, шаг между
   ними тот же, что между колонками сеток. */
.page-head:has(+ .data-table-wrap){ margin-bottom:14px }

/* ===================== КАРТОЧКА СПИСКА ===================== */

/* Тень из общего слоя на графитовом фоне читалась ореолом вокруг таблицы.
   Карточку от фона отделяет светлота поверхности, тень не нужна.
   Класс удвоен: у правила в pages.css тот же вес, а порядок подключения
   файлов разделов надёжной опорой не бывает. */
.data-table-wrap.data-table-wrap--sticky{ box-shadow:none }

/* ===================== ПАНЕЛЬ ФИЛЬТРОВ ===================== */

/* Кнопки поиска здесь больше нет. Поиск идёт по ходу набора — набрал
   и увидел, — а отдельная лупа только требовала лишнего движения и
   ничего не добавляла: запрос всё равно был тот же самый.
   Задержка и правила отправки — в SearchField (components/ui/Toolbar.tsx). */

/* Значок календаря у поиска по дате рисуется браузером чёрным и на тёмном
   поле пропадает. */
.search-field__input[type='date']::-webkit-calendar-picker-indicator{
  filter:invert(1); opacity:.55; cursor:pointer;
}
.search-field__input[type='date']::-webkit-calendar-picker-indicator:hover{ opacity:1 }

.rows-count{
  display:inline-flex; align-items:center; gap:8px;
  font-variant-numeric:tabular-nums;
}
.rows-count i{ font-size:12px; opacity:.7 }
/* Roboto-Medium — отдельное начертание, поэтому у <b> снимаем жирность:
   иначе браузер поверх насчитает свою. */
.rows-count__num{ font-family:Roboto-Medium; font-weight:400; color:var(--text) }

/* ===================== ПРИЛИПАЮЩАЯ ШАПКА ТАБЛИЦЫ ===================== */

/* position:sticky у thead работает только если между ним и окном нет
   прокручиваемого предка, а .data-table-scroll прокручивается по
   горизонтали. Когда карточка шире таблицы, горизонтальная прокрутка не
   нужна вовсе: переключаем оба слоя на overflow:clip — он обрезает по
   скруглению, но скроллпорт не создаёт, и шапка липнет к шапке приложения.
   Порог меряем контейнерным запросом, а не окном: ширина зависит ещё и от
   того, свёрнут ли сайдбар. Ниже порога всё остаётся как было. */
.data-table-wrap.data-table-wrap--sticky{
  container-type:inline-size;
  overflow:clip;
}

@container (min-width: 1220px){
  .data-table-wrap--sticky .data-table-scroll{ overflow:clip }
  .data-table-wrap--sticky .data-table thead{
    top:var(--header-h);
    /* Полупрозрачная подложка из pages.css сквозит: под шапкой едут
       строки, а не фон страницы. */
    background:var(--surface-2);
    box-shadow:0 1px 0 var(--border);
  }
}

/* ===================== ЯЧЕЙКИ С АВАТАРОМ ===================== */

/* Аватар стоял над подписью и растил строку почти вдвое: 40 px картинки
   плюс отступ. Ставим в строку — высота строки перестаёт зависеть от того,
   загрузилась ли картинка. */
.data-table--orders .buyer-wrap{
  flex-direction:row;
  align-items:center;
  gap:10px;
}
.data-table--orders .buyer-cell{ white-space:nowrap }
.data-table--orders .buyer-id{
  display:inline-flex; align-items:center; gap:6px;
  min-width:0;
}

.name-cell{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; max-width:100%; min-width:0;
}
.name-cell__text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* Рамка аватара — настоящей границей, а не box-shadow: в общем слое она
   имитирована тенью и не считается в размер элемента. */
.data-table--orders .user-avatar-mini,
.name-cell .user-avatar-cell{
  width:26px; height:26px; flex:none;
  margin:0;
  border:1px solid var(--border);
  box-shadow:none;
}
/* Аватар выводится span-ом (внутри inline-обёртки имени div недопустим),
   поэтому размеры включаются только вместе с display. */
.name-cell .user-avatar-cell{ display:block }
.name-cell .user-avatar-cell--empty{
  display:grid; place-items:center; font-size:11px;
}

/* Ширины из pages.css рассчитаны на аватар над подписью. В строку
   содержимое шире: без запаса ID покупателя и имя обрезаются многоточием
   уже на пустом месте. */
.data-table.data-table--orders th:nth-child(5){ width:200px }
.data-table.data-table--users th:nth-child(4){ width:210px }
.data-table.data-table--top-refs th:nth-child(4){ width:210px }

/* ===================== КОЛОНКА АВТОРИЗАЦИИ ===================== */

/* Источник у всех строк один и тот же, а иконка была акцентной — колонка
   превращалась в вертикальную синюю полосу. Акцент остаётся ссылкам и
   выбранной сортировке. */
.data-table--users .auth-cell i,
.data-table--top-refs .auth-cell i{ color:var(--muted); opacity:1 }

/* ===================== ЗАГОЛОВКИ С СОРТИРОВКОЙ ===================== */

.data-table th[data-sort-by]{
  white-space:nowrap;
  transition:color var(--fast), background var(--fast);
}
.data-table th[data-sort-by]:hover{ background:rgba(255,255,255,.03); color:var(--text) }
/* Колонка, по которой список отсортирован сейчас: стрелка вместо
   нейтральных «двух треугольников». Синей вспышки на нажатие здесь
   больше нет — отклик даёт сама смена состояния колонки. */
.data-table th[data-sort-by][data-active='1']{ color:var(--text) }
.data-table th[data-sort-by][data-active='1'] i{ color:var(--accent); opacity:1 }

/* ===================== ЧИСЛА ===================== */

/* Без табличных цифр колонки с суммами дёргаются при подгрузке страницы. */
.data-table--orders td,
.data-table--users td,
.data-table--top-refs td{ font-variant-numeric:tabular-nums }

.cell-amount{
  font-family:Roboto-Medium;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}

/* ===================== СОСТОЯНИЯ КЛИКАБЕЛЬНОГО ===================== */

/* Ссылка на карточку — единственное, что в строке остаётся акцентным:
   переход в другой раздел без цвета не читается. Нажатие уводит цвет
   в тёмный оттенок акцента. */
.data-table .link-table:active{ color:var(--accent-press) }

/* Копируемое значение — не ссылка, и синим оно под курсором больше не
   становится: акцент красил ячейку целиком, и столбцы рябили при каждом
   движении мыши. Что значение кликабельно, показывает иконка копирования —
   общий слой доводит её до полной непрозрачности при наведении на всё
   значение. В колонках ID и «Родитель» она стоит вплотную к ссылке: между
   соседними элементами JSX пробела нет. */
.data-table td .copy-ico{ margin-left:6px }
.data-table td .buyer-id .copy-ico{ margin-left:0 }

/* В общем слое кнопка залита акцентом. В списке покупок она стоит в каждой
   строке — двадцать синих плашек столбцом перебивали сами данные. Здесь
   она такая же нейтральная плашка, как действие в строке, и цветом не
   отличается от остальной таблицы. Подъём при наведении убран, меняется
   только фон и рамка. */
.data-table .btn-open-config{
  padding:6px 11px; font-size:13px;
  background:var(--surface-3); color:var(--text-dim);
  border-color:var(--border);
  transition:background var(--fast), color var(--fast),
             border-color var(--fast), transform var(--fast);
}
.data-table .btn-open-config:hover{
  background:var(--surface-hover); color:var(--text);
  border-color:var(--border-strong);
}
.data-table .btn-open-config:active{ transform:scale(.97) }

/* ===================== ДЕЙСТВИЕ В СТРОКЕ ===================== */

/* Кнопка «Инфо» с подписью повторялась в каждой строке и весила визуально
   больше самих данных. Осталась иконка.

   Совсем прятать её оказалось хуже: колонка «Инфо» с заголовком и пустотой
   под ним читалась как незаполненная. Поэтому стрелка видна всегда, но без
   плашки — приглушённым знаком; фон и рамка появляются только у строки под
   курсором, а у самой кнопки становятся ещё на тон светлее. Акцента здесь
   нет: действие одинаковое во всех строках, красить его незачем.
   Размер 30px держит строку в 54px — иначе её высоту задавала бы кнопка. */
.row-action{
  display:inline-grid; place-items:center;
  width:30px; height:30px;
  border-radius:var(--radius-xs);
  color:var(--muted); background:transparent;
  border:1px solid transparent;
  transition:background var(--fast), color var(--fast),
             border-color var(--fast), transform var(--fast);
}
.data-table tbody tr:hover .row-action,
.data-table tbody tr:focus-within .row-action{
  color:var(--text-dim); background:var(--surface-3); border-color:var(--border);
}
/* Наведение на саму кнопку — ещё на тон светлее. Селектор повторяет вес
   правила строки: короткий .row-action:hover тот бы перебил, и состояние
   кнопки не показывалось бы вовсе. */
.data-table tbody tr .row-action:hover{
  color:var(--text); background:var(--surface-hover); border-color:var(--border-strong);
}
.row-action:active{ transform:scale(.94) }

/* ===================== ПУСТО И ЗАГРУЗКА ===================== */

/* EmptyState и SkeletonRows приносят свои отступы и переносы строк,
   а ячейка таблицы задаёт padding и nowrap. */
.data-table .table-state-cell{
  padding:0;
  white-space:normal;
  text-align:center;
}
/* Строки tbody разделены границами, а заглушка догрузки идёт в tfoot —
   без верхней линии она сливается с последней строкой. */
.data-table tfoot .table-state-cell{ border-top:1px solid var(--border) }
/* Полоски заглушки идут по отступам ячеек. Со своими 18px из общего слоя
   они не совпадали с колонками, и догрузка выглядела сдвигом таблицы. */
.data-table .table-state-cell .skeleton-rows{ padding:12px 14px }

/* ===================== УЗКОЕ ОКНО ===================== */

/* На телефоне три контрола в строку не помещаются: поле поиска ужимается
   до нечитаемой ширины. Раскладываем их по строкам во всю ширину. */
@media (max-width: 560px){
  .toolbar__controls{ width:100% }
  .toolbar .select-field,
  .toolbar .search-field{ flex:1 1 100% }
  .toolbar .select-field__input,
  .toolbar .search-field__input{ width:100% }
}