/* Dashboard mobile layout: catalog drawer, mobile top-nav drawer,
   dashboard toolbar, saved views, and overflow helpers.

   IMPORTANT:
   - This file leaves the desktop navigation layout unchanged.
   - Keep the original desktop _TopNavigation.cshtml markup.
   - Dashboard breakpoint: 768px.
   - Bootstrap navbar-expand-lg breakpoint: 992px.
*/

.dashboard-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, 0.4);
}

    .dashboard-mobile-backdrop.is-open {
        display: block;
    }

body.dashboard-drawer-open {
    overflow: hidden;
}

/* ==========================================================
   DASHBOARD MOBILE LAYOUT
========================================================== */
@media (max-width: 767.98px) {
    #widget-catalog-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(320px, 90vw);
        max-width: 90vw;
        z-index: 1050;
        margin: 0 !important;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--bs-body-bg, #fff);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
    }

        #widget-catalog-sidebar.is-open {
            transform: translateX(0);
        }

    #dashboard-grid,
    .dashboard-main,
    .dashboard-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #dashboard-edit-layout-btn {
        display: none !important;
    }

    .grid-stack-item-content,
    .widget-card-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .widget-card-body table {
            max-width: 100%;
        }

    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .widget-card .card-header .btn-link {
        min-width: 2.25rem;
        min-height: 2.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .dashboard-toolbar {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: stretch !important;
        gap: 0.5rem !important;
        align-items: stretch;
    }

        .dashboard-toolbar-filters,
        .dashboard-toolbar-actions {
            flex: 1 1 100%;
            min-width: 0;
        }

    #saved-views-btn,
    #dashboard-config-btn,
    #dashboard-edit-layout-btn {
        width: 100%;
    }

    #saved-views-panel {
        position: fixed !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
        top: 180px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: min(70vh, 420px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 1060;
    }

    .saved-views-row {
        min-height: 44px;
    }

    .saved-views-name {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: anywhere;
    }
}

@media (min-width: 768px) {
    #widget-catalog-sidebar.is-open {
        transform: none;
    }

    .dashboard-mobile-backdrop {
        display: none !important;
    }
}

/* ==========================================================
   MOBILE TOP NAVIGATION DRAWER
   Desktop is untouched because every rule is below 992px.
========================================================== */
@media (max-width: 991.98px) {
    #mainTopNav {
        overflow-x: clip;
    }

        /* Mobile-only logo sizing. Desktop retains the original 75px. */
        #mainTopNav susa-opco-logo {
            height: 48px !important;
            max-height: 48px !important;
            width: auto !important;
            max-width: calc(100vw - 7rem);
        }

        #mainTopNav .navbar-toggler {
            position: relative;
            z-index: 1100;
            flex: 0 0 auto;
            margin-left: auto !important;
        }

    /*
       The original desktop markup keeps #topNavCollapse in the logo row.
       On mobile, remove the collapse from document flow and render it as a
       fixed right-side drawer. This preserves the desktop layout exactly.
    */
    #topNavCollapse {
        display: block !important;
        position: fixed !important;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto !important;
        width: min(320px, 90vw) !important;
        min-width: 0 !important;
        height: 100dvh;
        margin: 0 !important;
        padding: 4.75rem 1rem 1rem;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--bs-body-bg, #fff);
        border-left: 1px solid var(--bs-border-color, #dee2e6);
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
        z-index: 1090;
        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
    }

        #topNavCollapse.show,
        #topNavCollapse.collapsing {
            transform: translateX(0);
            visibility: visible;
            pointer-events: auto;
            transition: transform 0.25s ease, visibility 0s linear 0s;
        }

        /* Bootstrap writes a temporary height during collapse animation. */
        #topNavCollapse.collapsing {
            height: 100dvh !important;
        }

        #topNavCollapse .navbar-nav {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            width: 100% !important;
            min-width: 0 !important;
            margin: 0 !important;
        }

        #topNavCollapse .nav-item {
            display: block;
            width: 100%;
            min-width: 0;
            margin: 0;
        }

        #topNavCollapse .nav-link {
            display: flex !important;
            align-items: center;
            width: 100%;
            min-width: 0;
            padding: 0.875rem 0.75rem;
            white-space: normal;
            overflow-wrap: anywhere;
        }

            #topNavCollapse .nav-link > i {
                flex: 0 0 auto;
            }

        #topNavCollapse .dropdown-menu {
            position: static !important;
            inset: auto !important;
            transform: none !important;
            width: 100% !important;
            min-width: 0 !important;
            margin: 0 0 0.5rem 0 !important;
            padding: 0.25rem 0 0.25rem 0.75rem;
            border: 0;
            box-shadow: none !important;
            background: transparent;
        }

        #topNavCollapse .dropdown-item {
            width: 100%;
            white-space: normal;
            overflow-wrap: anywhere;
        }

        #topNavCollapse .navbar-nav + .navbar-nav {
            margin-top: 0.5rem !important;
            padding-top: 0.5rem;
            border-top: 1px solid var(--bs-border-color, #dee2e6);
        }

    #mainTopNav .topbar-subrow {
        position: relative;
        z-index: 1;
        gap: 0.5rem;
    }
}

@media (max-width: 575.98px) {
    #mainTopNav .topbar-subrow {
        flex-wrap: wrap;
    }

        #mainTopNav .topbar-subrow > :first-child {
            flex: 1 1 100%;
            width: 100%;
            min-width: 0;
        }

    #site-theme-toggle-slot {
        margin-left: auto;
    }
}