/* Navbar module — themed via /theme/components.css.
   This file only adds navbar-specific tweaks.

   Note: the .navbar uses position: sticky; top: 0; so it stays in
   document flow and does NOT require body padding-top. The old
   rule `body { padding-top: 64px }` was needed when the navbar
   was position: fixed; it created a 64px white strip above the
   navbar on some pages, so it was removed. */

.navbar-nav {
    flex-direction: row;
}

.navbar-nav .nav-item {
    margin-left: 0;
}

.navbar-nav .dropdown-toggle::after {
    display: none;
}

.user-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--gradient-brand) no-repeat;
    background-position: center;
    background-size: calc(100% + 2px) calc(100% + 2px);
    color: var(--color-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    border: 1px solid var(--color-border-strong);
}

.user-icon--image {
    background-size: cover;
    background-position: center;
    color: transparent;
}

#user-menu .dropdown-menu {
    right: 0;
    padding: var(--space-2);
    min-width: 200px;
}

#user-menu .user-icon {
    margin-right: 0;
}

/* Sign Up CTA in the navbar: solid secondary color, dark text.
   Uses --color-secondary (cyan) with --color-text-inverse (dark)
   so it stands out on the dark navbar without being illegible. */
.vps-navbar-cta {
    background: var(--color-secondary);
    color: var(--color-text-inverse) !important;
    border: 1px solid var(--color-secondary);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-2) var(--space-4);
}

.vps-navbar-cta:hover,
.vps-navbar-cta:focus {
    background: var(--color-secondary-200) !important;
    color: var(--color-text-inverse) !important;
    border-color: var(--color-secondary-200);
    box-shadow: var(--shadow-glow-secondary);
    text-decoration: none;
}

/* Back button (used on auth pages) sits ABOVE the sticky navbar. */
.vps-back-btn {
    position: fixed;
    top: calc(var(--navbar-height) + var(--space-3));
    left: var(--space-4);
    z-index: calc(var(--z-navbar) + 1);
}