/* ============================================================
   ระบบสมัครเรียน/ทะเบียนประวัตินักศึกษา มรธ. — ชุดสไตล์หลัก
   โหลดหลัง bootstrap.min.css ใน htmlhead.php
   ============================================================ */

:root {
	--regis-navy: #1b2a4a;
	--regis-navy-2: #24365c;
	--regis-gold: #c9a227;
	--regis-gold-soft: #f0e1b0;
	--regis-page: #eef1f7;
	--regis-line: #dbe2ef;
	--regis-text: #22314f;
	--regis-muted: #6c7a93;
	--regis-danger-bg: #fdecec;
	--regis-success-bg: #e8f7ee;
	--regis-warn-bg: #fff5df;
}

body.regis-body {
	background: var(--regis-page);
	font-family: 'Kanit', 'Segoe UI', Tahoma, sans-serif;
	color: var(--regis-text);
	font-size: 15px;
}

/* ---------- แถบนำทางหลัก ---------- */
.regis-topbar {
	background: linear-gradient(120deg, var(--regis-navy) 0%, var(--regis-navy-2) 65%, #35507e 100%);
	box-shadow: 0 2px 8px rgba(19, 34, 74, .25);
}

.regis-topbar .navbar-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	letter-spacing: .3px;
}

.regis-topbar .navbar-brand .brand-badge {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--regis-gold);
	color: #1b2a4a;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}

.regis-topbar .navbar-brand .brand-text small {
	display: block;
	font-size: 11px;
	font-weight: 300;
	opacity: .85;
	line-height: 1.1;
}

.regis-topbar .navbar-nav .nav-link {
	color: rgba(255, 255, 255, .92) !important;
	border-radius: 8px;
	padding: 6px 12px !important;
	margin: 2px 2px;
	transition: background .15s ease;
}

.regis-topbar .navbar-nav .nav-link:hover,
.regis-topbar .navbar-nav .active .nav-link {
	background: rgba(255, 255, 255, .14);
}

.regis-topbar .navbar-nav .nav-item.user-item {
	display: flex;
	align-items: center;
	margin: 2px 2px;										/* เว้นขอบเท่ากับ nav-link อื่น ๆ */
}

.regis-topbar .userchip {
	color: #fff;
	background: rgba(255, 255, 255, .12);
	border-radius: 999px;
	padding: 5px 14px 5px 6px;							/* สูงเท่ากับ nav-link (36px) → แนวเดียวกับเมนูข้าง ๆ */
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
}

.regis-topbar .userchip i {
	background: var(--regis-gold);
	color: #1b2a4a;
	width: 26px; height: 26px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px;
}

/* ---------- เมนูรอง (แถบทอง) ---------- */
.regis-menubar {
	background: linear-gradient(90deg, #ffffff 0%, #f7f3e6 100%);
	border-bottom: 3px solid var(--regis-gold);
	box-shadow: 0 1px 4px rgba(30, 42, 76, .08);
}

.regis-menubar .myMenu {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--regis-navy);
	font-weight: 500;
	padding: 12px 18px;
	border-bottom: 3px solid transparent;
	margin-bottom: -3px;
	transition: all .15s ease;
	text-decoration: none;
}

.regis-menubar .myMenu:hover {
	background: var(--regis-gold-soft);
	border-bottom-color: var(--regis-gold);
}

.regis-menubar .myMenu.active {
	border-bottom-color: var(--regis-gold);
}

/* ---------- การ์ด / แผง ---------- */
.regis-card {
	background: #fff;
	border: 1px solid var(--regis-line);
	border-radius: 14px;
	box-shadow: 0 3px 14px rgba(23, 39, 79, .07);
	margin-bottom: 1.25rem;
	overflow: hidden;
}

.regis-card .regis-card-head {
	padding: 14px 20px;
	border-bottom: 1px solid var(--regis-line);
	background: #fff;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.regis-card .regis-card-head h1,
.regis-card .regis-card-head h2,
.regis-card .regis-card-head h3,
.regis-card .regis-card-head h4 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--regis-navy);
	display: flex;
	align-items: center;
	gap: 8px;
}

.regis-card .regis-card-head h1 i,
.regis-card .regis-card-head h2 i,
.regis-card .regis-card-head h3 i,
.regis-card .regis-card-head h4 i {
	color: var(--regis-gold);
}

.regis-card .regis-card-head .head-tools {
	margin-left: auto;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.regis-card .regis-card-sub {
	padding: 10px 20px;
	color: var(--regis-muted);
	font-size: 13.5px;
	border-bottom: 1px dashed var(--regis-line);
}

.regis-card .regis-card-body { padding: 20px; }
.regis-card .regis-card-body.p-flat { padding: 0; }

/* ---------- ข้อมูลรายการ (label/value) ---------- */
.regis-info { padding: 0; }

.regis-info > .row {
	margin: 0;
	border-bottom: 1px dashed var(--regis-line);
}

.regis-info > .row:last-child { border-bottom: 0; }

.regis-info .lbl {
	color: var(--regis-muted);
	font-size: 13px;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.regis-info .lbl i { color: var(--regis-gold); width: 18px; text-align: center; }

.regis-info .val {
	padding: 10px 20px;
	font-weight: 500;
	color: var(--regis-text);
}

/* ---------- ฟอร์ม ---------- */
.regis-card label.form-label {
	font-weight: 500;
	color: var(--regis-navy);
	margin-bottom: 4px;
}

.regis-card .form-control,
.regis-card .form-select {
	border: 1px solid var(--regis-line);
	border-radius: 9px;
	padding: 8px 12px;
	background: #fbfcfe;
}

.regis-card .form-control:focus,
.regis-card .form-select:focus {
	border-color: var(--regis-gold);
	box-shadow: 0 0 0 .2rem rgba(201, 162, 39, .18);
	background: #fff;
}

.regis-card .form-text { color: var(--regis-muted); font-size: 12.5px; }

/* ---------- ปุ่ม ---------- */
.btn-regis {
	background: var(--regis-navy);
	border-color: var(--regis-navy);
	color: #fff;
	border-radius: 9px;
	padding: 8px 20px;
	font-weight: 500;
	transition: filter .15s ease;
}

.btn-regis:hover { filter: brightness(1.2); color: #fff; }

.btn-gold {
	background: var(--regis-gold);
	border-color: var(--regis-gold);
	color: #1b2a4a;
	font-weight: 600;
	border-radius: 9px;
	padding: 8px 20px;
}

.btn-gold:hover { filter: brightness(1.08); color: #1b2a4a; }

/* ---------- badge สถานะเอกสาร ---------- */
.doc-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 999px;
	padding: 3px 11px;
}

.doc-badge.wait  { background: var(--regis-warn-bg);     color: #8a6d00; border: 1px solid #ecd9a0; }
.doc-badge.pass  { background: var(--regis-success-bg);  color: #1e7b45; border: 1px solid #bce5cc; }
.doc-badge.fix   { background: var(--regis-danger-bg);   color: #b03a3a; border: 1px solid #f3c1c1; }
.doc-badge.none  { background: #f2f4f9; color: #8d97ab;  border: 1px solid var(--regis-line); }

/* ---------- สรุปสถานะท็อปของหน้า upload ---------- */
.doc-allsat {
	border-radius: 12px;
	padding: 12px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	border: 1px solid;
}

.doc-allsat.pending { background: var(--regis-warn-bg);    border-color: #ecd9a0; color: #7a5e00; }
.doc-allsat.pass    { background: var(--regis-success-bg); border-color: #bce5cc; color: #1e7b45; }
.doc-allsat.fix     { background: var(--regis-danger-bg);  border-color: #f3c1c1; color: #b03a3a; }

/* ---------- แถวเอกสารในหน้า upload ---------- */
.doc-row {
	border: 1px solid var(--regis-line);
	border-radius: 12px;
	background: #fff;
	padding: 16px 18px;
	margin-bottom: 14px;
}

.doc-row.is-pass { border-color: #bce5cc; background: linear-gradient(0deg, rgba(232, 247, 238, .35), rgba(232, 247, 238, .35)); }
.doc-row.is-fix  { border-color: #f3c1c1; background: linear-gradient(0deg, rgba(253, 236, 236, .35), rgba(253, 236, 236, .35)); }

.doc-row .doc-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	color: var(--regis-navy);
	margin-bottom: 4px;
	flex-wrap: wrap;
}

.doc-row .doc-title .doc-ico {
	width: 38px; height: 38px;
	border-radius: 10px;
	background: var(--regis-navy);
	color: var(--regis-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	flex: 0 0 auto;
}

.doc-row .doc-note { color: var(--regis-muted); font-size: 13px; margin-bottom: 10px; }

.doc-row .doc-fixmsg {
	background: var(--regis-danger-bg);
	border: 1px dashed #f3c1c1;
	color: #b03a3a;
	border-radius: 9px;
	padding: 8px 12px;
	font-size: 13px;
	margin-bottom: 10px;
}

.doc-row .doc-current {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #f7f9fd;
	border: 1px solid var(--regis-line);
	border-radius: 10px;
	padding: 8px 14px;
	margin-bottom: 12px;
	font-size: 13.5px;
	flex-wrap: wrap;
}

.doc-row .doc-current .fname { font-weight: 500; word-break: break-all; }
.doc-row .doc-current .fmeta { color: var(--regis-muted); font-size: 12px; }

.doc-row .opt-label { font-size: 13px; color: var(--regis-muted); display: block; margin-bottom: 6px; }

/* ---------- พรีวิวรูปเอกสาร ---------- */
.doc-thumb {
	width: 88px; height: 88px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--regis-line);
	background: #fff center/cover no-repeat;
	cursor: pointer;
	transition: transform .15s ease;
	flex: 0 0 auto;
}

.doc-thumb:hover { transform: scale(1.04); }
.doc-thumb.landscape { width: 128px; height: 88px; }

/* กล่องพรีวิวที่โหลดรูปไม่เจอ (404) — แสดงข้อความแทนกล่องว่าง */
.doc-thumb.doc-thumb-missing {
	/* !important เพื่อชนะ inline style="background-image:url(...)" ของ thumb จาก DB */
	background-image: repeating-linear-gradient(45deg,#f6e9e9,#f6e9e9 8px,#f3dcdc 8px,#f3dcdc 16px) !important;
	background-size: 100% 100% !important;
	display: inline-flex; align-items: center; justify-content: center;
	cursor: default;
}
.doc-thumb.doc-thumb-missing::after {
	content: "ไม่พบ\A ไฟล์รูป";
	white-space: pre;
	font-size: 10px; color: #b02a37; text-align: center;
}

/* ---------- กล่องพรีวิวรูปเต็มใน modal ---------- */
.doc-preview-box {
	min-height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f4f6fb;
	border: 1px solid var(--regis-line);
	border-radius: 10px;
	padding: 10px;
}
/* ล็อกไม่ให้รูปล้นกรอบ: สูงสุด 70vh ของหน้าจอ กว้างสุด 100% คงสัดส่วนเดิม */
.doc-preview-box img {
	max-width: 100%;
	max-height: 70vh;
	object-fit: contain;
	border-radius: 6px;
	background: #fff;
}
.doc-preview-missing {
	color: #b02a37;
	font-size: 14px;
	padding: 24px 12px;
	text-align: center;
}

/* ---------- ตาราง (หลังบ้าน) ---------- */
.regis-table { margin: 0; font-size: 14px; }

.regis-table > thead th {
	background: #f4f6fb;
	color: var(--regis-navy);
	font-weight: 600;
	border-bottom: 2px solid var(--regis-line);
	padding: 10px 14px;
	white-space: nowrap;
}

.regis-table > tbody td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--regis-line);
	vertical-align: middle;
}

.regis-table > tbody tr:hover td { background: #f8faff; }

/* ---------- ตัวกรองหน้าหลังบ้าน ---------- */
.regis-filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }

.regis-filter .grow { flex: 1 1 220px; }

/* ---------- alert .alert-info เดิมให้สอดรับธีม ---------- */
.alert-info { border-radius: 10px; }

/* ---------- footer ---------- */
.regis-footer {
	margin-top: 28px;
	padding: 16px 0 22px;
	border-top: 1px solid var(--regis-line);
	color: var(--regis-muted);
	font-size: 13px;
}

/* ---------- responsive ---------- */
@media (max-width: 575.98px) {
	.regis-card .regis-card-body { padding: 14px; }
	.regis-info .lbl, .regis-info .val { padding: 8px 14px; }
	.doc-thumb { width: 72px; height: 72px; }
	.doc-thumb.landscape { width: 104px; height: 72px; }
}