/**
 * Custom system background (main column only — sidebar unchanged).
 */

.app-main-column {
  position: relative;
}

/* Fixed to the main workspace viewport so image/video does not scroll with page content. */
body.app-has-custom-bg .app-shell-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 4.5rem;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

@media (min-width: 1024px) {
  html:not(.sidebar-collapsed) body.app-has-custom-bg .app-shell-bg {
    left: 15rem;
  }
}

body.nav-layout-navbar.app-has-custom-bg .app-shell-bg {
  left: 0;
}

.app-shell-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.app-shell-bg__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(248, 250, 252, 0.32) 0%,
    rgba(241, 245, 249, 0.26) 100%
  );
  opacity: calc((1 - var(--app-bg-opacity, 0.45)) * 0.42);
}

body.theme-dark .app-shell-bg__scrim,
.dark .app-shell-bg__scrim {
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.38) 0%,
    rgba(12, 18, 34, 0.32) 100%
  );
}

.app-shell-bg__media-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.app-shell-bg__image {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--app-bg-pos-x, 50%) var(--app-bg-pos-y, 50%);
  opacity: var(--app-bg-opacity, 0.45);
  filter: blur(var(--app-bg-blur, 0px));
  transform: scale(var(--app-bg-scale, 1));
  transform-origin: var(--app-bg-pos-x, 50%) var(--app-bg-pos-y, 50%);
}

.app-shell-bg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--app-bg-pos-x, 50%) var(--app-bg-pos-y, 50%);
  opacity: var(--app-bg-opacity, 0.45);
  filter: blur(var(--app-bg-blur, 0px));
  transform: scale(var(--app-bg-scale, 1));
  transform-origin: var(--app-bg-pos-x, 50%) var(--app-bg-pos-y, 50%);
}

/* Lighter workspace overlay so image/video backgrounds read clearly. */
body.app-bg-mode-video.app-has-custom-bg .app-main-column > .app-main,
body.app-bg-mode-image.app-has-custom-bg .app-main-column > .app-main {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(248, 250, 252, 0.24) 50%,
    rgba(241, 245, 249, 0.22) 100%
  ) !important;
}

body.theme-dark.app-bg-mode-video.app-has-custom-bg .app-main-column > .app-main,
body.dark.app-bg-mode-video.app-has-custom-bg .app-main-column > .app-main,
body.theme-dark.app-bg-mode-image.app-has-custom-bg .app-main-column > .app-main,
body.dark.app-bg-mode-image.app-has-custom-bg .app-main-column > .app-main {
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.34) 0%,
    rgba(12, 18, 34, 0.3) 50%,
    rgba(15, 23, 42, 0.28) 100%
  ) !important;
}

body.app-bg-mode-video.app-has-custom-bg .app-main-column > .app-main::before,
body.app-bg-mode-image.app-has-custom-bg .app-main-column > .app-main::before {
  opacity: 0.05;
}

body.app-bg-mode-video .app-shell-bg__scrim,
body.app-bg-mode-image .app-shell-bg__scrim {
  opacity: calc((1 - var(--app-bg-opacity, 0.45)) * 0.32);
}

/* Topbar must stay above background layer AND .app-main (never z-index: 1). */
.app-main-column > .app-topbar-anchor.app-topbar-anchor--fixed {
  z-index: 30;
  pointer-events: auto;
}

.app-main-column > .app-navbar-anchor.app-navbar-anchor--fixed {
  z-index: 25;
}

.app-main-column > .app-main {
  position: relative;
  z-index: 1;
}

/* Built-in presets use lighter overlay (see app-background-builtin.css). */
body.app-bg-mode-builtin.app-has-custom-bg .app-main-column > .app-main {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(248, 250, 252, 0.18) 50%,
    rgba(241, 245, 249, 0.16) 100%
  ) !important;
}

body.theme-dark.app-bg-mode-builtin.app-has-custom-bg .app-main-column > .app-main,
body.dark.app-bg-mode-builtin.app-has-custom-bg .app-main-column > .app-main {
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.28) 0%,
    rgba(12, 18, 34, 0.24) 50%,
    rgba(15, 23, 42, 0.22) 100%
  ) !important;
}

body.app-has-custom-bg:not(.app-bg-mode-image):not(.app-bg-mode-video):not(.app-bg-mode-builtin) .app-main-column > .app-main {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.58) 0%,
    rgba(248, 250, 252, 0.52) 50%,
    rgba(241, 245, 249, 0.5) 100%
  ) !important;
}

body.theme-dark.app-has-custom-bg:not(.app-bg-mode-image):not(.app-bg-mode-video):not(.app-bg-mode-builtin) .app-main-column > .app-main,
body.dark.app-has-custom-bg:not(.app-bg-mode-image):not(.app-bg-mode-video):not(.app-bg-mode-builtin) .app-main-column > .app-main {
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.58) 0%,
    rgba(12, 18, 34, 0.54) 50%,
    rgba(15, 23, 42, 0.52) 100%
  ) !important;
}

body.app-has-custom-bg .app-main-column > .app-main::before {
  opacity: 0.1;
}