/* ==========================================================================
   Horizontal Nav Responsive Fixes
   For _HomeLayout.cshtml (data-layout="horizontal").
   This layout has no sidebar — everything lives in one header row, which
   is the most likely thing to overflow/wrap badly on tablets. These rules
   are defensive and additive on top of responsive.css.
   ========================================================================== */

/* ---- Base: header row should never force horizontal page scroll ---- */
.header .main-header {
    flex-wrap: nowrap;
    min-height: 64px;
}

.header .user-menu {
    flex-wrap: nowrap;
    gap: 4px;
}

/* ---- Mobile (below 768px): collapse menu behind the mobile_btn,
        same pattern the theme already uses elsewhere ---- */
@media (max-width: 767.98px) {

    .header .user-menu {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch !important;
        background: #fff;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
        padding: 12px;
        gap: 8px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
        z-index: 1000;
    }

        .header .user-menu.menu-opened {
            max-height: calc(100vh - 64px);
            overflow-y: auto;
        }

        .header .user-menu .nav-item,
        .header .user-menu > a {
            width: 100%;
        }

        .header .user-menu .dropdown-menu.dropdown-xl {
            position: static !important;
            width: 100%;
            transform: none !important;
            box-shadow: none;
            border: 1px solid #eee;
        }
}

/* ---- Tablet (768px - 1199px): header items fit, but the mega-dropdown
        of 10 "Add Entity" items needs fewer columns to stay legible ---- */
@media (min-width: 768px) and (max-width: 1199.98px) {

    .dropdown-menu.dropdown-xl {
        width: 90vw;
        max-width: 640px;
        left: auto !important;
        right: 0;
    }

        .dropdown-menu.dropdown-xl .row.g-2 > [class*="col-"] {
            flex: 0 0 33.3333%;
            max-width: 33.3333%;
        }

    /* Shrink "Hello, Name" greeting so it doesn't push other items off-row */
    .profile-nav .nav-link.userset .fw-medium {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }

    /* Give the nav a bit more breathing room since there's no sidebar
	   competing for space */
    .header .user-menu {
        gap: 8px;
    }
}

/* ---- Desktop (1200px and up): mega-dropdown can use full column count ---- */
@media (min-width: 1200px) {

    .dropdown-menu.dropdown-xl {
        width: auto;
        max-width: 760px;
    }

        .dropdown-menu.dropdown-xl .row.g-2 > [class*="col-"] {
            flex: 0 0 16.6667%;
            max-width: 16.6667%;
        }
}

/* ---- Wide desktop: cap header content width so nav items don't spread
        out awkwardly on very large monitors ---- */
@media (min-width: 1600px) {

    .header .main-header {
        max-width: 1800px;
        margin: 0 auto;
    }
}

/* ---- Cart & profile dropdown: keep them from clipping at viewport edge
        on tablet widths ---- */
@media (min-width: 768px) and (max-width: 1199.98px) {

    .menu-drop-user.dropdown-menu-end {
        right: 0;
        left: auto;
    }
}