/*
 * Profile menu (organiser + venue host), opened from the avatar in the navbar.
 * Sectioned list: label, then icon + text rows with hairline separators.
 * Desktop: dropdown panel. Phones (<=600px): full-screen sheet with a close button.
 * Loaded after navbar.css so it wins over the older .user-section-dropdown rules.
 */
.navbar .user-section-dropdown .profile-menu {
    --pm-text: #1E1E1E;
    --pm-muted: #7D7D7D;
    --pm-icon: var(--syi-color-primary, #0983B2);
    --pm-line: #ECECEC;
    --pm-hover: rgba(127, 206, 184, 0.25);
    --pm-hover-strong: rgba(127, 206, 184, 0.4);

    width: 340px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 16px 12px;
    border: 1px solid #E6E6E6;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    background: #fff;
    font-family: "Mont-Book", sans-serif;
    color: var(--pm-text);
}

/* ---------- header ---------- */
.profile-menu__header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 4px 16px;
    border-bottom: 1px solid var(--pm-line);
}

.profile-menu__avatar {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--syi-color-primary, #0983B2);
}

.profile-menu__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.profile-menu__name {
    font-family: "Mont-SemiBold", sans-serif;
    font-size: 17px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-menu__email {
    font-size: 14px;
    color: var(--pm-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-menu__role {
    margin-top: 4px;
    font-family: "Mont-SemiBold", sans-serif;
    font-size: 13px;
    color: var(--syi-color-primary, #0983B2);
}

.profile-menu__close {
    display: none; /* phones only */
    flex: none;
    align-self: flex-start;
    width: 40px;
    height: 40px;
    margin: -4px -8px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--pm-text);
    align-items: center;
    justify-content: center;
}

.profile-menu__close:hover,
.profile-menu__close:focus-visible {
    background: var(--pm-hover);
}

/* ---------- sections ---------- */
.profile-menu__section {
    padding: 14px 0 6px;
}

.profile-menu__label {
    padding: 0 4px 6px;
    font-family: "Mont-SemiBold", sans-serif;
    font-size: 14px;
    color: var(--pm-text);
}

/* ---------- rows ---------- */
.navbar .user-section-dropdown .profile-menu .profile-menu__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 48px;
    padding: 10px 8px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--pm-text);
    font-family: "Mont-Book", sans-serif;
    font-size: 16px;
    line-height: 1.3;
    text-align: left;
    white-space: normal;
    transition: background-color .15s ease, color .15s ease;
}

/* hairline between rows, inset so it doesn't touch the hover pill */
.profile-menu__section > .profile-menu__item + .profile-menu__item::before,
.profile-menu__section > .profile-menu__sub + .profile-menu__item::before,
.profile-menu__section > .profile-menu__item + .profile-menu__toggle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8px;
    right: 8px;
    border-top: 1px solid var(--pm-line);
}

.navbar .user-section-dropdown .profile-menu .profile-menu__item:hover,
.navbar .user-section-dropdown .profile-menu .profile-menu__item:focus-visible {
    background: var(--pm-hover);
    color: var(--pm-text);
    outline: none;
}

.navbar .user-section-dropdown .profile-menu .profile-menu__item:hover::before,
.navbar .user-section-dropdown .profile-menu .profile-menu__item:hover + .profile-menu__item::before,
.navbar .user-section-dropdown .profile-menu .profile-menu__item:focus-visible::before {
    border-color: transparent;
}

.navbar .user-section-dropdown .profile-menu .profile-menu__item:active {
    background: var(--pm-hover-strong);
}

.navbar .user-section-dropdown .profile-menu .profile-menu__item[aria-current="page"] {
    font-family: "Mont-SemiBold", sans-serif;
}

.navbar .user-section-dropdown .profile-menu .profile-menu__item[aria-current="page"] .profile-menu__icon {
    color: var(--syi-color-tertiary-selection-highlight, #CE5723);
}

.profile-menu__icon {
    flex: none;
    color: var(--pm-icon);
}

.profile-menu__text {
    flex: 1;
    min-width: 0;
}

.navbar .user-section-dropdown .profile-menu .profile-menu__item--cta,
.navbar .user-section-dropdown .profile-menu .profile-menu__item--cta .profile-menu__icon {
    color: var(--syi-color-tertiary-selection-highlight, #CE5723);
}

/* ---------- badges ---------- */
.navbar .user-section-dropdown .profile-menu .profile-menu__badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #BEDFFA;
    color: #0983B2;
    font-family: "Mont-SemiBold", sans-serif;
    font-size: 11px;
    line-height: 16px;
}

.navbar .user-section-dropdown .profile-menu .profile-menu__badge--count {
    min-width: 22px;
    justify-content: center;
    background: #F8B193;
    color: #CE5723;
}

.profile-menu__count {
    flex: none;
    font-size: 14px;
    color: var(--pm-muted);
}

/* ---------- Your Listings (collapsible) ---------- */
.profile-menu__chevron {
    display: inline-flex;
    flex: none;
    color: var(--pm-muted);
    transition: transform .2s ease;
}

.profile-menu__chevron .profile-menu__icon {
    color: inherit;
}

.profile-menu__toggle:not(.collapsed) .profile-menu__chevron {
    transform: rotate(180deg);
}

.profile-menu__sub {
    margin: 2px 0 6px 19px;
    padding-left: 16px;
    border-left: 1px solid var(--pm-line);
}

.navbar .user-section-dropdown .profile-menu .profile-menu__subitem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 8px;
    color: var(--pm-text);
    font-size: 15px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color .15s ease;
}

.navbar .user-section-dropdown .profile-menu .profile-menu__subitem:hover,
.navbar .user-section-dropdown .profile-menu .profile-menu__subitem:focus-visible {
    background: var(--pm-hover);
    outline: none;
}

.navbar .user-section-dropdown .profile-menu .profile-menu__subitem--add,
.navbar .user-section-dropdown .profile-menu .profile-menu__subitem--add .profile-menu__icon {
    color: var(--syi-color-tertiary-selection-highlight, #CE5723);
}

.profile-menu__subitem--add .profile-menu__icon {
    width: 18px;
    height: 18px;
}

/* ---------- logout ---------- */
.profile-menu__logout {
    margin: 4px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--pm-line);
}

/* ---------- phones: full-screen sheet ---------- */
@media only screen and (max-width: 600px) {
    .navbar .user-section-dropdown .profile-menu.show {
        position: fixed !important;
        inset: 0 !important;
        transform: none !important;
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin: 0 !important;
        padding: max(8px, env(safe-area-inset-top)) 20px max(16px, env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
        box-shadow: none;
        z-index: 1060;
    }

    .profile-menu__close {
        display: inline-flex;
    }

    .profile-menu__avatar {
        width: 60px;
        height: 60px;
    }

    .navbar .user-section-dropdown .profile-menu .profile-menu__item {
        min-height: 54px;
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-menu__chevron,
    .navbar .user-section-dropdown .profile-menu .profile-menu__item,
    .navbar .user-section-dropdown .profile-menu .profile-menu__subitem {
        transition: none;
    }
}

body.profile-menu-open {
    overflow: hidden;
}

/* With no Inbox link in the top bar, the avatar shows the unread count on desktop too. */
.navbar .user-section-dropdown .user-section .unread-message-counter {
    display: initial;
}

/* Desktop: while the menu is open, the page under the navbar is washed with a light
   white veil so the menu reads clearly but the platform stays visible behind it.
   It lives inside the dropdown (same stacking context as the menu, so it can sit
   just under it), and navbar.js sets its top edge to the navbar's bottom. */
.profile-menu-backdrop {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 999; /* .dropdown-menu is 1000 */
    background: rgba(255, 255, 255, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

.profile-menu-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

@media only screen and (max-width: 600px) {
    .profile-menu-backdrop {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-menu-backdrop {
        transition: none;
    }
}