/**
 * assets/frota-admin.css
 * Pequenas classes que assets/index.js já produz e o template admin/
 * não define. Mantém index.js sem qualquer alteração.
 */
.badge.finalizada { background: #e3f3e9; color: #3f7d4f; }
.badge.em_curso { background: #fbe9dc; color: #a2531f; }

button.ligacao {
    background: none;
    border: none;
    color: #c9682a;
    text-decoration: underline;
    padding: 0;
    cursor: pointer;
    font-size: .875rem;
}
button.ligacao:hover { color: #a2531f; }

.msg-erro {
    background: #fbe6e3;
    color: #b3382c;
    padding: .6rem .8rem;
    border-radius: 6px;
    font-size: .85rem;
    margin-top: .6rem;
}
.msg-ok {
    background: #e3f3e9;
    color: #3f7d4f;
    padding: .6rem .8rem;
    border-radius: 6px;
    font-size: .85rem;
    margin-top: .6rem;
}

#relatorio { white-space: pre-line; }

.linha-despesa { display: flex; justify-content: space-between; padding: .4rem 0; border-bottom: 1px solid #e7e0d6; font-size: .9rem; }

.tab-toggle { border: 1px solid #c9682a; color: #c9682a; background: #fff; }
.tab-toggle.ativa { background: #c9682a; color: #fff; }

/*
 * OWASP API8:2023 - Security Misconfiguration
 * O CSP desta app usa style-src 'self' (sem 'unsafe-inline'), por
 * isso NENHUM elemento pode ter atributo style="..."; todo o
 * dimensionamento fica aqui, como classes reaproveitáveis.
 */
.filtro-largura { max-width: 320px; }
.dropdown-notificacoes { min-width: 320px; }

.foto-veiculo-miniatura { width: 48px; height: 48px; object-fit: cover; cursor: pointer; }
.botao-foto-veiculo { width: 48px; height: 48px; }
.foto-veiculo-ampliada { max-height: 480px; }

.foto-perfil-tamanho { width: 96px; height: 96px; object-fit: cover; }
.placeholder-foto-perfil { font-size: 96px; line-height: 1; color: var(--bs-secondary); }
.form-foto-perfil { min-width: 220px; }
.foto-documento-tamanho { width: 72px; height: 72px; object-fit: cover; }
.placeholder-foto-documento { font-size: 48px; color: var(--bs-secondary); }

.foto-bloco-tamanho { width: 96px; height: 96px; object-fit: cover; }
.placeholder-bloco-foto { font-size: 64px; color: var(--bs-secondary); }

/* Painel de login/registo — lado da marca */
.painel-login-marca {
    background: linear-gradient(150deg, var(--ds-primary-darker) 0%, var(--ds-primary-dark) 55%, var(--ds-primary) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.painel-login-marca::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 85% 15%, rgba(255,255,255,.12) 0, transparent 45%),
                       radial-gradient(circle at 10% 90%, rgba(255,255,255,.10) 0, transparent 40%);
    pointer-events: none;
}
.painel-login-marca .icone-marca-fundo {
    position: absolute;
    right: -1.5rem;
    bottom: -1.5rem;
    font-size: 11rem;
    color: rgba(255,255,255,.08);
    transform: rotate(-8deg);
}
.recurso-login-icone {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,.15);
    flex-shrink: 0;
}

@keyframes entradaSuave {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.entrada-suave { animation: entradaSuave .55s ease-out both; }
.entrada-suave-atrasada-1 { animation: entradaSuave .55s ease-out .08s both; }
.entrada-suave-atrasada-2 { animation: entradaSuave .55s ease-out .16s both; }
.entrada-suave-atrasada-3 { animation: entradaSuave .55s ease-out .24s both; }
.entrada-suave-atrasada-4 { animation: entradaSuave .55s ease-out .32s both; }

/*
 * Relatórios — impressão / "Guardar como PDF" (window.print() do
 * navegador). Esconde o menu lateral, o cabeçalho e os botões de
 * acção, deixando só o conteúdo do relatório.
 */
@media print {
    #miniSidebar, .navbar-glass, .sidebar-toggle, .secao-nao-imprimir {
        display: none !important;
    }
    #content { margin-left: 0 !important; }
    main { padding: 0 !important; }
    .card { break-inside: avoid; border: 1px solid #ddd !important; box-shadow: none !important; }
}

.mapa-altura { height: 520px; width: 100%; }

/* Cabeçalho impresso do relatório (relatorios.php): logótipo da
   instituição configurada em configuracoes.php. */
.cabecalho-relatorio-logo { max-height: 64px; max-width: 160px; object-fit: contain; }

/* Relatórios — linha de viagem expansível (despesas + resumo IA). */
.linha-viagem-relatorio { cursor: pointer; }
.seta-expandir { transition: transform .15s ease-out; display: inline-block; }
.seta-expandir.seta-expandida { transform: rotate(90deg); }
.linha-detalhe-viagem td { background: rgba(19, 135, 193, .04); }

/* Notificações: cada item é clicável (marca como lida e leva à
   viagem em causa). */
.notificacao-item { cursor: pointer; }
.notificacao-item:hover { background: var(--bs-tertiary-bg); }

/* Relatórios: realce temporário da linha ao chegar duma notificação. */
.linha-destacada td { background: var(--bs-primary-bg-subtle); transition: background 1.8s ease-out; }

/* Marcador de viagem em curso no mapa: ícone de camião bem visível,
   com anel a pulsar para indicar "ao vivo". */
.marcador-viagem-ativa { position: relative; width: 38px; height: 38px; }
.marcador-viagem-pulso {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(19, 135, 193, .45);
    animation: pulsoViagem 1.8s ease-out infinite;
}
.marcador-viagem-icone {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #1387c1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(0, 0, 0, .4);
}
@keyframes pulsoViagem {
    0%   { transform: scale(.55); opacity: .9; }
    100% { transform: scale(2); opacity: 0; }
}

/* Indicador de estado do GPS (formulário de iniciar viagem e cartão
   "Viagem em curso"): ponto cinza a obter localização, verde a pulsar
   quando activo, vermelho quando indisponível. */
.indicador-gps { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; }
.indicador-gps-ponto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #b5b5b5;
    flex-shrink: 0;
}
.indicador-gps-ponto.gps-ativo {
    background: #3f7d4f;
    animation: pulsoGpsAtivo 1.8s ease-out infinite;
}
.indicador-gps-ponto.gps-inativo { background: #b3382c; }
@keyframes pulsoGpsAtivo {
    0%   { box-shadow: 0 0 0 0 rgba(63, 125, 79, .5); }
    100% { box-shadow: 0 0 0 7px rgba(63, 125, 79, 0); }
}