/* 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);
}

/* Auth actions (Login / Sign Up) must NOT stretch to the full navbar
   height: the desktop `.navbar .nav-link` rule sets
   `line-height: var(--navbar-height)` so a plain .btn inside the bar
   would grow 64px tall. Reset the line-height on buttons and let them
   keep a compact pill height. */
.navbar .nav-link.btn {
    line-height: 1.2;
    align-self: center;
    height: auto;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.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;
}

/* Light theme: keep the CTA readable (dark text on the cyan button). */
html[data-theme="light"] .vps-navbar-cta,
html[data-theme="light"] .vps-navbar-cta:hover,
html[data-theme="light"] .vps-navbar-cta:focus {
    color: var(--color-text) !important;
}

/* 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);
}