html, body {
  height: 100%;
  overflow: hidden;
}

#page-shell {
  display: flex;
  align-items: stretch;
  height: 100vh;
  height: 100dvh;
}

#app-rail {
  flex: 0 0 var(--rail-collapsed-width);
  width: var(--rail-collapsed-width);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 20;
}

.rail-apps {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.rail-footer {
  flex: 0 0 auto;
}

#page-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

#header,
.breadcrumbs {
  flex: 0 0 auto;
}

#page-topbar {
  flex: 0 0 auto;
}

#page-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

#model-panel {
  flex: 0 0 var(--panel-width);
  width: var(--panel-width);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    width var(--duration-slow) var(--ease-out),
    flex-basis var(--duration-slow) var(--ease-out),
    opacity var(--duration-normal) var(--ease-out);
}

#page-main.panel-collapsed #model-panel {
  flex: 0 0 0;
  width: 0;
  opacity: 0;
  pointer-events: none;
  border: none;
}

.model-panel-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

#page-content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

@media (max-width: 640px) {
  #page-main {
    position: relative;
  }
}

body.login {
  overflow: auto;
}
body.login #app-rail {
  display: none;
}
body.login #page-shell {
  display: block;
  height: auto;
  min-height: 100vh;
}

body.logs-page #page-content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.logs-page .logs {
  flex: 1 1 auto;
}