/*
 * Profile menu - the header's name + picture + dropdown (php/partials/controls/profile-menu.php),
 * after the estate's ui.profile-menu.css. Also the avatar itself (.dp-avatar: a picture, or
 * initials on a disc) wherever it is shown, and the "You" editor (partials/blocks/profile-you.php).
 */

/* ── Avatar: picture or initials ─────────────────────────────── */
.dp-avatar {
    width: 36px; height: 36px; flex: 0 0 auto;
    border-radius: 50%; object-fit: cover; object-position: center;
    border: 2px solid rgba(255, 255, 255, 0.35);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--net-color-primary); color: var(--net-color-on-accent, #fff);
    font-weight: 700; font-size: 0.8rem; letter-spacing: 0.02em; line-height: 1;
    user-select: none;
}
.dp-avatar.is-lg { width: 132px; height: 132px; font-size: 2.6rem; border-color: var(--net-border-accent); }

/* ── Wrapper + trigger ───────────────────────────────────────── */
.profile-menu-ctrl { position: relative; display: inline-block; flex-shrink: 0; }
.profile-btn {
    display: flex; align-items: center; gap: 0.55rem;
    background: none; border: none; cursor: pointer; padding: 0.15rem 0.25rem;
    color: inherit; font: inherit; opacity: 0.9;
    border-radius: var(--net-border-radius-base);
    transition: opacity 0.2s ease-in-out, background 0.2s ease-in-out;
}
.profile-btn:hover, .profile-btn:focus-visible, .profile-btn[aria-expanded="true"] { opacity: 1; background: rgba(255, 255, 255, 0.08); }
.profile-btn:hover .dp-avatar, .profile-btn[aria-expanded="true"] .dp-avatar { border-color: rgba(255, 255, 255, 0.7); }

.profile-account { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; text-align: right; line-height: 1.2; }
.profile-username { font-weight: 600; font-size: var(--net-font-size-sm); white-space: nowrap; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; }
/* "Job title > Access". The title is what runs long, so it is the half that yields. */
.profile-status { display: flex; align-items: baseline; justify-content: flex-end; max-width: 34ch; overflow: hidden; font-size: var(--net-font-size-xs); opacity: 0.7; }
.profile-job-title, .profile-role { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-job-title { flex: 0 1 auto; }
.profile-role { flex: 0 0 auto; }
.profile-status-sep { flex: 0 0 auto; margin: 0 0.35em; opacity: 0.6; }

/* ── Dropdown ────────────────────────────────────────────────── */
.profile-menu-ctrl .profile-dropdown {
    position: absolute; top: calc(100% + 0.35rem); right: 0; min-width: 180px;
    display: flex; flex-direction: column;
    z-index: var(--net-z-dropdown, 200);
    background: var(--net-bg-card); color: var(--net-text-primary);
    border: 1px solid var(--net-border-accent); border-radius: var(--net-border-radius-md);
    box-shadow: var(--net-shadow-lg);
    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[hidden] { display: none; }
.profile-menu-ctrl .profile-dropdown.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.site-header .profile-menu-item, .profile-menu-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 0.9rem; font-size: var(--net-font-size-sm);
    text-decoration: none; background: none; border: none; width: 100%; text-align: left; cursor: pointer;
    color: var(--net-text-primary); white-space: nowrap;
    transition: background 0.12s ease;
}
.profile-menu-item:hover, .profile-menu-item:focus { background: var(--net-bg-accent); outline: none; }
.profile-menu-ctrl .divider { margin: 0.25rem 0; border: none; border-top: 1px solid var(--net-border); }
/* Theme / Layout rows: a label and a segmented picker (dp_ui_picker). */
.profile-menu-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.35rem 0.9rem; font-size: var(--net-font-size-sm); }
.profile-menu-label { color: var(--net-text-muted); flex: 0 0 auto; }
.ui-pick small { font-weight: 400; opacity: 0.7; }

/* Narrow header: the picture alone is the button. */
@media (max-width: 600px) {
    .profile-account { display: none; }
    .profile-btn { padding: 0.1rem; }
}

/* ── The "You" editor ────────────────────────────────────────── */
.you-card { display: grid; grid-template-columns: max-content 1fr; gap: var(--net-spacing-lg); align-items: start; }
.you-pic { display: flex; flex-direction: column; align-items: center; gap: var(--net-spacing-sm); width: 190px; }
.you-pic-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; width: 100%; }
.you-pic-actions label.btn { cursor: pointer; justify-content: center; }
.you-pic-actions [hidden] { display: none; }
.you-pic-status { font-size: var(--net-font-size-xs); text-align: center; min-height: 1.2em; }
.you-fixed { margin: 1.6rem 0 0; }
@media (max-width: 700px) {
    .you-card { grid-template-columns: 1fr; }
    .you-pic { width: 100%; }
    .you-pic-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .you-fixed { margin-top: 0; }
}