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

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

  // ---- Печать ----
  // Печать идёт в ОТДЕЛЬНОМ чистом окне (см. shared/ui/PrintButton): документ
  // .rp-print-root переносится туда со стилями страницы, поэтому скролл-контейнеры
  // и высота SharePoint печать не режут. Здесь — только вид полей на печати
  // (read-only без серой заливки), эти правила применяются и в окне печати.
  @media print {
    .rp-print-root input,
    .rp-print-root textarea,
    .rp-print-root select {
      background: transparent !important;
      color: #000 !important;
      border-color: #ccc !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%;

  // App-shell «edge-to-edge»: рейл примыкает к левому краю, отступы — внутри main.
  padding: 0;
}

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

// Раскладка: боковой рейл (side) на всю высоту + основная область (main).
.layout {
  display: flex;
  align-items: flex-start; // рейл больше НЕ тянется по контенту — см. .side
  width: 100%;
  min-height: 78vh; // «присутствие» рейла даже когда контента мало
}

// Рейл-колонка: раньше тянулась по высоте .main (align-items: stretch), из-за
// чего высота рейла плавала вместе с содержимым соседней колонки — например, у
// вкладки «Инициированные мной» появляется доп. фильтр по статусу, .main
// становится чуть выше, и градиентный фон Sidebar (посчитанный от своей же
// высоты) заметно менял оттенок. Прибиваем рейл к высоте окна (sticky + 100vh):
// теперь он не зависит от того, что показано рядом. На мобильном брейкпоинте
// сам Sidebar уходит в position:fixed (см. @tnsu/ui-kit) — там эти правила уже
// не действуют.
.side {
  flex: 0 0 auto;
  display: flex;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
}

.main {
  flex: 1 1 auto;
  min-width: 0; // чтобы контент не распирал колонку
  display: flex;
  flex-direction: column;
  padding: $sp-5 $sp-6 $sp-8;
}

.tabsWrap {
  margin-bottom: $sp-6;
}

// Раздел «Новая заявка», когда открыта другая вкладка. Именно скрытие, а не
// размонтирование: заполненная форма должна пережить переключение вкладок
// (см. RequestPortal.tsx). display:none выводит содержимое и из потока, и из
// последовательности табуляции — скрытая форма не ловит фокус с клавиатуры.
.hiddenPane {
  display: none;
}

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

// < 768px: рейл превращается в выезжающий drawer (см. @tnsu/ui-kit Sidebar). Он
// position:fixed и выходит из потока — колонка .side схлопывается сама, main
// занимает всю ширину. Показываем бургер в шапке контента.
@media (max-width: 768px) {
  .layout {
    min-height: 0;
  }

  .mobileNav {
    display: block;
  }
}

// Полоса отладочной подмены личности (см. shared/impersonation.ts). Красная и
// во всю ширину намеренно: это не подсказка, а предупреждение о том, что портал
// показывает не ваши данные — незаметная плашка тут хуже, чем никакой.
.impersonationBar {
  padding: $sp-3 $sp-4;
  margin-bottom: $sp-4;
  border: 1px solid $red-500;
  border-radius: $r-md;
  background: rgba($red-500, .08);
  color: $navy-900;
  font-size: $fs-sm;
  line-height: 1.45;
}

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