/* File path: /plugins/afed-membership-hierarchy/assets/css/portal.css */

/* AFED Member Portal - standalone front-end styling, no WP admin/theme dependency. */

:root {
	/* Overridden per-site via AFED Manager > Dashboard > Portal Branding
	   (see AFED_Portal_Router::print_theme_style()) - these are the
	   platform-wide defaults, matching AFED's actual brand (navy + AFED
	   red, as seen on lagos.afed.com.ng and the logo) rather than the
	   previous generic WordPress-blue placeholder.
	   UPDATED (redesign session): these two are deliberately NOT touched
	   by dark mode below - a State's chosen brand color should look the
	   same regardless of the visitor's theme preference. Only the
	   structural tokens (background/surface/text/border) respond to
	   dark mode. */
	--afed-primary: #16213e;
	--afed-primary-light: #24345c;
	--afed-accent: #c8202c;
	--afed-accent-dark: #a01822;
}

/* =======================================================================
   AFED DESIGN SYSTEM - structural tokens (redesign session)
   =======================================================================
   Unlike --afed-primary/--afed-accent above (per-tenant brand colors,
   intentionally untouched by theme), these adapt for dark mode - see the
   matching block in the Membership plugin's admin.css for the fuller
   explanation of the two dark-mode triggers. The portal DOES have one
   shared header (this file's own .afed-portal-header, rendered once by
   AFED_Portal_Router for every page) so it gets a REAL manual toggle -
   see .afed-theme-toggle below and afedPortalSetupThemeToggle() in
   portal.js.
   ======================================================================= */
:root {
	--afed-bg: #f3f4f6;
	--afed-surface: #ffffff;
	--afed-surface-alt: #f6f7f9;
	--afed-border: #e2e4e9;
	--afed-border-strong: #cbd0d8;
	--afed-text: #1a1d29;
	--afed-text-muted: #5b6270;
	--afed-text-faint: #8b93a1;

	--afed-primary-tint: #eef1f8;

	--afed-success: #1a7f37;
	--afed-success-bg: #e8f8ee;
	--afed-success-border: #b8e6c1;
	--afed-danger: #c8202c;
	--afed-danger-bg: #fce9ea;
	--afed-danger-border: #f3b6b6;
	--afed-warning: #9a6700;
	--afed-warning-bg: #fef6e7;
	--afed-warning-border: #f5ddaa;

	--afed-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.04);
	--afed-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
	--afed-radius: 10px;
	--afed-radius-sm: 6px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--afed-bg: #12141c;
		--afed-surface: #1a1d29;
		--afed-surface-alt: #21242f;
		--afed-border: #2e3240;
		--afed-border-strong: #3a3f4f;
		--afed-text: #e8e9ed;
		--afed-text-muted: #a3a9b8;
		--afed-text-faint: #767c8c;

		--afed-primary-tint: #232a3f;

		--afed-success: #4ade80;
		--afed-success-bg: rgba(74, 222, 128, 0.12);
		--afed-success-border: rgba(74, 222, 128, 0.3);
		--afed-danger: #f2555f;
		--afed-danger-bg: rgba(242, 85, 95, 0.12);
		--afed-danger-border: rgba(242, 85, 95, 0.3);
		--afed-warning: #eab84f;
		--afed-warning-bg: rgba(234, 184, 79, 0.12);
		--afed-warning-border: rgba(234, 184, 79, 0.3);

		--afed-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.25);
		--afed-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
	}
}

[data-theme="dark"] {
	--afed-bg: #12141c;
	--afed-surface: #1a1d29;
	--afed-surface-alt: #21242f;
	--afed-border: #2e3240;
	--afed-border-strong: #3a3f4f;
	--afed-text: #e8e9ed;
	--afed-text-muted: #a3a9b8;
	--afed-text-faint: #767c8c;

	--afed-primary-tint: #232a3f;

	--afed-success: #4ade80;
	--afed-success-bg: rgba(74, 222, 128, 0.12);
	--afed-success-border: rgba(74, 222, 128, 0.3);
	--afed-danger: #f2555f;
	--afed-danger-bg: rgba(242, 85, 95, 0.12);
	--afed-danger-border: rgba(242, 85, 95, 0.3);
	--afed-warning: #eab84f;
	--afed-warning-bg: rgba(234, 184, 79, 0.12);
	--afed-warning-border: rgba(234, 184, 79, 0.3);

	--afed-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.25);
	--afed-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
}
/* ======================================================================= */

* { box-sizing: border-box; }

body.afed-portal {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background: var(--afed-bg);
	color: var(--afed-text);
	line-height: 1.5;
}

.afed-portal-header {
	background: var(--afed-primary);
	color: var(--afed-surface);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 28px;
	flex-wrap: wrap;
	gap: 14px;
	box-shadow: var(--afed-shadow-md);
}

.afed-portal-brand {
	display: inline-flex;
	align-items: center;
	font-size: 18px;
	font-weight: 600;
	color: var(--afed-surface);
	text-decoration: none;
}

.afed-portal-brand span {
	font-weight: 400;
	opacity: 0.75;
	margin-left: 6px;
	font-size: 14px;
}

.afed-portal-brand-logo img {
	max-height: 54px;
	width: auto;
	display: block;
}

.afed-portal-header-right {
	display: flex;
	align-items: center;
	gap: 12px;
}

.afed-theme-toggle {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	cursor: pointer;
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	transition: background 0.15s ease;
}

.afed-theme-toggle:hover {
	background: rgba(255, 255, 255, 0.22);
}

.afed-theme-toggle-icon-dark {
	display: none;
}

[data-theme="dark"] .afed-theme-toggle-icon-light {
	display: none;
}

[data-theme="dark"] .afed-theme-toggle-icon-dark {
	display: block;
}

@media (prefers-color-scheme: dark) {
	.afed-theme-toggle-icon-light {
		display: none;
	}
	.afed-theme-toggle-icon-dark {
		display: block;
	}
	[data-theme="light"] .afed-theme-toggle-icon-light {
		display: block;
	}
	[data-theme="light"] .afed-theme-toggle-icon-dark {
		display: none;
	}
}

.afed-portal-header-user {
	position: relative;
}

.afed-portal-user-trigger {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: var(--afed-radius);
	transition: background 0.15s ease;
}

.afed-portal-user-trigger:hover,
.afed-portal-user-trigger[aria-expanded="true"] {
	background: rgba(255,255,255,.1);
}

.afed-portal-user-avatar {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--afed-accent);
	color: var(--afed-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
}

.afed-portal-user-info {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.3;
	max-width: 280px;
	text-align: right;
}

.afed-portal-user-name {
	color: var(--afed-surface);
	font-size: 14px;
	font-weight: 600;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.afed-portal-user-role {
	color: var(--afed-border-strong);
	font-size: 12px;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.afed-portal-user-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 200px;
	background: var(--afed-surface);
	border-radius: var(--afed-radius);
	box-shadow: var(--afed-shadow-md);
	overflow: hidden;
	z-index: 500;
}

.afed-portal-user-menu[hidden] {
	display: none;
}

.afed-portal-user-menu-link {
	display: block;
	padding: 12px 16px;
	color: var(--afed-text);
	text-decoration: none;
	font-size: 14px;
}

.afed-portal-user-menu-link:hover {
	background: var(--afed-surface-alt);
}

.afed-portal-user-menu-logout {
	color: var(--afed-danger);
	border-top: 1px solid var(--afed-border);
}

/* ---------------------------------------------------------------------
   Left sidebar nav (desktop) - Dashboard pinned at top, each group as a
   collapsible accordion drawer, Log Out pinned at bottom. Hidden below
   the mobile breakpoint in favor of .afed-portal-tabbar further down.
------------------------------------------------------------------------ */
.afed-portal-body-wrap {
	display: flex;
	align-items: flex-start;
}

.afed-portal-sidebar {
	width: 230px;
	flex-shrink: 0;
	background: var(--afed-primary);
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	padding: 16px 0;
	display: flex;
	flex-direction: column;
}

.afed-portal-sidebar-link {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--afed-border-strong);
	text-decoration: none;
	font-size: 14px;
	padding: 10px 20px;
	border-left: 3px solid transparent;
	transition: color 0.15s ease, background 0.15s ease;
}

.afed-portal-sidebar-link:hover {
	color: var(--afed-surface);
	background: rgba(255,255,255,.06);
}

.afed-portal-sidebar-link.active {
	color: var(--afed-surface);
	background: rgba(255,255,255,.08);
	border-left-color: var(--afed-accent);
}

.afed-portal-sidebar-top {
	margin-bottom: 6px;
}

.afed-portal-sidebar-logout {
	margin-top: auto;
	color: var(--afed-danger-border);
	border-top: 1px solid rgba(255,255,255,.12);
	padding-top: 16px;
}

.afed-portal-drawer-toggle {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	color: var(--afed-border-strong);
	font-size: 14px;
	padding: 10px 20px;
	cursor: pointer;
	border-left: 3px solid transparent;
	transition: color 0.15s ease, background 0.15s ease;
}

.afed-portal-drawer-toggle:hover {
	color: var(--afed-surface);
	background: rgba(255,255,255,.06);
}

.afed-portal-drawer.is-open > .afed-portal-drawer-toggle {
	color: var(--afed-surface);
}

.afed-portal-drawer-chevron {
	margin-left: auto;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.afed-portal-drawer.is-open > .afed-portal-drawer-toggle .afed-portal-drawer-chevron {
	transform: rotate(180deg);
}

.afed-portal-drawer-body {
	display: none;
	flex-direction: column;
}

.afed-portal-drawer.is-open > .afed-portal-drawer-body {
	display: flex;
}

/*
 * BUG FIX (mobile tab bar session): tapping a primary group tab
 * (Membership/Examinations/CBT/etc) on mobile clones JUST the
 * .afed-portal-drawer-body div - detached from its .afed-portal-drawer
 * parent - straight into .afed-portal-sheet-body (see
 * afedPortalSetupMobileTabbar() in portal.js). Without this rule, that
 * clone has no ".afed-portal-drawer.is-open" ancestor to satisfy the rule
 * above, so it silently inherited display:none from the base
 * .afed-portal-drawer-body rule and never showed - the sheet opened with
 * a title and a Close button but an empty body, exactly as if the group
 * had no links at all. Scoped to a DIRECT child of the sheet body only,
 * so it doesn't affect the "More" sheet's own nested drawers (those are
 * full .afed-portal-drawer clones one level deeper, with their own
 * is-open toggle wired by wireMiniAccordion() in portal.js).
 */
.afed-portal-sheet-body > .afed-portal-drawer-body {
	display: flex;
}

.afed-portal-drawer-body .afed-portal-sidebar-link {
	padding-left: 48px;
	font-size: 13px;
}

/* ---------------------------------------------------------------------
   Bottom mobile tab bar + "More" sheet - see the mobile breakpoint block
   further down for what makes the tab bar actually visible/fixed; here
   it's just display:none so it never shows on desktop.
------------------------------------------------------------------------ */
.afed-portal-tabbar {
	display: none;
}

.afed-portal-tab {
	all: unset;
	box-sizing: border-box;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	color: var(--afed-surface);
	font-size: 10px;
	padding: 7px 2px 8px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
}

.afed-portal-tab span {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * UPDATED (tab-bar contrast session): inactive tabs were var(--afed-text-faint) (a faint
 * gray, hard to read against the blue bar) - now plain white, matching
 * every inactive tab. The active tab stands out with red instead of white
 * (previously white === active, with no distinction from the now-white
 * inactive tabs) - same red already used for .is-error states elsewhere
 * in this stylesheet, for consistency rather than introducing a new hex.
 */
.afed-portal-tab.active {
	color: var(--afed-danger);
}

.afed-portal-sheet {
	position: fixed;
	inset: 0;
	z-index: 1000;
}

.afed-portal-sheet[hidden] {
	display: none;
}

.afed-portal-sheet-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.4);
}

.afed-portal-sheet-panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--afed-surface);
	border-radius: 16px 16px 0 0;
	max-height: 70vh;
	overflow-y: auto;
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.afed-portal-sheet-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--afed-border);
	position: sticky;
	top: 0;
	background: var(--afed-surface);
}

.afed-portal-sheet-title {
	font-weight: 600;
	font-size: 15px;
	color: var(--afed-text);
}

.afed-portal-sheet-close {
	all: unset;
	cursor: pointer;
	color: var(--afed-text-muted);
	display: flex;
	padding: 4px;
}

.afed-portal-sheet-body {
	padding: 8px 0 20px;
}

/* Content cloned into the sheet is styled for a white sheet background,
   not the dark sidebar it was copied from. */
.afed-portal-sheet-body .afed-portal-sidebar-link,
.afed-portal-sheet-body .afed-portal-drawer-toggle {
	color: var(--afed-text);
	border-left: none;
}

.afed-portal-sheet-body .afed-portal-sidebar-link:hover,
.afed-portal-sheet-body .afed-portal-drawer-toggle:hover {
	background: var(--afed-surface-alt);
}

.afed-portal-sheet-body .afed-portal-sidebar-link.active {
	background: var(--afed-primary-tint);
	color: var(--afed-primary);
	font-weight: 600;
}

body.afed-portal-sheet-open {
	overflow: hidden;
}

.afed-portal-main {
	flex: 1;
	min-width: 0;
	max-width: 1100px;
	margin: 0 auto;
	padding: 32px 24px 60px;
}

.afed-portal-main h1 {
	margin: 0 0 6px;
	font-size: 26px;
}

.afed-portal-lead {
	color: var(--afed-text-muted);
	margin: 0 0 24px;
}

.afed-portal-account-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 18px;
}

.afed-portal-account-badge {
	display: inline-block;
	background: var(--afed-primary-tint);
	color: var(--afed-primary);
	border: 1px solid var(--afed-border-strong);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
}

.afed-portal-cards {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.afed-portal-card {
	background: var(--afed-surface);
	border: 1px solid var(--afed-border);
	border-radius: var(--afed-radius);
	padding: 20px 24px;
	min-width: 140px;
	box-shadow: var(--afed-shadow);
}

.afed-portal-card-number {
	display: block;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--afed-primary);
}

.afed-portal-card-label {
	display: block;
	color: var(--afed-text-muted);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-top: 4px;
}

.afed-portal-quick-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}

.afed-portal-quick-actions .afed-btn {
	margin-top: 0;
}

.afed-portal-columns {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.afed-portal-column-main {
	flex: 2;
	min-width: 280px;
	overflow-x: auto;
}

.afed-portal-column-side {
	flex: 1;
	min-width: 260px;
	background: var(--afed-surface);
	border: 1px solid var(--afed-border);
	border-radius: var(--afed-radius);
	padding: 20px 24px;
}

.afed-portal-column-side h2 {
	margin-top: 0;
	font-size: 17px;
}

/* ---------------------------------------------------------------------
   Uniform form styling - applies to every form anywhere in the portal
   (Add/Edit School, Add Branch, Host an Event, Link a User, Login,
   Register...), not just the ones inside a sidebar column. Previously
   this block-display/spacing treatment only applied inside
   .afed-portal-column-side, which is why the Edit School page and the
   Events "Host a New Event" form (both rendered elsewhere on the page)
   showed every label/field crammed onto one line - fixed by scoping this
   to .afed-portal-main instead, plus a visual pass (rounder inputs, a
   focus ring, consistent spacing, styled checkboxes/selects) so every
   form on the platform now looks the same, deliberately, in one place.
------------------------------------------------------------------------ */
.afed-portal-main form label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	color: var(--afed-text);
	margin: 18px 0 6px;
}

.afed-portal-main form label:first-of-type {
	margin-top: 0;
}

.afed-portal-main form .afed-field-hint {
	display: block;
	font-weight: normal;
	font-size: 12px;
	color: var(--afed-text-muted);
	margin-top: 2px;
}

/*
 * ADDED (form controls session): a way for any form to flag a field as
 * invalid - either via the standard `aria-invalid="true"` attribute (the
 * accessible, semantic way) or the `.afed-field-invalid` class (for a
 * server-rendered form that already knows which field failed validation
 * before JS runs). Pairs with .afed-field-error for the message itself -
 * neither existed before this session, so every form on the platform was
 * previously showing validation failures only via a generic top-of-page
 * notice, with no visual cue on the actual field.
 */
.afed-portal-main form input[aria-invalid="true"],
.afed-portal-main form select[aria-invalid="true"],
.afed-portal-main form textarea[aria-invalid="true"],
.afed-portal-main form .afed-field-invalid {
	border-color: var(--afed-danger);
	background-color: var(--afed-danger-bg);
}

.afed-portal-main form .afed-field-error {
	display: block;
	font-weight: 600;
	font-size: 12px;
	color: var(--afed-danger);
	margin-top: 4px;
}

/*
 * ADDED (form controls session): an opt-in utility for placing two or
 * three related fields side by side (e.g. State + Chapter pickers, or
 * Gender + Phone) instead of every field always stacking full-width -
 * nothing automatically uses this; a form's own markup wraps the
 * relevant labels/fields in <div class="afed-form-row"> to opt in.
 * Collapses back to a single stacked column below 600px, matching this
 * project's mobile-first convention everywhere else.
 */
.afed-form-row {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.afed-form-row > * {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 600px) {
	.afed-form-row {
		flex-direction: column;
		gap: 0;
	}
}

.afed-portal-main form input[type="text"],
.afed-portal-main form input[type="email"],
.afed-portal-main form input[type="password"],
.afed-portal-main form input[type="number"],
.afed-portal-main form input[type="url"],
.afed-portal-main form input[type="date"],
.afed-portal-main form input[type="datetime-local"],
.afed-portal-main form select,
.afed-portal-main form textarea {
	display: block;
	width: 100%;
	max-width: 480px;
	padding: 10px 14px;
	border: 1px solid var(--afed-border-strong);
	border-radius: var(--afed-radius);
	font-size: 14px;
	font-family: inherit;
	color: var(--afed-text);
	background-color: var(--afed-surface);
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.afed-portal-main form select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23646970'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	padding-right: 36px;
}

.afed-portal-main form textarea {
	resize: vertical;
	min-height: 70px;
}

/* Password show/hide toggle (password-visibility session). */
.afed-password-wrap {
	position: relative;
	max-width: 480px;
}

.afed-password-wrap input[type="password"],
.afed-password-wrap input[type="text"] {
	max-width: 100%;
	padding-right: 44px;
}

.afed-password-toggle {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 6px;
	margin: 0;
	cursor: pointer;
	color: var(--afed-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--afed-radius-sm);
}

.afed-password-toggle:hover {
	color: var(--afed-text);
	background: var(--afed-surface-alt);
}

.afed-password-toggle:focus-visible {
	outline: 2px solid var(--afed-accent, var(--afed-accent));
	outline-offset: 1px;
}

.afed-portal-main form input:focus,
.afed-portal-main form select:focus,
.afed-portal-main form textarea:focus {
	border-color: var(--afed-accent);
	box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.12);
	outline: none;
}

.afed-portal-main form input:disabled {
	background-color: var(--afed-surface-alt);
	color: var(--afed-text-faint);
	cursor: not-allowed;
}

/* Checkbox rows (School Type, Remember Me) get a bit more breathing room
   and a slightly larger, easier-to-tap box - these deliberately don't
   inherit the block/max-width treatment above, since a checkbox sitting
   on its own line looks worse, not better. */
.afed-portal-main form input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--afed-accent);
	vertical-align: middle;
}

.afed-portal-hint {
	color: var(--afed-text-muted);
	font-size: 12px;
	margin: 4px 0 0;
}

.afed-btn {
	display: inline-block;
	margin-top: 18px;
	padding: 10px 20px;
	border-radius: var(--afed-radius-sm);
	border: 1px solid var(--afed-accent);
	background: var(--afed-surface);
	color: var(--afed-accent);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.afed-btn:hover {
	background: var(--afed-accent);
	color: var(--afed-surface);
}

.afed-btn:focus-visible {
	outline: 2px solid var(--afed-primary);
	outline-offset: 2px;
}

.afed-btn-primary {
	background: var(--afed-accent);
	color: var(--afed-surface);
}

.afed-btn-primary:hover {
	background: var(--afed-accent-dark);
	border-color: var(--afed-accent-dark);
	color: var(--afed-surface);
}

/*
 * ADDED (form controls session): the tertiary/least-prominent tier -
 * transparent, muted text, no border - for actions like "Cancel" next to
 * a primary "Save", where a bordered button of equal visual weight would
 * wrongly suggest both choices are equally important.
 */
.afed-btn-ghost {
	background: transparent;
	border-color: transparent;
	color: var(--afed-text-muted);
}

.afed-btn-ghost:hover {
	background: var(--afed-surface-alt);
	color: var(--afed-text);
}

/*
 * ADDED (form controls session): explicitly for destructive actions
 * (delete/remove/revoke) - uses the --afed-danger token rather than
 * --afed-accent, so the two stay visually distinct if a State's brand
 * accent color is ever configured to something other than red (today
 * they happen to share the same default, but they are NOT the same
 * token, and a State that picks e.g. a blue accent would otherwise lose
 * the "this is dangerous" signal entirely).
 */
.afed-btn-danger {
	border-color: var(--afed-danger);
	color: var(--afed-danger);
}

.afed-btn-danger:hover {
	background: var(--afed-danger);
	border-color: var(--afed-danger);
	color: var(--afed-surface);
}

.afed-btn:disabled,
.afed-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.afed-btn-small {
	margin-top: 8px;
	padding: 5px 12px;
	font-size: 13px;
}


.afed-portal-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--afed-surface);
	border: 1px solid var(--afed-border);
	border-radius: var(--afed-radius);
	overflow: hidden;
	box-shadow: var(--afed-shadow);
}

.afed-portal-table th,
.afed-portal-table td {
	text-align: left;
	padding: 12px 16px;
	border-bottom: 1px solid var(--afed-border);
	font-size: 14px;
}

.afed-portal-table th {
	background: var(--afed-surface-alt);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--afed-text-muted);
	font-weight: 600;
}

.afed-portal-table tbody tr:last-child td {
	border-bottom: none;
}

.afed-portal-table tbody tr:hover {
	background: var(--afed-surface-alt);
}

/* =======================================================================
   Portal search/sort/filter (search-sort-filter session) - the portal
   equivalent of the admin plugins' .afed-list-table-wrap component, for
   any .afed-portal-table that opts in via afedPortalSetupListTables() in
   portal.js. Kept as its own separate class/JS rather than reusing the
   admin version, since portal pages and wp-admin pages never load the
   same JS/CSS file - see portal.js's own comment on this function.
   ======================================================================= */
.afed-portal-list-controls {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.afed-portal-list-search {
	flex: 1;
	min-width: 200px;
	padding: 8px 12px;
	border: 1px solid var(--afed-border-strong);
	border-radius: var(--afed-radius-sm);
	background: var(--afed-surface);
	color: var(--afed-text);
	font-size: 14px;
}

.afed-portal-list-filter {
	padding: 8px 12px;
	border: 1px solid var(--afed-border-strong);
	border-radius: var(--afed-radius-sm);
	background: var(--afed-surface);
	color: var(--afed-text);
	font-size: 14px;
	min-width: 160px;
}

.afed-portal-table th[data-sort] {
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.afed-portal-table th[data-sort]:hover {
	color: var(--afed-text);
}

.afed-portal-table th.sorted-asc::after {
	content: ' \25B2';
	font-size: 10px;
}

.afed-portal-table th.sorted-desc::after {
	content: ' \25BC';
	font-size: 10px;
}

@media (max-width: 680px) {
	.afed-portal-list-search,
	.afed-portal-list-filter {
		min-width: 0;
		width: 100%;
	}
}
/* ======================================================================= */

.afed-portal-tree, .afed-portal-tree ul {
	list-style: none;
	margin: 0 0 0 20px;
	padding: 0;
}

.afed-portal-tree {
	margin-left: 0;
}

.afed-portal-tree li {
	margin: 6px 0;
}

/* Collapsible tree: children hidden by default, shown only when the
   parent <li> carries .is-expanded (added/removed by portal.js). */
.afed-portal-tree-children {
	display: none;
}

.afed-portal-tree-item.is-expanded > .afed-portal-tree-children {
	display: block;
}

.afed-portal-tree-toggle {
	background: var(--afed-surface-alt);
	border: 1px solid var(--afed-border);
	border-radius: 50%;
	width: 26px;
	height: 26px;
	padding: 0;
	margin: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--afed-accent);
	flex-shrink: 0;
}

.afed-portal-tree-toggle:hover {
	background: var(--afed-accent);
	color: var(--afed-surface);
}

.afed-portal-tree-toggle-icon {
	display: block;
	transition: transform 0.15s ease;
}

.afed-portal-tree-item.is-expanded > .afed-portal-node .afed-portal-tree-toggle-icon {
	transform: rotate(90deg);
}

.afed-portal-node {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--afed-surface);
	border: 1px solid var(--afed-border);
	border-radius: var(--afed-radius-sm);
	padding: 10px 14px;
	flex-wrap: wrap;
}

.afed-portal-node-level {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: var(--afed-surface-alt);
	border-radius: 3px;
	padding: 2px 6px;
	color: var(--afed-text-muted);
}

.afed-portal-node code {
	white-space: nowrap;
}

.afed-portal-node-state .afed-portal-node-level { background: var(--afed-primary); color: var(--afed-surface); }
.afed-portal-node-chapter .afed-portal-node-level { background: #72aee6; color: var(--afed-surface); }
.afed-portal-node-zone .afed-portal-node-level { background: #d5e5f5; color: var(--afed-text); }
.afed-portal-node-national .afed-portal-node-level { background: var(--afed-text); color: var(--afed-surface); }

.afed-portal-badge {
	font-size: 11px;
	border-radius: 3px;
	padding: 2px 6px;
}

.afed-portal-badge-active { background: var(--afed-success-bg); color: var(--afed-success); }
.afed-portal-badge-inactive { background: var(--afed-danger-bg); color: var(--afed-danger); }
.afed-portal-badge-pending { background: var(--afed-warning-bg); color: var(--afed-warning); }

.afed-portal-inline-edit-form {
	margin: 6px 0 6px 20px;
}

.afed-portal-inline-edit-form input[type="text"] {
	padding: 5px 8px;
	border: 1px solid var(--afed-border-strong);
	border-radius: var(--afed-radius-sm);
}

.afed-portal-deactivate-link {
	color: var(--afed-danger);
}

.afed-portal-notice {
	padding: 12px 16px;
	border-radius: var(--afed-radius-sm);
	margin-bottom: 20px;
	font-size: 14px;
}

.afed-portal-notice-success {
	background: var(--afed-success-bg);
	color: var(--afed-success);
	border: 1px solid var(--afed-success-border);
}

.afed-portal-notice-error {
	background: var(--afed-danger-bg);
	color: var(--afed-danger);
	border: 1px solid var(--afed-danger-border);
}

.afed-portal-notice-pending {
	background: var(--afed-warning-bg);
	color: var(--afed-warning);
	border: 1px solid var(--afed-warning-border);
}

/* Dashboard mode toggle (dual-role accounts session). */
.afed-portal-dashboard-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0 24px;
}

.afed-portal-toggle-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--afed-text-faint);
}

.afed-portal-toggle-label.is-active {
	color: var(--afed-primary, var(--afed-accent));
	font-weight: 700;
}

.afed-portal-toggle-switch {
	position: relative;
	width: 44px;
	height: 24px;
	border-radius: 999px;
	border: none;
	background: var(--afed-primary, var(--afed-accent));
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	transition: background 0.15s ease;
}

.afed-portal-toggle-switch.is-school {
	background: #6b46c1;
}

.afed-portal-toggle-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--afed-surface);
	transition: left 0.15s ease;
}

.afed-portal-toggle-switch.is-school .afed-portal-toggle-knob {
	left: 23px;
}

.afed-portal-pending-list {
	background: var(--afed-surface);
	border: 1px solid var(--afed-border);
	border-radius: var(--afed-radius);
	padding: 16px 20px;
	margin: 0;
}

.afed-portal-honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
}

.afed-portal-main-narrow {
	max-width: 640px;
}

.afed-portal-register-form {
	background: var(--afed-surface);
	border: 1px solid var(--afed-border);
	border-radius: var(--afed-radius);
	padding: 24px 28px 32px;
}

.afed-portal-register-form h3 {
	margin: 24px 0 4px;
	font-size: 15px;
	border-top: 1px solid var(--afed-border);
	padding-top: 20px;
}

.afed-portal-register-form h3:first-of-type {
	border-top: none;
	padding-top: 0;
}

.afed-reg-school-type-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 10px 0;
}

.afed-reg-checkbox-label {
	display: flex !important;
	align-items: center;
	gap: 6px;
	font-weight: normal !important;
	margin: 0 !important;
	min-width: 110px;
}

.afed-reg-checkbox-label input[type="checkbox"] {
	width: auto;
	margin: 0;
}

.afed-reg-school-type-row input[type="number"] {
	width: 140px;
}

.afed-reg-school-type-row input[type="number"]:disabled {
	background: var(--afed-surface-alt);
	color: var(--afed-text-faint);
}

.afed-portal-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------
   Collapsible "at a glance" summary bar (portal summary bar session) -
   portal equivalent of the wp-admin Schools page's .afed-summary-bar.
   Reuses the existing .afed-portal-card / .afed-portal-card-number /
   .afed-portal-card-label look already established for the portal
   Dashboard, rather than a new visual pattern. See afedPortalSetupListTables()'s
   updateSummary() in portal.js for how the numbers stay in sync with the
   table's own filtering.
------------------------------------------------------------------------ */
.afed-portal-summary-bar {
	background: var(--afed-surface);
	border: 1px solid var(--afed-border);
	border-radius: var(--afed-radius);
	margin-bottom: 16px;
	overflow: hidden;
}

.afed-portal-summary-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: var(--afed-surface-alt);
	border: none;
	cursor: pointer;
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--afed-text);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.afed-portal-summary-toggle:hover {
	color: var(--afed-primary);
}

.afed-portal-summary-toggle-icon {
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transition: transform 0.15s ease;
}

.afed-portal-summary-bar.is-collapsed .afed-portal-summary-toggle-icon {
	transform: rotate(-90deg);
}

.afed-portal-summary-bar.is-collapsed .afed-portal-summary-cards {
	display: none;
}

.afed-portal-summary-cards {
	margin: 0;
	padding: 16px;
}

.afed-portal-summary-cards.afed-portal-cards {
	margin-bottom: 0;
}

.afed-portal-summary-cards .afed-portal-card {
	min-width: 130px;
	padding: 14px 18px;
}

.afed-portal-summary-cards .afed-portal-card-number {
	font-size: 26px;
}

/* ---------------------------------------------------------------------
   Profile Details panel - Schools/EXCO "View Details" and the School
   account's own Dashboard profile card.
------------------------------------------------------------------------ */
.afed-profile-detail {
	background: var(--afed-surface);
	border: 1px solid var(--afed-border);
	border-radius: var(--afed-radius);
	padding: 20px 24px;
	margin-bottom: 28px;
}

.afed-profile-detail-header {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.afed-profile-detail-header h2 {
	margin: 0;
	font-size: 20px;
}

.afed-profile-detail-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 24px;
	margin-bottom: 24px;
}

.afed-profile-field-wide {
	grid-column: 1 / -1;
}

.afed-profile-label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--afed-text-muted);
	margin-bottom: 3px;
}

.afed-profile-value {
	display: block;
	font-size: 14px;
	color: var(--afed-text);
	word-break: break-word;
}

/* ---------------------------------------------------------------------
   Member Login page (/afed-portal/login/) - the front door for members,
   replacing wp-login.php in normal use.
------------------------------------------------------------------------ */
.afed-portal-login-form {
	background: var(--afed-surface);
	border: 1px solid var(--afed-border);
	border-radius: var(--afed-radius);
	padding: 28px 32px 32px;
}

.afed-portal-checkbox-label {
	display: flex !important;
	align-items: center;
	gap: 6px;
	font-weight: normal !important;
	margin: 14px 0 !important;
}

.afed-portal-checkbox-label input[type="checkbox"] {
	width: auto;
}

.afed-portal-login-links {
	margin-top: 20px;
	font-size: 13px;
	color: var(--afed-text-muted);
}

.afed-portal-login-links a {
	color: var(--afed-accent);
	text-decoration: none;
}

/* ---------------------------------------------------------------------
   Mobile breakpoint (phones and small tablets).
------------------------------------------------------------------------ */
@media (max-width: 680px) {
	.afed-portal-header {
		padding: 12px 16px;
	}

	.afed-portal-brand {
		font-size: 16px;
	}

	.afed-portal-brand-logo img {
		max-height: 40px;
	}

	.afed-portal-user-info {
		max-width: 150px;
	}

	.afed-portal-user-role {
		font-size: 11px;
	}

	.afed-portal-sidebar {
		display: none;
	}

	.afed-portal-body-wrap {
		display: block;
	}

	.afed-portal-main {
		padding: 20px 16px 88px; /* extra bottom room clears the fixed tab bar */
	}

	.afed-portal-tabbar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--afed-primary);
		box-shadow: 0 -2px 8px rgba(0,0,0,.12);
		z-index: 900;
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	.afed-portal-main h1 {
		font-size: 21px;
	}

	.afed-portal-cards {
		gap: 10px;
	}

	.afed-portal-card {
		flex: 1 1 calc(50% - 10px);
		min-width: 120px;
		padding: 14px 16px;
	}

	.afed-portal-card-number {
		font-size: 24px;
	}

	.afed-portal-columns {
		flex-direction: column;
		gap: 20px;
	}

	.afed-portal-column-main,
	.afed-portal-column-side {
		min-width: 0;
		width: 100%;
	}

	.afed-portal-column-side {
		padding: 16px 18px;
	}

	.afed-portal-node {
		font-size: 13px;
		gap: 6px;
		padding: 10px;
	}

	.afed-portal-node strong {
		flex-basis: 100%;
	}

	.afed-portal-inline-edit-form {
		margin-left: 0;
	}

	.afed-portal-inline-edit-form input[type="text"] {
		width: 100%;
		max-width: 260px;
	}

	.afed-portal-table th,
	.afed-portal-table td {
		padding: 8px 10px;
		font-size: 13px;
	}

	.afed-btn {
		width: 100%;
		text-align: center;
	}

	.afed-btn-small {
		width: auto;
	}

	.afed-portal-quick-actions {
		flex-direction: column;
	}

	.afed-portal-quick-actions .afed-btn {
		width: 100%;
	}

	.afed-portal-register-form,
	.afed-portal-login-form,
	.afed-portal-column-side {
		padding-left: 16px;
		padding-right: 16px;
	}

	.afed-profile-detail-grid {
		grid-template-columns: 1fr;
	}
}

/* Required-field marker, kept consistent with the wp-admin version. */
.afed-required {
	color: var(--afed-danger);
}

/* ---------------------------------------------------------------------
   Multi-branch dashboard (branch switcher + Add Another Branch).
------------------------------------------------------------------------ */
.afed-portal-branch-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
}

.afed-portal-branch-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--afed-surface);
	border: 1px solid var(--afed-border);
	border-radius: var(--afed-radius);
	padding: 14px 18px;
	flex-wrap: wrap;
}

.afed-portal-branch-card.is-active {
	border-color: var(--afed-accent);
	box-shadow: 0 0 0 1px var(--afed-accent);
}

.afed-portal-branch-card form {
	margin: 0;
}

.afed-portal-add-branch {
	background: var(--afed-surface);
	border: 1px solid var(--afed-border);
	border-radius: var(--afed-radius);
	padding: 16px 20px;
	margin-top: 8px;
}

.afed-portal-add-branch summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--afed-accent);
}

.afed-portal-add-branch form {
	margin-top: 16px;
}

/* ---------------------------------------------------------------------
   Support Access banner - shown at the very top of every portal page,
   above the header, only while a Support Access session is active (see
   AFED_Support_Access::render_banner()). Deliberately loud/impossible to
   miss - it's the one visual cue reminding whoever's looking at the
   screen that this isn't a normal member session.
------------------------------------------------------------------------ */
.afed-support-banner {
	position: sticky;
	top: 0;
	z-index: 2000;
	background: var(--afed-danger);
	color: var(--afed-surface);
	padding: 10px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 13px;
}

.afed-support-banner-text {
	font-weight: 500;
}

.afed-support-banner-return {
	color: var(--afed-surface);
	text-decoration: underline;
	font-weight: 700;
	white-space: nowrap;
	flex-shrink: 0;
}

.afed-support-banner-return:hover {
	opacity: 0.85;
}

/* "EXCO Titles" inline editor (per-State EXCO titles session). */
.afed-exco-titles-editor {
	padding: 8px 0;
}

.afed-exco-title-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.afed-exco-title-row input[type="text"] {
	max-width: 260px;
}

.afed-exco-title-status {
	font-size: 12px;
	font-weight: 600;
}

.afed-exco-title-status.is-success { color: var(--afed-success); }
.afed-exco-title-status.is-error { color: var(--afed-danger); }

/* =======================================================================
   AFED DESIGN SYSTEM - checkbox/radio base (form controls session)
   =======================================================================
   Custom-styled checkboxes/radios, replacing raw OS/browser defaults.
   Lives ONLY here, not duplicated into every plugin's portal.css like
   the structural tokens are - this file is guaranteed to always load on
   every portal page (Membership owns the shared shell every other
   plugin's portal pages render inside; if Membership isn't active, no
   portal page renders for ANY plugin, so there's no scenario where this
   needs to exist standalone). More specific existing rules elsewhere in
   this file (e.g. .afed-portal-main form input[type="checkbox"],
   .afed-reg-checkbox-label input[type="checkbox"]) naturally take
   precedence over this base layer via their own higher specificity -
   this exists to cover every checkbox/radio that ISN'T already inside
   one of those specific contexts, including other plugins' own custom
   checkbox markup (e.g. the Communications broadcast composer's
   .afed-comm-checkbox-row).
   ======================================================================= */
body.afed-portal input[type="checkbox"],
body.afed-portal input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	min-width: 20px;
	border: 2px solid var(--afed-border-strong);
	background: var(--afed-surface);
	cursor: pointer;
	position: relative;
	margin: 0;
	flex-shrink: 0;
	vertical-align: middle;
	transition: border-color 0.15s ease, background 0.15s ease;
}

body.afed-portal input[type="checkbox"] {
	border-radius: 5px;
}

body.afed-portal input[type="radio"] {
	border-radius: 50%;
}

body.afed-portal input[type="checkbox"]:hover,
body.afed-portal input[type="radio"]:hover {
	border-color: var(--afed-accent);
}

body.afed-portal input[type="checkbox"]:checked,
body.afed-portal input[type="radio"]:checked {
	border-color: var(--afed-accent);
}

body.afed-portal input[type="checkbox"]:checked {
	background: var(--afed-accent);
}

body.afed-portal input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

body.afed-portal input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--afed-accent);
}

body.afed-portal input[type="checkbox"]:focus-visible,
body.afed-portal input[type="radio"]:focus-visible {
	outline: 2px solid var(--afed-accent);
	outline-offset: 2px;
}

body.afed-portal input[type="checkbox"]:disabled,
body.afed-portal input[type="radio"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
/* ======================================================================= */

/* =======================================================================
   Reusable modal (Schools full-width table session) - same component and
   markup as the admin plugin's version (afedPortalSetupModals() in
   portal.js), using this file's own dark-mode-aware tokens instead of
   admin's. Any button with data-modal-trigger="some-id" opens the element
   with that id (must carry .afed-modal); anything inside it with
   data-modal-close="some-id" closes it. Built generic on purpose - first
   use is "Add School", but any future portal page can reuse this exact
   markup/JS for its own modal.
   ======================================================================= */
.afed-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
}

.afed-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.5);
}

.afed-modal-dialog {
	position: relative;
	max-width: 560px;
	margin: 5vh auto;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--afed-surface);
	color: var(--afed-text);
	border-radius: var(--afed-radius);
	padding: 28px 32px;
	box-shadow: var(--afed-shadow-md);
}

.afed-modal-dialog h2 {
	margin-top: 0;
}

.afed-modal-close {
	position: absolute;
	top: 14px;
	right: 16px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: var(--afed-text-muted);
}

.afed-modal-close:hover {
	color: var(--afed-text);
}

/* UPDATED (guarded-close session): plays when a close attempt is blocked
   because the form inside has unsaved input - see data-guard-dirty in
   afedPortalSetupModals() (portal.js). */
@keyframes afed-modal-shake {
	10%, 90% { transform: translateX(-1px); }
	20%, 80% { transform: translateX(2px); }
	30%, 50%, 70% { transform: translateX(-4px); }
	40%, 60% { transform: translateX(4px); }
}

.afed-modal-dialog.afed-modal-shake {
	animation: afed-modal-shake 0.4s;
}

@media (max-width: 640px) {
	.afed-modal-dialog {
		margin: 0;
		max-width: 100%;
		max-height: 100vh;
		border-radius: 0;
	}
}
/* ======================================================================= */

/* =======================================================================
   Native in-portal User Guide (native in-portal user guide session) -
   the "Resources" sidebar drawer's "User Guide" page. All search/filter
   behavior is client-side JS (afedPortalSetupUserGuide() in mh-portal.js)
   working off data-part / data-roles on each .afed-guide-card - these
   rules only handle layout and the collapsed/expanded look.
   ========================================================================== */
.afed-guide-page {
	max-width: 920px;
}

.afed-guide-intro {
	color: var(--afed-text-muted);
	margin-top: 4px;
	margin-bottom: 20px;
}

.afed-guide-stats {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.afed-guide-stat {
	background: var(--afed-surface);
	border: 1px solid var(--afed-border);
	border-radius: var(--afed-radius);
	padding: 12px 18px;
	min-width: 110px;
}

.afed-guide-stat-num {
	display: block;
	font-size: 24px;
	font-weight: 700;
	color: var(--afed-primary);
}

.afed-guide-stat-label {
	font-size: 12px;
	color: var(--afed-text-muted);
	text-transform: uppercase;
	letter-spacing: .03em;
}

.afed-guide-controls {
	background: var(--afed-surface);
	border: 1px solid var(--afed-border);
	border-radius: var(--afed-radius);
	padding: 16px;
	margin-bottom: 24px;
}

.afed-guide-search {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--afed-border-strong);
	border-radius: var(--afed-radius-sm);
	background: var(--afed-surface-alt);
	color: var(--afed-text);
	font-size: 15px;
	margin-bottom: 14px;
}

.afed-guide-part-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.afed-guide-part-tab {
	background: var(--afed-surface-alt);
	border: 1px solid var(--afed-border);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	color: var(--afed-text);
	cursor: pointer;
}

.afed-guide-part-tab:hover {
	border-color: var(--afed-primary);
}

.afed-guide-part-tab.active {
	background: var(--afed-primary);
	border-color: var(--afed-primary);
	color: #fff;
}

.afed-guide-role-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.afed-guide-role-row label {
	font-size: 13px;
	color: var(--afed-text-muted);
	white-space: nowrap;
}

.afed-guide-role-select {
	flex: 1;
	max-width: 260px;
	padding: 8px 12px;
	border: 1px solid var(--afed-border-strong);
	border-radius: var(--afed-radius-sm);
	background: var(--afed-surface-alt);
	color: var(--afed-text);
	font-size: 14px;
}

.afed-guide-part-heading {
	margin: 28px 0 12px;
	font-size: 18px;
	color: var(--afed-primary);
	border-bottom: 2px solid var(--afed-accent);
	padding-bottom: 6px;
}

.afed-guide-part-heading:first-child {
	margin-top: 0;
}

.afed-guide-card {
	background: var(--afed-surface);
	border: 1px solid var(--afed-border);
	border-radius: var(--afed-radius);
	margin-bottom: 10px;
	overflow: hidden;
}

.afed-guide-card-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 14px 16px;
	text-align: left;
	color: var(--afed-text);
}

.afed-guide-card-num {
	font-size: 12px;
	color: var(--afed-text-muted);
	white-space: nowrap;
	min-width: 64px;
}

.afed-guide-card-title {
	flex: 1;
	font-weight: 600;
	font-size: 15px;
}

.afed-guide-card-roles {
	display: none;
	gap: 4px;
	flex-wrap: wrap;
}

.afed-guide-role-chip {
	background: var(--afed-primary-tint);
	color: var(--afed-primary);
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 999px;
	white-space: nowrap;
}

.afed-guide-card-chevron {
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--afed-text-muted);
	border-bottom: 2px solid var(--afed-text-muted);
	transform: rotate(45deg);
	transition: transform .15s ease;
	flex-shrink: 0;
}

.afed-guide-card-toggle[aria-expanded="true"] .afed-guide-card-chevron {
	transform: rotate(-135deg);
}

.afed-guide-card-body {
	display: none;
	padding: 0 18px 18px;
	border-top: 1px solid var(--afed-border);
	padding-top: 14px;
}

.afed-guide-card.is-open .afed-guide-card-body {
	display: block;
}

.afed-guide-card-body h4 {
	margin: 16px 0 6px;
	font-size: 14px;
	color: var(--afed-primary);
}

.afed-guide-card-body h4:first-child {
	margin-top: 0;
}

.afed-guide-card-body p,
.afed-guide-card-body ul,
.afed-guide-card-body ol {
	margin: 0 0 12px;
	line-height: 1.55;
	font-size: 14px;
}

.afed-guide-card-body ul,
.afed-guide-card-body ol {
	padding-left: 22px;
}

.afed-guide-card-body li {
	margin-bottom: 4px;
}

.afed-guide-tip,
.afed-guide-note {
	border-radius: var(--afed-radius-sm);
	padding: 10px 14px;
	margin: 0 0 14px;
	font-size: 13.5px;
	line-height: 1.5;
}

.afed-guide-tip {
	background: var(--afed-surface-alt);
	border: 1px solid var(--afed-border);
}

.afed-guide-note {
	background: var(--afed-warning-bg);
	border: 1px solid var(--afed-warning-border);
	color: var(--afed-warning);
}

.afed-guide-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 14px;
	font-size: 13px;
}

.afed-guide-table th,
.afed-guide-table td {
	border: 1px solid var(--afed-border);
	padding: 8px 10px;
	text-align: left;
}

.afed-guide-table th {
	background: var(--afed-surface-alt);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--afed-text-muted);
}

.afed-guide-kind-support .afed-guide-card-toggle,
.afed-guide-kind-table .afed-guide-card-toggle {
	background: var(--afed-surface-alt);
}

.afed-guide-no-results {
	text-align: center;
	color: var(--afed-text-muted);
	padding: 32px 0;
}

@media (max-width: 640px) {
	.afed-guide-stats {
		gap: 8px;
	}
	.afed-guide-stat {
		flex: 1 1 calc(50% - 8px);
		min-width: 0;
	}
	.afed-guide-card-num {
		display: none;
	}
}
/* ======================================================================= */