/* Rivaz V125 shared aesthetic background — visual only.
   V125: dark-mode aware + mobile safe (no fixed attachment on touch devices). */
@media screen {
  html, body {
    background-color: #f4f8ff !important;
    background-image: url("rivaz-aesthetic-background.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
    background-attachment: fixed !important;
  }

  /* Keep the new backdrop visible behind the existing application surfaces. */
  .app, .main, .content, .wrap, .login, .welcome, .stage {
    background: transparent !important;
  }

  /* Reception's greeting banner is a coloured card with white text; keep its colour. */
  .main > .welcome { background: var(--primary) !important; }

  /* Dispensary uses a centered app shell; keep it translucent so the backdrop is visible. */
  .phone {
    background: rgba(255,255,255,.86) !important;
  }
}

/* V125: touch devices — fixed backgrounds are janky / blank on iOS and Android browsers. */
@media screen and (max-width: 900px), screen and (hover: none) and (pointer: coarse) {
  html, body {
    background-attachment: scroll !important;
    background-size: cover !important;
  }
  html { min-height: 100%; }
  body { min-height: 100vh; min-height: 100dvh; }
}

/* V125: dark mode — the light photo backdrop made light text unreadable. Dim it. */
@media screen and (prefers-color-scheme: dark) {
  html:not([data-theme="light"]),
  html:not([data-theme="light"]) body {
    background-color: #0b0f1e !important;
    background-image:
      linear-gradient(rgba(9,12,28,.90), rgba(9,12,28,.90)),
      url("rivaz-aesthetic-background.webp") !important;
  }
  html:not([data-theme="light"]) .phone { background: rgba(18,26,40,.92) !important; }
}
html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: #0b0f1e !important;
  background-image:
    linear-gradient(rgba(9,12,28,.90), rgba(9,12,28,.90)),
    url("rivaz-aesthetic-background.webp") !important;
}
html[data-theme="dark"] .phone { background: rgba(18,26,40,.92) !important; }

@media print {
  /* No print styling is changed. */
}