.nav-new
{
    display: flex;
    width: auto;
    margin-top: 24px;
    margin-left: 40px;
    margin-right: 40px;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
}

/* <= 768px (SM) */
@media (max-width: 768px)
{
    .nav-new
    {
        margin-left: 16px;
        margin-right: 16px;
        margin-bottom: 56px;
    }
}

/* <= 576px (XS) */
@media (max-width: 576px)
{
    .nav-new
    {
        margin-top: 24px;
        margin-bottom: 40px;
        margin-left: 12px;
        margin-right: 12px;
        gap: 12px;
    }
}


.nav-new .nav-container
{
    display: inline-flex;
    border-radius: 64px;
    height: 64px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding-left: 24px;
    padding-right: 24px;
}

.nav-new .nav-round-btn > a
{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 0;
}

.nav-new .nav-round-btn > a img,
.nav-new .nav-round-btn > a svg
{
    color: white;
    transition: transform 0.2s ease-in-out;
}

.nav-new .nav-round-btn > a:hover img,
.nav-new .nav-round-btn > a:hover svg
{
    transform: scale(1.2);
}

/* Notifications menu */
.nav-new .notifications-menu .dropdown-menu {
    width: 412px;
}


.nav-new .notifications-menu .dropdown-menu .notification,
.nav-new ul.dropdown-menu-mobile ul.submenu-menu > li.notification
 {
    font-size: 16px;
    font-weight: 400;
    min-height: 48px;
    height: auto;
    padding: 8px 12px;
    border-radius: 12px;
    margin-bottom: 8px;
}

.nav-new ul.dropdown-menu-mobile ul.submenu-menu > li.notification
{
    font-size: 18px;
    padding: 8px 32px;
}

.nav-new .logo
{
    display: inline-block;
    justify-content: flex-start;
}

.nav-new .links
{
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 56px;
}

.nav-new .links a,
.nav-new .links .dropdown>a
{
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease-in-out;
    display: inline-block;
}

.nav-new .links a:hover,
.nav-new .links .dropdown>a:hover
{
    transform: scale(1.14);
}

/* <= 460px */
@media (max-width: 460px)
{
    .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile li a
    {
        font-size: 20px !important;
    }
}

/* <= 576px (XS) */
@media (max-width: 576px)
{
    .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile
    {
        margin: 0 !important;
        top: 0px;
        left: 0px;
        width: 100% !important;
        /* Prevent horizontal scroll */
        overflow-x: hidden;
        max-width: 100vw;
        box-sizing: border-box;
        border: none;
    }

    /* Add styles to prevent body scroll when mobile menu is open */
    body.nav-menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
}

/* >= 576 (SM) and <= 768 (MD) */
@media (min-width: 576px) and (max-width: 768px)
{
    .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile
    {
        margin: 0 !important;
        top: 0px;
        left: 0px;
        width: 100% !important;
    }
}

/* <= 992px (MD) */
@media (max-width: 992px)
{
    .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile
    {
        position: fixed;
        top: 0px;
        right: 0px;
        margin: 0;
        margin-left: 50%;
        border-radius: 0 !important;
        width: 55%;
        height: 100%;
        z-index: 10000;
        display: flex;
        flex-flow: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
        padding-top: 40px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile li a
    {
        font-size: 22px;
        margin-left: 16px !important;
        margin-right: 16px !important;
        padding: 8px 24px;
        height: auto;
        width: calc(100% - 32px) !important;
        box-sizing: border-box;
    }

    .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile li a:hover
    {
        background-color: rgba(0, 0, 0, 0.1);
    }

    .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile li.close-btn
    {
        align-self: flex-end;
    }

    .nav-new .dropdown-submenu .submenu-menu
    {
        display: none;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .nav-new .dropdown-submenu.active>.submenu-menu
    {
        display: block;
    }

    .nav-new .dropdown-menu-mobile .dropdown-submenu
    {
        display: block;
        position: relative;
        width: 100%;
    }

    .nav-new .dropdown-menu-mobile .dropdown-submenu>a.submenu-toggle
    {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        cursor: pointer;
        padding: 12px 24px;
        box-sizing: border-box;
    }

    /* Additional styles for text and icon alignment inside <a> */
    .nav-new .dropdown-menu-mobile li a,
    .nav-new .dropdown-menu-mobile li a span
    {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
    }

    /* Selector for text between icons */
    .nav-new .dropdown-menu-mobile li .submenu-toggle span:nth-child(2)
    {
        /* Pushes chevron to the right */
        margin-right: auto;
        /* Margin from the left icon */
        margin-left: 16px;
    }

    .nav-new .dropdown-submenu .submenu-menu li a
    {
        font-size: 22px;
        padding: 10px 24px 10px 80px;
        margin-top: 4px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
        text-decoration: none;
        display: flex;
        align-items: center;
        /* Gap between icon and text */
        gap: 16px;
    }

    /* Margin for text to prevent overlapping with parent icons */
    .nav-new .dropdown-menu-mobile .dropdown-submenu .submenu-menu li a span
    {
        /* Reset if previously set, control through gap */
        margin-left: 0;
    }

    /* Initial state - closed */
    .nav-new .dropdown-menu-mobile .submenu-toggle .chevron
    {
        transition: transform 0.3s ease;
        transform: rotate(0deg);
        width: 24px;
        height: 24px;
    }

    .nav-new .dropdown-submenu.active>.submenu-toggle .chevron
    {
        /* Rotate when opened */
        transform: rotate(180deg);
    }

    /* Styles for THIRD level of mobile menu nesting */
    .dropdown-menu-mobile>li.dropdown-submenu>ul.submenu-menu>li.dropdown-submenu>ul.submenu-menu>li>a
    {
        margin-left: 24px !important;
    }

    /* Align mobile menu close button */
    .nav-new ul li.close-btn a
    {
        width: 75px !important;
    }
}

/* <= 1200px (XL) */
@media (max-width: 1200px)
{
    .nav-new .links
    {
        gap: 28px;
    }
}

/* Styles for desktop version of nested menus (from 992px and above) */
@media (min-width: 992px)
{

    /* Set relative positioning for submenu container */
    .nav-new .dropdown .dropdown-submenu
    {
        position: relative;
    }

    /* Submenu is hidden by default and positioned absolutely to the right of the parent item */
    .nav-new .dropdown .dropdown-submenu .submenu-menu.desktop
    {
        display: none;
        position: absolute;
        top: -16px;
        left: 100%;
        margin-left: 20px;
        /* <--- ADDED */
        backdrop-filter: blur(16px);
        /* <--- ADDED */
        -webkit-backdrop-filter: blur(16px);
        /* <--- ADDED */
        border-radius: 24px;
        padding: 16px;
        z-index: 1001;
        min-width: 364px;
        /* set width if needed */
    }

    /* When in open state (when active class is added) submenu is displayed */
    .nav-new .dropdown .dropdown-submenu.active .submenu-menu.desktop
    {
        display: block;
    }

    .nav-new .dropdown .dropdown-submenu .submenu-menu.desktop a
    {
        width: 100%;
        height: 48px;
        padding: 0 8px;
        font-size: 20px;
        font-weight: 600;
        line-height: 140%;
        border-radius: 64px;
        margin: 0px 0px 4px 0px;
    }
}

.nav-new .dropdown
{
    position: relative;
    display: inline-block;
}

.nav-new .dropdown-menu
{
    display: none;
    position: absolute;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 24px;
    padding: 16px;
    width: auto;
    top: 100%;
    right: -32px;
    margin-top: 12px;
    z-index: 10000;
}

.nav-new ul.submenu-menu.desktop
{
    margin-top: 0;
}

.nav-new .dropdown-menu li
{
    display: flex;
    align-items: center;
    /* Vertically centers */
    margin-bottom: 4px;
    /* spacing between items */
}

.nav-new .dropdown-menu li:last-child
{
    margin-bottom: 0;
    /* removes extra margin from the last item */
}

.nav-new .dropdown-menu .notification{
    cursor: default;
}

.nav-new .dropdown-menu > li > a,
.nav-new .dropdown-menu .dropdown-submenu > ul > li > a,
.nav-new .dropdown-menu .notification
{
    width: 100%;
    height: 48px;
    padding: 0 8px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    line-height: 160%;
    border-radius: 64px;
    background-color: transparent;
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/*.nav-new .dropdown-menu a:hover,*/
.nav-new .dropdown-menu .dropdown-submenu > ul > li > a:hover,
.nav-new .dropdown-menu > li > a:hover,
.nav-new .dropdown-menu .notification
{
    transform: scale(1.05);
}

.nav-new .dropdown-menu .notification a,
.nav-new ul.dropdown-menu-mobile ul.submenu-menu > li.notification p > a /* mobile menu */
{
    display: inline;
    color: #0037ED;
    padding: 0;
    font-size: inherit;
    line-height: 160%;
    text-decoration: none;
    vertical-align: baseline;
}

.nav-new .dropdown-menu .notification a:hover,
.nav-new ul.dropdown-menu-mobile ul.submenu-menu > li.notification p > a:hover /* mobile menu */
{
    color: #0F35B4;
    background: none;
}

.nav-new .dropdown-menu .notification .time
{
    font-size: 14px;
    color: #CECECE;
}

/* mobile menu */
.nav-new ul.dropdown-menu-mobile ul.submenu-menu > li.notification .time
{
    font-size: 16px;
}

.nav-new .dropdown.active .dropdown-menu
{
    display: block;
}

.nav-new .dropdown a.dropdown-tgl
{
    display: inline-flex;
    align-items: center;
    /* Vertical alignment */
    gap: 5px;
    /* Gap between text and icon */
    color: var(--accent-color);
}

.nav-new ul li > a
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
}


.nav-new .nav-container a.badge
{
    display: inline-block;
    font-weight: 500;
    border-radius: 32px;
    padding: 6px 11px;
}

.nav-new .nav-container div.links div.dropdown ul.dropdown-menu-mobile li a.badge {
    width: auto;
}

/* Hide "Admin" label because there is no space for it */
@media (max-width: 1056px) {
    .nav-menu-span-admin {
        display: none !important;
    }
}

/* ============================================
   Light Theme Colors (merged from navMenuLight.css)
============================================ */
.nav-new .nav-container
{
    background-color: #F6F6F6;
}

/* Light theme: tighter corner radius on the frosted nav bar.
   Dark theme keeps the full 64px pill (set above). */
:root:not([data-theme="dark"]) .nav-new .nav-container
{
    border-radius: 24px;
}

.bg-gray .nav-new .nav-container
{
    background-color: #F2F2F2;
}

/* Round icon nav btns 1st level (profile, search) */
.nav-new .nav-round-btn > a
{
    background-color: var(--accent-color);
}

/* Light theme: header round buttons (notifications, theme, profile) match the
   header fill (grey) with dark icons, instead of the old black circles.
   To revert to the old black buttons, comment out the two rules below — the
   --accent-color fill above takes over again. */
/* TEMP reverted to black buttons — uncomment to restore the grey header-fill look.
:root:not([data-theme="dark"]) .nav-new .nav-round-btn > a
{
    background-color: #F6F6F6;
}
:root:not([data-theme="dark"]) .nav-new .nav-round-btn > a img,
:root:not([data-theme="dark"]) .nav-new .nav-round-btn > a svg
{
    color: #1b1b1b;
}
*/

.nav-new .links a,
.nav-new .links .dropdown>a
{
    color: var(--accent-color);
}

/* <= 992px (MD) */
@media (max-width: 992px)
{
    .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile
    {
        background-color: rgba(245, 245, 245, 0.45);
    }

    .nav-new .dropdown-submenu .submenu-menu li a
    {
        color: var(--accent-color);
    }
}

/* Styles for desktop version of nested menus (from 992px and above) */
@media (min-width: 992px)
{
    /* Submenu is hidden by default and positioned absolutely to the right of the parent item */
    .nav-new .dropdown .dropdown-submenu .submenu-menu.desktop
    {
        background-color: rgba(240, 240, 240, 0.98);
        border: 1px solid white;
        color: var(--accent-color);
    }

    .nav-new .dropdown .dropdown-submenu .submenu-menu.desktop a
    {
        color: var(--accent-color);
    }
}

.nav-new .dropdown-menu
{
    background-color: rgba(240, 240, 240, 0.3);
    border: 1px solid white;
    color: var(--accent-color);
}

.nav-new .dropdown-menu a,
.nav-new .dropdown-menu .notification
{
    color: var(--accent-color);
}

.nav-new .nav-container a.badge
{
    background-color: rgba(217, 0, 0, 0.1);
    color: #8B2929;
}

.nav-new .nav-round-btn.dropdown ul li:hover,
.nav-new .nav-container .dropdown ul li:hover
{
    background-color: transparent;
}

.nav-new .dropdown-menu .notification a,
.nav-new ul.dropdown-menu-mobile ul.submenu-menu > li.notification p > a
{
    color: #0037ED;
    background: none;
}

.nav-new .dropdown-menu .notification a:hover,
.nav-new ul.dropdown-menu-mobile ul.submenu-menu > li.notification p > a:hover
{
    color: #0F35B4;
    background: none;
}

.nav-new .dropdown-menu .notification .time,
.nav-new ul.dropdown-menu-mobile ul.submenu-menu > li.notification .time
{
    color: #373737;
}

.nav-new .dropdown-menu a:hover
{
    background-color: rgba(0, 0, 0, 0.1);
}

.nav-new .dropdown-menu .notification:hover
{
    background-color: rgba(0, 0, 0, 0.1) !important;
}