/*
 * O painel no celular e no tablet.
 *
 * O resto do CSS deste projeto já é escrito de baixo para cima: as
 * colunas nascem empilhadas e só se abrem em `min-width`. Este arquivo
 * não refaz aquilo — ele cuida do que nenhum breakpoint resolve, que é o
 * comportamento do DEDO e do teclado do sistema.
 *
 * Todos os nomes `fi-*` daqui foram conferidos no DOM antes de virarem
 * regra. É a mesma cautela que o `mapa-de-onibus.css` explica: classe
 * utilitária que o Filament não usa por conta própria não existe no CSS
 * servido, e regra escrita contra nome inventado é regra morta que
 * ninguém percebe.
 */

/* ------------------------------------------------------------------ */
/* O zoom que o iPhone dá sozinho                                      */
/* ------------------------------------------------------------------ */

/*
 * O Safari do iOS AUMENTA A PÁGINA quando o dedo toca num campo com
 * fonte menor que 16px — e não desfaz o zoom quando o campo perde o
 * foco. O painel usa 14px, então toda venda no celular começava com a
 * tela ampliada e torta, e o operador tinha que fechar o zoom na unha a
 * cada campo.
 *
 * Dezesseis pixels é o número exato: é o piso que o iOS aceita sem
 * ampliar. Vale só onde o ponteiro é grosso (dedo) — no desktop os 14px
 * continuam, porque ali a densidade é o que faz caber a tela inteira.
 */
@media (pointer: coarse) {
    .fi-input,
    .fi-select,
    .fi-textarea,
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    input[type="datetime-local"],
    select,
    textarea {
        font-size: 16px;
    }
}

/* ------------------------------------------------------------------ */
/* Alvo de dedo                                                        */
/* ------------------------------------------------------------------ */

/*
 * Quarenta e quatro pixels.
 *
 * É a medida que a Apple e o Google publicam, e a razão é física: a
 * ponta do dedo cobre uns 9 mm, e num alvo de 32px o usuário acerta o
 * vizinho. No balcão, com o passageiro esperando, errar o botão de
 * cancelar por causa de 12 pixels é o tipo de erro que ninguém perdoa.
 *
 * O alvo cresce sem o desenho crescer: a área clicável se estica por
 * `min-height`/`min-width`, e o ícone continua do mesmo tamanho no meio
 * dela. A tela não fica mais gorda — só fica mais fácil de acertar.
 */
@media (pointer: coarse) {
    .fi-icon-btn,
    .fi-ta-actions .fi-btn,
    .fi-ta-actions .fi-icon-btn,
    .fi-ac-btn-action {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    /* O cabeçalho que ordena a coluna tinha 20px de altura. */
    .fi-ta-header-cell-sort-btn {
        min-height: 2.75rem;
        padding-block: 0.5rem;
    }

    /* A caixa de marcar da linha da tabela e das nossas telas. */
    .fi-ta-row input[type="checkbox"],
    .maxal-escolha input[type="checkbox"] {
        width: 1.35rem;
        height: 1.35rem;
    }

    /* Espaço entre os botões de ação da linha: encostados, viram um só
       alvo com duas respostas diferentes. */
    .fi-ta-actions {
        gap: 0.5rem;
    }
}

/* ------------------------------------------------------------------ */
/* O ônibus visto de cima, num celular                                 */
/* ------------------------------------------------------------------ */

/*
 * O mapa não tinha NENHUMA media query: as poltronas eram 2,75rem
 * fixos, e um ônibus de cinco poltronas por fila empurrava a página
 * para o lado num aparelho estreito.
 *
 * A resposta é encolher a casa, e não rolar. Rolar um mapa que se lê de
 * relance obriga o operador a arrastar para saber se a 32 está livre —
 * e ele está de pé, com uma das mãos ocupada. Em 2,25rem a poltrona
 * ainda é um alvo de dedo confortável (36px) e a fila de cinco cabe
 * inteira em 375px.
 *
 * O `overflow-x` fica como rede de segurança, e só isso: se um dia
 * aparecer um layout largo demais, o mapa rola dentro da própria caixa
 * em vez de arrastar a página inteira junto.
 */
@media (max-width: 30rem) {
    .maxal-onibus {
        --casa: 2.25rem;
        --vao: 0.3rem;
        --corredor: 1.25rem;

        max-width: 100%;
        overflow-x: auto;
        padding: 0.625rem;
    }
}

/* No tablet em pé sobra espaço: a casa volta ao tamanho de mesa. */
@media (min-width: 30.0625rem) and (max-width: 64rem) {
    .maxal-onibus {
        max-width: 100%;
        overflow-x: auto;
    }
}

/* ------------------------------------------------------------------ */
/* Tabelas no dedo                                                     */
/* ------------------------------------------------------------------ */

/*
 * A tabela do Filament já rola sozinha dentro de `.fi-ta-content-ctn` —
 * conferido no DOM, e é por isso que a página não arrasta para o lado.
 * O que faltava era o dedo saber disso.
 *
 * `overscroll-behavior-x: contain` impede que o arrasto horizontal na
 * tabela vire "voltar página" no navegador, que é o gesto de borda do
 * iOS e do Android. Perder o formulário preenchido por causa de um
 * arrasto para ver a coluna da direita é o pior tipo de perda: silenciosa
 * e sem desfazer.
 */
@media (pointer: coarse) {
    .fi-ta-content-ctn {
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Linha mais alta: a da tabela é lida em movimento, no ônibus. */
    .fi-ta-cell {
        padding-block: 0.625rem;
    }
}

/* ------------------------------------------------------------------ */
/* Modal em tela pequena                                               */
/* ------------------------------------------------------------------ */

/*
 * O modal do Filament abre centralizado, e num celular isso deixa metade
 * da altura vazia enquanto o teclado do sistema come a outra metade. Em
 * tela estreita ele encosta embaixo e ocupa a largura toda — que é como
 * todo aplicativo de celular faz, e é onde o dedo já está.
 */
@media (max-width: 30rem) {
    .fi-modal-window {
        margin-block-end: 0;
        max-width: 100%;
        border-end-start-radius: 0;
        border-end-end-radius: 0;
    }
}

/* ------------------------------------------------------------------ */
/* As nossas telas                                                     */
/* ------------------------------------------------------------------ */

@media (max-width: 30rem) {
    /* O cabeçalho da venda: o passo e o estado do caixa lado a lado
       espremiam os dois. Empilhados, cada um se lê. */
    .maxal-cabecalho {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /*
       O botão que conclui — vender, dar baixa, fechar o caixa — ocupa a
       largura inteira. Num celular, botão pequeno no canto é botão que
       se erra, e estes três não têm desfazer.
    */
    .maxal-form .fi-btn,
    .maxal-acoes .fi-btn {
        width: 100%;
        justify-content: center;
    }
}