/* ==========================================================================
   Exploration graphs panel of the PathoLec search page (sugarbind/search).
   Two variable-depth sunbursts + a host-organism bar plot, loaded on demand.
   ========================================================================== */

/* Wrapper: match the 20px side inset the search results get on mobile
   (removed at >=1000px, where #content is already centred at max-width:1000px).
   The button and panel are siblings of #search-result-parent, so they need
   their own wrapper to align with the result cards. */
#graphics-wrapper {
    padding: 0 20px;
}
@media (min-width: 1000px) {
    #graphics-wrapper {
        padding: 0;
    }
}

/* Toggle button that expands the panel */
.graphics-toggle-btn {
    width: 100%;
    height: 40px;
    margin: 20px 0;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Panel is collapsed until the toggle is clicked (jQuery slideToggle) */
#explore_graphics_panel {
    display: none;
    margin-bottom: 20px;
}

/* ----- Sunburst chart, tooltip and legend ----- */
#explore_graphics_panel .chart {
    position: relative;
    stroke: #fff;
    display: inline-block;
}
#explore_graphics_panel .tooltip {
    position: absolute;
    text-align: center;
    width: 160px;
    height: auto;
    padding: 2px;
    font: 12px sans-serif;
    background: black;
    border: 0;
    border-radius: 8px;
    color: #fff;
    box-shadow: -3px 3px 15px #888;
    opacity: 0;
}
#explore_graphics_panel .legend {
    padding: 5px;
    text-align: center;
    font-weight: 600;
    fill: #fff;
    display: inline-block;
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
}
#explore_graphics_panel .legend_button,
#explore_graphics_panel .legend_text {
    cursor: pointer;
}

/* ----- Graph boxes and the responsive two-column second row ----- */
#explore_graphics_panel .graph-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 10px;
}
#explore_graphics_panel #horizontal-graphs {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: stretch;
    margin-top: 20px; /* space between the first sunburst and the second row */
}
#explore_graphics_panel .horizontal-child {
    flex: 1 1 320px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
}
/* Let the chart box grow to fill its column so both row-2 boxes share the taller height */
#explore_graphics_panel .horizontal-child .graph-box {
    flex: 1 1 auto;
}
#explore_graphics_panel .loading-graph {
    width: 100%;
    text-align: center;
}
#explore_graphics_panel .graph-empty-msg {
    padding: 15px;
    text-align: center;
}

/* ----- Host-organism bar plot ----- */
#explore_graphics_panel .organism-barplot {
    width: 100%;
    padding: 5px;
    max-height: 380px;
    overflow-y: auto;
}
#explore_graphics_panel .organism-bar-row {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 2px;
}
#explore_graphics_panel .organism-bar-label {
    width: 45%;
    text-align: end;
    padding-right: 5px;
    font-size: 14px;
}
#explore_graphics_panel .organism-bar-btn {
    height: 24px;
    margin-right: 4px;
}
#explore_graphics_panel .organism-bar-track {
    flex: 1;
}
#explore_graphics_panel .hbar {
    display: block;
    border-radius: 5px;
    padding: 1px;
    margin: 1px;
    color: #fff;
    background-color: #3A88FB;
    height: 24px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    /* width is set inline per bar (proportional to its count) */
}