/* Dash12 — Planejamento de Compra (OTB). Layout para celular / tela em pé.
 *
 * No desktop são quatro faixas empilhadas: os seletores no topo, os sete
 * indicadores, os três gráficos lado a lado e a matriz do plano 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 nem painel escondido, então não há nenhum
 * `display` controlado por JS para respeitar aqui.
 */
@media (pointer: coarse), (orientation: portrait) {
  #dash12 {
    flex-direction: column !important;
    height: auto !important;
    padding-bottom: 40px !important;
  }

  /* ---------------------------------------------------------------- topo
     contexto + os cinco seletores do plano */
  #dash12-row1 {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

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

  /* cada campo é o rótulo mais os botões dele; em pé viram uma pilha */
  #dash12-campo1,
  #dash12-campo2,
  #dash12-campo3,
  #dash12-campo4 {
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

  #dash12-multipleSelection2,
  #dash12-multipleSelection5 {
    width: 100% !important;
    height: 46px !important;
    flex: none !important;
  }

  /* os dois botões de lista de semanas e o campo de arrastar a tendência */
  #dash12-periodoBotao,
  #dash12-coberturaBotao,
  #dash12-tendenciaPane {
    width: 100% !important;
    height: 46px !important;
    flex: none !important;
  }

  /* --------------------------------------------------- abrir a tabela por
     a faixa que fica colada na matriz: o título em cima, os botões embaixo */
  #dash12-row4 {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

  #dash12-tituloAgrupamento {
    height: auto !important;
    padding-top: 6px !important;
  }

  /* -------------------------------------------------------- indicadores
     são sete: em pé eles viram uma pilha, um em cima do outro */
  #dash12-row2 {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

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

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

  /* a cascata tem 6 degraus com rótulo inclinado: precisa de altura sobrando */
  #dash12-column1 {
    width: 100% !important;
    height: 400px !important;
    flex: none !important;
  }

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

  /* 12 meses no eixo, rótulo a 45 graus */
  #dash12-column3 {
    width: 100% !important;
    height: 360px !important;
    flex: none !important;
  }

  #dash12-waterfallChart1,
  #dash12-horizontalBarChart1,
  #dash12-barChart1 {
    width: 100% !important;
    height: 100% !important;
    flex: none !important;
  }

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