/* Sectorisation Voronoi tool styles */
.sector-voronoi-container {
    display: grid;
    grid-template-columns: 220px 1fr 220px;
    grid-template-rows: 1fr;
    height: calc(100vh - 150px); /* Adjust if header height changes */
    overflow: hidden;
}

.left-panel,
.right-panel {
    padding: 10px;
    background: #f9f9f9;
    overflow-y: auto;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

/* === NEW FLEX‑WRAP CENTER PANEL === */
.center-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    padding: 5px;
    background: #fff;
    overflow: auto;
}

/* Each plot gets a flex basis and min size */
.center-panel > div {
    flex: 1 1 400px; /* grow, shrink, base 400px */
    min-width: 300px; /* wrap breakpoint */
    min-height: 300px; /* so you always see something */
    position: relative;
}

/* Force Plotly to fill its container */
.center-panel #mapPlot,
.center-panel #fitnessPlot {
    width: 100% !important;
    height: 100% !important;
}

/* Hide/Show */
.hidden {
    display: none !important;
}

.left-panel label,
.right-panel label {
    display: block;
    font-weight: bold;
    margin-top: 10px;
}

.left-panel input,
.left-panel select,
.right-panel input,
.right-panel select {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    margin-top: 2px;
}

.left-panel button {
    display: inline-block;
    width: 48%;
    margin-top: 10px;
    margin-right: 2%;
    padding: 6px;
    font-weight: bold;
}

.left-panel button:last-child {
    margin-right: 0;
}

/* make the wrapper position relative, so our overlay can cover it */
.main-plot {
    position: relative;
    height: 80vh; /* Bugfix for Safari */
}