/* normal page layout */
body {
  background-color: var(--bg);
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-columns:
    [extra-start full-start] var(--body-padding)
    [full-pad-start pad-start] 1fr
    [content-start] minmax(0, var(--text-maxwidth)) [content-end]
    1fr [full-pad-end pad-end]
    var(--body-padding) [extra-end full-end];
  grid-template-rows: auto 1fr auto;
}

body.dark {
  background-color: var(--mb);
}

@media only screen and (min-width: 878px) {
  body {
    grid-template-columns:
      [extra-start full-start] var(--body-padding)
      [full-pad-start] 1fr
      [pad-start] var(--body-padding)
      [content-start] var(--text-maxwidth) [content-end]
      var(--body-padding) [pad-end]
      1fr [full-pad-end]
      var(--body-padding) [extra-end full-end];
  }
}

@media only screen and (min-width: 1400px) {
  body {
    grid-template-columns:
      [extra-start] 1fr
      [full-start] var(--body-padding)
      [full-pad-start] 197px
      [pad-start] var(--body-padding)
      [content-start] var(--text-maxwidth) [content-end]
      var(--body-padding) [pad-end]
      197px [full-pad-end]
      var(--body-padding) [full-end]
      1fr [extra-end];
  }
}

body.menu-open {
  overflow: hidden;
}

header,
footer {
  grid-column: extra-start / extra-end;
}

main.page {
  padding-top: var(--minim);
  padding-bottom: var(--breve);
  min-height: calc(100vh - var(--header-height));
  overflow: hidden;
}

main,
.tw {
  grid-column: content-start / content-end;
}

.mw {
  grid-column: full-start / full-end;
}

@media only screen and (min-width: 878px) {
  .mw {
    grid-column: pad-start / pad-end;
  }
}

.fw {
  grid-column: full-pad-start / full-pad-end;
}

.ffw {
  grid-column: full-start / full-end;
}

main.centered {
  display: flex;
  flex-direction: column;
  align-items: center;
}

main.subgrid,
.tw.subgrid,
.mw.subgrid,
.fw.subgrid,
.ffw.subgrid {
  display: grid;
  grid-template-columns: subgrid;
  grid-auto-rows: min-content;
}

/* dashboard layout */
.sidebar-layout {
  grid-column: full-pad-start / full-pad-end;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "top-bar" "nav" "main";
  grid-template-rows: min-content min-content auto;
  column-gap: var(--semibreve);
  align-items: start;
  min-height: calc(100svh - var(--header-height));
}

@media (min-width: 640px) {
  .sidebar-layout {
    grid-template-columns: 240px 1fr;
    grid-template-areas: "top-bar top-bar" "nav main";
    grid-template-rows: min-content auto;
  }
}

.sidebar-main {
  padding-top: var(--minim);
  grid-area: main;
  height: 100%;
  min-width: 0;
}