@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* readability.css грузится с !important на все 28 основных шаблонов
     (Заявки, Компании, Объекты, Сотрудники...), так что --sd-font — это
     единая точка правды для шрифта всего портала, а не только Заявок.
     Open Sans — рабочий, немодный, но проверенный шрифт именно для
     интерфейсов с долгой посадкой (не IBM Plex Sans, слишком дизайнерский
     для этого). Цифры у Open Sans уже моноширинные по умолчанию —
     tabular-nums включать не нужно (проверено на OkDesk: font-feature-
     settings там normal, разброса ширин цифр нет). */
  --sd-font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  --sd-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --sd-bg: #fafbfc;
  --sd-surface: #ffffff;
  --sd-text: #15181d;
  --sd-muted: #555c66;
  --sd-soft: #6b7280;
  --sd-placeholder: #a2a9b4;
  --sd-border: #e7eaee;
  --sd-border-soft: #f1f3f6;
  --sd-control: #e2e6eb;
  --sd-hover: #f2f5fa;
  --sd-nav-hover: #f2f4f7;
  /* Единый акцентный синий - раньше тут жил отдельный #2f5fc4, не
     сверенный с #003d77 сайдбара/кнопки "Новая заявка" (которых в шаблонах
     на порядок больше - 312 против 51 использования #2f5fc4). Привели
     этот токен и все прямые #2f5fc4 в файле к цвету сайдбара. */
  --sd-primary: #003d77;
  --sd-primary-hover: #002c56;
  --sd-primary-soft: #e6ecf1;
  --sd-ring: rgba(0, 61, 119, .16);
  --sd-radius: 8px;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Общий стиль скроллбаров по всему порталу (раньше был только на
     Заявках) - бледный в покое, чтобы не отвлекал монтажников, темнее
     при наведении для affordance. Страницы/блоки, где скроллбар нужно
     скрыть (табы, лайтбокс и т.п.), переопределяют его своими более
     специфичными правилами с !important - конфликта нет. */
  scrollbar-width: thin;
  scrollbar-color: #d7dde3 #edf1f5;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #edf1f5; }
*::-webkit-scrollbar-thumb { background: #d7dde3; border: 2px solid #edf1f5; border-radius: 8px; transition: background-color .15s ease; }
*::-webkit-scrollbar-thumb:hover { background: #8598ab; }

body {
  background: var(--sd-bg) !important;
  color: var(--sd-text) !important;
  font-family: var(--sd-font) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  /* На мобильных, если страница на секунду становится длинной узкой
     колонкой (напр. пока не очистился diag-tab-active), браузер сам
     "раздувает" шрифт (text-size-adjust: auto по умолчанию). Отключаем
     этот автоскейл - размер шрифта всегда определяем только мы сами. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

input,
button,
select,
textarea,
table {
  font-family: var(--sd-font) !important;
}

a {
  color: var(--sd-primary);
  text-decoration: none;
}

a:hover {
  color: var(--sd-primary-hover);
}

.main-area,
.content,
.issues-page,
.settings-page,
.clients-page,
.page,
.page-content {
  background: var(--sd-bg) !important;
}



/* Top area */
/* var(--sd-bg) = #fafbfc - тот же цвет, что у фона страницы (body), поэтому
   шапка визуально сливалась с контентом под ней. Первая попытка (#fdfdfd +
   тонкая граница #e6e9ee) технически была другим цветом, но разница в
   3-5 пунктов RGB между двумя почти-белыми — глазом не читается вообще,
   поэтому визуально ничего не поменялось. Держим фон чисто белым (реальный
   контраст с #fafbfc страницы) и добавляем именно тень, а не оттенок —
   тень даёт однозначно видимую границу независимо от калибровки монитора. */
/* padding был 8px 20px 0 (паддинг только сверху) - внутри флекс-строки с
   align-items:center это сдвигало весь контент (лого/кнопку/поиск) на
   несколько px ниже геометрического центра бара, ближе к нижней границе.
   Симметричный паддинг возвращает реальное центрирование по высоте. */
/* На проде отделение шапки от контента сделано не линией, а лёгкой серой
   заливкой самой шапки (без border-bottom/box-shadow) - тот же фон, что у
   сайдбара (#fdfdfd), для единообразия обеих панелей вокруг контента. */
.topbar {
  height: 58px !important;
  min-height: 58px !important;
  background: #fdfdfd !important;
  border-bottom: 0 !important;
  padding: 0 20px !important;
  gap: 14px !important;
}

/* логотип теперь тут, а не в узком меню слева — тому шире стал не
   по размеру полноразмерный логотип (150px в слоте 100px) */
.topbar > img[src="/static/logo.png"] {
  display: block !important;
  height: 38px !important;
  width: auto !important;
  margin-right: 14px !important;
  flex-shrink: 0 !important;
}

.topbar-title,
.detail-title,
.card-title,
.section-title {
  color: var(--sd-text) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
}

.topbar-search,
.filter-search {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 34px !important;
  min-width: 240px;
  background: var(--sd-surface) !important;
  border: 1px solid var(--sd-control) !important;
  border-radius: 8px !important;
  color: var(--sd-soft) !important;
  padding: 0 12px !important;
}

/* Поиск в самой шапке - не .filter-search (тот, что в панелях фильтрации
   ниже) - без рамки в состоянии покоя: рамка + рамки соседних полей формы
   создавали ощущение, что вся шапка состоит из одинаковых прямоугольников.
   Эта пара правил (readability.css, грузится с !important) реально решает
   цвет/рамку - раньше правил только .topbar-search в _topbar.html, но он
   без !important и проигрывал этому правилу независимо от порядка в HTML. */
.topbar-search {
  background: transparent !important;
  border-color: transparent !important;
}
.topbar-search:hover {
  background: #f4f6f9 !important;
}
.topbar-search:focus-within {
  border-color: #003d77 !important;
  background: #fff !important;
}

.topbar-search svg,
.filter-search svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

.topbar-search input,
.filter-search input {
  flex: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--sd-text) !important;
  font-size: 13px !important;
}

.topbar-search input:focus,
.filter-search input:focus {
  border: 0 !important;
  box-shadow: none !important;
}

.primary-btn,
.create-btn,
button.primary {
  background: var(--sd-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  min-height: 36px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* в шапке рядом с логотипом и поиском кнопка компактнее общего размера.
   Перепробовали индиго-капсулу покрупнее - пользователю больше нравится
   исходный вид (тёмно-синий var(--sd-primary), компактный размер), к нему
   и вернулись. */
.btn-new-issue {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  /* Было сплошной синей заливкой: #2f5fc4 -> #2851a7 -> #5470ab (три
     подряд запроса приглушить/"ещё бледнее") - каждый раз чуть темнее/
     бледнее той же заливки, но кнопка продолжала быть цветным пятном в
     шапке. Дошли до третьего запроса "кардинальнее" (2026-09-30, со
     скриншотом-референсом) - сменили сам тип кнопки на ghost/outline
     (бледная заливка + тонкая рамка + синий текст вместо заливки, как в
     референсе), а не просто ещё раз подкрутили один и тот же тон. */
  background: #eaf2fd !important;
  color: #2f5fc4 !important;
  border: 1px solid #c7dcf5 !important;
  border-radius: 7px !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 11px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.btn-new-issue svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

.btn-new-issue:hover {
  background: #dceafb !important;
  border-color: #a8c9ef !important;
}

.primary-btn:hover,
.create-btn:hover,
button.primary:hover {
  background: #254c9c !important;
}

/* Issue tabs */
.status-tabs-bar {
  height: 48px !important;
  align-items: flex-end !important;
  gap: 8px !important;
  padding: 10px 28px 8px !important;
  background: var(--sd-bg) !important;
  border-bottom: 0 !important;
}

.status-tab {
  height: 38px !important;
  min-height: 38px !important;
  top: 0 !important;
  margin: 0 !important;
  padding: 8px 13px !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: 10px !important;
  background: #f3f5f8 !important;
  color: var(--sd-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.status-tab:hover {
  background: #eef1f5 !important;
  border-color: #d8dde5 !important;
  color: var(--sd-text) !important;
}

.status-tab.active {
  background: var(--sd-primary-soft) !important;
  border-color: #d7e2f7 !important;
  color: var(--sd-primary) !important;
  font-weight: 600 !important;
}

.status-tab .tab-count {
  min-width: 0;
  margin-left: 4px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: #eef0f3 !important;
  color: var(--sd-soft) !important;
  font: 500 11px/1.2 var(--sd-mono) !important;
}

.status-tab.active .tab-count {
  background: var(--sd-primary-soft) !important;
  color: var(--sd-primary) !important;
}

.tabs-add {
  height: 38px !important;
  padding: 8px 10px 12px !important;
  color: var(--sd-soft) !important;
}

/* Filters - серый скруглённый тулбар, как в оригинале OkDesk (снято
   живьём с help.a-lain.ru: фон rgb(230,233,238), border-radius 8px,
   без рамки - а не белая карточка с границей, как было раньше). Один и
   тот же вид на всех списках (Заявки/Компании/Объекты/Оборудование/
   Сотрудники/Путевые листы). Отступ 28px - как у вкладок представлений
   (.status-tabs-bar, padding-left 28px) и первой колонки таблицы, чтобы
   левый край тулбара стоял на одной вертикали с ними. */
.filter-bar {
  /* margin-top отделяет серый тулбар от полосы вкладок белой полоской
     фона - как в OkDesk (там между ними тоже просто отступ, а не линия);
     без него неактивные вкладки (у них похожий серый фон) сливались с
     тулбаром в одно пятно. */
  margin: 12px 28px 0 !important;
  background: #e6e9ee !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
}

.filter-settings-panel {
  margin: 0 28px !important;
  background: #e6e9ee !important;
  border: 0 !important;
  border-radius: 0 0 8px 8px !important;
  padding: 12px !important;
}

.filter-settings-panel {
  display: flex !important;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none !important;
  transform: translateY(-4px);
  transition: max-height .22s ease-out, opacity .18s ease-out, padding .22s ease-out, transform .22s ease-out !important;
}

.filter-settings-panel.open {
  max-height: 560px !important;
  opacity: 1 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  pointer-events: auto !important;
  transform: translateY(0);
  overflow: visible !important;
  /* Above #issuesTable thead's z-index:180 (templates/issues.html) - even
     transform: translateY(0) creates a stacking context here, so this
     panel's own z-index (not its descendants' higher ones) is what
     actually competes against the sticky table header. Any dropdown
     opened from inside this panel (e.g. .filter-multi-popover) was
     rendering behind the header regardless of its own z-index because it
     never escapes this stacking context. */
  z-index: 190 !important;
  position: relative !important;
}

.filter-bar {
  position: relative !important;
  z-index: 150 !important;
}

.filter-rule,
.filter-rule-main,
.filter-rule-control,
.filter-multi-host {
  overflow: visible !important;
}

.filter-multi-popover,
.column-settings-panel,
.dropdown,
.select-popover {
  z-index: 3000 !important;
}

.filter-btn,
.view-btn,
.issues-page-btn,
.page-btn,
.pagination button,
.pagination a {
  border: 1px solid var(--sd-control) !important;
  border-radius: 7px !important;
  background: var(--sd-surface) !important;
  color: var(--sd-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.filter-btn:hover,
.view-btn:hover,
.issues-page-btn:hover,
.page-btn:hover {
  background: var(--sd-nav-hover) !important;
  border-color: #c8cfd9 !important;
  color: var(--sd-text) !important;
}

/* кнопка "Настройки фильтрации" - единый шаблон, снятый с /issues
   (#filterSettingsToggle): чёрный текст обычного начертания (не серый
   полужирный, как у остальных .filter-btn - пагинация, переключатель
   Таблица/Календарь), высота 34px, скругление 8px. Раньше на
   Компаниях/Объектах/Оборудовании/Сотрудниках была чуть меньше (30px,
   светлее рамка) - привели к тому же виду. */
[id$="FilterToggle"],
[id$="FilterSettingsToggle"] {
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border-color: var(--sd-control) !important;
  color: var(--sd-text) !important;
  font: 400 13px/1 var(--sd-font) !important;
  gap: 8px !important;
}

input,
select,
textarea,
.filter-rule input[type="text"],
.filter-rule input[type="date"],
.filter-rule select,
.filter-multi-button,
.filter-add-select {
  min-height: 34px !important;
  background: var(--sd-surface) !important;
  border: 1px solid var(--sd-control) !important;
  border-radius: 8px !important;
  color: var(--sd-text) !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--sd-primary) !important;
  box-shadow: 0 0 0 3px var(--sd-ring) !important;
  outline: none !important;
}

/* Tables */
.issues-table-wrap,
.table-wrap,
.table-container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
}

#issuesTable {
  background: transparent !important;
}

#issuesTable thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 70 !important;
  height: 36px !important;
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sd-border) !important;
}

/* тонкая вертикальная черта между заголовками колонок - как в OkDesk:
   короткая, не достаёт до верхнего/нижнего края ячейки (обычный
   border-right через всю высоту смотрелся слишком тяжело) */
#issuesTable thead th:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 1px !important;
  background: var(--sd-border) !important;
}

#issuesTable thead th {
  /* как в оригинале OkDesk: обычным регистром, без капса и разрядки —
     капс визуально утяжелял шапку таблицы; чуть крупнее и темнее
     светлого дефолта - лучше читается на мобильном и десктопе */
  color: #6b7280 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: 1 !important;
  text-transform: none !important;
}

#issuesTable tbody tr {
  height: 39px !important;
  border: 0 !important;
  background: transparent !important;
}

#issuesTable tbody td {
  height: 39px !important;
  border: 0 !important;
  border-bottom: 1.2px solid var(--sd-border) !important;
  background: transparent !important;
  color: #15181d !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#issuesTable th:not(.sticky-col-left):not(.sticky-col-right),
#issuesTable td:not(.sticky-col-left):not(.sticky-col-right) {
  position: relative !important;
  z-index: 1 !important;
}

#issuesTable tbody tr:hover td,
#issuesTable tbody tr:hover .sticky-col-left,
#issuesTable tbody tr:hover .sticky-col-right {
  background: var(--sd-hover) !important;
}

/* номер заявки в списке — серым, не синим: он не главное в строке,
   внимание должно идти на тему и статус */
.td-num,
.issue-number-col {
  color: var(--sd-soft) !important;
  font-family: var(--sd-font) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
}

.td-subj,
.td-title,
.issue-title {
  color: var(--sd-text) !important;
  font-weight: 400 !important;
}

.td-date,
.td-obj,
.td-client,
.muted,
.hint,
.empty,
.filter-empty,
.sd-total-counter {
  color: var(--sd-soft) !important;
}

.sticky-col-left,
.sticky-col-right {
  position: sticky !important;
  background: #fff !important;
  z-index: 80 !important;
  overflow: visible !important;
  border-right: 0 !important;
}

th.sticky-col-left,
th.sticky-col-right {
  position: sticky !important;
  z-index: 110 !important;
  background: #fff !important;
}

td.sticky-col-left,
td.sticky-col-right {
  position: sticky !important;
  z-index: 90 !important;
  background: #fff !important;
  background-clip: border-box !important;
  isolation: isolate !important;
}

#issuesTable .sticky-col-left::before,
#issuesTable .sticky-col-right::before,
#issuesTable .sticky-col-left::after,
#issuesTable .sticky-col-right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  background: #fff;
}

#issuesTable .sticky-col-left::before,
#issuesTable .sticky-col-right::before {
  left: 0;
  right: 0;
}

#issuesTable .sticky-col-left::after {
  right: -18px;
  width: 18px;
  box-shadow: 8px 0 10px -12px rgba(21, 24, 29, .55);
}

#issuesTable .sticky-col-right::after {
  left: -18px;
  width: 18px;
  box-shadow: -8px 0 10px -12px rgba(21, 24, 29, .55);
}

.issue-number-col {
  box-shadow: none !important;
}

.issue-status-col {
  box-shadow: none !important;
}

#issuesTable .issue-number-col *,
#issuesTable .issue-status-col * {
  position: relative;
  z-index: 2;
}

/* Status chips */
.status-badge,
.issue-status,
.badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 26px !important;
  max-width: 128px !important;
  padding: 5px 11px !important;
  border-radius: 7px !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  white-space: nowrap !important;
}

.status-badge-text {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Перенесено из templates/issues.html - шестерёнка настройки колонок и панель
   настройки/перетаскивания видимых колонок нужны и вне /issues (вкладка
   "Заявки" в /search теперь тоже их использует), поэтому CSS переехал
   сюда, в общий файл, а не остался локальным для одной страницы. */
.gear-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #8c9eb2; cursor: pointer; font-size: 14px; }
.gear-btn svg { width: 16px; height: 16px; }
.gear-btn:hover, .gear-btn.active { border-color: #c8d0dc; color: #667085; background: #fff; }
.status-head-inner { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
.status-head-inner .gear-btn { margin-left:auto; flex:0 0 auto; }
.status-head-inner .th-label { min-width:0; }

/* "Колонки таблицы" - та же общая модалка портала, что у "Истории
   изменений"/"Объединить с заявкой" (.modal-overlay/.modal, см. issues.html) -
   раньше была своя панель, привязанная к кнопке-шестерёнке, со своим
   затемнением через ::before; выглядела и вела себя иначе, чем остальные
   модалки. .column-settings-modal здесь - только точечные фиксы поверх
   общих .modal-overlay/.modal (ширина карточки, чтобы список колонок не
   был слишком узким/широким), сама структура (шапка/затемнение/закрытие
   по клику вовне) полностью переиспользует общий модальный css. */
#mergeIssueModal .modal { position: relative; }
.column-settings-modal .modal { width:min(520px, calc(100vw - 48px)); max-height:min(560px, 80vh); }
.column-settings-modal .modal-header { padding:10px 20px; }
.column-settings-modal .modal-footer { padding:8px 20px; }
.column-settings-search-wrap {
  display:flex; align-items:center; gap:8px; margin:10px 20px 6px; padding:0 12px; height:30px;
  border:1px solid #dfe3e8; border-radius:8px; background:#fff; flex-shrink:0;
}
.column-settings-search-wrap svg { width:15px; height:15px; color:#9aa7b5; flex-shrink:0; }
.column-settings-search { flex:1; min-width:0; min-height:0 !important; border:0 !important; outline:none !important; box-shadow:none !important; background:transparent !important; border-radius:0 !important; font:inherit; font-size:13px; color:#15181d; }
.column-settings-search-wrap .column-settings-search:focus { border:0 !important; outline:none !important; box-shadow:none !important; }
.column-settings-search::placeholder { color:#a2a9b4; }
.column-settings-search-wrap:focus-within { border-color:var(--sd-primary); }
/* Выпадающая панель колонок (страница /search, вкладка "Заявки"): у /issues
   теперь модалка (.column-settings-modal), а этот старый вариант остался
   только здесь - базовые правила пропали, панель без них не была скрыта и
   торчала текстом "Колонки таблицы ×" в углу страницы. Позиция top/right
   пересчитывается в positionColumnSettingsPanel() от кнопки-шестерёнки. */
.column-settings-panel { display:none; position:fixed; right:16px; top:132px; z-index:3000; width:min(420px, calc(100vw - 32px)); max-height:min(640px, calc(100vh - 170px)); overflow:hidden; background:#fff; border:1px solid #dce3ea; border-radius:8px; box-shadow:0 18px 45px rgba(15,23,42,.16); }
.column-settings-panel.open { display:flex; flex-direction:column; }
.column-settings-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid #eef1f4; color:#1a2332; font-weight:700; font-size:13px; }
.column-settings-close { border:0; background:transparent; color:#8c9eb2; cursor:pointer; font-size:18px; line-height:1; }
.column-settings-list { padding:4px 12px; overflow-y:auto; flex:1; min-height:0; }
.column-setting-row { display:grid; grid-template-columns:24px 20px minmax(0,1fr); align-items:center; gap:10px; min-height:34px; padding:3px 8px; border-radius:6px; color:#15181d; font-size:13.5px; user-select:none; -webkit-user-drag:element; transition:background .1s ease; }
.column-setting-row:hover { background:#f4f8fb; }
/* Заметнее, чем раньше (было только opacity:.55) - тень и рамка делают
   перетаскиваемую строку однозначно "приподнятой" над списком, ближе к
   тому, как это выглядит в OkDesk. */
.column-setting-row.dragging {
  opacity:.9; background:#fff; box-shadow:0 8px 20px rgba(15,23,42,.18);
  border:1px solid #cfe0f5; border-radius:8px; position:relative; z-index:2;
}
.column-setting-row input { width:17px; height:17px; accent-color:#003d77; cursor:pointer; }
.column-drag-handle { width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; color:#9aa7b5; cursor:grab; font-size:17px; letter-spacing:-2px; user-select:none; }
.column-drag-handle:active { cursor:grabbing; }


/* .status-badge/.issue-client-receipt/.issue-tree-toggle содержат <svg
   viewBox="..."> без width/height атрибутов - без явного размера браузер
   разворачивает такой inline svg в дефолтные 300x150 и ломает раскладку
   строки (обнаружено на /search, где эта же разметка используется через
   static/issue_table_render.js без специфичного для /issues контекста
   родителя). Задаём размер явно и одинаково для всех мест использования. */
.status-badge svg {
  width: 9px !important;
  height: 9px !important;
  flex-shrink: 0 !important;
}
.issue-client-receipt svg {
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0 !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.issue-client-receipt.is-read svg { stroke: #2e7d32 !important; }
.issue-client-receipt:not(.is-read) svg { stroke: #b0862c !important; }
.issue-tree-toggle svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

/* Common panels and cards */
.card,
.panel,
.modal-content,
.dropdown,
.filter-multi-popover,
.column-settings-panel,
.issue-sidebar,
.client-sidebar {
  background: var(--sd-surface) !important;
  border-color: var(--sd-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.modal-backdrop,
.overlay {
  background: rgba(21, 24, 29, .45) !important;
}

.issues-pagination-bar {
  background: var(--sd-surface) !important;
  border-top: 1px solid var(--sd-border) !important;
  padding: 12px 28px !important;
}

/* индикатор подгрузки следующих карточек - виден только на мобильном
   списке заявок (см. @media 820px ниже), там его переключает JS
   (loadIssues/maybeLoadMoreIssuesMobile). По умолчанию скрыт, иначе
   текст "Загрузка..." торчал под таблицей и на десктопе. */
.issues-mobile-loadmore {
  display: none;
}

/* Pull-to-refresh (список заявок и открытая карточка на телефоне,
   см. initPullToRefresh в issues.html) - плашка в покое схлопнута
   (height:0), JS раздвигает её по мере протяжки пальцем и меняет
   текст/спиннер через классы .visible/.ready/.loading. */
.pull-to-refresh-indicator {
  display: none;
}

@media (max-width: 820px) {
  .pull-to-refresh-indicator {
    /* Обычный блок в потоке документа (а не position:fixed) - лежит
       прямо перед .issues-page/.issue-page, сразу под отступом
       .main-area padding-top под фиксированный topbar. Скрыт через
       height:0 - так не нужно знать реальную высоту topbar (она
       плавает: 56px в одну строку, больше - когда поиск переносится
       второй строкой), в отличие от прежнего варианта через
       position:fixed + transform, который из-за этого вылезал
       видимой полосой из-под шапки. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 0;
    overflow: hidden;
    background: #fff;
    color: #6b7280;
    font-size: 12.5px;
    transition: height .2s ease;
  }

  .pull-to-refresh-indicator.visible { transition: none; }

  .pull-to-refresh-indicator.ready { color: #003d77; }

  .pull-to-refresh-spinner {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid #d8dde5;
    border-top-color: #8a919c;
    flex: 0 0 auto;
  }

  .pull-to-refresh-indicator.ready .pull-to-refresh-spinner {
    border-color: #d7e2f7;
    border-top-color: #003d77;
  }

  .pull-to-refresh-indicator.loading .pull-to-refresh-spinner {
    animation: pullToRefreshSpin .7s linear infinite;
  }
}

@keyframes pullToRefreshSpin {
  to { transform: rotate(360deg); }
}

.issues-page-btn {
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  font-family: var(--sd-mono) !important;
}

.issues-page-info,
.sd-total-counter {
  font-family: var(--sd-mono) !important;
  font-size: 12px !important;
}

/* Shared loading state */
.sd-loading-cell,
.empty-state.sd-loading-cell,
.loader.sd-loading-cell,
.loading.sd-loading-cell {
  height: 104px !important;
  padding: 22px !important;
  text-align: center !important;
  color: var(--sd-muted) !important;
}

.sd-loading-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
}

.sd-alain-loader {
  display: inline-grid;
  justify-items: center;
  gap: 7px;
  min-width: 92px;
  border: 0;
  background: transparent;
  color: #7b828c;
}

.sd-loader-logo {
  position: relative;
  display: block;
  width: 58px;
  height: 58px;
  overflow: hidden;
  background: url("/static/alain-loader-logo-transparent.png") center / contain no-repeat;
  opacity: .72;
}

.sd-loader-shine {
  position: absolute;
  inset: -12px -72px;
  display: none;
  background: linear-gradient(105deg, transparent 36%, rgba(255,255,255,.06) 44%, rgba(255,255,255,.64) 50%, rgba(255,255,255,.08) 58%, transparent 66%);
  animation: sdLoaderSweep 2.65s ease-in-out infinite;
  animation-delay: -1.15s;
}

@supports (-webkit-mask: url("")) {
  .sd-loader-shine {
    display: block;
    -webkit-mask: url("/static/alain-loader-logo-transparent.png") center / 58px 58px no-repeat;
    mask: url("/static/alain-loader-logo-transparent.png") center / 58px 58px no-repeat;
  }
}

.sd-loader-text {
  display: block;
  width: 10ch;
  overflow: hidden;
  white-space: nowrap;
  border-right: 1px solid currentColor;
  color: #8b929c;
  font: 500 12px/1.2 var(--sd-font, Arial, sans-serif);
  letter-spacing: 0;
  animation: sdLoaderTyping 2.4s steps(10, end) infinite, sdLoaderCaret .8s step-end infinite;
}

@keyframes sdLoaderSweep {
  0% { transform: translateX(-72px) skewX(-16deg); opacity: 0; }
  18% { opacity: .72; }
  58% { opacity: .72; }
  100% { transform: translateX(112px) skewX(-16deg); opacity: 0; }
}

@keyframes sdLoaderTyping {
  0%, 18% { width: 0; }
  58%, 82% { width: 10ch; }
  100% { width: 0; }
}

@keyframes sdLoaderCaret {
  0%, 100% { border-color: transparent; }
  50% { border-color: currentColor; }
}

/* Filter typography refinements */
#filterSettingsToggle {
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  color: var(--sd-text) !important;
  font: 400 13px/1 var(--sd-font) !important;
  gap: 8px !important;
}

/* тот же значок "+", что у #filterSettingsIcon на /issues - единым
   шаблоном на Компаниях/Объектах/Оборудовании/Сотрудниках (там он
   .sd-filter-toggle-icon, а не отдельный id) */
#filterSettingsIcon,
.sd-filter-toggle-icon {
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  background: #eef0f3 !important;
  color: var(--sd-primary) !important;
  font: 500 14px/1 var(--sd-font) !important;
}

.filter-rule {
  border: 1px solid var(--sd-border) !important;
  border-radius: 10px !important;
  background: #fff !important;
  padding: 10px !important;
}

.filter-rule-name {
  color: var(--sd-text) !important;
  font: 500 12px/1.25 var(--sd-font) !important;
}

.filter-rule input,
.filter-rule select,
.filter-rule label,
.filter-multi-button,
.filter-multi-popover,
.filter-multi-popover input,
.filter-multi-item,
.filter-multi-empty,
.filter-add-select,
.filter-sort-field,
.filter-sort-field label,
.filter-sort-reverse {
  color: var(--sd-muted) !important;
  font-family: var(--sd-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

.filter-multi-button {
  justify-content: space-between !important;
  padding: 0 10px !important;
}

.filter-multi-popover {
  border: 1px solid var(--sd-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 24px rgba(21, 24, 29, .08) !important;
}

.filter-multi-item {
  min-height: 32px !important;
  padding: 7px 10px !important;
  border-radius: 7px !important;
}

.filter-multi-item:hover {
  background: var(--sd-hover) !important;
}

.filter-multi-item:has(input[type="checkbox"]:checked) {
  background: #858c98 !important;
  color: #fff !important;
}

.filter-multi-item:has(input[type="checkbox"]:checked):hover {
  background: #78818e !important;
}

.filter-multi-item input[type="checkbox"]:focus {
  border-color: initial !important;
  box-shadow: none !important;
  outline: none !important;
}

.filter-invert-btn,
.filter-remove-btn {
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid transparent !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #aaa !important;
  font: 500 15px/1 var(--sd-font) !important;
  padding: 0 !important;
}

.filter-invert-btn:hover,
.filter-remove-btn:hover {
  background: var(--sd-nav-hover) !important;
  color: #777 !important;
}

.filter-invert-btn.active,
.filter-remove-btn.has-value {
  border-color: var(--sd-control) !important;
  background: #fff !important;
  color: #777 !important;
}

.filter-date-input:not(.has-value):not(:focus) {
  color: transparent !important;
}

.filter-date-input:not(.has-value):not(:focus)::-webkit-datetime-edit {
  color: transparent !important;
}

.filter-date-input.has-value,
.filter-date-input:focus {
  color: var(--sd-text) !important;
}

/* Okdesk transfer client picker */
.toolbar,
.object-picker-host {
  overflow: visible !important;
}

#clientPickerPopover {
  z-index: 5000 !important;
  width: min(520px, calc(100vw - 260px)) !important;
}

#clientResults {
  max-height: 320px !important;
}

/* Sticky table masks: keep fixed columns readable without covering their own text */
#issuesTable .sticky-col-left::before,
#issuesTable .sticky-col-right::before {
  display: none !important;
}

#issuesTable .sticky-col-left::after,
#issuesTable .sticky-col-right::after {
  display: none !important;
}

.table-wrap {
  overscroll-behavior: contain !important;
}

/* В «Администрировании доступа» таблица прокручивается по горизонтали,
   а сама страница — по вертикали. Общее contain здесь перехватывало
   колесо мыши над строками и не передавало его .settings-content: список
   можно было листать только вне таблицы. Оставляем защиту от бокового
   overscroll, но вертикальный жест отдаём странице настроек. */
body:has(#clientAccessListView) .client-access-table-wrap {
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: auto !important;
}

.table-wrap.sd-bounce-left #issuesTable {
  animation: sdTableBounceLeft .18s ease-out;
}

.table-wrap.sd-bounce-right #issuesTable {
  animation: sdTableBounceRight .18s ease-out;
}

.table-wrap.sd-bounce-top #issuesTable {
  animation: sdTableBounceTop .18s ease-out;
}

.table-wrap.sd-bounce-bottom #issuesTable {
  animation: sdTableBounceBottom .18s ease-out;
}

@keyframes sdTableBounceLeft {
  0% { transform: translateX(0); }
  45% { transform: translateX(7px); }
  100% { transform: translateX(0); }
}

@keyframes sdTableBounceRight {
  0% { transform: translateX(0); }
  45% { transform: translateX(-7px); }
  100% { transform: translateX(0); }
}

@keyframes sdTableBounceTop {
  0% { transform: translateY(0); }
  45% { transform: translateY(7px); }
  100% { transform: translateY(0); }
}

@keyframes sdTableBounceBottom {
  0% { transform: translateY(0); }
  45% { transform: translateY(-7px); }
  100% { transform: translateY(0); }
}

#issuesTable .issue-number-col,
#issuesTable .issue-status-col {
  color: var(--sd-soft) !important;
  background: #fff !important;
}

#issuesTable .issue-number-col {
  overflow: visible !important;
}

#issuesTable .issue-number-col > *,
#issuesTable .issue-status-col > * {
  position: relative !important;
  z-index: 4 !important;
}

/* Статусная плашка обнимает текст; ширина самой колонки одна на весь
   список и задаётся после отрисовки таблицы. */
#issuesTable .issue-status-col .status-badge {
  width: fit-content !important;
  max-width: calc(var(--issue-status-col-width, 160px) - 68px) !important;
}

/* Final template import: only issue tab shape/background/plus and status chips */
/* Как в OkDesk: вся полоса на белом, вкладки без своей подложки —
   только текст с интервалом, активная выделена подчёркиванием снизу.
   Счётчик — отдельный серый бейдж-таблетка у каждой вкладки, а не
   только у активной. */
/* Как вкладки в браузере: полоса на сером, каждая вкладка скруглена
   сверху, активная белая и сливается с содержимым под ней (общий
   нижний край с ним, без своей границы снизу) — неактивные остаются
   на сером фоне полосы и от этого не путаются с активной. */
.status-tabs-bar {
  display: flex !important;
  flex-wrap: nowrap !important;
  min-height: 52px !important;
  height: auto !important;
  align-items: flex-end !important;
  gap: 6px !important;
  padding: 12px 28px 0 !important;
  background: #fff !important;
  border-bottom: 1px solid #e7eaee !important;
}

/* Диагностика внутри вкладки заявки (iframe с ?embed=1) - полоса вкладок
   машин не нужна, название и так видно в карточке ниже, место в панели
   заявки дорого. renderTabsBar() (diagnostics.html) уже пытается скрыть
   #tabsBar через inline style="display:none", но общее правило
   .status-tabs-bar display:flex !important выше побеждает inline-стиль в
   любом случае - только этот более специфичный !important-селектор
   реально прячет её. */
body.diag-embed #tabsBar {
  display: none !important;
}

/* текст одинаковый на всех вкладках, включая активную — отличает
   только белый фон и синяя полоска снизу, без игры с насыщенностью
   и толщиной шрифта */
.status-tab {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  position: relative !important;
  flex: 0 0 auto !important;
  height: 40px !important;
  min-height: 40px !important;
  top: 1px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  background: #e2e7ee !important;
  color: #15181d !important;
  box-shadow: none !important;
  font: 400 13.5px/1.2 var(--sd-font) !important;
}

.status-tab:hover {
  background: #dce2ea !important;
  color: #15181d !important;
}

.status-tab.active {
  background: #fff !important;
  color: #15181d !important;
  box-shadow: 0 -2px 0 #003d77 inset, 0 0 0 1px #e2e6ec inset !important;
  font-weight: 600 !important;
}

.status-tab .tab-count {
  margin-left: 6px !important;
  padding: 0 !important;
  background: transparent !important;
  color: #8a919c !important;
  border-radius: 0 !important;
  font: 500 11px/1.2 var(--sd-mono) !important;
}

.status-tab.active .tab-count {
  background: transparent !important;
  color: #003d77 !important;
}

/* вкладки «Компании» / «Контактные лица» — тот же вид, что у вкладок
   заявок, чтобы страницы выглядели одним приложением */
.client-tabs-bar {
  display: flex !important;
  flex-wrap: nowrap !important;
  min-height: 52px !important;
  height: auto !important;
  align-items: flex-end !important;
  gap: 6px !important;
  padding: 12px 28px 0 !important;
  background: #fff !important;
  border-bottom: 1px solid #e7eaee !important;
}

.client-tab {
  height: 40px !important;
  min-height: 40px !important;
  top: 1px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  background: #e2e7ee !important;
  color: #15181d !important;
  box-shadow: none !important;
  font: 400 13.5px/1.2 var(--sd-font) !important;
}

.client-tab:hover {
  background: #dce2ea !important;
  color: #15181d !important;
}

.client-tab.active {
  background: #fff !important;
  color: #15181d !important;
  box-shadow: 0 -2px 0 #003d77 inset, 0 0 0 1px #e2e6ec inset !important;
  font-weight: 600 !important;
}

.client-tab .tab-count {
  margin-left: 6px !important;
  padding: 0 !important;
  background: transparent !important;
  color: #8a919c !important;
  border-radius: 0 !important;
  font: 500 11px/1.2 var(--sd-mono) !important;
}

.client-tab.active .tab-count {
  background: transparent !important;
  color: #003d77 !important;
}

.tabs-add {
  display: flex !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 0 3px 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #e2e7ee !important;
  color: #555c66 !important;
  font: 500 15px/1 var(--sd-font) !important;
  align-items: center !important;
  justify-content: center !important;
}

.tabs-add:hover {
  background: #dce2ea !important;
  color: #15181d !important;
}

#issuesTable .status-badge,
.issue-status {
  min-height: 26px !important;
  max-width: 128px !important;
  padding: 5px 11px !important;
  border-radius: 7px !important;
  font: 600 11.5px/16px var(--sd-font) !important;
}

/* Final template import: new issue modal and issue card surface */
#newIssueModal {
  background: rgba(21, 24, 29, .34) !important;
}

#newIssueModal .modal {
  width: 960px !important;
  max-width: min(96vw, 960px) !important;
  max-height: 90vh !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 24px 60px rgba(21, 24, 29, .28) !important;
}

#newIssueModal .modal-header {
  padding: 22px 28px !important;
  border-bottom: 1px solid #eef0f3 !important;
  background: #fff !important;
}

#newIssueModal .modal-title {
  color: #15181d !important;
  font: 600 18px/1.25 var(--sd-font) !important;
}

#newIssueModal .modal-close {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #f2f4f7 !important;
  color: #555c66 !important;
  font: 500 18px/1 var(--sd-font) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#newIssueModal .modal-close:hover {
  background: #e7eaee !important;
  color: #15181d !important;
}

#newIssueModal .modal > div:nth-child(2) {
  max-height: calc(90vh - 126px) !important;
  overflow: auto !important;
  background: #eef0f4 !important;
}

#newIssueModal label {
  color: #555c66 !important;
  font: 500 12px/1.2 var(--sd-font) !important;
  margin-bottom: 7px !important;
}

#newIssueModal input,
#newIssueModal select,
#newIssueModal textarea,
#newIssueModal .form-control,
#newIssueModal .picker-input,
#newIssueModal .custom-select {
  min-height: 40px !important;
  border: 1px solid #e2e6eb !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #15181d !important;
  padding: 11px 13px !important;
  font: 400 13.5px/1.35 var(--sd-font) !important;
  box-shadow: none !important;
}

#newIssueModal input:focus,
#newIssueModal select:focus,
#newIssueModal textarea:focus,
#newIssueModal .form-control:focus {
  border-color: #003d77 !important;
  box-shadow: 0 0 0 3px rgba(47, 95, 196, .12) !important;
}

#newIssueModal .modal-footer {
  padding: 16px 28px !important;
  border-top: 1px solid #eef0f3 !important;
  background: #fafbfc !important;
}

#newIssueModal .btn,
#newIssueModal button {
  border-radius: 9px !important;
  font: 600 13px/1 var(--sd-font) !important;
}

#page-issue-detail {
  background: #fafbfc !important;
}

#page-issue-detail .issue-page-inner,
#page-issue-detail .issue-body,
#page-issue-detail .issue-sidebar {
  background: #fff !important;
}

#page-issue-detail .issue-body {
  padding: 26px 20px !important;
}

#page-issue-detail .issue-sidebar {
  border-left: 1px solid #e7eaee !important;
  border-radius: 0 !important;
}

#page-issue-detail .issue-tabs,
#page-issue-detail .detail-tabs {
  border-bottom: 1px solid #eef0f3 !important;
}

#page-issue-detail .issue-tab,
#page-issue-detail .detail-tab {
  color: #555c66 !important;
  font: 500 13px/1.2 var(--sd-font) !important;
}

#page-issue-detail .issue-tab.active,
#page-issue-detail .detail-tab.active {
  color: #003d77 !important;
  font-weight: 600 !important;
}

/* Issue detail page from final ticket template */
.issues-page {
  min-height: 0 !important;
}

.issues-page .table-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  position: relative !important;
}

#issuesTable thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 150 !important;
}

#issuesTable thead th.sticky-col-left,
#issuesTable thead th.sticky-col-right {
  z-index: 190 !important;
}

#page-issue-detail {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  background: #fafbfc !important;
}

#page-issue-detail .issue-breadcrumb {
  height: 52px !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 28px !important;
  background: #fff !important;
  border-bottom: 1px solid #e7eaee !important;
  color: #8a919c !important;
  font: 400 12.5px/1 var(--sd-font) !important;
}

#page-issue-detail .issue-breadcrumb a {
  color: #8a919c !important;
  cursor: pointer;
}

#page-issue-detail .issue-breadcrumb span:last-child {
  color: #15181d !important;
  font-weight: 500 !important;
}

#page-issue-detail .issue-page-inner {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  overflow: hidden !important;
  background: #fff !important;
}

#page-issue-detail .issue-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 0 !important;
  background: #fff !important;
}

.issue-template-hero {
  padding: 20px 20px 0 !important;
  border-bottom: none !important;
  background: #fff !important;
}

.issue-template-meta {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.issue-num-big {
  /* номер - идентификатор для поиска/ссылки, не главный акцент экрана
     (это тема заявки) - как в OkDesk, приглушаем серым вместо яркого
     синего, чтобы взгляд в первую очередь шёл на тему */
  color: #6b7280 !important;
  font: 500 15px/1.2 var(--sd-mono) !important;
}

.issue-title-big {
  display: block !important;
  margin: 0 !important;
  color: #15181d !important;
  font: 600 22px/1.3 var(--sd-font) !important;
}

.issue-updated-note,
.issue-template-links {
  color: #555c66 !important;
  font: 400 13px/1.4 var(--sd-font) !important;
}

.issue-updated-note {
  color: #a2a9b4 !important;
  font-size: 12px !important;
}

/* строка с клиентом, контактом и машиной шла впритык к теме и читалась
   как её продолжение — отбиваем от заголовка */
.issue-template-links {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-top: 20px !important;
}

.issue-template-links a,
.issue-template-links .entity-link {
  color: #003d77 !important;
  font-weight: 500 !important;
}

.issue-client-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #31b985 !important;
}

.issue-meta-sep,
.issue-muted-inline {
  color: #6b7280 !important;
}

.issue-params-section {
  position: relative;
  padding: 8px 20px 18px !important;
  border-bottom: none !important;
  background: #fff !important;
}

@media (min-width: 701px) {
  .issue-params-section::after {
    content: "";
    position: absolute;
    right: 20px;
    bottom: 0;
    left: 20px;
    height: 1px;
    background: #edf0f4;
  }
}

.issue-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
  color: #6b7280 !important;
  font: 600 11px/1 var(--sd-font) !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

.issue-fields-grid,
.extra-attrs-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px 32px !important;
}

.extra-attrs-grid {
  margin-top: 10px !important;
}

.issue-field label,
.sidebar-field label,
.issue-side-label,
.desc-label {
  display: block !important;
  margin-bottom: 5px !important;
  color: #6b7280 !important;
  font: 400 11.5px/1.25 var(--sd-font) !important;
}

.issue-field .fval,
.sidebar-field .sfval {
  min-height: 20px !important;
  color: #15181d !important;
  font: 500 13px/1.45 var(--sd-font) !important;
}

.issue-empty-value,
.extra-attr-empty {
  color: #a2a9b4 !important;
  font: 400 13px/1.45 var(--sd-font) !important;
}

.fedit,
.issue-desc-edit {
  color: #8595a8 !important;
  cursor: pointer !important;
  margin-left: 6px !important;
  font-size: 12px !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
}

.fedit:hover,
.issue-desc-edit:hover {
  background: #dfeeff !important;
  color: #003d77 !important;
}

/* Описание редактируется тем же паттерном, что дополнительные поля:
   подсвечивается вся строка значения, а карандаш стоит в правой колонке. */
.issue-desc-edit-row {
  position: relative !important;
  width: 100% !important;
  min-height: 28px !important;
}

.issue-desc-edit-surface {
  width: 100% !important;
  max-width: 760px !important;
  min-height: 28px !important;
  margin: -4px 0 !important;
  padding: 4px 40px 4px 6px !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
  transition: background .12s ease, color .12s ease !important;
}

.issue-desc-block-editable .issue-desc-edit-surface {
  cursor: pointer !important;
}

.issue-desc-block-editable .issue-desc-edit-row:not(.is-editing) .issue-desc-edit-surface:hover,
.issue-desc-block-editable .issue-desc-edit-row:not(.is-editing) .issue-desc-edit-surface:focus-visible {
  background: #eaf2fd !important;
  color: #075ba7 !important;
  outline: none !important;
}

.issue-desc-edit-row > .issue-desc-edit {
  position: absolute !important;
  top: -4px !important;
  right: 2px !important;
  margin-left: 0 !important;
}

.issue-desc-edit-row.is-editing .issue-desc-edit-surface {
  max-width: none !important;
  padding: 0 !important;
  cursor: default !important;
}

.issue-desc-edit-row.is-editing .issue-desc-text {
  max-width: none !important;
}

@media (min-width: 861px) {
  .issue-desc-edit-row.is-editing .issue-desc-edit-surface {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

.issue-desc-edit-row.is-editing > .issue-desc-edit {
  display: none !important;
}

.issue-desc-editor {
  width: 100% !important;
}

.issue-desc-editor .issue-desc-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 8px !important;
}

.issue-desc-editor .issue-desc-actions button {
  height: 32px !important;
  min-height: 32px !important;
  box-sizing: border-box !important;
}

@media (min-width: 861px) {
  .issue-desc-editor .issue-desc-actions {
    justify-content: flex-start !important;
  }

  /* Короткое описание сохраняет компактный редактор. Если содержимое
     уже требует внутренней прокрутки, JS добавляет этот класс и форма
     сразу раскрывается примерно на половину доступной высоты окна. */
  .issue-desc-editor.is-long-description .ql-editor {
    min-height: min(48vh, 420px) !important;
    max-height: min(58vh, 520px) !important;
  }
}

.sidebar-field .sfval .fedit,
.issue-field .fval .fedit {
  /* margin-left: auto (не фиксированные 6px из общего .fedit выше) -
     карандаш прижимается к правому краю поля, а не сразу после текста.
     В трёхколоночной сетке параметров (.extra-attrs-grid/.issue-fields-grid
     выше в этом файле) колонки равной ширины, поэтому карандаши всех строк
     одной колонки встают в одну вертикальную линию независимо от длины
     значения - без этого правила они "прижаты" каждый к своему тексту. */
  margin-left: auto !important;
  padding-right: 0 !important;
  flex-shrink: 0 !important;
}

/* В правом меню используем тот же picker, что у «Причины заявки», но
   раскрываем его влево, чтобы список не выходил за границу окна. */
#detail-sidebar-issue-type {
  min-width: 0 !important;
  width: 100% !important;
}

#detail-sidebar-issue-type .attr-picker-popover {
  right: 0 !important;
  left: auto !important;
  width: min(320px, calc(100vw - 32px)) !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

#detail-sidebar-issue-type .attr-picker-popover input {
  box-sizing: border-box !important;
}

.issue-desc-block {
  /* issues.html даёт этому блоку свой margin-top:16px (общий отступ
     между секциями до readability.css) - между двумя белыми карточками
     ("Параметры заявки" и "Описание") на сером фоне страницы
     (#page-issue-detail, #fafbfc) это читалось отдельной серой полосой.
     Обнуляем - секции и так разделены border-bottom у params. */
  margin-top: 0 !important;
  padding: 18px 20px 18px !important;
  background: #fff !important;
  border-bottom: none !important;
}

.issue-desc-text {
  color: #000 !important;
  font: 400 14px/1.6 var(--sd-font) !important;
  /* На широком экране строка тянулась на всю ширину карточки (~1250px) -
     комфортная длина строки для чтения - 70-80 символов, это упирается
     где-то в 760px при этом кегле. Не режет фиксированной шириной сами
     wide-элементы (таблицы/изображения внутри описания), max-width на
     блок текста, не на его содержимое. */
  max-width: 760px !important;
}

/* Описание/комментарии из Bitrix часто приходят HTML-разметкой из его
   WYSIWYG-редактора - каждая строка там оборачивается в свой <p>/<div>,
   и у браузера по умолчанию у <p> есть margin ~1em сверху/снизу. Из-за
   этого между КАЖДОЙ строкой появлялся пробел, даже там, где в тексте
   был один перенос, а не пустая строка - в OkDesk это же место рендерят
   плотно (сбрасывают отступ параграфов). Настоящие пустые строки
   (двойной <br> или пустой <p>) всё равно останутся видны как разрыв -
   этого правило не убирает, оно только гасит паразитный margin у p/div. */
.issue-desc-text p,
.issue-desc-text div,
.comment-text p,
.comment-text div {
  margin: 0 !important;
}

/* Quill's list layout is scoped to .ql-editor in quill.snow.css. A saved
   comment is rendered outside that editor, while the global page reset has
   already removed browser list padding. Restore a compact, readable list
   layout here and use Quill's saved list metadata for both marker types. */
.issue-desc-text ul,
.issue-desc-text ol,
.comment-text ul,
.comment-text ol {
  margin: .45em 0 !important;
  padding-left: 1.65em !important;
}
.issue-desc-text li,
.comment-text li {
  display: list-item;
  margin: .16em 0;
  padding-left: .15em;
}
.issue-desc-text li > .ql-ui,
.comment-text li > .ql-ui {
  display: none;
}
.issue-desc-text li[data-list="bullet"],
.comment-text li[data-list="bullet"] {
  list-style-type: disc;
}
.issue-desc-text li[data-list="ordered"],
.comment-text li[data-list="ordered"] {
  list-style-type: decimal;
}
.issue-desc-text li.ql-indent-1,
.comment-text li.ql-indent-1 { margin-left: 1.5em; }
.issue-desc-text li.ql-indent-2,
.comment-text li.ql-indent-2 { margin-left: 3em; }
.issue-desc-text li.ql-indent-3,
.comment-text li.ql-indent-3 { margin-left: 4.5em; }
.issue-desc-text li.ql-indent-4,
.comment-text li.ql-indent-4 { margin-left: 6em; }

/* Вкладка "Файлы" в карточке заявки - тот же вторичный/faint тон, что
   и остальная карточка (см. .issue-field label и .issue-empty-value
   выше): было #aaa/#8c9eb2 - разнобой с остальной страницей. Имя
   файла чуть крупнее (12px читать мелковато в списке). */
.issue-files-empty {
  color: #a2a9b4 !important;
  font-size: 13px !important;
}

.issue-file-name {
  font-size: 13px !important;
}

.issue-file-meta {
  color: #6b7280 !important;
}

#page-issue-detail .issue-sidebar {
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  border-left: 1px solid #e7eaee !important;
  border-radius: 0 !important;
  background: #fff !important;
  overflow-y: auto !important;
}

.issue-side-section,
.issue-sidebar-section {
  padding: 18px 22px !important;
  border-bottom: 1px solid #eef0f3 !important;
}

/* В десктопной правой панели разделитель должен отделять содержимое, а не
   рисовать сплошную границу от края до края. На мобильной раскладке
   сохраняем прежнее поведение панели. */
@media (min-width: 861px) {
  .issue-side-section,
  .issue-sidebar-section {
    position: relative !important;
    border-bottom: 0 !important;
  }

  .issue-side-section:not(#issue-status-home)::after,
  .issue-sidebar-section::after {
    content: "";
    position: absolute;
    right: 22px;
    bottom: 0;
    left: 22px;
    height: 1px;
    background: #eef0f3;
  }
}

/* Статус - единственный блок вверху сайдбара, без соседей по бокам, поэтому
   и большой отступ снизу, и разделительная линия читались как разрыв между
   ним и остальной карточкой, а не просто следующая секция. */
#issue-status-home {
  padding-bottom: 6px !important;
  border-bottom: 0 !important;
}

.issue-sidebar-status {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 42px !important;
  margin-top: 7px !important;
  margin-bottom: 10px !important;
  padding: 11px 14px !important;
  border-radius: 10px !important;
  font: 600 13px/1.2 var(--sd-font) !important;
}

.issue-stage-select {
  width: 100% !important;
  min-height: 40px !important;
  border: 1px solid #e2e6eb !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #15181d !important;
  padding: 0 12px !important;
  font: 500 13px/1 var(--sd-font) !important;
}

#page-issue-detail .issue-bottom-panel {
  background: #fff !important;
  border-top: none !important;
}

#page-issue-detail .issue-tabs-bar {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  display: flex !important;
  gap: 18px !important;
  min-height: 44px !important;
  padding: 8px 20px 0 !important;
  border-top: none !important;
  border-bottom: 1px solid #eef0f3 !important;
  background: #fff !important;
}

#page-issue-detail .issue-tab {
  display: flex !important;
  align-items: center !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-bottom: 2px solid transparent !important;
  color: #555c66 !important;
  font: 500 13px/1 var(--sd-font) !important;
}

#page-issue-detail .issue-tab.active {
  color: #003d77 !important;
  border-bottom-color: #003d77 !important;
  font-weight: 600 !important;
}

#detail-comments.comments-area {
  padding: 22px 20px !important;
  background: #fff !important;
}

.comments-empty-state {
  width: 100%;
  max-width: 950px;
  min-height: clamp(280px, 42vh, 480px);
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px 44px;
  text-align: center;
  color: #4f5968;
}

.comments-empty-icon {
  width: 76px;
  height: 76px;
  margin-bottom: 20px;
  color: #b7c0d1;
}

.comments-empty-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.comments-empty-title {
  color: #4f5968;
  font: 600 14px/1.4 var(--sd-font);
}

.comments-empty-hint {
  margin-top: 7px;
  color: #6b7280;
  font: 400 13px/1.45 var(--sd-font);
}

@media (max-width: 700px) {
  .comments-empty-state { min-height: 260px; padding: 26px 16px 36px; }
  .comments-empty-icon { width: 64px; height: 64px; margin-bottom: 16px; }
}

.comment-item {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

.comment-ava {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border-radius: 999px !important;
  background: #dfe6f2 !important;
  color: #003d77 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  font: 600 12px/1 var(--sd-font) !important;
}

.comment-ava img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* align-self:flex-start - без него обёртка растягивается на всю высоту
   строки .comment-item (flex-row без явного align-items растягивает детей
   по умолчанию), и капсула-фон .internal ниже превращается в высокий
   прямоугольник во весь рост пузыря комментария вместо аккуратной таблетки
   вокруг аватара с замочком. */
.comment-avatar-wrap {
  width: 46px !important;
  flex: 0 0 46px !important;
  align-self: flex-start !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
  border-radius: 999px !important;
}

.comment-avatar-wrap.internal {
  padding: 4px 4px 6px !important;
  background: #eef1f5 !important;
}

.comment-avatar-wrap.internal .comment-ava {
  flex: 0 0 38px !important;
}

.comment-internal-lock {
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
}

.comment-internal-lock svg {
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Пузырь по содержимому, как в Okdesk: строка «Добавлены файлы» не должна
   растягиваться на всю колонку — длинные строки читать тяжело, а короткие
   в широком пузыре смотрятся пустыми. Предел в 900px держит строку
   комментария в комфортных ~90 знаках. */
.comment-content {
  flex: 1 1 auto !important;
  max-width: 900px !important;
  padding: 12px 16px !important;
  border-radius: 0 12px 12px 12px !important;
  background: #f5f7fa !important;
  border: 0 !important;
}

/* Редактирование использует тот же рабочий редактор, что и создание
   комментария. Не оставляем его внутри ограниченного пузыря готового
   сообщения: в режиме правки ему нужна та же ширина 1350px. */
.comment-item.comment-item-editing .comment-content {
  max-width: 1350px !important;
}

/* дата прижата к правому краю пузыря, между ней и автором — воздух */
.comment-meta {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 40px !important;
  margin-bottom: 7px !important;
}

.comment-author {
  color: #15181d !important;
  font: 600 13px/1.2 var(--sd-font) !important;
}

.comment-date {
  color: #6b7280 !important;
  font: 400 11.5px/1.2 var(--sd-mono) !important;
}

.comment-text {
  color: #000 !important;
  font: 400 14px/1.6 var(--sd-font) !important;
  max-width: 760px !important;
}

.comment-add-row {
  padding: 14px 20px 18px !important;
  border-top: 1px solid #eef0f3 !important;
  background: #fff !important;
}

.comment-input-wrap textarea {
  min-height: 184px !important;
  border: 1px solid #e2e6eb !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  color: #15181d !important;
  font: 400 13.5px/1.45 var(--sd-font) !important;
  resize: vertical !important;
}

/* Кнопка должна упираться в тот же правый край, что и пузыри комментариев
   ниже (.comment-content, max-width:900px внутри .comment-item: аватар
   32px + gap 10px + пузырь). На узких экранах пузырь тянется на всю
   доступную ширину и его край совпадает с краем панели минус padding - там
   любое выравнивание "в край" совпадает случайно. На широких экранах
   пузырь упирается в свои 900px и останавливается, а кнопка с простым
   padding: 20px продолжает уезжать вместе с краем панели - расхождение
   растёт вместе с шириной экрана. Чтобы это не всплывало снова, кнопка
   зеркалит ту же самую раскладку (пустая "аватарка" + gap + колонка
   max-width:900px), а не подбирает px руками под один экран. */
.comments-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 20px 0 !important;
  background: #fff !important;
}

.comments-toolbar-spacer {
  flex: 0 0 40px !important;
  width: 40px !important;
}

.comments-toolbar-content {
  flex: 1 1 auto !important;
  max-width: 900px !important;
  display: flex !important;
  justify-content: flex-end !important;
}


/* id+class бьёт голый .comments-toolbar по специфичности вне зависимости от
   порядка в файле - переключение вкладок (switchDetailTab) ставит
   toolbar.style.display='none' инлайном, а тот проигрывает !important
   выше, поэтому кнопка "Добавить комментарий" оставалась видна и на
   "Файлы"/"Вложенные заявки". */
#comments-toolbar.toolbar-hidden {
  display: none !important;
}

.comment-add-toggle {
  min-height: 32px !important;
  border: 1px solid rgba(47, 95, 196, .18) !important;
  border-radius: 7px !important;
  background: #eef3fc !important;
  color: #003d77 !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  font: 600 13px/1.2 var(--sd-font) !important;
}

.comment-add-toggle:hover {
  border-color: rgba(47, 95, 196, .3) !important;
  background: #e5eefc !important;
}

.comment-add-row-top {
  align-items: flex-start !important;
  padding: 12px 20px 16px !important;
  border-top: 0 !important;
  border-bottom: 1px solid #eef0f3 !important;
}

/* Редактор намеренно шире самих пузырей: в нём набирают длинные рабочие
   комментарии и прикладывают файлы. Левый край по-прежнему совмещён с
   текстом комментариев ниже. */
.comment-add-row-top .comment-input-wrap {
  max-width: 1350px !important;
  margin-left: 42px !important;
}

.comment-add-row-top #comment-submit-btn {
  height: 40px !important;
  margin-top: 0 !important;
  white-space: nowrap !important;
}

.comment-add-row-top .comment-tools {
  align-items: flex-start !important;
}

.comment-composer-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.comment-templates-wrap {
  position: relative !important;
  margin-bottom: 8px !important;
}

.comment-templates-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  border: 1px solid #d5dbe3 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #475569 !important;
  font: 600 12.5px/1.2 var(--sd-font) !important;
  cursor: pointer !important;
}

.comment-templates-btn:hover {
  color: #003d77 !important;
  border-color: #8fb8d8 !important;
  background: #f0f6fb !important;
}

.comment-templates-btn svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

/* max-height на самом дропдауне (а не только на списке) - подстраховка на
   случай коротких вьюпортов: даже если бы список рос сам по себе (при 15+
   шаблонах), дропдаун не должен выезжать на пол-экрана и перекрывать
   форму комментария под собой. */
.comment-templates-dropdown {
  display: none;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  width: 520px !important;
  max-width: calc(100vw - 24px) !important;
  max-height: 520px !important;
  background: #fff !important;
  border: 1px solid #e2e6ec !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 28px rgba(20, 30, 50, .18) !important;
  z-index: 40 !important;
  overflow: hidden !important;
}

.comment-templates-dropdown.open {
  display: flex !important;
  flex-direction: column !important;
}

.comment-template-search {
  padding: 8px !important;
  border-bottom: 1px solid #eef0f3 !important;
}

.comment-template-search input {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid #dde3ea !important;
  border-radius: 7px !important;
  padding: 9px 12px !important;
  font: 500 14px/1.3 var(--sd-font) !important;
  color: #2c3e50 !important;
  outline: none !important;
}

.comment-template-search input:focus {
  border-color: #8fb8d8 !important;
  box-shadow: 0 0 0 2px var(--sd-ring) !important;
}

.comment-template-list {
  flex: 1 1 auto !important;
  min-height: 60px !important;
  max-height: 420px !important;
  overflow-y: auto !important;
  padding: 4px !important;
}

.comment-template-empty {
  padding: 10px 12px !important;
  font: 400 12.5px/1.3 var(--sd-font) !important;
  color: #a2a9b4 !important;
}

.comment-template-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font: 500 13px/1.3 var(--sd-font) !important;
  color: #2c3e50 !important;
}

.comment-template-item:hover { background: #f0f6fb !important; }

.comment-template-item-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
}

.comment-template-item-title {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.comment-template-item-title mark,
.comment-template-item-snippet mark {
  background: #fdeeb0 !important;
  color: inherit !important;
  border-radius: 2px !important;
  padding: 0 1px !important;
}

.comment-template-item-snippet {
  font: 400 12.5px/1.4 var(--sd-font) !important;
  color: #7c8798 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.comment-template-item-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.comment-template-item-edit {
  display: inline-flex !important;
  border: none !important;
  background: none !important;
  color: #a2a9b4 !important;
  cursor: pointer !important;
  padding: 2px !important;
}

.comment-template-item-edit svg { width: 14px !important; height: 14px !important; }

.comment-template-item-edit:hover { color: #003d77 !important; }

.comment-template-item-del {
  flex-shrink: 0 !important;
  border: none !important;
  background: none !important;
  color: #a2a9b4 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 2px !important;
}

.comment-template-item-del:hover { color: #e02424 !important; }

.comment-template-footer {
  border-top: 1px solid #eef0f3 !important;
  padding: 6px !important;
  background: #fafbfc !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.comment-template-save-btn {
  width: 100% !important;
  border: none !important;
  background: none !important;
  color: #003d77 !important;
  font: 600 12.5px/1.3 var(--sd-font) !important;
  text-align: left !important;
  padding: 6px 6px !important;
  cursor: pointer !important;
  border-radius: 6px !important;
}

.comment-template-save-btn:hover { background: #f0f6fb !important; }

.comment-internal-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 8px !important;
  color: #475569 !important;
  font: 600 13px/1.2 var(--sd-font) !important;
  user-select: none !important;
}

.comment-edit-visibility { margin: 8px 0 !important; }

.comment-internal-toggle input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.comment-internal-switch {
  width: 34px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: #dbe2ea !important;
  border: 1px solid #cbd5e1 !important;
  position: relative !important;
  transition: background .16s ease, border-color .16s ease !important;
}

.comment-internal-switch::after {
  content: "" !important;
  position: absolute !important;
  width: 14px !important;
  height: 14px !important;
  left: 2px !important;
  top: 2px !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .18) !important;
  transition: transform .16s ease !important;
}

.comment-internal-toggle input:checked + .comment-internal-switch {
  background: #64748b !important;
  border-color: #64748b !important;
}

.comment-internal-toggle input:checked + .comment-internal-switch::after {
  transform: translateX(14px) !important;
}

.comment-images-under {
  margin-top: 10px !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(92px, 120px)) !important;
  gap: 8px !important;
  max-width: 420px !important;
}

.comment-image-preview {
  display: block !important;
  width: 100% !important;
  height: 88px !important;
  max-height: 88px !important;
  object-fit: cover !important;
  border: 1px solid #e1e6ee !important;
  border-radius: 8px !important;
  background: #fff !important;
}

.issue-images-toggle {
  min-height: 32px !important;
  height: auto !important;
  border: 1px solid rgba(47, 95, 196, .18) !important;
  border-radius: 999px !important;
  background: #eef3fc !important;
  color: #003d77 !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  font: 600 13px/1.2 var(--sd-font) !important;
}

.issue-images-toggle:hover {
  border-color: rgba(47, 95, 196, .3) !important;
  background: #e5eefc !important;
  color: #003d77 !important;
}

.issue-pill-btn,
.issue-desc-actions button,
.comment-add-row-top #comment-submit-btn {
  min-height: 32px !important;
  height: auto !important;
  border: 1px solid rgba(47, 95, 196, .18) !important;
  border-radius: 7px !important;
  background: #eef3fc !important;
  color: #003d77 !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  font: 600 13px/1.2 var(--sd-font) !important;
  white-space: nowrap !important;
}

.issue-pill-btn:hover,
.issue-desc-actions button:hover,
.comment-add-row-top #comment-submit-btn:hover {
  border-color: rgba(47, 95, 196, .3) !important;
  background: #e5eefc !important;
  color: #003d77 !important;
}

/* "Отправить"/"Сохранить"/"Объединить" и т.п. - реальное подтверждающее
   действие формы (submit), а не просто открытие композера - сплошная
   заливка вместо светлой пилюли-фона, чтобы явно выделяться на фоне
   "Отмена" рядом. */
.btn-primary.issue-pill-btn,
.issue-desc-actions button.save,
.comment-add-row-top #comment-submit-btn.btn-primary {
  background: #2f5fc4 !important;
  border-color: #2f5fc4 !important;
  color: #fff !important;
}

.btn-primary.issue-pill-btn:hover,
.issue-desc-actions button.save:hover,
.comment-add-row-top #comment-submit-btn.btn-primary:hover {
  background: #254c9c !important;
  border-color: #254c9c !important;
  color: #fff !important;
}

.issue-pill-btn-secondary,
.issue-desc-actions button:not(.save) {
  background: #fff !important;
  color: #64748b !important;
  border-color: #dbe2ea !important;
}

.issue-pill-btn-secondary:hover,
.issue-desc-actions button:not(.save):hover {
  background: #f5f7fa !important;
  color: #003d77 !important;
  border-color: #cfd8e5 !important;
}

/* Раньше Отправить/Отмена стояли отдельной колонкой справа от textarea -
   теперь это часть одного ряда с "Прикрепить файл" внизу композера,
   кнопки должны идти горизонтально, а не друг под другом. */
.comment-submit-stack {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  margin-left: auto !important;
  gap: 8px !important;
}

#comment-input {
  min-height: 184px !important;
  resize: vertical !important;
  overflow: auto !important;
}

.issue-desc-editor textarea,
#issue_description {
  min-height: 184px !important;
  resize: vertical !important;
}

/* New issue modal: force final form proportions over inline legacy styles */
#newIssueModal .modal {
  width: 960px !important;
  max-width: min(96vw, 960px) !important;
  border-radius: 16px !important;
}

#newIssueModal .modal > div:nth-child(2) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px !important;
}

/* :nth-child(2) в специфичности считается как класс, поэтому это правило
   (а не .new-issue-body из шаблона модалки) реально держит две колонки -
   на мобильном об этом никто не знал, форма с "Тип заявки"/"Ответственный"
   разъезжалась в две колонки поверх друг друга вместо одной. */
@media (max-width: 860px) {
  #newIssueModal .modal > div:nth-child(2) {
    grid-template-columns: 1fr !important;
  }
}

/* .new-issue-column (не .new-issue-primary-group) - раньше все прямые div
   внутри тела модалки были только колонками, теперь среди них есть ещё и
   карточка Тема/Компания, у которой своя, гораздо более узкая раскладка
   padding (см. .new-issue-primary-group) - общий селектор `> div` наезжал
   на неё и раздувал горизонтальный паддинг карточки. */
#newIssueModal .modal > div:nth-child(2) > .new-issue-column {
  padding: 26px 16px !important;
}

#newIssueModal .modal > div:last-child {
  padding: 16px 28px !important;
  border-top: 1px solid #eef0f3 !important;
  background: #fafbfc !important;
}

/* Requested issue card structure tweaks */
#page-issue-detail .issue-page-inner > div:first-child {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
}

#page-issue-detail .issue-body {
  flex: 0 0 auto !important;
  overflow: visible !important;
}

#page-issue-detail .issue-bottom-panel {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 360px !important;
  max-height: none !important;
  overflow: visible !important;
}

#page-issue-detail .comments-area,
#detail-comments.comments-area {
  flex: 0 0 auto !important;
  overflow: visible !important;
  max-height: none !important;
}

#page-issue-detail .issue-bottom-resizer {
  display: none !important;
}

.issue-template-meta {
  gap: 12px !important;
}

.issue-num-big {
  font-size: 21px !important;
  line-height: 1 !important;
}

.issue-title-edit-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

.issue-title-edit-btn,
.issue-title-save,
.issue-title-cancel {
  min-height: 28px !important;
  border: 1px solid #e2e6eb !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #8a919c !important;
  padding: 0 10px !important;
  font: 600 12px/1 var(--sd-font) !important;
  cursor: pointer !important;
}

.issue-title-edit-btn {
  width: 28px !important;
  padding: 0 !important;
  flex: 0 0 28px !important;
  border-color: transparent !important;
  background: transparent !important;
}

.issue-title-edit-btn:hover,
.issue-title-save:hover,
.issue-title-cancel:hover {
  border-color: #c8cfd9 !important;
  color: #003d77 !important;
  background: #f8fafc !important;
}

.issue-title-input {
  flex: 1 1 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 26px !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid #e2e6eb !important;
  border-radius: 6px !important;
  padding: 0 6px !important;
  color: #343b46 !important;
  outline: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.issue-title-input:focus {
  outline: none !important;
  box-shadow: none !important;
}

.issue-template-links {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  /* column-gap совпадает с .extra-attrs-grid/.issue-fields-grid ниже
     (32px) - иначе при одинаковой общей ширине колонки получаются
     разной ширины, и карандаши шапки (компания/контакт/объект) не
     встают в одну вертикальную линию с карандашами параметров под ними. */
  gap: 12px 32px !important;
  align-items: start !important;
}

.issue-entity-chip {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #555c66 !important;
}

.issue-picker-option-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  color: #8a919c !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Иконка компании/контакта/объекта в шапке заявки - синяя (тот же
   акцент, что в сайдбаре), а название рядом - нейтральным текстом
   вместо ссылочного синего: и так понятно, что это ссылка (курсор,
   подчёркивание на hover), не нужно спорить цветом с обычным текстом. */
.issue-entity-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  color: #0e63a3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.issue-entity-icon svg,
.issue-picker-option-icon svg {
  width: 18px !important;
  height: 18px !important;
}

.issue-entity-value {
  position: relative !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

/* Выравнивание карандашей шапки (компания/контакт/объект) в одну
   вертикальную линию с карандашами сетки параметров ниже - только на
   десктопной 3-колоночной раскладке (.issue-template-links переходит в
   1fr ниже 1100px, см. media-запрос ниже в этом файле) - мобильную
   вёрстку сюда не подмешиваем. flex:1 растягивает блок значения на всю
   ширину колонки, иначе margin-left:auto толкать нечего. Место для
   длинного названия есть - переносим на вторую строку (не обрезаем
   многоточием), а карандаш вынесен из текстового потока абсолютным
   позиционированием справа - иначе он как flex-child с margin-left:auto
   сам уезжает на вторую строку вместе с текстом и повисает криво вместо
   фиксированного места у верхнего края поля. min-height:28px обязателен
   (как в мобильном варианте этого же блока ниже) - без него строка
   значения высотой в одну строку текста (~18px) короче самого карандаша
   (28px), и тот, будучи abs-positioned, торчит ниже своей строки и
   обрезается следующей строкой параметров под ним. */
@media (min-width: 1101px) {
  .issue-entity-value {
    flex: 1 1 auto !important;
    padding-right: 22px !important;
    min-height: 28px !important;
  }
  .issue-entity-value .fedit {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    margin-left: 0 !important;
  }
}

/* В мобильной карточке клиент, контакт и объект идут друг под другом.
   Значение может переноситься на несколько строк, но карандаш должен
   оставаться в одной правой колонке, а не ехать вслед за текстом. */
@media (max-width: 860px) {
  body.detail-page-open .issue-entity-chip {
    align-items: flex-start !important;
  }

  body.detail-page-open .issue-entity-value {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 28px !important;
    padding-right: 34px !important;
  }

  body.detail-page-open .issue-entity-value .fedit {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
  }
}

.issue-entity-value.is-editing {
  display: block !important;
  width: auto !important;
}

.issue-inline-entity-editor {
  position: relative;
  width: min(320px, 100%);
}

.issue-inline-entity-search {
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid #e2e6eb;
  border-radius: 6px;
  padding: 0 8px;
  color: #343b46;
  font: 500 13px/1.25 var(--sd-font);
  outline: none !important;
  box-shadow: none !important;
}

.issue-inline-entity-search:focus {
  border-color: #b8c7db !important;
  outline: none;
  box-shadow: none !important;
}

.issue-entity-value .field-client-dot {
  display: none !important;
}

.issue-entity-value .fedit {
  display: inline-flex !important;
  width: 28px !important;
  height: 28px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  color: #8595a8 !important;
}

.issue-entity-value .fedit:hover {
  background: #dfeeff !important;
  color: #003d77 !important;
}

.issue-entity-value .issue-client-link {
  color: #1a2332 !important;
  font-weight: 500 !important;
}

.issue-entity-value .issue-client-link:hover {
  color: #0e63a3 !important;
  text-decoration: underline !important;
}

.issue-client-picker {
  position: relative !important;
  width: min(420px, 100%) !important;
}

.issue-entity-picker-popover {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  width: min(460px, calc(100vw - 360px)) !important;
  max-width: none !important;
  transform: none !important;
}

.issue-inline-entity-editor .issue-entity-picker-popover {
  top: calc(100% + 6px) !important;
  width: 100% !important;
  min-width: 0 !important;
}

.issue-client-picker input,
.object-picker-popover input {
  width: 100% !important;
  min-height: 36px !important;
  border: 1px solid #e2e6eb !important;
  border-radius: 9px !important;
  padding: 8px 11px !important;
  color: #15181d !important;
  font: 400 13px/1.3 var(--sd-font) !important;
}

.issue-client-results,
.object-picker-popover {
  z-index: 5000 !important;
}

.issue-client-results {
  position: static !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  border: 1px solid #e7eaee !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  margin-top: 8px !important;
}

.issue-client-option {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-bottom: 1px solid #f1f3f6 !important;
  background: #fff !important;
  color: #15181d !important;
  padding: 9px 11px !important;
  text-align: left !important;
  font: 400 13px/1.35 var(--sd-font) !important;
}

.issue-client-option:hover,
.object-picker-item:hover {
  background: #f5f7fa !important;
}

.issue-client-empty {
  padding: 12px !important;
  color: #8a919c !important;
  font: 400 13px/1.35 var(--sd-font) !important;
}

.issue-client-actions {
  margin-top: 8px !important;
  display: flex !important;
  gap: 8px !important;
}

.issue-client-actions button {
  min-height: 28px !important;
  border: 1px solid #e2e6eb !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #555c66 !important;
  padding: 0 10px !important;
  font: 600 12px/1 var(--sd-font) !important;
}

.object-picker-popover {
  min-width: 360px !important;
  border: 1px solid #e7eaee !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 12px 28px rgba(21, 24, 29, .12) !important;
  padding: 10px !important;
}

.object-picker-results {
  border-color: #eef0f3 !important;
  border-radius: 8px !important;
}

.object-picker-item {
  padding: 9px 11px !important;
}

.issue-status-picker {
  position: relative !important;
  width: 100% !important;
}

.issue-sidebar-status {
  position: relative !important;
  border: 0 !important;
  min-height: 32px !important;
  border-radius: 7px !important;
  padding: 5px 28px 5px 12px !important;
  justify-content: center !important;
  gap: 0 !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06) !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease !important;
}

.issue-sidebar-status-window {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.issue-sidebar-status-text {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.issue-sidebar-status-window::after {
  content: var(--next-status, "") !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.issue-sidebar-status-window.status-roll .issue-sidebar-status-text {
  animation: issue-status-text-out .32s cubic-bezier(.22, .7, .22, 1) forwards !important;
}

.issue-sidebar-status-window.status-roll::after {
  animation: issue-status-text-in .32s cubic-bezier(.22, .7, .22, 1) forwards !important;
}

@keyframes issue-status-text-out {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-115%); opacity: .2; }
}

@keyframes issue-status-text-in {
  from { transform: translateY(0); opacity: .2; }
  to { transform: translateY(-100%); opacity: 1; }
}

.issue-sidebar-status-chevron {
  position: absolute !important;
  right: 11px !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 5px solid currentColor !important;
  opacity: .86 !important;
  transform: translateY(-42%) !important;
}

.issue-sidebar-status:hover {
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .1), 0 6px 16px rgba(15, 23, 42, .08) !important;
  transform: translateY(-1px) !important;
}

.issue-sidebar-status.rolling {
  animation: issue-status-roll .32s ease-out;
}

@keyframes issue-status-roll {
  0% { transform: translateY(0); opacity: 1; }
  45% { transform: translateY(-2px); opacity: .92; }
  70% { transform: translateY(1px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

.issue-prev-status-block {
  margin-top: 8px !important;
}

.issue-sidebar-status.is-readonly { cursor: default !important; }

.issue-prev-status-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.issue-prev-status-value { min-width: 0; flex: 1; }

.issue-rating-badge {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent !important;
  box-shadow: none;
}

.issue-rating-badge svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.issue-rating-badge.is-great { color: #16803b; }
.issue-rating-badge.is-good { color: #a16207; }
.issue-rating-badge.is-poor { color: #c62828; }

.issue-prev-status-label {
  font-size: 10px !important;
  color: #8c9eb2 !important;
  margin-bottom: 3px !important;
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
}

.issue-sidebar-prev-status {
  position: relative !important;
  width: 50% !important;
  border: 0 !important;
  min-height: 24px !important;
  border-radius: 999px !important;
  padding: 3px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06) !important;
  opacity: .8 !important;
}

.issue-sidebar-prev-status-window {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.issue-sidebar-prev-status-text {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
}

.issue-sidebar-prev-status-window::after {
  content: var(--next-status, "") !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
}

.issue-sidebar-prev-status-window.status-roll .issue-sidebar-prev-status-text {
  animation: issue-status-text-out .32s cubic-bezier(.22, .7, .22, 1) forwards !important;
}

.issue-sidebar-prev-status-window.status-roll::after {
  animation: issue-status-text-in .32s cubic-bezier(.22, .7, .22, 1) forwards !important;
}

.issue-sidebar-prev-status.rolling {
  animation: issue-status-roll .32s ease-out;
}

.issue-stage-popover {
  position: absolute !important;
  z-index: 5100 !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px !important;
  padding: 8px !important;
  border: 1px solid #e7eaee !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 14px 30px rgba(21, 24, 29, .14) !important;
}

.issue-stage-option {
  width: 100% !important;
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 7px !important;
  padding: 7px 12px !important;
  cursor: pointer !important;
  text-align: center !important;
  font: 600 13px/1.2 var(--sd-font) !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .05) !important;
  transition: transform .14s ease, box-shadow .14s ease !important;
}

.issue-stage-option:hover,
.issue-stage-option.active,
.issue-stage-option.selecting {
  transform: translateY(-1px) !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .1), 0 6px 14px rgba(15, 23, 42, .08) !important;
}

.issue-stage-option.issue-stage-option-client-close { background: #16a34a !important; color: #fff !important; }
.issue-stage-option.issue-stage-option-client-reopen { background: #ea580c !important; color: #fff !important; }

.issue-stage-empty {
  padding: 9px 10px !important;
  color: #7b8797 !important;
  font: 500 12px/1.35 var(--sd-font) !important;
  text-align: center !important;
}

.issue-entity-option {
  display: flex !important;
  align-items: flex-start !important;
  gap: 9px !important;
}

.issue-entity-option-text {
  min-width: 0 !important;
  display: block !important;
}

.issue-entity-option-text strong,
.object-picker-item .issue-entity-option-text strong {
  display: block !important;
  color: #15181d !important;
  font: 500 13px/1.3 var(--sd-font) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.issue-entity-option-text span,
.object-picker-item .issue-entity-option-text span {
  display: block !important;
  margin-top: 2px !important;
  color: #8a919c !important;
  font: 400 12px/1.3 var(--sd-font) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 1100px) {
  .issue-template-links {
    grid-template-columns: 1fr !important;
  }
}

/* Карточка заявки на узких экранах.
   Главная беда — макет в две колонки: боковая панель со статусом стоит рядом
   с содержимым и сжимает его настолько, что слова переносятся по буквам.
   На телефоне разворачиваем в одну колонку: сначала заявка, под ней панель. */
@media (max-width: 860px) {
  #page-issue-detail .issue-page-inner {
    flex-direction: column !important;
    overflow: auto !important;
  }
  /* у каждой колонки своя прокрутка — в одноколоночном виде это схлопывает
     высоту, и панель наезжает на заголовок. Отдаём прокрутку странице. */
  #page-issue-detail .issue-page-inner > div:first-child {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }
  #page-issue-detail .issue-sidebar {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    border-left: 0 !important;
    border-top: 1px solid #e7eaee !important;
    overflow: visible !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }
  #page-issue-detail {
    overflow: auto !important;
  }
  #page-issue-detail .issue-body {
    padding: 0 16px 16px !important;
  }
}

/* Дальше — сетка полей внутри карточки.
   Сетка параметров жёстко разложена в три колонки — на телефоне подписи
   и значения переносятся по слогам и сливаются в кашу. Ниже 1000 px даём
   две колонки, ниже 700 — одну, и убираем крупные боковые поля секций. */
@media (max-width: 1000px) {
  .issue-fields-grid,
  .extra-attrs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 18px !important;
  }
  .issue-params-section,
  .issue-desc-block,
  .issue-head-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 700px) {
  .issue-fields-schema,
  .issue-fields-grid,
  .extra-attrs-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .issue-params-section,
  .issue-desc-block,
  .issue-head-section {
    padding: 16px !important;
  }
  /* значение под подписью, а не рядом — иначе длинные названия рвутся */
  .issue-field,
  .extra-attr-item {
    min-width: 0 !important;
  }
  .issue-field label,
  .extra-attr-item label {
    margin-bottom: 3px !important;
  }
}

/* ── Читаемость комментариев ─────────────────────────────────────────
   Раньше карточки сливались: дата почти невидима, роль автора терялась
   рядом с именем, а внутренние комментарии отличались только маленьким
   замочком у аватара. В OkDesk те же элементы читаются с одного взгляда —
   подтягиваем контраст, не меняя саму структуру. */

/* дата: была светло-серой на светлом фоне */
.comment-date {
  color: #6b7684 !important;
  font: 400 11.5px/1.2 var(--sd-mono) !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}

/* роль — компактным бейджем, а не серым текстом впритык к имени */
.comment-role {
  display: inline-block !important;
  margin-left: 7px !important;
  padding: 1px 7px !important;
  border-radius: 4px !important;
  background: #eef2f7 !important;
  color: #64707f !important;
  font: 500 10.5px/1.5 var(--sd-font) !important;
  vertical-align: 1px !important;
}

/* автор и роль слева, дата прижата к правому краю */
.comment-meta {
  align-items: center !important;
  gap: 6px !important;
}
.comment-author-wrap {
  display: inline-flex !important;
  align-items: baseline !important;
  min-width: 0 !important;
}

/* карточки отделяем друг от друга: рамка вместо сплошной заливки */
.comment-content {
  background: #fafbfc !important;
  border: 1px solid #e9edf2 !important;
}

/* внутренний комментарий — тонкая метка слева, без заливки: внутренних
   бывает большинство, и цветной фон превращается в сплошное поле */
.comment-item-internal .comment-content {
  border-left: 3px solid #cfd6e0 !important;
}

/* Client messages need to be recognisable while a technician scans a long
   work feed. Keep the distinction intentionally quiet: the same typography
   and contrast, only a pale blue surface and a thin accent edge. The second
   line carries useful context (company / position) instead of a generic
   "Клиент" badge. Desktop-only by request; mobile retains its current layout. */
@media (min-width: 701px) {
  .comment-item-client .comment-content {
    background: #f4f8ff !important;
    border-color: #dbe8fb !important;
    border-left: 3px solid #b7d1ff !important;
  }

  .comment-item-client .comment-author-wrap {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }

  .comment-item-client .comment-role {
    margin-left: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #62738b !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }
}

/* Номер и тема заявки в одной строке.
   Раньше рядом с номером стояло «обновлена <дата>» — сведения дублировали
   правую панель («Последнее изменение»), а тема висела строкой ниже.
   Теперь наверху сразу видно, о чём заявка. */
.issue-template-meta-title {
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.issue-template-meta-title .issue-title-big {
  margin: 0 !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #343b46 !important;
  min-width: 0 !important;
}

@media (max-width: 700px) {
  .issue-template-meta-title { gap: 8px !important; }
  /* 16px - тот же размер, что у текста описания/комментариев ниже
     (body.detail-page-open .issue-desc-text/.comment-text, 15px, здесь
     чуть крупнее как у заголовка) и у строк компания/контакт/ТС
     (.issue-entity-chip, тоже приведено к 15px) - раньше тема (15.5px),
     шапка (14.5px) и текст (15px) были тремя близкими, но разными
     размерами без причины ("очень много разных размеров на карточке",
     репорт 2026-09-28). */
  .issue-template-meta-title .issue-title-big { font-size: 16px !important; }
}

/* ── Вкладки карточки заявки ─────────────────────────────────────────
   Один в один со вкладками представлений наверху списка («Все заявки»,
   «приемка»…): неактивные на сером, активная белая с синей полосой
   снизу, счётчик у активной — бейджем. */
#page-issue-detail .issue-tabs-bar,
#page-issue-detail .detail-tabs {
  align-items: flex-end !important;
  gap: 6px !important;
  padding: 10px 20px 0 !important;
  background: #fff !important;
  border-bottom: 1px solid #e7eaee !important;
}

#page-issue-detail .issue-tab {
  height: 40px !important;
  min-height: 40px !important;
  top: 1px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  background: #e2e7ee !important;
  color: #555c66 !important;
  box-shadow: none !important;
  font: 500 13px/1.2 var(--sd-font) !important;
}

#page-issue-detail .issue-tab:hover {
  background: #dce2ea !important;
  color: #15181d !important;
}

#page-issue-detail .issue-tab.active {
  background: #fff !important;
  color: #15181d !important;
  border: 1px solid var(--sd-border) !important;
  border-bottom-color: #fff !important;
  box-shadow: 0 -2px 0 #003d77 inset !important;
  font-weight: 600 !important;
}

#page-issue-detail .issue-tab .tab-count {
  margin-left: 4px !important;
  padding: 0 !important;
  background: transparent !important;
  color: #8a919c !important;
  border-radius: 0 !important;
  font: 500 11px/1.2 var(--sd-mono) !important;
}

#page-issue-detail .issue-tab.active .tab-count {
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: #eef3fc !important;
  color: #003d77 !important;
}

/* Список заявок на белом: сероватая подложка съедала контраст строк.
   Полоса вкладок остаётся серой — на ней вкладки и держатся. */
body:has(#page-issues) ,
#page-issues,
#page-issues .main-area {
  background: #fff !important;
}

/* ── Список заявок на телефоне: карточки в духе OkDesk ────────────────
   Монтажники в основном и пользуются мобильной версией. Ориентир —
   карточка мобильного OkDesk: закруглённая белая карточка на сером
   фоне страницы, крупный шрифт, номер контурной таблеткой, разделители
   между смысловыми блоками. Строим чистым CSS через order и flex-wrap
   на существующих <td> — у ячеек уже есть data-col-key, менять разметку
   не пришлось. */
@media (max-width: 820px) {
  #page-issues,
  #page-issues .main-area,
  #page-issues .issues-table-scroll,
  #page-issues .table-wrap { background: #edf0f4 !important; }

  /* Полоса вкладок остаётся белой, а переход к серому фону списка —
     ровным, без размытой тени/градиента снизу. */
  #page-issues > .status-tabs-bar {
    background: #fff !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 5 !important;
  }

  #issuesTable thead { display: none !important; }

  #issuesTable,
  #issuesTable tbody { display: block !important; width: 100% !important; background: transparent !important; }

  /* отступ между полосой вкладок и первой карточкой — раньше карточка
     шла вплотную под вкладками */
  #issuesTable tbody { padding-top: 10px !important; }

  /* любая колонка сверх стандартного набора (например, добавленная
     через настройку столбцов — тег категории, ответственный) без
     явного order уходила первой строкой карточки, выше номера и
     статуса. Ставим её по умолчанию в конец, специфичные order ниже
     по каскаду переопределяют это для тех ключей, что уже размечены. */
  #issuesTable td[data-col-key] {
    order: 9 !important;
    flex: 1 1 100% !important;
    padding-top: 3px !important;
    font-size: 13px !important;
    color: var(--sd-soft) !important;
  }

  #issuesTable tbody tr {
    display: flex !important;
    height: auto !important;
    min-height: 0 !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
    padding: 13px 14px !important;
    border: 0 !important;
    border-radius: 14px !important;
    /* боковые отступы такие же, как нижний зазор между карточками —
     раньше карточка шла во всю ширину экрана без просвета по краям */
    margin: 0 9px 9px !important;
    background: #fff !important;
  }

  /* .issue-spacer-col - десктопный распорок нулевой ширины для sticky-колонок,
     на телефоне он не нужен, но column-gap строки всё равно добавлял 8px
     перед первым видимым элементом (номером) - из-за этого рамка номера не
     совпадала по левому краю с текстом темы/компании и т.д. ниже. */
  #issuesTable .issue-spacer-col {
    display: none !important;
  }

  /* .sticky-col-left/right тянут position:sticky и своё z-index —
     на карточке это лишнее и рвёт нормальный поток */
  #issuesTable td.issue-number-col,
  #issuesTable td.sticky-col-left,
  #issuesTable td.sticky-col-right {
    position: static !important;
    box-shadow: none !important;
    z-index: auto !important;
  }

  /* специфичность как у базового «tbody td, #issuesTable tbody td»
     (id + 2 элемента) — короче она проигрывала и полосы под каждой
     ячейкой не убирались */
  #issuesTable tbody td {
    display: block !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    position: static !important;
  }

  /* номер — контурной таблеткой, как в OkDesk */
  /* та же геометрия, что у бейджа статуса рядом — padding, скругление
     и высота совпадают, отличается только контурная заливка. Скругление
     7px - то же, что у .status-badge и у кнопки "Новая заявка"
     (.btn-new-issue), не полная таблетка (999px было раньше). */
  #issuesTable td.issue-number-col {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-start !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    height: 28px !important;
    padding: 0 10px !important;
    border: 1px solid #16215c !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: #2c2f34 !important;
  }

  /* Шеврон вложенных заявок должен быть ВНУТРИ таблетки-номера (не снаружи
     и не абсолютным перекрытием у края - left:-15px из десктопного
     правила). На телефоне возвращаем его в обычный поток - таблетка сама
     расширяется, чтобы вместить и шеврон, и номер, оба остаются внутри
     рамки, пара (шеврон+номер) центрируется как единое целое. */
  #issuesTable td.issue-number-col .issue-tree-toggle {
    position: static !important;
    margin-right: 2px !important;
    /* top:50%/translateY(-50%) из десктопного правила были рассчитаны под
       абсолютное позиционирование - в обычном потоке transform всё равно
       применяется и тянет шеврон вверх мимо центровки флекса. Сбрасываем. */
    top: auto !important;
    transform: none !important;
  }

  #issuesTable td.issue-number-col .issue-number-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* галочка "прочитано клиентом" в мобильной таблетке номера - лишний
     шум, из-за неё номер визуально уезжал от центра таблетки (сам номер
     и так центрируется через justify-content выше, мешал только значок) */
  #issuesTable td.issue-number-col .issue-client-receipt {
    display: none !important;
  }

  #issuesTable td.issue-status-col {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    height: 28px !important;
    margin-left: auto !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  #issuesTable td.issue-status-col .status-badge {
    box-sizing: border-box !important;
    max-width: none !important;
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  #issuesTable td[data-col-key="title"] {
    order: 3 !important;
    flex: 1 1 100% !important;
    padding-top: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: #15181d !important;
  }

  /* Фиксированный набор полей карточки (см. MOBILE_ISSUE_CARD_COLUMN_KEYS
     в issues.html - не зависит от настроек колонок таблицы на десктопе):
     тема → компания → объект → ответственный → дата изменения → причина
     заявки. Одна тонкая линия перед всем блоком метаданных, а не перед
     каждым полем — компактнее и меньше визуального шума. */
  #issuesTable td[data-col-key="client"] {
    order: 4 !important;
    flex: 1 1 100% !important;
    padding-top: 8px !important;
    margin-top: 1px !important;
    border-top: 1px solid var(--sd-border-soft) !important;
    font-size: 13px !important;
    color: #15181d !important;
  }

  #issuesTable td[data-col-key="object"] {
    order: 5 !important;
    flex: 1 1 100% !important;
    padding-top: 3px !important;
    font-size: 13px !important;
    color: #15181d !important;
  }

  #issuesTable td[data-col-key="assignee"] {
    order: 6 !important;
    flex: 1 1 100% !important;
    padding-top: 3px !important;
    font-size: 13px !important;
    color: #15181d !important;
  }

  #issuesTable td[data-col-key="updated"] {
    order: 10 !important;
    flex: 1 1 100% !important;
    margin-left: 0 !important;
    align-self: auto !important;
    padding-top: 3px !important;
    font-size: 12px !important;
    color: #15181d !important;
  }

  #issuesTable td[data-col-key="updated"]::before {
    content: "Дата обновления: ";
    color: #15181d !important;
  }

  #issuesTable td[data-col-key="extra:ufCrm11PReason"] {
    order: 8 !important;
    flex: 1 1 100% !important;
    padding-top: 3px !important;
    font-size: 13px !important;
    color: #15181d !important;
  }

  #issuesTable td[data-col-key="resolved_at"],
  #issuesTable td[data-col-key="created"],
  #issuesTable td[data-col-key="contact"] { display: none !important; }

  .issues-table-wrap,
  .table-wrap,
  .table-container { min-width: 0 !important; overflow-x: hidden !important; }

  /* постраничная навигация ("1-12 из 12", выбор на странице, ‹ ›) -
     на телефоне вместо неё бесконечная подгрузка по 15 карточек при
     докрутке до конца (см. maybeLoadMoreIssuesMobile в issues.html) */
  #page-issues .issues-pagination-bar { display: none !important; }

  .issues-mobile-loadmore {
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 0 24px;
    color: #8a919c;
    font-size: 12.5px;
  }
}

/* ── Мобильный/PWA: настоящий скролл страницы ─────────────────────────
   На десктопе вёрстка "прибита" на весь экран (body height:100vh,
   overflow:hidden), скроллится только внутренний .issues-table-scroll -
   поэтому браузер на телефоне никогда не видит скролл document/body и не
   прячет свою адресную строку при прокрутке вниз, как на обычных сайтах.
   На мобильном отдаём скролл наружу, странице целиком; topbar остаётся
   прилипшим сверху (position: sticky), чтобы поиск/кнопка "Новая заявка"
   не терялись при скролле. */
@media (max-width: 820px) {
  html, body { height: auto !important; min-height: 100vh !important; overflow-x: hidden !important; overflow-y: auto !important; }
  /* На телефоне один владелец вертикальной прокрутки - документ. Если
     оставить overflow:auto на вложенных flex-контейнерах, Chrome Android
     прокручивает список внутри них и не сворачивает верхнюю адресную строку.
     Карточки списка не требуют горизонтальной прокрутки, поэтому полностью
     отпускаем эти контейнеры в поток документа. */
  body.mobile-document-scroll:not(.detail-page-open) .main-area,
  body.mobile-document-scroll:not(.detail-page-open) .content,
  body.mobile-document-scroll:not(.detail-page-open) .issues-page,
  body.mobile-document-scroll:not(.detail-page-open) .tab-panel.active,
  body.mobile-document-scroll:not(.detail-page-open) .issues-table-scroll,
  body.mobile-document-scroll:not(.detail-page-open) .table-wrap {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* У списочных экранов вертикальный жест всегда принадлежит document.
     Иначе общий desktop-паттерн overscroll-behavior:contain оставляет
     жест внутри таблицы без собственного вертикального диапазона, что
     особенно заметно в Chrome Android. */
  body.mobile-document-scroll:not(.detail-page-open) .issues-table-scroll,
  body.mobile-document-scroll:not(.detail-page-open) .table-wrap {
    flex: none !important;
    touch-action: auto !important;
    overscroll-behavior: auto !important;
  }
  #page-issues #issuesTable { width: 100% !important; min-width: 0 !important; }
  /* position:sticky не работает здесь - .main-area/.content нужен
     overflow-x:hidden (иначе таблица 541px тянет body шире экрана, см.
     комментарий выше), а это делает их "ближайшим скролл-предком" для
     sticky вместо body, который в них никогда сам не скроллится (высота
     auto) - шапка просто улетает вместе со страницей. position:fixed не
     зависит от overflow предков, работает от viewport напрямую. */
  .topbar { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 50 !important; }
  /* реальная высота .topbar на мобильном - 90px (лого+кнопка в одну
     строку, поиск отдельной строкой ниже), не 56px как на десктопе */
  /* min-width:0 - .main-area как flex-элемент (ребёнок body) по умолчанию
     не может сжаться уже своего содержимого (min-width:auto = min-content
     самого широкого непереносимого фрагмента где-то в глубине дерева) -
     сама коробка .main-area растягивалась шире экрана (например, 445px
     на экране 360px), а body.overflow-x:hidden просто ОБРЕЗАЛ лишнее
     справа, а не исправлял раскладку - отсюда "обрезанный"/наложенный
     статус-бейдж у карточки заявки (margin-left:auto толкает его к
     правому краю строки, а сама строка уже была шире экрана). Живой
     репорт 2026-09-28, скриншоты списка заявок на телефоне. */
  .main-area { padding-top: 90px !important; min-width: 0 !important; }
}

/* ── Статус заявки в шапке на телефоне ────────────────────────────────
   Раскладка как в мобильном Okdesk: первой строкой номер и статус
   (статус прижат вправо), тема — отдельной строкой под ними. Сам
   перенос узла делает JS: статус живёт в боковой панели, а шапка —
   другой контейнер. */
@media (max-width: 860px) {
  .issue-template-meta-title {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    /* Было 8px - тема заявки визуально "прилипала" к строке номер/статус
       над ней (8px), а ниже до карточки компании/контакта/ТС оставалось
       вдвое больше воздуха (margin-top:20px у .issue-template-links,
       общее правило, не мобильное) - несимметрично, тема казалась
       задвинутой вверх. Выравниваем оба зазора примерно поровну. */
    row-gap: 14px !important;
  }

  /* Контейнер статуса тянулся до правого края, а кнопка внутри стояла
     слева — между ней и краем зияло больше сотни пикселей. Прижимаем
     содержимое к правому краю. */
  .issue-template-meta-title #issue-status-picker {
    order: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    flex: 0 1 auto !important;
    margin-left: auto !important;
    max-width: 62% !important;
    height: 28px !important;
  }

  /* тема следующей строкой; место под карандаш оставляем в той же
     строке, иначе он уезжает третьей строкой сам по себе */
  .issue-template-meta-title .issue-title-big {
    order: 2 !important;
    flex: 1 1 calc(100% - 46px) !important;  /* 30px под карандаш + 12px gap */
    min-width: 0 !important;
  }

  .issue-template-meta-title .issue-title-edit-btn {
    order: 3 !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
  }

  .issue-template-meta-title .issue-sidebar-status {
    width: auto !important;
    max-width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 7px !important;
    /* Было 12px - на 1px мельче номера рядом (.issue-num-big, тоже 28px
       высотой, тот же padding), хотя статус визуально главнее (цветная
       заливка + стрелка). Сводим к 13px, как у номера. */
    font-size: 13px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  /* оставляем место под стрелку, иначе она ложится поверх текста */
  .issue-template-meta-title .issue-sidebar-status {
    padding-right: 24px !important;
  }

  .issue-template-meta-title .issue-sidebar-status-text {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* см. комментарий у row-gap выше - симметричный зазор под темой */
  .issue-template-links { margin-top: 14px !important; }
}

/* ── Шапка списка заявок на телефоне ──────────────────────────────────
   Было два поля поиска подряд: общий по порталу в самом верху и фильтр
   списка ниже. На узком экране это половина первого экрана ради
   дублирующих друг друга полей — оставляем то, что ищет по видимому
   списку. Кнопка настроек фильтрации сжимается до значка: подпись
   съедала строку целиком, а с телефона фильтрами пользуются редко. */
.mobile-search-toggle {
  display: none;
}
.mobile-global-search-backdrop { display: none; }

@media (max-width: 860px) {
  /* Общая шапка (_topbar.html) с 4.5.0 добавила сквозной поиск по порталу
     и всегда показывает его отдельной строкой на телефоне (order:3,
     flex-basis:100%). На всех этих страницах он дублирует уже
     существующий поиск в контенте (списка/фильтра/по госномеру) и
     скрыт: на Заявках/Путевых/Диагностике - явно ниже; на Компаниях/
     Объектах/Оборудовании/Сотрудниках - тоже скрыт, но своим правилом
     в table_tools.css (.topbar-search{display:none!important}), из-за
     чего эти 4 страницы независимо словили тот же баг с "пустой серой
     полосой" (см. следующее правило) - .main-area был подогнан под
     90px (расчёт на видимый двухстрочный поиск), а реальная шапка там
     теперь однострочная 56px. Прячем/поправляем через
     #page-issues/#page-routes/#page-diagnostics/#page-clients/
     #page-objects/#page-equipment/#page-employees/#page-reports, а не в
     самом _topbar.html — общий шаблон общий для всех страниц. */
  body:has(#page-issues) .topbar-search,
  body:has(#page-routes) .topbar-search,
  body:has(#page-diagnostics) .topbar-search,
  body:has(#page-reports) .topbar-search {
    display: none !important;
  }

  /* На списке заявок (и теперь на отчётах) лупа в правом углу открывает
     общий поиск по порталу, а не локальную фильтрацию текущей таблицы.
     Поле остаётся тем же самым #global-search-input и использует
     существующий обработчик Enter. */
  body.mobile-global-search-open:has(#page-issues) .topbar-search,
  body.mobile-global-search-open:has(#page-reports) .topbar-search {
    position: fixed !important;
    top: 62px;
    left: 10px;
    right: 10px;
    z-index: 40;
    display: flex !important;
    max-width: none !important;
    height: 40px;
    box-sizing: border-box;
    padding: 0 12px !important;
    border: 1px solid #d6dfeb !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 5px 12px rgba(16, 24, 40, .10);
  }
  body.mobile-global-search-open:has(#page-issues) .topbar-search-input,
  body.mobile-global-search-open:has(#page-reports) .topbar-search-input {
    font-size: 14px !important;
  }

  /* topbar-search скрыт, но с margin-left:auto лупа-поиск (36px) впритык
     не помещалась в оставшееся место первой строки (не хватало buквально
     нескольких px из-за округления ширин) и переносилась на отдельную
     строку flex-wrap - именно та "пустая полоса" под шапкой на скрине. */
  body:has(#page-issues) .topbar,
  body:has(#page-routes) .topbar,
  body:has(#page-diagnostics) .topbar,
  body:has(#page-reports) .topbar {
    flex-wrap: nowrap !important;
    height: 56px !important;
    min-height: 56px !important;
    /* padding-bottom:8px из общего мобильного правила (запас под перенос
       второй строки) тут не нужен - шапка однострочная (nowrap выше), а
       этот отступ снизу без пары сверху сдвигал кебаб/лупу визуально
       выше центра 56px шапки. */
    padding-bottom: 0 !important;
  }

  /* .main-area padding-top подогнан под 90px (обычная двухстрочная шапка
     с поиском) в общем мобильном блоке выше - здесь шапка снова 56px
     (однострочная), отступ нужно вернуть под неё же. */
  body:has(#page-issues) .main-area,
  body:has(#page-routes) .main-area,
  body:has(#page-diagnostics) .main-area,
  body:has(#page-clients) .main-area,
  body:has(#page-objects) .main-area,
  body:has(#page-equipment) .main-area,
  body:has(#page-employees) .main-area,
  body:has(#page-reports) .main-area {
    padding-top: 56px !important;
  }

  /* кнопки шапки были разной высоты (34/38/32/36px) — align-items:center
     центрировал каждую по своему боксу, визуально это давало разный
     уровень. Приводим всё к одной высоте. */
  .topbar {
    align-items: center !important;
    gap: 8px !important;
    padding: 0 10px !important;
    background: #fff !important;
  }

  .sd-drawer-toggle.sd-in-topbar,
  .btn-new-issue,
  .mobile-search-toggle {
    height: 36px !important;
    min-height: 36px !important;
  }

  .topbar > img {
    height: 34px !important;
    width: auto !important;
  }

  /* вкладки статусов («Все заявки»/«планирование»/...) выглядели единой
     полосой, прилипающей прямо к первой карточке списка — плоские верхние
     углы и нулевой отступ снизу сливались с карточкой. На телефоне делаем
     их отдельными пилюлями: скругление со всех сторон, тень, зазор. */
  .status-tabs-bar,
  .client-tabs-bar {
    padding-left: 9px !important;
    padding-bottom: 10px !important;
    gap: 8px !important;
  }

  /* #page-issues > .status-tabs-bar ниже по каскаду
     задаёт padding-left: 28px !important той же специфичности, но идёт
     позже по файлу - при равной специфичности выигрывает более поздний,
     поэтому это правило "проигрывало" несмотря на !important. Дублируем
     класс в селекторе - специфичность выше, побеждает независимо от
     порядка. Значение подогнано под левый край кебаба (10px). */
  #page-issues > .status-tabs-bar.status-tabs-bar,
  #page-routes > .status-tabs-bar.status-tabs-bar {
    padding-left: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Путевые листы используют тот же .status-tab (viewsBar общего
     table_tools.js), но без этого мобильного переопределения оставались
     в десктопной форме - плоский низ, выше, крупнее, без тени - визуально
     "не то" рядом с пилюлями заявок (репорт 2026-09-29). */
  #page-issues .status-tab,
  #page-routes .status-tab {
    height: 36px !important;
    min-height: 36px !important;
    padding: 7px 12px !important;
    top: 0 !important;
    border-radius: 9px !important;
    font-size: 12.5px !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08) !important;
  }

  #page-issues .status-tab.active,
  #page-routes .status-tab.active {
    border-color: var(--sd-primary) !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 0 0 1.5px var(--sd-primary) inset !important;
  }

  .client-tab {
    top: 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08) !important;
  }

  .status-tab.active,
  .client-tab.active {
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 0 0 1.5px var(--sd-primary) inset !important;
  }

  /* Драг-хендл для перетаскивания вкладок - десктопная фича (наведение
     мышью), на телефоне только мешал бы: прячем и его, и саму возможность
     перетаскивания не трогаем (HTML5 DnD и так не работает по тапу). */
  .status-tab .tab-drag-handle,
  .view-tab .tab-drag-handle {
    display: none !important;
  }

  /* полоса поиска/фильтров занимала целую строку и была видна всегда —
     на телефоне заявками фильтруют редко, прячем её за значком-лупой
     в шапке, открывается по тапу (toggleMobileIssueSearch). */
  .mobile-search-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--sd-primary) !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    transition: transform .12s ease, background-color .12s ease !important;
  }

  .mobile-search-toggle svg {
    width: 20px !important;
    height: 20px !important;
  }

  .mobile-search-toggle:active {
    transform: scale(.94) !important;
    background: var(--sd-primary-soft, #eaf0fc) !important;
  }

  #page-issues.mobile-search-open .mobile-search-toggle {
    background: var(--sd-primary-soft, #eaf0fc) !important;
    border-color: var(--sd-primary) !important;
  }
  body.mobile-global-search-open:has(#page-issues) .mobile-search-toggle,
  body.mobile-global-search-open:has(#page-reports) .mobile-search-toggle {
    position: relative;
    z-index: 41;
  }
  body.mobile-global-search-open:has(#page-issues) .mobile-search-toggle svg,
  body.mobile-global-search-open:has(#page-reports) .mobile-search-toggle svg {
    display: none;
  }
  body.mobile-global-search-open:has(#page-issues) #page-issues,
  body.mobile-global-search-open:has(#page-reports) #page-reports {
    margin-top: 52px !important;
  }
  body.mobile-global-search-open:has(#page-issues) .mobile-global-search-backdrop,
  body.mobile-global-search-open:has(#page-reports) .mobile-global-search-backdrop {
    position: fixed;
    inset: 56px 0 0;
    z-index: 35;
    display: block;
    border: 0;
    background: rgba(18, 29, 45, .22);
    cursor: default;
  }

  #page-issues .filter-bar {
    display: none !important;
  }

  #page-issues.mobile-search-open .filter-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    z-index: 30 !important;
    box-shadow: 0 4px 10px rgba(16, 24, 40, .1) !important;
  }

  /* по тапу на лупу нужен только поиск во всю ширину — настройка
     фильтров на телефоне лишняя в этом сценарии */
  #page-issues.mobile-search-open #filterSettingsToggle,
  #page-issues.mobile-search-open .filter-clear-all {
    display: none !important;
  }

  #page-issues.mobile-search-open .filter-search {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* подпись убираем размером шрифта: это текстовый узел внутри кнопки,
     отдельным селектором его не спрятать. Значок (+ / −) возвращаем */
  #page-issues #filterSettingsToggle {
    flex: 0 0 auto !important;
    width: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    font-size: 0 !important;
    justify-content: center !important;
  }

  #page-issues #filterSettingsIcon {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  /* сброс значений нужен, только когда фильтр реально выставлен —
     класс has-value ставит updateActiveFiltersCount() */
  #page-issues .filter-clear-all:not(.has-value) { display: none !important; }

  #page-issues .filter-clear-all {
    flex: 0 0 auto !important;
    width: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
  }

  #page-issues .filter-search {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* номер упирался в дату — колонка узкая, просвета не оставалось;
     только у th (шапка таблицы) — у td это теперь центрированная
     пилюля мобильной карточки, ей нужен симметричный padding */
  #issuesTable th.issue-number-col { padding-right: 10px !important; }
}

/* Кнопка «Новая заявка» на телефоне: рядом с ней теперь стоит поиск,
   и в полную ширину она его вытесняла. Уменьшаем — правило живёт здесь,
   потому что базовое min-height: 36px задано в этом же файле выше и
   перебивает объявления из шаблона. */
@media (max-width: 860px) {
  .btn-new-issue {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
    border-radius: 7px !important;
  }

  .btn-new-issue svg { width: 12px !important; height: 12px !important; }
}

/* ── Шапка открытой заявки на телефоне ────────────────────────────────
   В карточке «Новая заявка» и поиск по списку не нужны — они относятся
   к списку, а места на узком экране занимают всю строку. Оставляем то
   же, что и в мобильном Okdesk: крупную кнопку возврата слева. */
@media (max-width: 860px) {
  body.detail-page-open .btn-new-issue,
  body.detail-page-open .mobile-search-toggle,
  body.detail-page-open .topbar .filter-search,
  body.detail-page-open .topbar-search { display: none !important; }

  /* Карточка заявки использует отдельную мобильную навигацию: «Назад»
     слева и местоположение справа. Скрываем не только колокольчик, но и
     его пустой контейнер вместе с логотипом и профилем, иначе flex-слоты
     остаются в строке и иконка не доходит до правого края. */
  body.detail-page-open .topbar-logo-link,
  body.detail-page-open .topbar-actions,
  body.detail-page-open .topbar-user { display: none !important; }

  /* логотип здесь лишний — «Назад» уже даёт ориентацию, а место сверху
     ценнее контента */
  body.detail-page-open .topbar > img { display: none !important; }

  /* кнопка меню (гамбургер) в карточке заявки не нужна — «Назад» уже
     даёт выход, а бургер только съедает место в шапке */
  body.detail-page-open .sd-drawer-toggle.sd-in-topbar { display: none !important; }

  /* Bitrix ID под номером — служебная информация, на телефоне лишняя */
  body.detail-page-open .issue-bitrix-id-line { display: none !important; }

  /* Номер — нейтральный идентификатор: только контур, без фоновой плашки.
     Цветная заливка остаётся исключительно у статуса. */
  body.detail-page-open .issue-num-big {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    min-height: 28px !important;
    min-width: 75px !important;
    padding: 0 10px !important;
    border: 1px solid #16215c !important;
    border-radius: 7px !important;
    background: transparent !important;
    font-size: 13px !important;
    font-family: var(--sd-font) !important;
    font-variant-numeric: tabular-nums !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: #2c2f34 !important;
    box-sizing: border-box !important;
  }

  /* Галочка "прочитано клиентом" рядом с номером - служебная отметка,
     на телефоне в пилюле номера просто лишний значок. */
  body.detail-page-open .issue-num-big .issue-client-receipt { display: none !important; }

  /* "Вложенные заявки" на вебе всегда видна (независимо от того, есть ли
     вложенные), но на телефоне и так тесно в ряду вкладок - убираем её
     там целиком, вложенные заявки - редкий кейс, которым с телефона почти
     не пользуются. */
  /* На мобильной вкладка нужна только когда у заявки реально есть
     вложенные (класс has-children ставится в openIssueDetail) - иначе
     занимала место среди вкладок ради пустого «Вложенные заявки (0)». */
  #page-issue-detail #nestedTabBtn:not(.has-children) { display: none !important; }

  /* "Файлы" по той же логике, что и «Вложенные заявки» выше - скрываем
     на мобильной только если файлов реально нет (класс has-files ставится
     в loadIssueFiles), а не всегда. */
  #page-issue-detail #filesTabBtn:not(.has-files) { display: none !important; }

  /* Строку крошек убираем целиком: кнопку возврата в шапку ставит JS.
     Селектор с id — иначе правило #page-issue-detail .issue-breadcrumb
     выше по файлу оказывается специфичнее и оставляет строку видимой. */
  body.detail-page-open #page-issue-detail .issue-breadcrumb,
  body.detail-page-open #page-object-detail .issue-breadcrumb {
    display: none !important;
  }

  /* боковые отступы карточки: 32px внутри + 16px снаружи съедали на
     телефоне четверть ширины, из-за чего текст жался в узкую колонку */
  body.detail-page-open .issue-body { padding-left: 8px !important; padding-right: 8px !important; }
  /* верх карточки: между шапкой и номером было 43px пустоты — на экране
     телефона это половина первого экрана ни за что */
  body.detail-page-open .issue-template-hero {
    padding: 13px 14px 12px !important;
  }

  body.detail-page-open .issue-body { padding-top: 0 !important; }

  /* статус прижат к правому краю карточки, вровень с номером */
  body.detail-page-open .issue-template-meta-title { margin-top: 0 !important; }
  body.detail-page-open .issue-params-section,
  body.detail-page-open .issue-desc-block { padding-left: 12px !important; padding-right: 12px !important; }

  /* текст описания и комментариев крупнее и с большей высотой строки -
     референс из мобильного OkDesk, читается заметно легче на телефоне */
  body.detail-page-open .issue-desc-text,
  body.detail-page-open .comment-text {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* запись "Смена статуса" в ленте комментариев - на узком экране всё
     в одну строку без переноса не помещалось, дата вылезала за карточку.
     Сама структура (2 строки: статусы / автор+дата) теперь задаётся в
     issues.html, здесь только убираем desktop-отступ и ограничение ширины. */
  body.detail-page-open .comment-status-event {
    margin-left: 0 !important;
    max-width: 100% !important;
  }

  /* Дата из шапки карточки комментария - в правый нижний угол, под текстом
     (как в мессенджерах), а не рядом с именем автора - шапка компактнее,
     не нужно резервировать место под дату в первой строке. Оригинальный
     .comment-date в шапке прячем, дублируем текст через data-date/::after
     (а не переносим сам элемент по DOM) - тот же HTML остаётся общим с
     десктопом, где дата по-прежнему в шапке. */
  body.detail-page-open .comment-item .comment-meta .comment-date {
    display: none !important;
  }

  body.detail-page-open .comment-item .comment-meta {
    gap: 8px !important;
  }

  body.detail-page-open .comment-content::after {
    content: attr(data-date);
    display: block;
    text-align: right;
    font-size: 10.5px;
    color: #aaa;
    margin-top: 4px;
  }

  /* Компания/контакт/ТС - метаданные заявки, а не текст для чтения (как
     описание/комментарии), поэтому специально на пункт мельче их (14px):
     14.5→15px (правка 2026-09-28) на глаз спорил по весу с описанием -
     строки метаданных не должны быть настолько же крупными, как текст,
     который реально читают. Иерархия: тема 16px → описание/комментарии
     15px → метаданные 14px. */
  body.detail-page-open .issue-entity-chip {
    font-size: 14px !important;
    line-height: 1.4 !important;
    /* Раньше align-items:center (унаследовано из базового правила) центрировал
       иконку по высоте ВСЕГО блока - если название компании/контакта
       переносилось на 2 строки, иконка "уплывала" выше первой строки текста.
       flex-start + небольшой отступ подгоняет её под центр именно первой
       строки, независимо от того, сколько строк занимает текст. */
    align-items: flex-start !important;
  }

  body.detail-page-open .issue-entity-chip .issue-entity-icon {
    margin-top: 2px !important;
  }

  /* серый фон страницы + разделы отдельными белыми карточками - как в
     мобильном OkDesk и как уже сделано в самом списке заявок. Раньше
     шапка/описание/комментарии были одним сплошным белым полотном без
     заметных границ между ними - всё сливалось. */
  body.detail-page-open #page-issue-detail .issue-page-inner {
    background: #e3e8ef !important;
  }

  body.detail-page-open #page-issue-detail .issue-body {
    background: transparent !important;
    padding: 9px 9px 0 !important;
  }

  body.detail-page-open .issue-template-hero {
    border-radius: 14px !important;
    border-bottom: 0 !important;
    margin-bottom: 9px !important;
  }

  body.detail-page-open .issue-desc-block {
    border-radius: 14px !important;
    border-bottom: 0 !important;
  }

  body.detail-page-open #page-issue-detail .issue-bottom-panel {
    border-top: 0 !important;
    border-radius: 14px !important;
    margin: 9px !important;
    width: auto !important;
  }

  body.detail-page-open #page-issue-detail .issue-tabs-bar {
    border-radius: 14px 14px 0 0 !important;
  }

  /* Как в iOS: навигация — обычная синяя ссылка с шевроном, а не кнопка
     в контейнере. Главные действия по-прежнему выделяются плашками. */
  .topbar-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 0 !important;
    height: 44px !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #003d77 !important;
    font: 400 16px/1 var(--sd-font) !important;
    cursor: pointer !important;
  }

  .topbar-back-btn svg { width: 11px !important; height: 18px !important; }
  .topbar-back-btn:active { opacity: .55; }

  .topbar-location-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 44px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #003d77 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }

  .topbar-location-btn svg { width: 22px !important; height: 22px !important; }
  .topbar-location-btn:active { opacity: .55; }

  .topbar-kebab-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 44px !important;
    margin-left: 0 !important;
    margin-right: 4px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #003d77 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }
  .topbar-location-btn + .topbar-kebab-btn { margin-left: 0 !important; }
  .topbar-kebab-btn svg { width: 20px !important; height: 20px !important; }
  .topbar-kebab-btn:active { opacity: .55; }

  /* Шапка модалки - только «← Назад» (тем же классом .topbar-back-btn, что
     и в основной карточке заявки), без отдельного заголовка/крестика. */
  .location-modal-head {
    display: flex; align-items: center;
    padding: 8px 8px 4px;
    flex-shrink: 0;
  }
  .location-modal-head .location-modal-close {
    display: inline-flex !important;
  }

  /* На мобильной детальной странице (заявка/объект) «Назад» уже покрывает
     навигацию - логотип рядом с ним просто лишний балласт, а красиво
     центрировать его там всё равно негде (слева уже текст «Назад»). На
     списках и на вебе логотип остаётся как есть. */
  body.detail-page-open .topbar-logo-link { display: none !important; }


  /* содержимое комментариев не должно распирать страницу: внутри
     попадаются вставленные таблицы шириной под десктоп */
  .comment-content { max-width: 100% !important; }

  .comment-text table {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  .comment-text img,
  .comment-text pre { max-width: 100% !important; }

  /* На телефоне полоса вкладок (Все заявки/планирование/выезд...) сливалась
     со списком заявок под ней — обе на одном светлом фоне, границы не было
     вообще (.status-tabs-bar задаёт border-bottom: 0 глобально). */
  .status-tabs-bar {
    border-bottom: 1px solid #e2e6ec !important;
  }

}

/* ── Результаты общего поиска на телефоне ──────────────────────────────
   У страницы /search есть таблицы с широкими десктопными колонками. Без
   явного min-width:0 flex-контейнер растягивался до их минимальной ширины
   (762px на экране 390px), и мобильный браузер показывал обрезанный
   десктоп. Ограничиваем корень страницы и её вкладки шириной экрана. */
@media (max-width: 860px) {
  #page-search-results {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  body:has(#page-search-results) .topbar-search {
    display: none !important;
  }
  body:has(#page-search-results) .topbar {
    flex-wrap: nowrap !important;
    height: 56px !important;
    min-height: 56px !important;
    padding-bottom: 0 !important;
  }
  body:has(#page-search-results) .main-area {
    padding-top: 56px !important;
  }
  #page-search-results .content {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #eef2f6 !important;
  }
  #page-search-results .search-title-bar {
    padding: 14px 16px 8px;
    background: #fff;
  }
  #page-search-results .search-title-bar h1 {
    font-size: 18px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  #page-search-results .search-tabs {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 0;
    padding: 0 10px;
    background: #fff;
    scrollbar-width: none;
  }
  #page-search-results .search-tabs::-webkit-scrollbar { display: none; }
  #page-search-results .search-tab {
    min-height: 42px;
    padding: 9px 10px;
    font-size: 13px;
  }
  #page-search-results .search-tab.is-empty:not([data-tab="issues"]) {
    display: none;
  }
  #page-search-results .tab-panel,
  #page-search-results .table-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  #page-search-results .table-wrap {
    overflow-x: hidden !important;
    padding: 8px 10px 12px;
  }
  #page-search-results table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #page-search-results .pagination-bar {
    width: 100%;
    min-width: 0;
    padding: 0 12px;
  }
  body.mobile-global-search-open:has(#page-issues) .mobile-search-toggle,
  body.mobile-global-search-open:has(#page-reports) .mobile-search-toggle,
  #page-search-results .mobile-search-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    position: relative;
    border-radius: 10px !important;
    background: #f1f5f9 !important;
    color: var(--sd-primary, #003d77) !important;
  }
  body.mobile-global-search-open:has(#page-issues) .mobile-search-toggle svg,
  body.mobile-global-search-open:has(#page-reports) .mobile-search-toggle svg,
  #page-search-results .mobile-search-toggle svg {
    display: none;
  }
  body.mobile-global-search-open:has(#page-issues) .mobile-search-toggle::before,
  body.mobile-global-search-open:has(#page-reports) .mobile-search-toggle::before,
  #page-search-results .mobile-search-toggle::before {
    content: '\00d7';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 23px;
    font-weight: 400;
    line-height: 1;
  }
}

/* Кнопка возврата в шапке — только для телефона: на десктопе тот же путь
   даёт строка хлебных крошек, показывать оба смысла нет. Видимой её
   делает правило внутри медиазапроса выше. */
.topbar-back-btn,
.topbar-location-btn { display: none; }
.topbar-kebab-btn { display: none; }

/* Меню действий над заявкой (кебаб в шапке карточки, только телефон) -
   тот же принцип, что и выпадающий список уведомлений: всплывающая
   карточка под кнопкой, закрытие по клику мимо/Esc. Пока один пункт
   ("Поделиться заявкой"), но остальные пункты добавляются сюда же, без
   новой отдельной кнопки в шапке на каждое действие. */
.issue-actions-menu {
  position: fixed; z-index: 10050; min-width: 220px;
  padding: 6px; border: 1px solid #e1e6ec; border-radius: 12px;
  background: #fff; box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
}
.issue-actions-menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
  padding: 11px 10px; border: 0; border-radius: 8px; background: transparent;
  color: #1a2332; font: 500 14px var(--sd-font); text-align: left; cursor: pointer;
}
.issue-actions-menu-item svg { width: 20px; height: 20px; flex: 0 0 20px; color: #56687a; }
.issue-actions-menu-item:active { background: #f2f5f9; }

/* Модалка «Местоположение» - структурные правила (fixed-оверлей, скрыт по
   умолчанию) вне медиазапроса: раньше position:fixed/inset жили только
   внутри мобильного @media, и если модалка была открыта на телефоне,
   а окно потом расширили до десктопа (или состояние утекло между
   переходами), div падал в обычный поток документа голым блоком -
   вот и был "артефакт справа". Триггер-кнопка остаётся мобильной,
   а сам оверлей теперь всегда фиксирован/скрыт независимо от ширины. */
.location-modal {
  display: none !important;
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: #fff;
  flex-direction: column;
}
.location-modal.open { display: flex !important; }
@media (min-width: 861px) {
  .location-modal.open { display: none !important; }
}
.location-modal-body { position: relative; flex: 1; min-height: 0; }
.location-modal-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.location-modal-loader {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
}
.location-modal-loader.is-hidden { display: none !important; }

/* Вкладки заявок: в обычном состоянии один ряд скрывается под кнопкой
   раскрытия, по нажатию вкладки плавно раскладываются в несколько рядов. */
#page-issues > .status-tabs-bar {
  position: relative !important;
  display: block !important;
  gap: 0 !important;
  min-height: 48px !important;
  height: auto !important;
  padding: 6px 8px 4px 28px !important;
  overflow: hidden !important;
}

#page-issues .issue-tabs-strip {
  --issue-tabs-expanded-height: 720px;
  width: calc(100% - 92px) !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  max-height: 38px !important;
  overflow: hidden !important;
  transition: max-height .22s ease-out !important;
}

#page-issues .issue-tabs-strip .status-tab { flex: 0 0 auto !important; }

#page-issues .status-tabs-bar:not(.tabs-expanded)::after {
  content: "" !important;
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
  width: 112px !important;
  height: 38px !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, rgba(248,250,252,0), rgba(248,250,252,.96) 58%, #f8fafc 86%) !important;
  z-index: 80 !important;
}

#page-issues .status-tabs-bar.tabs-expanded .issue-tabs-strip {
  width: 100% !important;
  flex-wrap: wrap !important;
  max-height: var(--issue-tabs-expanded-height) !important;
}

#page-issues .issue-tabs-toggle {
  display: none !important;
  position: absolute !important;
  right: 50px !important;
  top: 6px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  margin-left: 8px !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--sd-primary) !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 20px rgba(16,24,40,.08) !important;
  transition: background-color .15s ease, border-color .15s ease, transform .18s ease !important;
  z-index: 90 !important;
}

#page-issues .status-tabs-bar .tabs-add {
  position: absolute !important;
  right: 8px !important;
  top: 6px !important;
  z-index: 90 !important;
  width: 34px !important;
  height: 38px !important;
  justify-content: center !important;
  padding: 0 !important;
  /* Белый фон на белом фоне страницы делал кружок фактически невидимым -
     оставался только голый плюсик без чипа под ним. */
  background: #e2e7ee !important;
}

#page-issues .issue-tabs-toggle svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: transform .18s ease !important;
}

#page-issues .status-tabs-bar.tabs-expanded .issue-tabs-toggle svg { transform: rotate(180deg) !important; }
#page-issues .status-tabs-bar.has-extra-rows .issue-tabs-toggle { display: inline-flex !important; }

/* На телефоне вкладки представлений («Все заявки»/«планирование»/...) не
   помещаются в один ряд, но раскрывание в несколько строк по клику на
   шеврон (система выше) неудобно на телефоне - логичнее просто листать
   вкладки горизонтальным свайпом, как везде в мобильном UI. Отменяем
   overflow:hidden/раскрытие в ряды, включаем свою горизонтальную
   прокрутку, прячем шеврон и кнопку "+" ушла в конец не мешает свайпу. */
@media (max-width: 820px) {
  #page-issues > .status-tabs-bar {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }
  #page-issues .issue-tabs-strip,
  #page-issues .status-tabs-bar.tabs-expanded .issue-tabs-strip {
    /* issueTabsExpanded по умолчанию true (десктопное поведение из другой
       правки) - .tabs-expanded висит и на телефоне тоже, поэтому оверрайд
       нужен с той же специфичностью, иначе строки всё равно расползались
       в несколько рядов вместо горизонтальной ленты. */
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    scrollbar-width: none !important;
  }
  #page-issues .issue-tabs-strip::-webkit-scrollbar { display: none !important; }
  #page-issues .status-tab .tab-edit,
  #page-issues .status-tab .tab-close { display: none !important; }
  #page-issues .status-tabs-bar::after { display: none !important; }
  #page-issues .issue-tabs-toggle,
  #page-issues .status-tabs-bar.has-extra-rows .issue-tabs-toggle { display: none !important; }
}
/* Создание новых вкладок представлений - десктопный сценарий (настроить
   фильтр и сохранить как отдельную вкладку), на телефоне лишний повод для
   промаха пальцем в тесном ряду свайпа. Раньше это правило стояло без
   привязки к брейкпоинту - кнопка пропадала и на десктопе тоже. */
@media (max-width: 860px) {
  #page-issues .status-tabs-bar .tabs-add { display: none !important; }
}

/* The comment composer belongs only to the comments tab. The data marker is
   set together with the active tab and remains reliable for dynamically
   loaded nested/file panes. */
#issue-bottom-panel[data-active-tab]:not([data-active-tab="comments"]) #comments-toolbar,
#issue-bottom-panel[data-active-tab]:not([data-active-tab="comments"]) #comment-composer {
  display: none !important;
}

/* На самых узких экранах сохраняем тот же отдельный scrollport ленты.
   overflow:visible здесь раньше стоял ниже основного мобильного правила
   и отменял его: несколько вкладок растягивали всю страницу по ширине. */
@media (max-width: 640px) {
  #page-issues .issue-tabs-strip {
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
    padding: 0 !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
  }
}

#page-issues .status-tabs-bar .tabs-add {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  margin: 0 0 0 8px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  z-index: 90 !important;
}

/* Полоса вкладок представлений листается только вбок и только сама:
   в шаблоне у неё было overflow:visible + width:max-content, из-за
   чего свайп по вкладкам прокручивал общий контейнер вместе со всей
   таблицей под ним. Даём вкладкам собственную прокрутку — с тем же
   #page-issues .issues-table-scroll >, что и в шаблоне, чтобы
   специфичность совпала и правило действительно применилось. */
.status-tabs-bar,
.client-tabs-bar {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  touch-action: pan-x !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
  min-width: 0 !important;
}

.status-tabs-bar .status-tab,
.client-tabs-bar .client-tab { flex: 0 0 auto !important; }

/* полоса прокрутки добавляла содержимому лишний пиксель высоты, из-за
   чего вертикальный люфт всё же оставался; сама она здесь не нужна */
.status-tabs-bar,
.client-tabs-bar,
#page-issue-detail .issue-tabs-bar { scrollbar-width: none !important; }

.status-tabs-bar::-webkit-scrollbar,
.client-tabs-bar::-webkit-scrollbar,
#page-issue-detail .issue-tabs-bar::-webkit-scrollbar { display: none !important; }

/* та же логика для вкладок внутри карточки заявки */
#page-issue-detail .issue-tabs-bar {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  touch-action: pan-x !important;
  overscroll-behavior-x: contain !important;
}

#page-issue-detail .issue-tabs-bar .issue-tab { flex: 0 0 auto !important; }

/* ── Полоса прокрутки карточки заявки ─────────────────────────────────
   Прокручивалась средняя колонка, поэтому её полоса вставала на границе
   с боковой панелью — посреди экрана. Отдаём прокрутку всему контейнеру:
   полоса уходит к правому краю окна, как ожидается.
   Боковая панель при этом остаётся на виду — она прилипает к верху,
   иначе при чтении длинной переписки статус и кнопки уезжали бы вверх. */
#page-issue-detail .issue-page-inner {
  overflow-y: auto !important;
}

/* обе оси сразу: при overflow-x: hidden браузер приводит
   overflow-y: visible обратно к auto, и полоса остаётся на месте */
#page-issue-detail .issue-page-inner > div:not(.issue-sidebar) {
  overflow: visible !important;
}

/* Карточки компаний, объектов, контактов и сотрудников прокручиваются
   целиком, как карточка заявки. Полоса находится у правого края страницы,
   за боковой панелью, а не между основной колонкой и этой панелью. */
@media (min-width: 901px) {
  .client-page {
    align-items: flex-start !important;
    overflow-y: auto !important;
  }

  .client-page > .client-main {
    flex: 1 0 auto !important;
    min-height: 100% !important;
    overflow: visible !important;
  }

  .client-page .client-scroll {
    flex: 0 0 auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .client-page .tab-panel.active {
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  .client-page .tab-panel.data-panel .table-wrap {
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  .client-page > .client-sidebar {
    position: sticky !important;
    top: 0 !important;
    align-self: flex-start !important;
    min-height: 100% !important;
    overflow: visible !important;
  }
}

/* ── Rich-text редактор (Quill) — единый шаблон для комментариев,
   описания заявки и комментария при смене статуса ─────────────────── */
/* Форма радиуса повторяет пузырь готового комментария (.comment-content:
   0 12 12 12 - "хвостик" в левый верхний угол), чтобы поле ввода визуально
   читалось как тот же элемент, что появится ниже после отправки, а не как
   отдельный служебный виджет. */
.rte-wrap {
  border: 1px solid #d2d8e0 !important;
  border-radius: 0 12px 12px 12px !important;
  overflow: hidden !important;
  background: #fff !important;
}
.rte-wrap:focus-within {
  border-color: #003d77 !important;
}
.rte-wrap .ql-toolbar.ql-snow {
  border: 0 !important;
  border-bottom: 1px solid #e8eaed !important;
  padding: 4px 6px !important;
  background: #fdfdfd !important;
}
/* Тот же размер/межстрочный интервал/цвет, что у .comment-text (сам текст
   готового комментария) - раньше поле ввода было мельче и с другим
   цветом, набранный текст визуально не совпадал с тем, что получится
   после отправки. */
.rte-wrap .ql-container.ql-snow {
  border: 0 !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
}
.rte-wrap .ql-editor {
  min-height: 60px !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  padding: 8px 10px !important;
  color: #111 !important;
  line-height: 1.55 !important;
}
.rte-wrap .ql-editor.ql-blank::before {
  color: #aaa !important;
  font-style: normal !important;
  left: 10px !important;
}
.rte-wrap .ql-editor img {
  max-width: 100% !important;
  border-radius: 4px !important;
  border: 1px solid #e8eaed !important;
}
.rte-wrap { position: relative !important; }
/* position:fixed + z-index заведомо выше любой модалки (z-index 1300-6000
   встречаются в этом приложении) - список сотрудников не должен обрезаться
   overflow:hidden родителя (composer внутри модалки смены статуса и т.п.)
   и должен рисоваться поверх самой модалки. */
.rte-mention-menu {
  display: none; position: fixed; z-index: 6500; width: 320px; max-width: calc(100vw - 24px);
  background: #fff; border: 1px solid #e2e6ec; border-radius: 8px;
  box-shadow: 0 8px 28px rgba(20,30,50,.18); overflow: hidden;
}
.rte-mention-hint {
  padding: 8px 12px; font-size: 11.5px; font-weight: 600; color: #8c9eb2;
  border-bottom: 1px solid #eef0f3; background: #fafbfc;
}
.rte-mention-list { max-height: 240px; overflow-y: auto; padding: 4px; }
.rte-mention-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 6px; cursor: pointer;
}
.rte-mention-item:hover { background: #f0f6fb; }
.rte-mention-item:hover .rte-mention-item-name { color: #1094e4; }
.rte-mention-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
}
.rte-mention-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  background: #eaf4fb; color: #1094e4; font: 600 11px var(--sd-font); text-transform: uppercase;
}
.rte-mention-item-text { display: flex; flex-direction: column; min-width: 0; }
.rte-mention-item-name { font-size: 13px; color: #2c3e50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rte-mention-item-email { font-size: 11.5px; color: #a2a9b4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rte-mention-footer {
  padding: 6px 12px; font-size: 11px; color: #a2a9b4; border-top: 1px solid #eef0f3; background: #fafbfc;
}
.rte-issue-hint {
  display: none; position: fixed; z-index: 6500; white-space: nowrap;
  padding: 5px 10px; font-size: 11.5px; font-weight: 600; color: #1094e4;
  background: #eaf4fb; border: 1px solid #cfe4f5; border-radius: 6px;
  box-shadow: 0 6px 18px rgba(20,30,50,.14);
}
.rte-wrap .ql-snow .ql-picker.ql-size {
  width: 68px !important;
}
/* У Quill в теме Snow подписи для нестандартных (не small/large/huge)
   значений size не заданы - без этого пункты списка были бы пустыми. */
.rte-wrap .ql-snow .ql-picker.ql-size .ql-picker-label[data-value]::before,
.rte-wrap .ql-snow .ql-picker.ql-size .ql-picker-item[data-value]::before {
  content: attr(data-value) !important;
}

#page-issue-detail .issue-sidebar {
  position: static !important;
  top: auto !important;
  align-self: stretch !important;
  max-height: none !important;
  overflow: visible !important;
}

@media (min-width: 861px) {
  /* Сайдбар прокручивается вместе с карточкой. Разделитель рисуют оба
     последовательных блока основной колонки, поэтому линия продолжается
     до конца длинного содержимого, а не обрывается на высоте меню. */
  #page-issue-detail .issue-sidebar {
    border-left: 0 !important;
  }

  #page-issue-detail .issue-body,
  #page-issue-detail .issue-bottom-panel {
    border-right: 1px solid #e7eaee !important;
    box-sizing: border-box !important;
  }
}

/* Лоадер во фрейме диагностики — лежит поверх iframe, а не сдвигает
   его: пока страница внутри грузится, само место под неё уже занято. */
.diag-pane-loader {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 1px solid #e3e8ef !important;
  border-radius: 8px !important;
}

.diag-pane-loader.is-hidden { display: none !important; }


/* ── Выравнивание списка заявок по вкладкам ───────────────────────────
   Вкладки представлений («Все заявки») сидят с отступом 28px слева,
   а таблица под ними — с 12px: список визуально прижат к краю и
   выбивается из общей сетки. Выравниваем таблицу по вкладкам (строка
   фильтров теперь отдельный серый тулбар с собственным маленьким
   отступом - см. .filter-bar выше - и в это выравнивание не входит).
   Только на десктопе: на мобильном первая колонка зажата в 68px, и
   лишние 28px отступа ломают её - номер наезжал на дату. */
@media (min-width: 861px) {
  #issuesTable td:first-child,
  #issuesTable th:first-child,
  .sd-table td:first-child,
  .sd-table th:first-child { padding-left: 28px !important; }

  #issuesTable td:last-child,
  #issuesTable th:last-child { padding-right: 28px !important; }
}


/* ── Прокрутка списка мышью, как в OkDesk ─────────────────────────────
   Таблицу можно схватить мышью и потянуть — курсор подсказывает, что
   можно тянуть (JS ниже переключает grab/grabbing по факту
   перетаскивания). Раньше это сочеталось со скрытым скроллбаром
   (display:none!important здесь), но это конфликтует с общим стилем
   видимого скроллбара по всему порталу (см. правило *::-webkit-scrollbar
   выше в файле) - drag и видимый скроллбар не исключают друг друга. */
#page-issues .issues-table-scroll.is-drag-ready { cursor: grab !important; }
#page-issues .issues-table-scroll.is-dragging { cursor: grabbing !important; user-select: none !important; }
#page-issues .issues-table-scroll.is-dragging * { user-select: none !important; }


/* ── Вкладки представлений не должны сдвигаться при горизонтальной
   прокрутке таблицы ────────────────────────────────────────────────
   .status-tabs-bar лежит в том же .issues-table-scroll, что и таблица
   (нужно для вертикальной прокрутки одним контейнером), поэтому при
   протяжке мышью/скролле вправо уезжала вместе с таблицей. Прижимаем
   её к левому краю через sticky — тогда она визуально остаётся на
   месте, а сама таблица с фильтрами под ней двигается как обычно.
   Только для десктопа: на телефоне вкладки — часть общей вертикальной
   прокрутки страницы, там залипание неуместно. */
@media (min-width: 821px) {
  #page-issues > .status-tabs-bar {
    position: relative !important;
    z-index: 60 !important;
    width: 100% !important;
  }

  /* Представления относятся к странице, а не к ширине таблицы. На десктопе
     всегда показываем весь набор: при нехватке места он сам переносится на
     следующую строку. Мобильная горизонтальная лента ниже не меняется. */
  #page-issues > .status-tabs-bar .issue-tabs-strip {
    box-sizing: border-box !important;
    width: 100% !important;
    padding-right: 44px !important;
    flex-wrap: wrap !important;
    max-height: var(--issue-tabs-expanded-height) !important;
  }
  #page-issues > .status-tabs-bar::after,
  #page-issues > .status-tabs-bar .issue-tabs-toggle { display: none !important; }

  /* filter-bar - тот же sticky, но БЕЗ width:100%: у неё есть свой
     margin: 0 28px (серая карточка, см. .filter-bar выше), и
     100%+margin вместе выталкивали правый скруглённый угол за экран.
     Обычная блочная ширина (auto) сама уместится в контейнер за
     вычетом margin. */
  #page-issues .issues-table-scroll > .filter-bar {
    position: sticky !important;
    left: 0 !important;
    z-index: 60 !important;
    width: auto !important;
  }

  /* Списки компаний, объектов, оборудования и сотрудников используют
     отдельный скролл таблицы. Поэтому тулбар обычно и так остаётся сверху,
     но фиксируем это тем же явным sticky-паттерном, что и в «Заявках»:
     при изменении контейнера прокрутки фильтры не уедут вместе со списком.
     Селектор через .topbar исключает embed-варианты этих страниц внутри
     карточек — там прокруткой управляет родительская карточка. */
  #page-clients > .topbar ~ .content .filter-bar,
  #page-objects > .topbar ~ .content > .filter-bar,
  #page-equipment > .topbar ~ .content > .filter-bar,
  #page-employees > .topbar ~ .content > .filter-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 160 !important;
  }
}

/* Сортировка/фильтр по клику в шапке generic-таблицы (table_tools.js) —
   тот же вид, что у самописной таблицы заявок, чтобы «Компании»,
   «Объекты», «Оборудование», «Сотрудники» смотрелись тем же приложением. */
.sd-table .th-content {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 5px !important;
  cursor: pointer !important;
  user-select: none !important;
}

.sd-table .th-label {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.sd-table .th-sort-mark {
  width: 12px !important;
  min-width: 12px !important;
  color: #94a3b8 !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.sd-table .th-filter-btn {
  width: 16px !important;
  height: 16px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: #9aa7b5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
}

.sd-table .th-filter-btn:hover {
  background: #f1f5f9 !important;
  color: #64748b !important;
}

.sd-table .th-filter-btn.active {
  color: #003d77 !important;
  background: #eaf5fb !important;
}

.sd-table .th-filter-btn svg {
  width: 10px !important;
  height: 10px !important;
  display: block !important;
}

/* Плотность строк списка совпадает с заявками на десктопе. На телефоне
   table_tools.css превращает строки в карточки с естественной высотой. */
@media (min-width: 821px) {
  .sd-table th {
    height: 36px !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    text-transform: none !important;
    background: #fff !important;
    border-bottom: 1px solid var(--sd-border) !important;
  }
  .sd-table tbody tr { height: 39px !important; }
  .sd-table tbody td {
    height: 39px !important;
    border-bottom: 1.2px solid var(--sd-border) !important;
    color: #15181d !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
  }
  .sd-table tbody tr:hover td,
  .sd-table tbody tr:hover .sd-sticky-left { background: var(--sd-hover) !important; }
}

.topbar-user-name {
  font-family: var(--sd-font) !important;
}

.user-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  background: var(--sd-primary) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: var(--sd-font) !important;
  object-fit: cover !important;
}

/* Кнопка выхода — иконка-дверь вместо текста, как в OkDesk: имя уже
   написано рядом текстом, дублировать словом «Выйти» незачем. */
.logout-btn {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--sd-soft) !important;
}

.logout-btn:hover {
  color: #e84848 !important;
  background: #fff5f5 !important;
  border-radius: 8px !important;
}

.logout-btn svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

/* Карусель блока «Описание» на телефоне (как в мобильном OkDesk):
   первый слайд — сам текст описания, второй — «Тип заявки»/«Автор»/
   «Ответственный» (те же поля дублируются в подвале — сайдбар едет
   под карточку на телефоне, но карточку смотрят в первую очередь).
   На десктопе оба слайда просто в потоке, без обёртки. */
.issue-desc-swipe-wrap { display: contents; }
.issue-desc-swipe { display: contents; }
.issue-hero-dots { display: none; }
.issue-desc-extra { display: none; }

@media (max-width: 860px) {
  /* Keep the reading surface free for scrolling and expanding text. The
     pencil is the single, intentionally sized entry point to editing. */
  .issue-desc-block-editable .issue-desc-edit-surface {
    cursor: default !important;
  }

  .issue-desc-block-editable .issue-desc-edit-row:not(.is-editing) .issue-desc-edit-surface:hover,
  .issue-desc-block-editable .issue-desc-edit-row:not(.is-editing) .issue-desc-edit-surface:focus-visible {
    background: transparent !important;
    color: inherit !important;
  }

  .issue-desc-edit-row > .issue-desc-edit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    top: -8px !important;
    right: -4px !important;
    font-size: 15px !important;
  }

  .issue-desc-edit-row.is-editing .issue-desc-edit-surface {
    width: calc(100% - 2px) !important;
    margin-left: 1px !important;
    margin-right: 1px !important;
  }

  body.detail-page-open .issue-desc-swipe.is-desc-editing {
    overflow-x: hidden !important;
    scroll-snap-type: none !important;
    touch-action: pan-y !important;
  }

  /* Высота и overflow-y:hidden (обрезка коротких слайдов) теперь на
     ОБЁРТКЕ снаружи, не на самом скроллящемся узле - см. комментарий у
     syncIssueDescSwipeHeight() в issues.html. Раньше и то, и другое
     (включая transition:height) висело прямо на .issue-desc-swipe, где
     активен scroll-snap-type:x - анимация/смена высоты того же узла во
     время touch-жеста роняла snap "между" слайдами на части Android. */
  body.detail-page-open .issue-desc-swipe-wrap {
    display: block !important;
    overflow: hidden !important;
    transition: height .18s ease !important;
  }

  body.detail-page-open .issue-desc-swipe {
    display: flex !important;
    align-items: flex-start !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  body.detail-page-open .issue-desc-swipe::-webkit-scrollbar { display: none !important; }

  body.detail-page-open .issue-desc-slide {
    flex: 0 0 100% !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;
  }

  body.detail-page-open .issue-desc-extra {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 2px 2px 4px !important;
  }

  body.detail-page-open .issue-hero-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 0 0 !important;
  }

  body.detail-page-open .issue-hero-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--sd-border) !important;
    transition: background-color .15s ease, width .15s ease, border-radius .15s ease !important;
  }

  body.detail-page-open .issue-hero-dot.active {
    width: 14px !important;
    border-radius: 3px !important;
    background: var(--sd-primary) !important;
  }

  /* стрелочка рядом с точками - подсказка, что карточку можно свайпнуть,
     гаснет на последнем экране (класс is-hidden ставит JS) */
  body.detail-page-open .issue-swipe-hint {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 4px !important;
    width: 14px !important;
    height: 14px !important;
    color: var(--sd-primary) !important;
    opacity: .55 !important;
    transition: opacity .2s ease !important;
    animation: issueSwipeHintNudge 1.1s ease-in-out infinite !important;
  }

  body.detail-page-open .issue-swipe-hint svg {
    width: 14px !important;
    height: 14px !important;
  }

  body.detail-page-open .issue-swipe-hint.is-hidden {
    opacity: 0 !important;
    animation: none !important;
  }

  @keyframes issueSwipeHintNudge {
    0%, 100% { transform: translateX(0); opacity: .35; }
    50% { transform: translateX(3px); opacity: .8; }
  }

  /* «Тип заявки»/«Автор»/«Ответственный» и даты дублируются во втором и
     третьем слайде свайпа описания — в «подвале» (сайдбар едет под
     карточку на телефоне) отдельными блоками больше не нужны */
  body.detail-page-open .issue-side-section.issue-side-extra,
  body.detail-page-open .issue-side-section.issue-side-dates {
    display: none !important;
  }

  /* «Параметры заявки» тоже переехали во второй слайд — вложенный блок
     не должен задавать свой собственный отступ поверх отступа слайда */
  body.detail-page-open .issue-params-section-nested {
    padding: 0 !important;
    border-bottom: 0 !important;
  }
}

/* ── Мобильная карточка контактного лица ──────────────────────────────
   Полноэкранный оверлей поверх заявки: по тапу на контакт монтажник
   должен быстро найти номер телефона, без загрузки тяжёлой десктопной
   страницы /contacts/<id>. Открывается/закрывается через JS
   (openMobileContactCard/closeMobileContactCard), в разметке всегда
   один и тот же контейнер — только меняется его display. */
.mobile-entity-card {
  display: none;
  position: fixed;
  inset: 0;
  /* выше общей шапки сайта (.topbar в _topbar.html: z-index 5999) -
     иначе на заявке шапка рисуется поверх этого оверлея, включая её
     собственную кнопку "Назад" (ведёт в список заявок), и человек
     промахивается мимо кнопки "Назад" самой карточки контакта. */
  z-index: 6500;
  flex-direction: column;
  background: #e3e8ef;
}

.mobile-entity-topbar {
  flex-shrink: 0;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: #fff;
  border-bottom: 1px solid #e8eaed;
}

.mobile-entity-topbar #mobileEntityTitle {
  font: 600 16px/1 var(--sd-font);
  color: #1a2332;
}

.mobile-entity-back { flex-shrink: 0; }

.mobile-entity-body { flex: 1; overflow-y: auto; padding: 14px; }

.mobile-entity-loading { padding: 20px; text-align: center; color: #8c9eb2; font-size: 13px; }

.mobile-entity-panel {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mobile-entity-name { font: 700 16px/1.3 var(--sd-font); color: #15181d; }

.mobile-entity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.mobile-entity-row a { color: #003d77; text-decoration: none; }
.mobile-entity-row a:active { opacity: .7; }

.mobile-entity-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #8c9eb2;
}

.mobile-entity-sep { height: 1px; background: #eef0f3; margin: -2px 0; }

.mobile-entity-field label { display: block; color: #8c9eb2; font-size: 11px; margin-bottom: 3px; }
.mobile-entity-field div { font-size: 14px; color: #15181d; }

.mobile-object-issues-panel { margin-top: 12px; gap: 0; padding: 0; overflow: hidden; }
.mobile-object-issues-title { padding: 16px 16px 10px; font: 700 15px/1.3 var(--sd-font); color: #15181d; }
.mobile-object-issue { display: block; padding: 12px 16px; border-top: 1px solid #eef0f3; color: inherit; text-decoration: none; }
.mobile-object-issue:active { background: #f4f7fb; }
.mobile-object-issue-title { display: block; font: 600 14px/1.35 var(--sd-font); color: #1a2332; }
.mobile-object-issue-meta { display: flex; align-items: center; margin-top: 3px; color: #7b899b; font-size: 12px; line-height: 1.3; }
.mobile-object-issue-status { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; flex: 0 0 auto; }
.mobile-object-issues-empty { padding: 4px 16px 16px; color: #8c9eb2; font-size: 13px; }

@media (min-width: 861px) {
  .mobile-entity-card { display: none !important; }
}

/* ── Просмотр изображений (комментарии/описание заявки) ────────────────
   Полноэкранный лайтбокс с полосой миниатюр и стрелками, по референсу
   мобильного/десктопного OkDesk - раньше клик по превью просто открывал
   картинку в новой вкладке браузера без навигации между вложениями. */
.image-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 7000;
  flex-direction: column;
  background: rgba(12, 14, 18, .94);
}

.image-lightbox-topbar {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  color: #e7eaee;
}

.image-lightbox-tools { display: flex; align-items: center; gap: 6px; }

.image-lightbox-counter { justify-self: center; font: 500 13px var(--sd-font); color: #c3c9d2; white-space: nowrap; }

.image-lightbox-actions { display: flex; align-items: center; justify-self: end; gap: 6px; }

.image-lightbox-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: #e7eaee;
  cursor: pointer;
}

.image-lightbox-btn:hover { background: rgba(255, 255, 255, .16); }
.image-lightbox-btn svg { width: 18px; height: 18px; }

.image-lightbox-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 8px 52px;
  /* повёрнутая/увеличенная картинка не должна вылезать за пределы
     оверлея - без этого рамка окна обрезала её под случайным углом */
  overflow: hidden;
}

.image-lightbox-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  transition: transform .15s ease;
  /* браузер не должен сам скроллить/зумить страницу пальцем поверх
     картинки - pinch и pan на ней обрабатывает наш JS */
  touch-action: none;
  cursor: zoom-in;
}

.image-lightbox-stage img.is-zoomed { cursor: grab; }
.image-lightbox-stage img.is-panning { cursor: grabbing; transition: none; }

.image-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #e7eaee;
  cursor: pointer;
}

.image-lightbox-nav:hover { background: rgba(255, 255, 255, .2); }
.image-lightbox-nav svg { width: 20px; height: 20px; }
.image-lightbox-nav.prev { left: 8px; }
.image-lightbox-nav.next { right: 8px; }

.image-lightbox-thumbs {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 14px 14px;
  scrollbar-width: none;
}

.image-lightbox-thumbs::-webkit-scrollbar { display: none; }

.image-lightbox-thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  opacity: .55;
  cursor: pointer;
  border: 2px solid transparent;
}

.image-lightbox-thumb.active {
  opacity: 1;
  border-color: #fff;
}

/* Обычные списки выбора: hover лишь подсказывает действие, а не выглядит
   как основная кнопка. Яркую синюю заливку оставляем статусам и CTA. */
.attr-picker-item:hover,
.attr-picker-item.selected:hover,
.issue-client-option:hover,
.object-picker-item:hover,
.vehicle-picker-option:hover,
.vehicle-picker-option:focus-within {
  background: #f3f7fb !important;
  color: #1a2332 !important;
}
.attr-picker-item.selected,
.attr-picker-item.selected:hover,
.vehicle-picker-item.selected,
.vehicle-picker-option:hover .vehicle-picker-item.selected,
.vehicle-picker-option:focus-within .vehicle-picker-item.selected {
  background: #eaf2f8 !important;
  color: #003d77 !important;
}
.vehicle-picker-option:hover .vehicle-picker-item,
.vehicle-picker-option:focus-within .vehicle-picker-item,
.vehicle-picker-option:hover .vehicle-reference-edit,
.vehicle-picker-option:focus-within .vehicle-reference-edit {
  background: transparent !important;
  color: inherit !important;
}

/* Поиск в поповерах — часть поверхности самого списка, а не отдельная
   «карточка в карточке». Высота и line-height держат курсор по центру. */
.attr-picker-host { position: relative; width: 100%; min-height: 22px; display: flex; align-items: center; gap: 4px; }
.attr-picker-popover {
  position: absolute; left: 0; top: 24px; z-index: 85; width: min(320px, calc(100vw - 140px));
  box-sizing: border-box; padding: 6px; overflow: hidden; border: 1px solid #dde2e8;
  border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
}
.attr-picker-results { max-height: 240px; overflow-y: auto; }
.attr-picker-item { padding: 7px 8px; border-radius: 5px; cursor: pointer; background: #fff; color: #1a2332; font-size: 13px; line-height: 1.3; }
.attr-picker-empty { padding: 10px 8px; color: #8c9eb2; font-size: 12px; }
.attr-picker-popover input,
.object-picker-popover input,
.vehicle-picker-popover input {
  box-sizing: border-box !important;
  min-height: 34px !important;
  height: 34px !important;
  margin: 0 0 4px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-bottom: 1px solid #e2e7ed !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 34px !important;
}
.attr-picker-popover input:focus,
.object-picker-popover input:focus,
.vehicle-picker-popover input:focus {
  border-bottom-color: #075ba7 !important;
  box-shadow: inset 0 -1px 0 #075ba7 !important;
}

/* Общий календарь для редактируемых дат в карточках. */
.attr-date-calendar {
  position: fixed; z-index: 10000; width: 264px; box-sizing: border-box; padding: 10px;
  border: 1px solid #d2d8e0; border-radius: 10px; background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
}
.attr-date-cal-header { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.attr-date-cal-title { flex: 1; text-align: center; font-size: 13px; font-weight: 600; color: #1a2332; }
.attr-date-cal-nav {
  width: 24px; height: 24px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  border: 1px solid #d2d8e0; border-radius: 6px; background: #fff; color: #4a5568;
  cursor: pointer; font-size: 14px; line-height: 1;
}
.attr-date-cal-nav:hover { background: #f4f6f9; }
.attr-date-cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin: 0 -10px 2px; padding: 4px 10px; background: #f7f8fa;
}
.attr-date-cal-weekdays span { text-align: center; font-size: 10.5px; color: #8c9eb2; font-weight: 600; }
.attr-date-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.attr-date-cal-day { height: 30px; border: 0; border-radius: 7px; background: transparent; color: #1a2332; font-size: 12.5px; cursor: pointer; }
.attr-date-cal-day:hover { background: #f1f5f9; }
.attr-date-cal-day.muted { color: #c5ccd5; }
.attr-date-cal-day.today { color: #003d77; font-weight: 700; }
.attr-date-cal-day.selected, .attr-date-cal-day.selected:hover { background: #003d77; color: #fff; font-weight: 600; }
/* Выбор времени в том же окне, что и календарь (static/date_calendar.js, openTime) */
.sd-time-picker { width: 252px; }
.sd-time-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sd-time-input { flex: 1; min-width: 0; height: 32px; box-sizing: border-box; padding: 0 9px; border: 1px solid #d5dfeb; border-radius: 6px; color: #1a2332; font: 600 14px inherit; text-align: center; outline: none; }
.sd-time-input:focus { border-color: #9fc4dd; box-shadow: 0 0 0 2px rgba(0, 61, 119, .08); }
.sd-time-ok { height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: #003d77; color: #fff; font: 600 12px inherit; cursor: pointer; }
.sd-time-label { margin: 6px 0 3px; color: #8c9eb2; font-size: 10.5px; font-weight: 600; }
.sd-time-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.sd-time-cell { height: 28px; }


@media (max-width: 860px) {
  .image-lightbox-stage { padding: 8px 44px; }
  .image-lightbox-nav { width: 36px; height: 36px; }
  .image-lightbox-thumb { width: 44px; height: 44px; }
}

/* Мобильная форма комментария - мессенджер-стиль (по образцу мобильного
   OkDesk): значок скрепки + растущее поле + круглая зелёная кнопка
   отправки в одной строке, переключатель "Публичный" отдельной строкой
   под ней. Десктопная раскладка (переключатель+шаблоны сверху, поле,
   кнопки "Отмена"/"Отправить" снизу) не трогается - это отдельный блок
   только на ширинах <=820px, использует display:contents, чтобы
   переставить уже существующие элементы через grid-area вместо
   дублирования разметки/JS-обработчиков.
   На мобильном форма всегда открыта (см. switchDetailTabInner в
   issues.html - isIssuesMobileView() форсирует toggleCommentComposer(true)
   при переходе на вкладку "Комментарии"), поэтому кнопка "Добавить
   комментарий" и её панель больше не нужны. */
@media (max-width: 820px) {
  #comments-toolbar {
    display: none !important;
  }

  .comment-add-row-top .comment-input-wrap {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-areas:
      "attach input"
      "files files"
      "toggle toggle" !important;
    align-items: center !important;
    gap: 6px 8px !important;
    max-width: none !important;
    margin-left: 0 !important;
  }

  /* Кнопка отправки и само поле - в ОДНОЙ ячейке грида ("input"), кнопка
     прижата к правому краю через justify-self и рисуется поверх поля
     (позже в DOM = выше по стеку) - визуально заезжает на пилюлю, как в
     iMessage/Telegram, а не стоит отдельным элементом рядом. paddingRight
     на самом тексте, чтобы буквы не заезжали под кнопку. */
  .comment-add-row-top #comment-input-mount .ql-editor {
    padding-right: 42px !important;
  }

  .comment-add-row-top .comment-submit-stack {
    grid-area: input !important;
    justify-self: end !important;
    align-self: center !important;
    margin-right: 7px !important;
    z-index: 5 !important;
  }

  .comment-add-row-top .comment-composer-header-row,
  .comment-add-row-top .comment-tools {
    display: contents !important;
  }

  .comment-add-row-top .comment-templates-wrap,
  .comment-add-row-top .comment-dropzone-hint {
    display: none !important;
  }

  .comment-add-row-top .comment-internal-toggle {
    grid-area: toggle !important;
    justify-self: start !important;
  }

  .comment-add-row-top #comment-input-mount {
    grid-area: input !important;
    min-width: 0 !important;
    height: auto !important;
  }

  .comment-add-row-top #comment-input-mount .ql-toolbar {
    display: none !important;
  }

  .comment-add-row-top #comment-input-mount .rte-wrap,
  .comment-add-row-top #comment-input-mount .ql-container {
    height: auto !important;
  }

  /* .rte-wrap (десктопная рамка+asymmetric radius, тёмно-синяя в фокусе) и
     .ql-container (своя рамка+radius 18px) - два вложенных контура разного
     цвета/скругления одновременно давали "двойную рамку". Видимым остаётся
     только контур .ql-container - .rte-wrap становится простой обёрткой. */
  .comment-add-row-top #comment-input-mount .rte-wrap {
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
  }

  .comment-add-row-top #comment-input-mount .ql-container {
    border: 1px solid #e2e6eb !important;
    border-radius: 18px !important;
    background: #fff !important;
  }

  /* Без синей рамки при фокусе - на маленьком экране в одной строке с
     иконками она визуально спорила с ними, а не просто выделяла поле. */
  .comment-add-row-top #comment-input-mount .rte-wrap:focus-within,
  .comment-add-row-top #comment-input-mount .rte-wrap:focus-within .ql-container {
    border-color: #e2e6eb !important;
  }

  /* height:auto (не только min/max) - Quill-тема по умолчанию тянет
     .ql-container на height:100% от родителя, а в grid-ячейке без явной
     высоты строки это разворачивало пустое поле сразу на всю max-height,
     как будто в нём уже 6 строк текста. */
  .comment-add-row-top #comment-input-mount .ql-editor {
    height: auto !important;
    min-height: 20px !important;
    max-height: 120px !important;
    padding: 9px 14px !important;
    font-size: 15px !important;
  }

  .comment-add-row-top .comment-file-list {
    grid-area: files !important;
  }

  .comment-add-row-top .comment-attach-btn {
    grid-area: attach !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #8c9eb2 !important;
    font-size: 0 !important;
  }

  .comment-add-row-top .comment-attach-btn svg {
    width: 22px !important;
    height: 22px !important;
  }

  .comment-add-row-top .comment-submit-stack .issue-pill-btn-secondary {
    display: none !important;
  }

  .comment-add-row-top #comment-submit-btn,
  .comment-add-row-top #comment-submit-btn.btn-primary {
    width: 30px !important;
    height: 30px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #2f5fc4 !important;
    font-size: 0 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Кнопка отправки появляется только когда есть что отправлять
     (мессенджер-стиль, как в iMessage) - см. setCommentSubmitActive() в
     issues.html, вызывается из onChange редактора при каждом изменении
     текста. */
  .comment-add-row-top #comment-submit-btn.comment-submit-btn-active,
  .comment-add-row-top #comment-submit-btn.comment-submit-btn-active.btn-primary {
    display: inline-flex !important;
  }

  .comment-add-row-top #comment-submit-btn .comment-submit-icon {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    color: #fff !important;
  }

  /* font-size:0 на самой кнопке (ниже) прячет текст визуально, но не убирает
     его из flex-раскладки - невидимый, но ненулевой по ширине текстовый
     узел справа от иконки сдвигал её влево от истинного центра кнопки.
     display:none полностью убирает его из потока. */
  .comment-add-row-top #comment-submit-btn .comment-submit-label {
    display: none !important;
  }

  .comment-add-row-top #comment-submit-btn .comment-submit-spinner {
    display: none;
    width: 15px;
    height: 15px;
    box-sizing: border-box;
    border: 2px solid rgba(255,255,255,.38);
    border-top-color: #fff;
    border-radius: 50%;
    animation: comment-submit-spin .72s linear infinite;
  }

  .comment-add-row-top #comment-submit-btn.is-sending .comment-submit-icon {
    display: none !important;
  }

  .comment-add-row-top #comment-submit-btn.is-sending .comment-submit-spinner {
    display: inline-block;
  }

  @keyframes comment-submit-spin {
    to { transform: rotate(360deg); }
  }

  /* Форма серым фоном отделена от ленты комментариев ниже - тот же приём,
     что и у @comment-add-row-top .rte-wrap (белая карточка), просто общий
     контур теперь виден и снаружи поля, а не только вокруг него. */
  .comment-add-row-top {
    background: #f5f6f8 !important;
    border-radius: 14px !important;
    margin: 0 4px 8px !important;
  }
}

/* ── Серый фон страниц на телефоне ────────────────────────────────────
   Единый фон #e3e8ef, как у мобильной заявки: страница серая, контент -
   белые карточки/таблицы на ней, верхняя панель остаётся белой. Только
   телефон (<=860px), десктоп не тронут. Раньше серым были только заявка и
   карточка компании, остальные страницы - сплошное белое полотно без
   границ между блоками. */
@media (max-width: 860px) {
  html, body, body .main-area, body .content, body .detail-row { background: #e3e8ef !important; }
}