/* A CENTRAL NO CELULAR.
 *
 * Medido em 16/10/2026, na produção: o bundle da Central tem 21 classes
 * responsivas em 79.858 linhas, e 464 classes de layout — 95% das decisões de
 * layout não têm variante para tela pequena. O bundle é compilado e não tem
 * fonte, então as telas não podem ganhar variante por lá. O que dá para fazer
 * é por fora, em CSS, e é isto.
 *
 * QUATRO REGRAS QUE ESTE ARQUIVO SEGUE:
 *
 *   1. Nada vale acima de 640px. Todo seletor vive dentro da media query, e a
 *      suíte confere isso. O desktop tem que sair daqui como entrou.
 *
 *   2. Nenhum rótulo e nenhuma medida por POSIÇÃO de coluna. A primeira ideia
 *      era virar cada linha da tabela em cartão com o nome da coluna em
 *      `::before`, e fixar as duas primeiras colunas. As duas foram
 *      descartadas na medição:
 *        - `::before` é posição fixa: mudou a ordem das colunas no bundle,
 *          aparece "Líquido" em cima do bruto. Rótulo errado sobre dinheiro é
 *          pior que rolar a tabela para o lado.
 *        - coluna fixa precisa saber a largura RENDERIZADA da anterior para
 *          se deslocar. Medido: a primeira ficou com 60px e o deslocamento
 *          calculado era 40px — as duas se sobrepunham, e a de cima estava
 *          sem fundo. Chute de largura em CSS não sobrevive a conteúdo
 *          diferente.
 *
 *   3. Cor sempre por variável do tema. `--somax-surface` é #ffffff no claro e
 *      #0d1b30 no escuro — exatamente o fundo do painel da tabela (conferido
 *      na tela: rgb(13,27,48)). Cor fixa quebraria um dos dois temas, e o
 *      alternador fica.
 *
 *   4. Só o que foi medido. Não entra sombra de rolagem nem dica de
 *      "arraste": a tabela JÁ rola dentro da própria caixa e a página não
 *      rola para o lado em nenhuma rota. Se as pessoas descobrem essa
 *      rolagem ou não, eu não medi — e palpite não vira regra de CSS.
 */

@media (max-width: 640px) {

  /* ---------------------------------------------------------------- *
   * 1. ALVO DE TOQUE
   *
   * 37 dos 46 controles da tela de Comissões tinham menos de 44px de
   * altura — o mínimo da Apple; o Material pede 48. Errar o toque numa
   * tela onde o botão ao lado é "enviar repasse" não é detalhe.
   *
   * Os 37 foram levantados um por um, e NENHUM é link dentro de texto
   * corrido: são 6 links do menu (32px), 1 alternador de tema (34px),
   * 2 abas (32px), 1 busca (38px), 1 seletor (40px), 2 botões de ação
   * (40px), 20 caixas de seleção (16px) e 4 botões de ordenar coluna
   * (16px). Por isso a regra pode ser ampla sem inchar parágrafo: não há
   * parágrafo com link aqui.
   * ---------------------------------------------------------------- */

  button,
  [role="button"],
  select,
  textarea,
  input:not([type="checkbox"]):not([type="radio"]),
  nav a {
    min-height: 44px;
  }

  /* NÃO ENTRA `min-width`. Era a regra seguinte e saiu na medição: numa
   * fileira de controles já apertada, dar 44px de largura mínima a todos
   * faz o flex encolher os outros — o botão "Filtros" caiu de 77px para
   * 44px de largura, texto cortado, para consertar um alvo que não estava
   * quebrado. E largura nunca foi o problema medido: o levantamento dos 37
   * alvos olhou ALTURA, e os botões de texto já passam dos 44px de largura
   * sozinhos.
   */

  /* `h-10` do Tailwind é `height: 2.5rem` FIXO, e altura fixa vence
   * `min-height`. Aqui o mínimo é que vale.
   *
   * Restrito a controle, e com o quadrado de fora: `h-10 w-10` e
   * `h-8 w-8` existem no bundle (1 e 7 vezes) e são avatar e ícone —
   * `height: auto` neles colapsaria o círculo. */
  button.h-10:not(.w-10),
  button.h-9:not(.w-9),
  button.h-8:not(.w-8),
  a.h-10:not(.w-10),
  a.h-9:not(.w-9),
  a.h-8:not(.w-8),
  select.h-10, select.h-9, select.h-8,
  input.h-10, input.h-9, input.h-8 {
    height: auto;
    min-height: 44px;
  }

  /* A CAIXA DE SELEÇÃO É O CASO QUE NÃO FECHA EM 44px.
   *
   * São 20 por tela, uma por linha, de 16×16. Levá-las a 44 esticaria cada
   * linha da tabela em 28px: a tabela inteira ficaria mais difícil de ler
   * para consertar o alvo de uma coisa só.
   *
   * 22×22 quase dobra a área de toque (256 → 484 px²) sem mexer na altura
   * da linha, porque a célula já tem altura útil para isso. Chegar aos 44
   * exigiria envolver a caixa num `<label>` — mudança de marcação dentro
   * do bundle compilado. Fica anotado, não feito às cegas. */
  table input[type="checkbox"],
  table input[type="radio"] {
    width: 22px;
    height: 22px;
  }

  /* ---------------------------------------------------------------- *
   * 2. O MENU DEIXA DE ESCONDER DESTINO
   *
   * Os 6 itens (Dashboard, Vendas, Comissões, Recuperação, Financeiro,
   * Admin) ficam numa fileira de 581px dentro de uma caixa de 343px que
   * rola para o lado. Em 375px, "Financeiro" e "Admin" estão FORA DA
   * TELA — e nada na tela diz que aquilo arrasta.
   *
   * Em vez de ensinar a arrastar, a fileira quebra em duas linhas: os 6
   * destinos visíveis ao mesmo tempo. `nav .w-max` tem especificidade
   * maior que a utilitária, então vence sem `!important`; e `.w-max`
   * aparece UMA vez na página — é esta fileira.
   * ---------------------------------------------------------------- */

  nav .w-max {
    /* `100%` e não `auto`: `auto` num flex item resolve para min-content
     * quando o pai não tem largura definida, e aí os 6 itens empilham em
     * coluna em vez de quebrar em duas linhas (medido: fileira de 10px de
     * largura e 294 de altura). `100%` resolve contra o pai, que é
     * `w-full`. */
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.25rem;
  }

  /* Sem a fileira larga, a caixa não tem mais o que rolar. */
  nav [class*="overflow-x-auto"] {
    overflow-x: visible;
  }

  /* ---------------------------------------------------------------- *
   * 3. A TABELA PEDE MENOS LARGURA
   *
   * Comissões exige 908px em 9 colunas; Financeiro 747, Vendas 718. Em
   * 375px nenhuma cabe, e nenhuma vai caber: são 9 colunas de conteúdo
   * real.
   *
   * O que dá para devolver é respiro: `px-4` em 9 colunas são 288px só de
   * padding lateral. Caindo para `px-2`, a tabela pede 14% menos — menos
   * rolagem para a mesma informação, sem esconder coluna nenhuma e sem
   * depender de QUAL coluna é qual.
   *
   * Isto NÃO faz a tabela caber no celular. Fazer caber de verdade pede
   * uma das duas coisas que estão fora deste arquivo: cartão com rótulo
   * (frágil por posição, ver regra 2) ou cirurgia no bundle.
   * ---------------------------------------------------------------- */

  table th,
  table td {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}