/*
 * Ajustes de celular para o painel.
 *
 * O Filament e responsivo, mas foi desenhado para tela de escritorio: uma
 * tabela de dez colunas nao encolhe, ela transborda — e o usuario arrasta de
 * lado para ler o que interessa. As listagens principais (OS, pessoas,
 * produtos, financeiro) foram reescritas para virar cartao empilhado no
 * celular; o que esta aqui cobre as demais e os detalhes que sobram.
 *
 * Toda classe usada aqui foi conferida no HTML que o Filament 5 gera de fato.
 * Regra apontando para classe que nao existe e CSS morto: nao faz nada e nao
 * avisa, entao parece que o ajuste foi feito quando nao foi.
 */

@media (max-width: 767px) {
    /*
     * A tabela rola dentro da propria caixa, nunca empurrando a pagina.
     * Sem isto o cabecalho e a busca saem da tela junto com a tabela: a
     * pessoa arrasta para ver uma coluna e o menu some.
     */
    .fi-ta-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /*
     * O texto quebra em vez de esticar a coluna.
     *
     * Uma celula com "Condominio Residencial Parque das Aguas" numa linha so
     * empurra a tabela para fora sozinha, mesmo com poucas colunas — e o que
     * ainda obrigava a arrastar depois de esconder as colunas extras.
     */
    .fi-ta-cell,
    .fi-ta-header-cell {
        white-space: normal;
        word-break: break-word;
    }

    /* Sem largura minima herdada: em 360px cada coluna precisa poder encolher. */
    .fi-ta-table {
        min-width: 0;
    }

    /* As acoes ficam na largura do conteudo, e nao esticadas. */
    .fi-ta-actions {
        justify-content: flex-end;
    }

    /*
     * Alvo de toque de 44px — a medida que Apple e Google recomendam, e que
     * corresponde a polpa de um dedo adulto. Botao menor erra o alvo, ainda
     * mais com a mao suja de graxa.
     */
    .fi-btn,
    .fi-ac-btn-action,
    .fi-ta-actions .fi-icon-btn,
    .fi-dropdown-list-item {
        min-height: 2.75rem;
    }

    /* O botao principal da tela ocupa a largura toda: e o que se quer tocar. */
    .fi-header .fi-ac {
        width: 100%;
    }

    .fi-header .fi-ac .fi-btn {
        width: 100%;
        justify-content: center;
    }

    /*
     * O modal ocupa a tela inteira em vez de flutuar numa caixinha: em 360px
     * de largura, a margem come o espaco util do formulario.
     */
    .fi-modal-window {
        margin: 0;
        max-width: 100%;
        border-radius: 0;
        min-height: 100dvh;
    }

    /*
     * Campos com 16px. Abaixo disso o iOS da zoom sozinho ao focar o campo e
     * a tela fica torta ate a pessoa fechar o teclado — um dos incomodos mais
     * comuns de formulario em iPhone.
     */
    .fi-input,
    .fi-select-input,
    .fi-ta-search-field input {
        font-size: 16px !important;
    }

    /* Os rotulos de campo ficam acima, nao ao lado: em tela estreita o rotulo
       lateral espreme o campo a ponto de nao caber uma data. */
    .fi-fo-field-label-col {
        margin-bottom: 0.25rem;
    }
}

/*
 * Instalado como app, a area util comeca abaixo do entalhe do aparelho.
 * Sem isto o menu fica sob a camera no iPhone.
 */
@media (display-mode: standalone) {
    .fi-topbar {
        padding-top: env(safe-area-inset-top);
    }

    .fi-main {
        padding-bottom: env(safe-area-inset-bottom);
    }
}