html,
body {
  min-height: 100%;
}

body {
  margin: 0;
}

.wb-dashboard-body > .wb-navbar {
  position: sticky;
  top: 0;
  z-index: 20;
}

.wb-sandbox-workspace-shell {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
}

.wb-dashboard-shell > .wb-sidebar {
  --wb-sidebar-w: 320px;
  min-height: 0;
}

.wb-dashboard-shell > .wb-sidebar .wb-sidebar-nav {
  padding: var(--wb-s5) var(--wb-s4) var(--wb-s4);
}

.wb-dashboard-shell > .wb-sidebar .wb-sidebar-section {
  margin: 0;
}

.wb-sandbox-workspace-shell > .wb-card {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-radius: 0;
  border-top: 0;
  border-right: 0;
  box-shadow: none;
}

.wb-sandbox-workspace-shell > .wb-card:first-child {
  border-left: 0;
}

.wb-sandbox-workspace-shell > .wb-card + .wb-card {
  border-left: 1px solid var(--wb-border);
}

.wb-sandbox-editor-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.wb-sandbox-editor {
  min-height: 100%;
  height: 100%;
  width: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--wb-font-mono);
  font-size: 0.95rem;
  line-height: 1.6;
  white-space: pre;
  resize: none;
}

.wb-sandbox-preview-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  min-width: 0;
  min-height: 0;
}

.wb-sandbox-preview-shell {
  padding: var(--wb-s4);
  background: var(--wb-surface-2);
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

.wb-sandbox-preview-stage {
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  margin: 0;
  transition: max-width var(--wb-t), box-shadow var(--wb-t);
}

.wb-sandbox-preview-stage.is-preview-desktop {
  max-width: 100%;
}

.wb-sandbox-preview-stage.is-preview-tablet {
  width: 52rem;
  max-width: none;
}

.wb-sandbox-preview-stage.is-preview-mobile {
  width: 25rem;
  max-width: none;
}

.wb-sandbox-frame {
  width: 100%;
  height: 100%;
  min-height: 32rem;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-r-lg);
  background: var(--wb-surface);
  box-shadow: var(--wb-shadow-sm);
}

[data-sandbox-warnings] {
  min-height: 10rem;
}

.wb-dashboard-shell > .wb-sidebar .wb-link-list-item {
  grid-template-columns: 1fr;
  gap: var(--wb-s2);
  padding: var(--wb-s3);
}

.wb-dashboard-shell > .wb-sidebar .wb-link-list-desc {
  overflow-wrap: anywhere;
}

.wb-sandbox-workspace-shell > .wb-card > .wb-card-body:last-child {
  border-top: 1px solid var(--wb-border);
  background: var(--wb-surface-2);
}

.wb-sandbox-workspace-shell > .wb-card > .wb-card-header > .wb-split > :first-child,
.wb-sandbox-workspace-shell > .wb-card > .wb-card-body,
[data-sandbox-warnings] .wb-list-item-text {
  min-width: 0;
}

[data-sandbox-warnings] .wb-list-item-title,
[data-sandbox-warnings] .wb-list-item-sub {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

@media (max-width: 1200px) {
  .wb-sandbox-workspace-shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 1040px) {
  .wb-sandbox-workspace-shell {
    grid-template-columns: 1fr;
    gap: var(--wb-s3);
    padding: var(--wb-s3);
  }

  .wb-sandbox-workspace-shell > .wb-card {
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-r-xl);
    box-shadow: var(--wb-shadow-sm);
  }
}

@media (max-width: 900px) {
  .wb-sandbox-workspace-shell > .wb-card:last-child > .wb-card-header > .wb-split {
    flex-direction: column;
    align-items: flex-start;
  }

  .wb-sandbox-workspace-shell > .wb-card:last-child > .wb-card-header > .wb-split > :last-child {
    width: 100%;
  }

  .wb-sandbox-workspace-shell > .wb-card:last-child > .wb-card-header [data-sandbox-widths] {
    justify-content: flex-start;
  }

  .wb-sandbox-editor,
  .wb-sandbox-frame {
    min-height: 32rem;
  }

  .wb-topbar-actions {
    align-items: flex-start;
    justify-content: flex-start;
  }
}

@media (max-height: 860px) {
  .wb-sandbox-workspace-shell {
    gap: 0;
    padding: 0;
  }

  .wb-sandbox-preview-shell {
    padding: var(--wb-s3);
  }

  .wb-sandbox-frame,
  .wb-sandbox-editor {
    min-height: 26rem;
  }
}

@media (max-height: 720px) {
  .wb-sandbox-workspace-shell {
    padding: 0;
    gap: 0;
  }

  .wb-sandbox-preview-shell {
    padding: var(--wb-s2);
  }

  .wb-sandbox-frame,
  .wb-sandbox-editor {
    min-height: 22rem;
  }
}

@media (max-width: 640px) {
  .wb-sandbox-workspace-shell {
    padding: var(--wb-s3);
    gap: var(--wb-s3);
  }

  .wb-sandbox-preview-shell {
    padding: var(--wb-s3);
  }

  .wb-sandbox-frame {
    min-height: 28rem;
  }
}