/* ========================================
   图表样式
   ======================================== */

/* === 图表容器 === */
.chart-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin: 0 auto 25px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

#pnl-chart, 
#factor-contribution-chart, 
#rolling-exposure-chart,
#rolling-residual-r2-chart,
#residual-chart,
#portfolio-pnl-chart {
    width: 100% !important;
    max-width: 100% !important;
    min-height: clamp(320px, 55vh, 520px) !important;
}

.chart-container .js-plotly-plot,
.chart-container .plot-container,
.chart-container .svg-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* Plotly图表容器 */
#pnl-chart .plotly,
#factor-contribution-chart .plotly,
#rolling-exposure-chart .plotly,
#rolling-residual-r2-chart .plotly,
#residual-chart .plotly,
#portfolio-pnl-chart .plotly {
    width: 100% !important;
}

#beta-chart,
#portfolio-beta-chart {
    width: 100% !important;
    max-width: 100% !important;
}

/* === 响应式调整 === */
@media (max-width: 1024px) {
    .chart-container {
        padding: 16px;
    }
}

@media (max-width: 768px) {
    .chart-container {
        padding: 14px;
        border-radius: 10px;
    }
    #pnl-chart, 
    #factor-contribution-chart, 
    #rolling-exposure-chart,
    #rolling-residual-r2-chart,
    #residual-chart,
    #portfolio-pnl-chart {
        min-height: clamp(280px, 50vh, 440px) !important;
    }
    .chart-container {
        overflow-x: auto;
    }
}

@media (max-width: 480px) {
    .chart-container {
        padding: 12px;
        margin-bottom: 18px;
        overflow-x: auto;
    }
    #pnl-chart, 
    #factor-contribution-chart, 
    #rolling-exposure-chart,
    #rolling-residual-r2-chart,
    #residual-chart,
    #portfolio-pnl-chart {
        min-height: clamp(240px, 48vh, 380px) !important;
    }
}