/* ---------- Điểm danh giáo viên ---------- */
.staff-tabs { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .25rem 0 .75rem; }
.staff-tabs a[aria-current=page] { font-weight: 700; text-decoration: underline; }
.sa-self { background: #fff; border-radius: .9rem; padding: 1rem; margin: .5rem 0 1rem; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.sa-self-status { margin-bottom: .6rem; }
.sa-self-btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.sa-self-btns form { margin: 0; flex: 1 1 12rem; }
.sa-self-btns button, .sa-self-btns [role=button] { width: 100%; margin: 0; font-size: 1.25rem; min-height: 64px; }
.sa-self-btns [role=button] { flex: 1 1 12rem; display: flex; align-items: center; justify-content: center; }
.sa-in { background: #2b8a3e; border-color: #2b8a3e; } .sa-out { background: #1864ab; border-color: #1864ab; }
.sa-self-btns button { font-size: 1.4rem; min-height: 72px; font-weight: 700; }
.sa-self-state { margin-bottom: .6rem; }
.sa-done { font-size: 1.35rem; color: #2b8a3e; } .sa-done b { font-size: 1.6rem; }
.sa-done-out { color: #1864ab; }
.sa-redo { margin: .6rem 0 0; } .sa-redo button { width: auto; margin: 0; padding: .3rem .7rem; font-size: .85rem; }
.sa-self-note { margin: .5rem 0 0; }
.sa-selfnote { background: #e7f5ff; border-left: 4px solid #339af0; padding: .45rem .7rem; border-radius: .4rem; font-size: .9rem; margin: .5rem 0; }
.sa-mode label { margin: .35rem 0; }
.sa-strict-only { opacity: .65; }
.sa-big-time { font-size: 3.5rem; font-weight: 800; margin: .25rem 0; color: var(--pico-primary); }
.sa-confirm { text-align: center; }
.sa-table td { vertical-align: top; }
.sa-time { font-size: 1.05rem; }
.sa-dev { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-actions summary { margin: 0; font-size: .8rem; padding: .25rem .5rem; white-space: nowrap; }
.sa-pop { display: grid; gap: .5rem; padding: .5rem 0; min-width: 18rem; }
.sa-inline { display: flex; flex-wrap: wrap; gap: .35rem; align-items: end; margin: 0; }
.sa-inline label { margin: 0; font-size: .8rem; }
.sa-inline input, .sa-inline select, .sa-inline button { margin: 0; width: auto; padding: .3rem .5rem; font-size: .85rem; height: auto; }
.sa-fix { border-top: 1px dashed #ccc; padding-top: .4rem; }
.sa-week th, .sa-week td { text-align: center; font-size: .85rem; padding: .35rem; }
.sa-week td:first-child, .sa-week th:first-child { text-align: left; }
.sa-week .off { background: #f1f3f5; } .sa-week th.today { background: #e7f5ff; }
.sa-cell.st-di_muon, .sa-cell.st-ve_som { background: #fff9db; } .sa-cell.st-vang { background: #fff5f5; }
.sa-days { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.sa-pair-code { font-size: 2.2rem; font-weight: 800; letter-spacing: .25em; font-family: monospace; margin: .25rem 0; }
.sa-kiosk-btns { display: flex; gap: .3rem; flex-wrap: wrap; } .sa-kiosk-btns form { margin: 0; }
.sa-kiosk-btns button { margin: 0; width: auto; }
.sa-qr-page { text-align: center; }
.sa-qr-box { background: #fff; padding: 1rem; border-radius: 1rem; display: inline-block; box-shadow: 0 2px 10px rgba(0,0,0,.1); }
.sa-qr-box svg { width: min(72vw, 300px); height: auto; display: block; }
.sa-qr-meta { margin: .6rem 0 .2rem; font-size: 1.1rem; }
/* kiosk cổng */
.sg-wedge input { font-size: 1.1rem; }
.sg-who { display: flex; gap: 1rem; align-items: center; justify-content: center; }
.sg-initials { width: 5.5rem; height: 5.5rem; border-radius: 50%; background: #fff; color: #222; display: flex; align-items: center; justify-content: center; font-size: 2.3rem; font-weight: 800; flex: none; }
.sg-name { font-size: 2rem; font-weight: 800; line-height: 1.15; }
.sg-kind { font-size: 2.6rem; font-weight: 900; letter-spacing: .03em; }
.sg-status { margin-top: .5rem; font-size: 1.2rem; font-weight: 600; }
.sg-cam-off video { visibility: hidden; }
.sg-unpair { margin-top: 1rem; text-align: right; } .sg-unpair button { width: auto; }

.staff-gate .kiosk-history li { list-style: none; }
.sa-datebar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: 1rem; }
.sa-datebar input[type="date"] { width: auto; margin: 0; }
.sa-datebar [role="button"] { margin: 0; }
.staff-tabs { justify-content: flex-start; gap: .5rem; flex-wrap: wrap; }
/* điện thoại: tên GV không bị bẻ 3 dòng, cột tên dính trái khi cuộn bảng tuần, bảng kiosk xếp dọc */
#sa-day td:first-child, #sa-org td:first-child { min-width: 8.5rem; }
.sa-week td:first-child, .sa-week th:first-child { position: sticky; left: 0; background: #fff; z-index: 1; min-width: 7.5rem; box-shadow: 1px 0 0 #e9ecef; }
.sa-week td { min-width: 4.2rem; }
@media (max-width: 640px) {
  .sa-table th, .sa-table td, #sa-org th, #sa-org td { padding: .4rem .35rem; font-size: .85rem; }
  .sa-dev { max-width: 9rem; }
  .sa-pop { min-width: 0; }
  .sa-pair-code { font-size: 1.7rem; letter-spacing: .12em; }
  #sa-kiosks thead { display: none; }
  #sa-kiosks, #sa-kiosks tbody, #sa-kiosks tr, #sa-kiosks td { display: block; width: 100%; }
  #sa-kiosks tr { border-bottom: 1px solid #dee2e6; padding: .5rem 0; }
  #sa-kiosks td { border: 0; padding: .2rem 0; }
  #sa-kiosks .badge { white-space: normal; }
}