/* ตารางเช็คชื่อผู้เข้าร่วม (หน้าจัดการ) · เน้นกดบนมือถือ (เจ้าของระบบ 21 ต.ค. 2569)
   แถบนับยอด + ค้นหาติดใต้แถบบน · หัวตารางติดใต้แถบนั้น · ปุ่มขั้นถัดไปตามสถานะ + ย้อนกลับ
   แถวเป็น grid ทั้งจอเล็กและจอใหญ่ (ไม่มีเลื่อนแนวนอน) */
.roster-panel {
  --roster-top: calc(72px + var(--safe-top, 0px)); /* admin.js ตั้งค่าจริงจากความสูงแถบบน */
  --roster-head-h: 104px;
  --roster-line: var(--health-border, #d9e0dc);
  --roster-muted: var(--health-muted, #66736c);
}

.roster-panel .roster-head {
  position: sticky; top: var(--roster-top); z-index: 3;
  display: grid; gap: 8px; margin: 0 -4px; padding: 8px 4px;
  background: var(--health-paper, #fff); border-bottom: 1px solid var(--roster-line);
}
/* นับยอดแถวเดียว ปัดซ้ายขวาดูได้ (แถบติดด้านบนไม่สูงจนบังรายชื่อ) · จอกว้างขึ้นบรรทัดใหม่ได้ */
.roster-panel .roster-counts { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; margin: 0 -4px; padding: 2px 4px; }
.roster-panel .roster-counts::-webkit-scrollbar { display: none; }
.roster-panel .roster-count { flex: 0 0 auto; }
.roster-panel .roster-count {
  --c: #344054; --bg: #f2f4f7;
  display: inline-flex; align-items: baseline; gap: 5px; min-height: 38px;
  padding: 6px 10px; border: 2px solid transparent; border-radius: 10px; background: var(--bg); color: var(--c);
  font: inherit; text-align: left; cursor: pointer;
}
.roster-panel .roster-count span { white-space: nowrap; font-size: .8rem; font-weight: 700; line-height: 1.2; }
.roster-panel .roster-count strong { font-size: 1rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.roster-panel .roster-count[aria-pressed="true"] { border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 20%, transparent); }
.roster-panel .roster-count.is-info { cursor: default; background: transparent; border: 1px dashed var(--roster-line); color: var(--roster-muted); }
.roster-panel .roster-count:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }

.roster-panel .roster-search { position: relative; display: block; }
.roster-panel .roster-search .material-symbols-rounded { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--roster-muted); font-size: 22px; pointer-events: none; }
.roster-panel .roster-search input {
  width: 100%; min-height: 46px; padding: 8px 12px 8px 42px; border: 1px solid #c9d2cd; border-radius: 12px;
  background: #fff; font: inherit; font-size: 1rem;
}
.roster-panel .roster-search input:focus-visible { outline: 3px solid color-mix(in srgb, var(--health-primary, #256e45) 35%, transparent); border-color: var(--health-primary, #256e45); }

.roster-panel .roster-table, .roster-panel .roster-table thead, .roster-panel .roster-table tbody { display: block; width: 100%; }
.roster-panel .roster-table { border-collapse: collapse; }
.roster-panel .roster-table tr {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; grid-template-areas: "bib name status" "act act act";
  gap: 4px 10px; align-items: center;
}
.roster-panel .roster-table thead {
  position: sticky; top: calc(var(--roster-top) + var(--roster-head-h)); z-index: 2;
  background: var(--health-soft, #eaf4ee); border-bottom: 1px solid var(--roster-line);
}
.roster-panel .roster-table thead tr { grid-template-areas: "bib name status"; padding: 0 4px; }
.roster-panel .roster-table th { padding: 0; font-weight: 700; text-align: left; }
.roster-panel .roster-table th.col-actions { display: none; }
.roster-panel .roster-table th button {
  display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 2px; border: 0; background: transparent;
  color: var(--health-primary-dark, #194e31); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
}
/* ไอคอนเรียงลำดับเป็น Google Material Symbols ทุกคอลัมน์ (เจ้าของระบบ 24 ต.ค. 2569: ลูกศร ↕ บน iPhone กลายเป็นอีโมจิกล่อง)
   ยังไม่เรียง = unfold_more จาง · เรียงขึ้น/ลง = arrow_upward / arrow_downward · ฟอนต์ไอคอนโหลดไม่ได้ ใช้ลูกศรธรรมดา */
.roster-panel .roster-table th button::after {
  content: "unfold_more"; font-family: 'Material Symbols Rounded'; font-weight: 400; font-style: normal; font-size: 20px; line-height: 1;
  letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; font-feature-settings: 'liga'; opacity: .45;
}
.roster-panel .roster-table th[aria-sort="ascending"] button::after { content: "arrow_upward"; opacity: 1; }
.roster-panel .roster-table th[aria-sort="descending"] button::after { content: "arrow_downward"; opacity: 1; }
.msh-no-icon-font .roster-panel .roster-table th button::after { content: "\21C5"; font-family: system-ui, sans-serif; font-size: .85rem; }
.msh-no-icon-font .roster-panel .roster-table th[aria-sort="ascending"] button::after { content: "\2191"; }
.msh-no-icon-font .roster-panel .roster-table th[aria-sort="descending"] button::after { content: "\2193"; }
.roster-panel .roster-table th button:focus-visible { outline: 3px solid var(--health-primary, #256e45); outline-offset: -2px; border-radius: 6px; }
.roster-panel .roster-table .col-bib { grid-area: bib; }
.roster-panel .roster-table .col-name { grid-area: name; min-width: 0; }
.roster-panel .roster-table .col-status { grid-area: status; justify-self: end; text-align: right; }
/* ปุ่มคร่อมทุกคอลัมน์: ไม่ให้ความกว้างปุ่มดันคอลัมน์สถานะจนชื่อเหลือ 0 */
.roster-panel .roster-table .col-actions { grid-area: act; min-width: 0; contain: inline-size; }

.roster-panel .roster-table tbody tr { padding: 10px 4px; border-bottom: 1px solid var(--roster-line); }
.roster-panel .roster-table tbody tr[aria-busy="true"] { opacity: .6; }
.roster-panel .roster-table td { padding: 0; border: 0; }
.roster-panel .roster-table td.col-bib { align-self: start; }
.roster-panel .roster-table td.col-bib .bib {
  display: inline-grid; place-items: center; width: 58px; min-height: 48px; padding: 0 4px; border-radius: 12px;
  background: var(--health-soft, #eaf4ee); color: var(--health-primary-dark, #194e31);
  font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.roster-panel .roster-table td.col-name strong { display: block; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.roster-panel .roster-table .person-sub { display: block; color: var(--roster-muted); font-size: .82rem; line-height: 1.3; overflow-wrap: anywhere; }
.roster-panel .roster-pill {
  display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 999px;
  background: var(--bg); color: var(--c); font-size: .8rem; font-weight: 700; white-space: nowrap;
}
.roster-panel .roster-pill .material-symbols-rounded { font-size: 16px; }

.roster-panel .roster-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.roster-panel .roster-btn {
  --c: #475467; --bg: #f2f4f7;
  display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 44px;
  padding: 0 10px; border: 2px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: 12px;
  background: var(--bg); color: var(--c); font: inherit; font-size: .92rem; font-weight: 700; white-space: nowrap; cursor: pointer;
  touch-action: manipulation;
}
.roster-panel .roster-btn .material-symbols-rounded { font-size: 20px; }
.roster-panel .roster-btn:first-child:not(.is-back, .is-edit) { background: var(--c); border-color: var(--c); color: #fff; }
.roster-panel .roster-btn.is-back, .roster-panel .roster-btn.is-edit { flex: 0 0 44px; padding: 0; border-color: transparent; }
.roster-panel .roster-btn:disabled { cursor: progress; }
.roster-panel .roster-btn:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }
.roster-panel .roster-empty td { display: block; grid-column: 1 / -1; padding: 18px 4px; color: var(--roster-muted); text-align: center; }

@media (min-width: 760px) {
  .roster-panel .roster-counts { flex-wrap: wrap; overflow: visible; }
  .roster-panel .roster-table tr,
  .roster-panel .roster-table thead tr { grid-template-columns: 72px minmax(0, 1.3fr) 150px minmax(0, 1.5fr); grid-template-areas: "bib name status act"; }
  .roster-panel .roster-table th.col-actions { display: block; }
  .roster-panel .roster-table .col-status { justify-self: start; text-align: left; }
  .roster-panel .roster-table td.col-bib { align-self: center; }
  .roster-panel .roster-table td.col-bib .bib { width: 64px; }
}
/* จอแคบ: ปุ่มขั้นถัดไปเหลือแต่ข้อความ ให้ 2 ปุ่ม + ย้อนกลับ + แก้ไข อยู่บรรทัดเดียว */
@media (max-width: 420px) {
  .roster-panel .roster-btn:not(.is-back, .is-edit) .material-symbols-rounded { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .roster-panel .roster-btn { transition: transform .08s ease; }
  .roster-panel .roster-btn:active:not(:disabled) { transform: scale(.97); }
}
/* สีประจำสถานะ (ท้ายไฟล์ ให้ทับค่าเริ่มต้นของปุ่ม/ป้าย) */
.roster-panel .step-registered { --c: #b54708; --bg: #fffaeb; }
.roster-panel .step-confirmed { --c: #175cd3; --bg: #eff8ff; }
.roster-panel .step-checked_in { --c: #067647; --bg: #ecfdf3; }
.roster-panel .step-finished { --c: #194e31; --bg: #e8f3ec; }
.roster-panel .step-dnf { --c: #c4320a; --bg: #fff4ed; }
.roster-panel .step-dns { --c: #5925dc; --bg: #f4f3ff; }
.roster-panel .step-cancelled { --c: #b42318; --bg: #fef3f2; }
/* ปุ่มสถานะในหน้าต่างแก้ไขผู้สมัคร: สีเดียวกับตารางเช็คชื่อ */
#participantStatusSegment .pstatus-registered { --c: #b54708; --bg: #fffaeb; }
#participantStatusSegment .pstatus-confirmed { --c: #175cd3; --bg: #eff8ff; }
/* กลางแจ้ง: แถบเตือนไม่มีสัญญาณ · ไอคอนหมุนบนปุ่มที่กำลังบันทึก (แสดงแม้จอแคบที่ซ่อนไอคอนปุ่ม) */
.roster-panel .roster-offline { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 10px; border-radius: 10px; background: #fef3f2; color: #b42318; font-size: .9rem; font-weight: 700; }
.roster-panel .roster-offline.hidden { display: none; }
.roster-panel .roster-btn .material-symbols-rounded.is-spin { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .roster-panel .roster-btn .is-spin { animation: roster-spin 1s linear infinite; }
}
@keyframes roster-spin { to { transform: rotate(360deg); } }
/* หลังจบงาน: Finished / DNF / DNS เป็นปุ่มเส้นขอบเท่ากัน · สถานะปัจจุบันเป็นปุ่มทึบมีเครื่องหมายถูก (กดซ้ำไม่ได้) */
.roster-panel .roster-actions.is-ended .roster-btn:first-child:not(.is-current, .is-edit) { background: var(--bg); border-color: color-mix(in srgb, var(--c) 45%, transparent); color: var(--c); }
.roster-panel .roster-actions.is-ended .roster-btn { padding: 0 6px; }
.roster-panel .roster-btn.is-current { background: var(--c); border-color: var(--c); color: #fff; cursor: default; opacity: 1; }

/* ไซส์เสื้อแต่ละขนาดสีตัวอักษรต่างกัน ตรวจด้วยตาได้เร็ว (เจ้าของระบบ 28 ต.ค. 2569) · ใช้ในรายชื่อและตารางสรุปไซส์ (admin-shirts.js shirtClass) */
.shirt-ss { --shirt: #6b21a8; } .shirt-s { --shirt: #1d4ed8; } .shirt-m { --shirt: #047857; } .shirt-l { --shirt: #b45309; }
.shirt-xl { --shirt: #be123c; } .shirt-xxl { --shirt: #0e7490; } .shirt-3xl { --shirt: #7c2d12; } .shirt-4xl { --shirt: #4d7c0f; }
.shirt-5xl { --shirt: #a21caf; } .shirt-6xl { --shirt: #1e3a8a; } .shirt-7xl { --shirt: #c2410c; } .shirt-8xl { --shirt: #374151; } .shirt-9xl { --shirt: #4338ca; }
.healthy-formal .roster-table .col-status .roster-shirt.shirt-size { color: var(--shirt, inherit); display: inline-block; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--shirt, #888) 10%, #fff); border: 1px solid color-mix(in srgb, var(--shirt, #888) 30%, #fff); }
.healthy-formal #shirtTableBody .shirt-size { color: var(--shirt, inherit); font-weight: 800; }

/* หน้าต่างไซส์เสื้อ (28 ต.ค. 2569 · Taste Skill): ชื่อกิจกรรมกับยอดรวมบรรทัดเดียว · กดตัวเลขดูรายชื่อ */
.healthy-formal .shirt-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; margin: -8px 0 12px; color: #66736c; font-size: .94rem; }
.healthy-formal .shirt-meta .shirt-totals { margin: 0; color: #17211c; font-weight: 700; }
.healthy-formal .shirt-meta .shirt-totals::before { content: "·"; margin-right: 10px; color: #a4b0aa; font-weight: 400; }
.healthy-formal .shirt-count { min-width: 40px; min-height: 32px; padding: 2px 8px; border: 0; border-radius: 8px; background: transparent; color: #194e31; font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: underline; text-decoration-color: #9cc3ad; text-underline-offset: 4px; cursor: pointer; }
.healthy-formal .shirt-count:hover { background: #eef6f1; }
.healthy-formal .shirt-count[aria-pressed="true"] { background: #194e31; color: #fff; text-decoration: none; }
.healthy-formal .shirt-count:focus-visible { outline: 3px solid #194e31; outline-offset: 2px; }
.healthy-formal .shirt-people { margin: 14px 0 6px; padding: 12px 14px; border: 1px solid #d5e2dc; border-radius: 14px; background: #f7faf8; }
.healthy-formal .shirt-people[hidden] { display: none; }
.healthy-formal .shirt-people-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.healthy-formal .shirt-people-head h3 { margin: 0; font-size: 1rem; color: #17211c; }
.healthy-formal .shirt-people-head .shirt-size { color: var(--shirt, inherit); font-weight: 800; }
.healthy-formal .shirt-people-close { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent; color: #4b5b53; cursor: pointer; }
.healthy-formal .shirt-people-close:hover { background: #e8f0eb; }
.healthy-formal .shirt-people-list { display: grid; max-height: 280px; margin: 8px 0 0; padding: 0; overflow: auto; list-style: none; }
.healthy-formal .shirt-people-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 7px 2px; border-top: 1px solid #e3ebe6; font-size: .94rem; }
.healthy-formal .shirt-people-list li:first-child { border-top: 0; }
.healthy-formal .shirt-people-bib { color: #66736c; font-variant-numeric: tabular-nums; }
.healthy-formal .shirt-people-name { overflow-wrap: anywhere; color: #17211c; }
.healthy-formal .shirt-people-list .shirt-size { color: var(--shirt, inherit); font-weight: 800; }
.healthy-formal .shirt-people-status { color: #66736c; font-size: .86rem; white-space: nowrap; }