.attendance-dialog{width:min(1150px,calc(100% - 28px));max-height:calc(100dvh - 28px);margin:auto;padding:0;border:1px solid #365064;border-radius:16px;background:#122236;color:#e8eef6;font:14px 'IBM Plex Sans Thai',sans-serif;overflow:auto}.attendance-dialog::backdrop{background:#04101bd9}.attendance-head{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;padding:22px;border-bottom:1px solid #365064}.attendance-head h2{font-size:22px;margin-bottom:6px}.attendance-head p,.attendance-foot p{color:#a9bdc8;font-size:13px}.attendance-tools{display:flex;flex-wrap:wrap;align-items:end;gap:12px;padding:14px 22px}.attendance-tools label{margin:0;min-width:180px}.attendance-tools input{display:block;color-scheme:dark}.attendance-info{margin:0 22px 12px;padding:12px;background:#102f2d;border:1px solid #316956;border-radius:8px;line-height:1.6;color:#bcecdf}.attendance-info.error{background:#3b2028;color:#ffc4d0;border-color:#804359}.attendance-info[hidden]{display:none}.attendance-table-wrap{padding:0 22px;overflow-x:auto}.attendance-table{width:100%;border-collapse:collapse;min-width:750px}.attendance-table th{text-align:left;color:#a9bdc8;font-size:12px;padding:12px 8px;background:#0d1b2a}.attendance-table td{padding:10px 8px;border-bottom:1px solid #24405e}.attendance-table td:first-child{min-width:210px}.attendance-table small{display:block;color:#a9bdc8;font-size:11px}.attendance-table select{min-width:130px}.attendance-table input{min-width:200px}.attendance-foot{padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;position:sticky;bottom:0;background:#122236;border-top:1px solid #365064}.header-main-menu{flex-wrap:wrap;flex:0 1 auto;min-width:0}.header-main-menu>button{font-size:12px;padding:8px 12px}.auth-user{flex-wrap:wrap;min-width:0}.auth-user span{overflow-wrap:anywhere}body>header{flex-shrink:0}.wrap{position:relative}.wrap>.focusbar{top:12px;right:12px}@media(max-width:640px){.attendance-foot{position:static;flex-direction:column;align-items:stretch}.attendance-head{padding:16px}.attendance-head h2{font-size:19px}.auth-user{position:static;max-width:100%}.header-main-menu .tabs{flex-basis:100%}.header-main-menu{order:3}.attendance-tools{padding:12px 16px}.attendance-info{margin:0 16px 12px}.attendance-dialog{width:calc(100% - 12px);max-height:calc(100dvh - 12px)}}
.attendance-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}.attendance-actions button{white-space:nowrap}.attendance-foot>p{flex:1;min-width:0}@media(max-width:640px){.attendance-actions{flex-direction:column}.attendance-actions button{width:100%}}