/* Каркас 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;
  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) и роль, «Выйти»;
 * снизу — запас под полосу «домой» (safe-area) */
.app-sidebar-footer {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 12px;
  padding: 14px 8px calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-soft);
}

.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);
}

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

.app-logout button {
  font: inherit;
  font-size: var(--font-size-secondary);
  line-height: 18px;
  padding: 4px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
}

.app-logout button:hover {
  color: var(--text);
  text-decoration: underline;
}

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

/* «Сменить компанию» (W5) — ссылка вторичным цветом, как «Выйти»; в
 * подвале навигации — своей строкой под сотрудником */
.app-switch-account {
  flex: 1 0 100%;
  order: 3;
  padding: 4px 0;
  font-size: var(--font-size-secondary);
  line-height: 18px;
  color: var(--text-secondary);
  text-decoration: none;
}

.app-switch-account:hover {
  color: var(--text);
  text-decoration: underline;
}

/* ============================================================
 * Верхняя панель компактного режима: бургер 44×44, знак, название
 * раздела с многоточием. На десктопе скрыта.
 * ============================================================ */

.app-topbar {
  display: none;
  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;
}

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

@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;
  }
}