/*
 * Ajustes de telas pequenas para /admin e /gestor.
 *
 * Os painéis foram desenhados para monitor: grid larga, filtros lado a lado,
 * botão do tamanho do texto. No celular isso vira rolagem lateral da página
 * inteira — e página que anda para os lados é a diferença entre "abro no
 * telefone" e "espero chegar no computador".
 *
 * Só layout. Nenhuma regra aqui muda o que a tela faz, apenas como ela cabe.
 *
 * Tudo abaixo de 768px. Acima disso, nada muda.
 */

@media (max-width: 767.98px) {

    /* ── O que nunca pode empurrar a página ─────────────────────────────── */

    /* Rolagem lateral é sempre de um elemento, nunca do documento: senão o
       cabeçalho e o menu saem de vista junto com a tabela. */
    html, body {
        overflow-x: hidden;
    }

    /* Largura fixa em pixel é o que mais quebra: um `width:140px` num input
       dentro de um input-group já estoura a linha em tela de 360px. */
    .card-body input.form-control,
    .card-body select.form-select,
    .card-body .input-group {
        max-width: 100% !important;
    }

    /* ── Filtros ────────────────────────────────────────────────────────── */

    /* Filtro em `col-auto` fica lado a lado e espreme cada campo até ninguém
       conseguir tocar. Empilhado, cada um ocupa a linha inteira. */
    .card-body > .row > [class*="col-auto"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Botão de ação de filtro passa a ocupar a largura toda: alvo de toque
       decente, e some a fileira de botõezinhos apertados. */
    .card-body > .row > [class*="col-auto"] > .btn {
        width: 100%;
    }

    /* O `ms-auto` empurra para a direita numa linha que já não existe. */
    .card-body .ms-auto,
    .card-body .ms-md-auto {
        margin-left: 0 !important;
    }

    /* ── Tabelas ────────────────────────────────────────────────────────── */

    /* Tabela rola dentro do próprio card. `-webkit-overflow-scrolling` mantém
       a inércia do iOS, que sem isso trava e parece travamento da página. */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    .table td, .table th {
        padding: 8px 10px !important;
        font-size: 12px;
    }

    /* ── DevExtreme ─────────────────────────────────────────────────────── */

    /* A grid já rola sozinha na horizontal. O que atrapalha é o resto do
       cromo ocupando altura que a tela não tem. */
    .dx-datagrid-header-panel .dx-toolbar {
        padding: 4px 0;
    }

    .dx-datagrid .dx-row > td {
        padding: 7px 8px !important;
        font-size: 12px;
    }

    /* Busca da grid na largura toda: no celular é o filtro que a pessoa
       realmente usa, e ela vinha com 240px fixos. */
    .dx-datagrid-search-panel {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* ── Modais ─────────────────────────────────────────────────────────── */

    /* Vários modais têm `max-width` em pixel no dialog. Em tela estreita isso
       não encolhe sozinho e o conteúdo encosta na borda. */
    .modal-dialog {
        max-width: calc(100% - 1rem) !important;
        margin: 0.5rem auto;
    }

    /* Rodapé de modal com três botões vira três linhas em vez de três
       fatias ilegíveis. */
    .modal-footer .btn {
        flex: 1 1 100%;
        margin-left: 0;
    }

    /* ── Cards de número ────────────────────────────────────────────────── */

    /* Os blocos de indicador usam fonte de dashboard. Em 360px o valor
       quebra no meio. */
    .fs-2 { font-size: 1.1rem !important; }
    .fs-1 { font-size: 1rem !important; }

    /* ── Carregando ─────────────────────────────────────────────────────── */

    /* A animação de carregamento tem 350px fixos. Numa tela de 360 ela vai de
       borda a borda e parece defeito, não espera. */
    #modalGiraGira .lottie {
        width: 180px !important;
        height: 180px !important;
    }

    /* ── Cabeçalho ──────────────────────────────────────────────────────── */

    /* Título e botão de ação no mesmo `card-header` disputam a linha. */
    .card-header.d-flex {
        flex-wrap: wrap;
        gap: .5rem;
    }
}

/* Alvo de toque: vale em qualquer tela pequena, não só no telefone.
   44px é o mínimo que se acerta com o dedo sem mirar. */
@media (max-width: 991.98px) and (pointer: coarse) {
    .btn-sm, .btn {
        min-height: 38px;
    }

    .dx-datagrid .dx-row .btn-link {
        min-width: 32px;
        min-height: 32px;
    }
}