/**
 * User account dropdown styles
 *
 * Shared by the public-site navbar for authenticated users. The dropdown
 * replaces the previous standalone red "Log Out" button with a premium
 * account menu that exposes Dashboard, Profile, Settings and Log Out.
 *
 * It reuses the same inverse colour tokens as the theme/language menus so
 * all dropdowns in the always-dark navigation bar feel visually consistent.
 */

/* Container anchors the absolute panel to the trigger. */
.user-menu {
    position: relative;
}

/* Dropdown panel: hidden by default, revealed via .user-menu-open. */
.user-menu-panel {
    display: none;
    overflow: hidden;

    background-color: var(--color-inverse-panel, #1e293b);
    border: 1px solid var(--color-inverse-line, #475569);
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.35);
}

.user-menu-panel.user-menu-open {
    display: block;
    animation: userMenuFadeIn 0.18s ease-out;
}

/* Individual menu option row. Works on both anchor links and buttons. */
.user-menu-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.875rem;
    border-radius: 0.625rem;
    color: var(--color-inverse-ink-secondary, #94a3b8);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-align: left;
    text-decoration: none;
    border: none;
    background: transparent;
}

.user-menu-option:hover,
.user-menu-option:focus-visible {
    background-color: var(--color-inverse-subtle, #334155);
    color: var(--color-inverse-ink, #f8fafc);
    outline: none;
}

/* Logout option receives a subtle danger tint to communicate its action. */
.user-menu-option.user-menu-logout:hover,
.user-menu-option.user-menu-logout:focus-visible {
    background-color: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

/* Avatar badge shown on the trigger. */
.user-menu-avatar {
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

button[data-action="user-menu"]:hover .user-menu-avatar,
button[data-action="user-menu"]:focus-visible .user-menu-avatar {
    background-color: var(--color-accent, #3b82f6);
    color: var(--color-inverse-ink, #f8fafc);
}

/* Chevron rotation when the menu is open. */
.user-menu-open .user-menu-chevron {
    transform: rotate(180deg);
}

/* Fade-in animation for the dropdown panel. */
@keyframes userMenuFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Desktop navbar variant: opens downward and aligns to the right of the
   trigger inside the premium action capsule. */
.navbar-user-menu .user-menu-panel {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    min-width: 14rem;
    width: 14rem;
    padding: 0.375rem;
    z-index: 50;
}

/* Mobile drawer variant: opens downward and fills the width of the drawer
   footer so it is easy to tap on small screens. */
.mobile-user-menu .user-menu-panel {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin-top: 0.5rem;
    padding: 0.375rem;
    width: 100%;
}