/* NetControll-style stacked screens + slide transitions (Live / NSB)
   Telas são position:absolute (fora do fluxo): o #NSBPage não cresce com o conteúdo.
   Com overflow:hidden no page, o excesso era cortado e não rolava. Scroll vertical fica em .screen. */
#NSBPage {
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  width: 100%;
}

.screen {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.screen.active {
  display: block;
}

.screen.slide-in {
  animation: screenSlideIn var(--nsb-slide-duration, 0.48s) cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.screen.slide-out {
  animation: screenSlideOut var(--nsb-slide-duration, 0.48s) cubic-bezier(0.32, 0, 0.67, 0) forwards;
}

.screen.slide-in-left {
  animation: screenSlideInLeft var(--nsb-slide-duration, 0.48s) cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.screen.slide-out-right {
  animation: screenSlideOutRight var(--nsb-slide-duration, 0.48s) cubic-bezier(0.32, 0, 0.67, 0) forwards;
}

.screen.screen-exiting {
  z-index: 10;
}

@keyframes screenSlideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes screenSlideOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes screenSlideInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes screenSlideOutRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

/* Mount: pelo menos a altura do viewport; conteúdo maior empurra e rola no .screen */
.screen > .screen-mount {
  min-height: 100%;
  min-height: 100dvh;
  width: 100%;
  box-sizing: border-box;
}

/* Mobile: barra de rolagem oculta no painel da tela (mesmo padrão da vitrine) */
@media (max-width: 1023px) {
  .screen {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .screen::-webkit-scrollbar {
    display: none;
  }
}