/* Production runtime overrides for the ui-preview theme. */
#app {
  min-height: 100vh;
}

#app.preview-app {
  display: block;
}

body {
  background: var(--bg-page);
}

.page-stage {
  height: 100vh;
  min-height: 100vh;
  border: 0;
  border-radius: 0;
}

.desktop-app {
  height: 100%;
}

.auth-screen {
  min-height: 100vh;
}

.modal-mask,
.toast {
  position: fixed;
}

.toast {
  bottom: 28px;
}

@media (max-width: 768px) {
  #app {
    height: 100%;
    min-height: var(--app-h, 100vh);
  }

  .page-stage,
  .desktop-app,
  .sidebar {
    display: none;
  }

  .mobile-app {
    --primary: #3370FF;
    --primary-hover: #1F5FFF;
    --brand-weak: #E8F0FE;
    --bg-page: #F5F6F7;
    --bg-table-alt: #FAFAFA;
    --text-primary: #1F2329;
    --text-secondary: #646A73;
    --text-tertiary: #8F959E;
    --border: #E5E6EB;
    --border-light: #F0F1F2;
    --success: #00B42A;
    --warning: #FF7D00;
    --neutral: #8F959E;
    --hover: #F2F3F5;
    font-family: var(--font-mobile);
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--app-h, 100%);
    background: var(--bg-page);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .mobile-header {
    padding-top: calc(12px + env(safe-area-inset-top));
  }

  .mobile-content {
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }

  .mobile-content.no-nav {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .mobile-nav,
  .m-bottom-bar {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
}