* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #161616;
  background-color: #f3f3f3;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  display: grid;
  grid-template-columns: 5rem 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'sidebar header'
    'sidebar main'
    'footer footer';
  transition: grid-template-columns 0.3s ease;
}

body.sb-expand {
  grid-template-columns: 12.5rem 1fr;
}

.dashboard-header {
  background-color: #fff;
  padding: 1.25rem;
  grid-area: header;
}
.dashboard-footer {
  background-color: #fff;
  padding: 1.25rem;
  grid-area: footer;
}

.dashboard-sidebar {
  color: #fff;
  background-color: #1d1d29;
  grid-area: sidebar;
  position: relative;
}

.dashboard-sidebar button {
  position: absolute;
  inset: 4.5rem -0.75rem auto auto;
  width: 1.5rem;
  aspect-ratio: 1;
  background-color: #fff;
  border: transparent;
  border-radius: 50%;
  cursor: pointer;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  line-height: 1.3;
}

/* rendiamo la classe un grid container */
.dashboard-main {
  padding: 1.25rem;
  grid-area: main;

  /* dicendo solo che è una griglia ho una colonna e tante righe quanti sono gli elementi */
  display: grid;
  /* gap tra le celle */
  gap: 1rem;
}

/* classe .card per ogni elemento che compone la griglia nel main */
.card {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #fff;
  /* setto un block size minimo di 7rem, in modo che la card occupi uno spazio anche se vuota */
  min-block-size: 7rem;
}

/* media query per risoluzione schermo */
@media (width >= 768px) {
  /* se larghezza maggiore uguale 768px, la griglia in main sarà composta da 4 colonne di largehzza 1fr */
  .dashboard-main {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card-1 {
  background-image: linear-gradient(62deg, #fbab7e 0%, #f7ce68 100%);
}

@media (width >= 768px) {
  /* tutti gli elementi con classe .card hanno una larghezza di 2 colonne sopra i 768px */
  .card {
    grid-column: span 2;
  }

  /* la posizione degli elementi nella griglia non viene assegnata tramite grid-area property con ogni area che ha un nome e viene collegata ad un elemento come fatto nel caso della pagina principale, ma viene assegnata una posizione ed una dimensione ad ogni elemento definendo riga e colonna di partenza e di fine */
  /* una grid ha come riferimenti le linee che la compongono, se ho 4 colonne ho 5 linee verticali 1colonna2colonna3colonna4colonna5, per le righe è la stessa cosa ma in verticale */
  /* per definire lo spazio di un'area tengo conto di queste linee definendole con il loro numero, ad esempio dicendo che la prima area va dalla linea 1 alla 5 per la larghezza vuol dire che occupa tutte e 4 le colonne, come dire span 4 */
  /* i numeri delle linee possono essere definiti anche negativamente, la linea 5 sarebbe la -1, contando dalla fine all'inizio */
  .card-1 {
    /* grid-row-start: 1; */
    /* grid-row-end: 2; */

    /* shorthand per definire linee di riga di inizio e di fine */
    /* grid-row: 1 / 2; */

    /* grid-column-start: 1; */
    /* grid-column-end: 5; */

    /* shorthand per definire linee di colonna di inizio e di fine */
    /* grid-column: 1 / 5; */
    /* grid-column: 1 / -1; */

    /*
      grid-row-start / grid-column-start /
      grid-row-end / grid-column-end
    */

    /* shorthand per definire linee di righe e colonne: linea riga inizio / linea colonna inizio / linea riga fine / linea colonna fine */
    /* oppure dopo aver definito la property grid-template-areas posso definire tramite nome */
    /* grid-area: 1 / 1 / 2 / -1; */

    /* grid-area: span 1 / span 4; */

    /* assegno larghezza tramite property grid-column, quindi non indico inizio e fine ma tramite keyword span (campata) */
    grid-column: span 4;

    /* prova con span 3 e .card-2 con span 1 */
    /* le 2 card si troverebbero tutte e 2 sulla prima riga */
    /* grid-column: span 3; */
  }

  /* .card-2 {
    grid-column: span 1;
  } */
}

@media (width >= 992px) {
  /* reset seconda e terza card ai valori di default (1 colonna, 1 riga) */
  .card-2,
  .card-3 {
    grid-area: auto;
  }

  /* la card 4  va in terza riga ed occupa una colonna di larghezza, la prima colonna*/
  .card-4 {
    grid-area: 3 / 1 / 4 / 2;
  }

  /* la card 5 va in terza riga, viene dopo la 4 occupando una colonna di larghezza, la seconda colonna */
  .card-5 {
    grid-area: 3 / 2 / 4 / 3;
  }

  /* le card 6 e 7 hanno una altezza di 2 righe e una larghezza di 1 colonna (partono dalla seconda riga perchè c'è spazio disponibile) */
  .card-6,
  .card-7 {
    grid-area: span 2 / auto;
  }

  /* mantengono il grid-column: span 2 */
  .card-8,
  .card-9 {
    /* min-block-size: 12rem; */
  }

  /* valori di default, 1 colonna di span */
  .card-10,
  .card-11,
  .card-12,
  .card-13 {
    grid-column: auto;
  }
}