@import '../../../../styles/design-tokens';

// Раскладка — тот же боковой рейл + основная область, что и в request-portal
// (@tnsu/ui-kit Sidebar, см. RequestPortal.module.scss): единый стиль
// навигации во всех веб-частях Tnsu. Как и там, это не карточка на странице
// SharePoint, а edge-to-edge app-shell: без рамки/тени/скруглений и без
// ограничения ширины контента — рейл примыкает к левому краю канвы.
.shell {
  display: flex;
  align-items: flex-start; // рейл тянется не по контенту, а по своей колонке — см. .side
  width: 100%;
  min-height: 78vh; // «присутствие» рейла даже когда контента мало
  font-family: $font-sans;
  font-size: $fs-body;
  line-height: 1.55;
}

// Рейл-колонка. Ровно та же схема, что в request-portal: КОЛОНКА тянется во всю
// высоту раскладки и закрашена $navy-800 (цветом, которым градиент рейла
// заканчивается), а сам РЕЙЛ внутри — sticky на 100vh поверх этой заливки.
// Так градиент не меняет оттенок от высоты соседней колонки, а под рейлом на
// длинных таблицах нет белого провала, даже если sticky в SharePoint не
// включился (прокручивается внутренний контейнер страницы, а не окно).
// Из-за sticky у .shell не должно быть overflow: hidden.
.side {
  flex: 0 0 auto;
  display: flex;
  align-self: stretch;
  background: $navy-800;

  // Прямой потомок — корень Sidebar из @tnsu/ui-kit (своего класса снаружи не
  // видно, поэтому селектор по структуре, а не по имени).
  > * {
    position: sticky;
    top: 0;
    height: 100vh;
  }
}

.main {
  flex: 1 1 auto;
  min-width: 0; // чтобы контент не распирал колонку
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #F6F8FA 0%, #EEF2F6 100%);
  color: $gray-900;
}

// Отступы контента — здесь, а не на .main: без max-width/margin:auto контент
// занимает всю доступную ширину (edge-to-edge, как в портале).
.content {
  padding: 28px 30px 36px;
}

// Мобильная кнопка-бургер (открывает выезжающий Sidebar). На десктопе скрыта.
.mobileNav {
  display: none;
  padding: $sp-4 $sp-6 0;
}

// < 768px: рейл сам уходит в position:fixed и уезжает за левый край экрана,
// пока не открыт (см. @tnsu/ui-kit Sidebar — это его собственный CSS, чисто
// media-query, без участия JS) — НЕ display:none на .side: рейл вёрстке всё
// равно нужен в потоке, чтобы при mobileOpen выехать поверх контента.
@media (max-width: 768px) {
  .shell {
    min-height: 0;
  }

  .mobileNav {
    display: block;
  }

  // Снимаем десктопные правила рейла явно. Здесь ui-kit сам делает Sidebar
  // position:fixed (top/bottom/left), и наш sticky+100vh спорил бы с ним при
  // равной специфичности — исход решался бы порядком подключения стилей.
  // Заливка колонки тоже не нужна: колонка схлопнута, drawer красит себя сам.
  .side {
    align-self: flex-start;
    background: none;

    > * {
      position: static;
      height: auto;
    }
  }
}

.centerState {
  padding: 60px 30px;
  text-align: center;
  color: $gray-400;
  font-size: 13.5px;
}