/* Keep the desktop sidebar controllable on compressed tablet-sized screens. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.app main,
.page {
  min-width: 0;
}

@media (min-width: 601px) and (max-width: 900px) {
  .sidebar-toggle {
    display: grid !important;
    top: 18px;
  }

  .app:not(.sidebar-collapsed) .sidebar {
    width: 220px;
    padding: 26px 18px;
  }

  .app:not(.sidebar-collapsed) main {
    width: auto;
    max-width: calc(100vw - 220px);
    margin-left: 220px;
  }

  .app:not(.sidebar-collapsed) .brand b,
  .app:not(.sidebar-collapsed) .nav span,
  .app:not(.sidebar-collapsed) .lock-button {
    display: initial;
    font-size: inherit;
  }

  .app:not(.sidebar-collapsed) .nav-count {
    display: inline-grid;
  }

  .app.sidebar-collapsed .sidebar {
    width: 74px;
    padding: 26px 10px;
  }

  .app.sidebar-collapsed main {
    width: auto;
    max-width: calc(100vw - 74px);
    margin-left: 74px;
  }

  .app.sidebar-collapsed .brand b,
  .app.sidebar-collapsed .nav span,
  .app.sidebar-collapsed .nav-count,
  .app.sidebar-collapsed .lock-button {
    display: none !important;
  }

  .app.sidebar-collapsed .sidebar nav {
    width: 100%;
    min-width: 0;
  }

  .app.sidebar-collapsed .nav {
    display: grid !important;
    grid-template-columns: 22px !important;
    justify-content: center !important;
    justify-items: center;
    width: 100%;
    min-width: 0;
    gap: 0 !important;
    padding-inline: 0;
    overflow: hidden;
  }
}

@media (max-width: 600px) {
  .sidebar-toggle {
    display: none !important;
  }
}