/**
 * ABA LMS — header account menu.
 *
 * Loaded on every page (the header is everywhere), so it is self-contained:
 * it does not rely on frontend.css tokens, which only load on LMS pages.
 * Colours come from Settings → Design through --abalms-hacc-primary.
 */

.abalms-hacc {
	--abalms-hacc-primary: #4338ca;
	--abalms-hacc-primary-dark: #312e81;
	--abalms-hacc-ink: #0f172a;
	--abalms-hacc-muted: #64748b;
	--abalms-hacc-line: #e2e8f0;
	--abalms-hacc-soft: #f1f5f9;

	position: relative;
	display: flex;
	align-items: center;
	color-scheme: light;
	font-size: 15px;
	line-height: 1.4;
}

.abalms-hacc__menu { position: relative; margin: 0; }

.abalms-hacc__trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: 42px;
	padding: 8px 16px;
	border: 1.5px solid var(--abalms-hacc-primary);
	border-radius: 999px;
	background: var(--abalms-hacc-primary);
	color: #fff;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.abalms-hacc__trigger::-webkit-details-marker { display: none; }
.abalms-hacc__trigger::marker { content: ""; }
.abalms-hacc__trigger:hover { background: var(--abalms-hacc-primary-dark); border-color: var(--abalms-hacc-primary-dark); }
.abalms-hacc__trigger:focus-visible { outline: 3px solid color-mix(in srgb, var(--abalms-hacc-primary) 40%, transparent); outline-offset: 2px; }

/* Signed in: a quieter outlined pill with the student's initials. */
.abalms-hacc__trigger--user {
	padding-block: 5px;
	padding-inline: 5px 12px;
	background: #fff;
	color: var(--abalms-hacc-ink);
	border-color: var(--abalms-hacc-line);
}
.abalms-hacc__trigger--user:hover { background: var(--abalms-hacc-soft); border-color: var(--abalms-hacc-line); }

.abalms-hacc__icon,
.abalms-hacc__trigger svg { flex: none; }
.abalms-hacc__caret { color: var(--abalms-hacc-muted); transition: transform .15s ease; }
.abalms-hacc__menu[open] .abalms-hacc__caret { transform: rotate(180deg); }

.abalms-hacc__label--short { display: none; }

.abalms-hacc__avatar {
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: 32px;
	block-size: 32px;
	border-radius: 50%;
	background: var(--abalms-hacc-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}
.abalms-hacc__avatar--lg { inline-size: 42px; block-size: 42px; font-size: 15px; }

/* Panel. */
.abalms-hacc__panel {
	position: absolute;
	inset-block-start: calc(100% + 10px);
	inset-inline-end: 0;
	z-index: 100000;
	inline-size: 300px;
	padding: 18px;
	background: #fff;
	color: var(--abalms-hacc-ink);
	border: 1px solid var(--abalms-hacc-line);
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
	text-align: start;
}

.abalms-hacc__title { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--abalms-hacc-ink); }
.abalms-hacc__text { margin: 0 0 14px; font-size: 14px; color: var(--abalms-hacc-muted); }
.abalms-hacc__hint {
	margin: 12px 0 0;
	padding-block-start: 12px;
	border-block-start: 1px solid var(--abalms-hacc-line);
	font-size: 13px;
	color: var(--abalms-hacc-muted);
}

.abalms-hacc__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 46px;
	padding: 10px 16px;
	border: 1.5px solid var(--abalms-hacc-primary);
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none !important;
	transition: background-color .15s ease, color .15s ease;
}
.abalms-hacc__btn + .abalms-hacc__btn { margin-block-start: 10px; }
.abalms-hacc__btn--primary,
.abalms-hacc__btn--primary:visited { background: var(--abalms-hacc-primary); color: #fff !important; }
.abalms-hacc__btn--primary:hover { background: var(--abalms-hacc-primary-dark); border-color: var(--abalms-hacc-primary-dark); }
.abalms-hacc__btn--ghost,
.abalms-hacc__btn--ghost:visited { background: #fff; color: var(--abalms-hacc-primary) !important; }
.abalms-hacc__btn--ghost:hover { background: color-mix(in srgb, var(--abalms-hacc-primary) 8%, #fff); }

.abalms-hacc__who {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-block-end: 14px;
	margin-block-end: 8px;
	border-block-end: 1px solid var(--abalms-hacc-line);
}
.abalms-hacc__who-text { display: grid; min-inline-size: 0; }
.abalms-hacc__name { font-weight: 700; color: var(--abalms-hacc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abalms-hacc__email { font-size: 13px; color: var(--abalms-hacc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; unicode-bidi: plaintext; }

.abalms-hacc__links { display: grid; gap: 2px; }
.abalms-hacc__link,
.abalms-hacc__link:visited {
	display: flex;
	align-items: center;
	gap: 10px;
	min-block-size: 44px;
	padding: 8px 10px;
	border-radius: 10px;
	color: var(--abalms-hacc-ink) !important;
	font-weight: 600;
	text-decoration: none !important;
}
.abalms-hacc__link svg { color: var(--abalms-hacc-muted); flex: none; }
.abalms-hacc__link:hover { background: var(--abalms-hacc-soft); }
.abalms-hacc__link:hover svg { color: var(--abalms-hacc-primary); }
.abalms-hacc__link--out,
.abalms-hacc__link--out:visited { margin-block-start: 6px; border-block-start: 1px solid var(--abalms-hacc-line); border-radius: 0 0 10px 10px; color: #b91c1c !important; }
.abalms-hacc__link--out svg { color: #b91c1c; }

/* Door arrows point "in" / "out" of the reading direction. */
[dir="rtl"] .abalms-hacc__dir { transform: scaleX(-1); }

/* Edubin separates header items with a 40px gap — too wide once a labelled
   button joins the icons on a small screen. */
@media (max-width: 1199px) {
	.site-header .edubin-header-right-side:has(.abalms-hacc) { gap: 22px; }
}

/* Phones: short label, and the panel becomes a full-width sheet under the
   header (JS sets --abalms-hacc-top from the button's position). */
@media (max-width: 767px) {
	/* The theme also pads the menu toggle (30px) and the whole group (27px);
	   on a 360px phone that pushed the toggle off-screen once this joined it. */
	.site-header .edubin-header-right-side:has(.abalms-hacc) { gap: 12px; margin-inline: 12px 0; }
	.site-header .edubin-header-right-side:has(.abalms-hacc) > .hamburger-icon { margin-inline: 0; }

	.abalms-hacc__trigger { min-block-size: 40px; padding: 7px 13px; gap: 6px; font-size: 14px; }
	.abalms-hacc__trigger--user { padding-block: 4px; padding-inline: 4px 10px; }
	.abalms-hacc__label--long { display: none; }
	.abalms-hacc__label--short { display: inline; }

	.abalms-hacc__panel {
		position: fixed;
		inset-block-start: var(--abalms-hacc-top, 76px);
		inset-inline: 12px;
		inline-size: auto;
		max-block-size: calc(100dvh - var(--abalms-hacc-top, 76px) - 12px);
		overflow-y: auto;
	}
}

@media (max-width: 340px) {
	.abalms-hacc__trigger--user .abalms-hacc__label { display: none; }
	.abalms-hacc__trigger--user { padding-inline: 4px 8px; }
}