/* The document scrolls vertically; wide data stays inside its own table. */
html {
  max-width: 100%;
  overflow-x: clip;
}

body {
  min-width: 0;
  max-width: 100%;
}

#root,
.app-shell {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.page-content,
.table-scroll {
  min-width: 0;
  max-width: 100%;
}

.topbar .profile-control,
.topbar .profile-trigger {
  min-width: 0;
  max-width: 100%;
}

.profile-trigger > span:not(.avatar) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-control {
  flex-shrink: 0;
}

@media (max-width: 900px) {
  html:has(.app-shell--document-scroll) {
    scrollbar-gutter: auto;
  }

  .app-shell--document-scroll > .main {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .sidebar {
    max-width: 100%;
  }

  /* Safari must not zoom the page just to focus an input. */
  #root input,
  #root select,
  #root textarea {
    font-size: 16px;
  }

  .stats-table thead th:first-child {
    min-width: 0;
    max-width: 100%;
  }

  .popover {
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 700px) {
  .statistics-view-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .statistics-view-row > .stats-view-tools {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    margin-left: 0;
  }

  .group-toolbar,
  .list-tools {
    min-width: 0;
    max-width: 100%;
  }

  .list-tools > .search-input,
  .list-tools > .searchable-select {
    min-width: 0;
    max-width: 100%;
  }
}