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

// Раскладка — тот же боковой рейл + основная область, что и в request-portal
// (@tnsu/ui-kit Sidebar, см. RequestPortal.module.scss): единый стиль
// навигации во всех веб-частях Tnsu. В отличие от request-portal (рейл во всю
// высоту окна, edge-to-edge), здесь виджет — ограниченная карточка на странице
// SharePoint, поэтому без sticky/100vh-трюков: рейл просто растягивается по
// высоте своего соседа (.main) через align-items: stretch.
.shell {
  display: flex;
  align-items: stretch;
  border-radius: $r-lg;
  border: 1px solid $gray-200;
  overflow: hidden;
  box-shadow: $sh-1;
  font-family: $font-sans;
  font-size: $fs-body;
  line-height: 1.55;
}

.side {
  flex: 0 0 auto;
  display: flex;
  background: $navy-800;
}

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

.content {
  padding: 28px 30px 36px;
  max-width: 1080px;
  margin: 0 auto;
}

// Мобильная кнопка-бургер (открывает выезжающий 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) {
  .mobileNav {
    display: block;
  }

  .side {
    align-self: flex-start;
    background: none;
  }
}

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