/* =========================================================
   RUTSS REPORT — CLEAN LAYOUT
   Only affects report.php classes.
   Does NOT modify global header/body/main/container.
   ========================================================= */


/* ---------- DESKTOP ---------- */

.unified-report-shell {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.unified-report-layout {
    display: grid !important;
    grid-template-columns: 250px minmax(0,1fr) !important;
    gap: 20px !important;
    align-items: start !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.scan-tool-sidebar {
    position: sticky !important;
    top: 18px !important;

    height: auto !important;
    max-height: calc(100vh - 36px) !important;

    overflow: hidden !important;
    align-self: start !important;
}

.scan-side-list {
    max-height: calc(100vh - 95px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.scan-results-stream {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
}

.scan-results-stream > *,
.scan-results-stream [id^="tool-"] {
    position: relative !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;

    transform: none !important;
    contain: none !important;

    flex: 0 0 auto !important;
}


/* ---------- MOBILE ---------- */

@media (max-width: 900px) {

    .unified-report-shell {
        display: block !important;

        position: relative !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }

    .unified-report-layout {
        display: block !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }

    /*
       Tool navigation becomes a small horizontal bar.
       It remains part of normal document flow.
    */
    .scan-tool-sidebar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 0 12px !important;

        overflow: visible !important;
    }

    .scan-side-list {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;

        width: 100% !important;

        height: auto !important;
        min-height: 52px !important;
        max-height: none !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
    }

    .scan-side-list > * {
        flex: 0 0 auto !important;
    }

    /*
       THIS is the important part:
       all forty tool cards stay in normal vertical flow.
    */
    .scan-results-stream {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;

        position: relative !important;
        inset: auto !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        transform: none !important;
        contain: none !important;
    }

    .scan-results-stream > *,
    .scan-results-stream [id^="tool-"] {
        display: block !important;

        position: relative !important;
        inset: auto !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        float: none !important;
        clear: both !important;

        transform: none !important;
        contain: none !important;

        flex: 0 0 auto !important;
    }

}