/* public/app/css/style.css */

/* Ajustes gerais de corpo para responsividade */
html, body {
    height: 100%; /* Garante que html e body ocupam 100% da altura da viewport */
}

body {
    min-height: 100vh; /* Garante que o body ocupa a altura mínima da viewport */
    display: flex;
    flex-direction: column;
}

.container {
    flex-grow: 1; /* Permite que o container cresça para preencher o espaço disponível */
}

.content-wrap { /* Novo wrapper para o conteúdo principal */
    flex: 1 0 auto; /* Permite que o conteúdo principal ocupe o espaço restante */
}

.footer {
    flex-shrink: 0; /* Impede que o rodapé encolha */
}

/* Ajustes para a navegação em telas pequenas */
@media (max-width: 768px) { /* Extra Small devices (smartphones, less than 768px) */
    .navbar-collapse {
        margin-top: 10px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        padding-top: 10px;
    }
    .navbar-nav .nav-item {
        margin-bottom: 5px;
    }
    .navbar-nav .nav-link,
    .navbar-nav .btn-link {
        padding-left: 15px; /* Adiciona um padding para links do menu em mobile */
    }
}

/* Ajuste para botões de ação em tabelas em telas pequenas */
@media (max-width: 768px) { /* Para tablets e smartphones em modo paisagem */
    body {
        font-size: 16px; /* Aumenta o tamanho da fonte base para melhor legibilidade */
    }

    .container {
        padding-left: 15px; /* Adiciona algum padding lateral para o conteúdo não colar nas bordas */
        padding-right: 15px;
    }

    /* Ajustes para a barra de navegação */
    .navbar-brand {
        font-size: 1.5rem; /* Ajusta o tamanho da fonte da marca na navbar */
    }
    .navbar-toggler {
        padding: 0.25rem 0.5rem; /* Ajusta o padding do botão do menu hamburguer */
    }
    .navbar-collapse {
        margin-top: 10px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        padding-top: 10px;
    }
    .navbar-nav .nav-item {
        margin-bottom: 5px;
    }
    .navbar-nav .nav-link,
    .navbar-nav .btn-link {
        padding-left: 15px;
    }

    /* Ajustes para os cards de resumo (Viagem, Meta de Economia) */
    .card {
        margin-bottom: 15px; /* Espaçamento entre os cards */
    }
    .card-body p {
        font-size: 0.95rem; /* Leve ajuste na fonte dos parágrafos dos cards */
    }
    .card-body h4, .card-body h5 {
        font-size: 1.2rem; /* Ajusta o tamanho dos títulos nos cards */
    }

    /* Ajustes para os gráficos */
    /* Garante que os gráficos ocupem a largura total e se ajustem */
    .chart-container { /* Adicione uma classe 'chart-container' às divs que contêm seus canvases */
        width: 100% !important;
        height: auto !important;
        margin: auto; /* Centraliza */
    }
    .chart-container canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    /* Aumenta a fonte das legendas dos gráficos para melhor leitura */
    .chartjs-render-monitor {
        font-size: 14px;
    }

    /* OTIMIZAÇÃO DA TABELA PARA MOBILE */
    .table-responsive { /* Adicione esta classe à div que envolve sua tabela */
        display: block;
        width: 100%;
        overflow-x: auto; /* Permite rolagem horizontal APENAS da tabela */
        -webkit-overflow-scrolling: touch; /* Melhora a rolagem em iOS */
    }

    /* Garante que o dropdown seja renderizado corretamente */
    .table .dropdown-menu {
        z-index: 1050; /* acima da tabela */
    }
    .table-responsive > .table {
        margin-bottom: 0; /* Remove margem extra abaixo da tabela */
    }

    .table th,
    .table td {
        padding: 0.6rem; /* Ajusta o padding das células da tabela */
        font-size: 14px; /* Aumenta a fonte para melhor legibilidade */
        white-space: nowrap; /* Evita quebras de linha para manter a coluna inteira */
    }

    /* Estiliza o cabeçalho da tabela */
    .table thead th {
        font-size: 15px;
        position: sticky; /* Mantém o cabeçalho fixo na rolagem horizontal */
        left: 0;
        background-color: #f8f9fa; /* Fundo para o cabeçalho fixo */
        z-index: 1; /* Garante que fique acima do conteúdo */
    }

    /* Estilos para a última coluna (Ações) - já presente, mas ajustado */
    table td:last-child {
        white-space: nowrap;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: center;
        align-items: center; /* Alinha verticalmente no centro */
        position: sticky; /* Mantém a coluna de ações fixa na rolagem horizontal */
        right: 0;
        background-color: #fff; /* Fundo para a coluna fixa */
        z-index: 1;
        border-left: 1px solid #dee2e6; /* Borda para separar da célula anterior */
    }

    /* Botões pequenos em tabelas */
    .btn-sm {
        font-size: 0.8rem; /* Reduz o tamanho da fonte */
        padding: 0.3rem 0.7rem; /* Ajusta o padding */
    }

    /* Esconder colunas menos importantes em telas muito pequenas (opcional)
    .table th:nth-child(5), /* Diferença
    .table td:nth-child(5) {
        display: none; /* Oculta a coluna de "Diferença" 
    }
    .table th:nth-child(6), /* Data Pagamento
    .table td:nth-child(6) {
        display: none; /* Oculta a coluna de "Data Pagamento"
    }
    */
}

@media (max-width: 576px) { /* Para smartphones (telas menores) */
    body {
        font-size: 15px;
    }
    .navbar-brand {
        font-size: 1.2rem;
    }
    .card-body h4 {
        font-size: 1rem;
    }
    .card-body small {
        font-size: 0.75rem;
    }
    .table th,
    .table td {
        font-size: 12px;
        padding: 0.4rem;
    }
    .btn-sm {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }

    /* Oculta ainda mais colunas para telas muito pequenas
    .table th:nth-child(4), /* Gasto
    .table td:nth-child(4) {
        display: none;
    }
    .table th:nth-child(7), /* Status
    .table td:nth-child(7) {
        display: none;
    }
    */
}

/* Centraliza os modais verticalmente */
.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 1rem); /* Ajusta para modais muito longos */
}
/* Alinhamento dos modais em telas menores */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0.5rem; /* Margem menor para telas muito pequenas */
    }
}

/* Estilos do Logo no login */
.auth-logo {
    height: 80px; /* Exemplo: logo maior na tela de login */
    width: auto;
    /* Você pode adicionar mais estilos aqui, como margin-bottom */
}

/* Estilos do Logo na Navbar */
.navbar-logo {
    height: 60px; /* Define a altura do seu logo */
    width: auto; /* Mantém a proporção da imagem */
}

/* Ajuste para ícones dentro de botões */
.btn .fa-solid {
    margin-right: 5px; /* Pequena margem à direita do ícone dentro do botão */
}

/* ######################################################################## */
/* Estilos para as notificações */
/* ######################################################################## */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.toast {
    background-color: #333;
    color: #fff;
    padding: 12px 20px;
    margin-bottom: 10px;
    border-radius: 4px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease-in-out;
}

.toast-success { background-color: #28a745; }
.toast-error { background-color: #dc3545; }

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Estilos para Notificações Modais */
.notification-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Fundo escuro semi-transparente */
display: flex;
flex-direction: column;
align-items: center;
z-index: 1050; /* Garante que fique acima de outros elementos */
overflow-y: auto; /* Permite scroll se muitas notificações */
padding: 20px; /* Espaçamento ao redor das notificações */
}

.notification-modal {
background-color: #fff;
border-radius: 0.5rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
margin-bottom: 20px; /* Espaçamento entre as notificações */
width: 90%; /* Largura da janela da notificação */
max-width: 500px; /* Largura máxima */
}

.notification-modal-content {
display: flex;
flex-direction: column;
height: 100%;
}

.notification-modal-header {
padding: 1rem 1.5rem;
border-bottom: 1px solid #dee2e6;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 0.5rem 0.5rem 0 0;
background-color: #f8f9fa;
}

.notification-modal-header h5 {
margin-bottom: 0;
font-size: 1.25rem;
}

.notification-modal-body {
padding: 1.5rem;
}

.notification-modal .btn-close {
margin-left: 1rem;
}

/* Ocultar o fundo escuro inicialmente (será mostrado quando houver notificações) */
#notification-area:empty + .notification-overlay {
display: none;
}
#notification-area:not(:empty) + .notification-overlay {
display: flex;
}
/*
#notification-area + .notification-overlay {
/* Estilos iniciais para o overlay
}
*/
#notification-area {
/* Para controlar a visibilidade do overlay via CSS */
display: none; /* Oculta o container original de alertas */
}
#notification-area:not(:empty) {
display: block; /* Garante que o JS ainda possa adicionar conteúdo */
}

/* Estilos para a Barra de Progresso da Notificação no Dashboard */
.progress-bar-container {
    height: 5px; /* Altura da barra de progresso */
    width: 100%;
    background-color: #e0e0e0; /* Cor de fundo da barra */
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    overflow: hidden; /* Garante que a barra de preenchimento não transborde */
}

.progress-bar-fill {
    height: 100%;
    width: 100%; /* Começa preenchido */
    background-color: #007bff; /* Cor do preenchimento (azul Bootstrap) */
    animation: countdown 30s linear forwards; /* Animação de 15 segundos */
}

/* ######################################################################## */
/* Definição da Animação da Barra de Progresso */
/* ######################################################################## */
@keyframes countdown {
    from { width: 100%; } /* Começa 100% preenchido */
    to { width: 0%; } /* Termina 0% preenchido */
}

/* Estilos para a Barra de Progresso dos Toasts */
.toast-progress-bar-container {
    height: 3px; /* Altura da barra */
    width: 100%;
    background-color: rgba(255, 255, 255, 0.3); /* Fundo sutil */
    position: absolute; /* Posição absoluta para ficar na base do toast */
    bottom: 0;
    left: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    overflow: hidden;
}

.toast-progress-bar-fill {
    height: 100%;
    width: 100%;
    background-color: #fff; /* Cor do preenchimento (branco) */
    transform-origin: left; /* Garante que a animação comece da esquerda */
    animation: countdown-toast 3s linear forwards; /* Duração de 3s */
}

/* Definição da Animação da Barra de Progresso para Toasts */
@keyframes countdown-toast {
    from { transform: scaleX(1); } /* Começa 100% preenchido */
    to { transform: scaleX(0); } /* Termina 0% preenchido */
}

/* Ajustes para o próprio toast se precisar de espaço para a barra */
.toast {
    position: relative; /* Importante para o posicionamento absoluto da barra */
    padding-bottom: 8px; /* Adiciona um pouco de padding para a barra não cobrir o texto */
}

/* Se você tem toast-success, toast-error, ajuste a cor da barra */
.toast-success .toast-progress-bar-fill { background-color: rgba(255, 255, 255, 0.7); }
.toast-error .toast-progress-bar-fill { background-color: rgba(255, 255, 255, 0.7); }
.toast-warning .toast-progress-bar-fill { background-color: rgba(255, 255, 255, 0.7); }
/* Para outros tipos, como 'primary', 'secondary', etc., ajuste conforme a cor do toast */
.toast-primary .toast-progress-bar-fill { background-color: rgba(255, 255, 255, 0.7); }

/* ######################################################################## */
/* Estilos para a página de planejamento de rota */
/* ######################################################################## */
#map {
    height: 500px; /* Altura do mapa */
    width: 100%;
    border-radius: 8px;
    margin-bottom: 20px;
}
.waypoint-input {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.waypoint-input input {
    flex-grow: 1;
    margin-right: 10px;
}

/* ######################################################################## */
/* NOVOS AJUSTES PARA LAYOUT DE FORMULÁRIOS EM MOBILE (planejar_rota.php) */
/* ######################################################################## */

@media (max-width: 767.98px) { /* Extra Small devices (smartphones, less than 768px) */

    /* Ajustes para input-group em telas pequenas */
    .input-group {
        flex-wrap: wrap; /* Permite que os itens do input-group quebrem para a próxima linha */
        margin-bottom: 10px; /* Espaçamento entre grupos de input */
    }

    .input-group > .form-control {
        flex: 1 1 100%; /* Faz com que o input ocupe 100% da largura do grupo */
        margin-bottom: 5px; /* Espaçamento entre o input e os botões */
    }

    .input-group > .btn {
        flex: 0 1 auto; /* Permite que os botões se ajustem ao conteúdo */
        width: auto; /* Deixa a largura do botão flexível */
        margin-left: 0; /* Remove margem extra à esquerda para alinhar abaixo do input */
    }

    /* Opcional: Se os botões forem muito longos, force quebra ou ocupe 100% */
    .input-group > .btn-outline-secondary {
        /* Para os botões pequenos (limpar, mapa, localização) */
        font-size: 0.85rem;
        padding: 0.375rem 0.6rem;
    }
    
    /* Faz os campos de consumo e preço se empilharem */
    .row.mb-3 .col-md-6 {
        width: 100%; /* Cada coluna ocupa 100% da largura */
        flex: 0 0 100%; /* Garante que não haja encolhimento */
        max-width: 100%; /* Garante que não haja limites de largura */
        margin-bottom: 15px; /* Espaçamento entre eles quando empilhados */
    }
    .row.mb-3 .col-md-6:last-child {
        margin-bottom: 0; /* Remove margem do último item empilhado */
    }

    /* Ajuste para o botão "Adicionar Parada" */
    #add-waypoint {
        width: 100%;
        margin-top: 10px;
    }

    /* Ajuste para os botões principais de Calcular e Limpar */
    .card-body > form > .btn {
        width: 100%;
        margin-bottom: 10px;
    }
    .card-body > form > .btn.ms-2 { /* Para o botão "Limpar Formulário" */
        margin-left: 0 !important; /* Remove a margem à esquerda em mobile */
    }
}

@media (max-width: 400px) { /* Para telas muito, muito pequenas */
    .input-group > .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
    }
}

/* --- ESTILOS PARA INDICADOR DE ROLAGEM HORIZONTAL NA TABELA --- */

.table-scroll-wrapper {
    position: relative;
}

.table-scroll-wrapper::before,
.table-scroll-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px; /* Largura da sombra */
    pointer-events: none; /* Garante que a sombra não impeça o clique */
    transition: opacity 0.2s ease-in-out;
}

/* Sombra da esquerda */
.table-scroll-wrapper::before {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);
    opacity: 0; /* Começa invisível */
}

/* Sombra da direita */
.table-scroll-wrapper::after {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);
    opacity: 1; /* Começa visível */
}

/* Classes de controle via JS */
.table-scroll-wrapper.scrolled-start::before {
    opacity: 0;
}
.table-scroll-wrapper.scrolled-middle::before {
    opacity: 1;
}
.table-scroll-wrapper.scrolled-middle::after {
    opacity: 1;
}
.table-scroll-wrapper.scrolled-end::after {
    opacity: 0;
}

/* ================================================================== */
/* Correção para responsividade dos gráficos na página relatórios     */
/* ================================================================== */

/* Container de gráficos na página relatórios */
#grafico-gastos-anuais-container .chart-wrapper,
#grafico-categorias-globais-container .chart-wrapper {
    position: relative;
    width: 100%;
    height: 400px; /* altura padrão (desktop) */
}

@media (max-width: 768px) {
    #grafico-gastos-anuais-container .chart-wrapper,
    #grafico-categorias-globais-container .chart-wrapper {
        height: 300px; /* altura reduzida em dispositivos móveis */
    }
}

/* ======================================================= */
/* ESTILOS PARA O BOTÃO FLUTUANTE DE INSTALAÇÃO PWA (MOBILE) */
/* ======================================================= */

.install-button {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background-color: #0d6efd; /* Azul do Bootstrap */
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 50px; /* Deixa o botão arredondado */
    font-size: 1rem;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    cursor: pointer;
    z-index: 1000;
    transition: transform 0.2s ease-out;
    display: flex;
    align-items: center;
}

.install-button:hover {
    transform: scale(1.05); /* Efeito de zoom ao passar o mouse */
}

/* Garanta que este bloco de código exista no seu arquivo */
@media (max-width: 767px) {
    .install-button-floating { /* Usaremos uma nova classe para ser mais específico */
        position: fixed !important;
        bottom: 20px;
        right: 20px;
        width: auto !important;
        border-radius: 50px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        z-index: 1000;
    }
}

/* ======================================================= */
/* ESTILO PARA O BANNER DE INSTALAÇÃO ESTÁTICO (FALLBACK)  */
/* ======================================================= */
.pwa-install-banner {
    background-color: #cff4fc; /* Azul claro do Bootstrap 'alert-info' */
    color: #055160;
    border: 1px solid #9eeaf9;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.pwa-install-banner p {
    margin-bottom: 0;
    font-weight: 500;
}

/* AJUSTE PARA NAVBAR FIXA NO TOPO */
body {
    padding-top: 80px; /* Empurra o conteúdo para baixo para não ficar atrás da navbar */
}