/* Таблиці-списки (ARCHITECTURE.md §6.5 «Таблиці»). ОДИН вигляд для всіх списків: задачі, партнери, угоди, ліди,
   розрахунки, команда, журнал аудиту, групи Telegram. Стилі списків — лише тут; у CSS застосунків — тільки вміст
   окремих клітинок, без власних відступів, висот і розмірів таблиці.

   Над таблицею — один рядок .dt-toolbar: кількість зліва, «Колонки» справа. Порожній список — .dt-empty
   (компактна плашка тієї самої ширини й рамки, що й таблиця).
   Метрики (за «Розміром» 14 px; більший розмір масштабує їх через --k-ui):
     заголовок 40 px, рядок від 52 px, відступ клітинки 12 px з боків (між колонками 24 px), від краю таблиці 16 px,
     колонка вибору 38 px, позначки — у своїй колонці, пілюлі статусу й «Ходу» 22 px.
   Ширини колонок: кожна колонка за замовчуванням вузька (рівно за вмістом, без переносу), а місце, що лишилося,
   дістається головній колонці (.dt-primary) і текстовим (.dt-grow у заголовку + .dt-text у клітинках).
   - Заголовок тонований і липкий під верхньою панеллю, коли таблиця вміщається (.dt-wrap.is-fit — ставить datatable.js).
   - На телефоні (< 768 px) рядки стають картками.
   - Черговість колонок змінює людина (перетягнути заголовок або рядок у «Колонках»); вибір, позначки й дії закріплені.
     Порядок застосовано до DOM, тож і поля карток на телефоні йдуть у тій самій черговості.
   Лише токени з app.css (теми «Вигляду» їх перевизначають). Без градієнтів і inline-стилів (CSP). */

.dt, .dt-empty {
  --dt-px: 12px;
  --dt-edge: 16px;
  --dt-row-h: calc(52px * var(--k-ui));
  --dt-head-h: calc(40px * var(--k-ui));
  --dt-fs: calc(13.5px * var(--k-ui));
  --dt-fs-s: calc(12.5px * var(--k-ui));
  --dt-head: color-mix(in srgb, var(--sunk) 62%, var(--paper));
  --dt-head-ink: var(--ink-2);
  --dt-sel: color-mix(in srgb, var(--acc) 9%, var(--paper));
  --dt-sel-hover: color-mix(in srgb, var(--acc) 13%, var(--paper));
  position: relative;
}

/* --- Фільтри над таблицею (пошук, добірки, вибір партнера): окремий рівень, знизу — тонка лінія -------------------- */
.list-controls { margin: 0 0 12px; padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.list-controls > .filterbar { margin: 0; }
.list-filter-note { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; color: var(--ink-2);
  font-size: var(--fs-s); }
.list-filter-note .chip { height: calc(26px * var(--k-ui)); }

/* --- Рядок над таблицею: кількість і «Колонки» ------------------------------------------------------------------ */
.dt-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); margin: 0 0 8px;
  min-height: calc(32px * var(--k-ui)); }
.dt-toolbar__title { margin: 0 -4px 0 0; font-size: calc(15px * var(--k)); font-weight: 650; }
.dt-toolbar__info { color: var(--muted); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.dt-toolbar__tools { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.dt-cols__btn { margin-right: -6px; }

/* --- Обгортка (.table-wrap з app.css дає фон, рамку, тінь і скло з «Вигляду») ---------------------------------- */
.dt-wrap.is-fit { overflow: clip; }
/* Поки datatable.js не застосував збережений порядок колонок (.is-ready), таблицю не видно — без «стрибка» колонок.
   Запобіжник: якщо скрипт не спрацював, таблиця зʼявляється сама за 0,45 с. */
.dt-wrap:not(.is-ready) > .dt-table { animation: dt-hold .45s step-end; }
@keyframes dt-hold { from, to { visibility: hidden; } }
.dt-wrap .dt-table tbody { transition: opacity .2s var(--ease); }
.dt-wrap.is-loading .dt-table tbody { opacity: .5; }

/* --- Таблиця ------------------------------------------------------------------------------------------------------ */
.dt-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--dt-fs); line-height: 1.4; }
.dt-table thead th {
  width: 1%; height: var(--dt-head-h); padding: 0 var(--dt-px);
  background: var(--dt-head); border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line);
  font-size: calc(12px * var(--k-ui)); font-weight: 650; letter-spacing: .01em; color: var(--dt-head-ink);
  white-space: nowrap; vertical-align: middle; text-align: left;
}
.dt-table thead th:is(.dt-primary, .dt-grow) { width: auto; }
/* Рухома колонка (datatable.js ставить .dt-movable): тягнути за заголовок; ручка ⠿ проступає при наведенні.
   :where — нижча вагомість, щоб липкий заголовок нижче лишався sticky. */
.dt-table thead th:where(.dt-movable) { position: relative; cursor: grab; }
.dt-grip { position: absolute; top: 50%; left: 1px; margin-top: -6px; color: var(--muted); opacity: 0; pointer-events: none;
  transition: opacity .15s var(--ease), transform .15s var(--ease); transform: translateX(-2px); }
.dt-table thead th.dt-movable:hover .dt-grip { opacity: .7; transform: none; }
.dt-col-dragging .dt-grip { opacity: 0 !important; }
/* Липкий лише тоді, коли обгортка не прокручується вбік: інакше заголовок зсунувся б усередині неї. */
.dt-wrap.is-fit .dt-table thead th { position: sticky; top: var(--topbar-h); z-index: 3; }
.dt-table tbody td { height: var(--dt-row-h); padding: 8px var(--dt-px); border-bottom: 1px solid var(--line);
  vertical-align: middle; white-space: nowrap; }
.dt-table tbody td:is(.dt-primary, .dt-text) { white-space: normal; }
.dt-table :is(th, td):first-child { padding-left: var(--dt-edge); }
/* Крайня справа — остання ВИДИМА колонка («Колонки» ховають комірки атрибутом hidden). */
.dt-table :is(th, td):last-child,
.dt-table :is(th, td):nth-last-child(1 of :not([hidden])) { padding-right: var(--dt-edge); }
.dt-table tbody tr:last-child td { border-bottom: 0; }
.dt-table tbody tr { animation: dt-row-in .24s var(--ease) both; transition: background-color var(--t-fast) var(--ease); }
.dt-table tbody tr:hover { background: var(--hover); }
.dt-table tbody tr.is-selected { background: var(--dt-sel); }
.dt-table tbody tr.is-selected:hover { background: var(--dt-sel-hover); }
.dt-table tbody tr.is-mine > td:first-child { box-shadow: inset 3px 0 0 var(--acc); }
.dt-table tbody tr.is-muted { color: var(--muted); }
@keyframes dt-row-in { from { opacity: 0; } }

/* Заголовок: назва-посилання сортування, стрілка, фільтр «▾» */
.dt-th__in { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; vertical-align: middle; }
.dt-th__label { overflow: hidden; text-overflow: ellipsis; }
.dt-sort { position: relative; display: inline-flex; align-items: center; gap: 5px; min-width: 0; margin: 0 -6px;
  padding: 5px 6px; border-radius: 6px; color: inherit; text-decoration: none;
  transition: background-color .15s var(--ease), color .15s var(--ease); }
.dt-sort:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); text-decoration: none; }
.dt-sort:focus-visible { outline-offset: 0; }
.dt-th.is-sorted { color: var(--ink); }
.dt-sort__ind { flex: none; color: var(--acc); transition: opacity .15s var(--ease), transform .2s var(--ease); }
.dt-th.is-sorted .dt-sort__ind { animation: dt-ind-in .28s var(--ease); }
/* Стрілка неактивної колонки зʼявляється при наведенні поверх відступу: колонка не ширшає через неї. */
.dt-sort__ind--idle { position: absolute; top: 50%; right: -9px; margin-top: -6px; color: var(--muted); opacity: 0; }
.dt-th__in:has(.dt-filter) .dt-sort__ind--idle { position: static; margin-top: 0; }
.dt-table th:is(:last-child, :nth-last-child(1 of :not([hidden]))) .dt-sort { margin-right: 0; }
.dt-table th:is(:last-child, :nth-last-child(1 of :not([hidden]))) .dt-sort__ind--idle { position: static; margin-top: 0; }
.dt-table th.dt-num .dt-th__in { justify-content: flex-end; }
.dt-sort:hover .dt-sort__ind--idle, .dt-sort:focus-visible .dt-sort__ind--idle { opacity: .85; }
@keyframes dt-ind-in { from { opacity: 0; transform: translateY(-3px); } }

.dt-filter { display: inline-flex; margin-left: 4px; }
.dt-filter__btn { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease); }
.dt-filter__btn:hover, .dt-filter__btn[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink); }
.dt-filter__btn.is-on { background: var(--acc-t2); color: var(--acc-dark);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 30%, transparent); }
.dt-filter__btn[aria-expanded="true"] .dt-filter__icon { transform: rotate(180deg); }
.dt-filter__icon { transition: transform .2s var(--ease); }
.dt-pop { position: fixed; top: 0; left: 0; z-index: 70; min-width: 210px; max-height: min(360px, calc(100vh - 32px));
  overflow-y: auto; background: var(--paper); }
.dt-pop .menu__item { white-space: nowrap; }

/* --- Колонка вибору: однакова ширина в усіх списках, прапорець — за 16 px від краю ------------------------------- */
.dt-table :is(th, td).dt-check-col { width: calc(10px + 28px); padding: 0 0 0 10px; }
.dt-check { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 0; border-radius: 6px;
  vertical-align: middle; cursor: pointer; transition: background-color .15s var(--ease); }
.dt-check:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.dt-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--acc); cursor: pointer; }

/* --- Позначки: окрема вузька колонка, ярлики один під одним. Відступи — у самих ярликів, тож колонка без жодної
   позначки на сторінці стискається до нуля й не відсуває назву. ------------------------------------------------------ */
.dt-table :is(th, td).dt-flag-col { padding-left: 0; padding-right: 0; }
.dt-table th.dt-flag-col .dt-th__in { padding: 0 var(--dt-px); }
.dt-flags { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 var(--dt-px); }
.dt-tag { display: inline-flex; align-items: center; height: calc(20px * var(--k-ui)); padding: 0 7px; border-radius: 5px;
  font-size: calc(11.5px * var(--k-ui)); font-weight: 650; line-height: 1; white-space: nowrap;
  background: var(--neutral-t); color: var(--ink-2); }
.dt-tag--danger { background: var(--danger-t); color: var(--danger); }
.dt-tag--warn { background: var(--warn-t); color: var(--warn); }
.dt-tag--acc { background: var(--acc-t2); color: var(--acc-dark); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 22%, transparent); }
.dt-tag--terra { background: var(--terra-t); color: var(--terra-ink); }

/* --- Головна колонка: назва (до 2 рядків) і сірий підрядок; ліворуч може стояти аватар або позначка «нове» ---------- */
.dt-primary { min-width: calc(220px * var(--k-ui)); }
.dt-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dt-cell--top { align-items: flex-start; }
.dt-cell__text { display: block; min-width: 0; flex: 1 1 auto; }
.dt-primary__row { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.dt-primary__link { color: var(--ink); font-weight: 600; text-decoration: none; }
.dt-primary__link:hover { color: var(--acc-dark); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--acc) 45%, transparent); }
.dt-primary__text { color: var(--ink); font-weight: 600; }
/* «Є нове»: власна вузька доріжка зліва від назви — назви всіх рядків стоять на одній лінії, крапка не липне до тексту */
.dt-dot { flex: none; width: 8px; height: 8px; margin-top: calc((1.4em - 8px) / 2); border-radius: 50%; background: transparent; }
.dt-dot.badge-new { background: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 16%, transparent); }
.dt-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  overflow-wrap: anywhere; }
.dt-sub { display: block; margin-top: 2px; font-size: var(--dt-fs-s); font-weight: 400; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.dt-sub__sep { margin: 0 5px; color: var(--line-3); }
.dt-sub--warn { color: var(--warn); font-weight: 550; }

/* --- Інші клітинки ------------------------------------------------------------------------------------------------- */
.dt-text .dt-clamp { max-width: calc(480px * var(--k-ui)); }
.dt-ellipsis { display: block; max-width: calc(190px * var(--k-ui)); overflow: hidden; text-overflow: ellipsis; }
.dt-muted { color: var(--muted); }
.dt-table :is(th, td).dt-num { text-align: right; font-variant-numeric: tabular-nums; }
.dt-date { font-variant-numeric: tabular-nums; }
.dt-date.is-overdue { color: var(--danger); font-weight: 600; }
.dt-date.is-soon { color: var(--warn); }
.dt-code { font-family: var(--mono); font-size: calc(12px * var(--k-ui)); color: var(--muted); }
.dt-table td.dt-actions { text-align: right; }
.dt-actions form { display: inline-flex; margin: 0; }
.dt-actions__in { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.dt-table td :is(select, .input) { height: calc(32px * var(--k-ui)); font-size: var(--dt-fs); }

/* Етап: «3/5», тонка смужка прогресу, назва етапу сірим під ними */
.dt-stage { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.dt-stage__num { font-weight: 600; color: var(--ink-2); }
.dt-progress { -webkit-appearance: none; appearance: none; display: block; width: calc(44px * var(--k-ui)); height: 4px;
  border: 0; border-radius: 2px; background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--acc);
  overflow: hidden; }
.dt-progress::-webkit-progress-bar { background: color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 2px; }
.dt-progress::-webkit-progress-value { background: var(--acc); border-radius: 2px; transition: width .3s var(--ease); }
.dt-progress::-moz-progress-bar { background: var(--acc); border-radius: 2px; }
.dt-stage + .dt-sub { max-width: calc(150px * var(--k-ui)); }

/* Статуси, «Хід», теги, строки — ті самі пілюлі однієї висоти */
.dt-table :is(.pill, .turn, .chip, .sla) { height: calc(22px * var(--k-ui)); padding: 0 9px 0 8px; gap: 6px;
  font-size: calc(12px * var(--k-ui)); font-weight: 580; vertical-align: middle; }
.dt-table .chip { padding: 0 8px; border-radius: var(--r-s); }
.dt-table .pill .dot, .dt-table .turn::before { width: 6px; height: 6px; }
.dt-table .chips { gap: 5px; }
.dt-table td:not(.dt-text) .chips { flex-wrap: nowrap; }

/* --- Порожній список: компактна плашка замість великої порожньої картки ------------------------------------------- */
.dt-empty { overflow: visible; }
.dt-empty .empty { flex-direction: row; align-items: center; text-align: left; gap: 14px; padding: 18px var(--dt-edge);
  min-height: 0; }
.dt-empty .empty__icon { width: 40px; height: 40px; margin: 0; border-radius: 10px; }
.dt-empty .empty__body { min-width: 0; flex: 1 1 0; align-items: flex-start; gap: 2px; }
.dt-empty .empty__title { font-size: calc(15px * var(--k)); }
.dt-empty .empty__text { max-width: 72ch; margin-top: 2px; font-size: var(--fs-s); }
.dt-empty .empty__actions { margin: 0 0 0 auto; flex: none; justify-content: flex-end; }

/* --- Панель дій з вибраними ----------------------------------------------------------------------------------------- */
.dt-bulk { position: sticky; bottom: 16px; z-index: 20; display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s2) var(--s3); width: fit-content; max-width: 100%; margin: var(--s3) auto 0; padding: 8px 8px 8px 16px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: var(--shadow-3); opacity: 0; transform: translateY(10px) scale(.98);
  transition: opacity .18s var(--ease), transform .22s var(--ease); }
.dt-bulk.is-open { opacity: 1; transform: none; }
.dt-bulk__count { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dt-bulk__count strong { display: inline-grid; place-items: center; min-width: 24px; height: 22px; margin-left: 2px; padding: 0 7px;
  border-radius: 11px; background: var(--acc); color: #FCFBF8; font-size: calc(12.5px * var(--k)); font-weight: 700; }
.dt-bulk__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dt-bulk__clear { margin-left: auto; }
.dt-bulk-note { margin-bottom: var(--s3); }

/* --- Перетягування колонки за заголовок: привид заголовка, лінія вставки, приглушена колонка-джерело ------------- */
.dt-col-dragging, .dt-col-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.dt-table th.dt-col-src { background: color-mix(in srgb, var(--acc) 9%, var(--dt-head)); }
.dt-table th.dt-col-src .dt-th__in, .dt-table td.dt-col-src { opacity: .35; transition: opacity .15s var(--ease); }
.dt-col-ghost { position: fixed; z-index: 95; display: flex; align-items: center; gap: 6px; box-sizing: border-box;
  padding: 0 12px 0 8px; background: var(--paper); color: var(--ink); pointer-events: none; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--acc) 45%, var(--line-2)); border-radius: 8px; box-shadow: var(--shadow-3);
  font: 650 calc(12px * var(--k-ui))/1.2 var(--font); letter-spacing: .01em; overflow: hidden; will-change: transform;
  animation: dt-ghost-in .16s var(--ease); }
.dt-col-ghost span { overflow: hidden; text-overflow: ellipsis; }
.dt-col-ghost__grip { flex: none; color: var(--acc); }
@keyframes dt-ghost-in { from { opacity: 0; } }
.dt-col-line { position: fixed; z-index: 94; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--acc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent); pointer-events: none; opacity: 0;
  transition: left .12s var(--ease), opacity .12s var(--ease); }
.dt-col-line.is-on { opacity: 1; }
.dt-col-line::before { content: ""; position: absolute; top: -4px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%; background: var(--acc); }
/* Колонка, що щойно стала на нове місце: коротке підсвічування (комірки інших колонок доїжджають — Web Animations) */
.dt-table td.dt-col-landed { position: relative; z-index: 1; animation: dt-col-land .9s var(--ease); }
.dt-table th.dt-col-landed { animation: dt-col-land-head .9s var(--ease); }
@keyframes dt-col-land { 0%, 30% { background-color: color-mix(in srgb, var(--acc) 11%, var(--paper)); }
  100% { background-color: transparent; } }
@keyframes dt-col-land-head { 0%, 30% { background-color: color-mix(in srgb, var(--acc) 16%, var(--dt-head)); }
  100% { background-color: var(--dt-head); } }

/* --- «Колонки»: показ (прапорець) і порядок (ручка ⠿, Alt + ↑/↓) --------------------------------------------------- */
.dt-cols__panel { min-width: 250px; }
.dt-cols__list { display: flex; flex-direction: column; gap: 1px; }
.dt-cols__list.is-sorting { cursor: grabbing; -webkit-user-select: none; user-select: none; }
.dt-cols__list.is-sorting .dt-cols__row:not(.is-dragging) { pointer-events: none; }
.dt-cols__row { display: flex; align-items: center; border-radius: 6px; background: var(--paper); }
.dt-cols__row > .dt-cols__item { flex: 1 1 auto; min-width: 0; min-height: calc(31px * var(--k-ui)); padding: 4px 10px 4px 6px; }
.dt-cols__handle { flex: none; display: grid; place-items: center; width: 24px; height: calc(30px * var(--k-ui)); margin-left: 2px;
  padding: 0; border: 0; border-radius: 5px; background: none; color: var(--muted); opacity: .55; cursor: grab;
  touch-action: none; transition: opacity .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease); }
.dt-cols__row:hover .dt-cols__handle, .dt-cols__handle:focus-visible { opacity: 1; }
.dt-cols__handle:hover { background: var(--sunk); color: var(--ink); }
.dt-cols__handle:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.dt-cols__row.is-pinned .dt-cols__handle { visibility: hidden; }
.dt-cols__row.is-dragging { position: relative; z-index: 2; box-shadow: var(--shadow-2), 0 0 0 1px var(--line-2); }
.dt-cols__row.is-dragging .dt-cols__handle { opacity: 1; color: var(--acc); cursor: grabbing; }
.dt-cols__row.is-moved { animation: dt-cols-moved .8s var(--ease); }
@keyframes dt-cols-moved { 0%, 25% { background-color: var(--acc-t2); } 100% { background-color: var(--paper); } }
.dt-cols__item { cursor: pointer; }
.dt-cols__item input { width: 16px; height: 16px; margin: 0; accent-color: var(--acc); flex: none; }
.dt-cols__item.is-fixed { cursor: default; }
.dt-cols__item.is-fixed input { opacity: .45; cursor: default; }
.dt-cols__hint { max-width: 250px; margin: 6px 10px 4px; font-size: calc(12px * var(--k)); line-height: 1.4; color: var(--muted); }

/* --- Адаптивність ------------------------------------------------------------------------------------------------- */
@media (max-width: 1099px) {
  .dt { --dt-px: 10px; }
  .dt-primary { min-width: calc(180px * var(--k-ui)); }
}

@media (max-width: 767px) {
  /* Рядки — картки: головне зверху на всю ширину, решта — підписані пари в один-два рядки */
  .dt-toolbar { margin-bottom: var(--s2); }
  .dt-table thead { display: none; }
  .dt-table, .dt-table tbody { display: block; width: 100%; }
  .dt-table tbody tr { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .dt-table.has-check tbody tr { padding-left: 48px; }
  .dt-table tbody tr:last-child { border-bottom: 0; }
  .dt-table tbody td { display: inline-flex; align-items: center; gap: 6px; height: auto; min-width: 0; max-width: 100%;
    padding: 0 !important; border: 0; white-space: normal; }
  .dt-table tbody tr.is-mine > td:first-child { box-shadow: none; }
  .dt-table tbody tr.is-mine { box-shadow: inset 3px 0 0 var(--acc); }
  .dt-table td[data-label]::before { content: attr(data-label) ":"; color: var(--muted); font-size: calc(12px * var(--k));
    font-weight: 500; white-space: nowrap; }
  .dt-table td.dt-primary { order: -1; display: block; flex: 1 0 100%; max-width: none; min-width: 0;
    font-size: calc(15px * var(--k)); }
  .dt-table td.dt-primary::before { display: none; }
  /* Позначки — у правому верхньому куті картки, назва їх не підпливає */
  .dt-table td.dt-flag-col { position: absolute; top: 12px; right: 12px; width: auto; }
  .dt-table td.dt-flag-col:empty { display: none; }
  .dt-table tbody tr:has(> td.dt-flag-col:not(:empty)) > td.dt-primary { padding-right: 104px !important; }
  .dt-flags { align-items: flex-end; }
  .dt-table td.dt-nolabel::before { display: none; }
  .dt-table td.is-empty { display: none; }
  .dt-table td.dt-check-col { position: absolute; left: 10px; top: 8px; width: auto; }
  .dt-table td.dt-actions { flex: 1 0 100%; width: auto; justify-content: flex-start; text-align: left; }
  .dt-table td.dt-actions::before { display: none; }
  .dt-table td.dt-num { text-align: left; }
  .dt-table td.dt-stage-col { flex-wrap: wrap; }
  .dt-stage + .dt-sub { max-width: none; margin-top: 0; }
  .dt-text .dt-clamp, .dt-ellipsis { max-width: none; }
  .dt-table td .chips { flex-wrap: wrap; }
  .dt-empty .empty { flex-wrap: wrap; padding: 16px; }
  .dt-empty .empty__actions { flex: 1 0 100%; margin: 4px 0 0; justify-content: flex-start; }
  .dt-bulk { bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom) + 10px); width: 100%; padding: 8px 10px 8px 14px;
    border-radius: 14px; }
  /* Дії — одним рядком, що гортається вбік: панель не закриває пів екрана */
  .dt-bulk__actions { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 -4px; padding: 2px 4px; }
  .dt-bulk__actions::-webkit-scrollbar { display: none; }
  .dt-bulk__actions .btn { flex: none; }
}