/* assets/styles.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');

/* Definir o fundo da aplicação com um gradiente roxo moderno */
body {
    background: linear-gradient(135deg, #7F00FF, #E100FF);
    font-family: 'Poppins', sans-serif;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
}

/* Estilizar o título principal */
h1 {
    color: #FFFFFF;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: 600;
}

/* Estilizar os contêineres dos gráficos e tabelas */
.fade-in {
    animation: fadeIn 1s ease-in-out forwards;
}

.animate__animated {
    /* Classes da Animate.css serão adicionadas diretamente no HTML */
}

/* Efeitos de Fade-in e Slide-in */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Efeitos de Hover para elementos interativos */
.hover-effect:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Estilizar os botões com cores roxas */
.btn-primary {
    background-color: #6F42C1;
    border-color: #6F42C1;
    font-family: 'Poppins', sans-serif;
}

.btn-primary:hover {
    background-color: #5A32A3;
    border-color: #5A32A3;
}

/* Estilizar a tabela AG Grid para combinar com o tema roxo */
.ag-theme-alpine-dark .ag-header {
    background-color: #5A32A3;
    color: #FFFFFF;
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
}

.ag-theme-alpine-dark .ag-row {
    background-color: #6F42C1;
    color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
}

.ag-theme-alpine-dark .ag-row:hover {
    background-color: #7F00FF;
}

.ag-theme-alpine-dark .ag-cell {
    border-color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
}

/* Personalizar a barra de título do Dash */
.dashboard-header h4 {
    margin: 20px 0 0 0; /* Adiciona 10px de margem superior */
    padding: 0; /* Remove padding residual */
    line-height: normal; /* Usa espaçamento padrão da fonte */
}

/* Ajustar o fundo dos gráficos Plotly */
.plotly {
    background: transparent;
}

/* Personalizar as legendas dos gráficos */
.legendtext {
    color: #FFFFFF !important;
}

/* Ajustar fontes dos eixos */
.ticklabels, .axistitles {
    font-family: 'Poppins', sans-serif;
    color: #FFFFFF !important;
}

/* Estilizar botões secundários se houver */
.btn-secondary {
    background-color: #7F00FF;
    border-color: #7F00FF;
    font-family: 'Poppins', sans-serif;
}

.btn-secondary:hover {
    background-color: #5A32A3;
    border-color: #5A32A3;
}