/* Dash10 — Cobrança. Layout para celular / tela em pé.
 *
 * No desktop são quatro faixas empilhadas: seletores no topo, indicadores,
 * os dois gráficos lado a lado e a matriz 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 para distribuir.
 *
 * Este dash não tem troca de visão, então não há nenhum `display` controlado
 * por JS para respeitar aqui.
 */
@media (pointer: coarse), (orientation: portrait) {
  #dash10 {
    flex-direction: column !important;
    height: auto !important;
    padding-bottom: 40px !important;
  }

  /* ---------------------------------------------------------------- topo
     contexto + A Receber/A Pagar + Por Cliente/Por Título */
  #dash10-row1 {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

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

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

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

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

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

  /* o aging tem rótulo inclinado no eixo: precisa de altura sobrando */
  #dash10-column1 {
    width: 100% !important;
    height: 400px !important;
    flex: none !important;
  }

  /* o ranking mostra 12 nomes longos, um por linha */
  #dash10-column2 {
    width: 100% !important;
    height: 460px !important;
    flex: none !important;
  }

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

  /* --------------------------------------------------------------- lista
     a matriz é o produto final do dash: ganha a maior altura da tela */
  #dash10-matriz1 {
    width: 100% !important;
    height: 650px !important;
    flex: none !important;
  }
}