/* The only site background image. Fixed layers never intercept interaction. */
:root {
  --page-overlay-home: rgba(255, 255, 255, 0.04);
  --page-overlay-login: rgba(255, 255, 255, 0.08);
  --page-overlay-content: rgba(255, 255, 255, 0.84);
}

html { min-height: 100%; }
body {
  min-height: 100vh;
  isolation: isolate;
  --page-overlay: var(--page-overlay-content);
}
body:has(#businessPanel:not([hidden])) {
  --page-overlay: var(--page-overlay-home);
}
body:has(#loginPanel:not([hidden])) {
  --page-overlay: var(--page-overlay-login);
}

/* Both layers sit above the body canvas and below all normal page content.
   No content z-index overrides are needed, including dialogs and dropdowns. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body::before {
  background-image: url('/assets/images/global-background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body::after { background: var(--page-overlay); }

.topbar { background: rgba(255, 255, 255, 0.92); }

/* The former login illustration is decorative. Preserve its grid footprint
   so replacing the background does not move the login form or other content. */
.login-visual img { visibility: hidden; }