/* ============================================================================
   Ajustes de tela pequena
   ----------------------------------------------------------------------------
   Escopo deliberadamente estreito. Esta é uma ferramenta de escritório e o
   celular é uso acidental — o objetivo aqui NÃO é redesenhar as telas para
   mobile, é garantir que nada fique inalcançável e que dê para perceber o que
   rola para o lado.

   Medido em 390px de largura, aba por aba, em 11/08/2026: o corpo da página não
   estoura em nenhuma delas. As tabelas largas já rolam dentro do próprio quadro.
   O problema é que no celular a barra de rolagem só aparece durante o toque,
   então tabela que rola parece tabela cortada. Daí a maior parte deste arquivo
   ser apenas deixar a barra visível.

   Arquivo separado do style.css de propósito: lá `.modal` está declarada duas
   vezes e mexer no meio daquilo custou tempo antes.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Bug de verdade: a tabela de Revisão ficava cortada sem saída.
   O container tinha só `overflow-y`, então os 797px de tabela em 390px de tela
   eram simplesmente clipados. Vale em qualquer largura, não só no celular —
   numa janela de desktop estreita acontecia o mesmo.
   ---------------------------------------------------------------------------- */
#table-revisoes-container { overflow-x: auto; }

/* ----------------------------------------------------------------------------
   2. Bug de verdade: o painel que o Tabulator abre no lugar das colunas que não
   couberam (aba Manutenção) chega a 1156px e também não rolava.
   ---------------------------------------------------------------------------- */
.tabulator-responsive-collapse { overflow-x: auto; }
.tabulator-responsive-collapse table { min-width: 0; }

@media (max-width: 780px) {

    /* ------------------------------------------------------------------------
       0. O pior caso, e o que o print mostrou: em Combustível e Pedágios a
       coluna do "Resumo Final" tem `width: 420px` com `flex-shrink: 0`. Numa
       tela de 390px ela transbordava e, por não poder ceder, empurrava a coluna
       irmã (que tem `min-width: 0`) até quase zero — o título saía com uma letra
       por linha.

       `!important` é necessário: os valores estão inline no HTML e inline vence
       folha de estilo. É a mesma armadilha já registrada no projeto.

       O `sticky` também sai: numa tela de 844px de altura, uma coluna colada no
       topo com 420px de conteúdo cobre a tela inteira.
       ------------------------------------------------------------------------ */
    #view-combustivel > div[style*="display: flex"] {
        flex-wrap: wrap !important;
        gap: 16px !important;
    }
    .coluna-resumo {
        width: 100% !important;
        flex-shrink: 1 !important;
        position: static !important;
        max-height: none !important;
        overflow-y: visible !important;
    }

    /* ------------------------------------------------------------------------
       3. Barra de rolagem visível onde há rolagem horizontal.
       É a correção que resolve a maior parte da impressão de "não cabe nada":
       o conteúdo estava alcançável, só não havia como saber.
       ------------------------------------------------------------------------ */
    nav,
    .tabulator-tableholder,
    #table-revisoes-container,
    .tabulator-responsive-collapse {
        scrollbar-width: thin;
    }
    nav::-webkit-scrollbar,
    .tabulator-tableholder::-webkit-scrollbar,
    #table-revisoes-container::-webkit-scrollbar,
    .tabulator-responsive-collapse::-webkit-scrollbar {
        height: 6px;
        width: 6px;
        /* `display: block` porque o WebKit esconde a barra por padrão no celular. */
        display: block;
        -webkit-appearance: none;
    }
    nav::-webkit-scrollbar-thumb,
    .tabulator-tableholder::-webkit-scrollbar-thumb,
    #table-revisoes-container::-webkit-scrollbar-thumb,
    .tabulator-responsive-collapse::-webkit-scrollbar-thumb {
        background: rgba(100, 116, 139, .55);
        border-radius: 3px;
    }
    nav::-webkit-scrollbar-track,
    .tabulator-tableholder::-webkit-scrollbar-track,
    #table-revisoes-container::-webkit-scrollbar-track,
    .tabulator-responsive-collapse::-webkit-scrollbar-track {
        background: rgba(148, 163, 184, .18);
    }

    /* ------------------------------------------------------------------------
       4. A barra de abas tem 914px de conteúdo em 368px visíveis. Já rolava,
       mas cortava a aba no meio da palavra e parecia defeito. `scroll-padding`
       + `scroll-snap` fazem a aba parar inteira, e o gesto de arrastar ganha
       inércia própria em vez de disputar com a página.
       ------------------------------------------------------------------------ */
    nav {
        scroll-snap-type: x proximity;
        scroll-padding-inline: 8px;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    nav .nav-btn {
        scroll-snap-align: start;
        flex-shrink: 0;
    }

    /* ------------------------------------------------------------------------
       5. Rolagem de tabela não deve arrastar a página junto quando chega no fim.
       ------------------------------------------------------------------------ */
    .tabulator-tableholder,
    #table-revisoes-container {
        overscroll-behavior: contain;
    }
}

/* ============================================================================
   ABA MANUTENÇÃO EM TELA ESTREITA
   ----------------------------------------------------------------------------
   Medido em 390px: o formulário chegava a 2.275px de altura e a tabela tinha
   939px de conteúdo em 336px visíveis. Os campos têm largura em `flex-basis`
   pensada para desktop (330px, 430px), e num celular de 390px isso empilha tudo
   com sobra e corta o que passa.
   ============================================================================ */

/* Os cartões só existem no celular; a tabela só existe no desktop. Quem decide é
   este `@media`, nunca JavaScript: layout lido de `window.innerWidth` na criação
   da tabela congela e quebra ao girar o aparelho. */
#lista-manutencao-mobile { display: none; }

@media (max-width: 780px) {
    #grid-manutencao { display: none; }
    #lista-manutencao-mobile { display: block; }

    /* ---- formulário ---- */
    /* Todos os campos em largura cheia, sem os `flex-basis` de desktop. */
    #form-manutencao > .form-group {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    /* Os seis campos curtos ficam em duas colunas: um por linha empilhava o
       formulário em 2.275px de altura. Só "Serviço Realizado", notas, anexos e o
       resumo do veículo ficam em largura cheia, porque o conteúdo pede. */
    #form-manutencao > .form-group:nth-child(-n+6) {
        flex: 1 1 calc(50% - 0.5rem) !important;
    }
    #man-file { width: 100%; }
    /* O resumo do veículo cresce em vez de cortar: no celular há altura sobrando,
       o que falta é largura. */
    .resumo-veiculo { height: auto; min-height: 58px; }
    #form-manutencao button[type="submit"] { width: 100%; margin-top: 4px; }
    /* A linha de nota fica em uma linha só, com o valor menor. */
    #man-notas-lista .nota-num { flex: 1 1 auto !important; }
    #man-notas-lista .nota-valor { flex: 0 1 100px !important; }

    /* ---- filtros e busca ---- */
    #botoes-filtro-frota-manutencao { width: 100%; }
    #botoes-filtro-frota-manutencao .btn-filter { flex: 1 1 auto; font-size: .8rem; }
    #filtro-manutencao-busca { font-size: .9rem; }
}

/* ============================================================================
   Cartões de manutenção
   ============================================================================ */
.man-cartao {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: #fff;
}
.man-cartao header {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #f1f5f9;
}
.man-cartao__placa { font-weight: 700; font-size: 1rem; color: #0f172a; }
.man-cartao__data { margin-left: auto; font-size: .85rem; color: #64748b; white-space: nowrap; }
.man-cartao__servico { font-size: .92rem; color: #1e293b; line-height: 1.4; margin-bottom: 10px; }

/* Duas colunas de rótulo/valor: em uma coluna o cartão ficava altíssimo. */
.man-cartao__dados { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0 0 10px; }
.man-cartao__dados dt {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: #94a3b8;
}
.man-cartao__dados dd { margin: 0; font-size: .88rem; color: #334155; overflow-wrap: anywhere; }
.man-cartao__nf { font-size: .86rem; margin-bottom: 10px; }
.man-cartao__nf a { color: #2563eb; font-weight: 600; text-decoration: underline; }

.man-cartao footer { display: flex; gap: 6px; flex-wrap: wrap; }
.man-cartao footer button {
    flex: 1 1 auto; padding: 8px 10px; font-size: .82rem; font-weight: 600; font-family: inherit;
    border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: 6px; cursor: pointer;
}
.man-cartao footer button:hover { background: #f1f5f9; }
.man-cartao footer button.perigo { color: #b91c1c; border-color: #fecaca; }

.man-tag { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.man-tag--proprio { background: #e0e7ff; color: #3730a3; }
.man-tag--locado { background: #fef3c7; color: #92400e; }
.man-tag--aguardando { background: #fef3c7; color: #92400e; }

.man-cartao__contagem { font-size: .82rem; color: #64748b; margin: 0 0 10px; }
.man-cartao__vazio { padding: 24px 12px; text-align: center; color: #94a3b8; font-size: .9rem; }
.man-cartao__mais { width: 100%; padding: 10px; font-size: .86rem; height: auto; }

/* ============================================================================
   Paginação das manutenções (servidor)
   ============================================================================ */
#man-paginacao-rodape {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-top: 14px;
    font-size: .84rem; color: #64748b;
}
#man-paginacao-rodape strong { color: #1e293b; }
#man-paginacao { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
#man-paginacao button {
    min-width: 30px; padding: 5px 9px; font-size: .82rem; font-weight: 600; font-family: inherit;
    border: 1px solid #cbd5e1; background: #fff; color: #475569; border-radius: 6px; cursor: pointer;
}
#man-paginacao button:hover:not(:disabled) { background: #f1f5f9; }
#man-paginacao button:disabled { opacity: .45; cursor: default; }
/* Repetido no `:hover` porque `:hover` tem especificidade maior que uma classe só. */
#man-paginacao button.man-pag-atual,
#man-paginacao button.man-pag-atual:hover { background: #0a2540; border-color: #0a2540; color: #fff; }
.man-pag-etc { padding: 0 3px; color: #94a3b8; }

@media (max-width: 780px) {
    /* No celular a lista é "mostrar mais", então a barra de páginas seria redundante. */
    #man-paginacao { display: none; }
    #man-paginacao-rodape { justify-content: center; }
}

/* Verde: NF já foi ao financeiro. Laranja: ainda não. */
.man-tag--enviado { background: #dcfce7; color: #166534; }
.man-tag--aguardando { background: #fef3c7; color: #92400e; }