/* PEF Admission Portal — design tokens
   Palette:  maroon #7A1620 (brand/crest), maroon-dark #591019 (pressed states),
             gold #C9A227 (seal/accent), cream #FAF6EF (page), ink #2B2320 (text),
             line #E4DCC8 (hairline/parchment rule), success #2F7D4F, error #B3261E
   Type:     Fraunces (display serif — collegiate, matches the crest) for headings,
             Inter for body/labels/inputs, IBM Plex Mono for reference & OTP codes.
   Signature: the step markers are rendered as small wax-seal medallions (gold ring,
             maroon fill) instead of generic dots — echoing the college crest. */

#pef-ap-root, #pef-ap-root * { box-sizing: border-box; }

#pef-ap-root {
	--pef-maroon: #7A1620;
	--pef-maroon-dark: #591019;
	--pef-gold: #C9A227;
	--pef-gold-soft: #E7D48F;
	--pef-cream: #FAF6EF;
	--pef-paper: #FFFFFF;
	--pef-ink: #2B2320;
	--pef-ink-soft: #6E6259;
	--pef-line: #E4DCC8;
	--pef-success: #2F7D4F;
	--pef-error: #B3261E;
	--pef-radius: 10px;
	--pef-shadow: 0 1px 2px rgba(43,35,32,.06), 0 8px 24px -12px rgba(43,35,32,.18);

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--pef-ink);
	background: var(--pef-cream);
	border: 1px solid var(--pef-line);
	border-radius: 16px;
	max-width: 880px;
	margin: 0 auto;
	overflow: hidden;
	line-height: 1.5;
}

#pef-ap-root h1, #pef-ap-root h2, #pef-ap-root h3 {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	color: var(--pef-maroon-dark);
	margin: 0 0 6px;
}

/* ---------- Topbar ---------- */
.pef-ap__topbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 18px 26px;
	background: linear-gradient(180deg, var(--pef-maroon) 0%, var(--pef-maroon-dark) 100%);
	color: #fff;
}
.pef-ap__topbar-right { font-size: 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.pef-ap__topbar-right .pef-ap__pill {
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.25);
	padding: 5px 12px;
	border-radius: 999px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	white-space: nowrap;
}
.pef-ap__linkbtn {
	background: none; border: none; color: #fff; text-decoration: underline;
	cursor: pointer; font: inherit; opacity: .85;
}
.pef-ap__linkbtn:hover { opacity: 1; }
.pef-ap__linkbtn--dark {
	background: none; border: none; color: var(--pef-maroon-dark); text-decoration: underline;
	cursor: pointer; font: inherit; opacity: .85;
}
.pef-ap__linkbtn--dark:hover { opacity: 1; }

/* ---------- Stage ---------- */
.pef-ap__stage { padding: 32px; background: var(--pef-paper); min-height: 320px; }
.pef-ap__loading { text-align: center; padding: 60px 0; color: var(--pef-ink-soft); }
.pef-ap__seal-spin {
	width: 40px; height: 40px; margin: 0 auto 16px;
	border: 3px solid var(--pef-line);
	border-top-color: var(--pef-gold);
	border-radius: 50%;
	animation: pef-spin 0.9s linear infinite;
}
@keyframes pef-spin { to { transform: rotate(360deg); } }

/* ---------- Auth ---------- */
.pef-ap__auth { max-width: 420px; margin: 0 auto; }
.pef-ap__tabs { display: flex; gap: 4px; margin-bottom: 24px; background: var(--pef-cream); border-radius: 999px; padding: 4px; }
.pef-ap__tab {
	flex: 1; text-align: center; padding: 9px 0; border-radius: 999px; cursor: pointer;
	font-weight: 600; font-size: 14px; color: var(--pef-ink-soft); border: none; background: none;
}
.pef-ap__tab.is-active { background: var(--pef-maroon); color: #fff; }

.pef-ap__field { margin-bottom: 16px; }
.pef-ap__field label {
	display: block; font-size: 12.5px; font-weight: 600; text-transform: uppercase;
	letter-spacing: .04em; color: var(--pef-ink-soft); margin-bottom: 6px;
}
.pef-ap__field input[type=text],
.pef-ap__field input[type=email],
.pef-ap__field input[type=password],
.pef-ap__field input[type=tel],
.pef-ap__field input[type=date],
.pef-ap__field input[type=number],
.pef-ap__field select,
.pef-ap__field textarea {
	width: 100%; padding: 11px 13px; border: 1.5px solid var(--pef-line); border-radius: 8px;
	font: inherit; font-size: 14.5px; background: var(--pef-paper); color: var(--pef-ink);
	transition: border-color .15s;
}
.pef-ap__field input:focus, .pef-ap__field select:focus, .pef-ap__field textarea:focus {
	outline: none; border-color: var(--pef-maroon); box-shadow: 0 0 0 3px rgba(122,22,32,.1);
}
.pef-ap__hint { font-size: 12px; color: var(--pef-ink-soft); margin-top: 5px; }
.pef-ap__req-star { color: var(--pef-maroon); font-weight: 700; }
.pef-ap__invalid { border-color: var(--pef-error) !important; box-shadow: 0 0 0 3px rgba(179,38,30,.1) !important; }
.pef-ap__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .pef-ap__row2 { grid-template-columns: 1fr; } }

.pef-ap__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--pef-maroon); color: #fff; border: none; padding: 12px 22px;
	border-radius: 8px; font-weight: 600; font-size: 14.5px; cursor: pointer; width: 100%;
	transition: background .15s, transform .05s;
}
.pef-ap__btn:hover { background: var(--pef-maroon-dark); }
.pef-ap__btn:active { transform: scale(.99); }
.pef-ap__btn:disabled { opacity: .55; cursor: not-allowed; }
.pef-ap__btn--ghost { background: none; color: var(--pef-maroon); border: 1.5px solid var(--pef-line); width: auto; }
.pef-ap__btn--ghost:hover { background: var(--pef-cream); border-color: var(--pef-maroon); }
.pef-ap__btn--sm { padding: 8px 14px; font-size: 13px; width: auto; }

.pef-ap__msg { padding: 11px 14px; border-radius: 8px; font-size: 13.5px; margin-bottom: 16px; }
.pef-ap__msg--error { background: #FBEAE9; color: var(--pef-error); border: 1px solid #F1C7C4; }
.pef-ap__msg--success { background: #EAF4EE; color: var(--pef-success); border: 1px solid #C6E3D0; }
.pef-ap__msg--info { background: #FBF6E8; color: #8A6D1D; border: 1px solid #EFDFA9; }

.pef-ap__otp-row { display: flex; gap: 10px; }
.pef-ap__otp-row input {
	flex: 1; text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 20px;
	letter-spacing: .3em; padding: 12px 0;
}
.pef-ap__verify-block { border: 1px solid var(--pef-line); border-radius: 10px; padding: 18px; margin-bottom: 16px; }
.pef-ap__verify-block h3 { font-size: 15px; margin-bottom: 4px; }
.pef-ap__verify-status { font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.pef-ap__verify-status--done { background: #EAF4EE; color: var(--pef-success); }
.pef-ap__verify-status--pending { background: #FBF6E8; color: #8A6D1D; }
.pef-ap__verify-head { display: flex; justify-content: space-between; align-items: center; }

/* ---------- Progress bar ---------- */
.pef-ap__progress-wrap { margin-bottom: 18px; }
.pef-ap__progress-label { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--pef-ink-soft); margin-bottom: 6px; font-weight: 600; }
.pef-ap__progress { height: 8px; background: var(--pef-cream); border-radius: 999px; overflow: hidden; border: 1px solid var(--pef-line); }
.pef-ap__progress-fill { height: 100%; background: linear-gradient(90deg, var(--pef-gold) 0%, var(--pef-maroon) 100%); border-radius: 999px; transition: width .3s ease; }

/* ---------- Stepper ---------- */
.pef-ap__stepper { display: flex; align-items: flex-start; margin-bottom: 30px; overflow-x: auto; padding-bottom: 4px; }
.pef-ap__step { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 84px; position: relative; }
.pef-ap__step:not(:last-child)::after {
	content: ''; position: absolute; top: 17px; left: 58%; right: -42%; height: 2px;
	background: var(--pef-line);
}
.pef-ap__step.is-complete:not(:last-child)::after { background: var(--pef-gold); }
.pef-ap__seal {
	width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 13px;
	background: var(--pef-paper); border: 2px solid var(--pef-line); color: var(--pef-ink-soft);
	z-index: 1; transition: all .15s;
}
.pef-ap__step.is-active .pef-ap__seal { border-color: var(--pef-maroon); color: var(--pef-maroon); box-shadow: 0 0 0 4px rgba(122,22,32,.08); }
.pef-ap__step.is-complete .pef-ap__seal { background: var(--pef-gold); border-color: var(--pef-gold); color: #fff; }
.pef-ap__step-label { font-size: 11px; text-align: center; margin-top: 8px; color: var(--pef-ink-soft); max-width: 90px; }
.pef-ap__step.is-active .pef-ap__step-label { color: var(--pef-maroon-dark); font-weight: 600; }

/* ---------- Form sections ---------- */
.pef-ap__section-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.pef-ap__section-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--pef-gold); font-weight: 600; }
.pef-ap__section-desc { color: var(--pef-ink-soft); font-size: 13.5px; margin-bottom: 22px; }
.pef-ap__fieldset { border: none; padding: 0; margin: 0 0 22px; }
.pef-ap__legend { font-weight: 700; font-size: 13.5px; color: var(--pef-maroon-dark); margin-bottom: 12px; border-bottom: 1px solid var(--pef-line); padding-bottom: 6px; }
.pef-ap__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 18px; }
.pef-ap__grid.pef-ap__grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .pef-ap__grid, .pef-ap__grid--3 { grid-template-columns: 1fr; } }
.pef-ap__field--full { grid-column: 1 / -1; }

.pef-ap__radio-group, .pef-ap__check-group { display: flex; gap: 18px; flex-wrap: wrap; }
.pef-ap__radio-group label, .pef-ap__check-group label {
	display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500;
	text-transform: none; letter-spacing: 0; color: var(--pef-ink); cursor: pointer;
}
.pef-ap__radio-group input, .pef-ap__check-group input { accent-color: var(--pef-maroon); width: 16px; height: 16px; }

/* Academic background — one card per certificate/degree, fields in a
   responsive 2-col grid (1-col on phones). No fixed-width table, so this
   never needs horizontal scrolling at any screen size. */
.pef-ap__academic-card {
	border: 1px solid var(--pef-line); border-radius: 10px; padding: 16px 16px 4px;
	margin: 0 0 14px; background: var(--pef-paper);
}
.pef-ap__academic-card .pef-ap__legend { border-bottom: none; padding-bottom: 0; margin-bottom: 14px; }
.pef-ap__academic-card .pef-ap__field label { font-size: 11.5px; }

/* Uploads */
.pef-ap__upload {
	border: 1.5px dashed var(--pef-line); border-radius: 10px; padding: 16px; display: flex;
	align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; background: var(--pef-cream);
}
.pef-ap__upload-info strong { display: block; font-size: 14px; }
.pef-ap__upload-info span { font-size: 12.5px; color: var(--pef-ink-soft); }
.pef-ap__upload-status { font-size: 12.5px; font-weight: 600; color: var(--pef-success); }
.pef-ap__file-input { display: none; }

/* Fee voucher */
.pef-ap__voucher-loading { color: var(--pef-ink-soft); font-size: 13.5px; padding: 14px 0; }
.pef-ap__voucher { border: 1.5px dashed var(--pef-gold); border-radius: 12px; padding: 20px; background: var(--pef-cream); margin-bottom: 8px; }
.pef-ap__voucher-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--pef-line); }
.pef-ap__voucher-brand { font-family: 'Fraunces', serif; font-weight: 600; color: var(--pef-maroon-dark); font-size: 15px; }
.pef-ap__voucher-no { font-family: 'IBM Plex Mono', monospace; font-weight: 600; background: #fff; border: 1px solid var(--pef-line); padding: 4px 10px; border-radius: 6px; font-size: 13px; }
table.pef-ap__voucher-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
table.pef-ap__voucher-table td { padding: 6px 0; font-size: 13.5px; border-bottom: 1px dotted var(--pef-line); }
.pef-ap__voucher-k { color: var(--pef-ink-soft); width: 40%; }
.pef-ap__voucher-v { font-weight: 600; text-align: right; }
.pef-ap__voucher-amount { display: flex; justify-content: space-between; align-items: baseline; background: #fff; border: 1px solid var(--pef-line); border-radius: 8px; padding: 12px 16px; margin-bottom: 10px; }
.pef-ap__voucher-amount span { font-size: 13px; color: var(--pef-ink-soft); font-weight: 600; }
.pef-ap__voucher-amount strong { font-size: 22px; font-family: 'IBM Plex Mono', monospace; color: var(--pef-maroon-dark); }
.pef-ap__voucher-note { font-size: 12px; color: var(--pef-ink-soft); margin: 0; }

@media print {
	body * { visibility: hidden !important; }
	.pef-ap__voucher-print, .pef-ap__voucher-print * { visibility: visible !important; }
	.pef-ap__voucher-print { position: absolute; left: 0; top: 0; width: 100%; }
}

/* Review */
.pef-ap__review-card { border: 1px solid var(--pef-line); border-radius: 10px; margin-bottom: 16px; overflow: hidden; }
.pef-ap__review-card h4 {
	background: var(--pef-cream); margin: 0; padding: 10px 16px; font-family: 'Fraunces', serif;
	font-size: 14.5px; color: var(--pef-maroon-dark); border-bottom: 1px solid var(--pef-line);
}
.pef-ap__review-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
@media (max-width: 640px) { .pef-ap__review-grid { grid-template-columns: 1fr; } }
.pef-ap__review-item { padding: 10px 16px; font-size: 13.5px; border-bottom: 1px solid var(--pef-line); }
.pef-ap__review-item span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--pef-ink-soft); margin-bottom: 2px; }
.pef-ap__review-item strong { color: var(--pef-ink); font-weight: 600; }

.pef-ap__declare {
	display: flex; gap: 10px; align-items: flex-start; background: var(--pef-cream);
	border: 1px solid var(--pef-line); border-radius: 10px; padding: 14px 16px; margin: 18px 0; font-size: 13.5px;
}
.pef-ap__declare input { margin-top: 3px; accent-color: var(--pef-maroon); }

/* Nav buttons */
.pef-ap__nav { display: flex; justify-content: space-between; margin-top: 26px; gap: 12px; }
.pef-ap__nav .pef-ap__btn { width: auto; min-width: 130px; }

.pef-ap__done { text-align: center; padding: 30px 10px; }
.pef-ap__done .pef-ap__crest-big svg { width: 60px; height: 66px; margin-bottom: 14px; }
.pef-ap__done-logo { width: 180px; height: auto; margin-bottom: 14px; }
.pef-ap__done-photo {
	width: 110px; height: 110px; object-fit: cover; border-radius: 50%;
	border: 3px solid var(--pef-gold); margin: 0 auto 16px; display: block;
	box-shadow: var(--pef-shadow);
}
.pef-ap__done-program { color: var(--pef-ink-soft); font-size: 14.5px; margin-top: -4px; margin-bottom: 14px; }
.pef-ap__status-badge {
	display: inline-block; padding: 7px 18px; border-radius: 999px; font-weight: 700; font-size: 13.5px;
	margin-bottom: 14px;
}
.pef-ap__status-badge--pending { background: #fbf6e8; color: #8a6d1d; border: 1px solid #efdfa9; }
.pef-ap__status-badge--approved { background: #eaf4ee; color: var(--pef-success); border: 1px solid #c6e3d0; }
.pef-ap__status-badge--rejected { background: #fbe9e9; color: #b32d2e; border: 1px solid #f0c6c6; }
.pef-ap__status-badge--needs-info { background: #fdf0e6; color: #a15c0a; border: 1px solid #f2d9b8; }
.pef-ap__admin-note { text-align: left; background: #fdf0e6; color: #6a4415; border: 1px solid #f2d9b8; border-radius: 8px; padding: 12px 16px; margin: 12px 0; white-space: pre-wrap; font-size: 14px; }
.pef-ap__label-sm { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--pef-ink-soft); margin-top: 10px; font-weight: 700; }
.pef-ap__roll { font-family: 'IBM Plex Mono', monospace; font-size: 22px; background: var(--pef-cream);
	border: 1px dashed var(--pef-gold); display: inline-block; padding: 10px 20px; border-radius: 8px; margin: 6px 0 14px; color: var(--pef-maroon-dark); font-weight: 600; }

.pef-ap__spacer-sm { height: 6px; }

/* ---------- Sidebar Dashboard ---------- */
.pef-ap__dash { display: flex; min-height: 480px; margin: -32px; }
.pef-ap__dash-sidebar {
	width: 220px; flex-shrink: 0; background: linear-gradient(180deg, var(--pef-maroon) 0%, var(--pef-maroon-dark) 100%);
	padding: 24px 0; display: flex; flex-direction: column;
}
.pef-ap__dash-side-id { padding: 0 20px 18px; border-bottom: 1px solid rgba(255,255,255,.15); margin-bottom: 8px; }
.pef-ap__dash-side-name { color: #fff; font-family: 'Fraunces', serif; font-size: 15.5px; font-weight: 600; }
.pef-ap__dash-side-roll { color: var(--pef-gold-soft); font-family: 'IBM Plex Mono', monospace; font-size: 12px; margin-top: 4px; }
.pef-ap__dash-nav { flex: 1; display: flex; flex-direction: column; }
.pef-ap__dash-nav-toggle { display: none; } /* mobile-only; shown in the 640px media query below */
.pef-ap__dash-navbtn {
	display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none;
	color: rgba(255,255,255,.78); padding: 12px 20px; font-size: 13.5px; cursor: pointer; font-family: 'Inter', sans-serif;
	border-left: 3px solid transparent; transition: background .15s;
}
.pef-ap__dash-navbtn:hover { background: rgba(255,255,255,.08); color: #fff; }
.pef-ap__dash-navbtn.is-active { background: rgba(255,255,255,.14); color: #fff; font-weight: 600; border-left-color: var(--pef-gold); }
.pef-ap__dash-soon-pill {
	margin-left: auto; font-size: 9.5px; background: rgba(255,255,255,.18); color: #fff; padding: 2px 7px;
	border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
}
.pef-ap__dash-navbtn--logout { border-top: 1px solid rgba(255,255,255,.15); margin-top: 8px; padding-top: 14px; color: rgba(255,255,255,.65); }
.pef-ap__dash-main { flex: 1; padding: 28px 32px; overflow-x: hidden; text-align: left; }
.pef-ap__dash-main h2 { font-family: 'Fraunces', serif; color: var(--pef-maroon-dark); font-size: 19px; }
.pef-ap__dash-banner {
	background: linear-gradient(120deg, var(--pef-maroon) 0%, var(--pef-maroon-dark) 100%); color: #fff;
	border-radius: 12px; padding: 20px 24px; margin-bottom: 20px;
}
.pef-ap__dash-banner-date { font-size: 12px; opacity: .85; }
#pef-ap-root .pef-ap__dash-banner-title { margin: 6px 0 4px; color: #fff !important; font-size: 19px; }
.pef-ap__dash-banner-sub { margin: 0; opacity: .9; font-size: 13.5px; }
.pef-ap__dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 18px; }
.pef-ap__dash-stat { border: 1px solid var(--pef-line); border-radius: 10px; padding: 14px 16px; text-align: center; background: var(--pef-paper); }
.pef-ap__dash-stat-label { font-size: 11px; color: var(--pef-ink-soft); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.pef-ap__dash-stat-value { font-size: 16px; font-weight: 700; color: var(--pef-maroon-dark); }

/* ==========================================================================
   Mobile — applies across the whole plugin (auth, wizard steps, dashboard)
   ========================================================================== */
@media (max-width: 640px) {
	/* Container: break out of the theme's centered/padded content column so
	   the widget is flush with the real screen edges on phones, instead of
	   leaving a gap on the side(s) that matches the theme's own padding. */
	#pef-ap-root {
		border-radius: 0; border-left: none; border-right: none;
		width: 100vw; max-width: 100vw;
		margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
	}

	/* Topbar: allow it to wrap instead of squeezing pill + buttons */
	.pef-ap__topbar { padding: 14px 16px; gap: 8px 12px; }
	.pef-ap__topbar-right { font-size: 12px; gap: 6px; }
	.pef-ap__topbar-right .pef-ap__pill { padding: 4px 9px; font-size: 11px; }

	/* Stage: less padding so more usable width remains on a small screen */
	.pef-ap__stage { padding: 18px 16px; }
	.pef-ap__auth { max-width: 100%; }

	/* Stepper: compact the seals/labels so all 7 steps fit more comfortably */
	.pef-ap__step { min-width: 62px; }
	.pef-ap__seal { width: 28px; height: 28px; font-size: 11.5px; }
	.pef-ap__step-label { font-size: 9.5px; max-width: 62px; margin-top: 6px; }
	.pef-ap__step:not(:last-child)::after { top: 14px; }

	/* Nav buttons: full-width and stacked, easier to tap with a thumb */
	.pef-ap__nav { flex-direction: column; gap: 10px; }
	.pef-ap__nav .pef-ap__btn { width: 100%; min-width: 0; }

	/* Voucher / review headers: wrap instead of overflowing */
	.pef-ap__voucher-head, .pef-ap__voucher-amount { flex-wrap: wrap; gap: 8px; }
	.pef-ap__verify-head { flex-wrap: wrap; gap: 8px; }

	/* Uploads: stack the file info above the action button */
	.pef-ap__upload { flex-direction: column; align-items: stretch; text-align: left; }
	.pef-ap__upload .pef-ap__btn--sm { width: 100%; }
}

/* ---------- Sidebar Dashboard: mobile ----------
   Goal: collapse the full item list into a compact "menu" (tap to expand)
   instead of showing every item at once — desktop is untouched and keeps
   the full nav list permanently visible via the base rules above. */
@media (max-width: 640px) {
	.pef-ap__dash { flex-direction: column; margin: -18px -16px; }
	.pef-ap__dash-sidebar { width: 100%; padding: 16px 14px; }

	.pef-ap__dash-side-id {
		display: flex; align-items: center; gap: 12px; text-align: left;
		padding: 0 0 14px; margin-bottom: 12px;
	}
	.pef-ap__dash-side-info { min-width: 0; }
	.pef-ap__dash-side-photo-wrap { margin-bottom: 0 !important; flex-shrink: 0; }
	.pef-ap__dash-side-photo-wrap img { width: 52px !important; height: 62px !important; }
	.pef-ap__dash-side-photo-wrap label { display: block; font-size: 10px !important; }
	.pef-ap__dash-side-name { font-size: 14px; }

	/* Mobile menu: hidden on desktop (see .pef-ap__dash-nav-toggle default
	   rule below), shown here as a single "current section ▾" button. */
	.pef-ap__dash-nav-toggle {
		display: flex; width: 100%; align-items: center; justify-content: space-between;
		background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
		border-radius: 10px; padding: 12px 14px; font-size: 14px; font-weight: 600;
		color: #fff; margin-bottom: 8px; cursor: pointer;
	}
	.pef-ap__dash-nav-toggle-chevron { transition: transform .15s; }
	.pef-ap__dash-nav-toggle.is-open .pef-ap__dash-nav-toggle-chevron { transform: rotate(180deg); }

	/* The full item list is a plain vertical stack (a real "menu"), closed
	   by default and only shown once the toggle above is tapped. Being a
	   single column bounded to 100% width, it can never need horizontal
	   scrolling, and while closed it adds no height at all. */
	.pef-ap__dash-nav { display: none; flex-direction: column; gap: 6px; margin-bottom: 8px; }
	.pef-ap__dash-nav.is-open { display: flex; }
	.pef-ap__dash-navbtn {
		width: 100%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
		border-left: none; border-radius: 8px; padding: 11px 14px; font-size: 13.5px;
	}
	.pef-ap__dash-navbtn.is-active { background: #fff; color: var(--pef-maroon-dark); border-color: #fff; }
	.pef-ap__dash-navbtn--logout { display: none; width: 100%; border-top: none; margin-top: 0; background: none; border-style: dashed; }
	.pef-ap__dash-navbtn--logout.is-open { display: flex; }

	.pef-ap__dash-main { padding: 18px 4px; }
	.pef-ap__dash-banner { padding: 16px 18px; }
	.pef-ap__dash-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 400px) {
	.pef-ap__dash-stats { grid-template-columns: 1fr; }
}

/* Belt-and-braces: never allow the dashboard to scroll sideways on mobile. */
@media (max-width: 640px) {
	.pef-ap__dash, .pef-ap__dash-sidebar, .pef-ap__dash-main { max-width: 100%; overflow-x: hidden; }
}