/* === PRO UI: ENDLESS BACKGROUND + SUBTLE NOISE OVERLAY === */

/* Prevent background tiling/repeating when scrolling */
html, body { min-height: 100%; }

body {
  background-repeat: no-repeat !important;
  background-attachment: fixed; /* smooth scrolling for gradients/images */
  background-size: cover;       /* fill the viewport nicely */
}

/* Subtle noise overlay (no extra files) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06; /* tweak: 0.03–0.08 */
  mix-blend-mode: overlay; /* makes it feel 'pro' on dark gradients */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* Ensure your main app sits above the noise overlay */
.sidebar, main, .content, .container, .app, .layout, header, footer {
  position: relative;
  z-index: 1;
}

/* === Existing brand/logo overrides (keep if you already use them) === */
.brand.brand--stack{
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
  gap: 10px !important;
}

.brand.brand--stack .logo{
  display:none !important;
}

.brand.brand--stack .brand-logo{
  height: 100px;
  width: auto;
  display:block;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.brand.brand--stack .brand-meta{
  display:flex;
  flex-direction: column;
  align-items: center;
}

.brand.brand--stack .title{
  margin:0;
}

.brand.brand--stack .sub{
  margin-top: 4px;
}