/*Login*/
/* =========================
   LOGIN PAGE LAYOUT
========================= */

.login-container {
	display: flex;
	height: 100vh;
	width: 100%;
	font-family: 'Segoe UI', sans-serif;
}

/* LEFT SIDE (FORM) */
/* CENTER LEFT SIDE CONTENT */
.login-left {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #f8fafc;
}

/* LOGIN CARD (THIS IS WHAT YOU WERE MISSING) */
.login-card {
	width: 100%;
	max-width: 420px;
	background: #ffffff;
	padding: 35px;
	border-radius: 18px;
	box-shadow: 0 15px 35px rgba(0,0,0,0.10);
}

	/* STACK INPUTS VERTICALLY */
	.login-card form {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	/* HEADINGS */
	.login-card h1 {
		margin: 0;
		font-size: 28px;
		color: #1e293b;
	}

	.login-card h2 {
		margin: 0;
		font-size: 16px;
		color: #64748b;
		margin-bottom: 10px;
	}

	/* INPUT FIELDS FULL WIDTH + STACKED */
	.login-card .form-group {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	/* INPUT STYLE */
	.login-card .form-control {
		width: 100%;
		border-radius: 10px;
		border: 1px solid #cbd5e1;
		padding: 12px;
	}

		/* FOCUS EFFECT */
		.login-card .form-control:focus {
			border-color: #1e3a8a;
			box-shadow: 0 0 0 3px rgba(30,58,138,0.15);
			outline: none;
		}

	/* BUTTON */
	.login-card .btn-primary {
		background: #1e3a8a;
		border: none;
		border-radius: 10px;
		padding: 12px;
		font-weight: 600;
	}

		.login-card .btn-primary:hover {
			background: #152c6b;
		}

/* REMEMBER ME */
.remember-me {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 5px;
}

	.remember-me input[type="checkbox"] {
		width: 16px;
		height: 16px;
		cursor: pointer;
	}

	.remember-me label {
		margin: 0;
		cursor: pointer;
		font-size: 14px;
		color: #334155;
	}

/* RIGHT SIDE (IMAGE PANEL) */
.login-right {
	flex: 1;
	/*background: url('images/school-bg.jpg') center/cover no-repeat;*/
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

	/* DARK BLUE OVERLAY */
	.login-right .overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(30, 58, 138, 0.75); /* dark blue overlay */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* TEXT ON IMAGE */
	.login-right .content {
		color: white;
		text-align: center;
		padding: 20px;
	}

	.login-right h1 {
		font-size: 32px;
		margin-bottom: 10px;
	}

	.login-right p {
		font-size: 16px;
		opacity: 0.9;
	}

/* RESPONSIVE */
@media (max-width: 768px) {
	.login-container {
		flex-direction: column;
	}

	.login-right {
		display: none;
	}

	.login-left {
		width: 100%;
	}
}



/*Dashboard*/
.dashboard-container {
	padding: 0px 25px 25px 25px;
	background: #f8fafc;
	min-height: 100vh;
}

.welcome-section h1 {
	color: #1e3a8a;
	font-size: 32px;
	margin-bottom: 5px;
}

.welcome-section p {
	color: #64748b;
	margin-bottom: 25px;
}


.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
	gap: 20px;
	margin-bottom: 25px;
}

.stat-card {
	background: white;
	border-radius: 18px;
	padding: 25px;
	display: flex;
	align-items: center;
	gap: 20px;
	box-shadow: 0 4px 20px rgba(0,0,0,.08);
}

.stat-icon {
	width: 65px;
	height: 65px;
	border-radius: 50%;
	background: #1e3a8a;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
}

.stat-card h2 {
	margin: 0;
	color: #1e293b;
}

.stat-card span {
	color: #64748b;
}

/* DASHBOARD CARDS */

.dashboard-card {
	background: white;
	border-radius: 18px;
	padding: 25px;
	box-shadow: 0 4px 20px rgba(0,0,0,.08);
}

	.dashboard-card h3 {
		margin-bottom: 20px;
		color: #1e3a8a;
	}

.dashboard-row {
	margin-bottom: 25px;
}

.dashboard-panels {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
	gap: 20px;
}

/* QUICK ACTIONS */

.action-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
	gap: 15px;
}

.action-btn {
	text-decoration: none;
	background: #1e3a8a;
	color: white;
	padding: 14px;
	border-radius: 10px;
	text-align: center;
	transition: .3s;
	font-weight: 600;
}

	.action-btn:hover {
		background: #152c6b;
		color: white;
	}

/* ATTENDANCE */

.attendance-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e5e7eb;
}

	.attendance-item strong {
		color: #1e3a8a;
	}

/* ACTIVITY */

.activity-list {
	padding-left: 20px;
}

	.activity-list li {
		margin-bottom: 12px;
		color: #475569;
	}


/*Register page*/

/* PAGE BACKGROUND */
.auth-page {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: flex-start; /* move upward */
	padding-top: 30px;
	padding-bottom: 20px;
	background: #f8fafc;
}

/* CARD */
.auth-card {
	width: 100%;
	max-width: 450px;
	background: #ffffff;
	padding: 35px;
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

	/* TITLE */
	.auth-card h1 {
		color: #1e3a8a;
		font-size: 28px;
		margin-bottom: 5px;
	}

.subtitle {
	color: #64748b;
	margin-bottom: 20px;
	font-size: 14px;
}

/* FORM GROUP */
.form-group {
	margin-bottom: 15px;
}

/* INPUTS */
.form-control {
	width: 100%;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid #cbd5e1;
	transition: 0.3s;
	font-size: 14px;
}

	.form-control:focus {
		border-color: #1e3a8a;
		box-shadow: 0 0 0 3px rgba(30,58,138,0.15);
		outline: none;
	}

/* BUTTON */
.btn-primary {
	width: 100%;
	background: #1e3a8a;
	color: white;
	border: none;
	padding: 12px;
	border-radius: 10px;
	font-weight: 600;
	cursor: pointer;
	transition: 0.3s;
	margin-top: 10px;
}

	.btn-primary:hover {
		background: #152c6b;
	}

/* VALIDATION */
.text-danger {
	font-size: 12px;
	margin-top: 4px;
}


/* =========================
   GLOBAL TABLE DESIGN SYSTEM
========================= */
.table-scroll-wrapper {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 12px;
}
table {
	width: 100%;
	border-collapse: collapse;
	background: white;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

/* TABLE HEADER */
thead {
	background: #1e3a8a;
	color: white;
}

	thead th {
		padding: 14px 12px;
		font-weight: 600;
		text-align: left;
		font-size: 14px;
		white-space: nowrap;
	}

/* TABLE BODY */
tbody td {
	padding: 12px;
	border-bottom: 1px solid #e5e7eb;
	font-size: 14px;
	color: #334155;
}

/* ROW HOVER EFFECT */
tbody tr:hover {
	background: #f1f5f9;
	transition: 0.2s;
}

/* STRIPED ROWS (optional but nice) */
tbody tr:nth-child(even) {
	background: #f8fafc;
}

/* REMOVE LAST BORDER */
tbody tr:last-child td {
	border-bottom: none;
}

/*students list*/
/* PAGE ACTIONS */
.page-actions {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 20px;
}

/* ADD BUTTON */
.btn-add {
	background: #1e3a8a;
	color: white;
	text-decoration: none;
	padding: 12px 20px;
	border-radius: 10px;
	font-weight: 600;
	transition: .3s;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

	.btn-add:hover {
		background: #152c6b;
		color: white;
		transform: translateY(-2px);
	}

/* TABLE BUTTONS */
.btn-table {
	text-decoration: none;
	padding: 8px 14px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: .3s;
}


.btn-edit {
	background: #dbeafe;
	color: #1e3a8a;
	border: 1px solid #93c5fd;
}

	.btn-edit:hover {
		background: #1e3a8a;
		color: white;
	}


.btn-delete {
	background: #fee2e2;
	color: #dc2626;
	border: 1px solid #fecaca;
}

	.btn-delete:hover {
		background: #dc2626;
		color: white;
	}


td:last-child,
td:nth-last-child(2) {
	white-space: nowrap;
}

.page-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 5px;
	font-size: 24px;
	font-weight: 700;
	color: #1e3a8a;
}

	.page-title i {
		width: 42px;
		height: 42px;
		background: #dbeafe;
		color: #1e3a8a;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
	}

	/*add new student*/
/* FORM GRID */
.student-form-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* SMALLER INPUTS */
.student-form-card .form-control
 {
	height: 20px;
	font-size: 14px;
	border-radius: 8px;
	border: 1px solid #cbd5e1;
    width: 150px
	
}
.student-form-card .form-select {
	height: 42px;
	border-radius: 8px;
	border: 1px solid #cbd5e1;
	font-size: 14px;
	border-radius: 8px;
	width: 180px;
}
.student-form-card .control-label {
	font-size: 14px;
	margin-bottom: 6px;
	font-weight: 600;
	color: #1e3a8a;
}
.sms-select-group .form-group {
	display: flex;
	flex-direction: column; 
}

.sms-select-group .control-label {
	margin-bottom: 4px;
	font-weight: 600;
	color: #1e3a8a; 
	margin-bottom: 0;
}

.sms-select-group .form-select {
	border-radius: 10px;
	border: 1px solid #cbd5e1;
	padding: 10px;
	transition: 0.3s;
}

	.sms-select-group .form-select:focus {
		border-color: #1e3a8a;
		box-shadow: 0 0 0 3px rgba(30,58,138,0.15);
	}
.student-form-card .form-group {
	margin-bottom: 0;
}

	/* Full width row when needed */
	.student-full-width {
		grid-column: span 3;
	}

/* Responsive */
@media (max-width: 992px) {
	.student-form-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.student-form-grid {
		grid-template-columns: 1fr;
	}
}
.student-form-actions {
	margin-top: 30px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.student-btn-save {
	background: #1e3a8a;
	color: white;
	border: none;
	border-radius: 10px;
	padding: 12px 24px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: .3s;
}

	.student-btn-save:hover {
		background: #152c6b;
	}

.student-btn-back {
	background: #f1f5f9;
	color: #334155;
	text-decoration: none;
	border-radius: 10px;
	padding: 12px 24px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: .3s;
	background: #dc2626;
	color: white;
}

	.student-btn-back:hover {
		background: #e2e8f0;
		color: #0f172a;
	}

.student-form-card .text-danger {
	font-size: 13px;
	margin-top: 5px;
}

.student-form-header {
	margin-bottom: 25px;
}

.student-form-title {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #1e3a8a;
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 6px;
}

	.student-form-title i {
		width: 50px;
		height: 50px;
		border-radius: 12px;
		background: #dbeafe;
		color: #1e3a8a;
		display: flex;
		justify-content: center;
		align-items: center;
	}

.student-form-subtitle {
	color: #64748b;
	margin: 0;
}

.student-form-wrapper {
	width: 100%;
}

.student-form-card {
	background: #ffffff;
	border-radius: 18px;
	padding: 30px;
	box-shadow: 0 6px 24px rgba(0,0,0,.08);
	border: 1px solid #e2e8f0;
}

.no-resize {
	resize: none;
}


/* ===== CLASSES LIST PAGE ===== */

.class-page {
	padding: 10px;
}


.page-title {
	color: #1e3a8a;
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 20px;
}

	.page-title i {
		margin-right: 10px;
	}


.class-form-card {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 4px 20px rgba(0,0,0,.08);
	overflow: hidden;
	border: none;
	margin-bottom: 25px;
}

.class-form-header {
	background: #1e3a8a;
	color: white;
	padding: 18px 24px;
	font-size: 18px;
	font-weight: 600;
}

.class-form-body {
	padding: 25px;
}

.class-form-footer {
	padding: 20px 25px;
	border-top: 1px solid #e2e8f0;
	background: #f8fafc;
}


.class-form-group {
	margin-bottom: 20px;
}

	.class-form-group label {
		display: block;
		margin-bottom: 8px;
		color: #1e293b;
		font-weight: 600;
	}

	.class-form-group .form-control {
		border-radius: 10px;
		border: 1px solid #cbd5e1;
		padding: 12px;
	}

		.class-form-group .form-control:focus {
			border-color: #1e3a8a;
			box-shadow: 0 0 0 3px rgba(30,58,138,.15);
		}

.class-save-btn {
	background: #1e3a8a;
	color: white;
	border: none;
	border-radius: 10px;
	padding: 10px 22px;
	font-weight: 600;
}

	.class-save-btn:hover {
		background: #152c6b;
	}

.class-cancel-btn {
	background: #64748b;
	color: white;
	border: none;
	border-radius: 10px;
	padding: 10px 22px;
	margin-left: 10px;
}

	.class-cancel-btn:hover {
		background: #475569;
	}


.class-list-card {
	background: white;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,.08);
}

.class-list-header {
	background: #f8fafc;
	padding: 18px 24px;
	border-bottom: 1px solid #e2e8f0;
}

	.class-list-header h3 {
		margin: 0;
		color: #1e3a8a;
		font-size: 20px;
		font-weight: 700;
	}
	.class-list-header h2 {
		margin: 0;
		color: #1e3a8a;
		font-size: 25px;
		font-weight: 700;
	}
.attendance-options {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: nowrap;
}

.attendance-option {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

	.attendance-option label {
		margin: 0;
	}