/* ===================================================== */
/* staff LOGIN SECTION */
/* ===================================================== */

#staff-login-section{
	position:relative;
	width:100%;
	padding:40px 4%;
	overflow:hidden;

	background:
		linear-gradient(
			180deg,
			#f8fbff 0%,
			#ffffff 100%
		);
}


/* ===================================================== */
/* BACKGROUND GLOWS */
/* ===================================================== */

.staff-login-glow{
	position:absolute;
	border-radius:50%;
	filter:blur(90px);
	opacity:0.10;
	pointer-events:none;
}

.staff-login-glow-left{
	width:220px;
	height:220px;
	background:#2563eb;
	top:-80px;
	left:-80px;
}

.staff-login-glow-right{
	width:200px;
	height:200px;
	background:#06b6d4;
	right:-80px;
	bottom:-80px;
}


/* ===================================================== */
/* WRAPPER */
/* ===================================================== */

.staff-login-wrapper{
	position:relative;
	z-index:2;

	max-width:1200px;
	margin:auto;

	display:grid;
	grid-template-columns:1fr 390px;
	gap:24px;

	align-items:start;
}


/* ===================================================== */
/* SCHOOL PANEL */
/* ===================================================== */

.staff-school-panel{
	position:relative;

	padding:30px;

	border-radius:24px;

	background:
		linear-gradient(
			135deg,
			#0f172a,
			#1e293b
		);

	color:#ffffff;

	overflow:hidden;

	box-shadow:
		0 15px 40px rgba(15,23,42,0.10);
}

.staff-school-panel::before{
	content:"";

	position:absolute;
	top:-100px;
	right:-100px;

	width:220px;
	height:220px;

	border-radius:50%;

	background:
		radial-gradient(
			rgba(255,255,255,0.08),
			transparent
		);
}


/* ===================================================== */
/* TOP */
/* ===================================================== */

.staff-school-top{
	position:relative;
	z-index:2;
}


/* ===================================================== */
/* LOGO BLOCK */
/* ===================================================== */

.staff-school-logo-block{
	display:flex;
	align-items:flex-start;
	gap:18px;

	margin-bottom:22px;
}

.staff-school-logo-wrap{
	width:82px;
	height:82px;

	border-radius:20px;

	background:#ffffff;

	display:flex;
	align-items:center;
	justify-content:center;

	padding:10px;

	flex-shrink:0;
}

.staff-school-logo{
	width:100%;
	height:100%;
	object-fit:contain;
}

.staff-school-title{
	flex:1;
}

.staff-access-badge{
	display:inline-flex;
	align-items:center;
	gap:8px;

	padding:7px 14px;

	border-radius:100px;

	background:rgba(255,255,255,0.08);

	font-size:0.78rem;
	font-weight:600;

	margin-bottom:16px;
}

.staff-school-title h1{
	font-size:1.8rem;
	line-height:1.2;
	font-weight:800;

	margin-bottom:14px;
}

.staff-school-name{
	background:
		linear-gradient(
			135deg,
			#60a5fa,
			#22d3ee
		);

	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}


/* ===================================================== */
/* META */
/* ===================================================== */

.staff-school-meta{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
}

.staff-meta-item{
	display:flex;
	align-items:center;
	gap:10px;

	padding:12px 16px;

	border-radius:14px;

	background:rgba(255,255,255,0.06);

	border:1px solid rgba(255,255,255,0.06);

	font-size:0.86rem;
	color:rgba(255,255,255,0.88);
}

.staff-meta-item i{
	color:#60a5fa;
	font-size:0.9rem;
}


/* ===================================================== */
/* NOTICE PANEL */
/* ===================================================== */

.staff-school-notice{
	position:relative;

	padding:18px 20px;

	border-radius:20px;

	background:rgba(255,255,255,0.06);

	border:1px solid rgba(255,255,255,0.08);
}

.staff-school-notice-header{
	display:flex;
	align-items:center;
	gap:10px;

	font-size:0.86rem;
	font-weight:700;

	margin-bottom:10px;

	color:#93c5fd;
}

.staff-school-notice p{
	font-size:0.9rem;
	line-height:1.7;

	color:rgba(255,255,255,0.82);
}


/* ===================================================== */
/* LOGIN PANEL */
/* ===================================================== */

.staff-login-panel{
	display:flex;
	align-items:flex-start;
	justify-content:center;
}


/* ===================================================== */
/* FORM */
/* ===================================================== */

#staff-login-form{
	width:100%;

	padding:28px 26px;

	border-radius:24px;

	background:#ffffff;

	border:1px solid #e2e8f0;

	box-shadow:
		0 15px 40px rgba(15,23,42,0.05);
}


/* ===================================================== */
/* FEEDBACK */
/* ===================================================== */

#staff-feedback{
	display:none;

	padding:12px 14px;

	border-radius:12px;

	background:#ef4444;
	color:#ffffff;

	font-size:0.88rem;

	margin-bottom:18px;
}


/* ===================================================== */
/* HEADER */
/* ===================================================== */

.staff-form-header{
	margin-bottom:22px;
}

.staff-form-badge{
	display:inline-flex;
	align-items:center;
	gap:8px;

	padding:7px 14px;

	border-radius:100px;

	background:rgba(37,99,235,0.08);

	color:#2563eb;

	font-size:0.78rem;
	font-weight:600;

	margin-bottom:16px;
}

.staff-form-header h2{
	font-size:1.45rem;
	font-weight:800;
	color:#0f172a;

	margin-bottom:8px;
}

.staff-form-header p{
	font-size:0.9rem;
	color:#64748b;
	line-height:1.6;
}


/* ===================================================== */
/* INPUTS */
/* ===================================================== */

.staff-input-group{
	margin-bottom:16px;
}

.staff-input-group label{
	display:block;

	font-size:0.84rem;
	font-weight:600;

	color:#334155;

	margin-bottom:7px;
}

.staff-input-wrap{
	position:relative;
}

.staff-input-wrap i{
	position:absolute;
	left:14px;
	top:50%;
	transform:translateY(-50%);

	color:#64748b;
	font-size:0.85rem;
}

.staff-input{
	width:100%;

	height:48px;

	padding:0 14px 0 42px;

	border-radius:12px;

	border:1px solid #dbe2ea;

	background:#ffffff;

	font-size:0.92rem;

	transition:
		border-color 0.3s ease,
		box-shadow 0.3s ease;
}

.staff-input:focus{
	outline:none;

	border-color:#2563eb;

	box-shadow:
		0 0 0 4px rgba(37,99,235,0.08);
}


/* ===================================================== */
/* OPTIONS */
/* ===================================================== */

.staff-login-options{
	margin-top:2px;
	margin-bottom:20px;
}

.staff-remember-wrap{
	display:flex;
	align-items:center;
	gap:10px;

	font-size:0.86rem;
	color:#475569;
}


/* ===================================================== */
/* BUTTON */
/* ===================================================== */

.staff-login-btn{
	width:100%;
	height:50px;

	border:none;
	border-radius:13px;

	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;

	background:
		linear-gradient(
			135deg,
			#2563eb,
			#06b6d4
		);

	color:#ffffff;

	font-size:0.92rem;
	font-weight:700;

	cursor:pointer;

	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.staff-login-btn:hover{
	transform:translateY(-2px);

	box-shadow:
		0 12px 24px rgba(37,99,235,0.18);
}


/* ===================================================== */
/* LINKS */
/* ===================================================== */

.staff-login-links{
	display:flex;
	justify-content:flex-end;

	margin-top:18px;
}

.staff-login-links a{
	color:#2563eb;

	text-decoration:none;

	font-size:0.84rem;
	font-weight:600;
}

.staff-login-links a:hover{
	text-decoration:underline;
}


/* ===================================================== */
/* RESPONSIVE */
/* ===================================================== */

@media (max-width:1100px){

	.staff-login-wrapper{
		grid-template-columns:1fr;
	}
}

@media (max-width:768px){

	#staff-login-section{
		padding:30px 4%;
	}

	.staff-school-panel{
		padding:24px 20px;
	}

	.staff-school-logo-block{
		flex-direction:column;
		align-items:flex-start;
	}

	.staff-school-title h1{
		font-size:1.55rem;
	}

	#staff-login-form{
		padding:24px 20px;
	}
}



/* ===================================================== */
/* SCHOOL DATA LOAD ANIMATION */
/* ===================================================== */

.staff-school-panel{
	transition:
		transform 0.45s ease,
		box-shadow 0.45s ease;
}

.staff-school-loaded{
	animation:staffSchoolFade 0.55s ease;
}

.staff-school-logo{
	transition:
		opacity 0.35s ease,
		transform 0.35s ease;
}

.staff-school-loaded .staff-school-logo{
	transform:scale(1.03);
}

.staff-school-name,
.staff-school-notice p{
	transition:
		opacity 0.35s ease,
		transform 0.35s ease;
}

.staff-school-loaded .staff-school-name,
.staff-school-loaded .staff-school-notice p{
	animation:textFadeSlide 0.5s ease;
}

@keyframes staffSchoolFade{

	0%{
		opacity:0.7;
		transform:translateY(8px);
	}

	100%{
		opacity:1;
		transform:translateY(0);
	}
}

@keyframes textFadeSlide{

	0%{
		opacity:0;
		transform:translateY(8px);
	}

	100%{
		opacity:1;
		transform:translateY(0);
	}
}