/* ==========================================================================
   Griffen School ERP — Frontend
   Same "report card" palette as the admin side, tuned for a public-facing
   audience: warm violet-white canvas, indigo brand, module-coded accents.
   ========================================================================== */

.gse-frontend {
	--gse-ink: #221D3D;
	--gse-muted: #746D93;
	--gse-canvas: #FAF9FF;
	--gse-border: #E8E4F7;

	--gse-brand: #5B4FE9;
	--gse-brand-dark: #4338CA;
	--gse-brand-tint: #EEECFD;

	--gse-grape: #9B5DE5;
	--gse-grape-tint: #F4ECFC;
	--gse-teal: #0D9F98;
	--gse-teal-tint: #E4F7F5;
	--gse-leaf: #1FA97C;
	--gse-leaf-tint: #E5F8F0;
	--gse-coral: #F0553F;
	--gse-coral-tint: #FDEAE7;
	--gse-tangerine: #F08A24;
	--gse-tangerine-tint: #FDF0E1;
	--gse-gold: #D9A400;
	--gse-gold-tint: #FBF3D9;
	--gse-slate: #8B85A6;
	--gse-slate-tint: #F1F0F8;

	--gse-radius-hero: 20px;
	--gse-radius-lg: 16px;
	--gse-radius-md: 12px;

	color: var(--gse-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
	max-width: 100%;
}
.gse-frontend *, .gse-frontend *::before, .gse-frontend *::after { box-sizing: inherit; }
.gse-frontend h2, .gse-frontend h3 { color: var(--gse-ink); font-weight: 800; letter-spacing: -0.01em; }
.gse-contact, .gse-notice-archive, .gse-result-lookup, .gse-fee-lookup, .gse-leave-application, .gse-timetable { display: block; }
.gse-result-output { animation: gse-fade-in 0.25s ease; }
@keyframes gse-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------
 * Notices — colored left bar keyed to priority (a school notice
 * board convention: red pin = urgent, plain pin = routine)
 * ------------------------------------------------------------- */
.gse-notice-list { display: grid; gap: 16px; }
.gse-notice-card {
	background: #fff;
	border: 1px solid var(--gse-border);
	border-left: 5px solid var(--gse-brand);
	border-radius: var(--gse-radius-lg);
	padding: 18px 20px;
	box-shadow: 0 10px 22px -18px rgba(34, 29, 61, 0.3);
}
.gse-notice-card.gse-priority-high { border-left-color: var(--gse-coral); }
.gse-notice-card.gse-priority-low { border-left-color: var(--gse-slate); }
.gse-notice-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.gse-notice-card-head h3 { margin: 0; font-size: 17px; }
.gse-notice-date { color: var(--gse-muted); font-size: 12px; margin-top: 5px; font-weight: 600; }
.gse-notice-body { margin-top: 10px; font-size: 14px; line-height: 1.65; }
.gse-notice-attachment {
	display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700;
	color: var(--gse-brand-dark); text-decoration: none;
	background: var(--gse-brand-tint); padding: 6px 14px; border-radius: 999px;
}

.gse-badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.gse-badge-blue { background: var(--gse-brand-tint); color: var(--gse-brand-dark); }
.gse-badge-red { background: var(--gse-coral-tint); color: #A22F1E; }
.gse-badge-gray { background: var(--gse-slate-tint); color: var(--gse-slate); }

.gse-archive-search { display: flex; gap: 8px; margin-bottom: 20px; }
.gse-archive-search input {
	flex: 1; padding: 11px 16px; border: 1px solid var(--gse-border); border-radius: 999px; font-size: 14px;
	background: var(--gse-canvas);
}
.gse-archive-search button {
	padding: 11px 22px; background: var(--gse-brand); color: #fff; border: none; border-radius: 999px;
	font-weight: 700; cursor: pointer;
}
.gse-archive-search button:hover { background: var(--gse-brand-dark); }

.gse-student-search input, .gse-library-search input {
	width: 100%; padding: 13px 18px; border: 1px solid var(--gse-border); border-radius: 999px; font-size: 15px;
	background: #fff;
}
.gse-student-search input:focus, .gse-library-search input:focus { outline: 2px solid var(--gse-brand); }
.gse-search-results { margin-top: 12px; display: grid; gap: 8px; }
.gse-search-result-item {
	background: #fff; border: 1px solid var(--gse-border); border-radius: var(--gse-radius-md); padding: 11px 15px;
	display: flex; justify-content: space-between; font-size: 14px;
}
.gse-search-result-clickable { cursor: pointer; }
.gse-search-result-clickable:hover { background: var(--gse-brand-tint); }

.gse-school-profile {
	background: linear-gradient(160deg, #fff 0%, var(--gse-brand-tint) 100%);
	border: 1px solid var(--gse-border); border-radius: var(--gse-radius-hero); padding: 28px; text-align: center;
}
.gse-school-logo { max-height: 80px; margin-bottom: 14px; border-radius: 10px; }
.gse-school-meta { list-style: none; padding: 0; margin: 16px 0 0; text-align: left; display: inline-block; }
.gse-school-meta li { padding: 5px 0; font-size: 14px; }

.gse-empty { color: var(--gse-muted); text-align: center; padding: 22px 0; font-weight: 500; }

/* ---------------------------------------------------------------
 * Result lookup + print-ready A4 card
 * ------------------------------------------------------------- */
.gse-result-form {
	background: #fff; border: 1px solid var(--gse-border); border-radius: var(--gse-radius-hero);
	padding: 26px; max-width: 420px; margin: 0 auto 24px;
	box-shadow: 0 16px 34px -22px rgba(91, 79, 233, 0.35);
}
.gse-result-form h3 { margin-top: 0; }
.gse-result-form label { display: block; margin-bottom: 14px; font-weight: 700; font-size: 13px; }
.gse-result-form input {
	width: 100%; margin-top: 6px; padding: 11px 13px; border: 1px solid var(--gse-border);
	border-radius: 10px; font-size: 14px; background: var(--gse-canvas);
}
.gse-result-form input:focus { outline: 2px solid var(--gse-brand); }
.gse-result-form button {
	width: 100%; padding: 12px; background: var(--gse-brand); color: #fff; border: none;
	border-radius: 10px; font-weight: 700; cursor: pointer; font-size: 14px;
}
.gse-result-form button:hover { background: var(--gse-brand-dark); }
.gse-result-error { color: var(--gse-coral); font-size: 13px; margin-top: 10px; margin-bottom: 0; font-weight: 600; }

.gse-result-actions { text-align: center; margin-bottom: 14px; }
.gse-result-actions button {
	padding: 11px 26px; background: var(--gse-ink); color: #fff; border: none; border-radius: 999px;
	font-weight: 700; cursor: pointer; font-size: 13px;
}

.gse-result-card-print {
	background: #fff; border: 1px solid var(--gse-border); border-radius: var(--gse-radius-hero);
	padding: 32px; max-width: 720px; margin: 0 auto;
	box-shadow: 0 20px 40px -26px rgba(34, 29, 61, 0.35);
}
.gse-result-header { text-align: center; margin-bottom: 22px; border-bottom: 3px solid var(--gse-brand); padding-bottom: 16px; }
.gse-result-logo { max-height: 70px; margin-bottom: 10px; }
.gse-result-header h2 { margin: 0; font-size: 22px; }
.gse-result-subtitle { margin: 5px 0 0; color: var(--gse-brand-dark); letter-spacing: 0.06em; text-transform: uppercase; font-size: 11.5px; font-weight: 700; }

.gse-result-student-info { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.gse-result-photo { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; border: 1px solid var(--gse-border); }
.gse-result-student-info p { margin: 4px 0; font-size: 14px; }

.gse-result-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.gse-result-table th, .gse-result-table td {
	border: 1px solid var(--gse-border); padding: 9px 11px; text-align: left; font-size: 13px;
}
.gse-result-table th { background: var(--gse-canvas); font-weight: 700; }
.gse-status-pass { color: var(--gse-leaf); font-weight: 800; }
.gse-status-fail { color: var(--gse-coral); font-weight: 800; }

.gse-result-summary {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center;
}
.gse-result-summary > div { background: var(--gse-canvas); border-radius: var(--gse-radius-md); padding: 14px; }
.gse-result-summary span { display: block; font-size: 10.5px; color: var(--gse-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.gse-result-summary strong { font-size: 19px; font-weight: 800; }
.gse-result-status-pass { color: var(--gse-leaf); }
.gse-result-status-fail { color: var(--gse-coral); }

@media print {
	body * { visibility: hidden; }
	.gse-result-card-print, .gse-result-card-print * { visibility: visible; }
	.gse-result-card-print {
		position: absolute; left: 0; top: 0; width: 100%; max-width: none;
		border: none; box-shadow: none; padding: 20mm;
	}
	.gse-no-print, .gse-result-form { display: none !important; }
	@page { size: A4; margin: 0; }
}

/* ---------------------------------------------------------------
 * Homework — subject badge in grape, dates as small chips
 * ------------------------------------------------------------- */
.gse-homework-list { display: grid; gap: 14px; }
.gse-homework-card { background: #fff; border: 1px solid var(--gse-border); border-left: 5px solid var(--gse-grape); border-radius: var(--gse-radius-lg); padding: 16px 20px; }
.gse-homework-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.gse-homework-card-head h3 { margin: 0; font-size: 16px; }
.gse-homework-card-head .gse-badge { background: var(--gse-grape-tint); color: var(--gse-grape); }
.gse-homework-body { margin-top: 8px; font-size: 14px; line-height: 1.6; }
.gse-homework-dates { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--gse-muted); font-weight: 600; }

/* ---------------------------------------------------------------
 * Timetable — alternating day tints so the week is easy to scan
 * ------------------------------------------------------------- */
.gse-timetable-day { margin-bottom: 20px; }
.gse-timetable-day h3 { margin-bottom: 10px; font-size: 15px; padding: 6px 14px; border-radius: 999px; display: inline-block; background: var(--gse-brand-tint); color: var(--gse-brand-dark); }
.gse-timetable-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--gse-border); border-radius: var(--gse-radius-lg); overflow: hidden; }
.gse-timetable-table td { padding: 11px 14px; border-bottom: 1px solid var(--gse-border); font-size: 13px; }
.gse-tt-period { font-weight: 800; width: 90px; color: var(--gse-brand-dark); }
.gse-tt-time { color: var(--gse-muted); width: 120px; font-weight: 600; }
.gse-tt-subject { font-weight: 600; }
.gse-tt-teacher, .gse-tt-room { color: var(--gse-muted); }

/* ---------------------------------------------------------------
 * Events — gold date badge, image card
 * ------------------------------------------------------------- */
.gse-events-list { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gse-event-card { position: relative; background: #fff; border: 1px solid var(--gse-border); border-radius: var(--gse-radius-lg); overflow: hidden; box-shadow: 0 12px 26px -20px rgba(34, 29, 61, 0.3); }
.gse-event-image { width: 100%; height: 140px; object-fit: cover; display: block; }
.gse-event-date-badge {
	position: absolute; top: 12px; left: 12px; background: #fff; border-radius: 11px; padding: 7px 11px;
	text-align: center; box-shadow: 0 6px 16px rgba(34, 29, 61, 0.18);
}
.gse-event-day { display: block; font-size: 19px; font-weight: 800; line-height: 1; color: var(--gse-tangerine); }
.gse-event-month { display: block; font-size: 10px; text-transform: uppercase; color: var(--gse-muted); font-weight: 700; }
.gse-event-body { padding: 16px 18px; }
.gse-event-body h3 { margin: 0 0 5px; font-size: 15px; }
.gse-event-venue, .gse-event-time { margin: 3px 0; font-size: 12px; color: var(--gse-muted); font-weight: 600; }
.gse-event-desc { margin-top: 9px; font-size: 13px; }

/* ---------------------------------------------------------------
 * Fee lookup / Leave / Certificate verify — shared form chrome
 * ------------------------------------------------------------- */
.gse-fee-form, .gse-cert-verify form, .gse-leave-panel {
	background: #fff; border: 1px solid var(--gse-border); border-radius: var(--gse-radius-hero);
	padding: 26px; max-width: 460px; margin: 0 auto 20px;
	box-shadow: 0 16px 34px -22px rgba(91, 79, 233, 0.3);
}
.gse-fee-form label, .gse-cert-verify label, .gse-leave-panel label { display: block; margin-bottom: 14px; font-weight: 700; font-size: 13px; }
.gse-fee-form input, .gse-cert-verify input, .gse-leave-panel input,
.gse-leave-panel select, .gse-leave-panel textarea {
	width: 100%; margin-top: 6px; padding: 11px 13px; border: 1px solid var(--gse-border); border-radius: 10px; font-size: 14px;
	background: var(--gse-canvas);
}
.gse-leave-panel textarea { min-height: 90px; }
.gse-fee-form button, .gse-cert-verify button, .gse-leave-panel button {
	width: 100%; padding: 12px; background: var(--gse-brand); color: #fff; border: none;
	border-radius: 10px; font-weight: 700; cursor: pointer; font-size: 14px;
}
.gse-fee-form button:hover, .gse-cert-verify button:hover, .gse-leave-panel button:hover { background: var(--gse-brand-dark); }
.gse-fee-output { max-width: 620px; margin: 0 auto; }

.gse-leave-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; }
.gse-leave-tab {
	padding: 9px 20px; border-radius: 999px; border: 1px solid var(--gse-border); background: #fff;
	cursor: pointer; font-weight: 700; font-size: 13px; color: var(--gse-muted);
}
.gse-leave-tab.active { background: var(--gse-brand); color: #fff; border-color: var(--gse-brand); }
.gse-leave-success { color: var(--gse-leaf); font-size: 13px; margin-top: 10px; margin-bottom: 0; font-weight: 700; }

.gse-cert-result { max-width: 460px; margin: 0 auto; background: #fff; border: 1px solid var(--gse-border); border-radius: var(--gse-radius-hero); padding: 22px; text-align: center; }
.gse-cert-valid { color: var(--gse-leaf); font-weight: 800; font-size: 16px; margin-bottom: 12px; }

/* ---------------------------------------------------------------
 * Portals — gradient header banner, coded stat cards
 * ------------------------------------------------------------- */
.gse-portal-login, .gse-portal-loggedin {
	max-width: 400px; margin: 0 auto; background: #fff; border: 1px solid var(--gse-border);
	border-radius: var(--gse-radius-hero); padding: 26px;
	box-shadow: 0 16px 34px -22px rgba(91, 79, 233, 0.3);
}
.gse-portal-login input[type=text], .gse-portal-login input[type=password] {
	width: 100%; padding: 11px 13px; border: 1px solid var(--gse-border); border-radius: 10px; margin-bottom: 10px;
	background: var(--gse-canvas);
}
.gse-portal-login input[type=submit] {
	padding: 11px 22px; background: var(--gse-brand); color: #fff; border: none; border-radius: 10px;
	font-weight: 700; cursor: pointer;
}
.gse-portal-login input[type=submit]:hover { background: var(--gse-brand-dark); }

.gse-portal-dashboard { max-width: 760px; margin: 0 auto; }
.gse-portal-header {
	display: flex; align-items: center; gap: 16px; margin-bottom: 22px;
	background: linear-gradient(120deg, var(--gse-brand) 0%, var(--gse-grape) 100%);
	border-radius: var(--gse-radius-hero); padding: 22px 24px;
	box-shadow: 0 16px 32px -18px rgba(91, 79, 233, 0.45);
}
.gse-portal-avatar { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; border: 3px solid rgba(255,255,255,0.6); }
.gse-portal-header h2 { margin: 0; color: #fff; }
.gse-portal-header .gse-muted { color: rgba(255,255,255,0.85); }

.gse-portal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.gse-portal-card { background: #fff; border: 1px solid var(--gse-border); border-radius: var(--gse-radius-lg); padding: 18px; box-shadow: 0 10px 22px -18px rgba(34, 29, 61, 0.25); }
.gse-portal-card h3 { margin: 0 0 8px; font-size: 12.5px; color: var(--gse-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.gse-portal-stat { font-size: 27px; font-weight: 800; margin: 0; color: var(--gse-brand-dark); }

.gse-portal-list { list-style: none; margin: 0; padding: 0; }
.gse-portal-list li { padding: 9px 0; border-bottom: 1px solid var(--gse-border); font-size: 14px; }
.gse-portal-quicklinks { display: flex; gap: 10px; flex-wrap: wrap; }
.gse-portal-quicklinks a {
	padding: 9px 18px; background: var(--gse-brand); color: #fff; border-radius: 999px; text-decoration: none;
	font-size: 13px; font-weight: 700;
}
.gse-portal-quicklinks a:hover { background: var(--gse-brand-dark); }
.gse-portal-divider { border: none; border-top: 2px dashed var(--gse-border); margin: 26px 0; }

/* ---------------------------------------------------------------
 * Contact form
 * ------------------------------------------------------------- */
.gse-contact-form {
	max-width: 460px; margin: 20px auto 0; background: #fff; border: 1px solid var(--gse-border);
	border-radius: var(--gse-radius-hero); padding: 26px;
	box-shadow: 0 16px 34px -22px rgba(91, 79, 233, 0.3);
}
.gse-contact-form label { display: block; margin-bottom: 14px; font-weight: 700; font-size: 13px; }
.gse-contact-form input, .gse-contact-form textarea {
	width: 100%; margin-top: 6px; padding: 11px 13px; border: 1px solid var(--gse-border); border-radius: 10px; font-size: 14px;
	background: var(--gse-canvas);
}
.gse-contact-form textarea { min-height: 100px; }
.gse-contact-form button { padding: 11px 26px; background: var(--gse-brand); color: #fff; border: none; border-radius: 10px; font-weight: 700; cursor: pointer; }
.gse-contact-form button:hover { background: var(--gse-brand-dark); }

@media (max-width: 600px) {
	.gse-notice-card-head { flex-direction: column; align-items: flex-start; }
	.gse-archive-search { flex-direction: column; }
	.gse-result-summary { grid-template-columns: repeat(2, 1fr); }
	.gse-result-student-info { flex-direction: column; align-items: flex-start; }
	.gse-portal-header { flex-direction: column; align-items: flex-start; }
	.gse-events-list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Login + Unified Dashboard ("School Login" / "My Dashboard" pages)
   These are the two auto-created pages the whole login flow lives on, so
   they get the most polish: a centered auth card, role-coded badges, a
   consistent topbar with logout, and a clean "wrong portal" hand-off card
   for staff/admin accounts.
   ========================================================================== */

.gse-portal-login-card {
	max-width: 420px;
	margin: 40px auto;
	background: #fff;
	border: 1px solid var(--gse-border);
	border-radius: var(--gse-radius-hero);
	padding: 36px 32px 32px;
	box-shadow: 0 24px 60px -30px rgba(91, 79, 233, 0.45);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.gse-portal-login-card::before {
	content: "";
	position: absolute;
	top: -60px;
	right: -60px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--gse-brand-tint) 0%, transparent 70%);
	pointer-events: none;
}
.gse-portal-login-brand { margin-bottom: 22px; position: relative; }
.gse-portal-login-logo { max-height: 56px; margin-bottom: 10px; border-radius: 10px; }
.gse-portal-login-brand h2 { margin: 0 0 6px; font-size: 20px; }
.gse-portal-login-brand .gse-muted { font-size: 13.5px; margin: 0; color: var(--gse-muted); }

/* Style WordPress's native wp_login_form() markup so it matches the
   rest of the plugin instead of looking like an unstyled default form. */
.gse-portal-login-card #loginform { text-align: left; }
.gse-portal-login-card .login-username,
.gse-portal-login-card .login-password,
.gse-portal-login-card .login-remember,
.gse-portal-login-card .login-submit {
	margin: 0 0 16px;
}
.gse-portal-login-card label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--gse-ink);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 7px;
}
.gse-portal-login-card .login-remember label {
	display: flex;
	align-items: center;
	gap: 8px;
	text-transform: none;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--gse-muted);
	letter-spacing: normal;
}
.gse-portal-login-card .login-remember input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--gse-brand);
	margin: 0;
}
.gse-portal-login-card input.input,
.gse-portal-login-card input[type="text"],
.gse-portal-login-card input[type="password"],
.gse-portal-login-card input[type="email"] {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--gse-border);
	border-radius: 10px;
	font-size: 14.5px;
	background: var(--gse-canvas);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.gse-portal-login-card input.input:focus,
.gse-portal-login-card input[type="text"]:focus,
.gse-portal-login-card input[type="password"]:focus {
	outline: none;
	border-color: var(--gse-brand);
	background: #fff;
	box-shadow: 0 0 0 4px var(--gse-brand-tint);
}
.gse-portal-login-card .login-submit { margin-bottom: 0; }
.gse-portal-login-card input#wp-submit,
.gse-portal-login-card .login-submit input[type="submit"] {
	width: 100%;
	padding: 13px;
	background: var(--gse-brand);
	color: #fff;
	border: none;
	border-radius: 10px;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}
.gse-portal-login-card input#wp-submit:hover,
.gse-portal-login-card .login-submit input[type="submit"]:hover { background: var(--gse-brand-dark); }
.gse-portal-login-card input#wp-submit:active,
.gse-portal-login-card .login-submit input[type="submit"]:active { transform: translateY(1px); }

.gse-portal-loggedin {
	max-width: 420px; margin: 40px auto; background: #fff; border: 1px solid var(--gse-border);
	border-radius: var(--gse-radius-hero); padding: 32px; text-align: center;
	box-shadow: 0 24px 60px -30px rgba(91, 79, 233, 0.45);
}
.gse-portal-loggedin p { font-size: 14.5px; margin: 0 0 18px; }

.gse-portal-cta {
	display: inline-block;
	width: 100%;
	padding: 13px;
	margin-top: 4px;
	background: var(--gse-brand);
	color: #fff !important;
	border-radius: 10px;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: background 0.15s ease;
	box-sizing: border-box;
}
.gse-portal-cta:hover { background: var(--gse-brand-dark); }
.gse-portal-link-muted {
	display: block;
	margin-top: 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--gse-muted) !important;
	text-decoration: none;
}
.gse-portal-link-muted:hover { color: var(--gse-ink) !important; text-decoration: underline; }

.gse-portal-admin-card { max-width: 460px; }

/* Role chips - one glanceable color per portal, reused in the topbar
   and on the staff hand-off card. */
.gse-role-chip {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.gse-role-chip-student { background: var(--gse-brand-tint); color: var(--gse-brand-dark); }
.gse-role-chip-parent { background: var(--gse-teal-tint); color: var(--gse-teal); }
.gse-role-chip-teacher { background: var(--gse-grape-tint); color: var(--gse-grape); }
.gse-role-chip-admin { background: var(--gse-tangerine-tint); color: var(--gse-tangerine); }

/* Topbar - shown above every role dashboard so people always know
   which portal they're in and can log out in one click. */
.gse-portal-topbar {
	max-width: 760px;
	margin: 0 auto 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--gse-border);
}
.gse-portal-topbar-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	font-size: 15px;
	color: var(--gse-ink);
}
.gse-portal-topbar-logo { height: 30px; width: 30px; object-fit: cover; border-radius: 8px; }
.gse-portal-topbar-right { display: flex; align-items: center; gap: 12px; }
.gse-portal-topbar-right .gse-role-chip { margin-bottom: 0; }
.gse-portal-logout {
	font-size: 13px;
	font-weight: 700;
	color: var(--gse-coral) !important;
	text-decoration: none;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1.5px solid var(--gse-coral-tint);
	transition: background 0.15s ease, border-color 0.15s ease;
}
.gse-portal-logout:hover { background: var(--gse-coral-tint); border-color: var(--gse-coral); }

@media (max-width: 480px) {
	.gse-portal-login-card, .gse-portal-loggedin { margin: 20px auto; padding: 28px 22px; }
	.gse-portal-topbar { justify-content: center; text-align: center; }
	.gse-portal-topbar-right { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Application Shell — wraps every auto-created GSE page (topbar + sidebar
   navigation + breadcrumb + content) so moving between Login, Dashboard,
   Notice Board, Results, Fees, Library etc. feels like one connected
   School ERP application instead of separate WordPress pages. Scoped
   entirely under .gse-app so it can never leak into the active theme,
   Elementor layouts, or WooCommerce.
   ========================================================================== */

.gse-app {
	--gse-ink: #221D3D;
	--gse-muted: #746D93;
	--gse-canvas: #FAF9FF;
	--gse-border: #E8E4F7;
	--gse-brand: #5B4FE9;
	--gse-brand-dark: #4338CA;
	--gse-brand-tint: #EEECFD;
	--gse-grape: #9B5DE5;
	--gse-grape-tint: #F4ECFC;
	--gse-teal: #0D9F98;
	--gse-teal-tint: #E4F7F5;
	--gse-leaf: #1FA97C;
	--gse-leaf-tint: #E5F8F0;
	--gse-coral: #F0553F;
	--gse-coral-tint: #FDEAE7;
	--gse-tangerine: #F08A24;
	--gse-tangerine-tint: #FDF0E1;
	--gse-slate: #8B85A6;
	--gse-slate-tint: #F1F0F8;
	--gse-sidebar-w: 258px;
	--gse-topbar-h: 64px;

	position: relative;
	max-width: none;
	margin: -1px 0 0;
	color: var(--gse-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background: var(--gse-canvas);
	isolation: isolate;
}
.gse-app *, .gse-app *::before, .gse-app *::after { box-sizing: border-box; }
.gse-app .gse-icon { width: 19px; height: 19px; flex-shrink: 0; }

.gse-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 9999;
	background: var(--gse-brand); color: #fff !important; padding: 10px 18px; border-radius: 0 0 10px 0;
	text-decoration: none; font-weight: 700; font-size: 13px;
}
.gse-skip-link:focus { left: 0; }

/* ---------------------------------------------------------------
 * Topbar
 * ------------------------------------------------------------- */
.gse-app-topbar {
	position: sticky; top: 0; z-index: 40;
	height: var(--gse-topbar-h);
	display: flex; align-items: center; gap: 14px;
	padding: 0 20px;
	background: #fff;
	border-bottom: 1px solid var(--gse-border);
	box-shadow: 0 2px 14px -10px rgba(34, 29, 61, 0.25);
}
.gse-app-menu-toggle {
	display: none;
	align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid var(--gse-border);
	background: #fff; color: var(--gse-ink); cursor: pointer; flex-shrink: 0;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.gse-app-menu-toggle:hover { background: var(--gse-brand-tint); border-color: var(--gse-brand); }
.gse-app-brand { display: flex; align-items: center; gap: 10px; text-decoration: none !important; color: var(--gse-ink) !important; min-width: 0; }
.gse-app-brand-logo { height: 36px; width: 36px; object-fit: cover; border-radius: 9px; flex-shrink: 0; }
.gse-app-brand-mark {
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	height: 36px; width: 36px; border-radius: 9px; font-weight: 800; font-size: 16px; color: #fff;
	background: linear-gradient(135deg, var(--gse-brand) 0%, var(--gse-grape) 100%);
}
.gse-app-brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.gse-app-brand-name { font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
.gse-app-brand-tag { font-size: 10.5px; color: var(--gse-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

.gse-app-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.gse-app-user { font-weight: 700; font-size: 13.5px; color: var(--gse-ink); }
.gse-app-logout, .gse-app-login-cta {
	display: flex; align-items: center; gap: 6px;
	font-size: 13px; font-weight: 700; text-decoration: none !important;
	padding: 8px 14px; border-radius: 999px; transition: background 0.15s ease, border-color 0.15s ease;
}
.gse-app-logout { color: var(--gse-coral) !important; border: 1.5px solid var(--gse-coral-tint); }
.gse-app-logout:hover { background: var(--gse-coral-tint); border-color: var(--gse-coral); }
.gse-app-login-cta { color: #fff !important; background: var(--gse-brand); }
.gse-app-login-cta:hover { background: var(--gse-brand-dark); }

/* ---------------------------------------------------------------
 * Body: sidebar + main content
 * ------------------------------------------------------------- */
.gse-app-body { display: flex; align-items: stretch; min-height: calc(100vh - var(--gse-topbar-h)); }

.gse-app-sidebar {
	width: var(--gse-sidebar-w); flex-shrink: 0;
	background: #fff; border-right: 1px solid var(--gse-border);
	display: flex; flex-direction: column; justify-content: space-between;
	position: sticky; top: var(--gse-topbar-h); align-self: flex-start;
	height: calc(100vh - var(--gse-topbar-h));
	overflow-y: auto;
	padding: 16px 12px 12px;
}
.gse-app-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.gse-app-nav-link {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 14px; border-radius: 11px;
	color: var(--gse-muted) !important; text-decoration: none !important;
	font-weight: 700; font-size: 13.8px;
	transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.gse-app-nav-link:hover { background: var(--gse-brand-tint); color: var(--gse-brand-dark) !important; transform: translateX(2px); }
.gse-app-nav-link.is-active { background: var(--gse-brand); color: #fff !important; box-shadow: 0 8px 18px -10px rgba(91, 79, 233, 0.6); }
.gse-app-nav-link.is-active .gse-icon { color: #fff; }
.gse-app-sidebar-foot { border-top: 1px solid var(--gse-border); padding-top: 10px; margin-top: 10px; }
.gse-app-nav-link-danger { color: var(--gse-coral) !important; }
.gse-app-nav-link-danger:hover { background: var(--gse-coral-tint); color: #A22F1E !important; }

.gse-app-overlay { display: none; }

.gse-app-main { flex: 1; min-width: 0; padding: 28px 32px 60px; }
.gse-app-page-head { margin-bottom: 22px; }
.gse-app-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gse-muted); font-weight: 600; margin-bottom: 8px; }
.gse-app-breadcrumb a { color: var(--gse-muted); text-decoration: none; }
.gse-app-breadcrumb a:hover { color: var(--gse-brand-dark); text-decoration: underline; }
.gse-app-breadcrumb .gse-icon { width: 13px; height: 13px; }
.gse-app-page-head h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--gse-ink); }
.gse-app-content > *:first-child { margin-top: 0; }

/* Fade-in for content, respecting reduced-motion preference */
.gse-app-content { animation: gse-fade-in 0.3s ease; }
@media (prefers-reduced-motion: reduce) {
	.gse-app-content, .gse-result-output { animation: none !important; }
	.gse-app-nav-link:hover { transform: none; }
}

/* ---------------------------------------------------------------
 * Mobile: collapsible drawer sidebar
 * ------------------------------------------------------------- */
@media (max-width: 960px) {
	.gse-app-menu-toggle { display: inline-flex; }
	.gse-app-brand-tag { display: none; }
	.gse-app-user { display: none; }
	.gse-app-body { position: relative; }
	.gse-app-sidebar {
		position: fixed; top: 0; left: 0; height: 100dvh;
		transform: translateX(-105%);
		transition: transform 0.25s ease;
		z-index: 60; box-shadow: 20px 0 50px -20px rgba(34, 29, 61, 0.35);
		padding-top: calc(var(--gse-topbar-h) + 10px);
	}
	.gse-app[data-gse-sidebar-open] .gse-app-sidebar { transform: translateX(0); }
	.gse-app-overlay {
		display: none; position: fixed; inset: 0; z-index: 50;
		background: rgba(34, 29, 61, 0.45); backdrop-filter: blur(1px);
	}
	.gse-app[data-gse-sidebar-open] .gse-app-overlay { display: block; }
	.gse-app-main { padding: 22px 16px 48px; }
	.gse-app-page-head h1 { font-size: 21px; }
}
@media (max-width: 480px) {
	.gse-app-topbar { padding: 0 12px; gap: 10px; }
	.gse-app-brand-name { max-width: 38vw; font-size: 14px; }
	.gse-app-logout-label { display: none; }
	.gse-app-logout { padding: 8px; }
}

/* ---------------------------------------------------------------
 * Auth split screen (login page)
 * ------------------------------------------------------------- */
.gse-auth-split {
	display: grid; grid-template-columns: 1.1fr 1fr; min-height: calc(100vh - var(--gse-topbar-h));
	align-items: stretch;
}
.gse-auth-hero {
	position: relative; overflow: hidden;
	background: linear-gradient(155deg, var(--gse-brand) 0%, var(--gse-grape) 55%, #7C3FE0 100%);
	display: flex; align-items: center; padding: 60px;
	color: #fff;
}
.gse-auth-hero::before, .gse-auth-hero::after {
	content: ""; position: absolute; border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, transparent 70%);
}
.gse-auth-hero::before { width: 340px; height: 340px; top: -120px; right: -100px; }
.gse-auth-hero::after { width: 260px; height: 260px; bottom: -90px; left: -60px; }
.gse-auth-hero-inner { position: relative; max-width: 420px; }
.gse-auth-hero-logo { height: 52px; margin-bottom: 20px; border-radius: 10px; background: #fff; padding: 6px; }
.gse-auth-hero-inner h1 { font-size: 32px; font-weight: 800; margin: 0 0 14px; letter-spacing: -0.01em; }
.gse-auth-hero-inner > p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.9); margin: 0 0 26px; }
.gse-auth-hero-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.gse-auth-hero-points li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; }
.gse-auth-hero-points .gse-icon { background: rgba(255,255,255,0.18); border-radius: 9px; padding: 6px; width: 30px; height: 30px; }

.gse-auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--gse-canvas); }
.gse-portal-login-links { text-align: center; margin-top: 16px; }
.gse-portal-login-links a { font-size: 13px; font-weight: 700; color: var(--gse-brand-dark); text-decoration: none; }
.gse-portal-login-links a:hover { text-decoration: underline; }

@media (max-width: 860px) {
	.gse-auth-split { grid-template-columns: 1fr; }
	.gse-auth-hero { padding: 42px 28px; }
	.gse-auth-hero-inner h1 { font-size: 24px; }
}

/* ---------------------------------------------------------------
 * Dashboard: extra stat variants (ring gauge, 4-col grid, sections)
 * ------------------------------------------------------------- */
.gse-portal-grid-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.gse-portal-card-ring { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.gse-portal-stat-sm { font-size: 20px; }
.gse-portal-stat-caption { font-size: 11.5px; font-weight: 600; }
.gse-portal-section { margin-top: 26px; }
.gse-portal-section h3 { margin-bottom: 10px; }

.gse-portal-avatar-fallback {
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 24px; color: #fff;
	background: linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0.05));
}

.gse-ring {
	--gse-ring-size: 84px;
	position: relative;
	width: var(--gse-ring-size); height: var(--gse-ring-size);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: conic-gradient(var(--gse-ring-color, var(--gse-brand)) calc(var(--gse-ring-pct, 0) * 1%), var(--gse-slate-tint) 0);
}
.gse-ring::before {
	content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff;
}
.gse-ring-value { position: relative; font-weight: 800; font-size: 17px; color: var(--gse-ink); }
.gse-ring-good { --gse-ring-color: var(--gse-leaf); }
.gse-ring-ok { --gse-ring-color: var(--gse-tangerine); }
.gse-ring-low { --gse-ring-color: var(--gse-coral); }

/* ---------------------------------------------------------------
 * Password visibility toggle (login + any password field)
 * ------------------------------------------------------------- */
.gse-pw-wrap { position: relative; }
.gse-pw-wrap input[type="password"], .gse-pw-wrap input[type="text"] { padding-right: 42px !important; }
.gse-pw-toggle {
	position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
	background: none; border: none; cursor: pointer; padding: 4px;
	color: var(--gse-muted); display: flex; align-items: center;
}
.gse-pw-toggle:hover { color: var(--gse-brand); }
.gse-pw-toggle .gse-icon { width: 18px; height: 18px; }

/* ---------------------------------------------------------------
 * Skeleton / loading state for AJAX-driven widgets (student search,
 * result lookup, fee lookup, leave status, library search)
 * ------------------------------------------------------------- */
.gse-is-loading { position: relative; min-height: 44px; pointer-events: none; opacity: 0.65; }
.gse-is-loading::after {
	content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px;
	border: 3px solid var(--gse-brand-tint); border-top-color: var(--gse-brand); border-radius: 50%;
	animation: gse-spin 0.7s linear infinite;
}
@keyframes gse-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gse-is-loading::after { animation-duration: 1.4s; } }