/* Keep dashboard vertical scrolling from changing the document's horizontal offset. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

#app {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.n-layout,
.n-layout-scroll-container,
.n-layout-content,
.n-layout-content__main,
.n-layout-sider,
.n-layout-header {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.n-layout-scroll-container {
  overflow-x: hidden;
  overscroll-behavior-x: contain;
}

.modern-dashboard,
.dashboard-content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

.modern-dashboard > *,
.dashboard-content > * {
  min-width: 0;
  max-width: 100%;
}

/* The announcement carousel remains autoplayable, but vertical swipes stay vertical. */
.modern-dashboard .n-carousel,
.modern-dashboard .n-carousel__slides {
  max-width: 100%;
  touch-action: pan-y;
  overscroll-behavior-x: none;
}

/* Deliberate horizontal regions retain their own gesture and scrollbar. */
.cus-scroll-x {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

.overflow-x-auto {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

/* Mobile AppPage uses an overflow-visible utility; keep its dashboard viewport vertical-only. */
@media (max-width: 767.98px) {
  #app,
  #app .modern-app-provider,
  #app .modern-app {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  #app .modern-app-provider {
    overflow-y: auto;
  }

  #app .modern-app-provider [class~="overflow-visible!"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #app .modern-app-provider [class~="grid"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #app .modern-app-provider [class~="grid"] > * {
    min-width: 0;
    max-width: 100%;
  }

  #app .modern-app-provider [class~="-m-5"][class~="box-content"] {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
}