/*-------------------------------------------------------------
SIDEBAR + MAIN CONTENT LAYOUT FIX (Desktop Only)
-------------------------------------------------------------
Why this file exists:

- When Tailwind was added to the project, its resets and utility
rules unintentionally modified Bootstrap's layout behavior.

- Specifically, the .row element (#main-row) was no longer behaving
like a Bootstrap row and instead began behaving as a flex container
in some cases or collapsing in others.

- This caused a critical regression: the Facets Sidebar stopped
appearing on desktop and the entire page layout collapsed into
a single column.

- These CSS rules restore the expected Bootstrap desktop layout
*only on large screens*, without interfering with BigIron's
mobile layout, which intentionally hides the sidebar and uses a
separate navigation/header system.

- DO NOT REMOVE without testing desktop auction pages that use
the facets sidebar.
*/

/*Desktop - Only apply when sidebar exists*/
@media (min-width: 768px) {

    /* Only apply flex layout when #main-sidebar exists in the DOM */
    #main-row:has(#main-sidebar) {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    /* Only style sidebar when it exists */
    #main-row:has(#main-sidebar) #main-sidebar {
        width: 25% !important;
        min-width: 260px !important;
        display: block !important;
    }

    /* Only constrain main-content width when sidebar exists */
    #main-row:has(#main-sidebar) #main-content {
        width: 75% !important;
    }

    /* Ensure main-content is full width when sidebar doesn't exist */
    #main-row:not(:has(#main-sidebar)) #main-content {
        width: 100% !important;
    }
}

/*Mobile switch back to normal*/
@media (max-width: 767px) {

    #main-row {
        display: block !important;
    }

    #main-sidebar {
        width: 100% !important;
        min-width: auto !important;
        display: none !important;
    }

    #main-content {
        width: 100% !important;
    }
}