/*
 * 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;
    /* Both lines hug the avatar. Needed once .profile-status got a max-width:
       stretched children would leave the clamped status line flush LEFT while
       the name stayed right, against the parent's text-align: right. */
    align-items: flex-end;
}
.profile-username {
    font-weight: 600;
    font-size: calc(var(--user-font-size, 1rem) * 1.0);
}
/* "Job title > Role". Someone can hold several roles, so this line has no
   natural length limit — clamp it and let the title attribute carry the full
   text, rather than letting the header grow to fit an outlier.

   Flex rather than one ellipsis on the whole line so the two halves can be
   given different priorities: the role list is the part that runs long (people
   hold several), so it is the only one that yields. A single ellipsis over the
   whole line was tried first and clipped BOTH halves — a five-role user was
   left reading "Chief E..." for a title that easily fit. */
.profile-status {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    max-width: 34ch;
    overflow: hidden;   /* belt and braces: nothing here may widen the header */
    /* text-transform: capitalize was here while this element was always empty.
       Now that it holds real text it would rewrite "Chief of Financial
       Operations" as "Chief Of Financial Operations" — both halves are stored
       already cased (typed job titles, business.roles.name), so leave them be. */
    filter: brightness(0.7);
    font-size: calc(var(--user-font-size, 1rem) * 0.8);
}
.light-theme .profile-status { filter: brightness(1.3); }
.profile-job-title,
.profile-role {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Never shrinks for the role's sake (flex-shrink 0); max-width is what still
   truncates it when the title ALONE is longer than the line. */
.profile-job-title { flex: 0 0 auto; max-width: 100%; }
.profile-role      { flex: 0 1 auto; }
.profile-status-sep {
    flex: 0 0 auto;
    margin: 0 0.35em;
    opacity: 0.6;
}
/* Narrow header: ui.responsive.css already lets the site title shrink to keep
   this menu on screen — don't spend that space on the status line. */
@media (max-width: 768px) {
    .profile-status { max-width: 16ch; }
}

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