/* PWA-specific fixes for iOS safe areas. */

/*
  1. Unified App-like Layout:
  Makes the entire viewport fixed and only the content area scrollable.
*/
html, body {
    height: 100%;
    overflow: hidden;
}
#page {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.page-content {
    flex-grow: 1;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

/* 2. Add correct top padding to the main content area to account for the fixed 50px header. */
.page-content {
    padding-top: calc(50px + env(safe-area-inset-top)) !important;
}

/* 3. Add padding to the bottom of the scrollable content to prevent it from hiding behind the fixed footer bar. */
body.is-authenticated-initial .page-content,
body.is-authenticated-final .page-content {
  --bottom-nav-height: 60px; /* The height of your footer bar */
  padding-bottom: var(--bottom-nav-height) !important;
}

/* 4. Ensure the footer bar sits correctly at the bottom, respecting the device's home indicator safe area. */
#footer-bar {
  bottom: 0 !important;
  height: 60px !important;
}

/*
  Style for displaying text in the bottom safe area.
  This is for experimental purposes.
*/
#safe-area-version {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 5px; /* Small padding from the absolute bottom */
    text-align: center;
    font-size: 10px;
    color: #2b679b; /* Match the body background color */
    opacity: 0.6;
    z-index: 97; /* Below the footer bar */
    pointer-events: none; /* Allow clicks/swipes to pass through */
}

.pwa-footer-bar-message {
    display: none;
}

body.is-pwa .pwa-footer-bar-message {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10px;
    color: #2b679b;
    opacity: 0.6;
    z-index: 97;
    pointer-events: none;
    padding-bottom: env(safe-area-inset-bottom);
}