/* TSP School Portal — Premium Corporate Light Theme v1.0.0
   Brand-aligned to testseriespro.com / championship.testseriespro.com
   (primary blue #2563EB, navy heading #1E293B, gold/amber accent #F59E0B,
   Poppins for display type, DM Sans for body text). Scoped entirely to
   .tspre-portal so it never leaks into other pages. Deliberately a
   separate stylesheet from portal.css (the shared dark "glass" theme
   used by the Employee/Partner portals) - school-portal-light.css is
   the ONLY stylesheet enqueued on the School Portal page. */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

:root, .tspre-portal{
	--tsp-blue:#2563eb;
	--tsp-blue-dark:#1d4ed8;
	--tsp-navy:#0f1b3d;
	--tsp-navy-2:#1e3a8a;
	--tsp-heading:#1e293b;
	--tsp-text:#334155;
	--tsp-muted:#64748b;
	--tsp-gold:#f59e0b;
	--tsp-gold-dark:#b45309;
	--tsp-green:#16a34a;
	--tsp-red:#dc2626;
	--tsp-purple:#7c3aed;
	--tsp-bg:#f5f7fb;
	--tsp-card:#ffffff;
	--tsp-border:#e2e8f0;
	--tsp-border-soft:#edf1f7;
	--tsp-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 28px rgba(15,23,42,.07);
	--tsp-radius:16px;
}
.tspre-portal{
	font-family:'DM Sans','Segoe UI',sans-serif;
	background:var(--tsp-bg);
	color:var(--tsp-text);
	min-height:100vh;
	padding:0;
	margin:-20px;
}
.tspre-portal h1,.tspre-portal h2,.tspre-portal h3,
.tp-brand-name,.tp-card-title,.tp-hero-name,.tp-kpi-value,
.tp-school-name,.tp-paycard-value,.tp-meta-card-value{
	font-family:'Poppins',sans-serif;
	color:var(--tsp-heading);
}

/* ---------- Header ---------- */
.tp-header{
	display:flex;justify-content:space-between;align-items:center;
	padding:18px 28px;background:#ffffff;border-bottom:1px solid var(--tsp-border);
	box-shadow:0 1px 0 rgba(15,23,42,.02);
}
.tp-brand-name{font-size:19px;font-weight:700;color:var(--tsp-heading)}
.tp-brand-sub{font-size:12.5px;color:var(--tsp-muted);margin-top:3px}
.tp-header-right{display:flex;align-items:center;gap:10px}

/* ---------- Buttons ---------- */
.tp-btn{
	border:none;border-radius:9px;padding:10px 18px;font-size:13px;font-weight:700;
	cursor:pointer;transition:all .18s ease;text-decoration:none;
	display:inline-flex;align-items:center;justify-content:center;text-align:center;
	font-family:'DM Sans',sans-serif;letter-spacing:.01em;
}
.tp-btn-primary{
	background:linear-gradient(135deg,var(--tsp-blue),var(--tsp-blue-dark));
	color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.28);
}
.tp-btn-primary:hover{filter:brightness(1.07);box-shadow:0 8px 20px rgba(37,99,235,.36)}
.tp-btn-primary:disabled{opacity:.6;cursor:not-allowed}
.tp-btn-gold{
	background:linear-gradient(135deg,#fbbf24,var(--tsp-gold));
	color:#3d2400;box-shadow:0 6px 16px rgba(245,158,11,.3);
}
.tp-btn-gold:hover{filter:brightness(1.05)}
.tp-btn-success{background:var(--tsp-green);color:#fff}.tp-btn-success:hover{background:#15803d}
.tp-btn-danger{background:var(--tsp-red);color:#fff}.tp-btn-danger:hover{background:#b91c1c}
.tp-btn-ghost{
	background:#f1f5f9;color:var(--tsp-text);border:1px solid var(--tsp-border);
}
.tp-btn-ghost:hover{background:#e8edf5;color:var(--tsp-heading)}

/* ---------- Sidebar ---------- */
.tp-portal-sidebar{background:transparent}
.tp-sidebar-link{color:var(--tsp-muted) !important;font-weight:500}
.tp-sidebar-link:hover{background:#eef3ff !important;color:var(--tsp-blue) !important}
.tp-sidebar-link.tp-active{background:#eef3ff !important;color:var(--tsp-blue) !important;border-left:2px solid var(--tsp-blue) !important;font-weight:700}
@media (max-width:820px){.tp-portal-sidebar{display:none}}

/* ---------- Cards ---------- */
.tp-card{
	background:var(--tsp-card);border:1px solid var(--tsp-border);border-radius:var(--tsp-radius);
	margin-bottom:20px;overflow:hidden;box-shadow:var(--tsp-shadow);
}
.tp-card-header{
	display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
	padding:18px 20px;border-bottom:1px solid var(--tsp-border-soft);background:#fbfcfe;
}
.tp-card-title{font-size:15.5px;font-weight:700;color:var(--tsp-heading)}
.tp-card-sub{font-size:12px;color:var(--tsp-muted);margin-top:2px}
.tp-loading{color:var(--tsp-muted);font-size:13px;padding:40px;text-align:center}
.tp-empty{color:var(--tsp-muted);font-size:13px;padding:32px;text-align:center}

/* ---------- Hero / CTA banner (payment nudge) ---------- */
.tp-hero-card{
	background:linear-gradient(135deg,var(--tsp-navy) 0%,var(--tsp-navy-2) 55%,#2540a8 100%);
	border:1px solid rgba(15,27,61,.4);
	border-radius:var(--tsp-radius);padding:22px 24px;
	box-shadow:0 12px 30px rgba(15,27,61,.22);
}
.tp-hero-card p, .tp-hero-card strong{color:#f8fafc}
.tp-hero-avatar{width:56px;height:56px;background:linear-gradient(135deg,var(--tsp-blue),var(--tsp-blue-dark));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;flex-shrink:0}
.tp-hero-name{font-size:22px;font-weight:700;color:#fff}
.tp-hero-sub{font-size:13px;color:#cbd5e1;margin-top:4px}
.tp-chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:4px 12px;font-size:12px;color:#e2e8f0}

/* ---------- KPI grid ---------- */
.tp-kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.tp-kpi-card{
	background:var(--tsp-card);border:1px solid var(--tsp-border);border-top:3px solid;
	border-radius:var(--tsp-radius);padding:18px;text-align:center;box-shadow:var(--tsp-shadow);
}
.tp-kpi-icon{font-size:20px;margin-bottom:6px}
.tp-kpi-value{font-size:24px;font-weight:800;margin-bottom:4px;color:var(--tsp-heading)}
.tp-kpi-label{font-size:11px;color:var(--tsp-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}

/* ---------- Status chips ---------- */
.tp-status-chip{font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap;display:inline-block}

/* ---------- Table ---------- */
.tp-table{width:100%;border-collapse:collapse;font-size:13.5px}
.tp-table thead{background:#f8fafc}
.tp-table th{padding:12px 14px;text-align:left;font-size:11px;font-weight:700;color:var(--tsp-muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--tsp-border)}
.tp-table td{padding:12px 14px;border-bottom:1px solid var(--tsp-border-soft);color:var(--tsp-text)}
.tp-table tbody tr:hover{background:#f8faff}

/* ---------- Form elements ---------- */
.tp-form-group{margin-bottom:14px}
.tspre-portal label{display:block !important;font-size:12px !important;font-weight:600 !important;color:var(--tsp-muted) !important;margin-bottom:6px !important}
.tspre-portal .tp-input,
.tspre-portal input,
.tspre-portal select,
.tspre-portal textarea{
	width:100% !important;
	background:#ffffff !important;
	border:1px solid var(--tsp-border) !important;
	border-radius:9px !important;
	padding:11px 13px !important;
	color:var(--tsp-heading) !important;
	font-size:13.5px !important;
	font-family:'DM Sans',sans-serif !important;
	box-sizing:border-box !important;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.tspre-portal .tp-input:focus,
.tspre-portal input:focus,
.tspre-portal select:focus,
.tspre-portal textarea:focus{
	outline:none !important;
	border-color:var(--tsp-blue) !important;
	box-shadow:0 0 0 3px rgba(37,99,235,.14) !important;
}
.tp-check-label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tsp-text);background:#f8fafc;border:1px solid var(--tsp-border);border-radius:9px;padding:12px;cursor:pointer}

/* ---------- Footer ---------- */
.tp-portal-footer{color:var(--tsp-muted)}
.tp-portal-footer a{color:var(--tsp-blue);text-decoration:none;font-weight:600}
.tp-portal-footer a:hover{text-decoration:underline}

/* ---------- Login screen ---------- */
.tp-login-wrap{
	min-height:100vh;display:flex;align-items:center;justify-content:center;
	background:radial-gradient(circle at 15% 15%, rgba(37,99,235,.10), transparent 45%),
	           radial-gradient(circle at 85% 85%, rgba(245,158,11,.10), transparent 45%),
	           var(--tsp-bg);
	font-family:'DM Sans',sans-serif;padding:20px;box-sizing:border-box;margin:-20px;
}
.tp-login-card{
	background:#ffffff;border:1px solid var(--tsp-border);border-radius:20px;
	padding:44px 40px;width:100%;max-width:420px;box-shadow:0 20px 50px rgba(15,23,42,.10);
}
.tp-login-badge{
	width:52px;height:52px;border-radius:14px;margin:0 auto 16px;
	background:linear-gradient(135deg,var(--tsp-blue),var(--tsp-blue-dark));
	display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;
	box-shadow:0 8px 20px rgba(37,99,235,.3);
}

/* ---------- Small screens ---------- */
@media (max-width:480px){
	.tspre-portal{margin:-12px}
	.tp-header{padding:14px 16px;flex-wrap:wrap;gap:8px}
	.tp-hero-card{padding:18px}
	.tp-kpi-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}