:root{font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#171820;background:#f5f6f9;font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}.shell{width:min(100%,460px);min-height:100dvh;margin:auto;background:#fff;padding:22px 22px 98px;box-shadow:0 3px 35px #19203612;position:relative}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.brand{display:flex;align-items:center;gap:12px}.brandmark{background:#ecebfd;border-radius:12px;width:43px;height:43px;display:grid;place-items:center;font-size:28px}.brand strong{display:block;font-size:18px}.brand small{display:block;color:#717994;font-size:12px;margin-top:3px}.headtools{display:flex;align-items:center;gap:16px}.iconbtn{background:none;border:0;font-size:23px;cursor:pointer}.welcome{margin-bottom:22px}.welcome h1{font-size:24px;line-height:1.22;margin:0 0 8px;font-weight:720;letter-spacing:-.6px}.welcome p{font-size:13px;color:#778199;margin:0}.shift{border-radius:14px;background:#efedfc;padding:18px;margin-bottom:22px}.hint{font-size:13px;color:#777e95}.shift h2{font-size:24px;margin:10px 0 22px;letter-spacing:-.2px}.shift p{font-size:13px;margin:14px 0 0;display:flex;gap:12px;align-items:center}.green-text{color:#00a650!important}.attendance{text-align:center}.attendance>.hint{margin:0 0 5px}.attendance h3{font-size:18px;margin:0 0 18px;display:flex;justify-content:center;align-items:center;gap:9px}.statusdot{border-radius:100%;height:14px;width:14px;background:#767676;display:inline-block}.statusdot.checked{background:#03aa5b}.btn{width:100%;border:0;border-radius:99px;font-size:16px;font-weight:700;padding:16px 12px;cursor:pointer;transition:opacity .2s}.btn:disabled{cursor:not-allowed;opacity:.78}.btn.green,.green{background:#00af59;color:#fff}.btn.redbtn,.redbtn{background:#ef3037;color:#fff}.btn.blue,.blue{background:#d6e5ff;color:#0560ec}.btn.orangebtn,.orangebtn{background:#ffe5d2;color:#ed5b00}.btn.disabled{background:#9ca0ab;color:white;opacity:1}.btnicon{font-size:22px;margin-right:8px}.or{display:flex;align-items:center;gap:14px;margin:12px 0;color:#6c7592;font-size:13px}.or:before,.or:after{content:"";height:1px;background:#c5cfe3;flex:1}.note{font-size:13px;margin:12px 0 0;font-weight:600}.orange{color:#f47a00}.red{color:#e8313c}.shortcuts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:38px}.shortcuts a{border:1px solid #e3e4e9;border-radius:10px;min-height:81px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:8px;font-size:12px;font-weight:650}.shortcuts span{font-size:25px}.foot{border-top:1px solid #e6e7ec;display:flex;justify-content:space-around;padding:17px 0 12px;background:white;position:absolute;bottom:0;left:22px;right:22px}.foot a{font-size:11px;text-align:center;color:#777d90;display:grid;gap:4px}.foot a span{font-size:22px}.foot a.selected{color:#0b0f1c;font-weight:750}.panel{border:1px solid #e7e8ee;border-radius:12px;padding:14px;margin:15px 0}.form{display:grid;gap:14px;text-align:left}.form label{display:grid;gap:6px;color:#515a6b;font-size:13px;font-weight:650}input,select,textarea{border:1px solid #d8dce6;padding:12px;border-radius:9px;max-width:100%;width:100%;font:inherit;color:#202435;background:white}.popform{margin-top:12px;border:1px solid #dbe4f5;padding:12px;border-radius:14px}.line{padding:13px 0;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between;gap:12px}.line:last-child{border-bottom:none}.line b{font-size:13px}.line small{display:block;color:#777;font-size:11px;margin-top:5px}.tag{font-size:11px;color:#4a5870;background:#f0f2f7;border-radius:30px;padding:6px 10px;white-space:nowrap}.tag.approved{color:#0a9d4c;background:#ddfae9}.tag.rejected{color:#d22636;background:#ffeded}.flash{padding:13px;border-radius:8px;margin:12px 0;background:#e7f8ed;color:#08783a;font-size:13px}.flash.error{background:#fff0ef;color:#c72530}.muted{color:#7a8193;font-size:13px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.metrics>div{background:#f3f3fb;padding:14px;border-radius:10px}.metrics small{font-size:10px;color:#636e80}.metrics h2{margin:8px 0;font-size:24px}.adminnav{display:flex;overflow-x:auto;gap:8px;padding:15px 0}.adminnav a{white-space:nowrap;background:#edf0fc;border-radius:30px;padding:9px 13px;color:#4056ad;font-size:12px}.actions{display:flex;gap:5px}.sm{padding:8px;border:none;border-radius:8px;background:#ddd;font-size:11px;cursor:pointer}.mini{display:flex;gap:5px;margin-bottom:16px}.mini select{font-size:12px;padding:8px}.mini button{white-space:nowrap}h3{font-size:16px}button:focus-visible,a:focus-visible{outline:3px solid #5068ee;outline-offset:3px}[hidden]{display:none!important}@media(min-width:850px){.shell{max-width:1080px;padding:34px 48px 100px}.welcome h1{font-size:28px}.shift{max-width:550px}.attendance{max-width:550px}.shortcuts{max-width:550px}.foot{position:static;margin-top:60px}.form{max-width:560px}}


/* HRDesk v0.2 responsive desktop layout — preserves existing mobile attendance behavior */
.desktop-sidebar{display:none}.app-frame{min-height:100dvh}.brandmark{font-weight:800;color:#4e49bf;font-size:23px}.header-profile{display:none}.header-admin span{display:none}.page-content{min-width:0}
@media(min-width:900px){
 body{background:#f5f6fa}.app-frame{display:grid;grid-template-columns:242px minmax(0,1fr);max-width:1760px;margin:0 auto;min-height:100dvh;box-shadow:0 0 35px #18213c08}
 .desktop-sidebar{display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;background:#fff;border-right:1px solid #e9eaf0;padding:26px 14px 18px;overflow-y:auto}
 .desktop-brand{display:flex;gap:10px;align-items:center;margin:0 9px 34px}.desktop-brand-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:12px;background:#eeecff;color:#4f46b8;font-size:25px;font-weight:800}.desktop-brand strong,.desktop-brand small{display:block}.desktop-brand strong{font-size:20px;letter-spacing:-.5px}.desktop-brand small{font-size:11px;color:#8a90a0;margin-top:3px}
 .sidebar-label{font-size:10px;letter-spacing:1.2px;font-weight:800;color:#9ba0b0;margin:0 14px 12px}.sidebar-label.inner{margin-top:25px}
 .desktop-nav{display:flex;flex-direction:column;gap:4px}.desktop-nav a{display:flex;gap:13px;align-items:center;padding:12px 14px;font-size:13px;font-weight:600;color:#596275;border-radius:10px}.desktop-nav a:hover{background:#f4f3fe;color:#4f46b8}.desktop-nav a.active{background:#efedff;color:#4943b6}.navicon{width:20px;text-align:center;font-size:20px;line-height:1}
 .sidebar-bottom{margin-top:auto;border-top:1px solid #e9eaf0;padding:18px 10px 0;display:flex;gap:11px;align-items:center}.sidebar-avatar,.header-avatar{border-radius:50%;background:#e9e7fe;color:#4943b6;font-weight:800;display:grid;place-items:center}.sidebar-avatar{width:36px;height:36px}.sidebar-user{min-width:0}.sidebar-user strong,.sidebar-user small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-user strong{font-size:12px}.sidebar-user small{font-size:11px;color:#7c8292;margin-top:4px}
 .shell.authenticated{width:auto;max-width:none;min-height:100dvh;margin:0;padding:0 36px 54px;background:#f7f8fb;box-shadow:none}.shell.unauthenticated{grid-column:1/-1}
 .top{height:86px;background:#fff;margin:0 -36px 32px;padding:0 36px;border-bottom:1px solid #e8eaf0}.top .brand{display:none}.headtools{margin-left:auto}.header-profile{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:650}.header-avatar{width:30px;height:30px}.header-admin{background:#efedff;padding:9px 13px;border-radius:9px;color:#4943b6;font-size:12px;font-weight:700}.header-admin span{display:inline}.page-content{max-width:1400px;margin:0 auto}
 .welcome{margin-bottom:24px}.welcome h1{font-size:29px}.welcome p{font-size:13px}
 .employee-dashboard-grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(360px,1.1fr);gap:24px;align-items:stretch}.shift,.attendance{max-width:none!important;width:100%;margin:0!important;background:#fff;border:1px solid #e7e9f0;border-radius:14px;padding:27px;box-shadow:0 2px 12px #25294c05}.shift{background:#eeedfc}.shift h2{font-size:31px;margin:18px 0 35px}.attendance{text-align:left}.attendance h3{justify-content:flex-start}.attendance>.hint{text-align:left}.attendance .btn{max-width:520px}.attendance .or{max-width:520px}.attendance .note{max-width:520px}.shortcuts{max-width:none!important;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:24px}.shortcuts a{background:#fff;min-height:110px;font-size:13px;border-radius:13px}
 .foot{display:none}.metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.metrics>div{padding:22px;background:#fff;border:1px solid #e7e9f0;border-radius:14px}.metrics small{font-size:12px}.metrics h2{font-size:30px}
 .adminnav{gap:10px;padding:19px 0 24px}.adminnav a{padding:10px 15px;background:#fff;border:1px solid #e6e8f0;border-radius:9px}.admin-main-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:22px;align-items:start}.admin-main-grid section{min-width:0}.admin-main-grid h3{margin:5px 0 13px}.panel{background:#fff;border-radius:13px;margin:0 0 22px;padding:18px}.line{gap:16px}.line b{font-size:13px}.actions{flex-wrap:wrap}.sm{padding:9px 12px}.form{max-width:800px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:16px}.form label:has(textarea){grid-column:1/-1}.form>.btn{grid-column:1/-1;max-width:340px}.admin-preapprove-section .form{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:900px) and (max-width:1120px){.app-frame{grid-template-columns:205px minmax(0,1fr)}.shell.authenticated{padding-left:22px;padding-right:22px}.top{margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px}.employee-dashboard-grid{grid-template-columns:1fr}.admin-main-grid{grid-template-columns:1fr}}
@media(min-width:900px){.shell.authenticated .foot{display:none}}
@media(max-width:899px){.desktop-sidebar{display:none!important}.shell{max-width:460px}.header-admin{font-size:20px}.top .brandmark{font-size:23px}}

/* HRDesk v0.3 emerald identity: functional colors remain distinct. */
:root{--hr-green:#15803d;--hr-green-dark:#166534;--hr-green-soft:#eff8f0;--hr-teal:#0f766e;--hr-site:#2563eb;--hr-navy:#1e3a8a;--hr-orange:#ea8a17;--hr-danger:#dc2626;--hr-neutral:#9ca3af;color:#1c2c23;background:#f5f8f5}
body{background:#f5f8f5}.brandmark,.desktop-brand-icon,.sidebar-avatar,.header-avatar{background:#e5f5e9!important;color:#15803d!important}
.shift{background:#eff8f0}.btn.green,.green{background:#15803d;color:#fff}.btn.tealbtn{background:#0f766e;color:#fff}.btn.redbtn,.redbtn{background:#dc2626;color:#fff}.btn.site-blue{background:#2563eb;color:#fff}.btn.site-navy{background:#1e3a8a;color:#fff}.btn.site-darkred{background:#991b1b;color:#fff}.btn.orangebtn,.orangebtn{background:#ea8a17;color:#fff}.btn.disabled,.btn:disabled{background:#9ca3af!important;color:#fff!important;cursor:not-allowed;opacity:1}
.green-text{color:#15803d!important}.orange{color:#b45309}.red{color:#dc2626}.statusdot.checked{background:#15803d}
.timing-alert{font-size:13px;font-weight:700;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:9px;padding:10px 14px;margin:0 0 13px}
.shortcuts a:hover,.shortcuts a:focus-visible{border-color:#15803d;color:#166534}
.foot a.selected{color:#15803d}.metrics>div{background:#eff8f0}.adminnav a{color:#166534;background:#eff8f0}.tag.approved{color:#166534;background:#dcfce7}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #16a34a;outline-offset:2px}
@media(min-width:900px){body{background:#f5f8f5}.desktop-sidebar{border-right-color:#dfece2}.desktop-nav a.active{background:#e6f5ea;color:#166534}.desktop-nav a:hover{background:#f0faf2;color:#15803d}.header-admin{background:#e6f5ea;color:#166534}.shell.authenticated{background:#f7faf7}.shift{background:#eff8f0}.adminnav a{background:#fff;color:#166534;border-color:#dce9df}}