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

// Full-width: снимаем max-width канвы SharePoint — и в workbench (dev), и на живой
// странице. !important оправдан: перебиваем встроенные стили канвы, иначе их не снять.
// Если после обновления платформы ширина вернётся — проверить актуальные селекторы в DevTools.
:global {
  #workbenchPageContent,
  .CanvasComponent.LCS .CanvasZone {
    max-width: 100% !important;
  }
}

.requestPortal {
  font-family: $font-sans;
  font-size: $fs-body;
  line-height: 1.55;
  color: $gray-900;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;

  // Полная ширина обеспечивается через "supportsFullBleed": true в манифесте
  // + размещение web part в полноширинной секции (как в projects-list).
  // Корень занимает 100% контейнера, без CSS-трюков с 100vw.
  width: 100%;

  // Только вертикальные отступы; горизонтальные — на внутренних секциях.
  padding: $sp-4 $sp-5 $sp-8;
}

.teams {
  // Задел под специфику Teams-контекста; пока совпадает с базовым.
  font-family: $font-sans;
}

// Раскладка: боковое меню (side) + основная область (main).
.layout {
  display: flex;
  align-items: flex-start;
  gap: $sp-6;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

.main {
  flex: 1 1 auto;
  min-width: 0; // чтобы контент не распирал колонку
}

// Ширину задаёт само меню (SideNav сворачивается) — колонка просто под него.
.side {
  flex: 0 0 auto;
  position: sticky;
  top: $sp-4;
}

// Та же ширина, что у контента подачи (SubmitFeature .content) — чтобы вкладки
// не уезжали шире формы под ними.
.tabsWrap {
  max-width: 1080px;
  margin-bottom: $sp-6;
}

// На узких экранах меню уходит наверх, в одну строку.
@media (max-width: 900px) {
  .layout {
    flex-direction: column;
  }

  .side {
    width: 100%;
    position: static;
  }
}

// Стили конкретных фич живут в features/<name>/<Name>.module.scss.
// Здесь — только оболочка (root + раскладка колонок), общая для всех фич.