/* pages/home — หน้าแรกผู้ใช้งานทั่วไป ใช้จานสีเดียวกับ pages/dashboard/view.css เพื่อความสอดคล้องกันทั้งระบบ */

.home-stat-tile {
	border-radius: 16px;
	padding: 14px 16px;
	color: #fff;
	min-height: 84px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.home-stat-label { font-size: 12.5px; opacity: 0.92; margin-bottom: 4px; line-height: 1.3; }
.home-stat-value { font-size: 26px; font-weight: 800; line-height: 1.1; }

.home-stat-blue   { background: linear-gradient(135deg, #2a78d6, #184f95); }
.home-stat-orange { background: linear-gradient(135deg, #eb6834, #b8481e); }
.home-stat-green  { background: linear-gradient(135deg, #1baf7a, #0b7d54); }
.home-stat-gray   { background: linear-gradient(135deg, #6c757d, #495057); }
.home-stat-red    { background: linear-gradient(135deg, #d9534f, #a33330); }
.home-stat-unit   { font-size: 13px; font-weight: 600; opacity: 0.85; }

/* ---------- เทียบปริมาณคำขอกับหน่วยงานอื่น ---------- */
.home-rank-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px solid #f0f0ee;
}
.home-rank-row:last-child { border-bottom: none; }
.home-rank-row-active { background: #eef5ff; border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.home-rank-label { flex: 0 0 220px; max-width: 220px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-rank-bar-wrap { flex: 1 1 auto; background: #eeeeec; border-radius: 6px; height: 14px; overflow: hidden; }
.home-rank-bar { background: linear-gradient(90deg, #2a78d6, #4a3aa7); height: 100%; border-radius: 6px; }
.home-rank-numbers { flex: 0 0 auto; font-size: 12.5px; white-space: nowrap; color: #52514e; }

@media (max-width: 767px) {
	.home-rank-row { flex-wrap: wrap; }
	.home-rank-label { flex: 1 1 100%; max-width: 100%; white-space: normal; font-weight: 600; }
	.home-rank-bar-wrap { flex: 1 1 auto; order: 3; }
	.home-rank-numbers { order: 2; margin-left: auto; }
}

.home-flow-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 4px;
}
.home-flow-step {
	flex: 1 1 150px;
	max-width: 190px;
	text-align: center;
	padding: 8px 6px;
}
.home-flow-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	margin: 0 auto 8px;
}
.home-flow-label { font-weight: 700; font-size: 13.5px; margin-bottom: 2px; }
.home-flow-desc { font-size: 11.5px; color: #6c757d; line-height: 1.3; }
.home-flow-arrow { display: flex; align-items: center; color: #ced4da; font-size: 16px; padding: 0 2px; }

@media (max-width: 767px) {
	.home-flow-arrow { transform: rotate(90deg); padding: 4px 0; }
	.home-flow-row { flex-direction: column; align-items: center; }
	.home-flow-step { max-width: 260px; }
}