@font-face {
	font-family: "Kanit";
	src: url("../fonts/Kanit-Regular.ttf") format("truetype");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Kanit";
	src: url("../fonts/Kanit-Medium.ttf") format("truetype");
	font-style: normal;
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "Kanit";
	src: url("../fonts/Kanit-SemiBold.ttf") format("truetype");
	font-style: normal;
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: "Kanit";
	src: url("../fonts/Kanit-Bold.ttf") format("truetype");
	font-style: normal;
	font-weight: 700;
	font-display: swap;
}

.ppw-hr {
	--ppw-primary: #19745b;
	--ppw-primary-dark: #125140;
	--ppw-accent: #3fa581;
	--ppw-ink: #263832;
	--ppw-muted: #66756f;
	--ppw-bg: #f6f8f7;
	--ppw-card: #ffffff;
	--ppw-border: #dce5e1;
	--ppw-success: #28885d;
	--ppw-info: #367fb8;
	--ppw-warning: #b57a19;
	--ppw-danger: #bd5147;
	--ppw-purple: #7659ad;
	--ppw-focus: #2f9c76;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(14px, 3vw, 28px);
	color: var(--ppw-ink);
	font-family: "Kanit", "Noto Sans Thai", Tahoma, Arial, sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	overflow-wrap: break-word;
}

.ppw-hr *, .ppw-hr *::before, .ppw-hr *::after { box-sizing: border-box; }
.ppw-hr h1, .ppw-hr h2, .ppw-hr h3 { color: var(--ppw-ink); line-height: 1.3; margin-top: 0; font-weight: 600; }
.ppw-hr h1 { font-size: clamp(34px, 4vw, 44px); margin-bottom: .45rem; }
.ppw-hr h2 { font-size: clamp(26px, 3vw, 32px); margin-bottom: .4rem; }
.ppw-hr h3 { font-size: 22px; margin-bottom: .35rem; }
.ppw-hr strong { font-weight: 500; }
.ppw-hr p { margin-top: 0; }
.ppw-hr small { font-size: 16px; }
.ppw-hr a { color: var(--ppw-primary); }
.ppw-hr img { max-width: 100%; }
.ppw-hr button, .ppw-hr input, .ppw-hr select, .ppw-hr textarea { font: inherit; }
.ppw-hr .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.ppw-hr-appbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 20px;
	margin-bottom: 24px;
	border-radius: 18px;
	background: var(--ppw-primary-dark);
	color: #fff;
}
.ppw-hr-appbar__brand, .ppw-hr-appbar__brand > div { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ppw-hr-appbar__brand > div { display: block; }
.ppw-hr-appbar__icon { display: grid; place-items: center; width: 60px; height: 60px; flex: 0 0 60px; border-radius: 15px; background: #fff; color: var(--ppw-primary); }
.ppw-hr-appbar__icon svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ppw-hr-appbar__school, .ppw-hr-appbar__title { display: block; color: #fff; }
.ppw-hr-appbar__school { font-size: 16px; font-weight: 400; color: #dff2ea; }
.ppw-hr-appbar__title { margin-top: 1px; font-size: 26px; font-weight: 600; line-height: 1.25; }
.ppw-hr-appbar__meta { flex: 0 0 auto; color: #e7f6ef; font-size: 16px; text-align: right; }

.ppw-hr-hero,
.ppw-hr-form-header,
.ppw-hr-report-header,
.ppw-hr-portal-header,
.ppw-hr-section-heading,
.ppw-hr-form-actions,
.ppw-hr-inline-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.ppw-hr-hero {
	padding: clamp(24px, 5vw, 44px);
	border: 1px solid #267a60;
	border-radius: 22px;
	background: linear-gradient(135deg, #0c4f40 0%, #19745b 58%, #28868a 100%);
	color: #fff;
	margin-bottom: 24px;
	box-shadow: 0 16px 40px rgba(10, 81, 61, .13);
}
.ppw-hr-hero h1, .ppw-hr-hero p { color: #fff; }
.ppw-hr-hero p { margin-bottom: 0; opacity: .9; }
.ppw-hr-eyebrow { display: block; color: inherit; font-size: 16px; font-weight: 500; letter-spacing: .01em; margin-bottom: .35rem; }

.ppw-hr-home-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 24px; }
.ppw-hr-home-actions > a { display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; align-items: center; min-height: 96px; padding: 15px; border: 1px solid var(--ppw-border); border-radius: 15px; background: #fff; color: var(--ppw-ink); text-decoration: none !important; box-shadow: 0 7px 22px rgba(24, 71, 57, .055); transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.ppw-hr-home-actions > a:hover { transform: translateY(-2px); border-color: #9ccdbb; box-shadow: 0 10px 25px rgba(24, 71, 57, .11); }
.ppw-hr-home-actions__icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: #e8f5ef; color: var(--ppw-primary); font-size: 22px; font-weight: 500; }
.ppw-hr-home-actions__icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ppw-hr-home-actions strong { font-size: 18px; font-weight: 500; color: var(--ppw-primary-dark); }
.ppw-hr-home-actions a > span:last-child { color: var(--ppw-muted); font-size: 16px; font-weight: 400; }

.ppw-hr-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 10px 17px;
	border: 1px solid var(--ppw-border);
	border-radius: 12px;
	background: var(--ppw-card);
	color: var(--ppw-primary);
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
	white-space: normal;
	overflow-wrap: break-word;
	text-decoration: none !important;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.ppw-hr-button:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(10, 81, 61, .14); }
.ppw-hr-button:focus-visible, .ppw-hr input:focus-visible, .ppw-hr select:focus-visible, .ppw-hr textarea:focus-visible { outline: 3px solid rgba(47, 156, 118, .28); outline-offset: 2px; }
.ppw-hr-button--primary { border-color: var(--ppw-primary); background: var(--ppw-primary); color: #fff !important; }
.ppw-hr-button--primary:hover { background: var(--ppw-primary-dark); }
.ppw-hr-button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.ppw-hr-button--disabled { border-color: #e1e5e3; background: #f3f5f4; color: var(--ppw-muted) !important; cursor: default; pointer-events: none; }
.ppw-hr-hero .ppw-hr-button--primary { border-color: #fff; background: #fff; color: var(--ppw-primary-dark) !important; }
.ppw-hr-hero .ppw-hr-button--primary:hover { background: #eef8f4; }

.ppw-hr-summary { display: grid; gap: 12px; margin: 18px 0 26px; }
.ppw-hr-summary--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ppw-hr-summary--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ppw-hr-summary--one { grid-template-columns: minmax(0, 460px); }
.ppw-hr-stat-link { display: block; min-width: 0; color: inherit !important; text-decoration: none !important; border-radius: 16px; }
.ppw-hr-stat-link:hover { border-color: #9ccdbb; box-shadow: 0 10px 25px rgba(24, 71, 57, .11); transform: translateY(-2px); }
.ppw-hr-stat-link:focus-visible { outline: 3px solid rgba(47, 156, 118, .28); outline-offset: 3px; }
.ppw-hr-stat { padding: 17px 20px 18px; border: 1px solid var(--ppw-border); border-top: 4px solid #7ba9cf; border-radius: 16px; background: var(--ppw-card); box-shadow: 0 7px 22px rgba(38, 56, 50, .055); transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.ppw-hr-stat span { display: block; color: var(--ppw-muted); font-size: 16px; }
.ppw-hr-stat strong { display: block; margin-top: 4px; font-size: 28px; font-weight: 600; color: #356f9c; }
.ppw-hr-stat small { display: block; margin-top: 7px; color: var(--ppw-primary); font-size: 15px; font-weight: 400; }
.ppw-hr-stat:nth-child(2) { border-top-color: #e0aa52; }
.ppw-hr-stat:nth-child(2) strong { color: #97651c; }
.ppw-hr-stat:nth-child(3) { border-top-color: #64ad88; }
.ppw-hr-stat:nth-child(3) strong { color: #277557; }
.ppw-hr-summary--four .ppw-hr-stat:nth-child(3) { border-top-color: #d77a72; }
.ppw-hr-summary--four .ppw-hr-stat:nth-child(3) strong { color: #a0443c; }
.ppw-hr-summary--four .ppw-hr-stat:nth-child(4) { border-top-color: #64ad88; }
.ppw-hr-summary--four .ppw-hr-stat:nth-child(4) strong { color: #277557; }
.ppw-hr-summary--affairs .ppw-hr-stat:first-child { border-top-color: #d77a72; }
.ppw-hr-summary--affairs .ppw-hr-stat:first-child strong { color: #a0443c; }
.ppw-hr-summary--dashboard .ppw-hr-stat:nth-child(2) { border-top-color: #d77a72; }
.ppw-hr-summary--dashboard .ppw-hr-stat:nth-child(2) strong { color: #a0443c; }
.ppw-hr-summary--dashboard .ppw-hr-stat:nth-child(3) { border-top-color: #e0aa52; }
.ppw-hr-summary--dashboard .ppw-hr-stat:nth-child(3) strong { color: #97651c; }

.ppw-hr-section { padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--ppw-border); }
.ppw-hr-section-heading { align-items: flex-start; margin-bottom: 18px; }
.ppw-hr-section-heading p { color: var(--ppw-muted); margin-bottom: 0; }
.ppw-hr-grade-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ppw-hr-grade-card { padding: 17px; border: 1px solid var(--ppw-border); border-radius: 14px; background: var(--ppw-card); }
.ppw-hr-grade-card__top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.ppw-hr-grade-card__top strong { font-size: 22px; color: var(--ppw-primary); }
.ppw-hr-grade-card progress { width: 100%; height: 12px; accent-color: var(--ppw-primary); }
.ppw-hr-grade-card p { color: var(--ppw-muted); font-size: 16px; margin: 8px 0; }

.ppw-hr-room-summary { display: grid; gap: 18px; }
.ppw-hr-room-level { display: grid; grid-template-columns: minmax(185px, .85fr) minmax(0, 4fr); gap: 18px; align-items: start; padding: 20px; border: 1px solid var(--ppw-border); border-radius: 18px; background: var(--ppw-card); box-shadow: 0 6px 20px rgba(20, 83, 63, .045); }
.ppw-hr-room-level__heading { display: block; padding: 8px 2px; margin-bottom: 0; }
.ppw-hr-room-level__heading h3, .ppw-hr-room-level__heading p { margin-bottom: 0; }
.ppw-hr-room-level__heading h3 { color: var(--ppw-primary-dark); font-size: 24px; }
.ppw-hr-room-level__heading p { margin-top: 6px; color: var(--ppw-muted); font-size: 16px; line-height: 1.5; }
.ppw-hr-room-grid { display: grid; grid-template-columns: repeat(5, minmax(132px, 1fr)); gap: 10px; }
.ppw-hr-card-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: -4px 0 16px; }
.ppw-hr-card-legend__item { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px 11px; border: 1px solid #dedfdc; border-radius: 999px; background: #fffdfa; color: #737873; font-size: 16px; font-weight: 400; }
.ppw-hr-card-legend__item i { width: 11px; height: 11px; border-radius: 50%; background: #b8bbb7; }
.ppw-hr-card-legend__item.status-pending_level_review { border-color: #c8ddef; background: #f2f8fd; color: #356f9c; }
.ppw-hr-card-legend__item.status-pending_level_review i { background: #5e98c7; }
.ppw-hr-card-legend__item.status-returned_for_revision { border-color: #eed7a9; background: #fff9ed; color: #8a641f; }
.ppw-hr-card-legend__item.status-returned_for_revision i { background: #d6a03f; }
.ppw-hr-card-legend__item.status-pending_student_affairs { border-color: #efc3bf; background: #fff3f1; color: #a0443c; }
.ppw-hr-card-legend__item.status-pending_student_affairs i { background: #cf665d; }
.ppw-hr-card-legend__item.status-received { border-color: #bde0ce; background: #f0faf5; color: #277557; }
.ppw-hr-card-legend__item.status-received i { background: #4b9e76; }
.ppw-hr-room-card { position: relative; min-width: 0; min-height: 132px; overflow: hidden; border: 1px solid #dedfdc; border-radius: 14px; background: #fffdfa; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.ppw-hr-room-card > a, .ppw-hr-room-card > strong, .ppw-hr-room-card > span { display: block; }
.ppw-hr-room-card > a { height: 100%; padding: 16px 14px 13px; color: inherit; text-decoration: none !important; }
.ppw-hr-room-card.is-missing { padding: 16px 14px 13px; }
.ppw-hr-room-card strong { color: var(--ppw-primary-dark); font-size: 18px; font-weight: 600; }
.ppw-hr-room-card__count { display: block; margin-top: 2px; color: var(--ppw-ink); font-size: 16px; font-weight: 400; }
.ppw-hr-room-card__week { display: flex !important; align-items: flex-start; gap: 6px; margin-top: 8px; color: var(--ppw-muted); font-size: 16px; line-height: 1.4; }
.ppw-hr-room-card__week i { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; background: #e4e5e2; color: #737873; font-style: normal; }
.ppw-hr-room-card__week i::before { content: "–"; font-size: 16px; line-height: 1; }
.ppw-hr-room-card.is-submitted::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: #6fa6d1; }
.ppw-hr-room-card.is-submitted .ppw-hr-room-card__week { color: #356f9c; }
.ppw-hr-room-card.is-submitted .ppw-hr-room-card__week i { background: #5e98c7; color: #fff; }
.ppw-hr-room-card.is-submitted .ppw-hr-room-card__week i::before { content: "✓"; font-size: 14px; font-weight: 600; }
.ppw-hr-room-card.status-pending_level_review { border-color: #c8ddef; background: linear-gradient(145deg, #ffffff 0%, #eff7fd 100%); }
.ppw-hr-room-card.status-returned_for_revision { border-color: #eed7a9; background: linear-gradient(145deg, #ffffff 0%, #fff7e7 100%); }
.ppw-hr-room-card.status-returned_for_revision::before { background: #d6a03f; }
.ppw-hr-room-card.status-returned_for_revision .ppw-hr-room-card__week { color: #8a641f; }
.ppw-hr-room-card.status-returned_for_revision .ppw-hr-room-card__week i { background: #d6a03f; }
.ppw-hr-room-card.status-pending_student_affairs { border-color: #efc3bf; background: linear-gradient(145deg, #ffffff 0%, #fff1ef 100%); }
.ppw-hr-room-card.status-pending_student_affairs::before { background: #cf665d; }
.ppw-hr-room-card.status-pending_student_affairs .ppw-hr-room-card__week { color: #a0443c; }
.ppw-hr-room-card.status-pending_student_affairs .ppw-hr-room-card__week i { background: #cf665d; }
.ppw-hr-room-card.status-received { border-color: #bde0ce; background: linear-gradient(145deg, #ffffff 0%, #edf9f3 100%); }
.ppw-hr-room-card.status-received::before { background: #4b9e76; }
.ppw-hr-room-card.status-received .ppw-hr-room-card__week { color: #277557; }
.ppw-hr-room-card.status-received .ppw-hr-room-card__week i { background: #4b9e76; }
.ppw-hr-room-card__latest { display: block; margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--ppw-border); color: var(--ppw-muted); font-size: 15px; line-height: 1.4; }
.ppw-hr-room-card.has-history::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: #7ba9cf; }
.ppw-hr-room-card.latest-status-returned_for_revision::before { background: #d6a03f; }
.ppw-hr-room-card.latest-status-pending_student_affairs::before { background: #cf665d; }
.ppw-hr-room-card.latest-status-received::before { background: #4b9e76; }
.ppw-hr-room-card.is-submitted:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(38, 56, 50, .11); }

.ppw-hr-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 0; }
.ppw-hr-filter select { min-height: 46px; padding: 8px 40px 8px 14px; border: 1px solid var(--ppw-border); border-radius: 11px; background: var(--ppw-card); color: var(--ppw-ink); }
.ppw-hr-search-filter { display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(135px, .65fr)) auto; gap: 12px; align-items: end; padding: 16px; margin-bottom: 12px; border: 1px solid var(--ppw-border); border-radius: 16px; background: #fbfcfb; }
.ppw-hr-search-filter label { display: grid; gap: 5px; min-width: 0; font-weight: 400; }
.ppw-hr-search-filter label > span { color: var(--ppw-muted); font-size: 16px; }
.ppw-hr-search-filter input, .ppw-hr-search-filter select { width: 100%; min-height: 48px; padding: 9px 12px; border: 1px solid var(--ppw-border); border-radius: 11px; background: var(--ppw-card); color: var(--ppw-ink); }
.ppw-hr-search-filter__actions { display: flex; gap: 8px; align-items: center; }
.ppw-hr-search-filter__actions .ppw-hr-button { min-width: 104px; white-space: nowrap; }
.ppw-hr-result-count { color: var(--ppw-muted); margin: 0 0 8px; }
.ppw-hr-pagination { margin-top: 20px; }
.ppw-hr-pagination .page-numbers { list-style: none; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; padding: 0; margin: 0; }
.ppw-hr-pagination .page-numbers li { margin: 0; }
.ppw-hr-pagination a.page-numbers, .ppw-hr-pagination span.page-numbers { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 7px 11px; border: 1px solid var(--ppw-border); border-radius: 10px; background: var(--ppw-card); color: var(--ppw-primary); text-decoration: none; }
.ppw-hr-pagination span.page-numbers.current { border-color: var(--ppw-primary); background: var(--ppw-primary); color: #fff; }
.ppw-hr-grade-group { padding-top: 18px; scroll-margin-top: 20px; }
.ppw-hr-report-list { display: grid; }
.ppw-hr-report-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--ppw-border); border-radius: 15px; background: var(--ppw-card); }
.ppw-hr-report-table-wrap:focus-visible { outline: 3px solid rgba(47, 156, 118, .28); outline-offset: 2px; }
.ppw-hr-report-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ppw-hr-report-table th, .ppw-hr-report-table td { padding: 13px 14px; border-bottom: 1px solid var(--ppw-border); text-align: left; vertical-align: middle; font-size: 16px; font-weight: 400; overflow-wrap: anywhere; }
.ppw-hr-report-table th { background: #f2f7f5; color: var(--ppw-primary-dark); font-weight: 500; }
.ppw-hr-report-table th:nth-child(1) { width: 13%; }
.ppw-hr-report-table th:nth-child(2) { width: 18%; }
.ppw-hr-report-table th:nth-child(3) { width: 14%; }
.ppw-hr-report-table th:nth-child(4) { width: 29%; }
.ppw-hr-report-table th:nth-child(5) { width: 26%; }
.ppw-hr-report-table tbody tr:last-child td { border-bottom: 0; }
.ppw-hr-report-table tbody tr:hover { background: #fbfdfc; }
.ppw-hr-report-table td strong { color: var(--ppw-primary-dark); font-weight: 500; }
.ppw-hr-report-table time { white-space: nowrap; }
.ppw-hr-button--compact { min-height: 40px; padding: 7px 12px; white-space: nowrap; }
.ppw-hr-table-note { display: inline-block; color: var(--ppw-muted); font-size: 15px; font-weight: 400; }
.ppw-hr-report-row { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(150px, 1fr) minmax(100px, .7fr) auto; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--ppw-border); }
.ppw-hr-report-row div:first-child span { display: block; color: var(--ppw-muted); font-size: 16px; }
.ppw-hr-report-row__count { color: var(--ppw-muted); }
.ppw-hr-empty { padding: 30px 18px; text-align: center; color: var(--ppw-muted); background: var(--ppw-bg); border-radius: 12px; }
.ppw-hr-muted { color: var(--ppw-muted); }

.ppw-hr-status { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 11px; border: 1px solid #c8ddef; border-radius: 999px; font-size: 16px; font-weight: 400; background: #f2f8fd; color: #356f9c; }
.ppw-hr-status--received { border-color: #bde0ce; background: #f0faf5; color: #277557; }
.ppw-hr-status--returned_for_revision { border-color: #eed7a9; background: #fff9ed; color: #8a641f; }
.ppw-hr-status--pending_student_affairs { border-color: #efc3bf; background: #fff3f1; color: #a0443c; }

.ppw-hr-breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; color: var(--ppw-muted); }
.ppw-hr-report-header, .ppw-hr-form-header, .ppw-hr-portal-header { align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid var(--ppw-border); }
.ppw-hr-report-header p, .ppw-hr-form-header p, .ppw-hr-portal-header p { color: var(--ppw-muted); margin-bottom: 0; }
.ppw-hr-report-header .ppw-hr-eyebrow, .ppw-hr-form-header .ppw-hr-eyebrow, .ppw-hr-portal-header .ppw-hr-eyebrow { color: var(--ppw-primary); }
.ppw-hr-pdf-wait { max-width: 280px; color: var(--ppw-muted); font-size: 16px; }

.ppw-hr-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 22px 0; overflow: hidden; border: 1px solid var(--ppw-border); border-radius: 12px; background: var(--ppw-border); }
.ppw-hr-meta > div { padding: 13px 15px; background: var(--ppw-card); }
.ppw-hr-meta dt { color: var(--ppw-muted); font-size: 16px; }
.ppw-hr-meta dd { margin: 2px 0 0; font-weight: 400; overflow-wrap: anywhere; }
.ppw-hr-attendance-summary, .ppw-hr-attendance-live { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.ppw-hr-attendance-summary > div, .ppw-hr-attendance-live > div { text-align: center; padding: 12px 6px; border-radius: 10px; background: var(--ppw-bg); }
.ppw-hr-attendance-summary span, .ppw-hr-attendance-live span { display: block; color: var(--ppw-muted); font-size: 16px; }
.ppw-hr-attendance-summary strong, .ppw-hr-attendance-live strong { display: block; color: var(--ppw-primary-dark); font-size: 22px; }
.ppw-hr .ppw-hr-attendance--present { background: #e8f6ef; }
.ppw-hr .ppw-hr-attendance--present span, .ppw-hr .ppw-hr-attendance--present strong { color: #0e7b50; }
.ppw-hr .ppw-hr-attendance--sick { background: #eaf3fd; }
.ppw-hr .ppw-hr-attendance--sick span, .ppw-hr .ppw-hr-attendance--sick strong { color: #246bb0; }
.ppw-hr .ppw-hr-attendance--leave { background: #fff4d3; }
.ppw-hr .ppw-hr-attendance--leave span, .ppw-hr .ppw-hr-attendance--leave strong { color: #9b6100; }
.ppw-hr .ppw-hr-attendance--absent { background: #fdecec; }
.ppw-hr .ppw-hr-attendance--absent span, .ppw-hr .ppw-hr-attendance--absent strong { color: #b9241e; }
.ppw-hr .ppw-hr-attendance--activity { background: #f1ecfa; }
.ppw-hr .ppw-hr-attendance--activity span, .ppw-hr .ppw-hr-attendance--activity strong { color: #6947aa; }
.ppw-hr-privacy-note { color: var(--ppw-muted); font-size: 16px; }
.ppw-hr-reading p { white-space: normal; overflow-wrap: anywhere; }
.ppw-hr-photo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ppw-hr-photo-pair figure { margin: 0; }
.ppw-hr-photo-pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 12px; background: var(--ppw-bg); }
.ppw-hr-photo-pair figcaption { color: var(--ppw-muted); font-size: 16px; padding-top: 7px; }

.ppw-hr-stepper { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0; margin: 22px 0 30px; }
.ppw-hr-stepper li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--ppw-muted); font-size: 16px; }
.ppw-hr-stepper li strong { font-weight: 400; }
.ppw-hr-stepper li::after { content: ""; position: absolute; top: 18px; left: calc(50% + 24px); width: calc(100% - 48px); height: 2px; background: var(--ppw-border); }
.ppw-hr-stepper li:last-child::after { display: none; }
.ppw-hr-stepper li span { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--ppw-border); background: var(--ppw-card); color: var(--ppw-muted); font-weight: 500; }
.ppw-hr-stepper li.is-current, .ppw-hr-stepper li.is-complete { color: var(--ppw-primary); }
.ppw-hr-stepper li.is-current span, .ppw-hr-stepper li.is-complete span { border-color: var(--ppw-primary); background: var(--ppw-primary); color: #fff; }
.ppw-hr-stepper li.is-complete::after { background: var(--ppw-primary); }
.ppw-hr-form-step { animation: ppwHrStepIn .18s ease-out; }
.ppw-hr-form-step[hidden] { display: none !important; }
@keyframes ppwHrStepIn { from { opacity: .5; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.ppw-hr-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ppw-hr-field { display: grid; gap: 6px; margin: 0 0 16px; font-weight: 400; }
.ppw-hr-field--wide { grid-column: 1 / -1; }
.ppw-hr-field input, .ppw-hr-field select, .ppw-hr-field textarea { width: 100%; min-height: 50px; padding: 11px 13px; border: 1px solid var(--ppw-border); border-radius: 11px; background: var(--ppw-card); color: var(--ppw-ink); font-weight: 400; }
.ppw-hr-field textarea { min-height: 120px; resize: vertical; }
.ppw-hr-field input[readonly] { background: var(--ppw-bg); color: var(--ppw-muted); }
.ppw-hr-field small { color: var(--ppw-muted); font-weight: 400; }
.ppw-hr-thai-date { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(210px, 1.5fr) minmax(150px, 1fr); gap: 10px; }
.ppw-hr-date-part { display: grid; gap: 5px; min-width: 0; color: var(--ppw-muted); font-size: 16px; font-weight: 400; }
.ppw-hr-date-part select { min-width: 0; padding-left: 10px; padding-right: 8px; font-size: 17px; }
.ppw-hr-week-preview { grid-column: 1 / -1; padding: 10px 12px; border: 1px solid #c8ddef; border-radius: 10px; background: #f2f8fd; color: #315f83; font-size: 16px; font-weight: 400; }
.ppw-hr-form-actions { margin-top: 20px; }
.ppw-hr-privacy-warning { padding: 14px 16px; margin-bottom: 18px; border: 1px solid #eed7a9; border-left: 4px solid #d6a03f; border-radius: 12px; background: #fff9ed; color: #73551e; font-weight: 400; }
.ppw-hr-privacy-warning p { margin-bottom: 0; }
.ppw-hr-privacy-warning strong { font-weight: 500; }

.ppw-hr-attendance-live { position: sticky; top: 10px; z-index: 10; padding: 8px; border: 1px solid var(--ppw-border); border-radius: 12px; background: rgba(255, 255, 255, .96); box-shadow: 0 8px 24px rgba(26, 38, 50, .08); }
.ppw-hr-attendance-group { margin: 22px 0 2px; padding: 10px 14px; border-left: 5px solid #658dae; border-radius: 10px; background: #eef5fa; color: #315f83; font-size: 18px; font-weight: 500; }
.ppw-hr-attendance-group:first-child { margin-top: 12px; }
.ppw-hr-attendance-group--female { border-left-color: #8a70b7; background: #f5f1fb; color: #654d8c; }
.ppw-hr-attendance-group--unknown { border-left-color: #c4933c; background: #fff8e9; color: #73551e; }
.ppw-hr-attendance-row { display: grid; grid-template-columns: minmax(160px, .8fr) minmax(520px, 2fr); gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--ppw-border); }
.ppw-hr-student-name span { display: block; }
.ppw-hr-student-name__name { color: var(--ppw-ink); font-size: 17px; font-weight: 400; }
.ppw-hr-student-name__details { color: var(--ppw-muted); font-size: 16px; font-weight: 400; }
.ppw-hr-attendance-options { display: grid; grid-template-columns: repeat(5, minmax(92px, 1fr)); gap: 7px; border: 0; padding: 0; margin: 0; }
.ppw-hr-attendance-option { position: relative; display: block; min-height: 44px; }
.ppw-hr-attendance-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ppw-hr-attendance-option span { display: grid; place-items: center; min-height: 44px; padding: 7px; border: 1px solid var(--ppw-border); border-radius: 9px; background: var(--ppw-card); color: var(--ppw-ink); cursor: pointer; }
.ppw-hr-attendance-option input:checked + span { border-color: var(--ppw-primary); background: var(--ppw-primary); color: #fff; font-weight: 500; }
.ppw-hr-attendance-option--present input:checked + span { border-color: #138a5b; background: #138a5b; color: #fff; }
.ppw-hr-attendance-option--sick input:checked + span { border-color: #2476c9; background: #2476c9; color: #fff; }
.ppw-hr-attendance-option--leave input:checked + span { border-color: #e1a814; background: #f2bf3f; color: #493400; }
.ppw-hr-attendance-option--absent input:checked + span { border-color: #c9342c; background: #c9342c; color: #fff; }
.ppw-hr-attendance-option--activity input:checked + span { border-color: #7554b8; background: #7554b8; color: #fff; }
.ppw-hr-attendance-option input:focus-visible + span { outline: 3px solid rgba(47, 156, 118, .28); outline-offset: 2px; }
.ppw-hr-checkbox { display: flex; align-items: flex-start; gap: 10px; }
.ppw-hr-checkbox input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--ppw-primary); }
.ppw-hr-confirm-line { padding: 16px; margin-top: 18px; border-radius: 10px; background: var(--ppw-bg); }
.ppw-hr-confirm-line strong { font-weight: 500; }

.ppw-hr-photo-upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ppw-hr-photo-upload { display: grid; gap: 9px; padding: 14px; border: 2px dashed var(--ppw-border); border-radius: 14px; cursor: pointer; }
.ppw-hr-photo-upload strong { font-weight: 500; }
.ppw-hr-photo-upload:hover { border-color: var(--ppw-primary); }
.ppw-hr-photo-upload img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.ppw-hr-photo-placeholder { display: grid; place-items: center; min-height: 180px; padding: 20px; text-align: center; border-radius: 10px; background: var(--ppw-bg); color: var(--ppw-muted); }
.ppw-hr-photo-upload input { width: 100%; min-height: 44px; }
.ppw-hr-review-summary { margin-top: 20px; padding: 16px; border: 1px solid var(--ppw-border); border-radius: 12px; background: var(--ppw-card); }
.ppw-hr-review-summary dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.ppw-hr-review-summary dt { color: var(--ppw-muted); font-size: 16px; }
.ppw-hr-review-summary dd { margin: 0; font-weight: 400; }
.ppw-hr-review-summary .ppw-hr-review-wide { grid-column: 1 / -1; }
.ppw-hr-review-summary .ppw-hr-review-wide dd { white-space: pre-wrap; overflow-wrap: anywhere; }
.ppw-hr-review-edit-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.ppw-hr-notice { padding: 14px 16px; margin: 16px 0; border: 1px solid #c8ddef; border-left: 4px solid #5e98c7; border-radius: 12px; background: #f2f8fd; color: #315f83; font-weight: 400; box-shadow: 0 4px 14px rgba(38, 56, 50, .035); }
.ppw-hr-notice strong { font-weight: 500; }
.ppw-hr-notice--success { border-color: #bde0ce; border-left-color: #4b9e76; background: #f0faf5; color: #256747; }
.ppw-hr-notice--warning { border-color: #eed7a9; border-left-color: #d6a03f; background: #fff9ed; color: #73551e; }
.ppw-hr-notice--error { border-color: #ecc4bf; border-left-color: #d46c62; background: #fff3f1; color: #7a3c36; }
.ppw-hr-notice--info { border-color: #c8ddef; border-left-color: #5e98c7; background: #f2f8fd; color: #315f83; }
.ppw-hr-error-text { color: var(--ppw-danger); font-size: 16px; }

.ppw-hr-loading { position: fixed; inset: 0; z-index: 99999; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; background: rgba(10, 25, 40, .72); color: #fff; text-align: center; }
.ppw-hr-loading strong { font-weight: 400; }
.ppw-hr-loading[hidden] { display: none; }
.ppw-hr-spinner { width: 42px; height: 42px; border: 4px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: ppwHrSpin .8s linear infinite; }
@keyframes ppwHrSpin { to { transform: rotate(360deg); } }

.ppw-hr-login { max-width: 780px; }
.ppw-hr-panel { width: 100%; min-width: 0; padding: 26px; border: 1px solid var(--ppw-border); border-radius: 14px; background: var(--ppw-card); }
.ppw-hr-portal-choices { display: grid; gap: 10px; margin: 18px 0; }
.ppw-hr-login label { display: block; font-weight: 400; }
.ppw-hr-login form { display: grid; gap: 14px; }
.ppw-hr-login input[type="text"], .ppw-hr-login input[type="password"], .ppw-hr-login select { width: 100%; min-width: 0; min-height: 50px; padding: 10px 12px; border: 1px solid var(--ppw-border); border-radius: 9px; }
.ppw-hr-login input[type="submit"] { min-height: 46px; padding: 10px 18px; border: 0; border-radius: 9px; background: var(--ppw-primary); color: #fff; font-weight: 500; cursor: pointer; }
.ppw-hr-login__back { margin: 18px 0 0; }
.ppw-hr-password-control { position: relative; display: block; width: 100%; min-width: 0; }
.ppw-hr-password-control input { padding-right: 54px !important; }
.ppw-hr-password-toggle { position: absolute; top: 50%; right: 5px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; min-height: 42px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--ppw-muted); cursor: pointer; transform: translateY(-50%); }
.ppw-hr-password-toggle:hover { background: var(--ppw-bg); color: var(--ppw-primary); }
.ppw-hr-password-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ppw-hr-password-toggle .ppw-hr-eye-closed, .ppw-hr-password-control.is-visible .ppw-hr-eye-open { display: none; }
.ppw-hr-password-control.is-visible .ppw-hr-eye-closed { display: block; }
.ppw-hr-table-wrap { width: 100%; overflow-x: auto; }
.ppw-hr-table { width: 100%; border-collapse: collapse; }
.ppw-hr-table th, .ppw-hr-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--ppw-border); }
.ppw-hr-table th { background: var(--ppw-bg); }
.ppw-hr-table .ppw-hr-table-group th { border-left: 5px solid #658dae; background: #eef5fa; color: #315f83; font-size: 17px; font-weight: 500; }
.ppw-hr-table .ppw-hr-table-group--female th { border-left-color: #8a70b7; background: #f5f1fb; color: #654d8c; }
.ppw-hr-table .ppw-hr-table-group--unknown th { border-left-color: #c4933c; background: #fff8e9; color: #73551e; }
.ppw-hr-attendance-status { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 11px; border: 1px solid var(--ppw-border); border-radius: 999px; font-size: 16px; font-weight: 400; white-space: nowrap; }
.ppw-hr-attendance-status--present { border-color: #9fd2b9; background: #eef9f3; color: #176743; }
.ppw-hr-attendance-status--sick { border-color: #a8cce9; background: #eef6fc; color: #245f91; }
.ppw-hr-attendance-status--leave { border-color: #e7c86d; background: #fff8df; color: #76530a; }
.ppw-hr-attendance-status--absent { border-color: #e5aaa4; background: #fff0ee; color: #9d302a; }
.ppw-hr-attendance-status--activity { border-color: #c8b9df; background: #f5f0fb; color: #65458f; }
.ppw-hr-attendance-record--sick td { background: #f8fbfe; }
.ppw-hr-attendance-record--leave td { background: #fffdf5; }
.ppw-hr-attendance-record--absent td { background: #fff9f8; }
.ppw-hr-attendance-record--activity td { background: #fbf9fd; }
.ppw-hr-review-form { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ppw-border); }
.ppw-hr-revision-history summary { cursor: pointer; color: var(--ppw-primary-dark); }
.ppw-hr-revision-history summary strong { font-weight: 500; }
.ppw-hr-revision-history ul { margin-bottom: 0; color: var(--ppw-muted); }
.ppw-hr-submission-receipt .ppw-hr-meta { max-width: 860px; }

@media (max-width: 1080px) {
	.ppw-hr-search-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ppw-hr-search-filter__search, .ppw-hr-search-filter__actions { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
	.ppw-hr-home-actions { grid-template-columns: 1fr; }
	.ppw-hr-home-actions > a { min-height: 88px; }
	.ppw-hr-summary--three, .ppw-hr-summary--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ppw-hr-grade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ppw-hr-report-row { grid-template-columns: 1fr auto; }
	.ppw-hr-report-row__count { grid-column: 1; }
	.ppw-hr-attendance-row { grid-template-columns: 1fr; }
	.ppw-hr-attendance-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ppw-hr-room-level { grid-template-columns: 1fr; padding: 16px; }
	.ppw-hr-room-level__heading { padding: 0; }
	.ppw-hr-room-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.ppw-hr { padding: 12px; font-size: 17px; }
	.ppw-hr-appbar { align-items: flex-start; flex-direction: column; padding: 14px; }
	.ppw-hr-appbar__brand { align-items: flex-start; }
	.ppw-hr-appbar__icon { width: 56px; height: 56px; flex-basis: 56px; }
	.ppw-hr-appbar__title { font-size: 23px; }
	.ppw-hr-appbar__meta { width: 100%; padding-left: 0; text-align: left; }
	.ppw-hr-hero, .ppw-hr-form-header, .ppw-hr-report-header, .ppw-hr-portal-header { align-items: stretch; }
	.ppw-hr-hero .ppw-hr-button, .ppw-hr-report-header .ppw-hr-button { width: 100%; }
	.ppw-hr-summary--three, .ppw-hr-summary--four, .ppw-hr-grade-grid, .ppw-hr-form-grid, .ppw-hr-meta, .ppw-hr-photo-pair, .ppw-hr-photo-upload-grid, .ppw-hr-review-summary dl { grid-template-columns: 1fr; }
	.ppw-hr-attendance-summary, .ppw-hr-attendance-live { grid-template-columns: repeat(3, 1fr); }
	.ppw-hr-attendance-live { top: 4px; }
	.ppw-hr-attendance-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ppw-hr-form-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
	.ppw-hr-form-actions > span:empty { display: none; }
	.ppw-hr-form-actions .ppw-hr-button { width: 100%; }
	.ppw-hr-thai-date { grid-template-columns: 1fr; gap: 9px; }
	.ppw-hr-date-part select { padding-left: 10px; padding-right: 8px; font-size: 17px; }
	.ppw-hr-review-edit-actions { display: grid; grid-template-columns: 1fr; }
	.ppw-hr-review-edit-actions .ppw-hr-button { width: 100%; }
	.ppw-hr-inline-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
	.ppw-hr-inline-actions .ppw-hr-button { width: 100%; }
	.ppw-hr-report-row { grid-template-columns: 1fr; }
	.ppw-hr-report-row .ppw-hr-button { width: 100%; }
	.ppw-hr-stepper li strong { font-size: 16px; }
	.ppw-hr-stepper li::after { left: calc(50% + 20px); width: calc(100% - 40px); }
	.ppw-hr-room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ppw-hr-room-card > a, .ppw-hr-room-card.is-missing { padding: 12px; }
	.ppw-hr-search-filter { grid-template-columns: 1fr; padding: 13px; }
	.ppw-hr-search-filter__search, .ppw-hr-search-filter__actions { grid-column: auto; }
	.ppw-hr-search-filter__actions { display: grid; grid-template-columns: 1fr; }
	.ppw-hr-search-filter__actions .ppw-hr-button { width: 100%; }
	.ppw-hr-panel { padding: 20px 16px; }
	.ppw-hr-report-table-wrap { overflow: visible; border: 0; background: transparent; }
	.ppw-hr-report-table, .ppw-hr-report-table tbody { display: block; width: 100%; }
	.ppw-hr-report-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
	.ppw-hr-report-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-bottom: 12px; padding: 8px; border: 1px solid var(--ppw-border); border-radius: 14px; background: var(--ppw-card); box-shadow: 0 5px 16px rgba(38, 56, 50, .05); }
	.ppw-hr-report-table th, .ppw-hr-report-table td { display: grid; gap: 4px; min-width: 0; padding: 8px; border: 0; font-size: 16px; }
	.ppw-hr-report-table td::before { content: attr(data-label); color: var(--ppw-muted); font-size: 14px; font-weight: 400; }
	.ppw-hr-report-table td:nth-child(4), .ppw-hr-report-table td:nth-child(5) { grid-column: 1 / -1; }
	.ppw-hr-report-table td:nth-child(5) .ppw-hr-button { width: 100%; }
}

@media (max-width: 420px) {
	.ppw-hr-attendance-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ppw-hr-appbar__brand { gap: 12px; }
	.ppw-hr-appbar__title { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
	.ppw-hr *, .ppw-hr *::before, .ppw-hr *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}