:root{--nav:#0c292b;--nav2:#123638;--primary:#08756f;--teal:#16a39a;--blue:#3977d5;--amber:#e3a22f;--violet:#7c60d5;--red:#d84c4c;--ink:#193435;--muted:#708284;--bg:#f1f5f4;--line:#dfe8e6;--white:#fff;--shadow:0 12px 34px rgba(18,55,55,.08)}*{box-sizing:border-box}html{font-size:16px}body{margin:0;font:15px/1.55 Inter,"Segoe UI",Arial;color:var(--ink);background:var(--bg)}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}.portal aside{position:fixed;z-index:50;inset:0 auto 0 0;width:250px;background:linear-gradient(180deg,var(--nav),#0a2021);color:#d8e7e5;padding:24px 17px;overflow:auto}.portal-brand{display:flex;align-items:center;gap:12px;padding:0 8px 23px;border-bottom:1px solid #ffffff15}.portal-brand>span,.portal-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#30beb4,#08756f);color:#fff;font-weight:900}.portal-brand div{display:grid}.portal-brand b{color:#fff;font-size:18px}.portal-brand small{font-size:11px;color:#8bb4b1;letter-spacing:1px}.portal aside nav{display:grid;gap:2px;margin-top:20px}.portal aside nav a{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:9px;color:#c2d5d3}.portal aside nav a:hover{background:#ffffff12;color:#fff}.portal aside nav a:first-child{background:#18a39925;color:#70e3da}.portal aside nav a:not(:first-child)::first-letter{color:#6dcbc4}.portal-top{position:fixed;z-index:40;left:250px;right:0;top:0;height:70px;background:#ffffffee;backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 32px}.portal-top button{display:none}.top-search{flex:1;color:var(--muted)}.top-user{display:flex;align-items:center;gap:20px}.top-user>span{display:grid;text-align:right}.top-user small{color:var(--muted);text-transform:capitalize}.top-user a{padding:8px 13px;background:#edf3f2;border-radius:7px;color:var(--primary)}.portal-main{margin-left:250px;padding:104px 35px 50px;max-width:1600px}.portal-login .portal-main{padding:0;margin:0;max-width:none}.portal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:28px}.portal-head>div>small,.eyebrow{font-weight:800;letter-spacing:2px;color:var(--primary);font-size:12px}.portal-head h1{font-size:34px;line-height:1.15;margin:6px 0}.portal-head p{margin:0;color:var(--muted)}.primary-btn,.secondary-btn,.portal-form button{border:0;padding:11px 17px;border-radius:8px;background:var(--primary);color:#fff;font-weight:750;cursor:pointer;display:inline-block}.secondary-btn{background:#e8efee;color:var(--ink)}.panel{background:var(--white);border:1px solid #e0e9e7;border-radius:14px;padding:24px;box-shadow:var(--shadow)}.panel h2{margin-top:0}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:22px}.metric{position:relative;overflow:hidden;border-radius:14px;padding:22px;color:#fff;min-height:130px;display:grid}.metric span{opacity:.85}.metric b{font-size:34px;line-height:1}.metric b small{font-size:13px;font-weight:500}.metric>i{position:absolute;right:18px;bottom:5px;font-style:normal;font-size:65px;opacity:.16}.metric.teal{background:linear-gradient(135deg,#0d8d86,#19afa5)}.metric.blue{background:linear-gradient(135deg,#316bc5,#5b91e2)}.metric.amber{background:linear-gradient(135deg,#c98b20,#eeb64e)}.metric.violet{background:linear-gradient(135deg,#6750b9,#9174e7)}.dash-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;margin-bottom:22px}.panel-title{display:flex;justify-content:space-between;align-items:start;margin-bottom:20px}.panel-title h2{margin:0}.panel-title small{color:var(--muted)}.panel-title a,.attendance-card>a{color:var(--primary);font-weight:700}.status{display:inline-flex;width:max-content;padding:5px 10px;border-radius:20px;background:#eef2f1;font-size:12px;text-transform:capitalize}.status.green{background:#dff5eb;color:#19714f}.status.amber{background:#fff0cf;color:#936111}.status.red{background:#ffe2e2;color:#a63232}.status.blue{background:#e1edff;color:#3264a7}.status.gray{background:#edf0f0;color:#6c7777}.timeline{display:flex;align-items:center;margin:30px 0}.timeline>div{display:grid}.timeline span{font-size:12px;color:var(--muted)}.timeline b{font-size:26px}.timeline>i{height:2px;flex:1;background:linear-gradient(90deg,var(--teal),#dbe5e3);margin:0 20px}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.quick-grid a{display:grid;place-items:center;gap:7px;background:#f3f7f6;border-radius:10px;padding:14px;text-align:center;font-size:13px}.quick-grid i{font-style:normal;color:var(--primary);font-size:23px}.list-row,.announcement-row,.request-card,.approval{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;padding:13px 0;border-bottom:1px solid #edf1f0}.list-row>div,.announcement-row>div{display:grid}.list-row small,.announcement-row small,.request-card small{color:var(--muted)}.announcement-row{justify-content:flex-start}.priority{width:9px;height:9px;border-radius:50%;background:#7ea5a1;margin-top:7px;flex:0 0 auto}.priority.important{background:var(--amber)}.priority.urgent{background:var(--red)}.empty{text-align:center;color:var(--muted);padding:45px}.employee-login{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr;background:#fff}.login-story{background:linear-gradient(135deg,rgba(7,45,47,.94),rgba(7,100,96,.88)),radial-gradient(circle at 75% 25%,#38beb2,#0c292b 55%);color:#fff;padding:55px 7vw;display:flex;flex-direction:column;justify-content:space-between}.public-link{color:#a9d9d5}.login-story h1{font-size:clamp(44px,6vw,78px);line-height:1.02;letter-spacing:-3px;max-width:780px;margin:20px 0}.login-story p{font-size:18px;color:#d3e9e7;max-width:650px}.login-points{display:flex;gap:20px;flex-wrap:wrap;margin-top:30px;color:#bce2df}.employee-login-form{align-self:center;width:min(430px,calc(100% - 50px));margin:auto;display:grid;gap:17px}.employee-login-form h2{font-size:32px;margin:10px 0 0}.employee-login-form>p{color:var(--muted);margin:0 0 15px}.employee-login-form label,.portal-form label{display:grid;gap:7px;font-weight:650}.employee-login-form input,.portal-form input,.portal-form textarea,.portal-form select,.directory-search input{width:100%;border:1px solid #cfddda;border-radius:8px;padding:12px;background:#fff}.employee-login-form button{border:0;border-radius:8px;padding:13px;background:var(--primary);color:#fff;font-weight:800}.employee-login-form>a{text-align:center;color:var(--primary)}.login-demo{background:#eef7f6;padding:10px;border-radius:7px;font-size:12px;color:var(--muted)}.alert{padding:12px;border-radius:7px}.alert.danger{background:#ffe5e5;color:#9a3030}.profile-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:22px}.profile-card{text-align:center}.avatar{width:95px;height:95px;border-radius:30px;background:linear-gradient(135deg,#1aa59c,#08756f);color:#fff;display:grid;place-items:center;font-size:40px;font-weight:800;margin:0 auto 18px}.avatar.small{width:55px;height:55px;border-radius:17px;font-size:22px;margin:0}.profile-card h2{margin-bottom:4px}.profile-card>p{color:var(--muted)}.profile-meta{display:grid;text-align:left;margin-top:25px}.profile-meta span{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:12px 0}.portal-form{display:grid;gap:15px}.portal-form textarea{min-height:100px;resize:vertical}.portal-form button{justify-self:start}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}.module-grid{display:grid;grid-template-columns:minmax(320px,.75fr) 1.25fr;gap:22px}.clock-actions{display:flex;gap:8px}.month-visual{height:160px;display:flex;align-items:flex-end;gap:12px}.month-visual>div{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}.month-visual i{width:100%;max-width:28px;border-radius:5px;background:#b9d4d1}.month-visual i.present{background:var(--teal)}.month-visual i.late{background:var(--amber)}.table-panel{overflow:auto;margin-top:22px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:12px;color:var(--muted);letter-spacing:.7px;text-transform:uppercase}.request-card>div{display:grid;flex:1}.request-card p{margin:6px 0;color:var(--muted)}.payslip-grid,.training-grid,.review-grid,.survey-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.payslip{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px}.payslip-period{width:80px;height:80px;border-radius:17px;background:#e7f5f3;display:grid;place-items:center;color:var(--primary)}.payslip-period b{margin-top:-15px}.payslip h2{margin:4px 0}.feed{display:grid;gap:16px}.announcement{display:flex;gap:18px}.announcement h2{margin:5px 0}.announcement .priority{height:auto;border-radius:5px;margin:0}.document-grid,.people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.document{display:grid;grid-template-columns:auto 1fr;gap:15px}.document>a{grid-column:1/-1;color:var(--primary);font-weight:700}.doc-icon{width:55px;height:65px;display:grid;place-items:center;background:#ffe7e3;color:#a64239;border-radius:8px;font-weight:900}.training-card{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:start}.training-date{width:65px;height:75px;background:#e8f6f4;border-radius:12px;display:grid;place-items:center;color:var(--primary)}.training-date b{font-size:27px}.training-date span{font-size:11px;margin-top:-10px}.review{display:grid;grid-template-columns:auto 1fr;gap:25px}.score-ring{width:115px;height:115px;border-radius:50%;background:conic-gradient(var(--teal) calc(var(--score)*1%),#e6edec 0);display:grid;place-content:center;text-align:center;position:relative}.score-ring:after{content:"";position:absolute;inset:10px;border-radius:50%;background:#fff}.score-ring>*{position:relative;z-index:1}.score-ring b{font-size:25px}.score-bars{display:grid;gap:12px}.score-bars span{display:grid;grid-template-columns:75px 1fr 35px;gap:10px;align-items:center}.score-bars i{height:8px;background:var(--teal);border-radius:5px}.directory-search{display:flex}.directory-search input{min-width:280px}.directory-search button{border:0;background:var(--primary);color:#fff;padding:0 16px}.person{display:flex;align-items:center;gap:14px}.person h3,.person p{margin:0}.person p,.person small{color:var(--muted)}.approval>div:last-child{display:flex;gap:7px}.approve,.reject{padding:7px 10px;border-radius:6px;background:#dff5eb;color:#19714f}.reject{background:#ffe2e2;color:#a63232}.tabs{display:flex;gap:5px}.tabs a{padding:9px 13px;background:#fff;border:1px solid var(--line);border-radius:7px}.hr-grid{grid-template-columns:.8fr 1.2fr}.narrow{max-width:760px}
@media(max-width:1100px){.portal aside{width:82px}.portal-brand div,.portal aside nav span{display:none}.portal-brand{justify-content:center}.portal aside nav a{justify-content:center;font-size:21px}.portal-top{left:82px}.portal-main{margin-left:82px}.metric-grid{grid-template-columns:repeat(2,1fr)}.document-grid,.people-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.portal aside{transform:translateX(-100%);width:255px;transition:.3s}.portal aside.open{transform:translateX(0)}.portal aside nav span,.portal-brand div{display:grid}.portal aside nav a{justify-content:flex-start;font-size:15px}.portal-top{left:0;padding:0 15px}.portal-top button{display:block;border:0;background:transparent;font-size:23px;margin-right:15px}.top-search{display:none}.top-user{margin-left:auto}.top-user>span{display:none}.portal-main{margin:0;padding:92px 15px 35px}.portal-head{align-items:flex-start;flex-direction:column}.portal-head h1{font-size:29px}.metric-grid,.dash-grid,.profile-grid,.module-grid,.payslip-grid,.training-grid,.review-grid,.survey-grid,.document-grid,.people-grid{grid-template-columns:1fr}.quick-grid{grid-template-columns:repeat(3,1fr)}.form-row{grid-template-columns:1fr}.payslip,.training-card,.review{grid-template-columns:1fr}.employee-login{grid-template-columns:1fr}.login-story{min-height:42vh;padding:35px 25px}.login-story h1{font-size:42px;letter-spacing:-1px}.login-story p,.login-points{display:none}.employee-login-form{padding:38px 0}.clock-actions{width:100%}.clock-actions button{flex:1}.tabs{overflow:auto;width:100%}.top-user a{font-size:13px}}