/* ── UserMenuDropdown — global (teleported popover fix) ── */

/* Trigger button on the top bar */
.user-menu-trigger {
	appearance: none;
	background: transparent;
	padding: 6px 12px;
	border-radius: var(--border-radius-sm);
	border: 1px solid var(--color-gray-400);
	text-transform: none;
	color: var(--color-gray-900);
	cursor: pointer;
}

.user-menu-trigger .mud-button-label {
	display: inline-flex;
	align-items: center;
	text-transform: none;
}

body.dark .user-menu-trigger {
	color: var(--color-gray-100);
	border-color: var(--color-gray-700);
}

/* Avatar initials circle */
.user-initials {
	background: var(--gradient-primary);
	color: var(--color-white);
	font-size: 0.75rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.03em;
}

/* Display name next to avatar */
.user-display-name {
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.8rem;
	font-weight: var(--font-weight-medium);
	margin-left: 0.5rem;
	margin-right: 0.25rem;
}

.chevron-icon {
	font-size: 1rem;
}

.impersonation-trigger-icon {
	display: inline-flex;
	align-items: center;
	margin-right: 0.25rem;
}

/* Popover (teleported — only reachable via global CSS) */
.user-menu-popover {
	border: 1px solid var(--color-gray-400);
}

body.dark .user-menu-popover {
	border-color: var(--color-gray-400);
}

/* Popover container width */
.user-menu .mud-menu-container {
	min-width: 288px;
}

/* Header item inside the popover */
.topbar-menu-header-item.mud-menu-item {
	padding: 0.75rem 1rem 0.5rem;
	opacity: 1;
	cursor: default;
}

.topbar-menu-header-item.mud-menu-item .mud-menu-item-text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.topbar-menu-name {
	color: var(--color-gray-900);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
}

body.dark .topbar-menu-name {
	color: var(--color-gray-100);
}

.topbar-menu-email {
	color: var(--color-gray-700);
	font-size: 0.78rem;
	max-width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.dark .topbar-menu-email {
	color: var(--color-gray-400);
}

/* Action items */
.menu-action-item.mud-menu-item {
	padding: 0.8rem 1rem;
}

.menu-action-item.danger {
	color: var(--color-error);
}

body.dark .menu-action-item.danger {
	color: var(--color-error-light);
}