/**
 * Header widget (email + avatar dropdown), the guest "Sign in with
 * Google" button, the gated-page sign-in card, and the sign-in error
 * banner. Uses the theme's own design tokens (--space-*, --radius-*,
 * --color-*) so it matches the rest of the site without its own theme.
 */

.client-login-google-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.client-login-google-btn__logo {
	flex-shrink: 0;
}

.client-login-not-configured {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

/* Persistent top-bar guest state while sign-in isn't offered yet
   (context 'header', see appiappi_client_login_render_header_widget())
   — both the plain text/button and the person-icon toggle are always
   in the DOM; only one is ever visible, picked by the exact same
   1024px breakpoint the theme's own primary-nav/hamburger swap uses
   (layout.css), so this never disagrees with what a visitor's screen
   already shows for site navigation. */
@media (max-width: 1023.98px) {
	.client-login-header-signin {
		display: none;
	}
}

@media (min-width: 1024px) {
	.header-actions > .client-login-mobile-toggle {
		display: none;
	}
}

/* ---------- Logged-in header widget ---------- */

.client-login-widget {
	position: relative;
}

.client-login-widget__trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: none;
	border: none;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-neutral-800);
	cursor: pointer;
}

.client-login-widget__trigger:hover,
.client-login-widget__trigger[aria-expanded="true"] {
	background: var(--color-bg-subtle);
}

.client-login-widget__avatar {
	width: 28px;
	height: 28px;
	padding: 5px;
	border-radius: var(--radius-full);
	background: var(--color-primary-50);
	color: var(--color-primary);
	flex-shrink: 0;
}

.client-login-widget__email {
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.client-login-widget__caret {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: transform var(--transition-base);
}

.client-login-widget__trigger[aria-expanded="true"] .client-login-widget__caret {
	transform: rotate(180deg);
}

.client-login-widget__menu {
	position: absolute;
	top: calc(100% + var(--space-2));
	right: 0;
	min-width: 200px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	padding: var(--space-2);
	display: none;
	z-index: 50;
}

.client-login-widget__menu.is-open {
	display: block;
}

.client-login-widget__menu a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	color: var(--color-neutral-800);
}

.client-login-widget__menu a:hover {
	background: var(--color-bg-subtle);
	text-decoration: none;
}

.client-login-widget__menu a svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--color-text-muted);
}

.client-login-widget__logout {
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-1);
}

/* Inside the mobile slide-out nav panel, expand inline instead of
   floating — a full-width tap target and an inline menu read better in
   a narrow panel than a small floating dropdown would. */
@media (max-width: 1023.98px) {
	.mobile-nav__actions .client-login-widget {
		width: 100%;
	}

	.mobile-nav__actions .client-login-widget__trigger {
		width: 100%;
		justify-content: space-between;
		border: 1px solid var(--color-border);
		padding: var(--space-3);
	}

	.mobile-nav__actions .client-login-widget__menu {
		position: static;
		box-shadow: none;
		border: none;
		padding: 0;
		margin-top: var(--space-2);
	}

	/* The desktop top-bar instance (.header-actions), by contrast, has to
	   share a single cramped row with the logo and hamburger toggle —
	   collapses to just the avatar icon instead (was showing the full
	   email unclipped here, which could overflow the viewport on a long
	   address; the dropdown menu still shows the full email once opened,
	   only the closed trigger's label is hidden). */
	.header-actions .client-login-widget__email,
	.header-actions .client-login-widget__caret {
		display: none;
	}

	.header-actions .client-login-widget__trigger {
		padding: var(--space-2);
	}

	.header-actions .client-login-widget__menu {
		right: calc(-1 * var(--space-2));
	}
}

/* ---------- Mobile guest person-icon toggle ---------- */
/* Rendered only in the mobile nav panel, only while sign-in isn't
   actually being offered (appiappi_client_login_is_enabled() false) —
   see appiappi_client_login_render_mobile_guest_toggle(). Collapses
   what would otherwise be a permanent row of "not set up yet" text
   into a single icon, revealed on demand.

   Fixed 2026-09-13: the trigger's icon colour used to reference
   --color-neutral-700, which was never actually defined anywhere in
   tokens.css (the scale only goes …600, 800, 900) — a silently-invalid
   custom property falls back to inherited/initial, so the icon was
   rendering in whatever dark text colour it inherited instead of
   looking deliberately greyed-out/disabled as intended. Now uses
   --color-neutral-400 (an actual token, clearly muted) and — since this
   icon represents a feature that ISN'T active yet — stays that same
   grey in every state, including hover/expanded, rather than switching
   to the primary brand colour the way a normal enabled control would;
   only the background gets a faint hover/expanded tint, entirely within
   the same neutral/grey family, as tactile feedback that it's clickable
   without implying it does anything "active". The revealed content also
   moved from pushing the mobile nav's own layout open (inline
   grid-rows) to a floating card anchored just below the icon — nothing
   else in the menu shifts position when it opens or closes. */

.client-login-mobile-toggle {
	position: relative;
}

.client-login-mobile-toggle__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	background: var(--color-neutral-100);
	color: var(--color-neutral-400);
	cursor: pointer;
	transition: background var(--transition-base);
}

.client-login-mobile-toggle__trigger svg {
	width: 20px;
	height: 20px;
}

.client-login-mobile-toggle__trigger:hover,
.client-login-mobile-toggle__trigger[aria-expanded="true"] {
	background: var(--color-neutral-200);
}

.client-login-mobile-toggle__panel {
	position: absolute;
	top: calc(100% + var(--space-2));
	left: 0;
	z-index: 60;
	width: max-content;
	max-width: min(320px, calc(100vw - var(--space-8)));
	padding: var(--space-4);
	padding-top: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-white);
	box-shadow: var(--shadow-md);
	opacity: 0;
	transform: translateY(-6px) scale(0.98);
	transform-origin: top left;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.client-login-mobile-toggle__panel.is-open {
	opacity: 1;
	transform: translateY(0) scale(1);
	visibility: visible;
	pointer-events: auto;
}

.client-login-mobile-toggle__panel .client-login-not-configured {
	margin: 0;
	white-space: normal;
}

/* In the top bar specifically (.header-actions), match the logged-in
   state's own icon size there (.client-login-widget__avatar, 28px) —
   the 44px default above was sized for the spacious slide-out mobile
   nav, not this cramped row shared with the logo and hamburger button.
   The panel also anchors from the right instead of the left, since
   this icon normally sits near the right edge of a narrow viewport —
   opening left-anchored here would frequently run the panel off-screen. */
.header-actions .client-login-mobile-toggle__trigger {
	width: 28px;
	height: 28px;
}

.header-actions .client-login-mobile-toggle__trigger svg {
	width: 16px;
	height: 16px;
}

/* Fixed 2026-09-13: right: 0 here anchored the panel to the small
   icon's OWN position, not the viewport — but that icon sits well
   inset from the actual screen edge (past the hamburger button, the
   gap between them, and the container's own side padding), so the
   panel's far (left) edge — up to 320px away from that anchor — could
   land past the LEFT edge of a narrow phone screen entirely, hiding
   part of its own text off-screen. position: fixed anchors it to the
   viewport itself instead of that nested flex position, so it can
   never depend on exactly where the icon renders. */
.header-actions .client-login-mobile-toggle__panel {
	position: fixed;
	top: calc(var(--header-height) + var(--space-2));
	left: auto;
	right: var(--container-pad);
	max-width: calc(100vw - (var(--container-pad) * 2));
	transform-origin: top right;
}

.client-login-mobile-toggle__close {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: none;
	border: none;
	border-radius: var(--radius-full);
	color: var(--color-text-muted);
	cursor: pointer;
	transition: background var(--transition-base);
}

.client-login-mobile-toggle__close:hover {
	background: var(--color-bg-subtle);
}

.client-login-mobile-toggle__close svg {
	width: 16px;
	height: 16px;
}

/* ---------- Gated Dashboard/Profile page card ---------- */

.client-account-card {
	padding: var(--space-8);
}

.client-account-card__welcome {
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	color: var(--color-neutral-900);
	margin-bottom: var(--space-1);
}

.client-account-card__email {
	color: var(--color-text-muted);
	margin-bottom: var(--space-5);
}

.client-account-card--signin {
	text-align: center;
}

.client-account-card--signin p {
	margin-bottom: var(--space-5);
}

/* ---------- Sign-in error banner ---------- */

.client-login-error-banner {
	position: fixed;
	top: calc(var(--header-height) + var(--space-3));
	left: 50%;
	transform: translateX(-50%);
	z-index: 200;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	background: var(--color-danger);
	color: var(--color-white);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	font-size: var(--fs-sm);
	max-width: calc(100vw - var(--space-6));
}

.client-login-error-banner[hidden] {
	display: none;
}

.client-login-error-banner__close {
	background: none;
	border: none;
	color: inherit;
	font-size: 1.3em;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
}

/* ---------- Sitewide sidebar "Account" card ---------- */
/* page-sidebar/page-sidebar__card/page-sidebar__account are the
   theme's (components.css) — only the content inside is this plugin's. */

.sidebar-account__header {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.sidebar-account__avatar {
	width: 40px;
	height: 40px;
	padding: 8px;
	border-radius: var(--radius-full);
	background: var(--color-primary-50);
	color: var(--color-primary);
	flex-shrink: 0;
}

.sidebar-account__identity {
	min-width: 0;
}

.sidebar-account__name {
	font-weight: var(--fw-semibold);
	color: var(--color-neutral-900);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sidebar-account__email {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sidebar-account__links {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-4);
}

.sidebar-account__links a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	color: var(--color-neutral-800);
}

.sidebar-account__links a:hover {
	background: var(--color-bg-subtle);
	text-decoration: none;
}

.sidebar-account__links svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--color-text-muted);
}

.sidebar-account__title {
	font-weight: var(--fw-semibold);
	color: var(--color-neutral-900);
	margin-bottom: var(--space-2);
}

.sidebar-account__hint {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-4);
}