html,
body {
  overflow: hidden !important;
  background: #f5f5f7 !important;
}

[data-dark] html,
[data-dark] body {
  background: #000000 !important;
}

#app {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow: hidden !important;
  background: var(--bg);
}

#main-hdr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  background: var(--bg);
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 8px;
}

.srch-wrap {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 52px);
  left: 0;
  right: 0;
  z-index: 119;
  background: var(--bg);
  padding: 0 16px 8px;
}

#view-home,
#view-boards,
#view-board,
#view-stats,
#view-calendar,
#view-settings {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

#view-home.active,
#view-boards.active,
#view-board.active,
#view-stats.active,
#view-calendar.active,
#view-settings.active {
  display: flex;
}

#view-home .scroll,
#view-stats .scroll,
#view-calendar .scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-top: calc(env(safe-area-inset-top, 0px) + 60px) !important;
  padding-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 100px) !important;
  padding-left: calc(16px + env(safe-area-inset-left, 0px)) !important;
}

#view-settings .scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-top: calc(env(safe-area-inset-top, 0px) + 72px) !important;
  padding-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 132px) !important;
  padding-left: calc(16px + env(safe-area-inset-left, 0px)) !important;
}

#view-boards .scroll,
#view-board .scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-top: calc(env(safe-area-inset-top, 0px) + 60px) !important;
  padding-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px) !important;
  padding-left: calc(16px + env(safe-area-inset-left, 0px)) !important;
}

.bnav {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
  z-index: 180 !important;
}

body:has(#view-canvas.active) .bnav {
  display: none !important;
}

#view-canvas {
  position: fixed !important;
  inset: 0 !important;
  z-index: 150 !important;
  display: none;
}

#view-canvas.active {
  display: flex !important;
}

body:has(#view-canvas.active) #main-hdr,
body:has(#view-canvas.active) .srch-wrap {
  display: none !important;
}

.canvas-back,
.canvas-board-title {
  top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
}

.canvas-toolbar {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
}

.modal {
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
}

.toast {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 88px) !important;
}