/* Боковое меню CRM в стилистике макетов DETAGRAM 2026 (мотивация, база
   знаний, календарь): светлая панель с пастельными бликами, скруглённые
   пункты, активный — градиент, профиль внизу карточкой.

   Свёрнуто — узкая полоса 80px с иконками; по наведению плавно выезжает
   поверх страницы до 264px и складывается, когда курсор уходит. Иконки в
   обоих состояниях стоят на одном месте, подписи проявляются справа.
   Свёрнутый вид действует сразу, без скрипта (02.10.2026): правила написаны
   через html:not(.aside-expanded) — раньше они ждали класса aside-collapsed
   от отложенного aside-toggle.js, и при обновлении мелькала старая тёмная панель.

   Полоса прилипает к верху окна и остаётся на экране при прокрутке. */

/* ===== Фон страниц во весь экран =====
   Новые экраны рисуют свой фон внутри блока, а вокруг оставался белый
   холст Orchid: на широком мониторе виден «квадрат» и белые поля. Фон
   отдаём самой странице, а ограничение ширины контейнера снимаем. */
body:has(.dc), body:has(.ts), body:has(.tse), body:has(.ntf) { background: #f3f6f4 !important; }
body:has(.kb), body:has(.mvp), body:has(.mvd2) { background: #f0f5f5 !important; }
body:has(.dc, .ts, .tse, .kb, .mvp, .mvd2) .container-xl,
body:has(.dc, .ts, .tse, .kb, .mvp, .mvd2) .workspace-limit { max-width: none !important; }
body:has(.dc, .ts, .tse, .kb, .mvp, .mvd2) .row { justify-content: flex-start !important; }

@media (min-width: 992px) {
  .row > .aside {
    --rail: 80px;
    --wide: 264px;
    --ink: #344750;
    --ink-soft: #708087;
    --line: rgba(77, 101, 112, .10);
    --ease: cubic-bezier(.45, .05, .2, 1); /* мягкий разгон и торможение — без рывка на первом кадре */
    --icon-left: 18px; /* 12px внешний отступ пункта + 18px внутри = иконка 20px по центру полосы 80px */
  }

  /* ---- Сама панель ----
     Всегда закреплена у левого края: при наведении меняется только её
     ширина, а страница ничего не пересчитывает — отсюда плавность.
     Содержимое внутри держим на фиксированной ширине развёрнутого
     состояния: полоса просто открывает его больше, текст не переверстывается. */
  html:not(.aside-expanded) .row > .aside {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    width: var(--rail) !important;
    max-width: var(--rail) !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(77, 101, 112, .22) transparent;
    z-index: 1250;
    color: var(--ink);
    color-scheme: light;
    background:
      radial-gradient(circle at 8% 1%, rgba(173, 205, 239, .64), transparent 30%),
      radial-gradient(circle at 95% 88%, rgba(226, 241, 190, .50), transparent 34%),
      #eaf1f2 !important;
    border-right: 1px solid var(--line);
    box-shadow: 0 0 0 rgba(85, 107, 116, 0);
    will-change: width;
    transition: width .42s var(--ease), max-width .42s var(--ease), box-shadow .42s var(--ease);
  }
  html:not(.aside-expanded) .row > .aside::-webkit-scrollbar { width: 6px; }
  html:not(.aside-expanded) .row > .aside::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(77, 101, 112, .22); }
  html:not(.aside-expanded):not(.aside-peek) .row > .aside::-webkit-scrollbar { width: 0; }
  html:not(.aside-expanded):not(.aside-peek) .row > .aside { scrollbar-width: none; }
  /* Шапка и меню — всегда шириной развёрнутой панели. */
  html:not(.aside-expanded) .row > .aside > header,
  html:not(.aside-expanded) .row > .aside > nav { width: var(--wide) !important; flex: 0 0 auto; }
  html:not(.aside-expanded) .row > .aside > nav {
    flex: 1 1 auto;
    height: auto !important;
    min-height: calc(100vh - 74px) !important;
    display: flex !important;
    flex-direction: column;
    opacity: 1 !important;
    visibility: visible !important;
  }
  html:not(.aside-expanded) .row > .aside > nav > ul { flex: 0 0 auto; }
  html:not(.aside-expanded) .row > .aside > nav > footer {
    margin-top: auto;
    background: linear-gradient(transparent, #eaf1f2 30%);
  }
  html:not(.aside-expanded) .row > .aside .bg-dark { background: transparent !important; }
  html:not(.aside-expanded) .row > .aside .text-white,
  html:not(.aside-expanded) .row > .aside .text-body-emphasis { color: var(--ink) !important; }
  html:not(.aside-expanded) .row > .aside .text-muted { color: var(--ink-soft) !important; }
  html:not(.aside-expanded) .row > .aside .divider { border-bottom-color: var(--line); }

  /* Панель вне потока, поэтому соседняя колонка всегда отступает на её
     ширину. basis 0, а не auto: у широких таблиц (табель) содержимое иначе
     не помещается, и колонка переносится под меню. mx-auto объявлен с
     !important — перебиваем так же. */
  html:not(.aside-expanded) .row > .aside + div {
    flex: 1 1 0;
    max-width: none;
    width: auto;
    min-width: 0;
    margin-left: var(--rail-space, 80px) !important;
    margin-right: 0 !important;
  }

  /* ---- Шапка: логотип на месте иконок, название проявляется ---- */
  html:not(.aside-expanded) .row > .aside header {
    justify-content: flex-start;
    align-items: center;
    min-height: 74px;
    padding: 18px 12px 10px 24px !important;
    margin-top: 0 !important;
    white-space: nowrap;
    overflow: hidden;
  }
  html:not(.aside-expanded) .row > .aside .header-toggler { display: none !important; }
  html:not(.aside-expanded) .row > .aside .header-brand { order: 0; margin: 0; text-decoration: none; }
  html:not(.aside-expanded) .row > .aside .header-brand .h2 {
    display: flex; align-items: center; gap: 12px; margin: 0;
    font-size: 19px; font-weight: 650; letter-spacing: .02em; color: var(--ink);
  }
  /* Знак бренда: куб DETAGRAM одним цветом в светлом круге — как brand-mark
     в макетах. Растровый detagram2.png с чёрным фоном в 32px превращался в
     тёмное пятно, поэтому подменяем картинку векторным logo.svg. */
  html:not(.aside-expanded) .row > .aside .header-brand img {
    content: url('/assets/icons/logo.svg');
    display: block !important;
    box-sizing: border-box;
    width: 34px; max-width: none; height: 34px; margin: 0; padding: 7px;
    object-fit: contain;
    border-radius: 50%;
    border: 1px solid rgba(68, 91, 102, .20);
    background: #fff;
    box-shadow: 0 4px 12px rgba(83, 105, 114, .10);
    filter: none !important;
  }
  html:not(.aside-expanded) .row > .aside .header-brand p {
    display: block !important;
    margin: 0 !important;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .18s var(--ease), transform .18s var(--ease);
  }

  /* ---- Поиск (если включён): светлая полоска, в свёрнутом виде спрятан ---- */
  html:not(.aside-expanded) .row > .aside nav > .p-3 { padding: 4px 12px 10px !important; }
  html:not(.aside-expanded) .row > .aside nav > .p-3 .form-control {
    height: 40px; border-radius: 13px; border: 1px solid var(--line);
    background: rgba(255,255,255,.62) !important; color: var(--ink) !important;
  }
  html:not(.aside-expanded):not(.aside-peek) .row > .aside nav > .p-3 { display: none; }

  /* ---- Пункты: иконка в одной точке, подпись справа ---- */
  html:not(.aside-expanded) .row > .aside .nav { --bs-nav-link-color: var(--ink-soft) !important; }
  html:not(.aside-expanded) .row > .aside .nav-pills > .nav-item { margin: 0 12px; }
  html:not(.aside-expanded) .row > .aside .nav-pills > .nav-item.mt-3 { margin-top: 12px !important; }
  html:not(.aside-expanded) .row > .aside .nav-item > small {
    display: block;
    margin: 0 0 4px 30px !important;
    color: rgba(67, 87, 97, .48) !important;
    font-size: 11px; font-weight: 650; letter-spacing: .11em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden;
    opacity: 0;
    transition: opacity .18s var(--ease);
  }
  html:not(.aside-expanded) .row > .aside .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px 0 var(--icon-left) !important;
    border-radius: 14px;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    transition: color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
  }
  html:not(.aside-expanded) .row > .aside .nav-link svg { flex: 0 0 auto; width: 20px; height: 20px; }
  html:not(.aside-expanded) .row > .aside .nav-link:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, .58);
  }
  html:not(.aside-expanded) .row > .aside .nav-link:active { transform: scale(.985); }
  html:not(.aside-expanded) .row > .aside .nav-link.active {
    color: #40545d !important;
    font-weight: 650;
    background: linear-gradient(135deg, #d8e9f7 0%, #e7f1c8 100%) !important;
    box-shadow: 0 9px 24px rgba(100, 127, 138, .10);
  }
  /* ---- Пункт не может быть шире панели ----
     Самая длинная подпись («Order (старый список)») с white-space:nowrap
     растягивала колонку меню до 289px внутри панели в 264px, и счётчики
     у ВСЕХ пунктов уезжали за правый край — из-под панели торчали только
     их края. Теперь подпись обрезается многоточием, а счётчик остаётся
     на месте. */
  html:not(.aside-expanded) .row > .aside > nav > ul,
  html:not(.aside-expanded) .row > .aside .sub-menu > .nav {
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  html:not(.aside-expanded) .row > .aside .nav-item {
    min-width: 0;
    max-width: calc(100% - 24px); /* 24px — боковые отступы пункта */
  }
  html:not(.aside-expanded) .row > .aside .nav-link { min-width: 0; max-width: 100%; }
  html:not(.aside-expanded) .row > .aside .nav-link .badge { flex: 0 0 auto; }
  html:not(.aside-expanded) .row > .aside .nav-link .text-break {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .18s var(--ease), transform .18s var(--ease);
  }
  html:not(.aside-expanded) .row > .aside .nav-link .badge {
    margin-left: auto;
    min-width: 24px;
    padding: 3px 7px !important;
    border-radius: 999px;
    font-size: 11px; font-weight: 650;
    color: #66808b !important;
    background: rgba(88, 113, 124, .10) !important;
    opacity: 0;
    transition: opacity .18s var(--ease);
  }
  html:not(.aside-expanded) .row > .aside .nav-link .badge.bg-danger { color: #7b5048 !important; background: #f3c2b6 !important; }
  html:not(.aside-expanded) .row > .aside .nav-link.active .badge { color: #fff !important; background: #90aecb !important; }

  /* Свёрнуто: у пункта со счётчиком — точка у иконки. */
  html:not(.aside-expanded) .row > .aside .nav-link:has(.badge:not(:empty))::after {
    content: "";
    position: absolute; top: 9px; left: calc(var(--icon-left) + 15px);
    width: 8px; height: 8px; border-radius: 50%;
    background: #75a7ff; box-shadow: 0 0 0 2px #eaf1f2;
    transition: opacity .16s var(--ease);
  }
  html:not(.aside-expanded) .row > .aside .nav-link:has(.badge.bg-danger:not(:empty))::after { background: #ff8661; }
  html:not(.aside-expanded).aside-peek .row > .aside .nav-link:has(.badge:not(:empty))::after { opacity: 0; }

  /* Подменю только в развёрнутом виде. */
  html:not(.aside-expanded):not(.aside-peek) .row > .aside .sub-menu { display: none !important; }
  html:not(.aside-expanded) .row > .aside .sub-menu .vr { background: var(--line); opacity: 1; }
  html:not(.aside-expanded) .row > .aside .divider { margin: 8px 24px !important; }
  html:not(.aside-expanded) .row > .aside .to-top { display: none !important; }

  /* ---- Профиль внизу: карточка ---- */
  html:not(.aside-expanded) .row > .aside footer { padding: 10px 12px 14px; }
  html:not(.aside-expanded) .row > .aside footer > div { padding-bottom: 0 !important; }
  html:not(.aside-expanded) .row > .aside .profile-container {
    display: flex; align-items: center; gap: 10px;
    padding: 8px !important;
    margin: 0;
    border: 1px solid rgba(72, 94, 104, .11);
    border-radius: 17px;
    background: rgba(255, 255, 255, .62) !important;
    transition: background .2s var(--ease);
  }
  html:not(.aside-expanded) .row > .aside .profile-container:hover { background: rgba(255, 255, 255, .86) !important; }
  html:not(.aside-expanded) .row > .aside .profile-container > a {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
    gap: 10px !important;
    margin: 0;
    padding: 0;
  }
  html:not(.aside-expanded) .row > .aside .profile-container img.avatar {
    width: 38px; height: 38px; flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .72);
    object-fit: cover;
  }
  html:not(.aside-expanded) .row > .aside .profile-container small {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .18s var(--ease), transform .18s var(--ease);
  }
  html:not(.aside-expanded) .row > .aside .profile-container small span {
    display: block; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html:not(.aside-expanded) .row > .aside .profile-container small span:first-child { font-size: 13px; font-weight: 650; color: var(--ink) !important; }
  html:not(.aside-expanded) .row > .aside .profile-container small span:last-child { font-size: 11px; color: var(--ink-soft) !important; }
  html:not(.aside-expanded) .row > .aside .profile-container > a.m-auto,
  html:not(.aside-expanded) .row > .aside .profile-container > .dropdown,
  html:not(.aside-expanded) .row > .aside .profile-container > [data-controller] {
    opacity: 0;
    transition: opacity .18s var(--ease);
  }

  /* ---- Наведение: панель становится шире, страница на месте ---- */
  html:not(.aside-expanded).aside-peek .row > .aside {
    /* Ширину классической полосы прокрутки (Windows) меряет aside-toggle.js
       и кладёт в --aside-sb: содержимое внутри остаётся ровно --wide, а
       полоса получает своё место и ничего не перекрывает. */
    width: calc(var(--wide) + var(--aside-sb, 0px)) !important;
    max-width: calc(var(--wide) + var(--aside-sb, 0px)) !important;
    box-shadow: 18px 0 55px rgba(85, 107, 116, .16);
    scrollbar-gutter: stable;
  }
  /* Классическая полоса прокрутки (Windows) занимает место: у пунктов
     справа остаётся запас, чтобы счётчики не уходили под неё. */
  html:not(.aside-expanded).aside-peek .row > .aside .nav-link { padding-right: 18px !important; }
  html:not(.aside-expanded).aside-peek .row > .aside .nav-link .text-break,
  html:not(.aside-expanded).aside-peek .row > .aside .nav-link .badge,
  html:not(.aside-expanded).aside-peek .row > .aside .nav-item > small,
  html:not(.aside-expanded).aside-peek .row > .aside .header-brand p,
  html:not(.aside-expanded).aside-peek .row > .aside .profile-container small,
  html:not(.aside-expanded).aside-peek .row > .aside .profile-container > a.m-auto,
  html:not(.aside-expanded).aside-peek .row > .aside .profile-container > .dropdown,
  html:not(.aside-expanded).aside-peek .row > .aside .profile-container > [data-controller] {
    opacity: 1;
    transform: none;
    transition-delay: .1s;
  }

  .aside-toggle { display: none !important; }
}

/* ===== Узкий экран: панель Orchid выезжает поверх страницы =====
   Ниже 992px всё оформление выше не работает, и там пункт меню тоже
   растягивался подписью, пряча счётчик за краем. */
@media (max-width: 991.98px) {
  .row > .aside .nav-link { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .row > .aside .nav-link .text-break {
    flex: 0 1 auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .row > .aside .nav-link .badge { flex: 0 0 auto; margin-left: auto; }
  .row > .aside .nav { flex-wrap: nowrap; min-width: 0; }
  .row > .aside .nav-item { min-width: 0; max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.aside-expanded) .row > .aside,
  html:not(.aside-expanded) .row > .aside * { transition: none !important; }
}

/* ---- Колокольчик в карточке профиля: круглая кнопка внутри карточки, счётчик в её углу.
   Стандартный значок Orchid здесь белый на белом и наполовину вылезал за карточку. ---- */
html body .row > .aside .profile-container > a[data-controller="notification"] {
  flex: 0 0 auto !important;
  width: 36px !important; height: 36px !important;
  margin: 0 0 0 auto !important; padding: 0 !important;
  display: grid !important; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(72, 94, 104, .12);
  color: #40545d !important;
  box-shadow: 0 4px 12px rgba(49, 72, 64, .08);
  transition: background .16s ease, box-shadow .16s ease, opacity .18s ease;
}
html body .row > .aside .profile-container > a[data-controller="notification"]:hover {
  background: #fff;
  box-shadow: 0 8px 18px rgba(49, 72, 64, .14);
  color: #347dcc !important;
}
html body .row > .aside .profile-container > a[data-controller="notification"] > svg { width: 17px; height: 17px; }
html body .row > .aside .profile-container > a[data-controller="notification"] .badge {
  position: absolute;
  top: -4px !important; right: -4px !important; left: auto !important;
  transform: none !important;
  aspect-ratio: auto !important;
  min-width: 18px; height: 18px;
  padding: 0 5px !important;
  box-sizing: border-box;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 750; line-height: 1;
  color: #fff !important;
  background: #ff8661 !important;
  border: 2px solid #f3f7f5;
}
html body .row > .aside .profile-container > a[data-controller="notification"] .badge:empty { display: none; }
html body .row > .aside .profile-container > a[data-controller="notification"] .badge svg { width: 6px; height: 6px; }

/* Свёрнутая панель: колокольчик спрятан, поэтому непрочитанное показываем точкой на карточке. */
html:not(.aside-expanded):not(.aside-peek) .row > .aside .profile-container:has([data-notification-target="badge"]:not(:empty))::after {
  content: "";
  /* Карточка шире свёрнутой панели (240px при 80px), поэтому точку привязываем к аватару, а не к правому краю. */
  position: absolute; top: 6px; left: 37px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #ff8661;
  box-shadow: 0 0 0 2px #fff;
  transition: opacity .16s ease;
}