@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{--ink:#173039;--muted:#74858b;--green:#177c71;--deep:#112d32;--lime:#c9e8af;--cream:#f5f7f4;--line:#e6ebe8;--white:#fff;--orange:#f6a565;--shadow:0 16px 40px rgba(27,55,52,.045)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.app-shell{min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr)}.sidebar{height:100vh;position:sticky;top:0;background:#102e32;color:#e6f2ed;display:flex;flex-direction:column;padding:26px 14px 18px;z-index:20}.brand{display:flex;align-items:center;gap:11px;padding:4px 15px 31px;letter-spacing:.09em}.brand-mark{display:grid;place-items:center;background:#d6ecb9;border-radius:13px;width:37px;height:37px;color:#173d38;font:800 22px Manrope}.brand-dot{color:#16826f}.brand strong{font:800 13px Manrope;display:block}.brand small{font:700 10px Manrope;letter-spacing:.22em;color:#b2d5c8}.brand em{font-style:normal;color:#c9e8af}.workspace-chip{display:flex;align-items:center;gap:10px;border:1px solid #345257;background:#1a3a3e;border-radius:12px;padding:10px;margin:0 7px 30px}.workspace-icon{background:#afcfab;color:#153d37;width:31px;height:31px;border-radius:8px;display:grid;place-items:center;font-weight:800}.workspace-chip strong,.workspace-chip small{display:block;font-size:11px}.workspace-chip small{color:#9eb7b5;margin-top:3px}.chevron{margin-left:auto;color:#9eb7b5}.nav-label{font-size:10px;letter-spacing:.17em;color:#718f90;padding:0 15px 11px;font-weight:700}#main-nav{display:grid;gap:3px}.nav-link{border:0;background:transparent;color:#adcbca;padding:11px 14px;border-radius:9px;text-align:left;display:flex;align-items:center;gap:12px;width:100%;font-size:13px;font-weight:600}.nav-link:hover,.nav-link.active{background:#28504e;color:#fff}.nav-link.active:before{content:'';position:absolute;left:0;width:3px;height:21px;background:#c8e5ad;border-radius:0 4px 4px 0}.nav-icon{font-size:17px;line-height:1;width:20px;text-align:center;font-weight:400}.nav-link .nav-count{margin-left:auto;background:#dceebd;color:#234d3f;border-radius:5px;font-size:10px;padding:1px 6px}.sidebar-bottom{margin-top:auto}.roadmap-mini{display:flex;align-items:flex-start;gap:10px;margin:10px 7px 20px;padding:15px;background:#1b4040;border:1px solid #325758;border-radius:11px;font-size:11px;line-height:1.6;color:#aac7c2}.roadmap-mini strong{color:#e2f4cc}.pulse{width:7px;height:7px;border-radius:50%;background:#bce4aa;box-shadow:0 0 0 4px #3c6758;margin-top:5px}.side-link{background:none;border:0;color:#8eaaa9;font-size:12px;margin-left:12px}.main-shell{min-width:0}.topbar{height:74px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 42px}.breadcrumb{font-size:12px;color:#96a6a8}.breadcrumb span{margin:0 8px;color:#c8d0d0}.breadcrumb b{color:#435a5e;font-weight:600}.top-actions{display:flex;align-items:center;gap:20px}.demo-pill{border:1px solid #dbeade;background:#f3faf2;border-radius:20px;color:#54866d;padding:7px 11px;font-size:11px;font-weight:700}.demo-pill i{display:inline-block;width:6px;height:6px;background:#6ab87f;border-radius:50%;margin-right:5px}.icon-button{position:relative;background:none;border:0;color:#597278;font-size:22px}.notification-dot{position:absolute;right:5px;top:4px;width:5px;height:5px;background:#ee9969;border-radius:50%}.avatar{width:32px;height:32px;background:#e7e8d7;color:#38665b;border-radius:50%;display:grid;place-items:center;font:700 13px Manrope}.mobile-toggle{display:none;border:0;background:none;font-size:21px;color:var(--deep)}main{padding:38px 42px 70px;max-width:1570px;margin:auto}.eyebrow{font-size:10px;letter-spacing:.17em;font-weight:800;color:var(--green);text-transform:uppercase}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:27px}.page-head h1{font:800 clamp(24px,2.5vw,34px)/1.22 Manrope;margin:7px 0 8px;letter-spacing:-.035em}.page-head p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}.head-actions{display:flex;gap:9px;flex-wrap:wrap}.btn{border:1px solid var(--line);border-radius:9px;padding:11px 15px;background:#fff;color:#30505a;font-size:12px;font-weight:800;display:inline-flex;gap:8px;align-items:center;justify-content:center}.btn:hover{border-color:#90b3a7}.btn-primary{color:#fff;background:var(--green);border-color:var(--green)}.btn-primary:hover{background:#116b61}.btn-dark{background:var(--deep);border-color:var(--deep);color:white}.btn-ghost{background:#f5f8f4}.btn-small{padding:7px 10px;font-size:11px}.hero{background:#133b3c;border-radius:18px;color:#fff;min-height:214px;display:flex;justify-content:space-between;overflow:hidden;position:relative;padding:31px 35px;margin-bottom:23px}.hero:after{content:'';position:absolute;width:380px;height:380px;border:1px solid #4d7b69;border-radius:50%;right:-105px;top:-135px;box-shadow:0 0 0 40px #ffffff06,0 0 0 90px #ffffff05,0 0 0 145px #ffffff04}.hero-content{z-index:1;max-width:600px}.hero .eyebrow{color:#b9dfb0}.hero h2{font:800 clamp(22px,2.4vw,31px)/1.25 Manrope;letter-spacing:-.04em;margin:13px 0 10px}.hero p{font-size:12px;color:#b9d1c9;line-height:1.65;max-width:500px;margin:0 0 18px}.hero .btn{border:0;background:#d2eab9;color:#1a5047}.hero-visual{position:absolute;right:76px;top:36px;width:200px;height:155px;z-index:1}.orbit{position:absolute;border-radius:50%;background:#265656;border:1px solid #498272}.orbit.one{width:145px;height:145px;right:4px;top:5px}.orbit.two{width:98px;height:98px;right:28px;top:29px;background:#347768}.orbit.three{width:45px;height:45px;right:55px;top:55px;background:#cce8b1;color:#235548;display:grid;place-items:center;font:800 24px Manrope}.orb{position:absolute;background:#e7f2e0;border-radius:10px;padding:7px 9px;box-shadow:0 8px 22px #102a2b55;font-size:14px}.orb.a{right:133px;top:12px}.orb.b{right:-8px;top:90px}.orb.c{right:130px;top:114px}.grid{display:grid;gap:17px}.metrics{grid-template-columns:repeat(4,1fr);margin-bottom:22px}.card{background:#fff;border:1px solid #e8eeea;border-radius:13px;box-shadow:var(--shadow)}.metric{padding:20px 21px;min-height:130px}.metric-top{display:flex;justify-content:space-between;color:#6a8084;font-size:12px;font-weight:600}.metric-icon{width:31px;height:31px;border-radius:9px;background:#eaf5e7;color:#4b8c69;display:grid;place-items:center;font-size:17px}.metric strong{font:800 29px Manrope;letter-spacing:-.06em;display:block;margin:12px 0 3px}.metric small{color:#9aa9a7;font-size:11px}.two-col{grid-template-columns:minmax(0,1.45fr) minmax(285px,1fr)}.panel{padding:23px}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:10px}.panel-head h3{margin:0;font:800 15px Manrope}.panel-head small{color:var(--muted);display:block;margin-top:5px;font-size:11px}.text-link{border:0;background:none;color:var(--green);font-size:11px;font-weight:800}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:12px}th{text-align:left;color:#99a8a7;font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:11px 12px;border-bottom:1px solid var(--line)}td{padding:14px 12px;border-bottom:1px solid #edf1ee;white-space:nowrap}tr:last-child td{border-bottom:0}.person{display:flex;align-items:center;gap:9px}.person-face{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;font-weight:800;font-size:11px;flex:none}.person span small{display:block;color:#99aaa7;font-size:10px;margin-top:2px}.status{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:5px 9px;font-size:10px;font-weight:800;background:#f6f7f5;color:#607473}.status:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}.status.pending{background:#fff5e8;color:#b97927}.status.approved,.status.active{background:#eaf7e9;color:#448b64}.status.rejected{background:#fff0ee;color:#ca7165}.list-item{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}.list-item:last-child{border:0}.list-icon{width:35px;height:35px;border-radius:9px;background:#f1f6ec;display:grid;place-items:center;color:#528c6d;flex:none}.list-item strong{display:block;font-size:12px}.list-item small{color:#9aaba8;font-size:10px;display:block;margin-top:4px}.list-item .right{margin-left:auto;font-size:11px;color:#7f9690}.section-title{font:800 18px Manrope;margin:30px 0 15px}.module-grid{grid-template-columns:repeat(3,1fr)}.module-card{padding:21px;min-height:155px;cursor:pointer;transition:.18s}.module-card:hover{transform:translateY(-3px);border-color:#bdd5c5}.module-card .module-icon{font-size:22px;color:var(--green)}.module-card strong{display:block;margin:17px 0 6px;font:800 13px Manrope}.module-card p{color:#8b9b9d;font-size:11px;line-height:1.5;margin:0}.toolbar{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}.search{background:#fff;border:1px solid var(--line);border-radius:9px;display:flex;gap:9px;align-items:center;padding:0 13px;min-width:260px;flex:1;color:#839a99}.search input{border:0;outline:0;width:100%;padding:11px 0;color:var(--ink);font-size:12px}.select{border:1px solid var(--line);border-radius:9px;background:#fff;color:#48646a;padding:10px 12px;font-size:12px;min-width:150px}.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow:auto}.tab{background:none;border:0;padding:12px 16px;color:#8d9d9c;font-size:12px;font-weight:700;white-space:nowrap;border-bottom:2px solid transparent}.tab.active{color:var(--green);border-color:var(--green)}.empty{padding:50px 20px;text-align:center;color:#94a6a4}.empty strong{display:block;color:var(--ink);margin-bottom:7px}.detail-grid{grid-template-columns:repeat(2,1fr)}.info-tile{padding:19px}.info-tile small{color:#879b9a;font-size:11px}.info-tile strong{display:block;margin:7px 0 0;font:800 16px Manrope}.progress{height:7px;border-radius:10px;background:#e8eee8;overflow:hidden}.progress span{display:block;height:100%;background:#69a982;border-radius:10px}.stage-grid{grid-template-columns:repeat(4,1fr);align-items:start}.stage{background:#edf2ed;border-radius:12px;padding:12px;min-height:230px}.stage h3{font:800 12px Manrope;margin:3px 3px 13px;display:flex;justify-content:space-between}.stage h3 span{color:#85a092}.candidate{background:#fff;border:1px solid var(--line);border-radius:9px;padding:12px;margin-bottom:9px;box-shadow:0 3px 9px #173d3208}.candidate strong{font-size:12px}.candidate small{display:block;font-size:10px;color:#9caeaa;margin:5px 0 11px}.candidate select{font-size:10px;width:100%;border:1px solid var(--line);background:#f9faf7;border-radius:6px;padding:5px}.objective{padding:18px 21px;margin-bottom:11px}.objective-top{display:flex;align-items:start;justify-content:space-between;gap:10px}.objective h3{font:800 13px Manrope;margin:0 0 5px}.objective p{color:#91a2a0;font-size:11px;margin:0 0 17px}.objective-foot{display:flex;justify-content:space-between;font-size:11px;color:#6d8681;margin-top:8px}.objective input[type=range]{width:100%;accent-color:var(--green);margin:12px 0 0}.chart-card{padding:22px}.bars{height:190px;display:flex;align-items:end;gap:15px;border-bottom:1px solid var(--line);padding:0 8px 7px}.bar-group{flex:1;display:flex;gap:4px;align-items:end;height:100%;justify-content:center;position:relative}.bar{width:28%;max-width:26px;border-radius:4px 4px 0 0;background:#317e70;min-height:3px}.bar.alt{background:#cce9bb}.bar-label{position:absolute;top:calc(100% + 10px);font-size:10px;color:#8da09c}.legend{display:flex;gap:18px;font-size:10px;color:#829693;margin:38px 0 0}.legend i{display:inline-block;width:7px;height:7px;border-radius:2px;background:#317e70;margin-right:5px}.legend .light{background:#cce9bb}.notice{background:#edf6ea;border:1px solid #d8e9d4;border-radius:10px;padding:15px 18px;color:#3b715b;font-size:12px;line-height:1.55}.notice.amber{background:#fff8eb;border-color:#f1e7cd;color:#80613d}.roadmap-row{display:grid;grid-template-columns:55px 1fr 150px;gap:16px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line)}.roadmap-row:last-child{border:0}.roadmap-num{background:#e9f2e7;color:#2f876c;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font:800 13px Manrope}.roadmap-row h3{font:800 13px Manrope;margin:0 0 5px}.roadmap-row p{color:#849693;font-size:11px;line-height:1.6;margin:0}.roadmap-tag{font-size:10px;font-weight:800;color:#3b866c;background:#edf6e9;border-radius:15px;padding:7px 10px;text-align:center}.modal-backdrop{position:fixed;inset:0;background:#09282988;z-index:60;display:grid;place-items:center;padding:20px}.modal{background:#fff;border-radius:17px;width:min(510px,100%);max-height:90vh;overflow:auto;box-shadow:0 24px 80px #0d272c44;padding:26px}.modal-head{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:20px}.modal h2{font:800 20px Manrope;margin:5px 0 0}.close{background:#f3f6f2;border:0;border-radius:7px;width:30px;height:30px;color:#617774}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700;color:#67807d}.field.full{grid-column:1/-1}.field input,.field select,.field textarea{border:1px solid #dbe5de;border-radius:8px;padding:11px;color:var(--ink);outline:none;background:#fff;font-size:12px}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green)}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}#toast{position:fixed;right:25px;bottom:25px;background:#153c3b;color:#fff;border-radius:9px;padding:12px 17px;font-size:12px;opacity:0;transform:translateY(10px);transition:.2s;z-index:80;pointer-events:none}#toast.show{opacity:1;transform:none}.role-switch{display:flex;gap:5px;background:#eaf0eb;padding:4px;border-radius:9px;width:max-content;margin-bottom:23px}.role-switch button{border:0;background:transparent;color:#80948e;padding:9px 13px;border-radius:7px;font-size:11px;font-weight:800}.role-switch button.active{background:#fff;color:#226d60;box-shadow:0 2px 8px #23533d16}.self-card{background:linear-gradient(120deg,#174a48,#286c5e);color:white;padding:29px;border-radius:15px}.self-card h2{font:800 22px Manrope}.self-card p{font-size:12px;color:#c2ded3}.self-kpis{display:flex;gap:34px;margin-top:29px}.self-kpis strong{display:block;font:800 22px Manrope}.self-kpis small{color:#b9d5ca;font-size:10px}.footer-note{margin-top:32px;color:#a4b1ac;font-size:10px;text-align:center}.mobile-only{display:none}@media(max-width:1150px){main{padding:30px}.topbar{padding:0 30px}.metrics{grid-template-columns:repeat(2,1fr)}.module-grid{grid-template-columns:repeat(2,1fr)}.hero-visual{right:35px;opacity:.55}}@media(max-width:800px){.app-shell{display:block}.sidebar{position:fixed;left:-270px;width:248px;transition:left .2s;box-shadow:15px 0 30px #08252822}.sidebar.open{left:0}.mobile-toggle{display:inline-block}.topbar{height:65px;padding:0 18px}.top-actions{gap:9px}.demo-pill{display:none}main{padding:25px 17px}.two-col,.detail-grid{grid-template-columns:1fr}.stage-grid{grid-template-columns:repeat(2,1fr)}.hero{padding:24px;min-height:210px}.hero-visual{right:-35px;opacity:.2}.page-head{align-items:start;flex-direction:column}.module-grid{grid-template-columns:repeat(2,1fr)}.roadmap-row{grid-template-columns:42px 1fr}.roadmap-tag{grid-column:2;width:max-content}.mobile-only{display:block}}@media(max-width:480px){.metrics,.module-grid,.stage-grid{grid-template-columns:1fr}.metric{min-height:105px}.hero{min-height:240px}.hero h2{font-size:24px}.self-kpis{gap:18px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.breadcrumb{font-size:11px}.panel{padding:17px}}
/* Hierarchical requests and payroll preparation */
.actor-box{background:#e8f1ea;border:1px solid #d9e9da;border-radius:12px;padding:13px 17px;margin-bottom:20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:11px;color:#527265}.actor-box>span{font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:10px}.actor-box label{display:flex;align-items:center;gap:9px;font-weight:700}.actor-box select{border:1px solid #bdd6c6;background:#fff;color:#214d47;border-radius:7px;padding:8px;max-width:280px}.actor-box small{margin-left:auto;color:#82a090}.request-card{border:1px solid #e2ebe5;background:#fff;border-radius:11px;padding:17px;margin:0 0 12px}.request-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.request-top b{display:block;font-size:12px}.request-top small{display:block;margin-top:5px;color:#8c9f99;font-size:10px}.request-card p{font-size:11px;color:#617c76;margin:14px 0 8px}.request-card>small{font-size:10px;color:#6e867f}.route{display:flex;flex-wrap:wrap;gap:6px;margin:15px 0}.route-step{font-size:10px;border:1px solid #e4ebe5;border-radius:6px;background:#f7f8f6;color:#83988b;padding:6px 8px}.route-step.now{border-color:#bddfc0;background:#edf8ed;color:#277a5b;font-weight:800}.route-step.done{border-color:#c9e1cd;background:#e3f2e4;color:#3d8a61}.request-card details{font-size:10px;color:#668077}.request-card summary{cursor:pointer;font-weight:700}.request-card li{margin:7px 0;line-height:1.5}.request-actions{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap}.hierarchy-row{display:grid;grid-template-columns:minmax(100px,1fr) auto minmax(115px,1fr);gap:9px;align-items:center;border-bottom:1px solid #edf1ed;padding:10px 0;font-size:11px}.hierarchy-row:last-child{border:0}.hierarchy-row span{color:#a0b2a7;font-size:10px}.hierarchy-row select{width:100%;background:#fff;border:1px solid #dce7dd;border-radius:7px;padding:7px;color:#47665c;font-size:11px}.travel-extra{grid-template-columns:1fr 1fr;gap:10px}.travel-extra label{display:flex;flex-direction:column;gap:5px}.travel-extra input,.travel-extra select{border:1px solid #dbe5de;border-radius:8px;padding:10px;color:var(--ink);font-size:12px}.full{grid-column:1/-1}.policy-form .form-grid{grid-template-columns:1fr 1fr}.policy-form .field.full{grid-column:1/-1}.policy-form input,.policy-form select{width:100%}@media(max-width:1250px){.hierarchy-row{grid-template-columns:1fr}.actor-box small{margin-left:0}}@media(max-width:650px){.travel-extra{grid-template-columns:1fr}.policy-form .form-grid{grid-template-columns:1fr}.policy-form .field.full{grid-column:auto}}

.sidebar{overflow-y:auto}.sidebar-bottom{flex-shrink:0}
.payslip-print{background:#fff;color:#182b31;border:1px solid #d5dddd;border-radius:16px;padding:32px;margin-top:20px;font:13px/1.5 Arial,sans-serif}
.payslip-head{text-align:center;border-bottom:2px solid #1e4746;padding-bottom:15px;margin-bottom:20px}
.payslip-head span{font-size:11px;letter-spacing:.12em;color:#47736d}
.payslip-head h2{font:700 27px/1.25 Georgia,serif;color:#1e4746;margin:7px 0}
.payslip-head small{font:700 10px Arial,sans-serif;color:#a04b43;vertical-align:middle}
.payslip-ident{margin:0 0 20px}.payslip-ident>div{background:#f5f7f6;padding:14px;border-radius:8px}
.payslip-ident p{margin:8px 0 0}.payslip-table{width:100%;border-collapse:collapse;font-size:11px}
.payslip-table th,.payslip-table td{border:1px solid #cad3d1;padding:8px 6px;text-align:right}
.payslip-table th:nth-child(2),.payslip-table td:nth-child(2){text-align:left}
.payslip-table th{background:#e9efed}.payslip-table tfoot th{background:#dbe8e3}
.payslip-net{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid #cbd6d2}
.payslip-net strong{background:#173b3b;color:white;padding:12px 22px;text-align:right;border-radius:6px}
.payslip-foot{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.payslip-foot span{border:1px solid #cbd6d2;padding:7px 10px}
.payslip-stamp{font-size:10px;color:#647976;margin-top:22px}
@media print{
  @page{size:A4;margin:11mm}
  body{background:white!important}
  .sidebar,.topbar,.page-head,.notice,.footer-note,#toast,#modal-root{display:none!important}
  .app-shell,.main-shell,main#view{display:block!important;width:100%!important;margin:0!important;padding:0!important;overflow:visible!important}
  .payslip-print{display:block!important;border:0!important;box-shadow:none!important;border-radius:0!important;margin:0!important;padding:0!important;font-size:10px!important}
  .payslip-table{font-size:9px!important}.payslip-table th,.payslip-table td{padding:4px!important}
  .payslip-head h2{font-size:19px!important}
  .payslip-ident,.payslip-net,.payslip-table tr{break-inside:avoid}
}