:root{font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:#162943;background:#f3f6fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.54}input,select,textarea{width:100%;min-height:43px;padding:10px 13px;border:1px solid #d6dfeb;border-radius:12px;background:#fff;color:#162943}textarea{min-height:90px;resize:vertical}label{display:grid;gap:6px;color:#50617b;font-size:12px;font-weight:700}h1,h2,h3,p{margin:0}h1{font-size:29px;letter-spacing:-1px}h2{font-size:19px}small,.muted{color:#70829b}.small{font-size:12px}.muted{font-weight:400}a{color:#3178ee}.btn{border:0;border-radius:12px;background:#337df4;color:#fff;font-weight:700;padding:12px 17px;min-height:44px}.btn.ghost{background:#e9f0fb;color:#2a5cab}.btn.danger{background:#fef0f0;color:#a33737}.btn.outline{background:transparent;border:1px solid #cbdaee;color:#244c80}.btn.sm{min-height:34px;padding:6px 11px;font-size:12px}.btn.wide{width:100%}.card{background:#fff;border:1px solid #e3e9f2;border-radius:18px;padding:20px;box-shadow:0 6px 27px #253e6108}.row{display:flex;align-items:center;gap:12px}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.stack{display:grid;gap:13px}.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.gridFields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.pill{display:inline-flex;background:#edf4ff;border-radius:100px;padding:4px 9px;color:#315b91;font-size:12px;font-weight:700}.pill.green{background:#e5f8ee;color:#197b52}.pill.red{background:#fdecee;color:#a63948}.pill.amber{background:#fff4d8;color:#956b16}.stat{font-size:29px;font-weight:800;letter-spacing:-1px}.shell{min-height:100dvh;display:grid;grid-template-columns:245px minmax(0,1fr)}.side{background:#122d51;color:#d0e0f7;padding:30px 15px;display:flex;flex-direction:column;gap:23px}.brand{padding:0 15px;color:#fff;font-size:25px;font-weight:800;letter-spacing:-1px}.brand span{color:#77b7ff}.nav{display:grid;gap:5px}.nav button{background:transparent;color:#d0def3;border:0;text-align:left;padding:13px 15px;border-radius:12px;font-weight:650}.nav button.active,.nav button:hover{background:#234970;color:#fff}.side footer{margin-top:auto;padding:15px;font-size:12px}.content{padding:27px;max-width:1510px;width:100%;margin:0 auto;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:25px}.sectionTitle{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:24px 0 12px}.dataTable{width:100%;border-collapse:collapse;font-size:13px}.dataTable th{color:#6a7b91;font-size:11px;text-transform:uppercase;letter-spacing:.4px;text-align:left;padding:12px 10px;background:#f7f9fc}.dataTable td{padding:12px 10px;border-bottom:1px solid #eef1f7;vertical-align:middle}.tableWrap{overflow:auto}.actions{display:flex;gap:6px;flex-wrap:wrap}.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.filters input,.filters select{width:auto;min-width:180px}.metric{background:#fff;border:1px solid #e3e9f2;border-radius:16px;padding:18px;cursor:pointer;text-align:left}.metric.active{border-color:#397ef0;box-shadow:0 0 0 2px #397ef033}.metric b{display:block;font-size:26px;margin:7px 0}.progress{height:10px;background:#e8eef7;border-radius:9px;overflow:hidden}.progress span{display:block;height:100%;background:#3380fb;border-radius:9px}.progress.shifts span{background:#1ba27c}.loginPage{min-height:100dvh;display:grid;place-items:center;background:radial-gradient(circle at top left,#2e5d97,#102440 70%);padding:18px}.loginBox{width:min(440px,100%);background:#fff;border-radius:24px;padding:36px;box-shadow:0 20px 80px #00182966}.loginBox header{margin-bottom:25px}.loginBox header p{margin:12px 0}.headMobile{background:#122d51;color:#fff;padding:32px 22px 68px;border-radius:0 0 32px 32px}.headMobile h1{font-size:25px;margin-top:16px}.phoneMain{max-width:720px;margin:-42px auto 95px;padding:0 14px;position:relative}.phone{min-height:100dvh}.bottomNav{position:fixed;bottom:0;left:0;right:0;padding:9px 9px calc(9px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #d9e3f0;display:flex;justify-content:center;gap:6px;z-index:15}.bottomNav button{border:0;background:transparent;display:grid;gap:3px;place-items:center;color:#62758e;font-size:10px;min-width:63px;padding:5px}.bottomNav button.active{color:#3178ed}.bottomNav button .ico{font-size:22px}.bottomNav .scan{background:#337df4;border-radius:18px;color:#fff;min-height:65px;margin-top:-23px;padding:10px 15px}.phone .card{margin-bottom:14px}.phone h2{font-size:17px}.statusBanner{padding:17px;border-radius:16px;background:#eef5ff;margin:10px 0}.days{display:grid;gap:7px}.day{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;border-bottom:1px solid #eef0f5}.day:last-child{border:0}.day b{font-size:13px}.day span{font-size:12px;color:#6a7b90}.modalOverlay{position:fixed;inset:0;background:#101e36a9;display:grid;place-items:center;padding:15px;z-index:80}.dialog{background:#fff;width:min(550px,100%);padding:25px;border-radius:20px;max-height:90dvh;overflow:auto;box-shadow:0 25px 95px #0d19305c}.dialog header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.dialog header button{border:0;background:transparent;font-size:28px;color:#7587a3}.form{display:grid;gap:15px}.formActions{display:flex;gap:8px;margin-top:12px;justify-content:flex-end}.boot{display:flex;min-height:90dvh;align-items:center;justify-content:center;gap:10px;color:#6c84a4}.loader{width:22px;height:22px;border:3px solid #b7cbdf;border-top-color:#337df4;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#toast{position:fixed;z-index:180;top:15px;right:15px;max-width:min(400px,95vw)}.toast{padding:15px 20px;border-radius:13px;background:#193c60;color:#fff;box-shadow:0 8px 30px #2a456f48}.toast.error{background:#a42d45}.scanner{position:fixed;inset:0;z-index:90;background:#0c1d32;color:#fff;display:flex;flex-direction:column;gap:15px;padding:18px}.scanner video{width:100%;min-height:45vh;max-height:70vh;object-fit:cover;border-radius:18px}.scanner .btn{align-self:end}.qrImage{display:block;width:min(340px,100%);aspect-ratio:1;margin:15px auto;background:#fff;border-radius:10px}.kiosk{min-height:100dvh;background:#152e50;color:#fff;text-align:center;display:grid;place-items:center;padding:20px}.kiosk img{width:min(65vh,85vw);background:white;padding:16px;border-radius:22px}.kiosk h1{font-size:clamp(22px,4vw,44px)}.kiosk p{color:#a9c2e0;margin-top:16px}.installBanner{background:#e6f1ff;color:#1a4e83;border-radius:12px;padding:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}.hidden{display:none!important}
@media(max-width:850px){.shell{grid-template-columns:1fr}.side{padding:10px;gap:6px;position:sticky;top:0;z-index:10}.side .brand{font-size:19px}.side footer{display:none}.side .nav{display:flex;overflow:auto;max-width:100vw;gap:2px}.side .nav button{white-space:nowrap;padding:9px;font-size:12px}.content{padding:16px}.four{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:550px){.gridFields,.two,.three{grid-template-columns:1fr}.content{padding:12px}.four{grid-template-columns:repeat(2,minmax(0,1fr))}.loginBox{padding:24px}.filters input,.filters select{width:100%}.stat{font-size:24px}.tableWrap{overflow-x:auto}.dataTable{min-width:590px}}

/* HR employee card, encrypted staff attachments */
.hrHeading{font-size:15px;font-weight:800;color:#203d63;border-bottom:1px solid #dde7f3;padding:16px 0 8px;margin-top:8px}
.hrDocs{display:grid;gap:12px}.hrDocument{border:1px solid #dce5f0;border-radius:13px;padding:12px;background:#f8fbff}.hrDocument p{margin:6px 0}.hrDocument input[type=file]{width:100%;margin-top:9px;font-size:13px}.hrDocument .formActions{justify-content:flex-start;margin:6px 0}

/* HR workspace v4 */
.hrIntro{border:1px solid #dae6f8;background:linear-gradient(110deg,#eef5ff,#fff);padding:20px;border-radius:17px;display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:15px}.hrIntro b{font-size:17px}.hrIntro p{margin-top:7px}.hrCount{background:#dbeaff;color:#24508a;border-radius:999px;padding:7px 11px;white-space:nowrap;font-weight:700;font-size:12px}.hrRequestCard{border:1px solid #e1e8f3;border-radius:15px;padding:17px;background:#fff;display:grid;gap:10px}.hrRequestCard p{line-height:1.5}.hrRunList{display:grid;gap:7px;margin-top:12px}.hrRunItem{text-align:left;border:1px solid #e1e9f4;border-radius:12px;background:#f8fbff;padding:13px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#173657}.hrRunItem.chosen{background:#eaf2ff;border-color:#347cf1}.hrRunItem span{font-size:12px;color:#6a7f98}.hrVacationStats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.hrVacationStats div{border-radius:14px;background:#eef5ff;padding:13px;display:grid;gap:5px}.hrVacationStats strong{font-size:24px;color:#214e87}.hrVacationStats span{font-size:11px;color:#5a7497}.hrWarning{padding:14px 16px;border-left:3px solid #d29b2d;background:#fff9e8;border-radius:10px;color:#654917;line-height:1.5;font-size:12px}.nav{overflow-y:auto}.hrRequestCard .formActions{margin-top:2px}@media(max-width:600px){.hrIntro{align-items:start;flex-direction:column}.hrRunItem{align-items:flex-start;flex-direction:column}.hrRequestCard{padding:13px}}

/* HR v5: calm payroll workspace with clear money hierarchy */
.salaryHero{background:linear-gradient(130deg,#132e50,#215b8a 68%,#347de1);border-radius:20px;color:white;padding:23px 24px;margin-bottom:15px;display:flex;justify-content:space-between;align-items:center;min-height:135px;box-shadow:0 14px 35px #15365624}.salaryHero h2{font-size:24px;margin:7px 0}.salaryHero p{color:#bfd4eb;font-size:12px;line-height:1.5;max-width:290px}.salaryEyebrow{color:#9fc0ec;font-size:10px;font-weight:800;letter-spacing:1.8px}.salaryHeroIcon{font-size:42px;font-weight:800;background:#ffffff20;border-radius:22px;padding:9px 22px}.salarySlip{display:grid;gap:15px}.salaryBig{font-size:29px;font-weight:800;letter-spacing:-1px;color:#122b4b}.salaryBig small{font-size:11px;color:#7688a0;font-weight:500;letter-spacing:0;display:block}.salaryFacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px;background:#f5f8fc;border-radius:14px}.salaryFacts>div{display:grid;gap:6px}.salaryFacts span{color:#6f8095;font-size:11px}.salaryFacts b{font-size:14px}.salaryPayments{border-top:1px solid #edf0f6;padding-top:12px}.salaryPayments summary{color:#3478d0;cursor:pointer;font-size:13px;font-weight:700}.salaryPaymentRow{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #edf1f7}.salaryCompliance{border:1px solid #d9e7f3;background:#f4f8fd;color:#43627d;border-radius:13px;padding:13px;font-size:12px;line-height:1.55}.salaryFixed{border:1px solid #d8e5ee;border-radius:11px;padding:13px;background:#f5f8fc;color:#273d56}.bottomNav{gap:2px}.bottomNav button{min-width:0;flex:1;padding:6px 2px;font-size:10px}.bottomNav .scan{flex:0 0 59px}@media(max-width:380px){.bottomNav button{font-size:9px}.salaryHero{padding:19px}.salaryHeroIcon{font-size:32px}}

.payrollOverview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:15px 0}.payrollOverview>div{border:1px solid #deebf5;background:#fff;border-radius:17px;padding:20px;display:grid;gap:8px}.payrollOverview span{font-size:12px;color:#698099}.payrollOverview strong{font-size:25px;color:#17365c;letter-spacing:-.7px}.payrollOverview small{font-size:11px;color:#7388a0}@media(max-width:850px){.payrollOverview{grid-template-columns:1fr}}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #79a9ff!important;outline-offset:2px!important}
.absSearch:focus-within,.dirSearch:focus-within,.qrToolbar .searchInput:focus-within,.schedSearch:focus-within{border-color:#3979e8!important;box-shadow:0 0 0 3px #3979e824!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}