/* =========================================
   ESTILOS DA TELA DE DESEMPENHO
   ========================================= */

/* --- Container dos Filtros --- */
.history-filters-container {
    background-color: white;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

/* --- Grid do Formulário de Filtros --- */
.desempenho-filters {
    display: grid;
    gap: 1rem;
    align-items: end; /* Alinha os botões com a base dos inputs */
}

/* Desktop: 2 campos largos (Período, Filial) + 2 botões (Aplicar, Limpar) */
@media (min-width: 993px) {
    .desempenho-filters {
        grid-template-columns: 1fr 1fr auto auto;
    }
    
    .desempenho-filters .form-group {
        margin-bottom: 0;
    }
}

/* Mobile: 1 coluna, tudo empilhado */
@media (max-width: 992px) {
    .desempenho-filters {
        grid-template-columns: 1fr;
    }

    .desempenho-filters .btn {
        width: 100%; /* Botões grandes para toque */
        margin-top: 0.5rem;
    }
}

/* --- Grid dos Gráficos --- */
.desempenho-grid {
    display: grid;
    gap: 2rem;
}

/* Desktop: Layout em 2 colunas (Xadrez) */
@media (min-width: 993px) {
    .desempenho-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            "chart1 chart3" 
            "chart2 chart2"; /* O gráfico de linha ocupa a largura total embaixo */
    }
}

/* Mobile: 1 coluna, gráficos um embaixo do outro */
@media (max-width: 992px) {
    .desempenho-grid {
        display: flex;
        flex-direction: column;
    }
    
    /* Ajusta altura dos gráficos no celular */
    .chart-container {
        height: 300px !important;
    }
}

/* --- Cards dos Gráficos --- */
.dashboard-content {
    background: white;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chart-container {
    position: relative;
    height: 350px;
    width: 100%;
}

/* Texto explicativo abaixo dos gráficos */
.dashboard-content p {
    font-size: 0.9rem;
    color: var(--gray-500);
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-100);
}

/* ... (Filtros CSS anteriores) ... */

/* --- Grid dos Gráficos --- */
.desempenho-grid {
    display: grid;
    gap: 2rem;
}

/* Desktop: Layout de 3 linhas */
@media (min-width: 993px) {
    .desempenho-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            "chart1 chart3" 
            "chart4 chart2"
            "chart5 chart5"; /* Chart 5 ocupa a largura total embaixo */
    }
}

/* Mobile: 1 coluna, tudo empilhado */
@media (max-width: 992px) {
    .desempenho-grid {
        display: flex;
        flex-direction: column;
    }
    
    .chart-container {
        height: 300px !important;
    }
}