:root{--att-bg:#f7f9f8;--att-card:#fff;--att-border:#e3ebe7;--att-text:#173c31;--att-muted:#64766f;--att-green:#07865f;--att-soft:#eaf8f2;--att-red:#dc2626;--att-orange:#d97706;--att-blue:#2563eb;--att-yellow:#ca8a04;--att-shadow:0 8px 26px rgba(15,74,57,.07)}
.attendance-workspace{color:var(--att-text)}.att-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.att-page-head h2{font-size:24px;color:var(--att-text);margin:0}.att-page-head p{font-size:12px;color:var(--att-muted);margin-top:5px}.att-live-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid #bce5d5;border-radius:999px;background:#f0fbf7;color:var(--att-green);font-size:11px;font-weight:800}.att-live-pill:before{content:"";width:8px;height:8px;border-radius:50%;background:#10b981}
.att-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.att-summary-card{min-height:102px;padding:15px;border:1px solid var(--att-border);border-radius:14px;background:var(--att-card);box-shadow:var(--att-shadow);display:flex;align-items:center;gap:12px}.att-summary-icon{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:var(--att-soft);color:var(--att-green);font-size:17px}.att-summary-card.danger .att-summary-icon{background:#fef2f2;color:var(--att-red)}.att-summary-card.salary .att-summary-icon{background:#fff7ed;color:var(--att-orange)}.att-summary-label{display:block;color:var(--att-muted);font-size:10px;font-weight:700}.att-summary-value{display:block;margin-top:3px;color:var(--att-text);font-size:22px;line-height:1;font-weight:800}.att-summary-hint{display:block;margin-top:5px;color:#87958f;font-size:9px}
.att-panel{margin-bottom:14px;border:1px solid var(--att-border);border-radius:15px;background:var(--att-card);box-shadow:var(--att-shadow)}.att-filter-bar{display:grid;grid-template-columns:repeat(6,minmax(125px,1fr));gap:10px;padding:14px}.att-field label{display:block;margin:0 0 5px;color:var(--att-muted);font-size:10px;font-weight:800}.att-input{width:100%;height:39px;padding:0 10px;border:1px solid #d9e5e0;border-radius:9px;background:#fff;color:#29463d;font-size:12px}.att-input:focus{border-color:#62b99a;box-shadow:0 0 0 3px rgba(5,150,105,.1)}.att-filter-actions{display:flex;align-items:flex-end;gap:7px}.att-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:39px;padding:0 13px;border:1px solid transparent;border-radius:9px;cursor:pointer;font-size:11px;font-weight:800;white-space:nowrap}.att-btn:disabled{opacity:.55;cursor:not-allowed}.att-btn-primary{background:var(--att-green);color:#fff}.att-btn-soft{border-color:#cfe4dc;background:#f6fbf9;color:#2e5c4c}.att-btn-danger{border-color:#fecaca;background:#fff5f5;color:#b91c1c}.att-btn-warning{border-color:#fed7aa;background:#fff9f1;color:#b45309}
.att-tabs{display:flex;gap:5px;padding:6px;border-bottom:1px solid var(--att-border)}.att-tab{padding:9px 13px;border:0;border-radius:8px;background:transparent;color:var(--att-muted);font-size:11px;font-weight:800;cursor:pointer}.att-tab.active{background:var(--att-soft);color:var(--att-green)}.att-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--att-border)}.att-toolbar-group{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.att-table-wrap{overflow:auto;max-height:58vh}.att-table{width:100%;min-width:1120px;border-collapse:separate;border-spacing:0}.att-table th{position:sticky;top:0;z-index:2;padding:11px 10px;border-bottom:1px solid var(--att-border);background:#f3f8f6;color:#356153;font-size:10px;text-align:left;white-space:nowrap}.att-table td{padding:10px;border-bottom:1px solid #edf2ef;color:#365248;font-size:11px;vertical-align:middle}.att-table tbody tr:hover{background:#fbfdfc}.att-person{display:flex;align-items:center;gap:9px;min-width:160px}.att-photo{width:38px;height:38px;flex:0 0 38px;border:2px solid #dceae5;border-radius:10px;object-fit:cover;background:#edf4f1}.att-person strong{display:block;color:#173c31;font-size:11px}.att-person small{display:block;margin-top:2px;color:#7c8d86;font-size:9px}.att-status-buttons{display:flex;gap:4px;flex-wrap:wrap;min-width:265px}.att-status-btn{padding:5px 7px;border:1px solid #dae6e1;border-radius:7px;background:#fff;color:#65766f;font-size:9px;font-weight:800;cursor:pointer}.att-status-btn.active[data-status=present]{border-color:#78c9a9;background:#eaf8f2;color:#067451}.att-status-btn.active[data-status=absent]{border-color:#fca5a5;background:#fef2f2;color:#b91c1c}.att-status-btn.active[data-status=late]{border-color:#fdba74;background:#fff7ed;color:#c45f08}.att-status-btn.active[data-status=leave],.att-status-btn.active[data-status=paid_leave],.att-status-btn.active[data-status=unpaid_leave]{border-color:#93c5fd;background:#eff6ff;color:#1d4ed8}.att-status-btn.active[data-status=half_day]{border-color:#fde047;background:#fefce8;color:#a16207}.att-remark{width:150px;height:33px;padding:0 8px;border:1px solid #dce6e2;border-radius:7px;font-size:10px}.att-badge{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:800;text-transform:capitalize}.att-badge.present{background:#e8f8f1;color:#087451}.att-badge.absent{background:#fef2f2;color:#b91c1c}.att-badge.late{background:#fff7ed;color:#c45f08}.att-badge.leave,.att-badge.paid_leave,.att-badge.unpaid_leave{background:#eff6ff;color:#1d4ed8}.att-badge.half_day{background:#fefce8;color:#a16207}.att-empty{padding:55px 20px;text-align:center;color:var(--att-muted)}.att-empty i{display:block;margin-bottom:10px;color:#9dcbbb;font-size:30px}.att-loading{padding:45px;text-align:center;color:var(--att-green);font-size:12px}.att-proof{display:flex;gap:5px}.att-proof a{color:var(--att-green);font-weight:700;text-decoration:none}
.att-history-filters{display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));gap:8px;padding:14px;border-bottom:1px solid var(--att-border)}.att-history-summary{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:12px 14px}.att-history-stat{padding:10px;border:1px solid var(--att-border);border-radius:10px;background:#fbfdfc;text-align:center}.att-history-stat span{display:block;color:var(--att-muted);font-size:9px}.att-history-stat strong{display:block;margin-top:4px;font-size:16px}
.att-self-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:15px}.att-profile-card,.att-check-card,.att-month-card{padding:17px;border:1px solid var(--att-border);border-radius:15px;background:#fff;box-shadow:var(--att-shadow)}.att-profile-main{text-align:center}.att-profile-main img{width:86px;height:86px;border-radius:50%;object-fit:cover;border:4px solid #d8eee6}.att-profile-main h2{margin-top:10px;font-size:19px;color:var(--att-text)}.att-profile-main p{margin-top:4px;color:var(--att-muted);font-size:11px}.att-today-status{margin-top:15px;padding:12px;border-radius:10px;background:var(--att-soft)}.att-clock{font-size:18px;font-weight:800;color:var(--att-text)}.att-camera{width:100%;max-height:360px;aspect-ratio:4/3;border-radius:12px;background:#132a23;object-fit:cover}.att-capture-preview{display:none;width:72px;height:72px;border-radius:10px;object-fit:cover;border:2px solid #9dd3bf}.att-location{margin:9px 0;padding:9px;border-radius:8px;background:#f5f8f7;color:var(--att-muted);font-size:10px}.att-progress{height:8px;border-radius:999px;background:#e8efec;overflow:hidden}.att-progress span{display:block;height:100%;background:var(--att-green)}
.att-calendar-modal{position:fixed;inset:0;z-index:2500;display:grid;place-items:center;padding:15px;background:rgba(3,24,18,.58)}.att-calendar-box{width:min(760px,96vw);max-height:90vh;overflow:auto;padding:18px;border-radius:16px;background:#fff}.att-calendar-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.att-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.att-calendar-day{min-height:70px;padding:7px;border:1px solid var(--att-border);border-radius:9px;background:#fbfdfc;text-align:left;cursor:pointer}.att-calendar-day.blank{visibility:hidden}.att-calendar-day strong{font-size:11px}.att-calendar-day span{display:block;margin-top:8px;font-size:8px;font-weight:800;text-transform:capitalize}.att-calendar-day.present{background:#eaf8f2}.att-calendar-day.absent{background:#fef2f2}.att-calendar-day.late{background:#fff7ed}.att-calendar-day.leave,.att-calendar-day.paid_leave,.att-calendar-day.unpaid_leave{background:#eff6ff}.att-calendar-day.half_day{background:#fefce8}.att-calendar-legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:13px;color:var(--att-muted);font-size:9px}
@media(max-width:1100px){.att-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.att-filter-bar{grid-template-columns:repeat(3,minmax(0,1fr))}.att-history-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.att-history-summary{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:768px){.att-page-head{flex-direction:column}.att-summary{grid-template-columns:1fr 1fr;gap:8px}.att-summary-card{min-height:88px;padding:11px}.att-summary-icon{width:34px;height:34px;flex-basis:34px}.att-summary-value{font-size:18px}.att-filter-bar,.att-history-filters{grid-template-columns:1fr 1fr}.att-filter-actions{grid-column:1/-1}.att-toolbar{align-items:flex-start}.att-table-wrap{overflow:visible;max-height:none}.att-table{display:block;min-width:0}.att-table thead{display:none}.att-table tbody{display:grid;gap:10px;padding:10px}.att-table tr{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;border:1px solid var(--att-border);border-radius:12px;background:#fff;box-shadow:0 4px 15px rgba(15,74,57,.05)}.att-table td{display:block;padding:0;border:0}.att-table td:before{content:attr(data-label);display:block;margin-bottom:3px;color:#82918b;font-size:8px;font-weight:800;text-transform:uppercase}.att-table td.att-wide{grid-column:1/-1}.att-status-buttons{min-width:0}.att-remark{width:100%}.att-self-grid{grid-template-columns:1fr}.att-history-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.att-calendar-day{min-height:54px;padding:5px}.att-calendar-day span{font-size:7px}}
@media(max-width:460px){.att-summary{grid-template-columns:1fr}.att-filter-bar,.att-history-filters{grid-template-columns:1fr}.att-calendar-grid{gap:3px}.att-calendar-day{min-height:46px}.att-calendar-day span{display:none}}