/**
 Standard layout is the one column small layout
*/
* :not(.no-reset *),
:not(.no-reset) *:after,
:not(.no-reset) *:before {
  box-sizing: border-box;
}

:root {
  --sidebar-width: 230px;
}
html {
  margin: 0;
  /*overflow: hidden;*/
  overflow-y: auto;
  overflow-x: hidden;
}

body {
  display: grid;
  margin: 0;
  min-height: 100vh;
  grid-template-columns: 100vw;
  grid-template-rows: 50px 60px 50px 50px 1fr 50px;
  grid-template-areas:
    "brand"
    "session"
    "menu"
    "breadcrumbs"
    "content"
    "version";
  overflow-y: visible;
}

body > .content {
  overflow-y: auto;
  padding: 10px;
  margin: 0;
  display: block;
  position: relative;
  grid-area: content;
}

body > .content.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  grid-template-rows: min-content 1fr;
  grid-template-areas:
    "stats"
    "cards";
}

.stats {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-template-rows: minmax(min-content, max-content);
  gap: 5px;
  overflow: auto;
}

.content.cards > .cards {
  grid-area: cards;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
  grid-template-rows: repeat(auto-fit, fit-content(200px));
  /*grid-auto-flow: dense;*/
  gap: 10px;
}

.content.only-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
  grid-auto-rows: min-content;
  gap: 10px;
}

#sideMenu {
  display: none;
  grid-area: menu;
}

#sideMenu-simple {
  grid-area: menu;
}

/**
 Bigger layout has top bar and left bar.
 */
@media (min-width: 800px) {
  body {
    max-height: 100vh;
    grid-template-columns: var(--sidebar-width) 1fr 500px;
    grid-template-rows: 60px 60px 1fr 50px;
    grid-template-areas:
      "brand session session"
      "menu breadcrumbs breadcrumbs"
      "menu content content"
      "version content content";
  }

  #sideMenu-simple {
    display: none;
  }

  #sideMenu {
    display: initial;
  }

  .popup {
    padding-left: var(--sidebar-width);
  }
}

@media (min-width: 1000px) {
  body {
    max-height: 100vh;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) 450px;
    grid-template-rows: 60px 1fr 50px;
    grid-template-areas:
      "brand breadcrumbs session"
      "menu content content"
      "version content content";
  }

  .stats {
    grid-area: stats;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-template-rows: minmax(min-content, max-content);
    gap: 5px;
    overflow: auto;
  }

  .content.cards > .cards {
    grid-area: cards;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(200px, min-content));
    grid-auto-rows: minmax(200px, min-content);
    gap: 10px;
  }

  .content.only-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
    /*grid-template-rows: repeat(auto-fit, minmax(50px, min-content));*/
    gap: 10px;
  }
}