*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#f5f7fb;color:#172033}.wrap{max-width:1450px;margin:auto;padding:24px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}h1{margin:0;font-size:24px}h2{margin:0 0 8px}.subtitle,.muted,.meta-line{color:#67738b}.subtitle{margin-top:5px;font-size:13px}.card{background:#fff;border-radius:14px;padding:20px;margin-top:18px;box-shadow:0 4px 18px #00000012}.login-card{max-width:520px;margin:70px auto 0}.login-card form{display:grid;gap:14px;margin-top:18px}label{font-size:13px;font-weight:700;color:#475569}input,select{padding:10px;border:1px solid #d9dfeb;border-radius:8px;background:#fff;font:inherit}.login-card input{width:100%;margin-top:6px}button{border:0;border-radius:9px;padding:10px 14px;font-weight:700;cursor:pointer;background:#1f5eff;color:#fff}button.secondary{background:#e9eef8;color:#172033}button.danger{background:#c92a2a}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.user-chip{padding:8px 10px;border-radius:999px;background:#eef2f8;font-size:12px}.hidden{display:none!important}.notice{margin-top:18px;padding:13px 15px;border-radius:10px;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}.warning-card{background:#fff7ed;border:1px solid #fed7aa}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.tab{background:#e9eef8;color:#172033}.tab.active{background:#1f5eff;color:#fff}.page{display:none}.page.active{display:block}.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:16px}.metric{border:1px solid #e5e9f2;border-radius:10px;padding:12px;background:#f8fafc}.metric .label{font-size:11px;text-transform:uppercase;color:#67738b}.metric .value{font-size:21px;font-weight:800;margin-top:4px}.metric .ok{color:#087f5b}.metric .warn{color:#c92a2a}.tablewrap{overflow:auto;margin-top:14px;max-height:68vh}table{width:100%;border-collapse:collapse;min-width:1250px}th,td{text-align:left;padding:8px 9px;border-bottom:1px solid #e8ecf3;font-size:12px;white-space:nowrap}th{background:#f8f9fc;position:sticky;top:0;z-index:2}.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}.message{margin-top:12px;color:#c92a2a;white-space:pre-wrap}.meta-line{margin-top:12px;font-size:13px}pre{white-space:pre-wrap;background:#101827;color:#dbe7ff;padding:14px;border-radius:10px;min-height:60px}.loading{position:fixed;inset:0;background:#fff8f8cc;z-index:100;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}.loading-card{background:#b91c1c;color:#fff;border-radius:14px;padding:18px 24px;font-weight:800;box-shadow:0 16px 45px #7f1d1d44;display:flex;align-items:center;gap:12px}.spinner{width:16px;height:16px;border:3px solid #fecaca;border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}code{background:#eef2f8;border-radius:5px;padding:2px 5px}.status-ok{background:#ecfdf3}.status-warn{background:#fff9db}.status-bad{background:#ffe4e6}.status-neutral{background:#f8fafc}.corrected{outline:2px solid #16a34a;outline-offset:-2px}.reason-chip{display:inline-block;padding:3px 7px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:11px}.checkpoint-grid{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.checkpoint{background:#eef2f8;color:#172033;text-align:left}.checkpoint small{font-weight:400;color:#64748b}.yes{font-weight:800;color:#087f5b}.no{color:#94a3b8}@media(max-width:700px){.wrap{padding:14px}.login-card{margin-top:35px}.topbar{align-items:flex-start}.tablewrap{max-height:none}}

.payroll-card{border:1px solid #dfe5ef;border-radius:14px;padding:18px;margin-top:16px;background:#fff}.payroll-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.payroll-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:9px;margin-top:14px}.payroll-template{margin-top:16px;border:1px solid #dfe5ef;border-radius:12px;overflow:hidden;background:#fff}
.payroll-template-note{padding:10px 12px;background:#fff7ed;color:#9a3412;font-size:12px;font-weight:700}.payroll-template-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.payroll-template-section{padding:14px;min-width:0;border-top:1px solid #e5e9f2}.payroll-template-section:nth-child(odd){border-right:1px solid #e5e9f2}.payroll-template-section h4{margin:0 0 10px;font-size:13px}
.payroll-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:7px 0;border-bottom:1px solid #eef2f7;font-size:13px}.payroll-line:last-child{border-bottom:0}.payroll-line strong{white-space:nowrap}.payroll-line.total{font-weight:800;border-top:1px solid #cbd5e1;margin-top:4px}
.payroll-net{display:flex;justify-content:space-between;gap:16px;align-items:center;background:#f8fafc;border-top:1px solid #dfe5ef;padding:16px;font-size:17px;font-weight:800}.payroll-exceptions{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:14px}
.payroll-detail{border:1px solid #e5e9f2;border-radius:10px;padding:12px}.payroll-detail h4{margin:0 0 8px}.payroll-detail ul{margin:0;padding-left:20px}.payroll-detail li{margin:5px 0}.missing-warning{color:#b91c1c;font-weight:700}
.final-badge,.preview-badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:800}.final-badge{background:#ecfdf5;color:#166534}.preview-badge{background:#fff7ed;color:#9a3412}
@media(max-width:760px){.payroll-template-grid{grid-template-columns:1fr}.payroll-template-section:nth-child(odd){border-right:0}}

.date-link{background:none!important;border:0!important;color:#1d4ed8!important;padding:0!important;text-decoration:underline;cursor:pointer;font:inherit}
.modal{display:none;position:fixed;inset:0;background:#0f172a88;align-items:center;justify-content:center;padding:20px;z-index:200}
.modal.open{display:flex}.modalbox{background:#fff;border-radius:16px;padding:22px;width:min(760px,100%);max-height:calc(100vh - 40px);overflow-y:auto;box-shadow:0 20px 60px #0003}.modalbox.wide{width:min(1000px,100%)}
.panel{border:1px solid #e5e9f2;border-radius:12px;padding:14px}.attendance-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:10px;margin-top:12px}
.attendance-detail-item{border:1px solid #e5e9f2;border-radius:9px;padding:10px}.attendance-detail-item b{display:block;font-size:11px;color:#67738b;text-transform:uppercase;margin-bottom:4px}
.leave-strip{border:1px solid #dbeafe;background:#eff6ff;border-radius:10px;padding:10px;margin-top:12px;font-size:13px}.leave-strip strong{margin-right:14px}.leave-strip span{display:inline-block;margin-right:10px}
.payroll-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.payroll-actions button{font-size:12px;padding:7px 10px}
.print-section{page-break-after:always}.print-section:last-child{page-break-after:auto}
@media(max-width:640px){.attendance-detail-grid{grid-template-columns:1fr}}