@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#202338;background:#f5f6fa;font-synthesis:none;--navy:#1b1f4d;--muted:#7b8095;--line:#e8eaf0;--blue:#4555d9;--orange:#fa8245}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,select{cursor:pointer}button{border:1px solid var(--line);background:white;color:#35394e;border-radius:9px;padding:11px 16px;font-weight:600}button:hover{filter:brightness(.97);border-color:#b8bfda}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:var(--navy);color:white;border-color:var(--navy)}button.orange{background:#ff874b;color:white;border:0}button.small{font-size:12px;padding:7px 11px}input,select,textarea{border:1px solid #dfe2eb;border-radius:8px;padding:11px;background:white;color:#30354b;max-width:100%}input:focus,select:focus,button:focus-visible{outline:2px solid #7483ed;outline-offset:2px}a{color:var(--blue)}.sidebar{width:238px;position:fixed;inset:0 auto 0 0;background:var(--navy);color:#a6aac6;padding:30px 20px;display:flex;flex-direction:column;z-index:5}.logo{width:176px;display:block}.product{font-family:Manrope,sans-serif;color:#fff;letter-spacing:5px;font-size:11px;margin:12px 0 40px 13px}.nav-label{font-size:10px;letter-spacing:2px;margin:12px 15px;color:#747ca6}.nav{display:grid;gap:6px}.nav button{display:flex;align-items:center;gap:13px;text-align:left;background:none;border:0;color:#b2b7d1;padding:13px 15px;font-weight:500}.nav button.active{background:#343962;color:#fff}.nav button.active:before{content:'';height:18px;width:3px;background:#48d5ef;border-radius:3px;position:absolute;left:20px}.nav svg{width:18px;height:18px}.sidebar-foot{margin-top:auto;font-size:12px;padding:18px 12px 0;border-top:1px solid #35395e}.sidebar-foot strong{display:block;color:#e0e4ff;margin:8px 0}.shell{margin-left:238px}.topbar{height:82px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 38px;gap:14px}.breadcrumb{font-size:13px;color:var(--muted)}.breadcrumb b{color:#3d4156;font-weight:500}.top-right{display:flex;gap:15px;align-items:center}.avatar{width:38px;height:38px;border-radius:50%;background:#e9eafe;color:#6265a4;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}.avatar.orange{background:#fff0e6;color:#c77843}.user{display:flex;align-items:center;gap:10px;font-size:12px}.user small{display:block;color:var(--muted);margin-top:3px}.content{max-width:1500px;margin:auto;padding:30px 38px}.demo{background:#ebedfa;border:1px solid #dfe2f7;border-radius:8px;padding:10px 14px;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:#5c648a;margin-bottom:24px}.demo select{padding:5px 8px;font-size:12px}.heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:27px}.eyebrow{text-transform:uppercase;letter-spacing:1.8px;color:#9095a7;font-size:10px;font-weight:700}.heading h1{font-family:Manrope,sans-serif;font-size:28px;letter-spacing:-1px;margin:8px 0}.heading p{color:var(--muted);font-size:13px;margin:0}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:23px}.stat{background:#fff;padding:22px;border:1px solid var(--line);border-radius:12px}.stat-top{display:flex;justify-content:space-between;align-items:center;color:#74798d;font-size:12px}.stat-icon{background:#f1f2fd;border-radius:9px;padding:9px;display:flex;color:#6972bd}.stat-icon svg{width:17px;height:17px}.stat strong{display:block;font-family:Manrope;font-size:29px;letter-spacing:-1px;margin:10px 0 8px}.stat small{font-size:11px;color:var(--muted)}.green{color:#239078!important}.grid{display:grid;grid-template-columns:1.7fr 1fr;gap:23px;margin-bottom:23px}.card{background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden}.card-head{display:flex;justify-content:space-between;align-items:center;padding:23px 24px 17px;gap:12px}.card-head h2{font-family:Manrope;font-size:15px;margin:0}.card-head p{font-size:11px;color:var(--muted);margin:6px 0 0}.text-btn{border:0;background:none;padding:0;color:var(--blue);font-size:12px}.card-body{padding:0 24px 23px}.payroll-card{background:var(--navy);color:white;position:relative}.payroll-card .eyebrow{color:#a3abc9}.payroll-card h2{font-family:Manrope;font-size:21px;margin:13px 0 10px}.payroll-card p{color:#acb3d1;font-size:12px;line-height:1.7;max-width:290px}.payroll-card .card-body{padding:26px}.payroll-card .amount{font-family:Manrope;font-size:31px;letter-spacing:-1px;margin:25px 0 5px}.payroll-card .bottom{display:flex;justify-content:space-between;align-items:center;margin-top:20px}.badge{display:inline-flex;align-items:center;border-radius:5px;padding:5px 8px;font-size:10px;font-weight:600;background:#edf8f3;color:#25816d;white-space:nowrap}.badge.warn{background:#fff2e5;color:#b57a30}.badge.red{background:#fcebec;color:#ba5b66}.badge.blue{background:#eeeefa;color:#6b6cb5}.badge.dark{background:#353b65;color:#d1d6ef}.chart{height:160px;display:flex;align-items:flex-end;gap:19px;padding:16px 8px 0}.bar-col{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:10px;font-size:10px;color:#8a90a5}.bar{width:100%;max-width:44px;background:#dce0fa;border-radius:5px 5px 0 0;position:relative;min-height:2px}.bar.current{background:#727de0}.bar span{position:absolute;top:-18px;text-align:center;width:100%;font-size:10px;color:#777f9e}.chart-legend{display:flex;gap:17px;font-size:10px;color:var(--muted);margin-top:23px}.dot{display:inline-block;width:7px;height:7px;background:#727de0;border-radius:50%;margin-right:5px}.list-row{display:flex;gap:12px;align-items:center;padding:15px 0;border-bottom:1px solid #f0f1f5}.list-row:last-child{border:0}.list-row .grow{flex:1}.list-row strong{font-size:12px;font-weight:600;display:block}.list-row small{display:block;font-size:11px;color:var(--muted);margin-top:5px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}th{background:#fafbfc;color:#8a8fa1;font-size:10px;letter-spacing:.7px;text-transform:uppercase;font-weight:600;padding:13px 23px;white-space:nowrap}td{border-bottom:1px solid #f0f1f5;padding:15px 23px;white-space:nowrap}tr:last-child td{border:0}.person{display:flex;gap:10px;align-items:center}.person strong{display:block;font-size:12px}.person small{color:var(--muted);font-size:10px;display:block;margin-top:4px}.person .avatar{width:32px;height:32px;font-size:10px}.footnote{padding:15px 24px;font-size:11px;color:var(--muted);border-top:1px solid var(--line)}.banner{background:#fff6ed;border:1px solid #f6e3cf;border-radius:10px;padding:17px 21px;margin-bottom:22px;display:flex;gap:15px;align-items:center;color:#98632e;font-size:12px;line-height:1.6}.banner strong{display:block;color:#75532f}.banner .grow{flex:1}.toolbar{padding:0 24px 18px;display:flex;gap:10px;justify-content:space-between}.toolbar input{width:260px;font-size:12px}.empty{padding:35px;text-align:center;color:var(--muted);font-size:13px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{display:flex;flex-direction:column;gap:7px;font-size:12px;color:#60667a}.field.full{grid-column:1/-1}dialog{width:min(560px,94vw);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:0 30px 100px #11153840;color:#30354b}dialog::backdrop{background:#11163070;backdrop-filter:blur(3px)}dialog h2{font-family:Manrope;margin:0 0 10px;font-size:21px}dialog p{font-size:12px;line-height:1.7;color:var(--muted)}dialog .actions{margin-top:24px;justify-content:flex-end}.close{float:right;border:0;padding:0;font-size:22px}.error{color:#bc435a;font-size:12px}.login{min-height:100vh;display:grid;place-items:center;background:var(--navy)}.login .card{width:400px;max-width:94vw;padding:32px}.login .logo{background:var(--navy);padding:12px;border-radius:8px;width:210px;margin-bottom:25px}.login form{display:grid;gap:16px}.timeline{padding:0 24px 22px}.timeline-row{display:flex;gap:12px;padding:12px 0;font-size:12px}.timeline-row small{color:var(--muted);display:block;margin-top:5px}.timeline-mark{width:9px;height:9px;border-radius:50%;background:#a3aae4;margin-top:3px}.settings{padding:24px;max-width:720px}.settings h3{font-family:Manrope;font-size:15px;margin:0 0 8px}.settings p{font-size:12px;color:var(--muted);line-height:1.7;margin-bottom:25px}.policy{margin:20px 0;padding:18px;background:#f6f7fb;border-radius:9px;font-size:12px;line-height:1.8;color:#656d87}.mobile-menu{display:none}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#20264e;color:white;border-radius:10px;padding:14px 24px;font-size:13px;box-shadow:0 8px 40px #1113;z-index:50;display:none}.slip{padding:25px;font-size:13px}.slip h1{font-family:Manrope}.slip table{margin-top:20px}.slip .total{font-size:23px;color:var(--navy);margin-top:20px;text-align:right}.slip .logo{background:var(--navy);padding:10px;width:180px}@media(max-width:1150px){.sidebar{width:205px;padding:25px 15px}.shell{margin-left:205px}.content{padding:25px}.topbar{padding:0 25px}.grid{grid-template-columns:1.3fr 1fr}.stats{gap:12px}.stat{padding:17px}.stat strong{font-size:25px}.heading h1{font-size:25px}}@media(max-width:850px){.sidebar{display:none}.sidebar.open{display:flex;width:238px;box-shadow:0 0 0 100vmax #1115}.shell{margin-left:0}.mobile-menu{display:block}.grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.topbar{padding:0 18px;height:70px}.content{padding:20px 16px}.heading{align-items:flex-start}.heading .actions{justify-content:flex-end}.top-right .user{display:none}.form-grid{grid-template-columns:1fr}.demo{align-items:flex-start}.breadcrumb{display:none}}@media print{body>*{display:none!important}dialog[open]{display:block!important;position:static;width:100%;max-height:none;border:0;box-shadow:none}dialog .actions,dialog .close{display:none}.slip{padding:0}}
.banner svg{width:23px;height:23px;flex-shrink:0}.banner>span{display:flex}

.permission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.permission-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px;border:1px solid #e4e8ef;border-radius:12px;font-size:13px}.permission-row input{width:22px;height:22px;accent-color:#087e91;flex-shrink:0}[hidden]{display:none!important}

.notice{padding:22px;display:flex;gap:16px;align-items:center;border-bottom:1px solid #e8eaf0}.notice.unread{background:#f0f8fc}.notice p{font-size:13px;color:#68738b;margin:8px 0}.notice small{color:#8790a4}.notice-dot{width:8px;height:8px;border-radius:50%;background:#bdc5d3}.unread .notice-dot{background:#00a6c8}.request-message{white-space:pre-wrap;overflow-wrap:anywhere}.sidebar{overflow-y:auto}.sidebar-foot{padding-bottom:15px}@media(max-width:650px){.notice{flex-wrap:wrap}.topbar{padding:12px}.top-right{gap:6px}}

.payslip-dialog{width:min(760px,95vw);max-width:760px}.professional-slip{padding:18px 10px;color:#20264a}.slip-brand{display:flex;align-items:center;justify-content:space-between}.slip-brand img{width:180px}.slip-brand h2{margin:0 0 6px}.slip-brand>div{text-align:right}.slip-period,.slip-net{background:#1b1f4d;color:white;padding:18px;display:flex;justify-content:space-between;margin:24px 0}.slip-period{font-size:12px}.slip-details{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:10px 0 26px}.slip-details strong{display:block;margin-top:8px;overflow-wrap:anywhere}.slip-details small,.slip-days small{color:#6a7287;font-size:10px}.slip-days{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;background:#f2f6fa;padding:18px;margin-bottom:24px}.slip-days strong{display:block;font-size:20px;margin-top:8px}.professional-slip td:last-child,.professional-slip th:last-child{text-align:right}.professional-slip td{white-space:normal}.slip-net{align-items:center}.slip-net strong{font-size:28px}.slip-note{font-size:10px!important;line-height:1.8}.professional-slip p{font-size:12px;color:#68738b}@media print{.payslip-dialog{width:100%;max-width:none;position:absolute;inset:0;margin:0;border:0;padding:18px;max-height:none;overflow:visible}.slip-period,.slip-net{-webkit-print-color-adjust:exact;print-color-adjust:exact}.professional-slip{break-inside:avoid}}

.leave-tag{display:inline-block;border-radius:6px;padding:4px 7px;font-size:10px;font-weight:600;line-height:1.5}.sick{background:#ffe4e6;color:#9f1239}.casual{background:#dbeafe;color:#1e40af}.adjustment{background:#ede9fe;color:#5b21b6}.earned{background:#dcfce7;color:#166534}.other{background:#ffedd5;color:#9a3412}.paid{background:#ccfbf1;color:#115e59}.unpaid{background:#fee2e2;color:#991b1b}.weekly{background:#e5e7eb;color:#374151}.holiday{background:#fef3c7;color:#92400e}.calendar-legend{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.calendar-scroll{overflow-x:auto}.leave-calendar{display:grid;grid-template-columns:repeat(7,minmax(125px,1fr));min-width:875px}.calendar-weekday{padding:15px;background:#1b1f4d;color:white;text-align:center;font-size:12px}.calendar-day{min-height:145px;padding:10px;border-right:1px solid #e8eaf0;border-bottom:1px solid #e8eaf0;display:flex;flex-direction:column;gap:7px}.calendar-day>strong{font-size:12px}.calendar-day.today>strong{color:#fff;background:#1b1f4d;padding:4px 8px;border-radius:5px;align-self:flex-start}.empty-day{background:#fafbfc}.calendar-event{display:block;width:100%;text-align:left;padding:8px;border:1px solid transparent;line-height:1.5;white-space:normal}.calendar-event b,.calendar-event span,.calendar-event small{display:block;font-size:10px;overflow-wrap:anywhere}.pending-event{border:1px dashed currentColor!important}.worked-date{display:block;margin-top:6px;color:#6b7280}.demo{flex-wrap:wrap}