:root { --safe-area-top: env(safe-area-inset-top, 0px); }

/* Apply only when running inside the Capacitor app */
html.in-app .site-header {
  top: 0;
  padding-top: var(--safe-area-top);
  height: calc(4rem + var(--safe-area-top));
  box-sizing: border-box;
}

html.in-app .header-hidden {
  transform: translateY(calc(-1 * (4rem + var(--safe-area-top))));
}

/* Push main content below the header safely */
html.in-app #manageBillsPanel {
  margin-top: calc(4rem + var(--safe-area-top)) !important;
}

/* Utility for pages whose first block uses ~6rem spacing under header */
html.in-app .header-offset {
  margin-top: calc(6rem + var(--safe-area-top)) !important;
}

/* --- Native header hide when authenticated --- */
/* Live state: hide header when app reports logged in */
html.in-app body[data-auth-logged-in="true"] .site-header { display: none !important; }
/* Instant paint using last-known auth */
html.in-app.auth-last-yes .site-header { display: none !important; }

/* Reduce top spacing if header is hidden */
html.in-app body[data-auth-logged-in="true"] #manageBillsPanel { margin-top: var(--safe-area-top) !important; }
html.in-app.auth-last-yes #manageBillsPanel { margin-top: var(--safe-area-top) !important; }
html.in-app body[data-auth-logged-in="true"] .header-offset { margin-top: calc(1rem + var(--safe-area-top)) !important; }
html.in-app.auth-last-yes .header-offset { margin-top: calc(1rem + var(--safe-area-top)) !important; }

/* Ensure crop modal is fully visible below iOS safe area on native */
html.in-app .crop-modal {
  top: calc(var(--safe-area-top) + 18px);
  height: calc(100vh - var(--safe-area-top) - 140px);
}

/* When native tab bar is active, pad the page content so fixed/100vh blocks are not obscured */
html.in-app.native-tabbar.tabbar-ready body {
  padding-bottom: var(--native-tabbar-height, 0px);
}