.attendance-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:20px;background:#fff;border:1px solid #e1e7dc;border-radius:18px;margin-bottom:24px;align-items:end}.attendance-filters label,.attendance-history-filter label{display:grid;gap:7px;font-size:13px;color:#526052}.attendance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:22px 0}.attendance-card{min-width:0;border:1px solid #dde6d9;border-radius:18px;background:#fff;padding:22px;box-shadow:0 4px 14px #162e1d05}.attendance-card.is-inside{border-top:4px solid #277456}.attendance-card.is-outside{border-top:4px solid #d9dfd3}.attendance-card h2{font-size:18px;line-height:1.35;margin:14px 0 4px;overflow-wrap:anywhere}.attendance-card p{margin:8px 0;overflow-wrap:anywhere}.student-photo{object-fit:cover;border-radius:50%;flex:none}.attendance-plan{font-weight:600}.attendance-seat{display:flex;align-items:center;gap:10px;margin:18px 0;padding:12px;background:#f3f6ef;border-radius:10px}.attendance-seat svg{width:20px;flex:none}.attendance-duration{border-top:1px solid #e6ebe0;padding-top:12px;font-size:13px}.attendance-card form{margin-top:12px}.attendance-card form .btn{width:100%}.attendance-card .link-btn{font-size:12px;margin-top:14px}.btn.attendance-out{background:#a73535;color:white;border-color:#a73535}.btn.attendance-out:hover{background:#8b2424}.attendance-pager{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:22px 0}.attendance-pager span{margin-right:auto;color:#667263;font-size:13px}.attendance-status{font-size:13px;color:#5d6d5c;margin:14px 0}.attendance-status.is-error,.attendance-scanner [role=status]{color:#9a3535}.attendance-history-panel{padding:24px;margin:24px 0}.attendance-history-filter{display:flex;gap:16px;align-items:end;flex-wrap:wrap;margin:12px 0 24px}.attendance-history-panel td small{display:block;margin-top:5px;color:#6c7765;font-size:11px}.attendance-scanner{padding:28px;max-width:650px;margin:22px 0}.attendance-scanner h2{font-size:22px}.attendance-scanner video{width:100%;max-height:360px;border-radius:14px;background:#17261d;margin:16px 0}.attendance-scanner video[hidden]{display:none}.attendance-scanner .actions{margin:16px 0}.attendance-image-input{display:grid;gap:8px;margin:18px 0;font-size:13px}.attendance-qr-text{display:grid;gap:8px;margin:16px 0;font-size:13px}.attendance-qr-text textarea{width:100%;min-height:80px;border:1px solid #d6dfd0;border-radius:10px;padding:12px;resize:vertical;font:12px monospace;overflow-wrap:anywhere}.branch-qr-print{max-width:520px;text-align:center;padding:32px;margin:24px 0}.branch-qr-print img{max-width:100%;height:auto;image-rendering:pixelated}.branch-qr-print h2{font-size:26px}.student-photo-upload{display:grid;gap:14px;margin:15px 0}.student-photo-upload label{display:grid;gap:8px}.student-photo-upload .check{display:flex}.attendance-card button:disabled{opacity:.6;cursor:wait}.attendance-card .feedback:empty{display:none}
@media(max-width:1100px){.attendance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.attendance-grid,.attendance-filters{grid-template-columns:1fr}.attendance-card,.attendance-scanner,.attendance-history-panel{padding:18px}.attendance-history-filter{align-items:stretch;flex-direction:column}.attendance-pager{gap:8px}.attendance-filters{padding:16px}.branch-qr-print{padding:18px}.attendance-card .btn{min-height:44px}}
@media print{body:has(.branch-qr-print) *{visibility:hidden}body:has(.branch-qr-print) .branch-qr-print,body:has(.branch-qr-print) .branch-qr-print *{visibility:visible}.branch-qr-print{position:absolute;inset:0 auto auto 0;width:100%;max-width:none;border:0;box-shadow:none}.branch-qr-print img{width:360px}}

#attendance-root .attendance-search{display:block}
.attendance-quick,.attendance-advanced>div{display:grid;gap:12px;align-items:end}
.attendance-quick{grid-template-columns:minmax(0,1fr) auto}
.attendance-advanced>div{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}
.attendance-advanced{border-top:1px solid #dbe3d7;margin-top:12px}
#attendance-root summary{cursor:pointer;min-height:44px;padding:12px 0;font-weight:600}
#attendance-root summary:focus-visible{outline:2px solid #277456;outline-offset:2px}
.attendance-member{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.attendance-member h2{margin:0}.attendance-member .pill{white-space:nowrap}
.attendance-more{border-top:1px solid #dce4d9;margin-top:14px;color:#405442}
.attendance-more p,.attendance-more .link-btn{margin:5px 0}
.attendance-records{width:100%;border-collapse:collapse}
.attendance-records th,.attendance-records td{padding:12px;text-align:left;border-bottom:1px solid #dce4d9;overflow-wrap:anywhere}
@media(max-width:650px){
  #attendance-root,#attendance-root .panel,#attendance-root label,#attendance-root .actions>*{min-width:0;max-width:100%;box-sizing:border-box}
  #attendance-root input:not([type=hidden]),#attendance-root select,#attendance-root textarea{min-width:0;max-width:100%;font-size:16px;box-sizing:border-box}
  #attendance-root .btn,#attendance-root .link-btn,#attendance-root input:not([type=hidden]),#attendance-root select{min-height:44px}
  #attendance-root .stats-grid.attendance-totals{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .attendance-totals .stat{min-width:0;padding:10px 6px;overflow-wrap:anywhere}
  .attendance-totals .stat-icon,.attendance-totals .stat-footer{display:none}
  #attendance-root .attendance-grid{grid-template-columns:minmax(0,1fr);gap:10px;margin:12px 0}
  .attendance-member .avatar{width:36px;height:36px}
  .attendance-member h2{font-size:16px}.attendance-seat{margin:8px 0}.attendance-more{margin:12px 0 0}
  .attendance-advanced>div{grid-template-columns:minmax(0,1fr)}.attendance-quick{gap:8px}
  #attendance-root .attendance-records,#attendance-root .attendance-records tbody{display:block;width:100%;min-width:0}
  .attendance-records thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .attendance-records tr{display:block;border:1px solid #d9e3d6;border-radius:10px;margin:10px 0;padding:8px 10px}
  #attendance-root .attendance-records td{display:grid;grid-template-columns:minmax(75px,34%) minmax(0,1fr);gap:8px;padding:6px 0;white-space:normal;text-align:left;border:0}
  .attendance-records td::before{content:attr(data-label);color:#4d604c;font-weight:600}
  .attendance-scanner .actions,.attendance-scanner .actions .btn,.attendance-scanner [type=submit]{width:100%}
}