/**
 * Model A chrome — tab / desktop 100%. Spec: SharedDocuments/UI/Safe-Phones-Area.md
 * PWA height: mobile-safe-area-pwa.css (100lvh). Shared classes: PublicAssetsCss.md
 * Do not re-declare html/body/#root/.App height in src CSS except listed locals:
 * ForestCalc #root scroll, Portal map overflow, GISOS iframe overflow, AGRO Cards .main-holder.
 * Requires: viewport-fit=cover.
 * Load after fm.css, before mobile-safe-area-pwa.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;
  --AppBottomBarHeight: 60px;
  --AppViewportHeight: 100%;
  --AppViewportHeightStable: 100%;
}

/* Cyborg Bootstrap does not set html/body height. Tab = layout viewport minus browser chrome. */
html,
body,
.App,
#App {
  height: 100%;
}

#root {
  box-sizing: border-box;
  height: 100%;
  padding-bottom: var(--SafeAreaInsetBottom);
}

/*
 * AppShell pages: the document must not scroll. AppFixedBottom is in-flow
 * (position: relative inside .AppShell). If html/body/#root grow with content,
 * the bar is not sticky (Safari tab: Back after the list, Login not at bottom).
 * ForestCalc home has no .AppShell — keep #root as the scroller.
 * min-height: 0 (not 100%) so the flex root child can shrink; .AppShellClient scrolls.
 */
html:has(.AppShell),
html:has(.AppShell) body,
#root:has(.AppShell) {
  height: 100%;
  overflow: hidden;
}

#root:has(.AppShell) {
  padding-bottom: 0;
}

#root:has(.AppShell) > * {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

/*
 * Chrome must stay frosted (fm.css .menu-blur-cb), not a solid black plate.
 * Opaque #000 here sat on the same node as .menu-blur-cb (later cascade) and
 * behind inner .cb wrappers — GIS Docs / GISOS / AGRO / Shooting all went solid.
 * Paint only the safe-area inset strip so notch / home-indicator are not empty.
 */
.AppFixedTop,
.AppFixedBottom,
.navbar.AppFixedTop,
.navbar.AppFixedBottom {
  background-color: transparent;
  background-image: none;
  border-width: 0;
}

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

.AppFixedTop::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--SafeAreaInsetTop, 0px);
  background-color: rgba(10, 10, 10, 0.85);
  pointer-events: none;
}

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

.AppFixedBottom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--SafeAreaInsetBottom, 0px);
  background-color: rgba(10, 10, 10, 0.85);
  pointer-events: none;
}

.AppFixedTop.cb,
.AppFixedBottom.cb,
.AppFixedTop > .cb,
.AppFixedBottom > .cb {
  background-color: rgba(10, 10, 10, 0.7);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.AppFixedBottom #loading {
  position: relative;
  height: 0;
  overflow: visible;
  z-index: 1055;
}

.AppFixedBottom #loading .browser-loading,
.AppFixedBottom .browser-loading {
  position: absolute;
  top: 0;
  bottom: auto;
  left: 0;
  right: 0;
  z-index: 1055;
  height: 3px;
  width: 100%;
}

.AppTopBarSpacer {
  height: calc(var(--AppTopBarHeight) + var(--SafeAreaInsetTop));
  flex-shrink: 0;
}

.AppBottomBarSpacer {
  height: calc(var(--AppBottomBarHeight) + var(--SafeAreaInsetBottom));
  flex-shrink: 0;
}

.AppShell {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.AppShell .AppFixedTop,
.AppShell .AppFixedBottom {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  flex: 0 0 auto;
  flex-shrink: 0;
  width: 100%;
  z-index: 2;
  margin-bottom: 0;
}

.AppShell .AppFixedTop {
  display: flow-root;
  overflow: hidden;
}

.AppShell .AppFixedTop .scroll-menu {
  overflow-x: auto;
  overflow-y: hidden;
  height: auto;
}

.AppShell .AppTopBarSpacer,
.AppShell .AppBottomBarSpacer {
  display: none;
}

.AppShellClient {
  flex: 1 1 0%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.AppShellClient.AppShellClientNoScroll {
  overflow: hidden;
}

.AppShellClient.AppShellClientNoScroll .tab-content {
  height: 100%;
}

/*
 * Portal editors (#modal-dialogs). Spec: SharedDocuments/UI/AllAppsBottomButtonsBar.md
 * Width SSOT = Bootstrap .container (same column as GIS Docs body.container).
 * Overlay root must also have class `container`. Tab height 100%; PWA height in mobile-safe-area-pwa.css.
 * Plate color is fm.css on the overlay node (c3 / cb) — do not paint a color here.
 */
.AppShellOverlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 100%;
  max-height: 100%;
}

.AppShellOverlay.container {
  /* GIS Docs body.container column. .AppShell { width:100% } is the same specificity as
     Bootstrap .container and loads later, so it filled the viewport. Do not use width:auto
     with left/right 0 — that also fills. Explicit 750/970/1170 + margin:auto centers. */
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .AppShell.AppShellOverlay.container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .AppShell.AppShellOverlay.container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .AppShell.AppShellOverlay.container {
    width: 1170px;
  }
}