/* =========================================================
   stdinfo.css — สไตล์กลางฝั่งนักศึกษา (undergraduate/*)
   โหลดผ่าน scripts_header.php ต่อจาก Bootstrap 5
   โทนสีอิงจากแบรนด์ REG (ม่วง #6d52ef / #917afd ใน new-student-reg.webflow.css)
   ========================================================= */

:root {
	--sd-purple: #6d52ef;
	--sd-purple-2: #917afd;
	--sd-purple-soft: #f1eefe;
	--sd-purple-line: #ddd6fb;
	--sd-ink: #1f1d2b;
	--sd-muted: #6b6980;
	--sd-line: #e6e4f0;
	--sd-radius: 16px;
	--sd-radius-sm: 10px;
}

/* ---------- ช่องที่กรอกไม่ครบ ---------- */
input.error_input,
select.error_input,
textarea.error_input {
	border: 2px solid #dc3545 !important;
	background-color: #fff5f5;
}

/* ---------- ป้ายชื่อช่อง (label ซ้าย-ช่องขวา) ---------- */
/* ใช้ชื่อ fld-label (ไม่ใช่ field-label) เพราะ new-student-reg.webflow.css มี .field-label อยู่แล้ว
   และ webflow.css ตั้ง label { font-weight:bold; margin-bottom:5px } จึงต้อง override */
label.fld-label,
.fld-label {
	display: block;
	margin-bottom: 0;
	padding-top: .45rem;
	color: var(--sd-muted);
	font-size: .9rem;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.4;
}

@media (max-width: 767.98px) {
	.fld-label {
		padding-top: .6rem;
		padding-bottom: .15rem;
		font-size: .82rem;
	}
}

.req-mark {
	color: #dc3545;
	margin-left: .15rem;
	font-size: .8em;
	font-weight: 600;
	vertical-align: top;
}

/* =========================================================
   หน้าทะเบียนประวัติ (data.php) — scope ด้วย .page-profile
   ========================================================= */
.page-profile {
	color: var(--sd-ink);
}

/* การ์ดแต่ละหมวด */
.page-profile .section-card {
	border: 0;
	border-radius: var(--sd-radius);
	background: #fff;
	box-shadow: 0 1px 2px rgba(31, 29, 43, .04), 0 8px 24px rgba(109, 82, 239, .06);
	padding: .75rem 1rem 1rem;
	scroll-margin-top: 90px;
}

@media (max-width: 575.98px) {
	.page-profile .section-card {
		padding: .5rem .5rem .75rem;
		border-radius: 12px;
	}
}

/* หัวข้อหมวด */
.page-profile .section-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .6rem;
	margin: .25rem 0 .75rem;
	padding: 0 0 .6rem;
	border-bottom: 1px solid var(--sd-line);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--sd-ink);
	line-height: 1.35;
}

.page-profile .section-title .section-icon {
	flex: 0 0 auto;
	width: 2.1rem;
	height: 2.1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--sd-purple-2), var(--sd-purple));
	color: #fff;
	font-size: .95rem;
}

.page-profile .section-title br {
	display: none;
}

/* หัวข้อย่อย (ชื่อไทย / ชื่ออังกฤษ) */
.page-profile .section-title-sm {
	font-size: .92rem;
	font-weight: 600;
	color: var(--sd-purple);
	border-bottom: 0;
	margin-bottom: .25rem;
	padding-bottom: 0;
}

.page-profile .section-title-sm i {
	color: var(--sd-purple);
}

/* กลุ่มช่อง (แทนแถบเทาสลับแถวเดิม) */
.page-profile .field-group {
	margin-top: .5rem;
	padding: .5rem .75rem .65rem;
	border-radius: var(--sd-radius-sm);
	background: var(--sd-purple-soft);
}

/* ช่องกรอก */
.page-profile .form-control,
.page-profile .form-select {
	border-radius: var(--sd-radius-sm);
	border-color: var(--sd-line);
	min-height: 2.6rem;
	transition: border-color .15s, box-shadow .15s;
}

.page-profile .form-control:focus,
.page-profile .form-select:focus {
	border-color: var(--sd-purple-2);
	box-shadow: 0 0 0 .2rem rgba(109, 82, 239, .18);
}

.page-profile .form-control[readonly] {
	background: #f3f2f8;
	color: var(--sd-muted);
}

.page-profile .row.mt-2 {
	margin-top: .35rem !important;
}

/* ปุ่ม copy ข้อมูลบิดา/มารดา/ที่อยู่ */
.page-profile .btn-copy {
	border: 1px solid var(--sd-purple-line);
	background: #fff;
	color: var(--sd-purple);
	border-radius: 999px;
	font-weight: 500;
	margin: .35rem .35rem 0 0;
}

.page-profile .btn-copy:hover {
	background: var(--sd-purple-soft);
	border-color: var(--sd-purple-2);
}

/* สรุปข้อมูล นศ. ด้านบน */
.profile-summary {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: .25rem 0 .5rem;
}

.profile-avatar {
	flex: 0 0 auto;
	width: 3.6rem;
	height: 3.6rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--sd-purple-2), var(--sd-purple));
	color: #fff;
	font-size: 1.5rem;
	box-shadow: 0 6px 16px rgba(109, 82, 239, .25);
}

.profile-main {
	min-width: 0;
}

.profile-id {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--sd-ink);
	line-height: 1.2;
}

.profile-label {
	display: inline-block;
	margin-right: .5rem;
	font-size: .75rem;
	font-weight: 500;
	color: var(--sd-muted);
	vertical-align: middle;
}

.profile-line {
	font-size: .95rem;
	margin-top: .15rem;
}

.profile-line i {
	width: 1.2rem;
	color: var(--sd-purple);
	text-align: center;
}

@media (max-width: 575.98px) {
	.profile-summary {
		gap: .75rem;
	}

	.profile-avatar {
		width: 3rem;
		height: 3rem;
		font-size: 1.25rem;
	}

	.profile-id {
		font-size: 1.25rem;
	}

	.profile-line {
		font-size: .88rem;
	}
}

/* ป้ายกลุ่ม */
.group-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
}

.group-badge-label {
	font-size: .85rem;
	color: var(--sd-muted);
}

.group-badge-value {
	display: inline-block;
	min-width: 3rem;
	padding: .1rem .8rem;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--sd-purple-2), var(--sd-purple));
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

@media (max-width: 767.98px) {
	.group-badge {
		margin-top: .5rem;
		justify-content: flex-start;
	}
}

/* ---------- แถบนำทางหมวด (sticky บน) ---------- */
.section-nav {
	position: sticky;
	top: 0;
	z-index: 1019;
	margin: .75rem 0 1rem;
	padding: .5rem .75rem .35rem;
	background: rgba(255, 255, 255, .95);
	border: 1px solid var(--sd-line);
	border-radius: 14px;
	box-shadow: 0 6px 20px rgba(31, 29, 43, .06);
	backdrop-filter: blur(6px);
}

.section-nav-progress {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: .4rem;
}

.section-nav-bar {
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: var(--sd-purple-soft);
	overflow: hidden;
}

.section-nav-bar span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--sd-purple-2), var(--sd-purple));
	transition: width .3s ease;
}

.section-nav-text {
	flex: 0 0 auto;
	color: var(--sd-muted);
	font-size: .78rem;
	white-space: nowrap;
}

.section-nav-items {
	display: flex;
	gap: .35rem;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: .15rem;
}

.section-nav-items::-webkit-scrollbar {
	display: none;
}

.section-nav-item {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .3rem .7rem .3rem .35rem;
	border-radius: 999px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--sd-muted);
	font-size: .82rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s, color .15s;
}

.section-nav-item:hover {
	background: var(--sd-purple-soft);
	color: var(--sd-purple);
}

.section-nav-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.45rem;
	height: 1.45rem;
	border-radius: 50%;
	background: var(--sd-purple-soft);
	color: var(--sd-purple);
	font-size: .72rem;
	font-weight: 700;
}

.section-nav-item.is-active {
	background: var(--sd-purple);
	color: #fff;
}

.section-nav-item.is-active .section-nav-num {
	background: rgba(255, 255, 255, .25);
	color: #fff;
}

/* หมวดที่กรอกช่องบังคับครบแล้ว: เลขกลายเป็นเครื่องหมายถูกสีเขียว */
.section-nav-item.is-done .section-nav-num {
	background: #22c55e;
	color: #fff;
	font-size: 0;
}

.section-nav-item.is-done .section-nav-num::before {
	content: "\2713";
	font-size: .75rem;
}

@media (max-width: 575.98px) {
	.section-nav {
		margin: .5rem 0 .75rem;
		padding: .45rem .5rem .3rem;
		border-radius: 12px;
	}

	.section-nav-item {
		padding: .3rem .55rem .3rem .3rem;
	}

	.section-nav-item .section-nav-label {
		display: none;
	}

	.section-nav-item.is-active .section-nav-label {
		display: inline;
	}
}

/* ---------- ประกาศ ---------- */
.page-profile .alert-warning {
	border: 0;
	border-radius: 12px;
	background: #fff7e6;
	color: #7a4b00;
}

.page-profile .alert-warning details summary {
	cursor: pointer;
	color: #9a5b00;
}

/* ---------- ข้อความยินยอม ---------- */
.page-profile .consent-card {
	background: linear-gradient(180deg, #fff, var(--sd-purple-soft));
}

.consent-p {
	text-indent: 2.5rem;
	margin-bottom: .75rem;
	font-size: .92rem;
	color: #3d3b4f;
}

@media (max-width: 575.98px) {
	.consent-p {
		text-indent: 1.25rem;
	}
}

.consent-check-text {
	color: var(--sd-purple);
	font-size: 1.05rem;
	font-weight: 500;
}

/* ---------- แถบบันทึก ติดขอบล่างจอ ---------- */
.save-bar {
	position: sticky;
	bottom: 0;
	z-index: 1020;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	flex-wrap: wrap;
	margin: 1rem 0 0;          /* เป็นลูกของ .row โดยตรง กว้างเต็มแถวอยู่แล้ว */
	padding: .6rem 1rem;
	background: rgba(255, 255, 255, .96);
	border-top: 1px solid var(--sd-line);
	box-shadow: 0 -6px 18px rgba(31, 29, 43, .07);
	backdrop-filter: blur(6px);
}

.save-bar-status {
	font-size: .9rem;
	color: var(--sd-muted);
}

.save-bar-status.is-dirty {
	color: #b45309;
	font-weight: 500;
}

.save-bar-actions {
	display: flex;
	gap: .5rem;
	align-items: center;
}

.save-bar-actions .primary-btn-text {
	margin: 0;
	border-radius: 999px;
	padding: 10px 28px;
	box-shadow: 0 6px 16px rgba(109, 82, 239, .3);
}

@media (max-width: 575.98px) {
	.save-bar {
		padding: .5rem .75rem;
	}

	.save-bar-actions {
		width: 100%;
	}

	.save-bar-actions .primary-btn-text {
		width: 100%;
		text-align: center;
	}
}

/* ---------- เฉพาะ data_en.php ---------- */
.page-profile .page-heading {
	text-align: center;
	font-weight: 700;
	font-size: 1.35rem;
	color: var(--sd-ink);
	margin-bottom: 1rem;
}

.page-profile .profile-idbox {
	display: inline-block;
	min-width: 8rem;
	padding: .2rem 1rem;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--sd-purple-2), var(--sd-purple));
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-align: center;
}

.page-profile .consent-check-list {
	display: inline-block;
	text-align: left;
	font-size: .95rem;
	font-weight: 400;
	margin: .25rem 0 .5rem;
}

.page-profile .consent-check-list ol {
	margin: .25rem 0 0;
	padding-left: 1.25rem;
}

.page-profile .consent-check-list li {
	margin-bottom: .35rem;
}

.page-profile .section-card > .p-2 > p.text-danger {
	font-size: .9rem;
	margin: -.25rem 0 .75rem;
}

.page-profile fieldset.field-group {
	border: 0;
	margin-top: .75rem;
}

/* ป้าย "ยังไม่ได้บันทึก" ในแถบนำทางบน */
.section-nav-unsaved {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .1rem .6rem;
	border-radius: 999px;
	background: #fff4e0;
	color: #b45309;
	font-size: .75rem;
	font-weight: 600;
	white-space: nowrap;
}

.section-nav.has-unsaved .section-nav-bar span {
	background: linear-gradient(90deg, #f59e0b, #d97706);
}

/* ---------- data_en.php ---------- */
.page-profile .section-card > .p-2 > p.text-danger {
	font-size: .9rem;
	margin: -.25rem 0 .75rem;
}

.page-profile .section-card {
	scroll-margin-top: 110px;
}

/* =========================================================
   หน้าเปลี่ยนรหัสผ่าน (re_pass.php) — .page-auth
   ========================================================= */
.page-auth .auth-card {
	border: 0;
	border-radius: var(--sd-radius);
	padding: 1.5rem 1.5rem 1.25rem;
	box-shadow: 0 1px 2px rgba(31, 29, 43, .04), 0 8px 24px rgba(109, 82, 239, .08);
}

.page-auth .auth-head {
	display: flex;
	gap: .9rem;
	align-items: flex-start;
	margin-bottom: 1.25rem;
}

.page-auth .auth-icon {
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--sd-purple-2), var(--sd-purple));
	color: #fff;
	font-size: 1.2rem;
	box-shadow: 0 6px 16px rgba(109, 82, 239, .25);
}

.page-auth .auth-title {
	font-size: 1.3rem;
	font-weight: 700;
	margin: .15rem 0 .2rem;
	color: var(--sd-ink);
}

.page-auth .auth-sub {
	margin: 0;
	font-size: .88rem;
	color: var(--sd-muted);
}

.page-auth .form-label {
	font-weight: 500;
	font-size: .9rem;
	color: var(--sd-muted);
	margin-bottom: .3rem;
}

.page-auth .form-control {
	border-radius: var(--sd-radius-sm) 0 0 var(--sd-radius-sm);
	border-color: var(--sd-line);
	min-height: 2.75rem;
	letter-spacing: .08em;
}

.page-auth .form-control:focus {
	border-color: var(--sd-purple-2);
	box-shadow: 0 0 0 .2rem rgba(109, 82, 239, .18);
}

.page-auth .form-control.is-invalid {
	border-color: #dc3545;
}

.page-auth .input-group .btn-outline-secondary {
	border-color: var(--sd-line);
	border-radius: 0 var(--sd-radius-sm) var(--sd-radius-sm) 0;
	color: var(--sd-muted);
	min-width: 3rem;
}

.page-auth .input-group .btn-outline-secondary:hover {
	background: var(--sd-purple-soft);
	color: var(--sd-purple);
}

/* กติการหัสผ่าน */
.page-auth .auth-rules {
	margin: .25rem 0 1.25rem;
	padding: .75rem 1rem;
	border-radius: var(--sd-radius-sm);
	background: var(--sd-purple-soft);
}

.page-auth .auth-rules-title {
	font-size: .82rem;
	font-weight: 600;
	color: var(--sd-purple);
	margin-bottom: .35rem;
}

.page-auth .auth-rules-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .86rem;
	color: var(--sd-muted);
}

.page-auth .auth-rules-list li {
	display: flex;
	align-items: center;
	gap: .45rem;
	padding: .12rem 0;
	transition: color .15s;
}

.page-auth .auth-rules-list li .fa-circle-check { display: none; color: #22c55e; }
.page-auth .auth-rules-list li .fa-circle { color: #c9c5e2; }
.page-auth .auth-rules-list li.is-ok { color: var(--sd-ink); }
.page-auth .auth-rules-list li.is-ok .fa-circle-check { display: inline-block; }
.page-auth .auth-rules-list li.is-ok .fa-circle { display: none; }

.page-auth .auth-submit {
	width: 100%;
	border-radius: 999px;
	box-shadow: 0 6px 16px rgba(109, 82, 239, .3);
}

.page-auth .auth-submit:disabled {
	opacity: .7;
	cursor: wait;
}

.page-auth .auth-note {
	margin: 1rem 0 0;
	font-size: .82rem;
	color: var(--sd-muted);
	text-align: center;
}

@media (max-width: 575.98px) {
	.page-auth .auth-card {
		padding: 1.1rem 1rem 1rem;
		border-radius: 12px;
	}
}

/* =========================================================
   หน้าปฏิทินกิจกรรม (calendar.php) — .page-cal
   ========================================================= */
.page-cal .cal-head {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-bottom: 1rem;
}

.page-cal .cal-head-icon {
	flex: 0 0 auto;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--sd-purple-2), var(--sd-purple));
	color: #fff;
	font-size: 1.4rem;
	box-shadow: 0 6px 16px rgba(109, 82, 239, .25);
}

.page-cal .cal-title {
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0 0 .15rem;
	color: var(--sd-ink);
}

.page-cal .cal-sub {
	margin: 0;
	font-size: .9rem;
	color: var(--sd-muted);
}

/* legend */
.page-cal .cal-legend {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1rem;
	margin-bottom: 1.25rem;
	font-size: .8rem;
	color: var(--sd-muted);
}

.page-cal .cal-legend-item {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

.page-cal .cal-legend-item i {
	width: .7rem;
	height: .7rem;
	border-radius: 50%;
	background: #c9c5e2;
}

.page-cal .cal-legend-item.is-now i { background: var(--sd-purple); box-shadow: 0 0 0 3px rgba(109, 82, 239, .2); }
.page-cal .cal-legend-item.is-next i { background: #f59e0b; }
.page-cal .cal-legend-item.is-past i { background: #22c55e; }
.page-cal .cal-legend-item.is-tba i { background: #fff; border: 2px dashed #c9c5e2; }

/* group */
.page-cal .cal-group {
	margin-bottom: 1.5rem;
}

.page-cal .cal-group-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--sd-purple);
	margin: 0 0 .75rem;
	padding-left: .25rem;
}

/* timeline */
.page-cal .cal-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.page-cal .cal-timeline::before {
	content: "";
	position: absolute;
	left: 5.25rem;
	top: .75rem;
	bottom: .75rem;
	width: 2px;
	background: var(--sd-line);
}

.page-cal .cal-item {
	position: relative;
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-bottom: .75rem;
}

.page-cal .cal-date {
	flex: 0 0 4.5rem;
	text-align: center;
	padding-top: .35rem;
}

.page-cal .cal-day {
	display: block;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--sd-ink);
	white-space: nowrap;
}

.page-cal .cal-month {
	display: block;
	font-size: .72rem;
	color: var(--sd-muted);
	margin-top: .1rem;
}

/* จุดบนเส้นเวลา */
.page-cal .cal-item::before {
	content: "";
	position: absolute;
	left: calc(5.25rem - .4rem + 1px);
	top: .95rem;
	width: .8rem;
	height: .8rem;
	border-radius: 50%;
	background: #c9c5e2;
	border: 2px solid #fff;
	box-shadow: 0 0 0 2px var(--sd-line);
	z-index: 1;
}

.page-cal .cal-body {
	flex: 1;
	min-width: 0;
	margin-left: 1.25rem;
	background: #fff;
	border: 1px solid var(--sd-line);
	border-radius: 14px;
	padding: .8rem 1rem;
	box-shadow: 0 1px 2px rgba(31, 29, 43, .03);
}

.page-cal .cal-item-title {
	font-weight: 600;
	color: var(--sd-ink);
	line-height: 1.4;
}

.page-cal .cal-note {
	margin: .3rem 0 0;
	font-size: .88rem;
	color: var(--sd-muted);
}

.page-cal .cal-link {
	display: inline-flex;
	align-items: center;
	margin-top: .5rem;
	padding: .25rem .8rem;
	border-radius: 999px;
	border: 1px solid var(--sd-purple-line);
	color: var(--sd-purple);
	font-size: .85rem;
	font-weight: 500;
	text-decoration: none;
}

.page-cal .cal-link:hover {
	background: var(--sd-purple-soft);
}

.page-cal .cal-badge {
	display: inline-block;
	margin-left: .4rem;
	padding: .05rem .55rem;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 600;
	vertical-align: middle;
}

.page-cal .cal-badge-now { background: var(--sd-purple); color: #fff; }
.page-cal .cal-badge-next { background: #fff4e0; color: #b45309; }

/* สถานะ */
.page-cal .cal-item.is-now::before { background: var(--sd-purple); box-shadow: 0 0 0 4px rgba(109, 82, 239, .2); }
.page-cal .cal-item.is-now .cal-body { border-color: var(--sd-purple-2); box-shadow: 0 8px 24px rgba(109, 82, 239, .12); }
.page-cal .cal-item.is-now .cal-day { color: var(--sd-purple); }
.page-cal .cal-item.is-next::before { background: #f59e0b; }
.page-cal .cal-item.is-next .cal-body { border-color: #fcd9a0; }
.page-cal .cal-item.is-past::before { background: #22c55e; }
.page-cal .cal-item.is-past .cal-day,
.page-cal .cal-item.is-past .cal-item-title { color: var(--sd-muted); font-weight: 500; }
.page-cal .cal-item.is-tba::before { background: #fff; border: 2px dashed #c9c5e2; box-shadow: none; }
.page-cal .cal-item.is-tba .cal-day { font-size: .85rem; font-weight: 600; color: var(--sd-muted); white-space: normal; }

/* รายละเอียดพับได้ */
.page-cal .cal-more {
	margin-top: .6rem;
	border-top: 1px dashed var(--sd-line);
	padding-top: .5rem;
}

.page-cal .cal-more summary {
	cursor: pointer;
	font-size: .88rem;
	font-weight: 500;
	color: var(--sd-purple);
	list-style: none;
}

.page-cal .cal-more summary::-webkit-details-marker { display: none; }
.page-cal .cal-more summary::after { content: " \25BE"; font-size: .8rem; }
.page-cal .cal-more[open] summary::after { content: " \25B4"; }

.page-cal .cal-more-body {
	margin-top: .5rem;
	font-size: .9rem;
	color: #3d3b4f;
}

.page-cal .cal-more-body ol,
.page-cal .cal-more-body ul {
	padding-left: 1.25rem;
	margin-bottom: .5rem;
}

.page-cal .cal-more-body li { margin-bottom: .25rem; }

.page-cal .cal-doc-head {
	font-weight: 600;
	color: var(--sd-purple);
	margin: .35rem 0 .25rem;
}

.page-cal .cal-footer {
	margin-top: .5rem;
	padding: .9rem 1.1rem;
	border-radius: 14px;
	background: var(--sd-purple-soft);
	color: #3d3b4f;
	font-size: .92rem;
}

.page-cal .cal-footer a {
	color: var(--sd-purple);
	font-weight: 600;
	text-decoration: none;
	word-break: break-all;
}

/* มือถือ: วันที่อยู่บนการ์ด เส้นเวลาชิดซ้าย */
@media (max-width: 575.98px) {
	.page-cal .cal-timeline::before { left: .55rem; }
	.page-cal .cal-item { flex-direction: column; gap: .35rem; padding-left: 1.6rem; }
	.page-cal .cal-item::before { left: .16rem; top: .5rem; }
	.page-cal .cal-date { flex: none; text-align: left; padding-top: 0; display: flex; align-items: baseline; gap: .4rem; }
	.page-cal .cal-day { font-size: 1rem; }
	.page-cal .cal-month { margin-top: 0; }
	.page-cal .cal-body { margin-left: 0; width: 100%; padding: .7rem .85rem; }
	.page-cal .cal-head-icon { width: 2.6rem; height: 2.6rem; font-size: 1.15rem; }
	.page-cal .cal-title { font-size: 1.15rem; }
}

/* =========================================================
   หน้าสถิติจำนวนนักศึกษาแยกคณะ (ListFaculty.php) — .page-stat
   ========================================================= */
.page-stat .stat-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: .75rem 1rem;
	margin-bottom: 1rem;
}

.page-stat .stat-head-main {
	display: flex;
	gap: .9rem;
	align-items: center;
	min-width: 0;
}

.page-stat .stat-head-icon {
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--sd-purple-2), var(--sd-purple));
	color: #fff;
	font-size: 1.3rem;
	box-shadow: 0 6px 16px rgba(109, 82, 239, .25);
}

.page-stat .stat-title {
	font-size: 1.3rem;
	font-weight: 700;
	margin: 0 0 .1rem;
	color: var(--sd-ink);
}

.page-stat .stat-sub {
	margin: 0;
	font-size: .9rem;
	color: var(--sd-muted);
}

.page-stat .stat-filter {
	display: flex;
	gap: .4rem;
	align-items: center;
	padding: .35rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--sd-line);
}

.page-stat .stat-filter .form-select {
	width: auto;
	border: 0;
	border-radius: 999px;
	background-color: var(--sd-purple-soft);
	font-weight: 500;
	min-width: 6rem;
}

.page-stat .btn-stat {
	border-radius: 999px;
	background: linear-gradient(135deg, var(--sd-purple-2), var(--sd-purple));
	color: #fff;
	border: 0;
	padding: .35rem 1rem;
	font-weight: 500;
}

.page-stat .btn-stat:hover { color: #fff; filter: brightness(1.05); }

.page-stat .stat-note {
	border: 0;
	border-radius: 12px;
	background: #fff7e6;
	color: #7a4b00;
	font-size: .9rem;
	padding: .65rem .9rem;
}

/* KPI */
.page-stat .stat-kpis {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .75rem;
	margin-bottom: 1rem;
}

.page-stat .kpi {
	background: #fff;
	border-radius: 14px;
	padding: .85rem 1rem;
	border: 1px solid var(--sd-line);
	border-left: 4px solid #c9c5e2;
}

.page-stat .kpi-filled { border-left-color: var(--sd-purple); }
.page-stat .kpi-report { border-left-color: #22c55e; }
.page-stat .kpi-pending { border-left-color: #f59e0b; }

.page-stat .kpi-label { font-size: .8rem; color: var(--sd-muted); }
.page-stat .kpi-value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: var(--sd-ink); font-variant-numeric: tabular-nums; }
.page-stat .kpi-hint { font-size: .75rem; color: var(--sd-muted); }

/* toolbar: ทางลัด + ปุ่มเจ้าหน้าที่ */
.page-stat .stat-toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: .5rem 1rem;
	margin-bottom: 1rem;
}

.page-stat .stat-jump {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

.page-stat .stat-jump a {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .25rem .7rem .25rem .3rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--sd-line);
	color: var(--sd-muted);
	font-size: .82rem;
	font-weight: 500;
	text-decoration: none;
}

.page-stat .stat-jump a span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background: var(--sd-purple-soft);
	color: var(--sd-purple);
	font-size: .72rem;
	font-weight: 700;
}

.page-stat .stat-jump a:hover { border-color: var(--sd-purple-2); color: var(--sd-purple); }

.page-stat .btn-staff {
	border-radius: 999px;
	border: 1px solid var(--sd-purple-line);
	color: var(--sd-purple);
	background: #fff;
	font-weight: 500;
}

.page-stat .btn-staff:hover { background: var(--sd-purple-soft); }

/* card ตาราง */
.page-stat .stat-card {
	border: 0;
	border-radius: var(--sd-radius);
	box-shadow: 0 1px 2px rgba(31, 29, 43, .04), 0 8px 24px rgba(109, 82, 239, .06);
	padding: 1rem 1rem 1.1rem;
	margin-bottom: 1.25rem;
	scroll-margin-top: 1rem;
}

.page-stat .stat-card-head {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: .75rem;
	padding-bottom: .6rem;
	border-bottom: 1px solid var(--sd-line);
}

.page-stat .stat-card-num {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--sd-purple-2), var(--sd-purple));
	color: #fff;
	font-weight: 700;
	font-size: .9rem;
}

.page-stat .stat-card-title {
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
	color: var(--sd-ink);
}

.page-stat .stat-card-title .term {
	font-weight: 400;
	color: var(--sd-muted);
	font-size: .88rem;
}

/* ตาราง */
.page-stat .stat-table {
	font-size: .88rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.page-stat .stat-table thead th {
	font-weight: 600;
	font-size: .8rem;
	color: var(--sd-muted);
	background: #faf9fe;
	border-bottom: 1px solid var(--sd-line);
	vertical-align: middle;
	text-align: center;
}

.page-stat .stat-table thead th small { font-weight: 400; }
.page-stat .stat-table th.grp { font-size: .82rem; letter-spacing: .01em; }
.page-stat .stat-table th.grp-filled, .page-stat .stat-table th.sub-filled { background: var(--sd-purple-soft); color: var(--sd-purple); }
.page-stat .stat-table th.grp-report, .page-stat .stat-table th.sub-report { background: #ecfdf3; color: #15803d; }
.page-stat .stat-table th.sub-filled, .page-stat .stat-table th.sub-report { font-size: .76rem; font-weight: 500; }

.page-stat .stat-table td { border-color: #f0eef8; padding: .45rem .55rem; }
.page-stat .stat-table tbody tr:hover td { background: #faf9fe; }

.page-stat .stat-table .col-code { text-align: center; color: var(--sd-muted); }
.page-stat .stat-table .col-name { white-space: normal; min-width: 14rem; text-align: left; }
.page-stat .stat-table .col-name a { color: var(--sd-purple); text-decoration: none; font-weight: 500; }
.page-stat .stat-table .col-name a:hover { text-decoration: underline; }
.page-stat .stat-table .name-en { color: var(--sd-muted); font-size: .8rem; }
.page-stat .stat-table td.num { text-align: right; }
.page-stat .stat-table td.is-zero { color: #c9c5e2; text-align: center; }
.page-stat .stat-table .pending {
	display: inline-block;
	min-width: 2.2rem;
	padding: 0 .45rem;
	border-radius: 999px;
	background: #fff1f2;
	color: #b91c1c;
	font-weight: 600;
}

.page-stat .stat-table tfoot td {
	font-weight: 700;
	background: var(--sd-purple-soft);
	border-top: 2px solid var(--sd-purple-line);
	color: var(--sd-ink);
}

.page-stat .stat-table tfoot td.is-zero { color: #b3aed6; }

/* คอลัมน์ชื่อคณะติดซ้ายตอนเลื่อนแนวนอน */
.page-stat .stat-table th.col-code, .page-stat .stat-table td.col-code { position: sticky; left: 0; z-index: 2; background: #fff; }
.page-stat .stat-table thead th.col-code { background: #faf9fe; }
.page-stat .stat-table tfoot td.col-code { background: var(--sd-purple-soft); }

@media (max-width: 991.98px) {
	.page-stat .stat-kpis { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
	.page-stat .stat-head-icon { width: 2.5rem; height: 2.5rem; font-size: 1.1rem; border-radius: 10px; }
	.page-stat .stat-title { font-size: 1.1rem; }
	.page-stat .stat-filter { width: 100%; }
	.page-stat .stat-filter .form-select { flex: 1; min-width: 0; }
	.page-stat .stat-kpis { gap: .5rem; }
	.page-stat .kpi { padding: .65rem .75rem; }
	.page-stat .kpi-value { font-size: 1.3rem; }
	.page-stat .stat-card { padding: .75rem .6rem .85rem; border-radius: 12px; }
	.page-stat .stat-table .col-name { min-width: 11rem; }
	.page-stat .btn-staff { width: 100%; }
}

/* ประกาศในส่วนหัว (header.php) ยื่นลงมาทับพื้นที่หน้า → เว้นด้านบนเพิ่มบนจอกว้าง */
@media (min-width: 768px) {
	.page-profile, .page-cal, .page-auth, .page-stat {
		margin-top: 4rem !important;
	}
}

/* ---------- forfaculty_ListFaculty.php: รายชื่อนักศึกษาของคณะ ---------- */
.page-stat .kpi-cmu { border-left-color: #0ea5e9; }
.page-stat .kpi-full {
	display: inline-block;
	vertical-align: middle;
	margin-left: .35rem;
	padding: .05rem .5rem;
	border-radius: 999px;
	background: #ecfdf3;
	color: #15803d;
	font-size: .75rem;
	font-weight: 600;
}

.page-stat .stu-head { flex-wrap: wrap; gap: .6rem 1rem; }
.page-stat .stu-search { position: relative; flex: 1 1 16rem; max-width: 22rem; margin-left: auto; }
.page-stat .stu-search i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--sd-muted); font-size: .8rem; }
.page-stat .stu-search .form-control { padding-left: 2rem; border-radius: 999px; border-color: var(--sd-line); }
.page-stat .stu-search .form-control:focus { border-color: var(--sd-purple-2); box-shadow: 0 0 0 .2rem rgba(109, 82, 239, .18); }

.page-stat .stu-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	margin-bottom: .75rem;
}

.page-stat .stu-chip {
	border: 1px solid var(--sd-line);
	background: #fff;
	color: var(--sd-muted);
	border-radius: 999px;
	padding: .25rem .75rem;
	font-size: .82rem;
	font-weight: 500;
	cursor: pointer;
}

.page-stat .stu-chip b { font-weight: 700; color: var(--sd-ink); margin-left: .2rem; }
.page-stat .stu-chip:hover { border-color: var(--sd-purple-2); color: var(--sd-purple); }
.page-stat .stu-chip.is-active { background: var(--sd-purple); border-color: var(--sd-purple); color: #fff; }
.page-stat .stu-chip.is-active b { color: #fff; }
.page-stat .stu-shown { font-size: .82rem; color: var(--sd-muted); }

.page-stat .stu-table thead th { position: sticky; top: 0; z-index: 3; }
.page-stat .stu-table .col-name { min-width: 12rem; }
.page-stat .stu-table td { white-space: nowrap; }
.page-stat .stu-table td.col-name { white-space: normal; }
.page-stat .stu-table .stu-email { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.page-stat .stu-link { color: var(--sd-ink); text-decoration: none; }
.page-stat .stu-link:hover { color: var(--sd-purple); text-decoration: underline; }
.page-stat .stu-warn { color: #b91c1c; font-size: .78rem; margin-top: .15rem; }

.page-stat .st {
	display: inline-block;
	padding: .1rem .55rem;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 500;
	white-space: nowrap;
}

.page-stat .st-ok { background: #ecfdf3; color: #15803d; }
.page-stat .st-bad { background: #fff1f2; color: #b91c1c; }
.page-stat .st-warn { background: #fff4e0; color: #b45309; }
.page-stat .st-none { color: #c9c5e2; }