/* Dash8 — Radar. Layout para celular / tela em pé.
 *
 * No desktop o Dash8 é uma grade densa: row1 no topo, column0 no meio (com row2
 * e row3 lado a lado internamente) e a matriz embaixo. Aqui tudo vira uma
 * coluna só, com altura fixa em px por bloco — sem px os gráficos do ECharts e
 * a tabela do 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 #dash8-column0, #dash8-visualLabel1,
 * #dash8-row7 e #dash8-matriz1. O botão "Ver Tabela / Ver Gráficos"
 * (updateView) liga e desliga esses quatro no inline style — forçar display
 * aqui quebraria a troca de visão.
 */
@media (pointer: coarse), (orientation: portrait) {
  #dash8 {
    flex-direction: column !important;
    height: auto !important;
    padding-bottom: 40px !important;
  }

  /* ---------------------------------------------------------------- row1
     topo: rótulo do cliente/vendedor + labels do mês + seletor + botão.
     São 4 coisas numa linha só — no celular viram uma pilha. */
  #dash8-row1 {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

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

  /* labels do mês (só aparecem na visão "Ver Tabela") */
  #dash8-row7 {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

  #dash8-row7 .dash8-labels {
    width: 100% !important;
    height: 70px !important;
    flex: none !important;
  }

  /* seletor Vendedor / Cliente */
  #dash8-multipleSelection1 {
    width: 100% !important;
    height: 90px !important;
    flex: none !important;
  }

  /* botão "Ver Tabela / Ver Gráficos": é a única <label> filha direta do row1
     e não tem id próprio, por isso o seletor estrutural */
  #dash8-row1 > label {
    width: 100% !important;
    height: 44px !important;
    flex: none !important;
  }

  /* ------------------------------------------------------------- column0
     recipiente das duas faixas de gráficos. Sem `display` aqui! */
  #dash8-column0 {
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

  /* --------------------------------------------------------------- row2
     faixa de cima: indicadores anuais + medidores + vendas por ano */
  #dash8-row2 {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

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

  #dash8-column1 {
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

  /* "Média Histórica Anual" e "Realizado em <ano>" */
  #dash8-column1 .dash8-labels {
    width: 100% !important;
    height: 90px !important;
    flex: none !important;
  }

  #dash8-multiTitleGauge3 {
    width: 100% !important;
    height: 260px !important;
    flex: none !important;
  }

  #dash8-multiTitleGauge4 {
    width: 100% !important;
    height: 260px !important;
    flex: none !important;
  }

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

  #dash8-verticalBarChart1 {
    width: 100% !important;
    height: 100% !important;
  }

  /* --------------------------------------------------------------- row3
     faixa de baixo: metas + medidores + comparativo mensal */
  #dash8-row3 {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

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

  /* "Meta Anual" e "Performance Planejada" ficam lado a lado: são o par que
     se arrasta para cima/baixo para alterar a meta, e perto um do outro a
     comparação faz sentido */
  #dash8-row4 {
    width: 100% !important;
    height: 110px !important;
    flex: none !important;
  }

  #dash8-row4 .dash8-labels {
    height: 100% !important;
  }

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

  #dash8-column5 {
    width: 100% !important;
    height: 280px !important;
    flex: none !important;
  }

  #dash8-column6 {
    width: 100% !important;
    height: 280px !important;
    flex: none !important;
  }

  #dash8-multiTitleGauge1,
  #dash8-multiTitleGauge2 {
    width: 100% !important;
    height: 100% !important;
  }

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

  #dash8-verticalBarChart2 {
    width: 100% !important;
    height: 100% !important;
  }

  /* -------------------------------------------------------------- matriz
     tabela do Tabulator. Sem `display` aqui — quem liga e desliga é o
     updateView(). Só altura, que em flex:1 nasceria zero. */
  #dash8-matriz1 {
    width: 100% !important;
    height: 700px !important;
    flex: none !important;
  }
}