/* UACPL UNIFORM PAGE WALLPAPER + WATERMARK
   Applies the same supplied wallpaper and UACPL logo watermark across
   Home, Employee Login/Dashboard, Admin, MDO, HR, IT and other portal pages.

   Wallpaper: /images/background.png
   Watermark : /images/UACPL-LOGO.png
*/
html {
  min-height: 100%;
  background: #f4f7fb;
}

body {
  min-height: 100vh;
  margin: 0;
  background-color: #f4f7fb !important;
  background-image: url('/images/background.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  position: relative;
}

/* Pages that do not use the common .main wrapper (legacy/admin utility pages). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('/images/UACPL-LOGO.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: min(680px, 62vw) auto;
  opacity: 0.105;
  pointer-events: none;
  z-index: 0;
}

body > :not(script):not(style) {
  position: relative;
  z-index: 1;
}

/* Common secure portal wrapper: do not allow old page gradients to hide the wallpaper. */
.main {
  min-height: 100vh;
  position: relative !important;
  isolation: isolate;
  background-color: #f4f7fb !important;
  background-image: url('/images/background.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* One identical centred transparent watermark on every wrapped portal page. */
.main::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('/images/UACPL-LOGO.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: min(680px, 62vw) auto;
  opacity: 0.105;
  pointer-events: none;
  z-index: 0;
}

/* Keep normal page sections above the watermark, but never convert popup overlays
   from fixed positioning into regular page content. */
.main > :not(.image-popup):not(.uacpl-pwa-modal):not(.assist-widget) {
  position: relative;
  z-index: 1;
}

/* Keep UACPL Assist fixed at the right-bottom and lift it above the footer
   whenever the footer enters the viewport. */
.main > .assist-widget,
.assist-widget {
  position: fixed !important;
  right: 18px !important;
  bottom: var(--assist-footer-gap, 18px) !important;
  left: auto !important;
  top: auto !important;
  z-index: 100050 !important;
  transform: none !important;
}

.assist-widget .assist-panel {
  max-height: calc(100dvh - var(--assist-footer-gap, 18px) - 96px) !important;
}

@media (max-width: 520px) {
  .main > .assist-widget,
  .assist-widget {
    right: 12px !important;
  }
}

/* Gallery preview must always open as a centred viewport popup. */
.main > .image-popup,
.image-popup {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  z-index: 100000 !important;
  overflow: auto;
  overscroll-behavior: contain;
}

.image-popup.active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.image-popup-box {
  flex: 0 1 auto;
  margin: auto;
}

/* Home page had its own watermark layer; switch it off to prevent double watermark. */
.main .dashboard::before {
  content: none !important;
  display: none !important;
}

/* Keep the content area transparent so the common wallpaper remains visible. */
.main > .dashboard,
.main .dashboard {
  background-color: transparent !important;
  background-image: none !important;
}

/* White cards stay readable while the common background remains visible around them. */
.card,
.side-panel,
.hr-card,
.admin-usage-chart-card,
.panel,
.login-card {
  position: relative;
}

@media (max-width: 900px) {
  body,
  .main {
    background-attachment: scroll !important;
  }
  body::before,
  .main::before {
    background-size: min(500px, 76vw) auto;
    opacity: 0.10;
  }
}

@media (max-width: 520px) {
  body::before,
  .main::before {
    background-size: min(360px, 84vw) auto;
    opacity: 0.09;
  }
}

@media print {
  body,
  .main {
    background: #ffffff !important;
  }
  body::before,
  .main::before {
    display: none !important;
  }
}