/* Sticky topbar */
        .topbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: var(--background);
            padding: 0.5rem 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border);
            z-index: 1000;
        }

        body {
            margin-top: 70px; /* Push page content below navbar */
        }

        .nav-links a,
        .nav-links button {
            margin-left: 1rem;
        }

        .nav-links form {
            display: inline;
        }
        /* Dropdown container */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Button showing user's last name */
.dropdown-button {
    background: transparent;
    border: none;
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    font-size: 1rem;
    color: inherit;
}

/* The dropdown menu box */
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    min-width: 180px;
    background: var(--background-body);  /* matches Water.css */
    border: 1px solid var(--border); /* soft border like Water.css */
    border-radius: 8px;
    padding: 0.4rem 0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15); /* gentle shadow */
    z-index: 999;
}

/* Menu items */
.dropdown-content a,
.dropdown-content button {
    display: block;
    width: 100%;
    padding: 0.6rem 1rem;
    background: none;
    border: none;
    font-size: 0.95rem;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

/* Hover effect that matches Water.css */
.dropdown-content a:hover,
.dropdown-content button:hover {
    background: var(--background);
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Remove spacing from logout form */
.dropdown form {
    margin: 0;
}

/* Make Logout red if desired */
.dropdown-logout {
    color: #b44;
}