/* ==================================================================
   SalesPak Web — global iPad/iPhone status strip
   ------------------------------------------------------------------
   This file must be loaded last. The status-strip colour is controlled
   by the single global --sp-status-bar-bg variable declared in site.css.

   The strip is painted from the root html element rather than body.
   Several full-screen pages create their own scrolling/stacking context;
   on iPadOS a body pseudo-element can then sit behind that page and expose
   the page-specific background colour in the translucent status area.
   ================================================================== */
html {
    background-color: var(--sp-status-bar-bg, #185FA5) !important;
}

html::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: env(safe-area-inset-top, 0px) !important;
    background: var(--sp-status-bar-bg, #185FA5) !important;
    background-color: var(--sp-status-bar-bg, #185FA5) !important;
    background-image: none !important;
    pointer-events: none !important;
    z-index: 2147483647 !important;
}

/* Do not also paint the strip from body. Keeping a single root-owned
   layer avoids page-specific body backgrounds and stacking contexts. */
body::before {
    content: none !important;
    display: none !important;
}