/* ===========================================================
   Mweso PWA / Capacitor — global safe-area insets
   Applied to every appui template via {% include %} or link.
   Keeps the fixed header clear of the status-bar / notch and
   keeps the bottom action bar above the home-indicator / OS nav.
   =========================================================== */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --header-h: 45px;
  --footer-h: 70px;
}

html, body {
  background: var(--surface, #0d1117);
}

/* Body itself only takes the horizontal insets — vertical insets
   are applied to the fixed header/footer so scrollable content can
   still fill the viewport. */
body {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* Fixed top header — push past status bar / notch. */
.header.fixed-top,
.header-style2.fixed-top {
  padding-top: calc(8px + var(--safe-top)) !important;
  padding-left: calc(12px + var(--safe-left));
  padding-right: calc(12px + var(--safe-right));
  min-height: calc(var(--header-h) + var(--safe-top));
  box-sizing: border-box;
}

/* Secondary fixed bars (filter row that sits under header) */
.fixed-top.bg-menuDark[style*="top: 45px"] {
  top: calc(45px + var(--safe-top)) !important;
}

/* Fixed bottom action bar / nav — clear the home indicator */
.footer-fixed,
.menubar-footer.footer-fixed {
  padding-bottom: calc(8px + var(--safe-bottom)) !important;
  padding-left: calc(12px + var(--safe-left));
  padding-right: calc(12px + var(--safe-right));
}

.menubar-footer .inner-bar {
  padding-bottom: calc(4px + var(--safe-bottom));
}

/* Body padding helpers used in templates */
.pt-45 {
  padding-top: calc(45px + var(--safe-top)) !important;
}
.pt-68 {
  padding-top: calc(68px + var(--safe-top)) !important;
}
.pb-80 {
  padding-bottom: calc(80px + var(--safe-bottom)) !important;
}
.pb-90 {
  padding-bottom: calc(90px + var(--safe-bottom)) !important;
}

/* Modal sheets (action sheets that slide in from bottom)
   need to clear the home indicator too. */
.modal.action-sheet .modal-content,
.modalRight .modal-content {
  padding-bottom: var(--safe-bottom);
}

/* Capacitor android: account for translucent navigation bar */
@media (display-mode: standalone) {
  .footer-fixed,
  .menubar-footer.footer-fixed {
    padding-bottom: calc(12px + var(--safe-bottom)) !important;
  }
}

/* Small touch-target safety for the bottom buttons */
.footer-fixed .tf-btn,
.menubar-footer .tf-btn {
  min-height: 48px;
}