/* ============================================================
   UniPay Mobile Browser Shell — couche non destructive
   Rôle : stabiliser l'affichage mobile navigateur/PWA/WebView sans
   déplacer la logique métier ni les flux financiers.
   ============================================================ */
:root {
  --unipay-mobile-vh: 1vh;
  --unipay-mobile-vw: 1vw;
  --unipay-vv-width: 100vw;
  --unipay-vv-height: 100vh;
  --unipay-safe-top: env(safe-area-inset-top, 0px);
  --unipay-safe-right: env(safe-area-inset-right, 0px);
  --unipay-safe-bottom: env(safe-area-inset-bottom, 0px);
  --unipay-safe-left: env(safe-area-inset-left, 0px);
}

html.unipay-mobile-app,
html.unipay-mobile-app body {
  min-height: calc(var(--unipay-mobile-vh) * 100);
  max-width: var(--unipay-vv-width, 100vw);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
  overscroll-behavior-x: none;
}

/* Installed APK/PWA: keep the shell on the stable viewport. Android can
   report short-lived visualViewport changes while system UI settles. */
html.unipay-mobile-app.unipay-pwa-standalone,
html.unipay-mobile-app.unipay-pwa-standalone body {
  min-height: 100svh !important;
  height: auto !important;
  overflow-anchor: none;
}

html.unipay-mobile-app body {
  padding-top: var(--unipay-safe-top);
  padding-right: var(--unipay-safe-right);
  padding-bottom: var(--unipay-safe-bottom);
  padding-left: var(--unipay-safe-left);
}

html.unipay-mobile-app .unipay-brand,
html.unipay-mobile-app .fut-topbar,
html.unipay-mobile-app .topbar,
html.unipay-mobile-app .navbar,
html.unipay-mobile-app .header,
html.unipay-mobile-app .bottom-bar,
html.unipay-mobile-app .bottombar,
html.unipay-mobile-app .fut-bottombar,
html.unipay-mobile-app .sidebar,
html.unipay-mobile-app .fut-sidebar {
  max-width: var(--unipay-vv-width, 100vw);
}

html.unipay-mobile-app .unipay-fixed-bottom,
html.unipay-mobile-app .bottom-bar,
html.unipay-mobile-app .bottombar,
html.unipay-mobile-app .fut-bottombar,
html.unipay-mobile-app .mobile-bottom-bar {
  padding-bottom: max(8px, var(--unipay-safe-bottom));
}

html.unipay-mobile-app .unipay-fixed-top,
html.unipay-mobile-app .top-bar,
html.unipay-mobile-app .topbar,
html.unipay-mobile-app .fut-topbar,
html.unipay-mobile-app .navbar,
html.unipay-mobile-app .mobile-top-bar {
  padding-top: max(8px, var(--unipay-safe-top));
}

html.unipay-mobile-app main,
html.unipay-mobile-app .main-content,
html.unipay-mobile-app .page-content,
html.unipay-mobile-app .active-page,
html.unipay-mobile-app .content-area,
html.unipay-mobile-app .dashboard,
html.unipay-mobile-app .container,
html.unipay-mobile-app .app-shell {
  max-width: var(--unipay-vv-width, 100vw);
  overflow-x: hidden;
}

html.unipay-mobile-app img,
html.unipay-mobile-app video,
html.unipay-mobile-app canvas,
html.unipay-mobile-app iframe {
  max-width: 100%;
}

html.unipay-mobile-app video {
  object-fit: contain;
  background: #000;
}

html.unipay-mobile-app video[playsinline],
html.unipay-mobile-app video[webkit-playsinline] {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

html.unipay-mobile-app .unipay-mobile-fill-media img,
html.unipay-mobile-app .unipay-mobile-fill-media video,
html.unipay-mobile-app .unipay-media-preview-expanded img,
html.unipay-mobile-app .unipay-media-preview-expanded video,
html.unipay-mobile-app .modal-media-viewport img,
html.unipay-mobile-app .modal-media-viewport video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html.unipay-mobile-app .unipay-media-buffering {
  filter: saturate(.85) brightness(.82);
}

html.unipay-mobile-app.unipay-portrait .modal,
html.unipay-mobile-app.unipay-portrait .dialog,
html.unipay-mobile-app.unipay-portrait [role="dialog"],
html.unipay-mobile-app.unipay-portrait .modal-content,
html.unipay-mobile-app.unipay-portrait .futuristic-modal {
  max-width: min(96vw, 760px);
  max-height: calc((var(--unipay-mobile-vh) * 100) - 24px);
}

html.unipay-mobile-app.unipay-landscape .modal,
html.unipay-mobile-app.unipay-landscape .dialog,
html.unipay-mobile-app.unipay-landscape [role="dialog"],
html.unipay-mobile-app.unipay-landscape .modal-content,
html.unipay-mobile-app.unipay-landscape .futuristic-modal {
  max-height: calc((var(--unipay-mobile-vh) * 100) - 16px);
}

html.unipay-mobile-app .unipay-mobile-install-button {
  position: fixed;
  right: max(14px, var(--unipay-safe-right));
  bottom: calc(max(14px, var(--unipay-safe-bottom)) + 58px);
  z-index: 2147482500;
  border: 1px solid rgba(0, 245, 255, .62);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(5, 13, 31, .78);
  color: #e9fbff;
  font: 800 12px/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .04em;
  box-shadow: 0 0 22px rgba(0, 245, 255, .26), inset 0 0 18px rgba(0, 245, 255, .10);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

html.unipay-mobile-app.unipay-pwa-standalone .unipay-mobile-install-button,
html.unipay-mobile-app .unipay-mobile-install-button[hidden] {
  display: none !important;
}

@media (max-width: 768px) {
  html.unipay-mobile-app *,
  html.unipay-mobile-app *::before,
  html.unipay-mobile-app *::after { box-sizing: border-box; }

  html.unipay-mobile-app :where(input,select,textarea,button) { max-width: 100%; }

  html.unipay-mobile-app :where(table,.table,.data-table,.dashboard-table,.table-responsive) {
    max-width: 100%;
  }

  html.unipay-mobile-app :where(.table-responsive,.table-scroll,[data-mobile-scroll="horizontal"]) {
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  html.unipay-mobile-app :where(.modal,.dialog,[role="dialog"],.modal-content,.futuristic-modal) {
    width: min(96vw, 760px) !important;
    margin-inline: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  html.unipay-mobile-app :where(.card-grid,.dashboard-grid,.form-grid,.grid) > * { min-width: 0; }

  html.unipay-mobile-app :where(p,li,td,th,label,.card,.panel) {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Le document principal reste scrollable. Les zones métier qui possèdent
     leur propre scroll (tableaux, chats, modales) conservent leurs règles. */
  html.unipay-mobile-app:not(.unipay-document-scroll-locked),
  html.unipay-mobile-app:not(.unipay-document-scroll-locked) body {
    height: auto !important;
    min-height: calc(var(--unipay-mobile-vh) * 100) !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
    touch-action: pan-y pinch-zoom;
  }

  html.unipay-mobile-app body:not(.unipay-modal-open):not(.unipay-scroll-locked) .page-scope,
  html.unipay-mobile-app body:not(.unipay-modal-open):not(.unipay-scroll-locked) main,
  html.unipay-mobile-app body:not(.unipay-modal-open):not(.unipay-scroll-locked) .main-content,
  html.unipay-mobile-app body:not(.unipay-modal-open):not(.unipay-scroll-locked) .page-content,
  html.unipay-mobile-app body:not(.unipay-modal-open):not(.unipay-scroll-locked) .active-page {
    height: auto !important;
    min-height: 0;
    max-height: none !important;
    overflow-y: visible !important;
    touch-action: pan-y pinch-zoom;
  }

  html.unipay-mobile-app main {
    padding-bottom: calc(88px + var(--unipay-safe-bottom));
  }

  html.unipay-mobile-app .desktop-only {
    display: none !important;
  }

  html.unipay-mobile-app .mobile-readable {
    font-size: clamp(13px, 3.5vw, 16px);
  }
}

/* 20260616 — le shell mobile ne doit jamais remodeler le mode ordinateur. */
html.unipay-mobile-shell-disabled .unipay-mobile-install-button{
  display:none !important;
}

/* Native fullscreen keeps the document itself as the only vertical scroller. */
@media (max-width: 900px) {
  html.unipay-native-fullscreen,
  html.unipay-root-fullscreen-active,
  html:fullscreen,
  html.unipay-native-fullscreen body,
  html.unipay-root-fullscreen-active body,
  html:fullscreen body {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y pinch-zoom !important;
    -webkit-overflow-scrolling: touch;
  }

  html.unipay-native-fullscreen body > .page-scope,
  html.unipay-root-fullscreen-active body > .page-scope,
  html:fullscreen body > .page-scope {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    touch-action: pan-y pinch-zoom !important;
  }
}