#attendanceRosterOpen{text-align:left;font:inherit;color:inherit;cursor:pointer}
#attendanceRosterOpen:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
#attendanceRosterDialog{box-sizing:border-box;width:min(850px,calc(100vw - 24px));max-height:88dvh;border:1px solid #cbd5e1;border-radius:16px;padding:20px;color:#172033;background:#fff;overflow:auto}
#attendanceRosterDialog::backdrop{background:rgb(15 23 42 / 55%)}
#attendanceRosterDialog header{display:flex;gap:12px;align-items:center;justify-content:space-between}
#attendanceRosterDialog h2{margin:0;font-size:1.25rem}
#attendanceRosterClose{min-width:44px;min-height:44px;font-size:1.5rem}
#attendanceRosterDialog p{white-space:normal;overflow-wrap:anywhere}
.roster-section ul{padding:0;list-style:none}
.roster-section li{display:flex;gap:16px;justify-content:space-between;padding:12px 0;border-bottom:1px solid #e2e8f0;white-space:normal;overflow-wrap:anywhere}
.roster-section li div{min-width:0}
.roster-section li span{display:block;color:#64748b;font-size:.85rem;margin-top:4px}
.roster-section li small{flex-shrink:0}
@media(max-width:600px){#attendanceRosterDialog{padding:14px}.roster-section li{flex-direction:column;gap:6px}.roster-section li small{flex-shrink:1}}