/* Каркас CRM v2 (docs/design-crm-v2.md, разделы 5 и 9): светлая навигация
 * 232 px слева и область содержимого справа. Перенесено из ui.css (разделы
 * «Каркас приложения» и «Один вертикальный скролл») и переделано под v2.
 * Цвета, кегли и радиусы — только токены tokens.css (группа --nav-* — свой
 * блок там же); поля и размеры — значения спецификации.
 *
 * Точки перелома — числами (переменные в @media не работают):
 *   ≥ 1180   десктоп: навигация в потоке, прокручивается только содержимое;
 *   768–1179 планшет: верхняя панель, навигация выезжает (drawer_controller);
 *   < 768    телефон: прокручивается страница, верхняя панель липкая. */

/* ============================================================
 * Каркас: высота окна, своя прокрутка у содержимого (десктоп, планшет)
 * ============================================================ */

.app-body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.app-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.app-frame {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-page);
}

/* ============================================================
 * Навигация: белая панель с границей справа. Сверху знак и аккаунт,
 * ниже группы пунктов (прокручиваются, если не влезли по высоте),
 * внизу сотрудник и «Выйти». На десктопе — колонка в потоке, в
 * компактном режиме — выезжающая панель (ниже).
 * ============================================================ */

.app-sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--nav-bg);
  border-right: 1px solid var(--nav-border);
  color: var(--nav-text);
}

.app-brand {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 12px 0;
  padding: 4px 8px;
}

/* Знак «АР» 30×30 — в навигации и в верхней панели */
.app-brand-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--surface);
  font-size: var(--font-size-chip);
  font-weight: 700;
  letter-spacing: .02em;
}

.app-brand__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-brand-name {
  font-size: var(--font-size-h2);
  line-height: 20px;
  font-weight: 600;
  color: var(--text);
}

/* Название аккаунта под знаком — 12 приглушённым */
.app-brand__account {
  font-size: var(--font-size-hint);
  line-height: 16px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* «Смотреть как» демо-стенда (Demo::ProfileSwitch) под названием аккаунта:
 * не часть продукта — пунктирная рамка, жёлтый фон и тег «Демо» отделяют
 * его от навигации. Список — по ширине панели, подпись — что видит профиль */
.demo-switch {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 12px 0;
  padding: 8px;
  border: 1px dashed var(--warning-border);
  border-radius: var(--radius);
  background: var(--warning-bg);
}

.demo-switch__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  font-weight: 500;
  color: var(--text-secondary);
}

.demo-switch__tag {
  padding: 0 6px;
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-badge);
  background: var(--surface);
  color: var(--warning);
  font-weight: 600;
}

.demo-switch__select {
  width: 100%;
  min-width: 0;
  height: var(--control-height-sm);
  padding: 0 8px;
  background: var(--surface);
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: var(--font-size-secondary);
  text-overflow: ellipsis;
  cursor: pointer;
}

.demo-switch__select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* «Перейти» — только без JS: auto-submit ставит hidden, .btn его перебивает */
.demo-switch .btn[hidden] {
  display: none;
}

.demo-switch__hint {
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* Группы «Деньги», «Объекты и договоры», «Команда»: между группами 20 */
.app-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.app-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-nav-group__label {
  padding: 0 10px 6px;
  font-size: var(--font-size-label);
  line-height: 16px;
  font-weight: 500;
  color: var(--text-muted);
}

/* Пункт: высота 36, радиус 8, иконка 18, текст 14·500 */
.app-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--radius);
  color: var(--nav-text);
  font-size: var(--font-size-base);
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
}

.app-nav-item:hover {
  background: var(--nav-hover-bg);
  color: var(--text);
  text-decoration: none;
}

.app-nav-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Выбранный: фон и текст акцентом, 600; в разметке — aria-current="page" */
.app-nav-item--active,
.app-nav-item--active:hover {
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
  font-weight: 600;
}

.app-nav-item__icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--nav-icon);
}

.app-nav-item:hover .app-nav-item__icon {
  color: var(--text-secondary);
}

.app-nav-item--active .app-nav-item__icon,
.app-nav-item--active:hover .app-nav-item__icon {
  color: var(--nav-active-text);
}

.app-nav-item__label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Счётчик справа: высота 20, пилюля, 12·600; тон по смыслу —
 * warning (ждёт действия), danger (долг), neutral (справка) */
.app-nav-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-chip);
  line-height: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.app-nav-badge--warning { color: var(--warning); background: var(--warning-bg); }
.app-nav-badge--danger  { color: var(--danger);  background: var(--danger-bg); }
.app-nav-badge--neutral { color: var(--neutral); background: var(--neutral-bg); }

/* Сотрудник: аватар-инициалы, имя (без него — email), роль и компания —
 * в кнопке меню «кто я» верхней панели (shared/_user_menu) */
.app-user {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--accent-bg);
  color: var(--accent);
  font-size: var(--font-size-chip);
  font-weight: 600;
}

.app-user__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-user-name {
  font-size: var(--font-size-secondary);
  line-height: 18px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-user__role {
  font-size: var(--font-size-hint);
  line-height: 16px;
  color: var(--text-muted);
}

.app-user__meta {
  display: flex;
  min-width: 0;
  gap: 4px;
  font-size: var(--font-size-hint);
  line-height: 16px;
  color: var(--text-muted);
  white-space: nowrap;
}

.app-user__account {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-user__role + .app-user__account::before {
  content: "· ";
}

/* ============================================================
 * Меню «кто я» в верхней панели (по образцу шапки ПланФакта): кнопка —
 * аватар, имя и «роль · компания»; панель — «Смотреть как» демо-стенда,
 * разделы аккаунта, «Сменить компанию» и «Выйти». <details> без JS;
 * закрытие снаружи и по Esc — user_menu_controller
 * ============================================================ */

.app-user-menu {
  position: relative;
  flex: none;
  margin-left: auto;
}

.app-user-menu__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 320px;
  min-height: 44px;
  padding: 4px 8px;
  border-radius: var(--radius);
  list-style: none;
  cursor: pointer;
}

.app-user-menu__trigger::-webkit-details-marker {
  display: none;
}

.app-user-menu__trigger:hover {
  background: var(--nav-hover-bg);
}

.app-user-menu__trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.app-user-menu__demo {
  flex: none;
  padding: 0 6px;
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-badge);
  background: var(--warning-bg);
  color: var(--warning);
  font-size: var(--font-size-chip);
  line-height: 18px;
  font-weight: 600;
}

.app-user-menu__chevron {
  flex: none;
  color: var(--text-muted);
  transition: transform .15s ease-out;
}

.app-user-menu[open] .app-user-menu__chevron {
  transform: rotate(180deg);
}

.app-user-menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  width: 300px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-panel);
  box-shadow: var(--ios-shadow-popover);
}

.app-user-menu__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px 10px;
  border-bottom: 1px solid var(--border-soft);
}

.app-user-menu__email {
  font-size: var(--font-size-secondary);
  line-height: 18px;
  font-weight: 500;
  color: var(--text);
  overflow-wrap: anywhere;
}

.app-user-menu__scope {
  font-size: var(--font-size-hint);
  line-height: 16px;
  color: var(--text-muted);
}

/* «Смотреть как» внутри панели — та же пунктирная рамка, по ширине панели */
.app-user-menu .demo-switch {
  margin: 8px 0 0;
}

.app-user-menu__list {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}

.app-user-menu__list + .app-user-menu__list {
  border-top: 1px solid var(--border-soft);
}

.app-user-menu__item,
.app-switch-account,
.app-logout button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  font: inherit;
  font-size: var(--font-size-secondary);
  line-height: 18px;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.app-user-menu__item:hover,
.app-switch-account:hover,
.app-logout button:hover {
  background: var(--nav-hover-bg);
}

.app-user-menu__item:focus-visible,
.app-switch-account:focus-visible,
.app-logout button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* «Выйти» — кнопка button_to (DELETE), последним пунктом, цветом опасного действия */
.app-logout {
  margin: 0;
}

.app-logout button {
  color: var(--danger);
}

/* ============================================================
 * Верхняя панель: в компактном режиме — бургер 44×44, знак, название
 * раздела с многоточием; на любой ширине справа — меню «кто я». На
 * десктопе бургера, знака и названия нет: знак и раздел — в навигации.
 * ============================================================ */

.app-topbar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 16px 0 6px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
}

.app-burger {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text);
  cursor: pointer;
}

.app-burger:hover {
  background: var(--nav-hover-bg);
}

.app-burger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.app-burger__icon {
  width: 22px;
  height: 22px;
}

.app-topbar__title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-h2);
  line-height: 22px;
  font-weight: 600;
  color: var(--text);
}

/* Подложка выезжающей навигации: нажатие закрывает (drawer#close) */
.app-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--backdrop);
}

/* ============================================================
 * Flash-сообщения над шапкой экрана: триада текст/фон/рамка, радиус
 * панели; боковые поля — как у содержимого
 * ============================================================ */

.app-flash {
  flex: none;
  margin: 16px 32px 0;
  padding: 10px 14px;
  border: 1px solid;
  border-radius: var(--radius-panel);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.app-flash--alert {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

.app-flash--notice {
  color: var(--success);
  background: var(--success-bg);
  border-color: var(--success-border);
}

/* ============================================================
 * Содержимое экрана: фон страницы, поля 24 32 48, между блоками 20.
 * Шапка экрана (.page-header, ui.css) стоит над .app-scroll — на
 * десктопе и планшете прокручивается только .app-scroll.
 * ============================================================ */

.app-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 24px 32px 48px;
}

/* Вертикальная стопка блоков (панели на детальных экранах) */
.stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
}

/* ============================================================
 * Один вертикальный скролл на экран и центрирование состояний.
 * Когда содержимое само управляет высотой (таблица со sticky-шапкой,
 * пустое состояние, ошибка), внешний .app-scroll отдаёт ему всю высоту
 * и не скроллит сам: два вложенных скролл-контейнера ломали sticky
 * у thead (липнет к .table-scroll, а скроллится .app-scroll),
 * а .empty-state прижимался к верху вместо центра, как в макете.
 * Поля тогда — у самого содержимого (.table-scroll и др. в ui.css).
 * Только когда таблица или состояние — весь экран: прямой потомок
 * .app-scroll или его .frame-busy-content. Таблица внутри панели карточки
 * (объект, договор, контрагент) — обычная прокрутка страницы с полями.
 * На телефоне прокручивается страница — см. раздел телефона ниже.
 * ============================================================ */

.app-scroll:has(> .table-scroll, > .empty-state, > .error-state, > .frame-busy-content > :is(.table-scroll, .empty-state, .error-state)) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.app-scroll:has(> .table-scroll, > .empty-state, > .error-state, > .frame-busy-content > :is(.table-scroll, .empty-state, .error-state)) > .frame-busy-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.app-scroll:has(> .table-scroll, > .empty-state, > .error-state, > .frame-busy-content > :is(.table-scroll, .empty-state, .error-state)) > .frame-busy-placeholder {
  padding: 24px 32px;
}

/* Busy-скрытие контента обязано побеждать flex-цепочку выше */
turbo-frame[busy] .app-scroll .frame-busy-content {
  display: none;
}

/* Панель действий (shared/action_bar, ui.css) стоит под областью прокрутки,
 * а не поверх неё: отступ-спейсер таблицы под липкую панель на десктопе и
 * планшете не нужен (Р-700). На телефоне прокручивается страница — там он есть */
@media (min-width: 768px) {
  .app-scroll:has(+ .action-bar) .table-scroll__spacer {
    display: none;
  }
}

/* ============================================================
 * Компактный режим (< 1180): навигация за бургером — выезжает слева
 * поверх содержимого с подложкой; закрытие подложкой и Esc
 * (drawer_controller). Закрытая панель невидима (visibility): её пункты
 * не ловят Tab. Поля содержимого 24. Вырез экрана в альбомной
 * ориентации телефона (viewport-fit=cover) — через safe-area.
 * ============================================================ */

@media (min-width: 1180px) {
  .app-topbar {
    height: 52px;
    padding: 0 24px;
  }

  .app-topbar .app-burger,
  .app-topbar .app-brand-mark,
  .app-topbar__title {
    display: none;
  }
}

@media (max-width: 1179px) {
  .app-topbar {
    display: flex;
    padding-left: max(6px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  .app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    width: calc(var(--sidebar-width) + env(safe-area-inset-left, 0px));
    padding-left: env(safe-area-inset-left, 0px);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .15s ease-out, visibility 0s linear .15s;
  }

  .app-shell--drawer-open .app-sidebar {
    transform: none;
    visibility: visible;
    transition: transform .15s ease-out;
  }

  .app-shell--drawer-open .app-backdrop {
    display: block;
  }

  .app-main {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  .app-scroll {
    padding: 24px 24px 48px;
  }

  .app-scroll:has(> .table-scroll, > .empty-state, > .error-state, > .frame-busy-content > :is(.table-scroll, .empty-state, .error-state)) > .frame-busy-placeholder {
    padding: 24px;
  }

  .app-flash {
    margin: 16px 24px 0;
  }
}

/* ============================================================
 * Телефон (< 768): прокручивается страница целиком — шапка экрана
 * уезжает вверх и не отнимает высоту у содержимого. Верхняя панель
 * 56 px липкая, с запасом под вырез сверху; навигация min(320px, 86vw)
 * на всю высоту, пункты 44; поля содержимого 16 16 32, между блоками 16.
 * ============================================================ */

@media (max-width: 767px) {
  .app-body {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
  }

  /* Под открытой навигацией страница не прокручивается */
  .app-body:has(.app-shell--drawer-open) {
    overflow: hidden;
  }

  .app-shell {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .app-frame {
    flex: 1 0 auto;
    overflow: visible;
  }

  /* Страница без горизонтальной прокрутки: прокручиваются только коробки
   * таблиц. clip не создаёт области прокрутки — липкое внутри липнет к окну */
  .app-main {
    overflow: visible;
    overflow-x: clip;
  }

  .app-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }

  .app-sidebar {
    width: min(320px, 86vw);
    padding-top: env(safe-area-inset-top, 0px);
  }

  .app-nav-item {
    min-height: 44px;
  }

  .app-scroll,
  .app-scroll:has(> .table-scroll, > .empty-state, > .error-state, > .frame-busy-content > :is(.table-scroll, .empty-state, .error-state)) {
    flex: 1 0 auto;
    overflow: visible;
  }

  .app-scroll {
    padding: 16px 16px calc(32px + env(safe-area-inset-bottom, 0px));
  }

  .app-scroll:has(> .table-scroll, > .empty-state, > .error-state, > .frame-busy-content > :is(.table-scroll, .empty-state, .error-state)) > .frame-busy-placeholder {
    padding: 16px;
  }

  .app-flash {
    margin: 12px 16px 0;
  }

  .stack {
    gap: 16px;
  }
}

/* Касание (на любой ширине): зона нажатия пунктов навигации и «Выйти» —
 * не меньше 44×44; на десктопе с мышью плотность прежняя */
@media (pointer: coarse) {
  .app-nav-item {
    min-height: 44px;
  }

  .app-logout button {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar,
  .app-shell--drawer-open .app-sidebar {
    transition: none;
  }
}

/* Телефон: в кнопке «кто я» — только аватар и стрелка; имя, роль и компания —
 * в шапке открытой панели */
@media (max-width: 767px) {
  .app-user-menu__trigger .app-user__text,
  .app-user-menu__trigger .app-user-menu__demo {
    display: none;
  }
}

/* ============================================================
 * Колонка модулей CRM (тема crm-slate, 17.10.2026, по образцу ПланФакта;
 * токены --chrome-* и размеры — tokens.css). Только в каркасе CRM
 * (.app-shell--rail, layouts/application): консоль платформы остаётся с
 * широкой светлой навигацией выше.
 *   Шапка — тёмная во всю ширину; в левом углу знак продукта над колонкой
 *   (бирюзовый блок шириной с колонку, ссылка на главную), справа «кто я».
 *   ≥ 1180: колонка 76 — модуль иконкой 24 и подписью 10; подпункты с
 *   пояснениями всплывают справа при наведении и при фокусе с клавиатуры
 *   (:focus-within), гаснут с задержкой — указатель успевает дойти.
 *   < 1180: колонки нет, выезжающая панель тёмная — группы подпунктов с
 *   иконками, без пояснений.
 * ============================================================ */

.app-shell--rail .app-topbar {
  background: var(--chrome-bg);
  border-bottom-color: var(--chrome-bg);
  padding-left: env(safe-area-inset-left, 0px);
}

.app-shell--rail .app-burger,
.app-shell--rail .app-topbar__title {
  color: var(--chrome-text);
}

.app-shell--rail .app-burger:hover {
  background: var(--chrome-bg-active);
}

.app-shell--rail .app-burger:focus-visible,
.app-shell--rail .app-user-menu__trigger:focus-visible {
  outline-color: var(--chrome-icon-active);
}

/* «Кто я» на тёмном: имя белым, роль и компания приглушённо */
.app-shell--rail .app-user-menu__trigger:hover,
.app-shell--rail .app-user-menu[open] .app-user-menu__trigger {
  background: var(--chrome-bg-active);
}

.app-shell--rail .app-user-menu__trigger .app-user-name {
  color: var(--chrome-text);
}

.app-shell--rail .app-user-menu__trigger .app-user__meta,
.app-shell--rail .app-user-menu__trigger .app-user__role,
.app-shell--rail .app-user-menu__chevron {
  color: var(--chrome-text-muted);
}

.app-shell--rail .app-user-menu__trigger .app-avatar {
  background: var(--chrome-bg-active);
  color: var(--chrome-text);
}

/* Знак продукта — в левом углу шапки над колонкой, во всю её высоту */
.app-corner-logo {
  flex: none;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rail-width);
  background: var(--brand-teal);
  color: var(--chrome-text);
  text-decoration: none;
}

.app-corner-logo:hover {
  background: var(--brand-teal-hover);
  text-decoration: none;
}

.app-corner-logo:focus-visible {
  outline: 2px solid var(--chrome-text);
  outline-offset: -4px;
}

.app-shell--rail .app-corner-logo .app-brand-mark {
  display: inline-flex;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: var(--font-size-brand-corner);
  font-weight: 500;
  letter-spacing: 0;
}

/* Пояснение подпункта — только во всплывашке колонки (≥ 1180) */
.app-nav-item__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-nav-item__hint {
  display: none;
}

@media (min-width: 1180px) {
  .app-shell--rail .app-topbar {
    height: var(--topbar-height);
    padding-left: 0;
  }

  .app-sidebar.app-rail {
    position: relative;
    z-index: 20;
    width: var(--rail-width);
    flex: 0 0 var(--rail-width);
    background: var(--chrome-bg);
    border-right: 0;
  }

  /* Всплывашки выходят за колонку — без своей прокрутки */
  .app-rail .app-nav {
    overflow: visible;
    padding: 0;
    gap: 0;
  }

  .app-rail .app-nav-group {
    position: relative;
    gap: 0;
  }

  /* Модуль: иконка 24 над подписью 10, высота 68 */
  .app-rail-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--rail-item-height);
    padding: 0 4px;
    color: var(--chrome-text-muted);
    font-size: var(--font-size-rail);
    line-height: var(--line-height-rail);
    text-align: center;
    text-decoration: none;
    transition: background-color .2s ease-out, color .2s ease-out;
  }

  .app-rail .app-nav-group:hover > .app-rail-link,
  .app-rail-link--active {
    background: var(--chrome-bg-active);
    color: var(--chrome-text);
    text-decoration: none;
  }

  .app-rail-link:focus-visible {
    outline: 2px solid var(--chrome-icon-active);
    outline-offset: -2px;
  }

  .app-rail-link__icon {
    flex: none;
    width: 24px;
    height: 24px;
  }

  .app-rail-link--active .app-rail-link__icon {
    color: var(--chrome-icon-active);
  }

  /* Двухтонная иконка: заливка формы тем же цветом, что контур, но
   * прозрачнее; у выбранного модуля — чуть плотнее */
  .app-rail-link__tint {
    opacity: .22;
  }

  .app-rail-link--active .app-rail-link__tint {
    opacity: .3;
  }

  .app-rail-link__label {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Точка на иконке — у подпункта есть счётчик; тон самого тревожного */
  .app-rail-link__dot {
    position: absolute;
    top: 13px;
    left: calc(50% + 7px);
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    box-shadow: 0 0 0 2px var(--chrome-bg);
  }

  .app-rail-link--active .app-rail-link__dot,
  .app-rail .app-nav-group:hover .app-rail-link__dot {
    box-shadow: 0 0 0 2px var(--chrome-bg-active);
  }

  .app-rail-link__dot--danger  { background: var(--chrome-dot-danger); }
  .app-rail-link__dot--warning { background: var(--chrome-dot-warning); }
  .app-rail-link__dot--neutral { background: var(--chrome-dot-neutral); }

  /* Всплывашка подпунктов: справа от модуля, вровень с его верхом, фоном
   * выбранного модуля — продолжает его */
  .app-rail .app-nav-flyout {
    position: absolute;
    top: 0;
    left: 100%;
    width: var(--flyout-width);
    max-height: calc(100dvh - var(--topbar-height) - var(--rail-item-height));
    overflow-y: auto;
    padding: 14px 8px 10px;
    background: var(--chrome-bg-active);
    border-radius: 0 var(--radius-badge) var(--radius-badge) 0;
    box-shadow: var(--chrome-shadow);
    visibility: hidden;
    opacity: 0;
    transition: opacity .12s ease-out, visibility 0s linear .15s;
  }

  .app-rail .app-nav-group:hover > .app-nav-flyout,
  .app-rail .app-nav-group:focus-within > .app-nav-flyout {
    visibility: visible;
    opacity: 1;
    transition: opacity .12s ease-out;
  }

  /* Нижние четыре модуля — всплывашка вровень с низом модуля, растёт вверх
   * (как is-submenu-reverse ПланФакта): в колонке восемь модулей, вниз от
   * нижних не хватает высоты окна */
  .app-rail .app-nav-group:nth-last-child(-n+4) > .app-nav-flyout {
    top: auto;
    bottom: 0;
    border-radius: var(--radius-badge) var(--radius-badge) var(--radius-badge) 0;
  }

  /* «Показатели» — один подпункт: модуль и есть ссылка, всплывашки нет */
  .app-rail .app-nav-group--single > .app-nav-flyout {
    display: none;
  }

  .app-rail .app-nav-group__label {
    padding: 0 10px 8px;
    color: var(--chrome-text);
    font-size: var(--font-size-secondary);
    line-height: 18px;
    font-weight: 600;
  }

  /* Подпункт: название бирюзовым, ниже пояснение; без иконки */
  .app-rail .app-nav-item {
    align-items: flex-start;
    min-height: 0;
    padding: 7px 10px;
    border-radius: var(--radius-badge);
    color: var(--chrome-link);
    font-size: var(--font-size-secondary);
    line-height: 18px;
  }

  .app-rail .app-nav-item:hover,
  .app-rail .app-nav-item--active,
  .app-rail .app-nav-item--active:hover {
    background: var(--chrome-bg);
    color: var(--chrome-text);
  }

  .app-rail .app-nav-item:focus-visible {
    outline-color: var(--chrome-icon-active);
  }

  .app-rail .app-nav-item__icon {
    display: none;
  }

  .app-rail .app-nav-item__hint {
    display: block;
    margin-top: 2px;
    color: var(--chrome-hint);
    font-size: var(--font-size-flyout-hint);
    line-height: var(--line-height-rail);
    font-weight: 400;
  }
}

@media (max-width: 1179px) {
  .app-shell--rail .app-corner-logo {
    width: 56px;
  }

  /* Выезжающая панель — тёмная, модули раскрыты группами */
  .app-sidebar.app-rail {
    background: var(--chrome-bg);
    border-right: 0;
  }

  .app-rail-link {
    display: none;
  }

  .app-rail .app-nav-flyout {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .app-rail .app-nav-group__label {
    color: var(--chrome-text-muted);
  }

  .app-rail .app-nav-item {
    color: var(--chrome-text);
  }

  .app-rail .app-nav-item__icon,
  .app-rail .app-nav-item:hover .app-nav-item__icon {
    color: var(--chrome-text-muted);
  }

  .app-rail .app-nav-item:hover,
  .app-rail .app-nav-item--active,
  .app-rail .app-nav-item--active:hover {
    background: var(--chrome-bg-active);
    color: var(--chrome-text);
  }

  .app-rail .app-nav-item--active .app-nav-item__icon,
  .app-rail .app-nav-item--active:hover .app-nav-item__icon {
    color: var(--chrome-icon-active);
  }

  .app-rail .app-nav-item:focus-visible {
    outline-color: var(--chrome-icon-active);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-rail-link,
  .app-rail .app-nav-flyout,
  .app-rail .app-nav-group:hover > .app-nav-flyout,
  .app-rail .app-nav-group:focus-within > .app-nav-flyout {
    transition: none;
  }
}