:root {
  --sidebar-width: 30ch;
  --main-content-width: 120ch;
}

html {
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  overflow-x: clip;
}

#app-wrapper {
  display: grid;
  grid-template-areas:
    "nav-left nav-main nav-right"
    "sidebar-left main-content sidebar-right";
  grid-template-columns: var(--sidebar-width) minmax(0, var(--main-content-width)) var(--sidebar-width);
  grid-template-rows: auto 1fr;
  gap: var(--block-space);
  justify-content: center;
  min-height: 100vh;
  /* padding-inline: var(--block-space); */
}

#nav-left {
  grid-area: nav-left;

  & ul > li {
    /* display: block; */
    width: 100%;
  }
}

#nav-main {
  grid-area: nav-main;
}

#nav-right {
  grid-area: nav-right;
}

#main-content {
  grid-area: main-content;
}

#sidebar-left {
  grid-area: sidebar-left;
}

#sidebar-right {
  grid-area: sidebar-right;
}

#app-wrapper.full-width {

  grid-template-areas:
    "nav-left nav-main nav-right"
    "main-content main-content main-content";
  grid-template-columns: var(--sidebar-width) minmax(auto, var(--main-content-width)) var(--sidebar-width);
}

#app-wrapper.full-width #sidebar-left,
#app-wrapper.full-width #sidebar-right {
  display: none;
}

#app-wrapper.full-width #main-content {
  max-width: none;
}

.action-bar {
  display: flex;
  gap: var(--inline-space);
  align-items: center;
  margin-block-end: var(--block-space);
}

.actions {
  display: flex;
  align-items: center;
  gap: calc(var(--block-space) * 0.5);
  flex-wrap: nowrap;
}

@media (max-width: 1260px) {

  #app-wrapper {
    grid-template-areas:
      "nav-left nav-left nav-left"
      "nav-main nav-main nav-right"
      "sidebar-left main-content main-content"
      "sidebar-right main-content main-content"
      ". main-content main-content";
    grid-template-columns: var(--sidebar-width) 1fr auto;
    grid-template-rows: auto auto auto auto 1fr;
  }

  #app-wrapper.full-width {
    grid-template-areas:
      "nav-left nav-main nav-right"
      "main-content main-content main-content";
    grid-template-columns: auto 1fr auto;
  }

  #app-wrapper.full-width #sidebar-left,
  #app-wrapper.full-width #sidebar-right {
    display: none;
  }
}

@media (max-width: 960px) {
  #app-wrapper {
    grid-template-areas:
      "nav-left nav-left nav-left"
      "nav-main nav-main nav-right"
      "sidebar-left sidebar-left sidebar-left"
      "main-content main-content main-content"
      "sidebar-right sidebar-right sidebar-right";
    grid-template-columns: 1fr;
  }
}