body:not(.home-page) .navbar {
    padding-block: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
    border-bottom: 1px solid hsl(240, 6.1%, 87.1%);
}

body:not(.home-page) .navbar > .topNavbar-content {
    --bs-nav-link-font-size: 0.875rem;
    background-color: #fff;
}

body:not(.home-page) .navbar .navbar-brand .sh-logo {
    height: 2.25rem;
    width: auto;
    max-height: 100%;
    object-fit: contain;
}

@media (min-width: 992px) {
    .navbar .navbar-nav {
        align-items: center;
    }
}

.navbar .user-dropdown {
    display: grid;
    grid-template-columns: 32px 1fr; /* Two columns of equal width */
    grid-template-rows: auto auto; /* Two rows */
    column-gap: 8px;
    align-items: center;
    text-align: left;

    & + .dropdown-menu {
        transform: scaleY(0) scaleX(0.7);
        margin-top: -30%;
        transform-origin: top;
        transition: all 0.2s ease-in-out, margin-top 0.4s ease-out;
        transition-delay: 0s, 0.1s; /* No delay for open, slight delay for close */
        opacity: 0;
        display: block;
        visibility: hidden;
    }

    &.show {
        background: var(--brand-100);
        border-radius: 0.25rem;

        & + .dropdown-menu.show {
            margin-top: 0;
            transform: scale(1) translateY(0);
            opacity: 1;
            visibility: visible;
        }
    }

}
.navbar .user-dropdown::after {
    display: none;
}
.navbar .user-dropdown .user-icon {
    grid-column: 1/2; /* Span the first column */
    grid-row: 1/3; /* Span two rows */
    aspect-ratio: 1/1;
    width: auto;
    height: 32px;
}
.navbar .user-dropdown .user-name {
    grid-column: 2/3; /* Second column, first row */
    grid-row: 1/2;
    line-height: 1.2;
}
.navbar .user-dropdown .user-type {
    font-size: 12px;
    grid-column: 2/3; /* Second column, second row */
    grid-row: 2/3;
}
.topNavbar-content .dropdown-menu {
    --bs-dropdown-font-size: 0.875rem;
    box-shadow: rgba(38, 43, 67, 0.18) 0px 6px 20px 0px;
    width: 13rem;
    top: 85%;
    right: 0;
    left: unset;
    padding: 0.5rem;
    border: 0.0625rem solid var(--neutral-200);
    border-radius: 0.5rem;


    & .dropdown-item {
        padding: 0.25rem 1rem;
        display: flex;
        align-items: center;
        column-gap: 0.5rem;
        color: var(--neutral-500);
        border-radius: 0.2rem;


        &:active {
            color: var(--neutral-50);
        }
    }

    & i {
        font-size: 1rem;
    }


}

.navbar .sign-in-btn {
    padding-inline: 1.25rem;
}