/* ЦЕХ 4.0 — доработки интерфейса Zammad (старый, CoffeeScript-интерфейс).
   Подмешивается в <head> через sub_filter в ~/zammad/nginx/zammad.conf.
   Новый Vue-интерфейс (/desktop) этих классов не имеет — там файл безвреден. */

/* ============================================================
   П.4 — список представлений: горизонтальными вкладками сверху
   ============================================================
   Zammad всегда рендерит ОБА варианта одновременно (ticket_overview.coffee):
   .sidebar          — вертикальная колонка пилюль (navbar.jst.eco)
   .overview-header  — горизонтальные вкладки со счётчиками, выпадающим
                       списком для непоместившихся и кнопкой «+»
                       (navbar_vertical.jst.eco)
   Штатно Zammad переключается между ними на 1260px (@include small-desktop).
   Здесь делаем вкладки безусловными на любой ширине окна. */

.overviews .sidebar {
  display: none !important;
}

.overview-header {
  display: flex !important;
}

/* Панель массовых действий позиционируется fixed и отсчитывает левый край
   с учётом ширины боковой колонки (280px). Раз колонки больше нет — берём
   те же значения, что Zammad задаёт своему же классу .bulkAction.no-sidebar:
   отступ только на ширину чёрного меню (260px), min-width 1024-260. */
.bulkAction {
  left: 260px !important;
  right: 0 !important;
  min-width: 764px !important;
}

html[dir="rtl"] .bulkAction {
  left: 0 !important;
  right: 260px !important;
}

/* ============================================================
   П.1 — узкое левое меню: только иконки
   ============================================================
   ВАЖНО, почему НЕ используется штатный класс navigation-collapsed:
   миксин @mixin phone (zammad.scss:224) определён как
       #app.navigation-collapsed &  ИЛИ  @media (max-width: 767px)
   то есть этот класс включает ВЕСЬ мобильный набор — все 175 мест по файлу,
   а не только меню. Побочно схлопывалось белое меню админки
   (.NavBarAdmin.sidebar → 50px), двух/трёхколоночные формы вставали в один
   столбец (.two-columns/.three-columns → display:block), модальные окна
   растягивались на всю ширину, менялась вёрстка карточки заявки.

   Поэтому здесь свой класс cex-nav-narrow, и каждое правило ограничено
   селектором .navigation. Правила скопированы из phone-блоков навигации
   zammad.scss (4615–5500, 16045) — при обновлении Zammad сверять с ними.

   Плюс: #app это display:flex, а .navigation — его flex-элемент, поэтому
   достаточно задать ширину: контент сам займёт остаток. Ни position:absolute,
   ни margin-left у .content (как в штатном мобильном режиме) не нужны. */

#app.cex-nav-narrow .navigation {
  width: 50px;
}

/* подписи пунктов */
#app.cex-nav-narrow .navigation .menu-item-name {
  display: none;
}

#app.cex-nav-narrow .navigation .menu-item {
  padding: 0 13px;
  position: relative;
}

#app.cex-nav-narrow .navigation .menu-item-icon {
  margin-right: 0;
  margin-left: 0;
}

/* поиск схлопывается в иконку (логотип-колокольчик оставляем видимым —
   штатный мобильный режим его прячет через opacity, нам это не нужно) */
#app.cex-nav-narrow .navigation .search {
  padding: 10px 5px 5px;
  display: block;
}

#app.cex-nav-narrow .navigation .search:not(.filled, .focused) input[type="search"] {
  padding: 0;
}

#app.cex-nav-narrow .navigation .search .logo {
  margin: 10px 0 0;
}

#app.cex-nav-narrow .navigation .search .logo .icon-logo {
  width: 35px;
  height: 30px;
  margin-left: 4px;
}

/* список открытых заявок (задачи) */
#app.cex-nav-narrow .navigation .tasks {
  overflow-x: hidden;
  min-height: 60px;
}

#app.cex-nav-narrow .navigation .nav-tab-close {
  visibility: visible;
}

/* нижнее меню пользователя — в столбик */
#app.cex-nav-narrow .navigation .user-menu {
  flex-direction: column;
}

#app.cex-nav-narrow .navigation .user-menu .list-button {
  height: 46px;
}

#app.cex-nav-narrow .navigation .user-menu > li:not(:last-child) {
  border: none;
}

/* переключатель Vue-беты в узкую колонку не влезает (и он нам не нужен) */
#app.cex-nav-narrow .navigation .navbar-desktop-beta-switch {
  display: none;
}

/* Кнопка сворачивания живёт внизу колонки, но штатно скрыта при ≥1260px
   (zammad.scss:4762). Возвращаем её; клик перехватывает cex.js.
   Направление стрелки Zammad выбирает сам контейнерным запросом
   @container navigation (width = 50px), поэтому ширины 50/220 не случайны. */
.menu-item-navigation-toggle-button {
  display: flex !important;
}

/* развёрнутое состояние (по клику; выбор пока не запоминается — это п.2) */
#app.cex-nav-narrow.cex-nav-wide .navigation {
  width: 220px;
}

#app.cex-nav-narrow.cex-nav-wide .navigation .menu-item-name {
  display: block;
  padding-left: 15px;
}

#app.cex-nav-narrow.cex-nav-wide .navigation .menu-item-icon {
  margin-right: 15px;
}

#app.cex-nav-narrow.cex-nav-wide .navigation .search {
  padding: 10px;
}

#app.cex-nav-narrow.cex-nav-wide .navigation .user-menu {
  flex-direction: row;
}

/* ============================================================
   П.6 — карточки вместо таблицы
   ============================================================
   Класс cex-cards-on вешает cex.js на .overviews; сами карточки он
   дорисовывает внутрь .table-overview рядом со скрытой таблицей.
   Смысл вида: акцент на заголовке, тексте заявки и последнем комментарии,
   вся техническая информация — вправо и приглушённо. */

.overviews.cex-cards-on .table-overview > table {
  display: none;
}

/* кнопка-переключатель в шапке, слева от зелёного «+» */
.js-cex-viewtoggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
  white-space: nowrap;
  cursor: pointer;
}

.js-cex-viewtoggle .icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.cex-cards {
  padding-bottom: 40px;
}

.cex-card {
  padding: 16px 0 18px;
  border-top: 1px solid var(--border);
}

.cex-card:first-child {
  border-top: none;
}

.cex-card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.cex-card-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.cex-card-num {
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.6;
}

.cex-card-body {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.cex-card-col {
  flex: 1 1 0;
  min-width: 0;
}

/* техническая информация — уже и приглушённо */
.cex-card-meta {
  flex: 0 0 320px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  font-size: 12px;
  opacity: 0.7;
}

.cex-meta-item {
  min-width: 0;
}

.cex-meta-key {
  color: var(--text-muted);
  opacity: 0.75;
  margin-bottom: 2px;
}

.cex-meta-val {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cex-card-label {
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.55;
  margin-bottom: 5px;
}

/* сам текст: до четырёх строк, дальше обрезаем */
.cex-card-text {
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cex-card-text.is-empty,
.cex-card-text.is-loading {
  opacity: 0.3;
}

/* узкое окно — техинформация уезжает под тексты */
@media screen and (max-width: 1100px) {
  .cex-card-body {
    flex-wrap: wrap;
  }

  .cex-card-meta {
    flex: 1 1 100%;
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================
   п.7 Служебная заметка телеграм-бота — максимально бледная
   ============================================================
   Zammad метит ЛЮБУЮ внутреннюю заметку розовой полосатой рамкой
   (.is-internal .internal-border) — это осмысленный сигнал «клиент этого
   не видит», поэтому глушим не все внутренние заметки, а только заметки
   сервисного агента tgbot: у него единственного они технические.

   Хук — data-id аватара автора: WidgetAvatar рендерит
   <span class="avatar user-popover" data-id="39">, где 39 — id агента
   `tgbot`. ЕСЛИ АГЕНТА ПЕРЕСОЗДАДУТ — ПОМЕНЯТЬ ID ЗДЕСЬ.
   Нужен :has() (Chrome 105+); в старом браузере заметка просто останется
   штатной розовой — ничего не ломается.

   Инлайновые стили в теле заметки НЕ работают: HtmlSanitizer вырезает
   style= у статей на входе (проверено 2026-09-08), поэтому всё оформление
   служебных сообщений живёт только здесь. Селекторы плоские — нативный
   CSS-nesting сознательно не используем. */

/* полосатая рамка-предупреждение; padding/margin у .internal-border
   не трогаем — они взаимно гасятся (5px / -5px) и держат общую разметку */
.ticket-article-item.is-internal:has(.avatar[data-id="39"]) .internal-border {
  background: none !important;
}

/* фон и рамка пузыря. border-color с !important — штатное правило
   `.is-internal & { border-color: var(--border-internal) !important }`
   (zammad.scss:7517) иначе перебивает. Внутренние отступы .textBubble
   (10px 20px) оставляем штатные — как у остальных комментариев */
.ticket-article-item.is-internal:has(.avatar[data-id="39"]) .textBubble {
  background: transparent;
  border-color: transparent !important;
  box-shadow: none;
}

/* текст — как у служебных подписей «сделать публичной» */
.ticket-article-item.is-internal:has(.avatar[data-id="39"]) .textBubble-content,
.ticket-article-item.is-internal:has(.avatar[data-id="39"]) .richtext-content,
.ticket-article-item.is-internal:has(.avatar[data-id="39"]) .richtext-content * {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.ticket-article-item.is-internal:has(.avatar[data-id="39"]) .richtext-content p {
  margin: 0 0 4px;
}

/* последний абзац — исходный текст сообщения: курсив и ещё бледнее */
.ticket-article-item.is-internal:has(.avatar[data-id="39"]) .richtext-content p:last-child {
  margin-bottom: 0;
  font-style: italic;
  opacity: 0.8;
}

/* аватар: вместо цветного спрайта — ровный серый кружок */
.ticket-article-item.is-internal:has(.avatar[data-id="39"]) .avatar {
  background-image: none !important;
  background-color: var(--border-alt);
  color: var(--text-muted);
  font-weight: normal;
}

/* вложение (голосовой файл) тоже приглушаем */
.ticket-article-item.is-internal:has(.avatar[data-id="39"]) .attachments {
  opacity: 0.7;
}

/* ============================================================
   п.8 Кнопка «разделить» под сообщениями — скрыта
   ============================================================
   Заявку ни разу не понадобилось делить на несколько, а ссылка стоит под
   каждым сообщением и путает. Действие регистрируется в
   controllers/ticket_zoom/article_action/split.coffee и рендерится ссылкой
   с data-type="split" — прячем её везде. Вернуть: удалить это правило
   (сам механизм не тронут, ссылка появится сразу по F5). */

.article-actions .article-action[data-type="split"] {
  display: none;
}

/* ============================================================
   п.9 Блок «Телеграм» на странице Профиль → Уведомления
   ============================================================
   Рисуется из cex.js ПОСЛЕ штатной формы и вне её (иначе поля попали бы
   в @formParam штатного submit). Классы .settings-entry / .zammad-switch —
   штатные, поэтому вид совпадает с соседними настройками. */

.cex-tg {
  margin-top: 8px;
}

.cex-tg-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cex-tg-scope {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.15s;
}

/* выключенный тумблер гасит выбор объёма, но оставляет его видимым */
.cex-tg-scope.is-off {
  opacity: 0.45;
  pointer-events: none;
}

.cex-tg-status {
  color: var(--text-muted);
  font-size: 12px;
  max-width: 640px;
}