/* Dash11 — DRE Gerencial. Layout para celular / tela em pé.
 *
 * Quatro faixas empilhadas no desktop: seletores, indicadores, os dois
 * gráficos lado a lado e o DRE ocupando o resto. No celular tudo vira uma
 * coluna só com altura fixa em px — sem px o ECharts e o Tabulator nascem com
 * altura zero, porque o pai passa a ter height:auto e não sobra flex.
 *
 * Nota: no celular as colunas Total e "% Receita" deixam de ser congeladas
 * (isso é decidido no Dash11.js, não aqui) — com a conta presa à esquerda e
 * mais duas presas à direita não sobraria tela para os períodos rolarem.
 */
@media (pointer: coarse), (orientation: portrait) {
  #dash11 {
    flex-direction: column !important;
    height: auto !important;
    padding-bottom: 40px !important;
  }

  /* ---------------------------------------------------------------- topo */
  #dash11-row1 {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

  #dash11-visualLabel1 {
    width: 100% !important;
    height: 70px !important;
    flex: none !important;
  }

  #dash11-multipleSelection1,
  #dash11-multipleSelection2 {
    width: 100% !important;
    height: 50px !important;
    flex: none !important;
  }

  /* -------------------------------------------------------- indicadores */
  #dash11-row2 {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

  #dash11-row2 .dash11-labels {
    width: 100% !important;
    height: 80px !important;
    flex: none !important;
  }

  /* ------------------------------------------------------------ gráficos */
  #dash11-row3 {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

  /* o eixo tem até 19 períodos com rótulo inclinado: precisa de altura */
  #dash11-column1 {
    width: 100% !important;
    height: 420px !important;
    flex: none !important;
  }

  /* 12 contas de despesa, uma por linha */
  #dash11-column2 {
    width: 100% !important;
    height: 460px !important;
    flex: none !important;
  }

  #dash11-barLineChart1,
  #dash11-horizontalBarChart1 {
    width: 100% !important;
    height: 100% !important;
    flex: none !important;
  }

  /* ------------------------------------------------------------- o DRE */
  #dash11-matriz1 {
    width: 100% !important;
    height: 650px !important;
    flex: none !important;
  }
}