/*
 * Public #header user dropdown — Dashlite dark header parity.
 * Scoped to #header .login-profile-button|.mobile-login-profile-button .dropdown.user-dropdown
 */

@font-face {
    font-family: "Nioicon";
    src: url("../dashlite/demo1/src/assets/fonts/Nioicon.woff") format("woff"),
         url("../dashlite/demo1/src/assets/fonts/Nioicon.ttf") format("truetype"),
         url("../admin/assets/fonts/Nioicon.svg#Nioicon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/*
 * Logged-in only: remove public header guest pill (#E3E1DC / 74x37) behind the avatar.
 * Guest rows keep .login-profile-button / .mobile-login-profile-button pill from header CSS.
 */
#header .login-profile-button:has(> .dropdown.user-dropdown),
#header .mobile-login-profile-button:has(> .dropdown.user-dropdown) {
    background: transparent !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    min-height: 0;
    padding: 0 !important;
    border-radius: 0 !important;
}

#header .login-profile-button .dropdown.user-dropdown,
#header .mobile-login-profile-button .dropdown.user-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
}

#header .mobile-login-profile-button .dropdown.user-dropdown {
    overflow: visible;
}

#header .login-profile-button .dropdown.user-dropdown > .dropdown-toggle,
#header .mobile-login-profile-button .dropdown.user-dropdown > .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0;
    color: inherit;
}

#header .login-profile-button .dropdown.user-dropdown > .dropdown-toggle::after,
#header .mobile-login-profile-button .dropdown.user-dropdown > .dropdown-toggle::after {
    display: none !important;
}

#header .login-profile-button .dropdown.user-dropdown .user-toggle,
#header .mobile-login-profile-button .dropdown.user-dropdown .user-toggle {
    display: flex;
    align-items: center;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

#header .login-profile-button .dropdown.user-dropdown .user-toggle .user-avatar.sm,
#header .mobile-login-profile-button .dropdown.user-dropdown .user-toggle .user-avatar.sm {
    border-radius: 50%;
    height: 32px;
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: #3fbd9a;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    flex-shrink: 0;
    position: relative;
    margin: 0 !important;
}

#header .login-profile-button .dropdown.user-dropdown .dropdown-menu,
#header .mobile-login-profile-button .dropdown.user-dropdown .dropdown-menu {
    --bs-dropdown-zindex: 3000;
    --bs-dropdown-min-width: 280px;
    --bs-dropdown-max-width: 280px;
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 0;
    --bs-dropdown-spacer: 0.125rem;
    --bs-dropdown-bg: #1b2633;
    --bs-dropdown-border-color: #2a3a4e;
    --bs-dropdown-border-radius: 0.25rem;
    --bs-dropdown-inner-border-radius: calc(0.25rem - 1px);
    --bs-dropdown-box-shadow: 0 3px 20px 1px rgba(0, 0, 0, 0.4);
    --bs-dropdown-link-color: #8094ae;
    --bs-dropdown-link-hover-color: #0fac81;
    --bs-dropdown-link-hover-bg: transparent;
    --bs-dropdown-link-active-color: #0fac81;
    --bs-dropdown-link-active-bg: transparent;

    position: absolute !important;
    z-index: 3000 !important;
    min-width: 280px;
    max-width: 280px;
    margin-top: 0.125rem;
    padding: 0 !important;
    overflow: hidden;
    list-style: none;
    color: #b6c6e3;
    background-color: #1b2633 !important;
    background-clip: padding-box;
    border: 1px solid #2a3a4e !important;
    border-radius: 0.25rem;
    box-shadow: 0 3px 20px 1px rgba(0, 0, 0, 0.4);
}

#header .login-profile-button .dropdown.user-dropdown .dropdown-menu.dropdown-menu-end[data-bs-popper],
#header .mobile-login-profile-button .dropdown.user-dropdown .dropdown-menu.dropdown-menu-end[data-bs-popper] {
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    margin-top: 0.125rem;
}

#header .login-profile-button .dropdown.user-dropdown .dropdown-inner,
#header .mobile-login-profile-button .dropdown.user-dropdown .dropdown-inner {
    padding: 0 1.75rem;
}

#header .login-profile-button .dropdown.user-dropdown .dropdown-inner + .dropdown-inner,
#header .mobile-login-profile-button .dropdown.user-dropdown .dropdown-inner + .dropdown-inner {
    border-top: 1px solid #2a3a4e;
}

#header .login-profile-button .dropdown.user-dropdown .user-card-wrap,
#header .mobile-login-profile-button .dropdown.user-dropdown .user-card-wrap {
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;
}

#header .login-profile-button .dropdown.user-dropdown .user-card-wrap.bg-lighter,
#header .mobile-login-profile-button .dropdown.user-dropdown .user-card-wrap.bg-lighter {
    background-color: #0e1720 !important;
}

#header .login-profile-button .dropdown.user-dropdown .user-card,
#header .mobile-login-profile-button .dropdown.user-dropdown .user-card {
    display: flex;
    align-items: center;
}

#header .login-profile-button .dropdown.user-dropdown .user-card .user-avatar,
#header .mobile-login-profile-button .dropdown.user-dropdown .user-card .user-avatar {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: #3fbd9a;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
    flex-shrink: 0;
    position: relative;
}

#header .login-profile-button .dropdown.user-dropdown .user-card .user-avatar + .user-info,
#header .mobile-login-profile-button .dropdown.user-dropdown .user-card .user-avatar + .user-info {
    margin-left: 1rem;
}

#header .login-profile-button .dropdown.user-dropdown .user-card .user-info,
#header .mobile-login-profile-button .dropdown.user-dropdown .user-card .user-info {
    color: #8094ae;
    min-width: 0;
}

#header .login-profile-button .dropdown.user-dropdown .user-card .user-info .lead-text,
#header .mobile-login-profile-button .dropdown.user-dropdown .user-card .user-info .lead-text {
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    display: block;
}

#header .login-profile-button .dropdown.user-dropdown .user-card .user-info .sub-text,
#header .mobile-login-profile-button .dropdown.user-dropdown .user-card .user-info .sub-text {
    display: block;
    font-size: 12px;
    color: #8094ae;
    margin-top: 0.15rem;
    word-break: break-word;
}

#header .login-profile-button .dropdown.user-dropdown .link-list,
#header .mobile-login-profile-button .dropdown.user-dropdown .link-list {
    list-style: none;
    margin: 0;
    padding: 0.75rem 0;
}

#header .login-profile-button .dropdown.user-dropdown .link-list li,
#header .mobile-login-profile-button .dropdown.user-dropdown .link-list li {
    list-style: none;
    margin: 0;
    padding: 0;
}

#header .login-profile-button .dropdown.user-dropdown .link-list a,
#header .mobile-login-profile-button .dropdown.user-dropdown .link-list a {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: #8094ae;
    font-size: 13px;
    line-height: 1.4rem;
    font-weight: 500;
    padding: 0.575rem 0;
    text-decoration: none;
}

#header .login-profile-button .dropdown.user-dropdown .link-list a:hover,
#header .mobile-login-profile-button .dropdown.user-dropdown .link-list a:hover {
    color: #0fac81;
}

#header .login-profile-button .dropdown.user-dropdown .link-list a .icon,
#header .mobile-login-profile-button .dropdown.user-dropdown .link-list a .icon {
    font-size: 1.125rem;
    width: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    text-align: center;
}

#header .login-profile-button .dropdown.user-dropdown .link-list form,
#header .mobile-login-profile-button .dropdown.user-dropdown .link-list form {
    display: block;
    width: 100%;
    margin: 0;
}

#header .login-profile-button .dropdown.user-dropdown .link-list button.btn.btn-link,
#header .mobile-login-profile-button .dropdown.user-dropdown .link-list button.btn.btn-link {
    --bs-btn-color: #8094ae;
    --bs-btn-hover-color: #0fac81;
    --bs-btn-bg: transparent;
    --bs-btn-border-width: 0;
    --bs-btn-hover-bg: transparent;
    --bs-btn-focus-shadow-rgb: transparent;

    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.575rem 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4rem;
    color: #8094ae !important;
    text-align: left;
    text-decoration: none !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

#header .login-profile-button .dropdown.user-dropdown .link-list button.btn.btn-link:hover,
#header .login-profile-button .dropdown.user-dropdown .link-list button.btn.btn-link:focus,
#header .mobile-login-profile-button .dropdown.user-dropdown .link-list button.btn.btn-link:hover,
#header .mobile-login-profile-button .dropdown.user-dropdown .link-list button.btn.btn-link:focus {
    color: #0fac81 !important;
    background: transparent !important;
}

#header .login-profile-button .dropdown.user-dropdown .link-list button.btn.btn-link .icon,
#header .mobile-login-profile-button .dropdown.user-dropdown .link-list button.btn.btn-link .icon {
    font-size: 1.125rem;
    width: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    text-align: center;
}

#header .login-profile-button .dropdown.user-dropdown em.icon.ni,
#header .mobile-login-profile-button .dropdown.user-dropdown em.icon.ni {
    font-family: "Nioicon", sans-serif !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#header .login-profile-button .dropdown.user-dropdown .ni-user-alt::before,
#header .mobile-login-profile-button .dropdown.user-dropdown .ni-user-alt::before {
    font-family: "Nioicon" !important;
    content: "\ec24";
}

#header .login-profile-button .dropdown.user-dropdown .ni-signout::before,
#header .mobile-login-profile-button .dropdown.user-dropdown .ni-signout::before {
    font-family: "Nioicon" !important;
    content: "\ebb2";
}

@media (max-width: 420px) {
    #header .login-profile-button .dropdown.user-dropdown .dropdown-menu,
    #header .mobile-login-profile-button .dropdown.user-dropdown .dropdown-menu {
        min-width: calc(100vw - 40px);
        max-width: calc(100vw - 40px);
    }
}