div#scroll-wrapper {
    --map-spacing: 0rem;
    display: grid;
    width: 100%;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    position: relative;
    background: #f5f5f5;
}
div#scroll-wrapper.dragging * {
   pointer-events: none;
}
div.panner-content {
    margin: var(--map-spacing);
    position: relative;
    background: inherit;
    width: max-content;
}

/* Overlay bbox dello storico analisi (globali, non CSS scoped: i box sono renderizzati dagli adapter
   dentro il RenderFragment della shell condivisa, quindi lo scoping per-componente non li coprirebbe).
   Coordinate assolute in px sullo spazio-immagine 1:1; lo zoom è applicato dal JS (setMinScale). */
/* Con una selezione gli altri riquadri si attenuano (prima sparivano). Passaggio del mouse (classi hv-*
   messe dal JS dashboardHover): fila in blu, forte in arancio, il resto attenuato; mentre qualcosa è sotto
   il mouse la selezione col click è ignorata (html.hv-active). Direttiva 2026-09-13. */
.panner-content:has(.image-bbox-frame.frame-focus) .image-bbox-frame:not(.frame-focus),
html.hv-active .image-bbox-frame.hv-dim,
html.hv-active .image-bbox-frame.frame-focus:not(.hv-row):not(.hv-strong) {
    opacity: .18;
}

html.hv-active .image-bbox-frame.frame-focus > div {
    display: none;
}

.image-bbox-frame.hv-row {
    border-color: #2f7bff;
    background: #2f7bff26;
    opacity: 1;
}

.image-bbox-frame.hv-strong {
    border-color: #ff8c00;
    background: #ff8c0040;
    box-shadow: 0 0 8px 2px #ff8c00;
    opacity: 1;
    z-index: 1201;
}

.image-bbox-frame {
    position: absolute;
    border: 3px solid limegreen;
    z-index: 1200;
    background: #ffffff20;
}

    .image-bbox-frame.frame-focus {
        display: flex !important;
    }

    .image-bbox-frame.frame-focus-multiple {
        display: flex !important;
        border: 3px solid goldenrod;
    }