.main[data-view="attendance"] #content>.heading{margin-bottom:20px}.main[data-view="attendance"] #content>.heading h1{font-size:26px;letter-spacing:-.5px}.main[data-view="attendance"] #content>.heading p{font-size:13px;color:#839388}
.attendance-tabs{display:flex;gap:4px;width:fit-content;background:#eaf0ec;padding:4px;border-radius:9px;margin:0 0 20px}.attendance-tabs button{font-size:14px;border:0;min-width:116px;padding:9px 20px;background:transparent;color:#768d7c;font-weight:500}.attendance-tabs button.active{background:#fff;color:#37684b;box-shadow:0 1px 4px #234a3210}
.attendance-today{display:grid;grid-template-columns:minmax(340px,1fr) minmax(340px,1fr);gap:22px;max-width:1120px;margin:auto}.attendance-clock-card,.attendance-record-card{background:#fff;border:1px solid #e0e8e2;border-radius:14px;overflow:hidden}.attendance-clock-card>header{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;gap:16px}.attendance-person{display:flex;gap:11px;align-items:center}.attendance-person>div{display:flex;flex-direction:column;gap:5px}.attendance-person strong{font-size:14px;color:#3b5e47}.attendance-person span:not(.person-avatar){font-size:11px;color:#99a69d}.attendance-person>.person-avatar{width:38px;height:38px}.attendance-live-dot{font-size:11px;color:#91a698;white-space:nowrap}.attendance-live-dot:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#75a087;margin-right:6px}.attendance-clock{font-size:38px;letter-spacing:2px;font-variant-numeric:tabular-nums;line-height:1.2;text-align:center;color:#315c43;font-weight:550;margin:7px 0 22px}.attendance-slot-tabs{display:flex;gap:6px;justify-content:center;padding:0 20px}.attendance-slot-tabs button{border:1px solid #e2e9e4;background:#fff;font-size:12px;color:#819386;padding:8px 12px;border-radius:8px;flex:1;line-height:1.4}.attendance-slot-tabs button small{display:block;margin-top:5px;font-size:10px;color:#9caaa1;font-weight:400;white-space:nowrap}.attendance-slot-tabs button.active{border-color:#bed7c8;background:#f0f7f2;color:#407658;font-weight:600}.attendance-punch-focus{padding:30px 24px 18px;text-align:center}.attendance-main-punch{display:flex;flex-direction:column;justify-content:center;align-items:center;width:164px;height:164px;border-radius:50%;margin:0 auto;border:7px solid #e5f0e9;background:#397a59;color:white;box-shadow:0 0 0 8px #f7faf8,0 8px 22px #3a765522;gap:10px}.attendance-main-punch span{font-size:22px;font-weight:600}.attendance-main-punch small{font-size:11px;opacity:.8}.attendance-main-punch:hover{background:#2e6b4b}.attendance-main-punch.is-out{background:#4a83a2;border-color:#e4eef4;box-shadow:0 0 0 8px #f8fafb,0 8px 22px #466b8d18}.attendance-main-punch:disabled{opacity:1;background:#e7eeea;color:#85988b;border-color:#f2f6f3;box-shadow:0 0 0 8px #fafcfb;cursor:default}.attendance-main-punch:disabled span{font-size:19px}.attendance-punch-focus>p{font-size:12px;color:#91a295;line-height:1.7;min-height:40px;max-width:310px;margin:24px auto 0}.attendance-clock-card>footer{font-size:11px;color:#a0aea5;padding:14px 20px;border-top:1px solid #f0f3f1;text-align:center}
.attendance-record-card>header{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid #edf1ee}.attendance-record-card h2{font-size:15px;color:#506d59;margin:0;font-weight:600}.attendance-record-card>header>span{font-size:11px;color:#9ca99f}.attendance-shift-record{padding:17px 24px;border-bottom:1px solid #edf1ee}.attendance-shift-record h3{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:550;color:#65806d;margin:0 0 12px}.attendance-shift-record h3>span{font-size:11px;color:#a3afa7;font-weight:400}.attendance-timeline-entry{display:grid;grid-template-columns:8px 34px minmax(70px,1fr) auto;align-items:center;gap:10px;padding:8px 0;font-size:12px;color:#94a398}.attendance-timeline-entry>strong{font-size:13px;font-weight:450;color:#728a7a;font-variant-numeric:tabular-nums}.attendance-state-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#cbd5ce;flex:none}.attendance-state-dot.normal{background:#71a685}.attendance-state-dot.late{background:#d5aa5a}.attendance-state-dot.early{background:#ce8779}.attendance-state-dot.overtime{background:#7babc4}.attendance-status{font-size:11px;line-height:1.5;border-radius:5px;padding:3px 7px;font-weight:450;background:#f1f4f2;color:#9aa89e;white-space:nowrap}.attendance-status.normal{background:#ecf5ee;color:#5f8f6c}.attendance-status.late{background:#fff5e6;color:#b58a42}.attendance-status.early{background:#fcefed;color:#ba7b6a}.attendance-status.overtime{background:#edf5fa;color:#719ab5}.attendance-correct-link{display:block;margin:13px auto;border:0;background:transparent;color:#6d947b;font-size:12px;padding:6px 14px}
.attendance-outstanding{max-width:1120px;margin:18px auto 0;background:#fffaf0;border:1px solid #eee0bd;border-radius:10px;padding:17px 22px;font-size:13px;color:#a38a51}.attendance-outstanding>div{display:flex;align-items:center;justify-content:space-between;padding-top:10px}.attendance-outstanding button{font-size:12px;padding:6px 10px}.attendance-rules{max-width:1120px;margin:18px auto;font-size:12px;color:#99a69c}.attendance-rules>summary{cursor:pointer;width:fit-content}.attendance-rules p{line-height:1.8;max-width:800px;color:#8b9d90}
.attendance-statistics{max-width:1200px;margin:auto}#attendanceFilter{display:flex;align-items:end;flex-wrap:wrap;gap:12px;padding:16px 20px;background:#fff;border:1px solid #e1e8e3;border-radius:11px;margin-bottom:18px}#attendanceFilter label{font-size:11px;color:#8b9c90;display:flex;flex-direction:column;gap:6px;margin:0}#attendanceFilter input,#attendanceFilter select{font-size:13px;padding:7px 10px;height:34px;min-height:34px;min-width:140px;width:160px;border-radius:6px}#attendanceFilter button{font-size:12px;padding:7px 13px;min-height:34px;border-radius:6px}#attendanceFilter #attendanceCorrect{margin-left:auto;color:#769781}
.attendance-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.attendance-metrics>div{background:#fff;border:1px solid #e2e9e4;border-radius:11px;padding:20px 23px}.attendance-metrics span{font-size:12px;color:#8a9e90}.attendance-metrics strong{display:block;margin-top:12px;font-size:30px;font-weight:600;color:#3e6b4b;font-variant-numeric:tabular-nums}.attendance-metrics small{font-size:11px;margin-left:7px;color:#a1b1a6;font-weight:400}
.attendance-month-layout{display:grid;grid-template-columns:minmax(300px,1.05fr) minmax(300px,1fr);gap:20px}.attendance-calendar,.attendance-day-records{background:white;border:1px solid #e0e8e2;border-radius:12px;overflow:hidden}.attendance-month-layout header{padding:19px 22px;border-bottom:1px solid #edf1ee;display:flex;justify-content:space-between;align-items:center;gap:12px}.attendance-month-layout h2{font-size:14px;color:#5c7c64;font-weight:550;margin:0}.attendance-month-layout header>span{font-size:10px;color:#a1b0a5}.attendance-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;padding:18px}.attendance-calendar-grid>span{text-align:center;color:#a6b2aa;font-size:11px;padding:6px 0 10px}.attendance-calendar-grid>button{min-height:52px;border:1px solid transparent;border-radius:7px;display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:center;padding:5px;color:#7d9485;font-size:12px;background:white}.attendance-calendar-grid>button strong{font-weight:450}.attendance-calendar-grid>button.today strong{color:#3e7e58;font-weight:650}.attendance-calendar-grid>button.selected{background:#edf6ef;border-color:#d9e9de}.attendance-calendar>p{font-size:10px;color:#a5b1a8;text-align:center;margin:0;padding:0 15px 18px}.attendance-day-records article{padding:16px 22px;border-bottom:1px solid #eef2ef}.attendance-day-records article>div{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}.attendance-day-records article strong{font-size:12px;color:#6d8774;font-weight:550}.attendance-day-records article span{font-size:11px;color:#a2b0a7}.attendance-day-records article b{font-size:15px;color:#4d7359;font-weight:500}.attendance-day-records article p{font-size:11px;color:#95a59b}.attendance-day-records article>button{font-size:10px;border:0;background:transparent;color:#7da18a;padding:0}.attendance-no-records{padding:60px 20px;text-align:center;font-size:13px;color:#acb8af}.attendance-history{font-size:13px;padding:12px 0;border-bottom:1px solid #e9efeb}.attendance-history p{font-size:12px;color:#8fa197}
@media(max-width:1000px){.attendance-today,.attendance-month-layout{grid-template-columns:1fr}.attendance-today{max-width:650px}.attendance-record-card{margin-top:0}.attendance-clock-card>header{padding:20px}.attendance-metrics>div{padding:18px}.attendance-punch-focus{padding-top:24px}}
@media(max-width:600px){.attendance-metrics{grid-template-columns:repeat(2,1fr);gap:10px}.attendance-clock{font-size:32px}.attendance-slot-tabs{padding:0 12px;gap:4px}.attendance-slot-tabs button{padding:7px 5px}.attendance-slot-tabs button small{font-size:9px}.attendance-shift-record{padding:16px 18px}#attendanceFilter{padding:14px;gap:10px}#attendanceFilter input,#attendanceFilter select{width:140px}.attendance-month-layout{gap:14px}.attendance-live-dot{display:none}.attendance-today{display:block}.attendance-record-card{margin-top:16px}}

.attendance-metrics{grid-template-columns:repeat(5,1fr)}@media(max-width:1000px){.attendance-metrics{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.attendance-metrics{grid-template-columns:repeat(2,1fr)}}