/* 
   File         : responsive-plots.css
   Description  : Styles spécifiques pour rendre les graphiques (plots) responsifs
   Created      : September 28, 2025
   Updated      : September 28, 2025
*/

/* Message d'information sur les graphiques */
.info-message-container {
    width: 100% !important;
    max-width: 95% !important;
    margin: 20px auto !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    background-color: #444444 !important;
    border: 2px solid #444444 !important;
    border-radius: 8px !important;
    text-align: center !important;
}

.info-message-container p {
    color: #fff !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
}

/* Media queries pour le message d'information */
@media screen and (max-width: 1024px) {
    .info-message-container {
        padding: 12px !important;
    }
    
    .info-message-container p {
        font-size: 0.9rem !important;
    }
}

@media screen and (max-width: 768px) {
    .info-message-container {
        padding: 10px !important;
    }
    
    .info-message-container p {
        font-size: 0.85rem !important;
    }
}

@media screen and (max-width: 480px) {
    .info-message-container {
        padding: 8px !important;
    }
    
    .info-message-container p {
        font-size: 0.8rem !important;
    }
}

/* Styles pour les conteneurs de graphiques */
.charts-block {
    width: 100% !important;
    max-width: 98% !important; /* Allow more width in full screen */
    margin: 20px auto 40px !important; /* Added bottom margin to separate from results table */
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* Prevent content overflow */
}

/* Two-columns layout for charts */
.two-col-charts {
    display: flex !important;
    flex-wrap: nowrap !important; /* Prevent wrapping in full-page mode */
    gap: 20px !important; /* Harmonized horizontal spacing */
    align-items: flex-start !important;
    justify-content: space-between !important; /* Distribute space between items */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Left chart (volcano plot) */
.chart-left {
    flex: 1 1 50% !important; 
    max-width: 50% !important;
    width: 50% !important;
    display: flex !important;
    flex-direction: column !important; /* Volcano plot + buttons stacked */
    justify-content: flex-start !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding-right: 10px !important;
}

/* Right chart (bar plot) */
.chart-right {
    flex: 1 1 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    box-sizing: border-box !important;
    padding-left: 10px !important;
}

/* Chart containers - general */
.chart-container {
    width: 100% !important;
    height: 300px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Specific heights in full-width (desktop) mode: keep columns equal height.
   Volcano plot shorter so volcano + buttons = bar plot height */
.volcano-plot-container { height: 230px !important; }
.bar-plot-container { height: 300px !important; }

/* Button block under volcano plot */
.volcano-buttons {
    width: 100% !important;
    text-align: center !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.volcano-buttons .button { margin: 4px 6px !important; }

/* Unified accent button (reuse active statistics blue) */
.accent-action-button {
    background-color: #3F71AE !important;
    color: #fff !important;
}
.accent-action-button:hover {
    filter: brightness(1.05);
}

/* Make sure volcano column total height matches bar plot (approx.) */
@media screen and (min-width: 901px) {
    .chart-left { min-height: 300px !important; }
    .chart-right { min-height: 300px !important; }
}

/* Binding profile container (Plotly) */
#bindingProfile, 
#scatter,
.responsive-plot {
    width: 100% !important;
    height: 300px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* Canvas styling (Chart.js) */
canvas#binderPieChart {
    max-width: 100% !important;
    height: auto !important;
    display: block !important; /* Remove inline spacing */
    margin: 0 auto !important; /* Ensure canvas is centered in its container */
}

/* Plot separator */
.plots-pagination-separator {
    width: 100% !important;
    margin: 20px auto !important;
    height: 1px !important;
    background-color: var(--border-color, #e0e0e0) !important;
    clear: both !important;
}

/* Media query for smaller screens */
@media screen and (max-width: 900px) {
    .chart-left, .chart-right {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    .chart-left {
        margin-bottom: 20px !important;
    }
    
    #bindingProfile,
    #scatter,
    .responsive-plot,
    .chart-container {
        height: 260px !important; /* Unified height when stacked */
    }
    
    /* Stack charts vertically */
    .two-col-charts {
        flex-wrap: wrap !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    /* Reset specific desktop-only heights */
    .volcano-plot-container,
    .bar-plot-container { height: 260px !important; }
    .chart-left { min-height: auto !important; }
}

/* Landscape orientation specifics */
@media screen and (max-width: 900px) and (orientation: landscape) {
    #bindingProfile,
    #scatter,
    .responsive-plot,
    .chart-container {
        height: 200px !important; /* Smaller height in landscape */
    }
    
    /* Optimize layout for landscape */
    .two-col-charts {
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* Medium screens (tablets) */
@media screen and (max-width: 1024px) and (min-width: 901px) {
    .chart-left,
    .chart-right {
        flex: 0 0 50% !important; 
        max-width: 50% !important;
    }
    
    .chart-container {
        height: 300px !important; /* Keep consistent baseline */
    }
    
    #bindingProfile,
    #scatter,
    .responsive-plot {
        height: 300px !important;
    }
    .volcano-plot-container { height: 230px !important; }
    .bar-plot-container { height: 300px !important; }
    
    /* Improve tick visibility on medium screens */
    .js-plotly-plot .plotly .xtick text,
    .js-plotly-plot .plotly .ytick text {
        font-size: 11px !important;
    }
}

/* Small screens (mobile) */
@media screen and (max-width: 767px) {
    .charts-block {
        margin-top: 15px !important;
    }
    
    .two-col-charts {
        gap: 10px !important;
    }
    
    .chart-left {
        max-width: 280px !important; /* Slightly smaller on mobile for better readability */
    }
    
    .chart-container,
    #bindingProfile,
    #scatter,
    .responsive-plot {
        height: 240px !important; /* Smaller on mobile */
    }
    .volcano-plot-container,
    .bar-plot-container { height: 240px !important; }
    
    /* Optimize tick density for mobile */
    .js-plotly-plot .plotly .xtick text,
    .js-plotly-plot .plotly .ytick text {
        font-size: 10px !important;
    }
    
    /* Optimize plot layout for mobile */
    .js-plotly-plot .plotly .main-svg {
        overflow: visible;
    }
    
    /* Optimize hover labels on small screens */
    .js-plotly-plot .plotly .hovertext {
        font-size: 10px !important;
    }
}

/* Extra small screens (small mobile) */
@media screen and (max-width: 480px) {
    .chart-container,
    #bindingProfile,
    #scatter,
    .responsive-plot {
        height: 210px !important; /* Smaller on very small screens */
    }
    .volcano-plot-container,
    .bar-plot-container { height: 210px !important; }
    
    .chart-left {
        max-width: 220px !important; /* Smaller on very small screens */
    }
    
    /* Optimize small screen display */
    .js-plotly-plot .plotly .xtick text,
    .js-plotly-plot .plotly .ytick text {
        font-size: 9px !important;
    }
    
    /* Show fewer ticks on tiny screens */
    .js-plotly-plot .plotly .xgrid,
    .js-plotly-plot .plotly .ygrid {
        stroke-width: 0.5 !important;
    }
    
    /* Optimize axis titles on small screens */
    .js-plotly-plot .plotly .gtitle {
        font-size: 11px !important;
    }
    
    /* Adjust plot title size */
    .js-plotly-plot .plotly .gtitle {
        font-size: 12px !important;
    }
    
    /* Ensure content fits */
    .js-plotly-plot .plotly {
        overflow: hidden;
    }
}

/* Post-plots action row (complexome + export) */
.post-plots-action-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 30px !important;
    width: 100% !important;
    max-width: 98% !important;
    margin: 20px auto 40px !important;
    box-sizing: border-box !important;
}

.post-plots-action-row .w3-half {
    flex: 1 1 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    box-sizing: border-box !important;
}

.action-col-left {
    text-align: center !important;
}

.action-col-left img { max-width: 260px; height: auto; }

.action-col-right { text-align: center !important; }

.action-buttons { width: 100%; text-align: center; }

.action-buttons form { margin: 0; }

@media screen and (max-width: 900px) {
    .post-plots-action-row { flex-direction: column !important; gap: 25px !important; }
    .post-plots-action-row .w3-half { max-width: 100% !important; width: 100% !important; }
    .action-col-left, .action-col-right { text-align: center !important; }
}

@media screen and (max-width: 480px) {
    .post-plots-action-row { gap: 20px !important; margin: 15px auto 30px !important; }
    .action-col-left img { max-width: 200px; }
    .action-buttons .button { width: 100%; max-width: 320px; }
}