:root {
  --pwa-safe-top: env(safe-area-inset-top, 0px);
  --pwa-safe-right: env(safe-area-inset-right, 0px);
  --pwa-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pwa-safe-left: env(safe-area-inset-left, 0px);
  --app-header-base-height: 2.75rem;
  --app-sidebar-brand-height: 2.75rem;
}

html,
body {
  overscroll-behavior-x: none;
}

body.layout-fixed {
  padding: 0;
}

.app-header.navbar {
  align-items: stretch;
  padding-top: var(--pwa-safe-top) !important;
  padding-bottom: 0 !important;
  min-height: calc(var(--app-header-base-height) + var(--pwa-safe-top)) !important;
  max-height: none !important;
}

.app-sidebar {
  box-sizing: border-box;
  padding-top: var(--pwa-safe-top) !important;
}

.sidebar-expand-lg .app-sidebar .sidebar-wrapper {
  height: calc(100vh - var(--pwa-safe-top) - var(--pwa-safe-bottom) - var(--app-sidebar-brand-height)) !important;
  max-height: calc(100vh - var(--pwa-safe-top) - var(--pwa-safe-bottom) - var(--app-sidebar-brand-height)) !important;
}

@media (max-width: 991.98px) {
  .sidebar-expand-lg .app-sidebar {
    top: 0 !important;
    bottom: var(--pwa-safe-bottom) !important;
    max-height: 100vh !important;
    height: 100vh !important;
  }
}

@media (min-width: 992px) {
  .sidebar-expand-lg.layout-fixed .app-sidebar {
    top: var(--pwa-safe-top) !important;
    max-height: calc(100vh - var(--pwa-safe-top) - var(--pwa-safe-bottom)) !important;
  }
}

.demo-mode-banner {
  top: var(--pwa-safe-top);
}

.demo-mode-toast {
  bottom: calc(1.25rem + var(--pwa-safe-bottom));
}

.app-main {
  padding-bottom: calc(0.75rem + var(--pwa-safe-bottom));
}

.app-footer {
  padding-bottom: calc(1rem + var(--pwa-safe-bottom));
}

.login-page {
  min-height: calc(100vh - var(--pwa-safe-top) - var(--pwa-safe-bottom));
  padding-top: var(--pwa-safe-top);
  padding-bottom: var(--pwa-safe-bottom);
  box-sizing: border-box;
}

html.ios-nav-guard,
html.ios-nav-guard body {
  touch-action: pan-y pinch-zoom;
}

@media (max-width: 991.98px) {
  .modal-footer {
    padding-bottom: calc(1rem + var(--pwa-safe-bottom));
  }

  .modal-dialog {
    margin-bottom: calc(0.5rem + var(--pwa-safe-bottom));
  }
}