/* ==========================================================================
   Dashboard shell layout
   ========================================================================== */
.dashboard {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background-color: var(--color-canvas);
}

.dashboard__content-wrapper {
  display: flex;
  flex: 1;
  position: relative;
  overflow: hidden;
  margin-top: var(--topbar-height);
  height: calc(100vh - var(--topbar-height));
}

/* Holds the tab strip and, under it, the page. Neither the padding nor the
   scrolling lives here any more — both moved onto the panel inside the tabs, so
   that the strip stays put while the page under it scrolls (see
   components/app_tabs). What is left is the room made for the side rail. */
.dashboard__main-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-left: var(--sidenav-width-collapsed);
  transition: margin var(--transition-slow), width var(--transition-slow);
  width: calc(100% - var(--sidenav-width-collapsed));
  overflow: hidden;
  height: 100%;
}

/* Room made for a rail the user has pinned open. An unpinned rail widening
   under the pointer floats over this instead of moving it — reflowing a wide
   table every time the pointer crosses the nav is the more expensive of the
   two, and the least asked for (see components/sidenav). */
.dashboard__main-content--nav-expanded {
  margin-left: var(--sidenav-width-expanded);
  width: calc(100% - var(--sidenav-width-expanded));
  height: 100%;
}

/* No application nav to leave room for — see layouts/dashboard. Declared after
   the expanded modifier so it wins whichever class the sidenav controller has
   left behind. */
.dashboard__main-content--no-nav,
.dashboard__main-content--no-nav.dashboard__main-content--nav-expanded {
  margin-left: 0;
  width: 100%;
}

@media (max-width: 768px) {
  .dashboard__main-content {
    margin-left: var(--sidenav-width-collapsed);
    width: calc(100% - var(--sidenav-width-collapsed));
  }

  .dashboard__main-content--nav-expanded {
    margin-left: var(--sidenav-width-collapsed);
    width: calc(100% - var(--sidenav-width-collapsed));
  }

  .dashboard__main-content--no-nav,
  .dashboard__main-content--no-nav.dashboard__main-content--nav-expanded {
    margin-left: 0;
    width: 100%;
  }
}