/**
 * Model A — shared mobile safe area (all GIS Explorer WEB apps).
 * Spec: SharedDocuments/Safe-Phones-Area/README.md
 *
 * Requires: viewport-fit=cover on <meta name="viewport">.
 * Native: StatusBar.setOverlaysWebView({ overlay: false }) in each Capacitor app.
 *
 * Load after fm.css, before app-specific CSS.
 */

:root {
  --SafeAreaInsetTop: env(safe-area-inset-top, 0px);
  --SafeAreaInsetRight: env(safe-area-inset-right, 0px);
  --SafeAreaInsetBottom: env(safe-area-inset-bottom, 0px);
  --SafeAreaInsetLeft: env(safe-area-inset-left, 0px);
  --AppTopBarHeight: 50px;

  /*
   * Viewport height tokens (all apps).
   * Default to 100vh; upgrade to dvh/svh when supported.
   * Prefer these over bare 100vh — see README §VIII.
   */
  --AppViewportHeight: 100vh;
  --AppViewportHeightStable: 100vh;
}

@supports (height: 100dvh) {
  :root {
    --AppViewportHeight: 100dvh;
  }
}

@supports (height: 100svh) {
  :root {
    --AppViewportHeightStable: 100svh;
  }
}

/* Scroll root — home indicator / gesture bar at bottom */
#root {
  box-sizing: border-box;
  min-height: var(--AppViewportHeight);
  padding-bottom: var(--SafeAreaInsetBottom);
}

/* Non-fixed regions */
.AppSafeAreaTop {
  padding-top: var(--SafeAreaInsetTop);
}

.AppSafeAreaBottom {
  padding-bottom: var(--SafeAreaInsetBottom);
}

.AppSafeAreaHorizontal {
  padding-left: var(--SafeAreaInsetLeft);
  padding-right: var(--SafeAreaInsetRight);
}

/* Fixed chrome */
.AppFixedTop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  padding-top: var(--SafeAreaInsetTop);
  box-sizing: border-box;
}

.AppFixedBottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  padding-bottom: var(--SafeAreaInsetBottom);
  box-sizing: border-box;
}

/* Spacer below a fixed top bar (set --AppTopBarHeight on a parent wrapper) */
.AppTopBarSpacer {
  height: calc(var(--AppTopBarHeight) + var(--SafeAreaInsetTop));
  flex-shrink: 0;
}

/* Fixed alerts (offline banner, etc.) */
.AppFixedAlertTop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  box-sizing: border-box;
  padding: 10px 12px;
  padding-top: calc(10px + var(--SafeAreaInsetTop));
}

/*
 * Full-height panels (shared).
 * Use when a region must size to the viewport. Prefer flex-fill of a padded
 * parent when possible; use these when the layout still needs viewport units.
 *
 * - AppFullHeight / AppFullHeightBelowTopBar → dynamic viewport (dvh)
 * - *Stable → small viewport (svh): stays above expanded mobile browser chrome
 *
 * BelowTopBar variants subtract --AppTopBarHeight and safe insets.
 * Do not also wrap the same node in padding that repeats those insets
 * (avoid double-counting with #root / parent padding).
 */
.AppFullHeight {
  box-sizing: border-box;
  height: var(--AppViewportHeight);
  max-height: var(--AppViewportHeight);
}

.AppFullHeightStable {
  box-sizing: border-box;
  height: var(--AppViewportHeightStable);
  max-height: var(--AppViewportHeightStable);
}

.AppFullHeightBelowTopBar {
  box-sizing: border-box;
  height: calc(
    var(--AppViewportHeight) - var(--AppTopBarHeight) - var(--SafeAreaInsetTop) -
      var(--SafeAreaInsetBottom)
  );
  max-height: calc(
    var(--AppViewportHeight) - var(--AppTopBarHeight) - var(--SafeAreaInsetTop) -
      var(--SafeAreaInsetBottom)
  );
}

.AppFullHeightBelowTopBarStable {
  box-sizing: border-box;
  height: calc(
    var(--AppViewportHeightStable) - var(--AppTopBarHeight) - var(--SafeAreaInsetTop) -
      var(--SafeAreaInsetBottom)
  );
  max-height: calc(
    var(--AppViewportHeightStable) - var(--AppTopBarHeight) - var(--SafeAreaInsetTop) -
      var(--SafeAreaInsetBottom)
  );
}