/* Capacitor-only layout helpers */
html.is-cap {
  /* Safe area + keyboard variables */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --kb: 0px; /* updated by JS when keyboard opens */
}

/* Top bars shouldn’t hide under the status bar */
html.is-cap .topbar,
html.is-cap header.sticky,
html.is-cap .app-header {
  padding-top: max(12px, var(--sat));
}

/* Any fixed bottom element (menus, FABs, CTA buttons) should float above system nav + keyboard */
html.is-cap .bottom-menu,
html.is-cap .fixed-bottom,
html.is-cap .fab-container,
html.is-cap .avoid-system-ui {
  position: fixed; /* if not already */
  /* keep your existing left/right/width */
  bottom: max(16px, var(--sab), var(--kb)); /* push above Android gesture bar/keyboard */
}

/* Pages with a bottom bar need extra content padding so scrollable content isn’t obscured */
html.is-cap .page-with-bottom-bar,
html.is-cap body.has-bottom-bar {
  padding-bottom: max(72px, var(--sab), var(--kb));
}

/* Android sometimes reports 0 safe-area; give it a minimum lift anyway */
html.is-cap.is-android .bottom-menu,
html.is-cap.is-android .fixed-bottom,
html.is-cap.is-android .fab-container,
html.is-cap.is-android .avoid-system-ui {
  bottom: max(20px, var(--kb));
}

/* Optional utility: lift any single button that’s too close to the edge */
html.is-cap .lift-bottom {
  margin-bottom: max(16px, var(--sab), var(--kb)) !important;
}

/* =========================
   iOS Safe Area Insets
   ========================= */

:root{
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);

  /* tune if needed */
  --safe-extra-top: 0px;
  --safe-extra-bottom: 0px;
}

@supports (-webkit-touch-callout: none) {
  /* iOS safe-area padding */
  #appwrapper{
    padding-top: calc(var(--sat) + var(--safe-extra-top));
    padding-right: var(--sar);
    padding-bottom: calc(var(--sab) + var(--safe-extra-bottom));
    padding-left: var(--sal);
    box-sizing: border-box;
  }

  /* keep #mainView from “double scrolling” into the home indicator */
  #mainview{
    min-height: 0; /* important inside a flex column */
  }
}

@supports (-webkit-touch-callout: none) {
  #topNav{
    top: env(safe-area-inset-top, 0px);
  }
  #appwrapper{
    height: calc(var(--vh, 1vh) * 100) !important;
  }
}

/* Map should fill the available mainview area */
#mapcontainer,
#map{
  width: 100%;
  height: 100%;
}

/*
/*
 * Native iOS form mode:
 * Preserve reliable vertical form scrolling and allow pinch zoom.
 * Prevent horizontal rubber-band drift from hijacking diagonal swipes.
 * Keep #tileoverlay as the sole vertical scroll owner.
 */

body.native-ios.form-overlay-active #tileoverlay {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;

  touch-action: pan-y pinch-zoom;

  overscroll-behavior-x: none;
  overflow-x: hidden;
}

body.native-ios.form-overlay-active #swipecontent,
body.native-ios.form-overlay-active #tileoverlaycontent {
  overflow-y: visible;

  touch-action: pan-y pinch-zoom;

  overscroll-behavior-x: none;
  overflow-x: hidden;
}

/*
 * Native iOS tile mode:
 * Preserve one-finger vertical feed scrolling while permitting pinch zoom.
 */
body.native-ios.tile-overlay-active #tileoverlay,
body.native-ios.tile-overlay-active #swipecontent,
body.native-ios.tile-overlay-active #tileoverlaycontent,
body.native-ios.tile-overlay-active .fy-tile,
body.native-ios.tile-overlay-active .tile-scroll-container,
body.native-ios.tile-overlay-active .user-tile-wrapper {
  touch-action: pan-y pinch-zoom;
}