.loginShell{background:#fff;grid-template-columns:1.05fr .95fr;min-height:100vh;margin:0;display:grid}.loginBrandPanel{color:#fff;background:radial-gradient(circle at 85% 15%,#18b8aa55,#0000 28%),linear-gradient(145deg,#021c30,#064b5a);flex-direction:column;justify-content:center;padding:clamp(45px,8vw,120px);display:flex}.loginLogo{background:linear-gradient(135deg,#13b9ad,#078099);border-radius:14px;place-items:center;width:58px;height:58px;font:700 32px Georgia;display:grid;box-shadow:0 14px 35px #00111d66}.loginBrandPanel>p:first-of-type{letter-spacing:2px;color:#87dcd5;margin-top:25px;font-size:11px;font-weight:800}.loginBrandPanel h1{max-width:630px;margin:12px 0 20px;font-size:clamp(38px,5vw,68px);line-height:1.05}.loginLead{color:#c7dce3;max-width:570px;font-size:16px;line-height:1.65}.loginBenefits{grid-template-columns:1fr 1fr;gap:13px;max-width:600px;margin-top:35px;display:grid}.loginBenefits span{color:#d8e8ec;background:#ffffff0b;border:1px solid #ffffff1f;border-radius:9px;padding:13px 15px}.loginFormPanel{background:#f4f7f8;place-items:center;padding:30px;display:grid}.loginCard{background:#fff;border:1px solid #dfe6ea;border-radius:16px;width:min(460px,100%);padding:38px;box-shadow:0 24px 70px #142b3b18}.loginCard>small{letter-spacing:1.5px;color:#078f86;font-size:9px;font-weight:800}.loginCard h2{margin:8px 0;font-size:30px}.loginCard>p{color:#74838e;margin:0 0 25px}.loginCard label{color:#4d606c;gap:7px;margin:15px 0;font-size:11px;font-weight:700;display:grid}.loginCard input{border:1px solid #ccd9df;border-radius:9px;outline:none;height:48px;padding:0 13px}.loginCard input:focus{border-color:#079a91;box-shadow:0 0 0 3px #079a9118}.loginSubmit{width:100%;height:48px;margin-top:8px}.loginError{color:#b73d45;background:#fff1f2;border-radius:8px;padding:10px 12px;font-size:11px}.loginHelp{color:#788792;border-top:1px solid #e5ebee;gap:4px;margin-top:19px;padding-top:17px;font-size:10px;display:grid}.loginHelp b{color:#40535f}.employeeApp{background:#f3f6f7;min-height:100vh}.employeeHeader{z-index:30;background:#fff;border-bottom:1px solid #dfe6ea;align-items:center;height:76px;padding:0 clamp(16px,4vw,60px);display:flex;position:sticky;top:0}.employeeBrand{align-items:center;gap:10px;font-weight:800;display:flex}.employeeBrand>b{color:#fff;background:linear-gradient(135deg,#13b9ad,#078099);border-radius:9px;place-items:center;width:38px;height:38px;font:700 22px Georgia;display:grid}.employeeBrand small{letter-spacing:1px;color:#8796a0;margin-top:2px;font-size:8px;display:block}.employeeHeader nav{gap:5px;margin:auto;display:flex}.employeeHeader nav button{color:#60717c;background:0 0;border:0;border-radius:8px;height:40px;padding:0 15px}.employeeHeader nav button.active{color:#07877f;background:#e8f6f4;font-weight:750}.employeeIdentity{align-items:center;gap:8px;display:flex}.employeeIdentity>span{display:grid}.employeeIdentity small{color:#87959f;font-size:9px}.employeeIdentity>button{color:#a34b50;background:0 0;border:0;margin-left:8px;font-size:10px}.employeeMain{margin:0!important;max-width:1500px!important;margin-inline:auto!important;padding:clamp(18px,3vw,42px)!important}.employeeWelcome{color:#fff;background:linear-gradient(110deg,#05304b,#087b7d);border-radius:14px;justify-content:space-between;align-items:center;padding:27px 30px;display:flex;box-shadow:0 15px 40px #062f4930}.employeeWelcome small{letter-spacing:1.3px;color:#8ee0d7;font-size:9px;font-weight:800}.employeeWelcome h1{margin:8px 0 5px;font-size:31px}.employeeWelcome p{color:#c7dce1;margin:0}.liveClock{text-align:right;display:grid}.liveClock b{font-size:31px}.liveClock span{color:#a9cbd0;font-size:10px}.clockGrid{grid-template-columns:1.25fr .75fr;gap:15px;margin-top:15px;display:grid}.clockCard,.todayTimeline,.employeeQuickStats article,.payBreakdown,.employeeProfileCard{background:#fff;border:1px solid #dfe6ea;border-radius:12px;padding:22px;box-shadow:0 8px 28px #142b3b0b}.clockStatus{align-items:center;gap:12px;display:flex}.statusDot{background:#98a6af;border-radius:50%;width:13px;height:13px;box-shadow:0 0 0 6px #edf1f3}.statusDot.working{background:#19a871;box-shadow:0 0 0 6px #e4f7ef}.statusDot.on-break{background:#e3932e;box-shadow:0 0 0 6px #fff2df}.statusDot.shift-complete{background:#2788b5;box-shadow:0 0 0 6px #e6f2f8}.clockStatus small,.punchTimes small,.todayTimeline>small,.employeeQuickStats small,.employeePayHero small{letter-spacing:1px;color:#85939d;font-size:9px;font-weight:800}.clockStatus h2{margin:4px 0 0}.punchTimes{grid-template-columns:repeat(3,1fr);gap:9px;margin:20px 0;display:grid}.punchTimes span{background:#f3f7f7;border-radius:9px;gap:5px;padding:13px;display:grid}.punchTimes b{font-size:17px}.clockActions{gap:9px;display:flex}.clockActions button{border-radius:9px;height:46px;padding:0 18px;font-weight:750}.clockPrimary{color:#fff;background:#079a91;border:0}.breakButton{color:#a86815;background:#fff7e9;border:1px solid #e4b66e}.clockOutButton{color:#ae444b;background:#fff3f4;border:1px solid #e3b9bd}.shiftDone{color:#187c5b;background:#e8f7ef;border-radius:8px;padding:13px;font-weight:750}.clockNote{color:#84929c;margin:13px 0 0;font-size:10px}.todayTimeline h3{margin:6px 0 18px}.timelineList{gap:16px;display:grid}.timelineList span{align-items:center;gap:10px;display:flex}.timelineList i{border:2px solid #d0dbe0;border-radius:50%;place-items:center;width:29px;height:29px;font-size:9px;font-style:normal;display:grid}.timelineList span.complete i{color:#fff;background:#079a91;border-color:#079a91}.timelineList span.current i{color:#b36c1c;background:#fff1df;border-color:#df9237}.timelineList b,.timelineList small{display:block}.timelineList small{color:#89969f;margin-top:3px;font-weight:400}.employeeQuickStats{grid-template-columns:repeat(3,1fr);gap:15px;margin-top:15px;display:grid}.employeeQuickStats article{gap:5px;display:grid}.employeeQuickStats b{font-size:22px}.employeeQuickStats span{color:#84929c;font-size:10px}.employeePayHero{color:#fff;background:linear-gradient(110deg,#06304d,#087b7d);border-radius:13px;justify-content:space-between;align-items:center;margin-bottom:15px;padding:25px 28px;display:flex}.employeePayHero h2{margin:6px 0;font-size:32px}.employeePayHero p{color:#bdd6db;margin:0}.payBreakdown{max-width:700px}.payBreakdown h3{margin-top:0}.payBreakdown>span{border-bottom:1px solid #e8edef;justify-content:space-between;padding:13px 0;display:flex}.payBreakdown .payTotal{border:0;font-size:16px}.profileHero{border-bottom:1px solid #e4eaed;align-items:center;gap:14px;padding-bottom:20px;display:flex}.profileHero .avatar{width:60px;height:60px;font-size:15px}.profileHero h2,.profileHero p{margin:3px 0}.profileDetails{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px;display:grid}.profileDetails span{color:#778691;background:#f4f7f8;border-radius:8px;padding:13px;font-size:10px}.profileDetails b{color:#263541;word-break:break-word;margin-top:5px;font-size:13px;display:block}@media (width<=850px){.loginShell{grid-template-columns:1fr}.loginBrandPanel{display:none}.employeeHeader{flex-wrap:wrap;height:auto;min-height:70px;padding:10px 14px}.employeeHeader nav{order:3;width:100%;margin-top:8px;overflow:auto}.employeeHeader nav button{flex:1}.employeeIdentity>span{display:none}.employeeMain{padding:14px!important}.employeeWelcome{align-items:flex-start;gap:20px}.liveClock b{font-size:21px}.clockGrid,.employeeQuickStats,.profileDetails{grid-template-columns:1fr}}@media (width<=520px){.employeeWelcome,.clockActions{flex-direction:column}.clockActions button{width:100%}.punchTimes{grid-template-columns:1fr}.loginCard{padding:25px}.employeeBrand span{display:none}}.navBackdrop{z-index:28;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:#021c2f73;border:0;display:none;position:fixed;inset:0}.shiftCountdown{background:linear-gradient(135deg,#eef9f7,#f6fbfb);border:1px solid #cde8e4;border-radius:11px;gap:5px;margin:18px 0 4px;padding:16px;display:grid}.shiftCountdown small{letter-spacing:1px;color:#07877f;font-size:9px;font-weight:800}.shiftCountdown>b{letter-spacing:1px;color:#173640;font-size:30px}.shiftCountdown>span{color:#758891;font-size:10px}.shiftCountdown>div{background:#dce9e8;border-radius:5px;height:5px;margin-top:5px;overflow:hidden}.shiftCountdown>div i{background:linear-gradient(90deg,#10b3a6,#078a84);border-radius:5px;height:100%;transition:width .5s;display:block}.shiftCountdown.paused{background:#fff8ec;border-color:#f0d5a7}.shiftCountdown.paused small{color:#a86815}.shiftCountdown.complete{background:#eaf8ef;border-color:#bfe4ce}.shiftDone.short{color:#b75424;background:#fff0e8}.shortHoursRow{box-shadow:inset 3px 0 #e37b3d}.shortHoursNote{color:#b25b2e;white-space:nowrap;margin-top:4px;font-size:9px;font-weight:750;display:block}.sideClose{color:#fff;background:#ffffff14;border:1px solid #ffffff2b;border-radius:8px;width:34px;height:34px;font-size:23px;display:none;position:absolute;top:14px;right:12px}.dangerButton{color:#fff;background:#c7474f;border:0;border-radius:8px;height:42px;padding:0 16px;font-weight:750}.rowActions .deleteAction{color:#b53e46;background:#fff3f4;border-color:#efc6c9}@media (width<=1180px){.navBackdrop,.side.open .sideClose{display:block}.side{transition:transform .22s;box-shadow:15px 0 50px #0005;transform:translate(-100%)!important}.side.open{transform:translate(0)!important}main{margin-left:0!important}.hamb{color:#087f77;background:#edf7f6;border:0;border-radius:8px;flex:none;place-items:center;width:38px;height:38px;margin-right:10px;font-size:20px;display:grid!important}.content{padding-left:18px!important;padding-right:18px!important}.otSummary{grid-template-columns:38px minmax(150px,1fr) 135px 24px!important}.otSummary>span:first-of-type{min-width:0;display:grid!important}.otSummary>span:first-of-type b,.otSummary>span:first-of-type small{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.otSummary>span:nth-of-type(2),.otSummary>span:nth-of-type(3),.otSummary>.badge{display:none!important}.otSummary>span:nth-of-type(4){display:grid!important}}@media (width<=560px){header{padding-left:10px!important;padding-right:10px!important}header .primary{height:40px;padding:0 12px;font-size:12px}.otSummary{gap:8px;padding:12px 10px;grid-template-columns:36px minmax(110px,1fr) 90px 18px!important}.otSummary>span:nth-of-type(4) b{font-size:12px}.otDetails{padding-left:8px;padding-right:8px}.formulaNote{line-height:1.4}}.compactAttendance td{height:56px;padding-top:8px;padding-bottom:8px}.clickableRow{cursor:pointer}.clickableRow:hover{background:#eef8f7!important}.commentPreview{white-space:nowrap;text-overflow:ellipsis;color:#526571;max-width:280px;display:block;overflow:hidden}.commentPreview.empty{color:#a0abb3;font-style:italic}.reviewWarning{color:#aa641b;background:#fff7eb;border:1px solid #f0c58e;border-radius:8px;padding:10px 12px;font-size:11px;font-weight:700}.attendanceToolbar{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.attendanceToolbar>span{color:#71818c;font-size:11px}.employeeMulti{position:relative}.employeeFilterButton{justify-content:space-between;align-items:center;gap:10px;min-width:220px;display:flex}.employeeFilterMenu{z-index:40;background:#fff;border:1px solid #d5e0e5;border-radius:10px;width:290px;max-height:360px;padding:7px;position:absolute;top:48px;left:0;overflow:auto;box-shadow:0 18px 45px #102a3a26}.employeeFilterMenu label{cursor:pointer;border-radius:7px;align-items:center;gap:9px;min-height:45px;padding:7px 9px;display:flex}.employeeFilterMenu label:hover{background:#f0f8f7}.employeeFilterMenu label.allOption{border-bottom:1px solid #e7edef;margin-bottom:5px;font-weight:750}.employeeFilterMenu input{accent-color:#079a91}.employeeFilterMenu label>span{gap:2px;display:grid}.employeeFilterMenu small{color:#83919c;font-size:9px}.employeeFilterMenu .avatar{width:30px;height:30px}.attendanceCommentEdit{resize:vertical;color:#354a56;background:#fff;border:1px solid #cfdce2;border-radius:7px;width:min(280px,25vw);min-width:180px;min-height:44px;padding:8px}.attendanceCommentEdit:focus{border-color:#079a91;outline:none;box-shadow:0 0 0 3px #079a9115}.attendanceCommentEdit.missing{background:#fffaf3;border-color:#e4a04f}@media (width<=720px){html,body,.app,main,.content{min-width:0;max-width:100%;overflow-x:hidden}.attendanceToolbar{flex-direction:column;align-items:flex-start;gap:8px}.employeeMulti,.employeeFilterButton,.employeeFilterMenu{width:100%}.attendanceCommentEdit{width:220px}}.content{width:100%;max-width:none!important;margin:0!important}.attendanceComment{white-space:normal;color:#526571;max-width:260px;line-height:1.4}.overtimeGroups{gap:10px;display:grid}.otGroup{border:1px solid var(--line);box-shadow:var(--shadow);background:#fff;border-radius:11px;overflow:hidden}.otSummary{text-align:left;color:#40505d;background:#fff;border:0;grid-template-columns:40px minmax(180px,1fr) 80px 100px 145px 80px 25px;align-items:center;gap:12px;width:100%;padding:14px 16px;display:grid}.otSummary:hover{background:#f8fbfb}.otSummary>span{gap:3px;display:grid}.otSummary small{color:#84919b;font-size:9px}.otSummary>i{color:#078f86;font-size:18px;font-style:normal}.otDetails{background:#f8fafb;border-top:1px solid #e6ecef;padding:0 14px 14px}.formulaNote{color:#667782;padding:11px 3px;font-size:10px}.commentEdit{resize:vertical;color:#354a56;background:#fff;border:1px solid #cfdce2;border-radius:7px;width:260px;min-height:52px;padding:8px}.commentEdit.missing{background:#fff9f0;border-color:#e7a04d}.decision{border:1px solid #cfdce2;border-radius:7px;height:36px;padding:0 8px;font-weight:700}.decision.approved{color:#187c5b;background:#e8f7ef}.decision.rejected{color:#b7444b;background:#fdebec}.decision.pending{color:#b66513;background:#fff0de}@media (width<=900px){.otSummary{grid-template-columns:38px 1fr 85px 25px}.otSummary>span:nth-of-type(2),.otSummary>span:nth-of-type(3),.otSummary>.badge{display:none}}.periodFilters{gap:8px;display:flex}.filterDrop{position:relative}.filterButton{color:#263c4a;background:#fff;border:1px solid #d6e0e5;border-radius:9px;justify-content:space-between;align-items:center;gap:14px;min-width:118px;height:48px;padding:6px 11px;display:flex}.filterButton span{text-align:left;display:grid}.filterButton small{color:#83919c;letter-spacing:1px;font-size:8px}.filterButton b{margin-top:2px;font-size:12px}.filterButton i{font-style:normal}.filterMenu{z-index:80;background:#fff;border:1px solid #d9e2e6;border-radius:10px;width:180px;max-height:310px;padding:7px;position:absolute;top:54px;right:0;overflow:auto;box-shadow:0 18px 45px #102a3a26}.filterMenu label{color:#40515d;border-radius:7px;align-items:center;gap:9px;padding:9px;display:flex}.filterMenu label:hover{background:#f0f8f7}.filterMenu input{accent-color:#079a91}.rowActions{gap:6px;display:flex}.rowActions button{white-space:nowrap;color:#28606b;background:#fff;border:1px solid #cfdce2;border-radius:6px;padding:6px 8px;font-size:9px}.rowActions button:last-child{color:#087f77;background:#eaf7f5;border-color:#c7e9e5}.formModal{width:min(780px,100%);max-height:92vh;overflow:auto}.formGrid{grid-template-columns:1fr 1fr;gap:13px;margin:18px 0;display:grid}.formGrid.single{grid-template-columns:1fr 1fr}.formGrid label{color:#53636f;gap:6px;font-size:10px;font-weight:700;display:grid}.formGrid input,.formGrid select,.formGrid textarea{color:#263c4a;background:#fff;border:1px solid #cfdce2;border-radius:8px;outline:none;width:100%;padding:10px}.formGrid input,.formGrid select{height:42px}.formGrid textarea{resize:vertical;min-height:70px}.formGrid input:focus,.formGrid select:focus,.formGrid textarea:focus{border-color:#079a91;box-shadow:0 0 0 3px #079a9115}.formGrid .wide{grid-column:1/-1}.modalActions{justify-content:flex-end;gap:9px;margin-top:16px;display:flex}.flagWarning{color:#8a5810;background:#fff8e9;border:1px solid #efb35a;border-radius:9px;gap:5px;margin-top:14px;padding:12px 14px;display:grid}.flagWarning span{font-size:12px;line-height:1.45}.flagButton,.flaggedDecision{color:#9a5d06!important;background:#fff8e9!important;border-color:#e9a33c!important}.flaggedDecision{cursor:pointer;border:1px solid;border-radius:7px;min-height:34px;padding:0 10px}.history{border:1px solid var(--line);border-radius:9px;gap:7px;padding:12px;display:grid}.history>span{color:#71808b;justify-content:space-between;display:flex}.wideModal{width:min(760px,100%)}.compact table{min-width:600px}.details span b{word-break:break-word}@media (width<=900px){.periodFilters{z-index:25;background:#fff;border-top:1px solid #dce5e9;justify-content:center;padding:8px 12px;position:fixed;bottom:0;left:0;right:0}.filterDrop{flex:1;max-width:220px}.filterButton{width:100%}.filterMenu{inset:auto auto 55px 0}.formGrid,.formGrid.single{grid-template-columns:1fr}.formGrid .wide{grid-column:auto}}.currencySelect{color:#263c4a;background:#fff;border:1px solid #cfdce2;border-radius:7px;outline:none;min-width:78px;height:34px;padding:0 8px;font-weight:750}.currencySelect:focus{border-color:#079a91;box-shadow:0 0 0 3px #079a9118}.currencyField{background:#f4f8f8;border:1px solid #dce7e8;border-radius:9px;justify-content:space-between;align-items:center;margin-bottom:12px;padding:11px 13px;display:flex}.currencyField label{color:#53636f;font-size:11px;font-weight:700}.currencyField select{color:#173a46;background:#fff;border:1px solid #cbd9df;border-radius:7px;height:36px;padding:0 10px;font-weight:750}:root{--navy:#032944;--navy2:#021c30;--teal:#079a91;--ink:#182632;--muted:#73828e;--line:#dfe6ea;--canvas:#f3f6f7;--shadow:0 8px 28px #142b3b0b}*{box-sizing:border-box}body{background:var(--canvas);color:var(--ink);margin:0;font:14px Inter,system-ui,sans-serif}button,input{font:inherit}button{cursor:pointer}.app{min-height:100vh}.side{background:linear-gradient(var(--navy2), var(--navy));color:#fff;z-index:30;flex-direction:column;width:240px;padding:22px 14px;display:flex;position:fixed;inset:0 auto 0 0}.brand{align-items:center;gap:11px;height:60px;margin-bottom:25px;padding:0 8px;font-weight:700;display:flex}.brand>b{background:linear-gradient(135deg,#13b9ad,#078099);border-radius:9px;place-items:center;width:38px;height:38px;font:700 22px Georgia;display:grid}.brand span small,.sideFoot span small{color:#9db4c5;letter-spacing:1.2px;margin-top:3px;font-size:9px;display:block}.side nav{gap:6px;display:grid}.side nav button,.sideFoot>button{color:#d0dce5;text-align:left;background:0 0;border:0;border-radius:9px;align-items:center;gap:13px;width:100%;height:45px;padding:0 13px;display:flex}.side nav button i{text-align:center;width:20px;font-size:20px;font-style:normal}.side nav button.active{color:#fff;background:linear-gradient(100deg,#087c87,#10aea3);box-shadow:0 7px 20px #00152455}.side nav em{color:#25323c;background:#efa348;border-radius:20px;margin-left:auto;padding:3px 7px;font-size:9px;font-style:normal}.sideFoot{border-top:1px solid #fff2;margin-top:auto;padding-top:12px}.sideFoot>div{background:#ffffff0d;border:1px solid #ffffff12;border-radius:10px;align-items:center;gap:9px;margin-top:8px;padding:10px;display:flex}.sideFoot span{font-size:12px}.avatar{color:#087e77;background:linear-gradient(135deg,#e3f4f2,#dcecf5);border-radius:9px;flex:none;place-items:center;width:35px;height:35px;font-size:10px;font-style:normal;font-weight:800;display:grid}main{min-height:100vh;margin-left:240px}header{border-bottom:1px solid var(--line);z-index:20;background:#fff;align-items:center;height:84px;padding:0 27px;display:flex;position:sticky;top:0}header>div small,.intro small,.panelTitle small,.modal>small,.payslipHero small{letter-spacing:1.2px;color:#84939f;font-size:9px;font-weight:750}header h1{margin:4px 0 0;font-size:23px}header section{align-items:center;gap:9px;margin-left:auto;display:flex}.month,.select{color:#4c5b67;background:#fff;border:1px solid #d6e0e5;border-radius:8px;height:42px;padding:0 13px}.cycle{border:1px solid #d6e0e5;border-radius:8px;height:42px;padding:6px 13px;font-size:12px;display:grid}.cycle small{color:#8a98a3;letter-spacing:1px;font-size:8px}.primary{color:#fff;background:linear-gradient(105deg,#078d86,#0aa59c);border:0;border-radius:8px;height:42px;padding:0 18px;font-weight:700;transition:all .18s;box-shadow:0 6px 16px #079a9130}.primary:hover{transform:translateY(-1px)}.hamb{display:none}.content{max-width:1500px;margin:auto;padding:24px 27px 40px}.welcome{border:1px solid var(--line);box-shadow:var(--shadow);background:linear-gradient(110deg,#fff 65%,#e8f7f4);border-radius:12px;align-items:center;margin-bottom:15px;padding:20px 23px;display:flex}.welcome h2{margin:9px 0 4px;font-size:24px}.welcome p,.intro p{color:var(--muted);margin:0}.welcome>button,.panelTitle>button{color:#087f77;background:0 0;border:0;margin-left:auto;font-weight:700}.badge{border-radius:20px;align-items:center;padding:5px 9px;font-size:9px;font-weight:700;display:inline-flex}.badge.green{color:#187c5b;background:#e8f7ef}.badge.orange{color:#b66513;background:#fff0de}.badge.blue{color:#347cad;background:#e9f2fb}.badge.gray{color:#687783;background:#edf1f3}.stats{grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:13px;display:grid}.stat{border:1px solid var(--line);min-height:111px;box-shadow:var(--shadow);background:#fff;border-radius:11px;align-items:center;gap:14px;padding:17px;display:flex}.statIcon{border-radius:10px;place-items:center;width:43px;height:43px;font-size:18px;display:grid}.statIcon.mint{color:#078f84;background:#e5f6f3}.statIcon.blue{color:#2f83b8;background:#e8f3fb}.statIcon.orange{color:#cf7014;background:#fff0e2}.stat span,.stat strong,.stat small{display:block}.stat span{color:#667582}.stat strong{margin:5px 0;font-size:20px}.stat small{color:#8b98a1;font-size:9px}.grid{grid-template-columns:1.05fr .95fr;gap:13px;display:grid}.panel,.table{border:1px solid var(--line);box-shadow:var(--shadow);background:#fff;border-radius:11px;overflow:hidden}.panel{padding:19px}.panelTitle{align-items:flex-start;margin-bottom:14px;display:flex}.panelTitle h3{margin:5px 0 0;font-size:17px}.panelTitle>.badge,.panelTitle>.select{margin-left:auto}.meter{background:#e8edee;border-radius:5px;height:5px;margin-bottom:12px;overflow:hidden}.meter i{background:linear-gradient(90deg,#079a91,#35b879);width:92%;height:100%;display:block}.readiness>button:not(.primary){text-align:left;background:#fff;border:0;border-bottom:1px solid #edf1f3;align-items:center;gap:11px;width:100%;padding:9px 3px;display:flex}.readiness>button:not(.primary)>b{color:#078f84;background:#e7f6f3;border-radius:8px;place-items:center;width:32px;height:32px;display:grid}.readiness>button span{gap:3px;display:grid}.readiness>button small{color:#84919b}.readiness>button .badge{margin-left:auto}.readiness>button em{color:#9aa6ae;font-style:normal}.full{width:100%;margin-top:13px}.chart{background:repeating-linear-gradient(#fff,#fff 54px,#edf1f3 55px);border-bottom:1px solid #dbe3e7;border-left:1px solid #dbe3e7;align-items:flex-end;gap:18px;height:223px;padding:20px 22px 0;display:flex}.chart>span{flex:1;justify-content:center;align-items:flex-end;gap:4px;height:100%;display:flex;position:relative}.chart i,.chart b{border-radius:4px 4px 0 0;width:17px}.chart i{background:linear-gradient(#0bac9f,#07857c)}.chart b{background:#b9e2dc}.chart small{color:#74838f;position:absolute;bottom:-23px}.legend{color:#6d7b86;gap:15px;margin-top:29px;font-size:10px;display:flex}.legend span:first-child{color:#078f85}.legend span:nth-child(2){color:#72bbb4}.legend>b{color:#188d60;margin-left:auto}.exceptions>button{text-align:left;background:#fff;border:0;border-top:1px solid #edf1f3;align-items:center;gap:10px;width:100%;padding:11px 2px;display:flex}.exceptions>button span{gap:3px;font-weight:700;display:grid}.exceptions>button small{color:#7e8c97;font-weight:400}.exceptions>button>b{color:#c46e16;margin-left:auto}.timeline>div:last-child{justify-content:space-between;display:flex;position:relative}.timeline>div:last-child:before{content:"";background:#dbe3e7;height:2px;position:absolute;top:15px;left:30px;right:30px}.timeline span{text-align:center;width:25%;position:relative}.timeline span>i{background:#fff;border:2px solid #ced9df;border-radius:50%;place-items:center;width:31px;height:31px;margin:auto;font-size:10px;font-style:normal;display:grid}.timeline .done>i{color:#fff;background:#079a91;border-color:#079a91}.timeline .now>i{color:#ba6812;background:#fff0df;border-color:#d88830}.timeline span>b,.timeline span small{margin-top:7px;font-size:10px;display:block}.timeline span small{color:#87949e;margin-top:3px;font-weight:400}.intro{justify-content:space-between;align-items:center;margin:4px 0 21px;display:flex}.intro h2{margin:6px 0 4px;font-size:27px}.toolbar{gap:9px;margin-bottom:12px;display:flex}.toolbar label{color:#84919b;background:#fff;border:1px solid #d6e0e5;border-radius:8px;align-items:center;gap:8px;min-width:340px;height:42px;padding:0 12px;display:flex}.toolbar input{background:0 0;border:0;outline:0;width:100%}.table{overflow:auto}.table table{border-collapse:collapse;width:100%;min-width:930px}th{text-align:left;color:#83919c;text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--line);background:#f7f9fa;padding:12px 14px;font-size:9px}td{color:#45535f;border-bottom:1px solid #edf1f3;padding:10px 14px;font-size:11px}tbody tr:hover{background:#f7fbfa}.person{align-items:center;gap:9px;display:flex}.person span{gap:3px;display:grid}.person small{color:#87949e;font-size:9px}.table footer{color:#7d8b96;justify-content:space-between;padding:12px 14px;font-size:10px;display:flex}.table footer span{word-spacing:9px}.table footer b{color:#fff;background:#078f86;border-radius:4px;padding:4px 7px}.mini{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:15px;display:grid}.mini article{border:1px solid var(--line);background:#fff;border-radius:10px;padding:16px 18px}.mini small,.mini b,.mini span{display:block}.mini small,.mini span{color:#7e8c97}.mini b{margin:6px 0;font-size:20px}.mini span{font-size:9px}.claimList{padding:0}.claimList .panelTitle{padding:18px 18px 0}.claimList>button{text-align:left;background:#fff;border:0;border-top:1px solid #edf1f3;grid-template-columns:38px 1fr 80px 100px 75px 30px;align-items:center;gap:11px;width:100%;padding:12px 18px;display:grid}.claimList>button>span{gap:3px;display:grid}.claimList>button small{color:#84919b;font-size:9px}.claimList em{font-style:normal}.payslipHero{color:#fff;background:linear-gradient(105deg,#06304d,#076370);border-radius:11px;justify-content:space-between;align-items:center;margin-bottom:15px;padding:22px;display:flex}.payslipHero>div{align-items:center;gap:13px;display:flex}.payslipHero>div>b{background:#ffffff18;border-radius:9px;place-items:center;width:42px;height:42px;display:grid}.payslipHero h3,.payslipHero p{margin:4px 0}.payslipHero p{color:#b9d3d9;font-size:10px}.payslipHero button,.download{color:#34515d;background:#fff;border:1px solid #dbe4e8;border-radius:7px;height:36px;padding:0 12px}.overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:60;background:#021c2fb0;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.modal{background:#fff;border-radius:15px;width:min(500px,100%);padding:27px;animation:.2s pop;position:relative;box-shadow:0 25px 70px #0005}.x{border:0;border-radius:50%;width:31px;height:31px;font-size:20px;position:absolute;top:13px;right:14px}.modalIcon{color:#168159;background:#e8f7ef;border-radius:9px;place-items:center;width:39px;height:39px;margin-bottom:13px;display:grid}.modal h2{margin:6px 0;font-size:23px}.modal>p{color:#74828e}.checks{border:1px solid var(--line);border-radius:9px;margin:17px 0}.checks div{color:#17845e;border-bottom:1px solid #edf1f3;padding:10px 12px;display:flex}.checks div:last-child{border:0}.checks span{color:#40505d;margin-left:8px}.checks b{margin-left:auto;font-size:9px}.summary,.details{grid-template-columns:1fr 1fr;gap:9px;display:grid}.summary span,.details span{color:#788691;background:#f4f7f8;border-radius:8px;padding:11px;font-size:10px}.summary b,.details b{color:#263541;margin-top:5px;font-size:14px;display:block}.progress{background:#edf4f3;border-radius:8px;height:43px;position:relative;overflow:hidden}.progress i{background:#b9e8e2;width:65%;height:100%;animation:1s infinite load;display:block}.progress span{color:#07867e;place-items:center;font-weight:700;display:grid;position:absolute;inset:0}.employeeHead{align-items:center;gap:12px;margin-bottom:17px;display:flex}.employeeHead .avatar{width:50px;height:50px}.employeeHead h2,.employeeHead p{margin:3px 0}.employeeHead p{color:#74828e}.toast{color:#fff;z-index:100;background:#17433e;border-radius:9px;padding:13px 17px;animation:.2s slide;position:fixed;top:100px;right:20px;box-shadow:0 15px 40px #0003}@keyframes pop{0%{opacity:0;transform:translateY(8px)}}@keyframes slide{0%{opacity:0;transform:translate(20px)}}@keyframes load{50%{width:100%}}@media (width<=1100px){.cycle{display:none}.stats{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr}.chart{height:190px}.claimList>button{grid-template-columns:38px 1fr 70px 80px}.claimList>button>span:nth-of-type(3),.claimList em{display:none}}@media (width<=720px){.side{transition:all .2s;transform:translate(-100%);box-shadow:15px 0 50px #0005}.side.open{transform:none}main{margin-left:0}header{height:70px;padding:0 13px}.hamb{color:#087f77;border:0;border-radius:8px;width:38px;height:38px;margin-right:10px;display:block}header>div>small{display:none}header h1{margin:0;font-size:19px}.month{display:none}header .primary{padding:0 12px}.content{padding:14px 14px 92px}.welcome{padding:17px}.welcome button{display:none}.welcome h2{font-size:20px}.stats{gap:8px}.stat{min-height:96px;padding:12px}.statIcon{display:none}.stat strong{font-size:15px}.grid{display:block}.panel{margin-bottom:10px}.grid>.panel:nth-child(2){display:none}.intro{align-items:flex-start;gap:12px}.intro h2{font-size:22px}.toolbar{flex-wrap:wrap}.toolbar label{min-width:100%}.mini{scroll-snap-type:x proximity;gap:8px;padding-bottom:4px;display:flex;overflow-x:auto}.mini>*{scroll-snap-align:start;flex:0 0 155px;min-height:88px}.claimList>button{grid-template-columns:35px 1fr 70px}.claimList>button>span:nth-of-type(2){display:none}.payslipHero{flex-direction:column;align-items:flex-start;gap:15px}.toast{top:80px;left:12px;right:12px}.modal{padding:22px}.overlay{width:100vw;max-width:100vw;padding:10px;overflow:hidden auto}.modal,.wideModal,.formModal{max-height:calc(100dvh - 20px);margin:0;overflow:auto;width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important}.employeeTable,.attendanceTable,.overtimeTable,.payslipTable,.employeeAttendanceTable{overflow:visible}.employeeTable table,.attendanceTable table,.overtimeTable table,.payslipTable table,.employeeAttendanceTable table{width:100%;min-width:0;display:block}.employeeTable thead,.attendanceTable thead,.overtimeTable thead,.payslipTable thead,.employeeAttendanceTable thead{display:none}.employeeTable tbody,.attendanceTable tbody,.overtimeTable tbody,.payslipTable tbody,.employeeAttendanceTable tbody{gap:10px;display:grid}.employeeTable tr,.attendanceTable tr,.overtimeTable tr,.payslipTable tr,.employeeAttendanceTable tr{border:1px solid var(--line);background:#fff;border-radius:13px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 14px;padding:15px;display:grid;box-shadow:0 5px 18px #173b4b0a}.employeeTable td,.attendanceTable td,.overtimeTable td,.payslipTable td,.employeeAttendanceTable td{overflow-wrap:anywhere;border:0;min-width:0;padding:0}.employeeTable td:before,.attendanceTable td:before,.overtimeTable td:before,.payslipTable td:before,.employeeAttendanceTable td:before{content:"";color:#83919c;letter-spacing:.6px;text-transform:uppercase;margin-bottom:4px;font-size:9px;font-weight:700;display:block}.employeeTable td:first-child,.attendanceTable td:nth-child(2),.attendanceTable td:nth-child(8),.attendanceTable td:nth-child(9),.overtimeTable td:nth-child(2),.overtimeTable td:nth-child(7),.payslipTable td:first-child,.payslipTable td:nth-child(7),.employeeAttendanceTable td:nth-child(6),.employeeAttendanceTable td:nth-child(7){grid-column:1/-1}.employeeTable td:nth-child(2):before{content:"Designation"}.employeeTable td:nth-child(3):before{content:"Contract"}.employeeTable td:nth-child(4):before{content:"Required hours"}.employeeTable td:nth-child(5):before{content:"Currency"}.employeeTable td:nth-child(6):before{content:"Monthly salary"}.employeeTable td:nth-child(7):before{content:"Bank"}.employeeTable td:nth-child(8):before{content:"Status"}.employeeTable td:nth-child(9):before{content:"Actions"}.employeeTable td:nth-child(9){grid-column:1/-1}.attendanceTable td:first-child:before{content:"Employee code"}.attendanceTable td:nth-child(2):before{content:"Employee"}.attendanceTable td:nth-child(3):before{content:"Date"}.attendanceTable td:nth-child(8):before{content:"Comments"}.attendanceTable td:nth-child(9):before{content:"Status"}.overtimeTable td:first-child:before{content:"Date"}.overtimeTable td:nth-child(2):before{content:"Comments from attendance"}.overtimeTable td:nth-child(3):before{content:"Time in"}.overtimeTable td:nth-child(4):before{content:"Time out"}.overtimeTable td:nth-child(5):before{content:"Overtime hours"}.overtimeTable td:nth-child(6):before{content:"Overtime amount"}.overtimeTable td:nth-child(7):before{content:"Decision"}.payslipTable td:nth-child(2):before{content:"Designation"}.payslipTable td:nth-child(3):before{content:"Currency"}.payslipTable td:nth-child(4):before{content:"Gross"}.payslipTable td:nth-child(5):before{content:"Deductions"}.payslipTable td:nth-child(6):before{content:"Net pay"}.payslipTable td:nth-child(7):before{content:"Action"}.employeeAttendanceTable td:first-child:before{content:"Date"}.employeeAttendanceTable td:nth-child(2):before{content:"Time in"}.employeeAttendanceTable td:nth-child(3):before{content:"Time out"}.employeeAttendanceTable td:nth-child(4):before{content:"Worked"}.employeeAttendanceTable td:nth-child(5):before{content:"Overtime"}.employeeAttendanceTable td:nth-child(6):before{content:"Comments"}.employeeAttendanceTable td:nth-child(7):before{content:"Status"}.commentEdit,.overtimeTable textarea,.attendanceTable input{width:100%;min-width:0;max-width:100%}.rowActions{flex-wrap:wrap;gap:7px;display:flex}.attendanceTable tbody{gap:7px}.attendanceTable tr{border-radius:10px;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:7px 12px;padding:11px 12px}.attendanceTable td:first-child,.attendanceTable td:nth-child(8){display:none}.attendanceTable td:nth-child(2){grid-column:1/3}.attendanceTable td:nth-child(3){color:#697984;white-space:nowrap;grid-column:3;font-size:10px}.attendanceTable td:nth-child(4){grid-column:1}.attendanceTable td:nth-child(5){grid-column:2}.attendanceTable td:nth-child(6){grid-column:3}.attendanceTable td:nth-child(7){grid-column:1/3}.attendanceTable td:nth-child(9){grid-column:3;justify-self:end}.attendanceTable td:nth-child(2):before,.attendanceTable td:nth-child(3):before,.attendanceTable td:nth-child(9):before{display:none}.attendanceTable td:nth-child(4):before{content:"In"}.attendanceTable td:nth-child(5):before{content:"Out"}.attendanceTable td:nth-child(6):before{content:"Worked"}.attendanceTable td:nth-child(7):before{content:"Overtime"}.attendanceTable .person .avatar{width:32px;height:32px}.attendanceTable tr:after{content:"Tap to review";color:#078f86;letter-spacing:.4px;text-align:right;text-transform:uppercase;border-top:1px solid #edf1f3;grid-column:1/-1;padding-top:5px;font-size:9px;font-weight:700}.otDetails{padding:0 8px 9px}.formulaNote{padding:9px 2px;font-size:9px;line-height:1.35}.overtimeTable tbody{gap:7px}.overtimeTable tr{border-radius:10px;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"date hours amount""comment comment comment""timein timeout decision";gap:9px 10px;padding:11px}.overtimeTable td:first-child{grid-area:date}.overtimeTable td:nth-child(2){grid-area:comment}.overtimeTable td:nth-child(3){grid-area:timein}.overtimeTable td:nth-child(4){grid-area:timeout}.overtimeTable td:nth-child(5){grid-area:hours}.overtimeTable td:nth-child(6){grid-area:amount}.overtimeTable td:nth-child(7){grid-area:decision}.overtimeTable .commentEdit{resize:none;white-space:nowrap;height:38px;min-height:38px;padding:8px 9px;overflow:hidden}.overtimeTable .decision,.overtimeTable .flaggedDecision{width:100%;max-width:110px;height:32px;min-height:32px;padding:0 6px;font-size:10px}}@media (width<=420px){.stats{grid-template-columns:1fr}.stat{min-height:auto}.intro{flex-direction:column}.summary,.details{grid-template-columns:1fr}}