/* ── Visibility classes ──────────────────────────────────────── */
/* ============================================================
   NAVBAR VISIBILITY STATES
============================================================ */


.nb-hidden {
    display: none !important;
}


.nb-visible {
    display: flex !important;
}



/* Guest login buttons */

#nb-auth-buttons.nb-visible {

    display:flex !important;

    align-items:center;

    gap:12px;

}



/* Logged user */

#nb-user-buttons.nb-visible {

    display:flex !important;

    align-items:center;

    justify-content:flex-end;

}



/* Loading avatar */

#nb-user-skeleton.nb-visible {

    display:flex !important;

    align-items:center;

}



/* Skeleton hidden */

#nb-user-skeleton.nb-hidden {

    display:none !important;

}
 /* ── Skeleton loader ─────────────────────────────────────────── */
 .nb-skeleton {
     display: block;
     border-radius: 999px;
     background: linear-gradient(90deg,
             #e8e8e8 25%,
             #f5f5f5 50%,
             #e8e8e8 75%);


     background-size: 200% 100%;
     animation: nb-shimmer 1.5s ease-in-out infinite;
 }

 /* ── Skeleton dimension variants (match button sizes) ────────── */
 .nb-skeleton--login {
     width: 80px;
     height: 40px;
 }

 .nb-skeleton--cta {
     width: 130px;
     height: 40px;
 }

 /* ── Skeleton shimmer keyframes ──────────────────────────────── */
 @keyframes nb-shimmer {
     0% {
         background-position: 200% 0;
     }

     100% {
         background-position: -200% 0;
     }
 }



 /* ── User avatar skeleton (circular, matches profile pic) ───── */
 .nb-skeleton--avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
 }

 /* ── Mobile skeleton (full-width, taller) ────────────────────── */
 .nb-skeleton--mobile-login {
     width: 100%;
     height: 45px;
     border-radius: 10px;
 }

 .nb-skeleton--mobile-cta {
     width: 100%;
     height: 48px;
     border-radius: 10px;
 }

 /* ── Error message ───────────────────────────────────────────── */
 #nb-auth-buttons {
     position: relative;
 }

 .nb-auth-error {
     position: absolute;
     top: calc(100% + 4px);
     left: 50%;
     transform: translateX(-50%);
     text-align: center;
     font-size: 13px;
     color: #d32f2f;
     white-space: nowrap;
     background: #fff;
     padding: 4px 12px;
     border-radius: 6px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     z-index: 10;
 }

 .nb-auth-error.nb-hidden {
     display: none;
 }

 /* ── User profile avatar ─────────────────────────────────────── */
 #gain-org-user-profile-image {
     border-radius: 50%;
     overflow: hidden;
     width: 40px;
     height: 40px;
     border: 2px solid #2C67FF;
 }

 #gain-org-user-profile-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 #gain-navbar .gain-org-user-avatar {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     overflow: hidden;
 }

 #gain-navbar .gain-org-user-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* ── Logged-in user trigger ──────────────────────────────────── */
 #gain-navbar #nb-user-buttons {
     position: relative;
     margin-left: auto;
 }

 #gain-navbar #nb-user-buttons.nb-visible {
     display: flex;
     align-items: center;
     justify-content: flex-end;
 }

 #gain-navbar .gain-org-action {
     position: relative;
 }

 #gain-navbar .gain-org-profile {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 6px 10px;
     border-radius: 999px;
     cursor: pointer;
     transition: background 0.15s ease, box-shadow 0.15s ease;
 }

 
 #gain-navbar .gain-org-profile-name {
     display: flex;
     align-items: center;
 }

 #gain-navbar .gain-org-profile-name {
     color: inherit;
 }

 #gain-navbar .gain-org-profile-header {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
 }

 #gain-navbar .gain-org-profile-header h4 {
    padding-bottom: 0;
     margin: 0;
     font-size: 14px;
     font-weight: 600;
     line-height: 1.1;
     color: #1D1F1E;
 }

 #gain-navbar .gain-org-arrow-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     transform-origin: center;
     font-size: 13px;
     transition: transform .3s ease;
 }

 #gain-navbar .gain-org-action.active .gain-org-arrow-icon {
     transform: rotate(180deg);
 }

 #gain-navbar .gain-org-menu {
     position: absolute;
     right: -10px;
     top: 58px;
     width: 320px;
     background: #fff;
     border-radius: 10px;
     box-shadow: 0 10px 35px rgba(0, 0, 0, .12);
     overflow: hidden;
     opacity: 0;
     visibility: hidden;
     transition: .3s ease;
     z-index: 999;
 }

 #gain-navbar .gain-org-menu.active {
     top: 48px;
     opacity: 1;
     visibility: visible;
 }

 #gain-navbar .gain-org-menu::before {
     content: "";
     position: absolute;
     right: 32px;
     top: -8px;
     width: 16px;
     height: 16px;
     background: #fff;
     transform: rotate(45deg);
 }

 #gain-navbar .gain-org-menu-title {
     margin: 0;
     padding: 24px 24px 16px;
     color: #5C5D76;
     font-family: 'Poppins', sans-serif;
     font-size: 16px;
     font-weight: 600;
     line-height: 1;
 }

 #gain-navbar .gain-org-organization-list {
     max-height: 260px;
     overflow-y: auto;
     overflow-x: hidden;
     overscroll-behavior: contain;
     scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: thin;
     scrollbar-color: #b8b8c7 transparent;
 }

 #gain-navbar .gain-org-organization-list::-webkit-scrollbar {
     width: 6px;
 }

 #gain-navbar .gain-org-organization-list::-webkit-scrollbar-track {
     background: transparent;
 }

 #gain-navbar .gain-org-organization-list::-webkit-scrollbar-thumb {
     background: #b8b8c7;
     border-radius: 999px;
 }

 #gain-navbar .gain-org-organization-list::-webkit-scrollbar-thumb:hover {
     background: #9797a8;
 }

 #gain-navbar .gain-org-organization-list .gain-org-organization-item {
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 14px 24px;
     border-top: 1px solid #ececec;
 }

 #gain-navbar .gain-org-organization-list .gain-org-organization-item:first-child {
     border-top: none;
 }

 #gain-navbar .gain-org-organization-avatar-wrapper {
     flex: 0 0 auto;
     width: 46px;
     height: 46px;
 }

 #gain-navbar .gain-org-organization-item img {
     width: 46px;
     height: 46px;
     border-radius: 50%;
     object-fit: cover;
 }

 #gain-navbar .gain-org-organization-avatar {
     width: 46px;
     height: 46px;
     border-radius: 50%;
     background: #2946b6;
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
 }

 #gain-navbar .gain-org-organization-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 50%;
 }

 #gain-navbar .gain-org-organization-info h4 {
     font-size: 16px;
     color: #2d2d55;
     margin-bottom: 2px;
 }

 #gain-navbar .gain-org-organization-info p {
     color: #8b8ba3;
     font-size: 14px;
 }

 #gain-navbar .gain-org-primary-btn {
     width: calc(100% - 48px);
     margin: 18px 24px 12px;
     border: none;
     border-radius: 8px;
     background: #2C67FF;
     color: #fff;
     padding: 8px;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
 }

 #gain-navbar .gain-org-primary-btn i {
     margin-right: 10px;
 }

 #gain-navbar .gain-org-primary-btn:hover {
     background: #2f57dd;
 }

 #gain-navbar .gain-org-secondary-btn {
     width: calc(100% - 48px);
     margin: 0 24px 22px;
     border: 1px solid #d8dcef;
     border-radius: 8px;
     background: #fff;
     color: #2C67FF;
     padding: 8px 25px;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
 }

 #gain-navbar .gain-org-secondary-btn i {
     margin-right: 10px;
 }

 #gain-navbar .gain-org-secondary-btn:hover {
     background: #f7f9ff;
 }

 #gain-navbar .gain-org-menu-footer {
     border-top: 1px solid #ececec;
     padding: 18px 24px;
 }

 #gain-navbar .gain-org-menu-footer a {
     color: #565670;
     text-decoration: none;
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 16px;
     font-weight: 500;
 }

 /* ── Fade-in for user buttons on success ─────────────────────── */
 #nb-user-buttons.nb-visible {
     animation: nb-fade-in 0.3s ease-out;
 }

 @keyframes nb-fade-in {
     from {
         opacity: 0;
         transform: translateY(4px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* ── Mobile skeletons are hidden on desktop and vice versa ───── */
 @media (min-width: 981px) {

     .nb-skeleton--mobile-login,
     .nb-skeleton--mobile-cta {
         display: none;
     }
 }

 /* ── User skeleton visible on mobile only ───────────────────── */
 @media (max-width: 980px) {
     #nb-user-skeleton {
         display: flex;
         align-items: center;
         margin-left: auto;
     }
 }

 @media (min-width: 981px) {
     #nb-user-skeleton {
         display: none;
     }
 }



 /* ── RESPONSIVE ── */
 @media (max-width: 980px) {

     /* navbar.css hides every .nb-right at this width; re-enable the
        navbar's own right rail so the logged-in avatar can sit in the
        top bar beside the hamburger. Only #nb-user-buttons stays shown
        (the rule below hides the other children). */
     #gain-navbar .nb-right {
         display: flex;
         align-items: center;
     }

     #gain-navbar .nb-center,
     #gain-navbar .nb-right > *:not(#nb-user-buttons) {
         display: none;
     }

     #gain-navbar .nb-hamburger {
         display: flex;
         margin-left: 10%;
     }

     #gain-navbar .nb-logo {
         margin-right: 0;
     }

     #gain-navbar #nb-user-buttons.nb-visible {
         display: flex !important;
         align-items: center;
     }

     #gain-navbar .gain-org-profile-name {
         display: none;
     }

     /* Anchor the dropdown to the full-width nav bar (.nb-nav is the
        positioned ancestor) rather than the tiny avatar wrapper, so it
        right-aligns and floats over the page as an overlay below the bar —
        outside the nav flow and always on-screen. */
     #gain-navbar #nb-user-buttons,
     #gain-navbar .gain-org-action {
         position: static;
     }

     #gain-navbar .gain-org-menu {
         top: calc(100% + 10px);
         right: -5px;
         left: auto;
         transform: none;
         width: min(320px, calc(100vw - 24px));
         max-height: 75vh;
         overflow-y: auto;
         z-index: 1000;
     }

     #gain-navbar .gain-org-menu.active {
         top: calc(100% + 6px);
     }

     /* No pointer arrow when the panel is anchored to the bar edge. */
     #gain-navbar .gain-org-menu::before {
         display: none;
     }
 }

 /* ── FOCUS ── */
 #gain-navbar :focus-visible,
 .nb-drawer :focus-visible {
     outline: 2px solid #149365;
     outline-offset: 2px;
     border-radius: 4px;
 }

 /* ── DRAWER ALL LINKS — blanket high-priority reset ── */
 .nb-drawer a,
 .nb-drawer a:link,
 .nb-drawer a:visited {
     text-decoration: none;
 }