/* ============================================================
   TABLET / IPAD
   Keep full sidebar
   ============================================================ */

@media (max-width: 1100px) {
  :root {
    --sidebar-width: 220px;
  }

  .sidebar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .page-content {
    padding: 22px;
  }
}

/* ============================================================
   MOBILE ONLY
   Collapse sidebar
   ============================================================ */

@media (max-width: 600px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;

    width: 100%;
    height: 68px;

    z-index: 50;

    flex-direction: row;
    padding: 7px;

    border-right: 0;
    border-top: 1px solid var(--border);

    overflow-x: auto;
  }

  .brand,
  .nav-label,
  .sidebar-footer,
  .nav-text {
    display: none;
  }

  .nav-section {
    display: contents;
  }

  .nav-item {
    min-width: 62px;
    justify-content: center;
    margin: 0 2px;
    padding-left: 0;
    padding-right: 0;
  }

  .nav-icon {
    width: auto;
  }

  .topbar {
    padding: 0 16px;
  }

  .page-content {
    padding: 18px 16px 90px;
  }
}