/* เพิ่มเติมเฉพาะหน้ารุ่นพี่ (ธีมหลักอยู่ที่ ../css/roombooking.css) */

/* การ์ดข้อมูลผู้สมัคร */
.sr-avatar {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(91, 75, 183, .12);
	color: var(--rb-primary);
	font-size: 1.35rem;
	flex-shrink: 0;
}

.sr-info {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .35rem 1rem;
	margin: 0;
	font-size: .92rem;
}

.sr-info dt {
	font-weight: 400;
	color: var(--bs-secondary-color);
}

.sr-info dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* หัวกลุ่มประเภทห้อง */
.sr-type-head {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: 1rem;
	padding: .6rem .9rem;
	border-radius: .75rem;
	background: var(--rb-bg);
	color: var(--rb-primary-dark);
}

.sr-type-head .badge {
	margin-left: auto;
}

/* แท็บเมนูย่อยของหน้า (สมัคร / อัปโหลดรูป / ใบเสร็จ) */
.sr-tabs {
	flex-wrap: wrap;
	gap: .35rem;
}

.sr-tabs .nav-link {
	white-space: nowrap;
	border-radius: 2rem;
	color: var(--bs-body-color);
	background: #fff;
	border: 1px solid var(--bs-border-color);
}

.sr-tabs .nav-link.active {
	background: var(--rb-primary);
	border-color: var(--rb-primary);
	color: #fff;
}

.sr-photo {
	max-width: 180px;
	width: 100%;
}

/* ปุ่มที่กำลังส่ง */
.rb-busy {
	cursor: wait;
	opacity: .7;
}

/* หน้า index: การ์ดล็อกอิน */
.sr-login-icon {
	width: 4rem;
	height: 4rem;
	font-size: 1.75rem;
}

/* หน้า index: hero กระชับ + ปุ่มเข้าสู่ระบบอยู่ในแถบเดียว */
.sr-hero {
	padding: 1.25rem 0 1.5rem;
	color: #fff;
}

.sr-hero h1 {
	font-size: clamp(1.2rem, 2.4vw, 1.75rem);
}

.sr-cta {
	/* สีปุ่มตามที่กำหนด (#9E76B4) ทรงแคปซูล */
	--bs-btn-bg: #9e76b4;
	--bs-btn-border-color: #9e76b4;
	--bs-btn-color: #fff;
	--bs-btn-hover-bg: #8a62a0;
	--bs-btn-hover-border-color: #8a62a0;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: #77528c;
	--bs-btn-active-border-color: #77528c;
	--bs-btn-active-color: #fff;
	border-radius: 50rem;
	padding-left: 1.75rem;
	padding-right: 1.75rem;
	font-weight: 500;
	box-shadow: 0 .5rem 1.25rem rgba(20, 10, 60, .3);
	white-space: nowrap;
}

/* ช่วงปิดรับสมัคร: ปุ่มกดไม่ได้ (สีเดิมแต่จางลง) */
.sr-cta.disabled {
	--bs-btn-disabled-bg: #9e76b4;
	--bs-btn-disabled-border-color: #9e76b4;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-opacity: .55;
	box-shadow: none;
	cursor: not-allowed;
	pointer-events: auto;
}

.sr-section-title {
	/* หัวข้อหลักไม่ใช้ไอคอน — เน้นด้วยตัวหนา/ขนาด และเน้นคำสำคัญด้วย .sr-em */
	font-family: 'Mitr', 'Kanit', sans-serif;
	font-size: 1.2rem;
	font-weight: 500;
	color: #2b2350;
	letter-spacing: .01em;
	margin-bottom: .65rem;
}

.sr-em {
	color: var(--rb-primary);
}

.sr-news .list-group-item {
	font-size: .92rem;
	padding: .7rem 1rem;
}

.sr-news-text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sr-stat {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: .65rem;
	box-shadow: 0 .15rem .5rem rgba(15, 23, 42, .04);
	padding: .5rem .5rem;
	text-align: center;
	height: 100%;
}

.sr-stat-num {
	font-family: 'Mitr', 'Kanit', sans-serif;
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--rb-primary);
	line-height: 1.2;
}

.sr-stat-label {
	font-size: .8rem;
	color: var(--bs-secondary-color);
}

.sr-dorm {
	padding: .55rem .85rem;
	border-top: 1px solid #e8edf3;
}

.sr-min-width-0 {
	min-width: 0;
}

.sr-dorm:hover {
	background: #f8fafc;
}

.sr-metrics {
	display: flex;
	flex-wrap: wrap;
	gap: .2rem .9rem;
	margin: .35rem 0;
}

.sr-metrics span {
	padding: 0;
	color: #64748b;
	font-size: .78rem;
	white-space: nowrap;
}

.sr-metrics b {
	margin-left: .15rem;
	color: #172b4d;
	font-size: .9rem;
	font-weight: 600;
}

.sr-meter {
	height: .6rem;
	background: var(--sr-tint, #e9eef5);
}

/* แถบสีตามสถานะ (โทนหม่น ไม่สว่างจ้า): เขียว = ยังว่าง, เหลือง = ใกล้เต็ม (>= 80%), แดง = เต็มแล้ว */
.sr-meter .progress-bar {
	background-color: #7fae90;
}

.sr-meter .progress-bar.is-near {
	background-color: #d6b673;
}

.sr-meter .progress-bar.is-full {
	background-color: #c98583;
}

/* การ์ดหอพักใช้โทนสุภาพและแยกกลุ่มด้วยสีเน้นที่ไม่รบกวนการอ่าน */
.sr-group-m {
	--sr-accent: #355b82;
	--sr-tint: #eef3f8;
}

.sr-group-w {
	--sr-accent: #65567f;
	--sr-tint: #f2f0f6;
}

.sr-group-m,
.sr-group-w {
	border: 1px solid #dce3eb;
	border-radius: .85rem;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 .2rem .8rem rgba(15, 23, 42, .05);
}

.sr-group-head {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .65rem .85rem;
	border-bottom: 1px solid #e8edf3;
	background: linear-gradient(90deg, var(--sr-tint), #fff 78%);
}

.sr-group-icon {
	width: 2.1rem;
	height: 2.1rem;
	border-radius: .55rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1rem;
	background: var(--sr-accent);
	flex-shrink: 0;
}

.sr-group-head .sr-group-name {
	font-family: 'Kanit', sans-serif;
	font-weight: 500;
	font-size: 1rem;
	color: #172b4d;
	line-height: 1.2;
}

.sr-group-head .sr-group-sub {
	font-size: .74rem;
	color: #64748b;
}

.sr-dorm-count {
	border: 1px solid #d8e0e9;
	background: #fff;
	color: #475569;
	font-weight: 500;
}

.sr-dorm-note {
	margin-top: .3rem;
	color: #64748b;
	font-size: .8rem;
}

/* สถานะในแถบหัว: ปิดรับสมัคร = แดง, เปิดรับสมัคร = เขียว (สีเข้มให้เห็นชัดบนพื้นม่วง) */
.sr-hero .rb-phase {
	font-size: .85rem;
	font-weight: 500;
	padding: .2rem .75rem;
}

.sr-hero .rb-phase-closed {
	background: #dc3545;
	color: #fff;
}

.sr-hero .rb-phase-open {
	background: #16a34a;
	color: #fff;
}

.sr-hero .rb-phase-open .rb-dot {
	background: #fff;
}

@media (max-width: 575.98px) {
	.rb-hero h1 {
		font-size: 1.2rem;
	}

	.sr-info {
		font-size: .88rem;
	}
}

@media (max-width: 420px) {
	.sr-metrics {
		gap: .2rem .65rem;
	}
}

/* จำนวนรับแยกตามแบบห้อง (เฉพาะหอที่กรอก sit_buddy / sit_allroom / *_air ไว้) */
.sr-types {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .45rem .7rem;
	margin-top: .55rem;
	padding-top: .5rem;
	border-top: 1px dashed #e2e8f0;
}

/* 4 คอลัมน์แคบ: ชื่อแบบห้องขึ้นบรรทัดใหม่ได้ ตัวเลขอยู่บรรทัดล่าง */
.sr-type {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.sr-type-name {
	display: block;
	color: #64748b;
	font-size: .72rem;
	line-height: 1.25;
}

.sr-type-num {
	color: #64748b;
	font-size: .76rem;
	white-space: nowrap;
}

.sr-type-num b {
	color: #172b4d;
	font-weight: 600;
}

.sr-type .sr-meter {
	height: .45rem;
	margin-top: .15rem;
}

/* จอเล็ก/มือถือ และช่วงที่การ์ดชาย-หญิงวางคู่กันจนการ์ดแคบ ให้เหลือ 2 คอลัมน์ */
@media (max-width: 575.98px), (min-width: 768px) and (max-width: 1199.98px) {
	.sr-types {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}