/* Dash9 — Financeiro. Layout para celular / tela em pé.
 *
 * No desktop são duas telas alternadas pelo botão do topo: a faixa row1 fica
 * sempre visível e, abaixo dela, #dash9-column0 (fluxo de caixa) OU
 * #dash9-marginPane (vendas margem). Aqui 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.
 *
 * Regra importante: NÃO mexer em `display` de #dash9-column0,
 * #dash9-marginPane e #dash9-multipleSelection1. Quem liga e desliga esses três
 * é o updateView() pelo inline style — forçar display aqui faria as duas telas
 * aparecerem juntas.
 */
@media (pointer: coarse), (orientation: portrait) {
  #dash9 {
    flex-direction: column !important;
    height: auto !important;
    padding-bottom: 40px !important;
  }

  /* ---------------------------------------------------------------- topo
     contexto + seletor de janela + botão de troca de tela */
  #dash9-row1 {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

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

  /* três janelas empilhadas: 15 dias / 30 dias / por mês */
  #dash9-multipleSelection1 {
    width: 100% !important;
    height: 130px !important;
    flex: none !important;
  }

  #dash9-changeViewButton {
    width: 100% !important;
    height: 44px !important;
    flex: none !important;
  }

  /* ------------------------------------------------------- fluxo de caixa
     Sem `display` aqui! */
  #dash9-column0 {
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

  #dash9-row2 {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

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

  #dash9-row3 {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

  #dash9-column1 {
    width: 100% !important;
    height: 420px !important;
    flex: none !important;
  }

  #dash9-barLineChart1 {
    width: 100% !important;
    height: 100% !important;
    flex: none !important;
  }

  #dash9-column2 {
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

  #dash9-donutChart1,
  #dash9-donutChart2 {
    width: 100% !important;
    height: 320px !important;
    flex: none !important;
  }

  /* -------------------------------------------------------- vendas margem
     Sem `display` aqui! */
  #dash9-marginPane {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

  #dash9-column3 {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    flex: none !important;
  }

  /* a árvore Ano/Mês precisa de altura própria: em flex:1 num pai com
     height:auto ela nasceria com zero */
  #dash9-filter1 {
    width: 100% !important;
    height: 300px !important;
    flex: none !important;
  }

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

  #dash9-column4 {
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

  #dash9-row4 {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

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

  #dash9-matriz1 {
    width: 100% !important;
    height: 600px !important;
    flex: none !important;
  }
}