/* ==================================================================
   SalesPak Web — React authentication viewport shell
   ------------------------------------------------------------------
   Login and registration deliberately do not load the legacy site.css.
   The document is permanently locked to the viewport. React owns any
   scrolling that is genuinely required, so Safari/iPadOS cannot drag the
   whole page away from the top or bottom.
   ================================================================== */
html.sp-auth-html {
    --sp-status-bar-bg: #0f1b2a;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background: #0f1b2a !important;
}

html.sp-auth-html body.sp-auth-body {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    padding: env(safe-area-inset-top, 0px) 0 0;
    box-sizing: border-box;
    overflow: hidden;
    overscroll-behavior: none;
    background: #0f1b2a !important;
    touch-action: pan-x pan-y;
}

/* A real DOM layer is used as well as the global html::before strip.
   WebKit can composite the root pseudo-element differently on standalone
   auth pages; this guarantees the complete translucent status row is ink,
   never the paper colour of the sign-in/register workspace. */
.sp-auth-status-safe-area {
    position: fixed;
    z-index: 2147483647;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0px);
    min-height: env(safe-area-inset-top, 0px);
    background: #0f1b2a !important;
    pointer-events: none;
}

body.sp-auth-body #login-root,
body.sp-auth-body #register-root,
body.sp-auth-body #company-picker-root {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: #0f1b2a;
}

/* React paints the actual paper workspace. Keeping the mount itself ink is
   deliberate: if WebKit ever exposes an edge during compositing there is no
   pale layer available behind it. */
body.sp-auth-body #login-root > *,
body.sp-auth-body #register-root > *,
body.sp-auth-body #company-picker-root > * {
    width: 100%;
    height: 100%;
    min-height: 0;
}