/* ===================================================================== */
/* Estilos Modernos para Dashboard de Fluxo Cambial                      */
/* ===================================================================== */

/* Card de Total com Gradiente */
.card {
    transition: all 0.3s ease;
    border-radius: 12px !important;
}

/* Card hover effect para donuts */
#card-donut-comercial:hover,
#card-donut-financeiro:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}

/* Animação de entrada */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    animation: fadeInUp 0.5s ease-out;
}

/* Cards de estatísticas */
.card-body .fas {
    transition: transform 0.3s ease;
}

.card:hover .fas {
    transform: scale(1.2) rotate(5deg);
}

/* Gradiente do card principal */
.gradient-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* Responsividade dos donuts */
@media (max-width: 768px) {
    #donut-comercial,
    #donut-financeiro {
        margin: 0 auto;
    }
    
    .card-body {
        padding: 1rem !important;
    }
}

/* Números com animação */
#total-value-display {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

/* Mini cards de estatísticas */
.card-body .text-center {
    position: relative;
}

/* Ícones coloridos ao hover */
.card:hover .fa-calendar-day {
    color: #007bff !important;
}

.card:hover .fa-chart-bar {
    color: #28a745 !important;
}

.card:hover .fa-arrow-trend-up {
    color: #20c997 !important;
}

.card:hover .fa-arrow-trend-down {
    color: #dc3545 !important;
}

/* Melhorar visual dos valores */
#daily-average,
#volatility,
#best-month,
#worst-month {
    transition: all 0.3s ease;
}

.card:hover #daily-average,
.card:hover #volatility,
.card:hover #best-month,
.card:hover #worst-month {
    transform: scale(1.1);
    font-weight: 700 !important;
}

/* Sombras suaves */
.shadow-sm {
    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
}

.shadow-sm:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,0.12) !important;
}

/* Ajuste do container dos donuts */
.plotly .main-svg {
    border-radius: 8px;
}

/* Centralização perfeita dos donuts */
#donut-comercial .plotly,
#donut-financeiro .plotly {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Tooltip personalizado */
.hoverlayer {
    pointer-events: none;
}

/* Transição suave para loading */
.dash-spinner {
    margin: auto;
}

/* Cards com bordas coloridas */
.border-top-primary {
    border-top: 3px solid #007bff !important;
}

.border-top-warning {
    border-top: 3px solid #ffc107 !important;
}

/* Melhorar legibilidade dos textos */
.text-muted {
    color: #6c757d !important;
    font-weight: 500;
}

/* Container fluido com padding otimizado */
.container-fluid {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* Alinhamento dos gráficos donut */
.plotly-graph-div {
    margin: 0 auto;
}

/* Visual limpo para os cards */
.border-0 {
    border: none !important;
}

/* Cores personalizadas para valores */
.text-success-custom {
    color: #3D9970 !important;
}

.text-danger-custom {
    color: #E74C3C !important;
}

/* Animação de loading mais suave */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.dash-spinner svg {
    animation: spin 1s linear infinite;
}

/* Grid responsivo */
@media (max-width: 576px) {
    .col-md-3 {
        margin-bottom: 1rem;
    }
    
    #total-value-display {
        font-size: 2rem !important;
    }
}

/* Melhorar aparência dos ícones */
.fas, .far {
    vertical-align: middle;
}

/* Card do total com visual premium */
#total-value-display {
    letter-spacing: -1px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Período com estilo */
#period-display {
    opacity: 0.9;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}