/* ============================================================================
   Diálogos do Log de Auditoria e de Permissões
   ----------------------------------------------------------------------------
   Arquivo separado e com prefixo `gbp-dlg` de propósito. O `style.css` declara
   `.modal` duas vezes (linhas 51 e 564) e a segunda vence: ela põe
   `overflow: auto` no fundo, o que faz a roda do mouse rolar a página de trás,
   e `.modal-content` não tem `max-height`, então a altura do quadro fica
   imprevisível. Em vez de lutar contra isso com `!important`, estes diálogos
   não usam aquelas classes.

   Regra da estrutura: o quadro é um Grid de faixas e SÓ `.gbp-dlg__rolo` rola.
   ============================================================================ */

.gbp-dlg {
    position: fixed;
    inset: 0;
    z-index: 10600;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(6px);
    /* Sem `overflow: auto` aqui. É o que impede a roda do mouse de escapar para
       o dashboard atrás do diálogo. */
    overflow: hidden;
    overscroll-behavior: contain;
}
.gbp-dlg.gbp-dlg--aberto { display: flex; animation: gbpDlgEntra .18s ease-out; }

@keyframes gbpDlgEntra { from { opacity: 0; } to { opacity: 1; } }

.gbp-dlg__caixa {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 20px 45px -12px rgba(15, 23, 42, .35);
    width: 100%;
    max-width: 620px;
    /* `min()` em vez de só `vh`: em tela baixa com zoom alto o `vh` sozinho
       estourava e o rodapé saía do quadro. */
    max-height: min(90vh, 900px);
    display: grid;
    /* auto para cada faixa fixa e `minmax(0, 1fr)` para a que rola.
       `1fr` puro NÃO funciona: a faixa se recusa a ficar menor que o conteúdo
       e empurra o rodapé para fora. O `0` no minmax é o que autoriza encolher. */
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
    overflow: hidden;
}
.gbp-dlg__caixa--largo { max-width: 980px; }

/* ---- faixas fixas ---- */
.gbp-dlg__topo {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid #e2e8f0;
}
.gbp-dlg__topo h3 {
    margin: 0; font-size: 1.1rem; font-weight: 700; color: #1e293b;
    display: flex; align-items: center; gap: 8px;
}
.gbp-dlg__x {
    background: none; border: none; font-size: 1.6rem; line-height: 1;
    color: #94a3b8; cursor: pointer; padding: 0 4px; font-family: inherit;
}
.gbp-dlg__x:hover { color: #475569; }

.gbp-dlg__faixa { padding: 12px 20px 0; }
.gbp-dlg__nota { margin: 0; padding: 12px 20px 0; font-size: .86rem; color: #64748b; line-height: 1.5; }

/* ---- faixa que rola ---- */
.gbp-dlg__rolo {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    margin: 12px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}
.gbp-dlg__rolo:focus-visible { outline: 2px solid #0a2540; outline-offset: 1px; }

/* Barra de rolagem explícita: a do sistema aparecia como faixa cinza sem
   contraste e não dava para ver que era arrastável. */
.gbp-dlg__rolo::-webkit-scrollbar { width: 12px; }
.gbp-dlg__rolo::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 0 10px 10px 0; }
.gbp-dlg__rolo::-webkit-scrollbar-thumb {
    background: #94a3b8; border-radius: 6px; border: 2px solid #f1f5f9;
}
.gbp-dlg__rolo::-webkit-scrollbar-thumb:hover { background: #64748b; }
.gbp-dlg__rolo { scrollbar-width: thin; scrollbar-color: #94a3b8 #f1f5f9; }

/* ---- rodapé ---- */
.gbp-dlg__base {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 20px; border-top: 1px solid #e2e8f0; background: #f8fafc;
    border-radius: 0 0 14px 14px;
}
.gbp-dlg__base-dir { display: flex; gap: 8px; }
.gbp-dlg__btn { padding: 7px 14px; font-size: .85rem; height: auto; flex-shrink: 0; }
.gbp-dlg__contagem { font-size: .82rem; color: #64748b; }

/* ---- paginação ---- */
.gbp-pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.gbp-pager 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;
}
.gbp-pager button:hover:not(:disabled) { background: #f1f5f9; }
.gbp-pager button:disabled { opacity: .45; cursor: default; }
/* Repetido no `:hover` porque `:hover` tem especificidade maior que uma classe só,
   e sem isso a página atual clareava ao passar o mouse e o número branco desaparecia. */
.gbp-pager button.gbp-pager__atual,
.gbp-pager button.gbp-pager__atual:hover { background: #0a2540; border-color: #0a2540; color: #fff; }
.gbp-pager__reticencia { padding: 0 3px; color: #94a3b8; font-size: .82rem; }

/* ---- campos ---- */
.gbp-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gbp-campo > span {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: #64748b;
}
.gbp-campo input, .gbp-campo select {
    width: 100%; padding: 7px 10px; font-size: .86rem; font-family: inherit;
    border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #1e293b;
}
.gbp-campo input:focus, .gbp-campo select:focus {
    outline: none; border-color: #0a2540; box-shadow: 0 0 0 3px rgba(10, 37, 64, .08);
}

/* ---- chips de categoria ---- */
.gbp-aud__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.gbp-chip {
    padding: 6px 12px; font-size: .82rem; font-weight: 600; font-family: inherit;
    border: 1px solid #cbd5e1; background: #fff; color: #475569;
    border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.gbp-chip:hover { background: #f1f5f9; }
/* O `:hover` tem especificidade maior que uma classe sozinha; sem repetir aqui,
   o chip ativo ficava com fundo claro e texto branco logo após o clique. */
.gbp-chip--on, .gbp-chip--on:hover { background: #0a2540; border-color: #0a2540; color: #fff; }

/* ---- filtros ---- */
.gbp-aud__filtros { display: grid; grid-template-columns: 1.7fr 1fr 1fr 140px 140px; gap: 8px; }
.gbp-aud__resumo { font-size: .82rem; color: #64748b; padding-top: 10px; }
.gbp-aud__resumo strong { color: #1e293b; }

/* ============================================================================
   Linhas do log — tabela desenhada à mão, sem Tabulator
   ============================================================================ */
.gbp-log__linha {
    display: grid;
    grid-template-columns: 150px 180px 210px minmax(0, 1fr);
    gap: 14px;
    padding: 11px 14px;
    border-bottom: 1px solid #f1f5f9;
    align-items: start;
}
.gbp-log__linha:last-child { border-bottom: none; }
.gbp-log__linha:nth-child(even) { background: #fafbfc; }

.gbp-log__cab {
    display: grid;
    grid-template-columns: 150px 180px 210px minmax(0, 1fr);
    gap: 14px;
    padding: 9px 14px;
    /* Cabeçalho colado no topo enquanto a lista rola. */
    position: sticky; top: 0; z-index: 1;
    background: #f1f5f9;
    border-bottom: 2px solid #cbd5e1;
    font-size: .7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .05em; color: #64748b;
}

.gbp-log__quando { font-weight: 600; color: #1e293b; font-size: .86rem; line-height: 1.3; }
.gbp-log__quando small { display: block; font-weight: 400; font-size: .74rem; color: #94a3b8; }
.gbp-log__quem { font-weight: 600; color: #1e293b; font-size: .86rem; line-height: 1.3; overflow-wrap: anywhere; }
.gbp-log__quem small { display: block; font-weight: 400; font-size: .74rem; color: #94a3b8; }
.gbp-log__oque small { display: block; font-size: .74rem; color: #94a3b8; margin-top: 3px; }
.gbp-log__detalhes { font-size: .84rem; color: #334155; line-height: 1.5; overflow-wrap: anywhere; }
.gbp-log__detalhes .gbp-log__ip { display: block; font-size: .72rem; color: #cbd5e1; margin-top: 3px; }
.gbp-log__campo {
    display: inline-block; margin: 1px 4px 1px 0; padding: 1px 7px;
    background: #f1f5f9; border-radius: 4px; font-size: .78rem;
}
.gbp-log__campo b { color: #475569; font-weight: 700; }
.gbp-log__vazio { padding: 30px 20px; text-align: center; color: #94a3b8; font-size: .88rem; }

/* etiquetas por natureza da ação */
.gbp-tag {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: .74rem; font-weight: 700;
}
.gbp-tag--criacao  { background: #dcfce7; color: #166534; }
.gbp-tag--edicao   { background: #fef3c7; color: #92400e; }
.gbp-tag--exclusao { background: #fee2e2; color: #991b1b; }
.gbp-tag--email    { background: #dbeafe; color: #1e40af; }
.gbp-tag--acesso   { background: #ede9fe; color: #5b21b6; }
.gbp-tag--outro    { background: #f1f5f9; color: #475569; }

/* ============================================================================
   Permissões
   ============================================================================ */
.gbp-perm__form {
    display: grid; grid-template-columns: 1fr 1.6fr 1fr auto; gap: 8px;
    align-items: end;
}
.gbp-perm__form .gbp-campo:nth-child(4) { grid-column: 1 / 4; }
.gbp-perm__add { padding: 8px 16px; font-size: .85rem; height: auto; white-space: nowrap; grid-row: 1; grid-column: 4; }
.gbp-perm__erro { grid-column: 1 / -1; margin: 0; color: #b91c1c; font-size: .83rem; }

.gbp-perm__linha {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 14px; border-bottom: 1px solid #f1f5f9;
}
.gbp-perm__linha:last-child { border-bottom: none; }
.gbp-perm__linha--off { background: #f8fafc; opacity: .7; }
.gbp-perm__quem { flex: 1 1 240px; min-width: 0; }
.gbp-perm__nome {
    font-weight: 600; color: #1e293b; display: flex; align-items: center;
    gap: 7px; flex-wrap: wrap; font-size: .9rem;
}
.gbp-perm__email { font-size: .79rem; color: #64748b; overflow-wrap: anywhere; }
.gbp-perm__eu { font-size: .74rem; color: #94a3b8; font-weight: 400; }
.gbp-perm__acao {
    padding: 5px 10px; font-size: .78rem; font-weight: 600; font-family: inherit;
    border: 1px solid #cbd5e1; border-radius: 6px; background: #fff;
    color: #475569; cursor: pointer;
}
.gbp-perm__acao:hover { background: #f1f5f9; }
.gbp-perm__acao--perigo { color: #b91c1c; border-color: #fecaca; }
.gbp-perm__acao:disabled { opacity: .5; cursor: default; }

/* ============================================================================
   Resumo do veículo no formulário de manutenção
   ----------------------------------------------------------------------------
   Ocupa a sobra da linha com informação útil em vez de espaço vazio: confirma que
   a placa é o carro certo, mostra o KM (que é obrigatório e era copiado à mão),
   avisa se é LOCADO (manutenção de locado é da Dahruj) e mostra a última
   manutenção, o que pega nota repetida e carro voltando cedo.

   `height` fixa, não `max-height`: com altura variável o bloco de anexos ao lado
   pulava de lugar quando o veículo era escolhido.
   ============================================================================ */
.resumo-veiculo {
    height: 62px;
    box-sizing: border-box;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: .92rem;
    line-height: 1.5;
    color: #334155;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
}
/* A placa é o que ele confere primeiro; o resto é apoio. */
.resumo-veiculo .resumo-placa { font-size: 1.02rem; font-weight: 700; color: #0f172a; }
.resumo-veiculo .resumo-modelo { color: #64748b; }
.resumo-veiculo .resumo-linha2 { font-size: .86rem; color: #64748b; }
/* Vazio: contorno tracejado marcando o lugar. */
.resumo-veiculo--vazio {
    border: 1px dashed #cbd5e1;
    color: #94a3b8;
    font-style: italic;
    justify-content: center;
}
/* Preenchido: contorno sólido, para ler como dado e não como campo a preencher. */
.resumo-veiculo--cheio {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-style: normal;
}

/* ============================================================================
   Lista de anexos acumulados
   ----------------------------------------------------------------------------
   Um cartão por arquivo, com X para remover. Existe porque o `input type=file`
   nativo SUBSTITUI a seleção a cada escolha: quem anexa um arquivo por vez
   perdia o anterior sem nenhum aviso na tela.
   ============================================================================ */
.anexos-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.anexos-lista:empty { display: none; }
.anexo-card {
    display: inline-flex; align-items: center; gap: 7px;
    background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 6px;
    padding: 5px 7px 5px 9px; font-size: .8rem; color: #1e293b; max-width: 100%;
}
.anexo-card__nome {
    max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.anexo-card__tam { color: #64748b; font-size: .74rem; white-space: nowrap; }
.anexo-card__x {
    border: none; background: #e2e8f0; color: #475569; cursor: pointer;
    width: 18px; height: 18px; border-radius: 4px; line-height: 1;
    font-size: .8rem; font-family: inherit; flex-shrink: 0; padding: 0;
}
.anexo-card__x:hover { background: #fecaca; color: #b91c1c; }
.anexos-lista__aviso { font-size: .78rem; color: #92400e; width: 100%; }

/* ============================================================================
   Telas estreitas
   ----------------------------------------------------------------------------
   Tudo por CSS, nada decidido no JavaScript. Assim girar o celular ou
   redimensionar a janela funciona na hora — antes a configuração era lida uma
   vez na criação da tabela e nunca mais mudava.
   ============================================================================ */
@media (max-width: 780px) {
    .gbp-dlg { padding: 8px; }
    .gbp-dlg__caixa { max-height: 94vh; border-radius: 12px; }
    .gbp-dlg__topo, .gbp-dlg__base { padding: 12px 14px; }
    .gbp-dlg__faixa, .gbp-dlg__nota { padding: 10px 14px 0; }
    .gbp-dlg__rolo { margin: 10px 14px; }

    .gbp-aud__filtros { grid-template-columns: 1fr 1fr; }
    .gbp-campo--busca { grid-column: 1 / -1; }

    .gbp-perm__form { grid-template-columns: 1fr; }
    .gbp-perm__form .gbp-campo:nth-child(4) { grid-column: auto; }
    .gbp-perm__add { grid-row: auto; grid-column: auto; }

    /* O cabeçalho de colunas não faz sentido em cartão. */
    .gbp-log__cab { display: none; }
    .gbp-log__linha {
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 12px 14px;
        border-bottom: 1px solid #e2e8f0;
    }
    /* Rótulo antes de cada pedaço, já que não há mais cabeçalho de coluna. */
    .gbp-log__detalhes::before {
        content: 'Detalhes';
        display: block; font-size: .68rem; font-weight: 800; text-transform: uppercase;
        letter-spacing: .05em; color: #94a3b8; margin-bottom: 2px;
    }
    .gbp-dlg__base { flex-wrap: wrap; }
    .gbp-dlg__base-dir { flex: 1 1 100%; justify-content: flex-end; }
}

/* ===========================================================================
   RESUMO FINAL EXPANSÍVEL
   ===========================================================================

   O Resumo Final mora numa coluna de 420px fixos. Cabia enquanto o pedágio era
   uma coluna só; depois que ele virou Passagens / Estacion. / Plano / Pedágio
   são oito colunas, e o Tabulator ou recolhe metade num "+" ou abre rolagem
   lateral. Clicar tira o bloco dali e joga em cima da tela inteira.

   Estas regras vivem no `dialogos.css`, e não no `style.css`, pelo mesmo motivo
   dos diálogos: lá `.modal` está declarado duas vezes e a segunda vence, com
   `overflow: auto` no fundo — a roda do mouse rola a página de trás. Nada aqui
   reaproveita aquelas classes.
   =========================================================================== */

.resumo-expansivel {
    position: relative;
    cursor: zoom-in;
    border-radius: 10px;
    /* Padding com margem negativa igual: a área clicável cresce para além do
       texto sem empurrar nada do layout que já existia. */
    padding: 10px;
    margin: -10px;
    transition: background-color .18s ease, box-shadow .18s ease;
}

.resumo-expansivel:hover,
.resumo-expansivel:focus-visible {
    background: #f8fafc;
    box-shadow: 0 0 0 1px #e2e8f0, 0 8px 24px rgba(15, 23, 42, .10);
    outline: none;
}

/* A dica só aparece no hover. Fixa, viraria ruído num painel que a pessoa olha
   o dia inteiro; ausente, ninguém descobre que o bloco é clicável. */
.resumo-dica {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 2;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--primary-color, #1f4e79);
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.resumo-expansivel:hover .resumo-dica,
.resumo-expansivel:focus-visible .resumo-dica {
    opacity: 1;
    transform: translateY(0);
}

/* --- o modo expandido --- */

.resumo-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .55);
    animation: resumo-fundo-entra .18s ease both;
}

.resumo-overlay__caixa {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Larga o bastante para as duas tabelas de oito colunas caberem lado a lado. Em tela menor o
       `100%` segura, e a grade abaixo empilha sozinha. */
    width: min(1900px, 100%);
    max-height: 100%;
    padding: 22px 26px 26px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
    /* A rolagem é DAQUI, não do fundo. É a diferença para o `.modal` do
       style.css, onde a roda do mouse rola a página atrás do diálogo. */
    overflow-y: auto;
    animation: resumo-caixa-entra .2s cubic-bezier(.16, 1, .3, 1) both;
}

.resumo-overlay__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.resumo-overlay__titulo {
    margin: 0;
    color: var(--primary-color, #1f4e79);
    font-size: 1.15rem;
}

.resumo-overlay__fechar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.resumo-overlay__fechar:hover {
    background: #f1f5f9;
    color: #0f172a;
}

/* Dentro da sobreposição o bloco deixa de ser um botão: já está aberto. */
.resumo-expansivel.esta-expandido {
    cursor: default;
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
}

.resumo-expansivel.esta-expandido .resumo-dica {
    display: none;
}

/* Em tela cheia as duas tabelas ficam LADO A LADO, não uma embaixo da outra.
   Empilhadas elas desperdiçavam metade da largura e ainda obrigavam a rolar
   para comparar centro de custo com filial — que é justamente a comparação que
   a pessoa vem fazer aqui.

   `auto-fit` com `minmax` resolve o notebook sem media query: abaixo de ~1300px
   de área útil não cabem duas de 620px, e a grade volta a empilhar sozinha. */
.resumo-expansivel.esta-expandido {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(620px, 1fr));
    gap: 26px;
    align-items: start;
}

/* No painel de 420px os blocos são empilhados e precisam de respiro entre si.
   Na grade o `gap` já cuida disso, então a margem sai para não somar duas vezes. */
.resumo-bloco { margin-bottom: 20px; }
.resumo-expansivel.esta-expandido .resumo-bloco { margin-bottom: 0; }

@keyframes resumo-fundo-entra {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes resumo-caixa-entra {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Quem pediu menos movimento no sistema operacional recebe a mesma tela, sem a
   entrada animada. */
@media (prefers-reduced-motion: reduce) {
    .resumo-expansivel,
    .resumo-dica,
    .resumo-overlay,
    .resumo-overlay__caixa {
        transition: none;
        animation: none;
    }
}