/* ============================================================================
   Фирменная тема CRM — «Sage-зелёный».
   Глобальный stylesheet админки (подключён через UNFOLD["STYLES"], ПОСЛЕ
   sage-tokens.css). БЕЗ внешних CDN: шрифт self-hosted (woff2 в static/fonts),
   иконки — Material Symbols, которые уже грузит unfold. Primary/base-рампы —
   в UNFOLD["COLORS"].

   ИСТОЧНИК ПРАВДЫ цветов — sage-tokens.css (:root). Локальные --crm-* теперь
   АЛИАСЫ к sage-токенам (не копия палитры): меняешь токен — едет и админка.
   ============================================================================ */

/* — Шрифт Golos Text (self-host, переменный 400–700; кириллица + латиница) — */
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/golos-text.cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/golos-text.latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* — Локальные --crm-* = АЛИАСЫ к sage-токенам (sage-tokens.css :root) —
     тема перестаёт быть отдельной копией палитры. --crm-ui-scale (масштаб) —
     своё значение, не цвет, оставляем как есть. — */
:root {
  /* Глобальный масштаб всей CRM. 0.8 ≈ браузерный зум 80% (Александр: на 100%
     всё крупное, на 80% идеально — делаем 80% дефолтом). Крутить тут одним
     числом. 1 = как было (без масштабирования). Применяется через `zoom` на
     body (см. блок ниже) — это буквально повторяет браузерный зум: fixed/
     absolute потомки (модалки, дропдауны, командная палитра) масштабируются
     согласованно, горизонтального скролла не возникает. */
  --crm-ui-scale: 1;

  --crm-primary: var(--primary);
  --crm-primary-hover: var(--primary-hover);
  --crm-primary-soft: var(--primary-soft);     /* фон активного пункта / бордюр бейджа ЧК */
  --crm-primary-softer: var(--primary-softer); /* фон чипа / бейджа ЧК */

  --crm-surface: var(--surface);
  --crm-canvas: var(--canvas);
  --crm-n-50: var(--col-bg);
  --crm-n-100: var(--base-100);
  --crm-n-200: var(--base-200);
  --crm-n-300: var(--base-300);
  --crm-n-400: var(--base-400);
  --crm-n-500: var(--base-500);
  --crm-n-600: var(--base-600);
  --crm-n-900: var(--base-900);
  --crm-border: var(--border);
  --crm-border-strong: var(--border-strong);
  --crm-divider: var(--divider);
  --crm-text: var(--text);
  --crm-text-2: var(--text-2);
  --crm-text-3: var(--text-3);

  --crm-info: var(--info);       --crm-info-bg: var(--info-bg);       --crm-info-border: var(--info-border);
  --crm-success: var(--success); --crm-success-bg: var(--success-bg); --crm-success-border: var(--success-border);
  /* недостающие семантические для бейджей admin (приходят из sage-токенов): */
  --crm-danger: var(--danger);   --crm-danger-bg: var(--danger-bg);   --crm-danger-border: var(--danger-border);
  --crm-warning: var(--warning); --crm-warning-bg: var(--warning-bg); --crm-warning-border: var(--warning-border);
}

/* — Шрифт админки → Golos Text (запасной system-ui). unfold-styles.css грузится
     ПОСЛЕ нашего файла, body несёт utility .font-sans → перебиваем !important.
     Моноширинные (code/pre/.font-mono) задают font-family прямо на элементе —
     наследуемый important их НЕ трогает, остаются моно. — */
body {
  font-family: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif !important;
}

/* — Глобальный масштаб ~80% («как браузерный зум 80%») ───────────────────────
   Механизм: CSS `zoom` на корне (body). В отличие от transform:scale, `zoom`
   реально пересчитывает layout (как зум браузера): нет «пустых полей» по краям,
   не появляется горизонтальный скролл, fixed/absolute элементы (модалки unfold
   `fixed inset-0`, командная палитра, выпадающие меню/поиск сайдбара) масштабиру-
   ются вместе со страницей и позиционируются в тех же зум-координатах — поэтому
   ничего не «съезжает». Поддерживается Chromium и современным Firefox (≥126).
   Значение — переменная --crm-ui-scale (см. :root). !important: body несёт
   utility-классы из unfold, грузящиеся позже. */
body {
  zoom: var(--crm-ui-scale) !important;
}

/* — Стабильная полоса прокрутки ───────────────────────────────────────────────
   Резервируем место под вертикальную полосу ВСЕГДА, даже когда её нет. Без этого
   при переходе между страницами разной длины (длинный список ⇄ короткий канбан)
   полоса появляется/исчезает, ширина контента скачет на ~15px вбок — видимый «прыжок»
   шапки. scrollbar-gutter:stable держит ширину постоянной. Скролл-контейнер —
   корневой документ (html). */
html {
  scrollbar-gutter: stable;
}

/* — Доска сделок: ОТКЛЮЧАЕМ масштаб для drag-зоны ────────────────────────────
   SortableJS (templates/deals/board.html) считает координаты перетаскивания в
   реальных пикселях экрана; под унаследованным `zoom` ghost/точка вставки могут
   разойтись с курсором. CSS `zoom` МУЛЬТИПЛИКАТИВЕН (наследуется как множитель),
   поэтому `zoom: 1` НЕ сбросил бы body-зум (0.8 × 1 = 0.8). Чтобы поддерево доски
   жило ровно в 1:1-координатах, гасим унаследованный масштаб обратным множителем:
   calc(1 / --crm-ui-scale) (при 0.8 даёт 1.25 → body 0.8 × 1.25 = 1.0). Тогда
   drag работает штатно. Сам файл доски не трогаем (чужая зона) — гасим масштаб
   точечно отсюда, по классу-обёртке. Доска и так задаёт свою плотную типографику,
   поэтому без общего зума не «пухнет». */
.dealboard {
  zoom: calc(1 / var(--crm-ui-scale));
}

/* ── Оверрайды под мокап (только светлая тема; .dark не трогаем) ────────────── */

/* Шапка списка: капс, тёплый sage-фон, разрядка, приглушённый цвет.
   unfold-styles.css грузится ПОСЛЕ нашего → !important. */
html:not(.dark) #result_list thead th {
  background: var(--crm-n-50) !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11.5px !important;
}
html:not(.dark) #result_list thead th,
html:not(.dark) #result_list thead th a {
  color: var(--crm-text-2) !important;
}

/* Единый рост/радиус контролов формы — выровнять с кастом-страницами (.sage-*).
   Tailwind unfold прекомпилирован → нужен !important. Радиус по шкале --r-8. */
html:not(.dark) .button,
html:not(.dark) input:not([type=checkbox]):not([type=radio]),
html:not(.dark) select,
html:not(.dark) textarea {
  border-radius: var(--r-8) !important;
}

/* Бейджи колонки «Тип компании» (ГОС/ЧК) — приём как status_badge сделок. */
.crm-badge {
  display: inline-flex;
  align-items: center;
  height: 23px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.crm-badge.badge--gos {
  background: var(--crm-info-bg);
  color: var(--crm-info);
  border-color: var(--crm-info-border);
}
.crm-badge.badge--chk {
  background: var(--crm-primary-softer);
  color: var(--crm-primary);
  border-color: var(--crm-primary-soft);
}

/* Колонка «Ответственный» — аватар-инициалы (кружок) + имя.
   white-space:nowrap гарантирует, что аватар и имя ВСЕГДА в одну строку —
   при узкой колонке имя усекается ellipsis, а не переносится (что тянуло
   строку Клиентов до 93px). max-width ограничивает ширину чипа чтобы
   он не вылезал за пределы ячейки. */
.crm-owner {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.crm-owner .crm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--crm-primary-soft);
  color: var(--crm-primary);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
}
/* Текстовая часть имени — усекается ellipsis, не переносится */
.crm-owner .crm-owner__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-owner--none {
  color: var(--crm-text-3);
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════════════
   ПОКРАСКА ШТАТНОГО UNFOLD-CHANGELIST ПОД SAGE (путь A — темизация, без урезания)
   --------------------------------------------------------------------------
   Причёсываем штатный список unfold под вид sage-эталона: таблица как
   .sage-table, поле поиска как .sage-field, пагинация как .sage-pager, заголовок
   крупнее (sage-page-title), кнопка «Добавить» — sage-primary. ВЕСЬ функционал
   unfold сохраняется (чекбоксы, сортировка, фильтры, действия, права) — меняем
   ТОЛЬКО внешний вид.

   СКОУП: только светлая тема (.dark не трогаем) И только страницы-списки
   (`body.change-list`) + change-форма (`body.change-form`). Кастом-страницы
   (.sage / .deallist / .dealboard / шаблоны deals|approvals|mail|reports) НЕ
   имеют этих body-классов, поэтому секция на них не растекается. Доп. привязка к
   id changelist (#result_list / #changelist-search) — двойная страховка.
   unfold-styles.css грузится ПОСЛЕ нашего файла → местами нужен !important.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Таблица результатов: вид .sage-table ─────────────────────────────────────
   Обёртка #result_list уже несёт border/rounded/shadow от unfold (lg:border …);
   мы доводим: тёплый sage-капс шапки (часть уже выше по #result_list thead th),
   тонкие тёплые разделители строк и мягкий hover. */
html:not(.dark) .change-list #result_list thead th {
  height: 40px;
  white-space: nowrap;
}
/* Разделители строк → тёплый --divider вместо холодного base-200.
   unfold кладёт border-t на каждую ячейку строки данных (border-base-200). */
html:not(.dark) .change-list #result_list tbody td,
html:not(.dark) .change-list #result_list tbody th {
  border-color: var(--crm-divider) !important;
}
/* Зебра unfold (чётные tbody несут bg-base-50) гасим в пользу ровного белого +
   единого hover — как в sage-эталоне (без полос, подсветка по наведению). */
html:not(.dark) .change-list #result_list > tbody {
  background-color: var(--crm-surface) !important;
  transition: background-color .12s ease;
}
html:not(.dark) .change-list #result_list > tbody:hover {
  background-color: #fafbf8 !important;
}
/* Имя записи (первая текстовая колонка / ссылка-объект) — насыщенный текст. */
html:not(.dark) .change-list #result_list tbody td.field-name a,
html:not(.dark) .change-list #result_list tbody th.field-name a,
html:not(.dark) .change-list #result_list tbody .field-__str__ a {
  font-weight: 600;
  color: var(--crm-text) !important;
}

/* ── Поле поиска changelist → вид .sage-field ─────────────────────────────────
   DOM: #changelist-search > div (рамка) > [button.search] [input#searchbar].
   Доводим радиус/рамку/высоту/фокус-кольцо под --r-8 + --primary. */
html:not(.dark) .change-list #changelist-search > div {
  height: var(--ctrl-h);
  border-radius: var(--r-8) !important;
  border-color: var(--crm-border-strong) !important;
  box-shadow: none !important;
  transition: border-color .14s ease, box-shadow .14s ease;
}
html:not(.dark) .change-list #changelist-search > div:focus-within {
  border-color: var(--crm-primary) !important;
  box-shadow: var(--sh-focus) !important;
  outline: none !important;
}
html:not(.dark) .change-list #changelist-search #searchbar-submit .material-symbols-outlined {
  color: var(--crm-text-3) !important;
}
html:not(.dark) .change-list #changelist-search #searchbar::placeholder {
  color: var(--crm-text-3);
}

/* ── Пагинация unfold → вид .sage-pager ───────────────────────────────────────
   DOM (нижний sticky-бар): контейнер `.pagination` со ссылками-номерами <a> и
   текущим номером (span text-primary-600). Счётчик «N Клиенты» оставляем. */
html:not(.dark) .change-list .pagination a,
html:not(.dark) .change-list nav[aria-label="pagination"] a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--crm-border);
  background: var(--crm-surface);
  border-radius: var(--r-6);
  color: var(--crm-text);
  font-size: var(--fs-secondary);
  transition: background .12s ease, border-color .12s ease;
  text-decoration: none;
}
html:not(.dark) .change-list .pagination a:hover,
html:not(.dark) .change-list nav[aria-label="pagination"] a:hover {
  background: #f7f8f4;
  border-color: var(--crm-n-300);
}
/* Текущая страница: unfold рендерит её как <span class="… text-primary-600">.
   Делаем «активной» плашкой sage (зелёный фон + белый текст). */
html:not(.dark) .change-list .pagination span.text-primary-600 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--crm-primary);
  background: var(--crm-primary);
  border-radius: var(--r-6);
  color: #fff !important;
  font-weight: 600;
}

/* ── Заголовок страницы (крошки h1) → ближе к sage-page-title ──────────────────
   unfold даёт h1 хлебными крошками мелким xl:text-base. Делаем последнюю крошку
   (имя раздела) крупнее/жирнее — это «название экрана» как в эталоне; путь к
   родителю (CRM —) оставляем приглушённым. Скоуп на список И change-форму. */
html:not(.dark) .change-list h1 a:last-of-type,
html:not(.dark) .change-form h1 a:last-of-type {
  font-size: 17px;
  font-weight: 600;
  color: var(--crm-text) !important;
  letter-spacing: -.01em;
}

/* ── Кнопка «Добавить» (object-tools .addlink) ────────────────────────────────
   unfold рендерит её круглой иконкой-плюсом 38×38 на primary-600 — это уже
   sage-зелёный (через UNFOLD COLORS). Доводим до вида sage-кнопки: радиус по
   шкале (--r-8 вместо полного круга), мягкая тень. Структуру/иконку не трогаем —
   функция добавления сохранена. */
html:not(.dark) .change-list .addlink,
html:not(.dark) .change-form .addlink {
  background: var(--crm-primary) !important;
  border-radius: var(--r-8) !important;
  box-shadow: var(--sh-card);
}
html:not(.dark) .change-list .addlink:hover,
html:not(.dark) .change-form .addlink:hover {
  background: var(--crm-primary-hover) !important;
}

/* ── Бейджи/теги unfold в списке → семантика sage ─────────────────────────────
   Если в list_display появятся unfold-лейблы (django-unfold рендерит их классами
   с префиксами bg-… в зависимости от цвета), их фон/текст уже идут из sage-рамп
   (COLORS). Доп. правка не требуется для текстовых колонок (company_type выводит
   простой текст). Семантические крашеные бейджи мы уже даём через .crm-badge
   (выше) — оставляем как единый приём. */

/* ════════════════════════════════════════════════════════════════════════════
   ЛЕВЫЙ САЙДБАР (#nav-sidebar) → вид по эталону sage
   (claudedesign/shell-sidebar-after.html). Доводим unfold-разметку токенами.
   Скоуп СТРОГО под `html:not(.dark) #nav-sidebar` — не растекается на контент,
   .sage-страницы, changelist. Логику/функции (палитра ⌘K, сворачивание,
   профиль-меню) НЕ трогаем — только заливки/радиусы/типографику/акцент-бар.
   DOM (unfold app_list.html): группа = <div ...><hr?><h2>?<ol><li><a.active?>.
   ════════════════════════════════════════════════════════════════════════════ */

/* Заголовок группы → мелкий капс, приглушённый, letter-spacing (.nav__group) */
html:not(.dark) #nav-sidebar #nav-sidebar-apps h2 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--crm-text-3) !important;
  margin: 0 0 2px;
  padding: 13px 12px 5px;
}

/* Пункт меню → высота 38px, радиус r-8, текст text-2 (.nav__item) */
html:not(.dark) #nav-sidebar #nav-sidebar-apps ol li a {
  position: relative;
  height: var(--ctrl-h);            /* 38px */
  border-radius: var(--r-8);
  color: var(--crm-text-2);
  font-size: 13.5px;
  font-weight: 500;
  transition: background .12s ease, color .12s ease;
}
html:not(.dark) #nav-sidebar #nav-sidebar-apps ol li a .material-symbols-outlined {
  color: var(--crm-text-3);
  transition: color .12s ease;
}

/* Hover → мягкая заливка col-bg, текст темнеет (как эталон) */
html:not(.dark) #nav-sidebar #nav-sidebar-apps ol li a:hover {
  background: var(--col-bg);
  color: var(--crm-text) !important;
}
html:not(.dark) #nav-sidebar #nav-sidebar-apps ol li a:hover .material-symbols-outlined {
  color: var(--crm-text-2);
}

/* Активный пункт → фон primary-soft, текст/иконка primary, левый акцент-бар 3px.
   Перебиваем unfold-дефолт (bg-base-100). Акцент-бар — ::before, привязан к
   relative-ссылке; left:-6px компенсирует px-6 контейнера <ol> + r-8 ссылки. */
html:not(.dark) #nav-sidebar #nav-sidebar-apps ol li a.active {
  background: var(--primary-soft) !important;
  color: var(--crm-primary) !important;
  font-weight: 600;
}
html:not(.dark) #nav-sidebar #nav-sidebar-apps ol li a.active .material-symbols-outlined {
  color: var(--crm-primary) !important;
}
html:not(.dark) #nav-sidebar #nav-sidebar-apps ol li a.active::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--crm-primary);
}

/* Разделитель между группами / над Telegram → тонкая divider-линия */
html:not(.dark) #nav-sidebar #nav-sidebar-apps hr {
  border-color: var(--divider);
  margin: 9px 12px;
}

/* Командная палитра (триггер ⌘K) → радиус/иконка под эталон (.nav__cmd).
   Триггер живёт в search.html (наш override): внешний .mb-2.5.mx-3.relative →
   внутри плашка-кнопка. Логику opencommand/shortcut НЕ трогаем — только вид.
   Селектор по структурным классам search.html (стабильнее, чем по x-on:click). */
html:not(.dark) #nav-sidebar #nav-sidebar-inner > .mb-2\.5.mx-3.relative > div {
  border-radius: var(--r-8);
}
html:not(.dark) #nav-sidebar #nav-sidebar-inner > .mb-2\.5.mx-3.relative .material-symbols-outlined {
  color: var(--crm-text-3);
}

/* ════════════════════════════════════════════════════════════════════════════
   ЕДИНЫЙ ВЕРТИКАЛЬНЫЙ РИТМ СТРОК В ТАБЛИЧНЫХ СПИСКАХ
   --------------------------------------------------------------------------
   Цель: все строки во всех changelist (Клиенты/Контакты/Сделки) — одной
   высоты (~40px), компактные, в одну строку текста. Длинный текст усекается
   ellipsis вместо переноса на новую строку.

   КОРЕНЬ ПРОБЛЕМЫ: чип «Ответственный» (.crm-owner) без white-space:nowrap
   переносился на 2 строки при узкой колонке → тянул строку Клиентов до 93px.
   Исправлено выше в блоке .crm-owner + ниже через max-width на ячейке.

   Механизм:
   - vertical-align:middle на всех td/th — единая вертикальная ось.
   - white-space:nowrap на ячейках данных — не переносим текст.
   - max-width + overflow:hidden + text-overflow:ellipsis на td — усекаем.
   - height:40px на строке tbody tr — фиксируем базовую высоту.
   - Ячейки с чекбоксом и actions НЕ ограничиваем (они и так узкие).

   Скоуп: только .change-list #result_list (светлая тема) — не растекается
   на формы, кастом-страницы, тёмную тему.
   ════════════════════════════════════════════════════════════════════════════ */

/* Базовая высота строки данных — одинакова во всех списках */
html:not(.dark) .change-list #result_list tbody tr {
  height: 40px;
}

/* Ячейки данных: выравнивание по центру, запрет переноса, усечение */
html:not(.dark) .change-list #result_list tbody td,
html:not(.dark) .change-list #result_list tbody th {
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;     /* ячейка шире 220px — текст уходит в ellipsis */
}

/* Ячейка с чекбоксом — не ограничиваем (у неё input, не текст) */
html:not(.dark) .change-list #result_list tbody td.action-checkbox,
html:not(.dark) .change-list #result_list tbody th.action-checkbox {
  max-width: none;
  overflow: visible;
  white-space: normal;
}

/* Колонка «Название» (name_link) и «Компания» (company-ссылка) —
   дать чуть больше места, это главные идентификаторы записи */
html:not(.dark) .change-list #result_list tbody td.field-name,
html:not(.dark) .change-list #result_list tbody th.field-name,
html:not(.dark) .change-list #result_list tbody td.field-name_link,
html:not(.dark) .change-list #result_list tbody td.field-company {
  max-width: 280px;
}

/* Колонка «Ответственный» — ограничим, чтобы чип не вылезал.
   .crm-owner уже имеет white-space:nowrap и overflow:hidden. */
html:not(.dark) .change-list #result_list tbody td.field-responsible_user_display {
  max-width: 180px;
}

/* Заголовки колонок — уже имеют white-space:nowrap (строкой выше),
   выровнять по центру вертикально */
html:not(.dark) .change-list #result_list thead th {
  vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════════════════════
   БЕЙДЖИ СТАДИИ / СТАТУСА СДЕЛОК — CSS-классы вместо inline-style
   --------------------------------------------------------------------------
   status_badge / stage_badge в admin.py рендерили inline-стили с
   display:inline-block и padding:2px 8px. Заменяем на CSS-классы .deal-badge-*
   для лёгкости поддержки и выравниваем высоту по базовой строке (23px как
   у .crm-badge).
   ════════════════════════════════════════════════════════════════════════════ */

/* Базовый бейдж сделок (аналог .crm-badge, но pill-форма как было) */
.deal-badge {
  display: inline-flex;
  align-items: center;
  height: 23px;
  padding: 0 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
  vertical-align: middle;
}

/* Статус: Открыта / Реализована / Отказ */
.deal-badge--open   { background: #6b7280; color: #fff; }
.deal-badge--won    { background: #16a34a; color: #fff; }
.deal-badge--lost   { background: #dc2626; color: #fff; }

/* Стадия воронки — нейтральный серый (как было) */
.deal-badge--stage  { background: #e5e7eb; color: #374151; }

/* ════════════════════════════════════════════════════════════════════════════
   КАСТОМНАЯ ТАБЛИЦА СОГЛАСОВАНИЯ (.sage-tablewrap) — единый ритм
   --------------------------------------------------------------------------
   sage.css уже задаёт vertical-align:middle и padding:9px 14px на td.
   Добавляем white-space:nowrap и фиксируем высоту строки.
   Скоуп: только внутри .sage-tablewrap чтобы не трогать sage-table везде.
   ════════════════════════════════════════════════════════════════════════════ */
.sage-tablewrap .sage-table tbody tr {
  height: 40px;
}
.sage-tablewrap .sage-table tbody td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
/* Первая колонка (Тема) — заголовок важен, дать больше места */
.sage-tablewrap .sage-table tbody td:first-child {
  max-width: 340px;
}