/*
 * Profile Menu Control
 * Rendered by partials/controls/profile-menu.php
 */

/* ── Wrapper ──────────────────────────────────────────────────── */
.profile-menu-ctrl {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

/* ── Site header flex layout ──────────────────────────────────── */
.site-header .site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1rem;
}
.site-header .site-header-title {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.site-header .site-header-title h1 {
    margin: 0;
    /*font-size: calc(var(--user-font-size, 1rem) * 1.25);*/
    white-space: nowrap;
}
.site-header .site-header-title h2 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 400;
    opacity: 0.6;
    white-space: nowrap;
}

/* ── Trigger button ───────────────────────────────────────────── */
.profile-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
    width: 100%;
}
.dark-theme  .profile-btn         { color: #8a8a8a; }
.dark-theme  .profile-btn:hover,
.dark-theme  .profile-btn:focus   { color: #fff; }
.light-theme .profile-btn         { color: #626262; }
.light-theme .profile-btn:hover,
.light-theme .profile-btn:focus   { color: #282828; }

.profile-btn > :first-child { flex: 1 1 auto; text-align: right; }

/* ── Account info ─────────────────────────────────────────────── */
.profile-account {
    display: flex;
    flex-direction: column;
}
.profile-username {
    font-weight: 600;
    font-size: calc(var(--user-font-size, 1rem) * 1.0);
}
.profile-status {
    text-transform: capitalize;
    filter: brightness(0.7);
}
.light-theme .profile-status { filter: brightness(1.3); }

/* ── Avatar ───────────────────────────────────────────────────── */
.profile-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    border-width: 2px;
    border-style: solid;
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* LFG active: teal pulse */
.profile-avatar.lfg-active {
    border-color: #2dd4bf;
    animation: pm-pulse-lfg 1.6s ease-out infinite;
}
@keyframes pm-pulse-lfg {
    0%   { box-shadow: 0 0 0px  0px rgba(45, 212, 191, 0.7); }
    70%  { box-shadow: 0 0 12px 10px rgba(45, 212, 191, 0.2); }
    100% { box-shadow: 0 0 0px  0px rgba(45, 212, 191, 0); }
}

/* Tasks active: amber pulse (higher priority — applied when tasks active regardless of LFG) */
.profile-avatar.tasks-active {
    border-color: #f59e0b;
    animation: pm-pulse-tasks 1.6s ease-out infinite;
}
@keyframes pm-pulse-tasks {
    0%   { box-shadow: 0 0 0px  0px rgba(245, 158, 11, 0.7); }
    70%  { box-shadow: 0 0 12px 10px rgba(245, 158, 11, 0.2); }
    100% { box-shadow: 0 0 0px  0px rgba(245, 158, 11, 0); }
}

/* ── Dropdown ─────────────────────────────────────────────────── */
.profile-menu-ctrl .profile-dropdown {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    min-width: 170px;
    display: flex;
    flex-direction: column;
    z-index: var(--net-z-dropdown, 200);
    background: var(--net-bg-secondary, #1e1e2e);
    border: 1px solid var(--net-border-accent, #3a4354);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 0.3rem 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.profile-menu-ctrl .profile-dropdown.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ── Menu items ───────────────────────────────────────────────── */
.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    font-size: calc(var(--user-font-size, 1rem) * 0.9);
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    color: var(--net-text-primary, #e0e0e0);
    white-space: nowrap;
}
.profile-menu-item:hover,
.profile-menu-item:focus {
    background: rgba(255, 255, 255, 0.07);
    outline: none;
}
.light-theme .profile-menu-item:hover,
.light-theme .profile-menu-item:focus {
    background: rgba(0, 0, 0, 0.06);
}

.profile-menu-ctrl .divider {
    margin: 0.25rem 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.light-theme .profile-menu-ctrl .divider {
    border-top-color: rgba(0, 0, 0, 0.1);
}