/* Dash13 — Controle de Pedido. Layout para celular / tela em pé.
 *
 * No desktop são duas colunas: os filtros à esquerda e, à direita, a barra de
 * totais em cima e a grade de cartões embaixo. No celular tudo vira uma coluna
 * só, com altura fixa em px — sem px, o pai passa a ter height:auto, não sobra
 * flex para distribuir, e os filtros com `flex: 1` nascem com altura zero.
 *
 * Três coisas deste dash NÃO precisam de regra aqui, e é de propósito:
 *
 *   - a GRADE de cartões já se resolve sozinha. Ela é
 *     `repeat(auto-fill, minmax(max(320px, um terço), 1fr))`, e numa coluna de
 *     celular (~360px) isso dá exatamente uma coluna. Forçar `1fr` aqui seria
 *     repetir no CSS uma decisão que já está no JS, e as duas iam divergir;
 *   - a BARRA DE TOTAIS também. Ela quebra em dois grupos por `flex-wrap`, com
 *     base `min(130px, metade)` em cada número, o que dá 2+2 em qualquer
 *     largura de celular. Medido em teste/teste-cartao-pedido.html;
 *   - o filtro de PREVISÃO (`#dash13-filterPrazo`) já nasce com altura em px e
 *     `flex: none` no próprio JS, pelo mesmo motivo do filtro de período: a
 *     lista dele é FIXA — sempre as mesmas cinco faixas —, então a altura sai
 *     do conteúdo e não da sobra da coluna. Filtro que não pede `flex: 1` não
 *     cai na armadilha que esta folha existe para consertar.
 *
 * O que precisa de regra é só o que depende de altura, porque altura é
 * justamente o que o `height: auto` do modo celular tira.
 */
@media (pointer: coarse), (orientation: portrait) {
  #dash13 {
    flex-direction: column !important;
    height: auto !important;
    padding-bottom: 40px !important;
  }

  /* ------------------------------------------------------------- filtros
     a coluna da esquerda vira a primeira faixa da página */
  #dash13-column1 {
    max-width: none !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

  /*
   * Cada árvore de filtro com altura própria.
   *
   * No desktop elas dividem a sobra com `flex: 1`. Aqui não há sobra para
   * dividir — a coluna é `height: auto` —, então `flex: 1` daria altura zero e
   * a pessoa veria só o título "Status" empilhado, sem nenhuma opção embaixo.
   * É o mesmo motivo do Dash4.
   *
   * 220px mostra cerca de seis opções antes de rolar, o suficiente para os
   * sete status.
   */
  #dash13-filterStatus {
    width: 100% !important;
    height: 220px !important;
    flex: none !important;
  }

  /*
   * Produto, Cliente e Vendedor são RÓTULOS que abrem popup — um título e uma linha de
   * texto, 58px. Não são árvore e não precisam dos 220px dela; com a altura da
   * árvore sobrariam 160px de caixa cinza vazia em cada um.
   */
  #dash13-filterProduto,
  #dash13-filterCliente,
  #dash13-filterVendedor {
    width: 100% !important;
    height: 58px !important;
    flex: none !important;
  }

  /* ---------------------------------------------------------------- lista
     a coluna da direita: barra de totais em cima, cartões embaixo */
  #dash13-column2 {
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

  /*
   * O QUADRO vira uma pilha: as cinco colunas uma embaixo da outra.
   *
   * Lado a lado, cada coluna tem 300px e as cinco somam 1.540px — num telefone
   * de 360px isso é rolar de lado cinco telas para ver o último status, e
   * ninguém rola de lado à procura de coluna. Empilhadas, cada status é uma
   * seção com o nome e a contagem no topo.
   */
  #dash13-lista {
    width: 100% !important;
    height: auto !important;
    flex: none !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /*
   * Cada coluna ocupa a largura e ganha altura fixa, com rolagem própria.
   *
   * Sem a altura, a coluna de "Recebido" — que tem centenas de pedidos —
   * empurraria as outras quatro para 40.000px abaixo e ninguém chegaria lá. A
   * altura em px é obrigatória: no modo celular o pai é `height: auto` e não
   * sobra flex para distribuir, então `flex: 1` daria altura zero.
   */
  #dash13-lista > div {
    width: 100% !important;
    height: 460px !important;
    flex: none !important;
  }
}