/**
 * [abpl_account] header widget -- compact, theme-agnostic. Deliberately
 * self-contained (depends only on abpl-core.css for the brand color
 * variables): this is meant to sit inside an arbitrary theme's own header
 * or menu, on every page of the site, not inside an ABPL dashboard page,
 * so it must never assume abpl-app.css or abpl-auth.css are also loaded.
 */

.abpl-account-widget {
	display: inline-flex;
	align-items: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Bengali", sans-serif;
	font-size: 14px;
	line-height: 1.4;
}

.abpl-account-widget__login {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--abpl-primary, #0f766e);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
	transition: background var(--abpl-speed, 220ms);
}

.abpl-account-widget__login:hover,
.abpl-account-widget__login:focus {
	background: var(--abpl-primary-dark, #115e59);
	color: #fff;
}

.abpl-account-widget__menu {
	position: relative;
}

.abpl-account-widget__trigger {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px 5px 5px;
	border-radius: 999px;
	border: 1px solid rgba(15, 23, 42, .12);
	background: #fff;
	color: #111827;
	user-select: none;
}

.abpl-account-widget__trigger::-webkit-details-marker {
	display: none;
}

.abpl-account-widget__trigger::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-left: 2px;
	opacity: .55;
	flex-shrink: 0;
}

.abpl-account-widget__avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--abpl-primary, #0f766e);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	flex-shrink: 0;
}

.abpl-account-widget__name {
	font-weight: 600;
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.abpl-account-widget__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 190px;
	background: #fff;
	border-radius: 12px;
	border: 1px solid rgba(15, 23, 42, .08);
	box-shadow: 0 8px 28px rgba(15, 23, 42, .14);
	padding: 8px;
	z-index: 9999;
}

.abpl-account-widget__role {
	padding: 6px 10px 8px;
	font-size: 12px;
	color: #64748b;
	border-bottom: 1px solid rgba(15, 23, 42, .06);
	margin-bottom: 4px;
}

.abpl-account-widget__item {
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	color: #111827;
	text-decoration: none;
	font-size: 14px;
}

.abpl-account-widget__item:hover,
.abpl-account-widget__item:focus {
	background: var(--abpl-bg, #f6f8fb);
	color: #111827;
}

.abpl-account-widget__item--danger {
	color: var(--abpl-danger, #dc2626);
}

.abpl-account-widget__item--danger:hover,
.abpl-account-widget__item--danger:focus {
	background: #fef2f2;
	color: var(--abpl-danger, #dc2626);
}