/*
  Dashboard gerencial (paginas/painel/Dashboard): moldura da página e grade de 12 colunas.
  O CSS de cada bloco fica no arquivo do bloco: dashboard-resumo.css (resumo e limites), dashboard-graficos.css
  (evolução e rankings) e dashboard-filtro.css (atalhos, descrição do filtro, tabela do grupo e esqueleto).
*/
.dashboard-filtro {
  margin-top: var(--espaco-3);
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--espaco-4);
  margin-top: var(--espaco-4);
}

.dashboard > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.dashboard .cartao {
  margin: 0;
}

.dashboard .numero {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dashboard .painel-numeros {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}

.dashboard .painel-numero {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dashboard-tributos thead th {
  white-space: normal;
}

.dashboard .cartao h3 {
  margin: var(--espaco-5) 0 var(--espaco-3);
  font-size: var(--tamanho-do-corpo);
}

@media (min-width: 48rem) {
  .dashboard > .dashboard-ranking,
  .dashboard > .dashboard-limites,
  .dashboard > .dashboard-tomadas {
    grid-column: span 6;
  }

  .dashboard > .dashboard-ranking + .dashboard-ranking + .dashboard-ranking {
    grid-column: 1 / -1;
  }
}

@media (min-width: 72rem) {
  .dashboard > .dashboard-faturamento {
    grid-column: span 7;
  }

  .dashboard > .dashboard-tributos {
    grid-column: span 5;
  }

  .dashboard > .dashboard-ranking,
  .dashboard > .dashboard-ranking + .dashboard-ranking + .dashboard-ranking {
    grid-column: span 4;
  }
}