/* =========================================================
   HelpDesk custom UI
   ========================================================= */

/* ---------- Состояния заявок ---------- */

/* Новая / В работе */
.nav-tab.task-state-open.is-active {
  background-color: #279568 !important;
  color: #fff !important;
}

.task-state-open-color {
  color: #279568 !important;
}

.icon-task-state.open {
  fill: #279568 !important;
}

/* В ожидании */
.nav-tab.task-state-pending.is-active {
  background-color: #d98216 !important;
  color: #fff !important;
}

.task-state-pending-color {
  color: #d98216 !important;
}

.icon-task-state.pending {
  fill: #d98216 !important;
}

/* Закрыта */
.nav-tab.task-state-closed.is-active {
  background-color: #7b838b !important;
  color: #fff !important;
}

.task-state-closed-color {
  color: #7b838b !important;
}

.icon-task-state.closed {
  fill: #7b838b !important;
}

/* Вторая линия */
.nav-tab.task-state-secondline.is-active {
  background-color: #d63c3c !important;
  color: #fff !important;
}

.task-state-secondline-color {
  color: #d63c3c !important;
}

.icon-task-state.secondline {
  fill: #d63c3c !important;
}


/* ---------- Карточка заявки: переписка + заметки ---------- */

.helpdesk-ticket-columns {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(330px, 3fr);
  gap: 18px;
  width: 100%;
  align-items: start;
  padding: 0 16px;
  box-sizing: border-box;
}

.helpdesk-ticket-columns > .ticket-article {
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Правая колонка */
.helpdesk-notes-column {
  min-width: 0;
  border-left: 1px solid rgba(127, 127, 127, 0.25);
  padding-left: 18px;
  box-sizing: border-box;
}

.helpdesk-notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  margin: 4px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.20);
}

.helpdesk-notes-title {
  font-size: 15px;
  font-weight: 600;
}

.helpdesk-notes-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 12px;
  background: rgba(127, 127, 127, 0.15);
  font-size: 12px;
  box-sizing: border-box;
}

.helpdesk-notes-empty {
  padding: 18px 4px;
  opacity: 0.55;
  font-size: 13px;
}

.helpdesk-notes-list {
  min-width: 0;
}

/* Заметка занимает всю ширину правой колонки */
.helpdesk-notes-list .ticket-article-item {
  width: 100%;
  max-width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.helpdesk-notes-list .ticket-article-item .textBubble {
  max-width: 100%;
}

/* Не создаём отдельный скролл в заметках */
.helpdesk-notes-column,
.helpdesk-notes-list {
  overflow: visible;
  max-height: none;
}

/* На относительно узком экране складываем блоки вертикально */
@media (max-width: 1150px) {
  .helpdesk-ticket-columns {
    grid-template-columns: 1fr;
  }

  .helpdesk-notes-column {
    border-left: 0;
    border-top: 1px solid rgba(127, 127, 127, 0.25);
    padding-left: 0;
    padding-top: 14px;
  }
}


/* ---------- Редактор заметки справа ---------- */

.helpdesk-note-composer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(127, 127, 127, 0.22);
}

.helpdesk-note-composer-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
}

.helpdesk-note-composer-host {
  width: 100%;
  min-width: 0;
}

.helpdesk-note-composer-host .article-new {
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

.helpdesk-note-editor {
  width: 100%;
  min-width: 0;
}

.helpdesk-note-editor .article-add {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.helpdesk-note-editor textarea,
.helpdesk-note-editor input,
.helpdesk-note-editor [contenteditable="true"] {
  max-width: 100%;
  box-sizing: border-box;
}

/*
 * Если редактор сейчас используется для ответа клиенту,
 * заголовок "Добавить заметку" справа нам не нужен.
 */
.helpdesk-note-composer:not(.is-active) {
  display: none;
}



/* ===== HelpDesk desktop collapsible navigation ===== */

/*
 * В Zammad кнопка уже существует, но штатно скрыта
 * на экранах desktop. Показываем её.
 */
@media screen and (min-width: 1260px) {
  #navigation.navigation .menu-item-navigation-toggle-button {
    display: flex !important;
  }
}



/* ===== HelpDesk collapsed navigation FIX ===== */

@media screen and (min-width: 1260px) {

  /*
   * В свёрнутом состоянии оставляем только компактную
   * навигацию. Список открытых заявок в 50px не нужен.
   */
  #app.navigation-collapsed
  #navigation.navigation:not(.is-not-collapsed)
  .tasks-navigation {
    display: none !important;
  }

  /*
   * Скрываем текстовые подписи в компактном состоянии.
   */
  #app.navigation-collapsed
  #navigation.navigation:not(.is-not-collapsed)
  .menu-item-name,

  #app.navigation-collapsed
  #navigation.navigation:not(.is-not-collapsed)
  .nav-tab-name {
    display: none !important;
  }

  /*
   * Центрируем иконки.
   */
  #app.navigation-collapsed
  #navigation.navigation:not(.is-not-collapsed)
  .menu-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
  }

  #app.navigation-collapsed
  #navigation.navigation:not(.is-not-collapsed)
  .menu-item-icon {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /*
   * Сам компактный режим.
   */
  #app.navigation-collapsed
  #navigation.navigation:not(.is-not-collapsed) {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
  }

  /*
   * Временное раскрытие.
   *
   * Не сдвигаем весь интерфейс, а открываем меню поверх
   * рабочей области.
   */
  #app.navigation-collapsed
  #navigation.navigation.is-not-collapsed {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;

    position: absolute !important;
    left: 0;
    top: 0;
    bottom: 0;

    z-index: 1000 !important;

    box-shadow:
      8px 0 20px rgba(0, 0, 0, 0.30);
  }

  /*
   * При временном раскрытии возвращаем историю/открытые
   * заявки и все подписи.
   */
  #app.navigation-collapsed
  #navigation.navigation.is-not-collapsed
  .tasks-navigation {
    display: block !important;
  }

  #app.navigation-collapsed
  #navigation.navigation.is-not-collapsed
  .menu-item-name,

  #app.navigation-collapsed
  #navigation.navigation.is-not-collapsed
  .nav-tab-name {
    display: flex !important;
  }

  /*
   * Выпадающие меню также не должны ужиматься до 50px.
   */
  #app.navigation-collapsed
  #navigation.navigation.is-not-collapsed
  .dropdown-menu {
    min-width: 220px !important;
  }
}



/* ===== HelpDesk desktop navigation V2 ===== */

@media screen and (min-width: 1260px) {

  /*
   * Показываем штатную кнопку Zammad со стрелками.
   */
  #navigation.navigation
  .menu-item-navigation-toggle-button {
    display: flex !important;
  }

  /*
   * Сужаем ТОЛЬКО главное левое меню.
   *
   * Никакого navigation-collapsed здесь нет,
   * поэтому NavBarAdmin, профиль, карточка заявки,
   * настройки и остальные панели остаются desktop.
   */
  #app.helpdesk-navigation-collapsed
  #navigation.navigation {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    flex: 0 0 50px !important;
  }

  /*
   * История открытых заявок в узкой полосе
   * не имеет смысла.
   */
  #app.helpdesk-navigation-collapsed
  #navigation .tasks-navigation {
    display: none !important;
  }

  /*
   * Текст основных пунктов скрываем.
   */
  #app.helpdesk-navigation-collapsed
  #navigation .menu-item-name,
  #app.helpdesk-navigation-collapsed
  #navigation .nav-tab-name {
    display: none !important;
  }

  /*
   * Иконки выравниваем по центру.
   */
  #app.helpdesk-navigation-collapsed
  #navigation .menu-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
  }

  #app.helpdesk-navigation-collapsed
  #navigation .menu-item-icon {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /*
   * Dropdown-стрелки в узком режиме не нужны.
   */
  #app.helpdesk-navigation-collapsed
  #navigation .dropdown-icon {
    display: none !important;
  }

  /*
   * Поле глобального поиска прячем,
   * оставляем сам значок поиска.
   */
  #app.helpdesk-navigation-collapsed
  #navigation #global-search {
    display: none !important;
  }

  #app.helpdesk-navigation-collapsed
  #navigation .search-holder {
    width: 50px !important;
    min-width: 50px !important;
  }

  /*
   * Внутренние административные панели
   * специально НЕ меняем.
   *
   * Например:
   * .NavBarAdmin.sidebar
   * .NavBarProfile.sidebar
   * .tabsSidebar .sidebar
   *
   * Они остаются штатной desktop-ширины.
   */
}


/* ---------- Дополнительная страховка цвета "В ожидании" ---------- */

.icon-task-state.pending {
  fill: #d98216 !important;
}

.task-state-pending-color {
  color: #d98216 !important;
}

.nav-tab.task-state-pending.is-active {
  background-color: #d98216 !important;
  color: #fff !important;
}



/* ===== HelpDesk compact navigation polish V3 ===== */

@media screen and (min-width: 1260px) {

  /* -------------------------------------------------------
     Общая геометрия compact navigation
     ------------------------------------------------------- */

  #app.helpdesk-navigation-collapsed
  #navigation.navigation {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    flex-basis: 50px !important;
  }

  #app.helpdesk-navigation-collapsed
  #navigation .menu,
  #app.helpdesk-navigation-collapsed
  #navigation .js-menu {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    flex-shrink: 0 !important;
  }


  /* -------------------------------------------------------
     Поиск
     ------------------------------------------------------- */

  #app.helpdesk-navigation-collapsed
  #navigation .search {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  #app.helpdesk-navigation-collapsed
  #navigation .search-holder {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  #app.helpdesk-navigation-collapsed
  #navigation .search-holder > .icon {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }


  /* -------------------------------------------------------
     Птичка / уведомления
     ------------------------------------------------------- */

  #app.helpdesk-navigation-collapsed
  #navigation .search .logo {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    left: auto !important;
    right: auto !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    position: relative !important;
    overflow: visible !important;
  }

  #app.helpdesk-navigation-collapsed
  #navigation .search .logo > .icon {
    margin: 0 !important;
    transform: none !important;
  }

  /*
   * Счётчик держим внутри 50px, а не позволяем
   * ему уезжать вправо.
   */
  #app.helpdesk-navigation-collapsed
  #navigation .activity-counter {
    position: absolute !important;

    top: 3px !important;
    right: 3px !important;
    left: auto !important;

    margin: 0 !important;
    transform: none !important;

    z-index: 5 !important;
  }


  /* -------------------------------------------------------
     Основные пункты меню
     ------------------------------------------------------- */

  #app.helpdesk-navigation-collapsed
  #navigation .menu-item {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    position: relative !important;
  }

  #app.helpdesk-navigation-collapsed
  #navigation .menu-item-icon {
    width: 24px !important;
    height: 24px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    flex: 0 0 24px !important;
  }

  #app.helpdesk-navigation-collapsed
  #navigation .menu-item-name,
  #app.helpdesk-navigation-collapsed
  #navigation .nav-tab-name {
    display: none !important;
  }

  #app.helpdesk-navigation-collapsed
  #navigation .dropdown-icon {
    display: none !important;
  }


  /* -------------------------------------------------------
     ЧАТ

     Полноразмерный switch в 50px нам не нужен.
     Убираем его и оставляем маленький индикатор состояния.
     ------------------------------------------------------- */

  #app.helpdesk-navigation-collapsed
  #navigation .menu-item .zammad-switch {
    display: none !important;
  }

  /*
   * Пункт, содержащий переключатель чата, получает
   * маленькую точку состояния.
   */
  #app.helpdesk-navigation-collapsed
  #navigation .menu-item:has(.zammad-switch)::after {
    content: "" !important;

    position: absolute !important;
    right: 5px !important;
    top: 8px !important;

    width: 7px !important;
    height: 7px !important;

    border-radius: 50% !important;
    background: #74787d !important;

    box-shadow: 0 0 0 2px var(--menu-background-primary) !important;
  }

  #app.helpdesk-navigation-collapsed
  #navigation .menu-item:has(.zammad-switch input:checked)::after {
    background: #35a875 !important;
  }


  /* -------------------------------------------------------
     Открытые / недавние заявки

     В compact режиме не показываем.
     ------------------------------------------------------- */

  #app.helpdesk-navigation-collapsed
  #navigation .tasks-navigation {
    display: none !important;
  }


  /* -------------------------------------------------------
     Нижний персональный блок:
     аватар / показатели / настройки и другие кнопки
     ------------------------------------------------------- */

  #app.helpdesk-navigation-collapsed
  #navigation .navbar-items-personal,
  #app.helpdesk-navigation-collapsed
  #navigation .user-menu {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    overflow: visible !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #app.helpdesk-navigation-collapsed
  #navigation .navbar-items-personal > li,
  #app.helpdesk-navigation-collapsed
  #navigation .user-menu > li {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    display: block !important;
    visibility: visible !important;
  }

  #app.helpdesk-navigation-collapsed
  #navigation .navbar-items-personal > li > a,
  #app.helpdesk-navigation-collapsed
  #navigation .user-menu > li > a {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;

    height: 48px !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    visibility: visible !important;
  }

  #app.helpdesk-navigation-collapsed
  #navigation .navbar-items-personal .menu-item-icon,
  #app.helpdesk-navigation-collapsed
  #navigation .user-menu .menu-item-icon,
  #app.helpdesk-navigation-collapsed
  #navigation .navbar-items-personal .icon,
  #app.helpdesk-navigation-collapsed
  #navigation .user-menu .icon {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /*
   * На всякий случай текст персонального меню тоже
   * не должен занимать ширину.
   */
  #app.helpdesk-navigation-collapsed
  #navigation .navbar-items-personal .menu-item-name,
  #app.helpdesk-navigation-collapsed
  #navigation .user-menu .menu-item-name {
    display: none !important;
  }


  /* -------------------------------------------------------
     Штатная кнопка раскрытия
     ------------------------------------------------------- */

  #app.helpdesk-navigation-collapsed
  #navigation .menu-item-navigation-toggle-button {
    display: flex !important;

    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;

    padding: 0 !important;

    justify-content: center !important;
    align-items: center !important;
  }
}



/* ===== HelpDesk compact logo relocate V4 ===== */

@media screen and (min-width: 1260px) {

  #app.helpdesk-navigation-collapsed
  #navigation .helpdesk-compact-logo-slot {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 48px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    list-style: none !important;
    position: relative !important;
    overflow: visible !important;
  }

  #app.helpdesk-navigation-collapsed
  #navigation .helpdesk-compact-logo-slot .logo {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    overflow: visible !important;
  }

  #app.helpdesk-navigation-collapsed
  #navigation .helpdesk-compact-logo-slot .logo > .icon {
    margin: 0 !important;
    transform: none !important;
  }

  #app.helpdesk-navigation-collapsed
  #navigation .helpdesk-compact-logo-slot .activity-counter {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    left: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 5 !important;
  }
}


/* ===== HelpDesk compact logo relocate V5 ===== */

@media screen and (min-width: 1260px) {

  #navigation .helpdesk-compact-logo-slot {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;

    height: 48px !important;
    min-height: 48px !important;

    padding: 0 !important;
    margin: 0 !important;

    list-style: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    position: relative !important;
    overflow: visible !important;
  }

  #navigation
  .helpdesk-compact-logo-slot
  .logo {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;

    height: 48px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;

    overflow: visible !important;
  }

  #navigation
  .helpdesk-compact-logo-slot
  .logo > .icon {
    margin: 0 !important;
    transform: none !important;
  }

  #navigation
  .helpdesk-compact-logo-slot
  .activity-counter {
    position: absolute !important;

    top: 4px !important;
    right: 3px !important;

    left: auto !important;
    bottom: auto !important;

    margin: 0 !important;
    transform: none !important;

    z-index: 10 !important;
  }
}