/* Боковой блок навигации HQ (п. 300, Д141). Цвета — из схемы HQ. */

:root{
  /* Полоса под блок: его ширина плюс отступы слева и справа от него.
     ⚠️ Содержимое HQ не должно заходить под блок НИГДЕ — ни «Диалоги»,
     ни канбан с прокруткой вбок, ни окна. Поэтому это настоящий отступ
     приложения, а не только видимый зазор. */
  --rail-w:60px;
  --rail-gap:12px;
  --rail-space:calc(var(--rail-w) + var(--rail-gap) * 2);
  --rail-ms:350ms;   /* решение владельца: исключение из «до ~250 мс» */

  /* Раскрытие по наведению (п. 305, Д144). Разные длительности туда и
     обратно — решение владельца: раскрывается мягче, сворачивается
     быстрее. Кривая та же, что у подложки, — из прототипа. */
  /* ⚠️ Ширина посчитана, а не на глаз: самая длинная подпись —
     «Заявки собственников», 141 px в этом шрифте (замерено 02.11.2026).
     Плюс отступы 16 + 22, иконка 20, зазор 10 и 30 px под кружок цифры,
     иначе он наползает на хвост подписи. При 218 px «Обработка квартиры»
     обрезалась в «Обработка квартирь». */
  --rail-open-w:248px;
  --rail-open-ms:450ms;
  --rail-close-ms:350ms;
  --rail-ease:cubic-bezier(.22,1,.36,1);

  /* Полупрозрачность панели. ⚠️ Она ОБЯЗАТЕЛЬНА и должна быть хорошо
     видна: сквозь раскрытую панель содержимое читается размытым. Доля
     подложки подобрана к виду прототипа (там .22 светлая / .28 тёмная),
     но цвет берётся токеном схемы HQ, а не из прототипа. */
  --rail-glass:22%;
  --rail-blur:5px;
}
:root[data-theme="dark"]{
  --rail-glass:28%;
}

/* Один полупрозрачный блок с размытием, по центру экрана по вертикали,
   высотой РОВНО по кнопкам — не до низа. */
.rail{
  position:fixed;top:50%;left:var(--rail-gap);transform:translateY(-50%);
  /* ⚠️ Слой панели ВЫШЕ закреплённой полосы кнопок (`.edbar`, 40) и шапок
     (3, 30), но НИЖЕ модальных окон (`.modal`, 60): раскрытая панель
     должна лежать поверх страницы, а не уходить под неё. Поймано 02.11.2026
     (п. 315): полоса кнопок закрыла подпись «Тёмная тема». */
  width:var(--rail-w);padding:8px;z-index:50;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  border-radius:22px;
  background:color-mix(in srgb, var(--menu) var(--rail-glass), transparent);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(var(--rail-blur)) saturate(1.4);
  backdrop-filter:blur(var(--rail-blur)) saturate(1.4);
  box-shadow:var(--shadow);
  overflow:hidden;
  /* ⚠️ Раскрытие меняет ТОЛЬКО ширину самой панели. Отступ приложения
     (`--rail-space`) считается по свёрнутой ширине и не трогается —
     поэтому содержимое не сдвигается, панель едет поверх него. */
  transition:width var(--rail-open-ms) var(--rail-ease);
}
/* Раскрытая — на один слой ниже модального окна, чтобы накрывать всё
   остальное на странице и ничего из модальных. */
.rail--open{width:var(--rail-open-w);z-index:59}
.rail:not(.rail--open){transition-duration:var(--rail-close-ms)}
.rail-logo{height:34px;display:flex;align-items:center;padding:0 11px;
  font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.rail-sep{width:24px;height:1px;background:var(--line);margin:6px 0 6px 11px;flex:none;
  transition:width var(--rail-open-ms) var(--rail-ease)}
.rail--open .rail-sep{width:calc(100% - 22px)}

.rail-grp{position:relative;display:flex;flex-direction:column;gap:2px;
  width:100%;align-items:flex-start;
  transition:height var(--rail-ms) cubic-bezier(.22,1,.36,1)}
/* ⚠️ Обрезка — ТОЛЬКО пока идёт смена высоты. Постоянный `overflow:hidden`
   срезал всплывающую подпись: она стоит правее блока, и её не было видно
   вовсе (поймано замером 02.11.2026). Заодно блок перестаёт быть
   прокручиваемым вбок. */
.rail-grp--anim{overflow:hidden}

/* Залитая подложка выбранной кнопки переезжает, а не перекрашивается. */
.rail-ind{position:absolute;left:0;top:0;width:42px;height:42px;
  border-radius:14px;background:var(--text);z-index:0;
  transition:transform var(--rail-ms) var(--rail-ease),
             width var(--rail-open-ms) var(--rail-ease);
  will-change:transform}
.rail--open .rail-ind{width:100%}
.rail:not(.rail--open) .rail-ind{
  transition-duration:var(--rail-ms),var(--rail-close-ms)}

.rail-btn{position:relative;z-index:1;width:42px;height:42px;flex:none;
  border:0;border-radius:14px;background:none;color:var(--text2);
  cursor:pointer;display:flex;align-items:center;gap:10px;
  justify-content:flex-start;padding:0 11px;
  transition:color var(--rail-ms),width var(--rail-open-ms) var(--rail-ease)}
.rail--open .rail-btn{width:100%}
.rail:not(.rail--open) .rail-btn{transition-duration:var(--rail-ms),var(--rail-close-ms)}
.rail-btn svg{flex:none}

/* Подпись РЯДОМ с иконкой — появляется вместе с раскрытием (п. 305).
   ⚠️ Не `display:none`: скрытая так подпись не умеет проявляться плавно,
   и текст возникал бы рывком в конце раскрытия. */
.rail-name{white-space:nowrap;overflow:hidden;font-size:13px;
  max-width:0;opacity:0;
  transition:max-width var(--rail-open-ms) var(--rail-ease),
             opacity calc(var(--rail-open-ms) / 2) var(--rail-ease)}
.rail--open .rail-name{max-width:150px;opacity:1;
  transition-delay:0s,calc(var(--rail-open-ms) / 3)}
.rail:not(.rail--open) .rail-name{
  transition-duration:var(--rail-close-ms),calc(var(--rail-close-ms) / 2)}
.rail-btn:hover{background:var(--hover);color:var(--text)}
.rail-btn[aria-current="page"],.rail-btn[aria-current="true"]{color:var(--bg)}
.rail-btn[aria-current="page"]:hover,.rail-btn[aria-current="true"]:hover{background:none}
.rail-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rail-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Кнопка темы живёт в блоке и выглядит как остальные. Действие её не
   менялось — его делает `data-act="theme"` (см. crm_preferences.js). */
/* ⚠️ `position:relative` — чтобы всплывающая подпись по долгому нажатию
   встала у самой кнопки, а не у панели (п. 311): `.rail-tip` абсолютная. */
.rail .theme-toggle{position:relative;width:42px;min-width:42px;height:42px;flex:none;
  padding:0 11px;border:0;border-radius:14px;background:none;color:var(--text2);
  box-shadow:none;display:flex;align-items:center;gap:10px;justify-content:flex-start;
  transition:width var(--rail-open-ms) var(--rail-ease)}
.rail--open .theme-toggle{width:100%}
.rail .theme-toggle:hover{background:var(--hover);color:var(--text)}
.rail .theme-toggle svg{width:20px;height:20px}

/* Цифры — кружком НА иконке, а не строкой рядом. */
.rail .dialog-nav-count,.rail .nav-count{position:absolute;top:1px;right:7px;
  margin:0;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  font-size:10px;line-height:17px;
  background:var(--text);color:var(--bg);border:1.5px solid var(--menu)}
.rail .rail-btn[aria-current="page"] .dialog-nav-count,
.rail .rail-btn[aria-current="page"] .nav-count{background:var(--bg);color:var(--text)}

/* Подпись всплывает у кнопки: при наведении мышью, а на устройствах без
   мыши — по долгому нажатию (класс ставит `railLongPress`). */
.rail-tip{position:absolute;left:52px;top:50%;
  transform:translate(-4px,-50%);padding:5px 10px;border-radius:9px;
  background:var(--text);color:var(--bg);font-size:12px;white-space:nowrap;
  opacity:0;pointer-events:none;z-index:2;
  transition:opacity .15s,transform .15s}
/* ⚠️ При наведении мышью подпись БОЛЬШЕ НЕ всплывает (п. 305, решение
   владельца): её заменило раскрытие панели. Остаётся долгое нажатие на
   устройствах без мыши — класс ставит `railLongPress`. */
.rail-btn--tip .rail-tip{opacity:1;transform:translate(0,-50%)}

/* Каркас: один столбец, слева полоса под блок. */
/* ⚠️ Блок живёт рядом с `#root`, а не внутри `.app` (п. 300): перерисовка
   экрана его не трогает. Поэтому полосу под него держит сам `.app`. */
.app{grid-template-columns:1fr;padding-left:var(--rail-space)}

/* Телефон не трогаем: там остаётся нижняя полоса, блока нет вовсе. */
/* Планшет и всё без мыши: раскрытия нет, подпись — по долгому нажатию. */
@media(hover:none){
  .rail,.rail--open{width:var(--rail-w)}
  .rail-name{display:none}
}

@media(max-width:980px){
  .rail{display:none}
  .app{padding-left:0}
}

@media(prefers-reduced-motion:reduce){
  .rail,.rail-ind,.rail-grp,.rail-btn,.rail-tip,.rail-name,.rail-sep{transition:none!important}
}