/* SentraFlow Chart Proportions Fix */

/* Standard Chart Container Heights for Consistency */
.chart-container {
    position: relative;
    width: 100%;
}

/* Fix for standard chart canvases */
canvas {
    max-width: 100% !important;
    height: auto !important;
}

/* Consistent heights for different chart types */
#complianceChart,
#efficiencyChart, 
#emissionsChart,
#riskLevelChart,
#riskTypeChart,
#probabilityChart,
#impactChart,
#statusChart,
#typeChart,
#severityChart,
#costChart {
    height: 220px !important;
    max-height: 220px !important;
}

/* Dashboard main charts - larger size */
#performanceChart {
    height: 380px !important;
    max-height: 380px !important;
}

#esgRadarChart,
#riskMatrixChart {
    height: 320px !important;
    max-height: 320px !important;
}

/* Gauge charts - square aspect ratio */
#utilizationGauge,
.gauge-chart canvas {
    height: 200px !important;
    width: 200px !important;
    max-height: 200px !important;
    max-width: 200px !important;
}

/* Chart card body padding adjustments for better proportions */
.card-body canvas {
    margin: 0 auto;
    display: block;
}

/* Responsive chart containers */
@media (max-width: 768px) {
    #complianceChart,
    #efficiencyChart, 
    #emissionsChart,
    #riskLevelChart,
    #riskTypeChart,
    #probabilityChart,
    #impactChart,
    #statusChart,
    #typeChart,
    #severityChart,
    #costChart {
        height: 220px !important;
        max-height: 220px !important;
    }
    
    #performanceChart {
        height: 300px !important;
        max-height: 300px !important;
    }
    
    #esgRadarChart,
    #riskMatrixChart {
        height: 250px !important;
        max-height: 250px !important;
    }
    
    #utilizationGauge,
    .gauge-chart canvas {
        height: 150px !important;
        width: 150px !important;
        max-height: 150px !important;
        max-width: 150px !important;
    }
}

@media (max-width: 576px) {
    #complianceChart,
    #efficiencyChart, 
    #emissionsChart,
    #riskLevelChart,
    #riskTypeChart,
    #probabilityChart,
    #impactChart,
    #statusChart,
    #typeChart,
    #severityChart,
    #costChart {
        height: 200px !important;
        max-height: 200px !important;
    }
    
    #performanceChart {
        height: 250px !important;
        max-height: 250px !important;
    }
    
    #esgRadarChart,
    #riskMatrixChart {
        height: 200px !important;
        max-height: 200px !important;
    }
}

/* Fix chart legends overlapping */
.chart-container .chart-legend {
    margin-top: 15px;
    text-align: center;
}

/* Chart card body min-height for consistency */
.card-body:has(canvas) {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .card-body:has(canvas) {
        min-height: 260px;
    }
}

@media (max-width: 576px) {
    .card-body:has(canvas) {
        min-height: 240px;
    }
}