/* Opportunity Map result page (P3 T4). */

/* Legend / info box chrome, copied from Pages/Valorization/Valorization/Index.cshtml (~lines 26-61) so the
   Opportunity Map legend control matches the Valorisation map's look. */
.map-info-box, .map-legend-box {
    padding: 6px 8px;
    font-size: 14px;
    line-height: 16px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}
.map-info-box h5, .map-legend-box h5 {
    margin: 0 0 5px;
    color: #777;
    font-size: 14px;
}
.map-legend-box i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

#om-map {
    height: 70vh;
    min-height: 600px;
    width: 100%;
    margin-top: 1em;
}
#om-map:fullscreen,
#om-map:-webkit-full-screen {
    height: 100% !important;
    min-height: 0;
    margin-top: 0;
}

/* Status panel: per-stage stepper badges (queued -> running -> done, per s.stages / s.stageIndex). */
.om-stage-step {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: .35em .55em;
    background-color: #e9ecef;
    color: #6c757d;
}
.om-stage-step.active {
    background-color: #0d6efd;
    color: #fff;
}
.om-stage-step.done {
    background-color: #198754;
    color: #fff;
}

/* "Layer opacity" slider (top-right control), copied from the valorisation map so both maps match.
   Lives here (not inline) because this file is also inlined into the standalone HTML export. */
.map-opacity-control {
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.2;
    min-width: 160px;
}
.map-opacity-control label {
    display: block;
    margin: 0 0 4px;
    color: #495057;
    font-weight: 500;
}
.map-opacity-control input[type=range] {
    width: 100%;
    margin: 0;
}

/* Legend rows: fixed swatch + label on one line (no floats — the floated <i> pattern rendered as a staircase). */
#om-map .map-legend-box { line-height: 1.3; }
#om-map .map-legend-box .legend-row { display: flex; align-items: center; gap: 6px; margin: 2px 0; white-space: nowrap; }
#om-map .map-legend-box .legend-row i { float: none; display: inline-block; width: 18px; height: 14px; flex: 0 0 18px; margin: 0; border: 1px solid #999; opacity: 0.9; }