:root{--hr-bg:#f4f6fa;--hr-sidebar:#fff;--hr-card:#fff;--hr-border:#e8ecf3;--hr-text:#1a1f36;--hr-text-muted:#6b7589;--hr-primary:#2563eb;--hr-primary-l:#eaf0ff;--hr-primary-d:#1d4ed8;--hr-blue:#3b82f6;--hr-blue-l:#dbeafe;--hr-purple:#8b5cf6;--hr-purple-l:#ede9fe;--hr-cyan:#06b6d4;--hr-cyan-l:#cffafe;--hr-green:#10b981;--hr-green-l:#d1fae5;--hr-orange:#f59e0b;--hr-orange-l:#fef3c7;--hr-red:#ef4444;--hr-red-l:#fee2e2;--hr-shadow-sm:0 1px 2px rgba(15,23,42,.04);--hr-shadow:0 4px 16px rgba(15,23,42,.06);--hr-shadow-lg:0 12px 32px rgba(15,23,42,.08);--hr-radius:16px;--hr-radius-sm:10px}.hr-app{background:var(--hr-bg);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,sans-serif;color:var(--hr-text);display:flex}.hr-sb{width:240px;background:var(--hr-sidebar);border-right:1px solid var(--hr-border);height:100vh;max-height:100vh;position:fixed;top:0;left:0;display:flex;flex-direction:column;z-index:100;overflow:hidden}.hr-sb-body{flex:1 1;overflow-y:auto;overflow-x:hidden;padding:.75rem .75rem 1rem;scrollbar-width:thin;scrollbar-color:var(--hr-border) transparent}.hr-sb-body::-webkit-scrollbar{width:6px}.hr-sb-body::-webkit-scrollbar-track{background:transparent}.hr-sb-body::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;-webkit-transition:background .2s;transition:background .2s}.hr-sb-body:hover::-webkit-scrollbar-thumb{background:var(--hr-border)}.hr-sb-body::-webkit-scrollbar-thumb:hover{background:var(--hr-text-muted)}.hr-sb-logo{gap:.65rem;padding:1.25rem 1rem;border-bottom:1px solid var(--hr-border);background:var(--hr-sidebar);flex-shrink:0}.hr-sb-logo,.hr-sb-logo-icon{display:flex;align-items:center}.hr-sb-logo-icon{width:36px;height:36px;background:linear-gradient(135deg,#2563eb,#06b6d4);border-radius:10px;justify-content:center;color:#fff;font-weight:700;font-size:1rem}.hr-sb-logo-text{font-size:1.05rem;font-weight:700;letter-spacing:.5px}.hr-sb-section{font-size:.68rem;font-weight:600;color:var(--hr-text-muted);text-transform:uppercase;letter-spacing:.08em;padding:.5rem;margin-top:.75rem}.hr-sb-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;border-radius:8px;color:var(--hr-text-muted);font-size:.86rem;font-weight:500;cursor:pointer;transition:all .15s;margin-bottom:2px;text-decoration:none}.hr-sb-item:hover{background:var(--hr-bg);color:var(--hr-text)}.hr-sb-item.active{background:var(--hr-primary);color:#fff;font-weight:600;box-shadow:0 4px 12px rgba(37,99,235,.25)}.hr-sb-item.active svg{color:#fff}.hr-main{flex:1 1;margin-left:240px;min-height:100vh;display:flex;flex-direction:column}.hr-topbar{background:var(--hr-card);border-bottom:1px solid var(--hr-border);padding:.85rem 1.75rem;display:flex;align-items:center;gap:1rem;position:-webkit-sticky;position:sticky;top:0;z-index:50}.hr-search{flex:1 1;max-width:480px;position:relative}.hr-search input{width:100%;padding:.6rem 1rem .6rem 2.5rem;background:var(--hr-bg);border:1px solid transparent;border-radius:999px;font-size:.85rem;color:var(--hr-text);outline:none;transition:all .15s}.hr-search input:focus{background:#fff;border-color:var(--hr-primary)}.hr-search-icon{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--hr-text-muted)}.hr-topbar-right{gap:.75rem;margin-left:auto}.hr-notif,.hr-topbar-right{display:flex;align-items:center}.hr-notif{width:38px;height:38px;background:var(--hr-bg);border-radius:50%;justify-content:center;color:var(--hr-text-muted);position:relative;cursor:pointer;transition:background .15s}.hr-notif:hover{background:var(--hr-primary-l);color:var(--hr-primary)}.hr-notif-dot{position:absolute;top:8px;right:8px;width:9px;height:9px;background:var(--hr-red);border:2px solid #fff;border-radius:50%}.hr-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--hr-blue),var(--hr-cyan));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.8rem}.hr-content{padding:1.75rem 2rem;max-width:1600px}.hr-input{width:100%;padding:.55rem .8rem;background:#fff;border:1px solid var(--hr-border);border-radius:8px;font-size:.85rem;outline:none;font-family:inherit;color:var(--hr-text);transition:border-color .15s,box-shadow .15s}.hr-input:focus{border-color:var(--hr-primary);box-shadow:0 0 0 3px rgba(37,99,235,.1)}.hr-input:disabled{background:var(--hr-bg);color:var(--hr-text-muted);cursor:not-allowed}.hr-page-title{font-size:1.6rem;font-weight:700;margin-bottom:.35rem;letter-spacing:-.02em;color:var(--hr-text)}.hr-page-sub{color:var(--hr-text-muted);font-size:.9rem;margin-bottom:1.5rem;line-height:1.5}.hr-stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-gap:1rem;gap:1rem;margin-bottom:1.5rem}.hr-stat{background:var(--hr-card);border-radius:var(--hr-radius);padding:1.35rem 1.5rem;box-shadow:var(--hr-shadow-sm);display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:transform .2s ease,box-shadow .2s ease;border:1px solid transparent}.hr-stat:hover{transform:translateY(-2px);box-shadow:var(--hr-shadow);border-color:var(--hr-border)}.hr-stat-info{flex:1 1;min-width:0}.hr-stat-label{font-size:.78rem;color:var(--hr-text-muted);font-weight:500;margin-bottom:.35rem}.hr-stat-val{font-size:1.7rem;font-weight:700;margin-bottom:.45rem;letter-spacing:-.02em;line-height:1.1}.hr-stat-change{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:600}.hr-stat-change.up{color:var(--hr-green)}.hr-stat-change.down{color:var(--hr-red)}.hr-stat-change-light{font-size:.7rem;color:var(--hr-text-muted);font-weight:400;margin-left:.3rem}.hr-stat-donut{width:64px;height:64px;flex-shrink:0}.hr-row-2{grid-template-columns:2fr 1fr;grid-gap:1rem}.hr-row-1-1,.hr-row-2{display:grid;gap:1rem;margin-bottom:1.5rem}.hr-row-1-1{grid-template-columns:1fr 1.4fr;grid-gap:1rem}@media (max-width:1100px){.hr-row-1-1,.hr-row-2{grid-template-columns:1fr}}.hr-card{background:var(--hr-card);border-radius:var(--hr-radius);padding:1.4rem;box-shadow:var(--hr-shadow-sm)}.hr-card-head{justify-content:space-between;margin-bottom:1.25rem;gap:1rem}.hr-card-head,.hr-card-title{display:flex;align-items:center}.hr-card-title{font-size:.98rem;font-weight:600;letter-spacing:-.01em;gap:.5rem}.hr-card-action{font-family:inherit;font-size:.78rem;font-weight:500;color:var(--hr-text);background:var(--hr-bg);border:none;display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;padding:.4rem .75rem;border-radius:6px;text-decoration:none;white-space:nowrap;line-height:1.2;transition:background .15s,transform .1s,color .15s}.hr-card-action:hover{background:var(--hr-primary-l);color:var(--hr-primary-d)}.hr-card-action:active{transform:scale(.97)}.hr-card-action:focus-visible{outline:2px solid var(--hr-primary);outline-offset:2px}.hr-card-action:disabled{opacity:.5;cursor:not-allowed}.hr-toggle{display:inline-flex;background:var(--hr-bg);padding:3px;border-radius:999px;gap:2px}.hr-toggle button{padding:.35rem .85rem;background:transparent;border:none;border-radius:999px;font-size:.78rem;font-weight:500;color:var(--hr-text-muted);cursor:pointer;transition:all .15s}.hr-toggle button.active{background:var(--hr-primary);color:#fff}.hr-bar-chart{display:flex;align-items:stretch;gap:.5rem;height:260px;padding-top:1.8rem;padding-bottom:1.8rem;position:relative}.hr-bar-grid{position:absolute;inset:1.8rem 0 1.8rem 0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}.hr-bar-grid>div{position:relative;height:1px}.hr-bar-grid-line{position:absolute;inset:0;height:1px;background:var(--hr-border);opacity:.4}.hr-bar-grid-label{position:absolute;left:0;font-size:.7rem;color:var(--hr-text-muted);transform:translateY(-50%);font-weight:500}.hr-bar-item{gap:.4rem;z-index:1;height:100%;min-width:0}.hr-bar-item,.hr-bar-stack{flex:1 1;display:flex;flex-direction:column;align-items:center}.hr-bar-stack{width:100%;justify-content:flex-end;gap:2px;min-height:0;position:relative}.hr-bar{width:80%;max-width:44px;min-width:18px;background:linear-gradient(180deg,var(--hr-blue),var(--hr-primary))!important;border-radius:6px 6px 0 0;position:relative;transition:all .2s ease;box-shadow:0 2px 4px rgba(37,99,235,.15)}.hr-bar:hover{opacity:.92;transform:translateY(-2px);box-shadow:0 4px 8px rgba(37,99,235,.25)}.hr-bar.secondary{background:linear-gradient(180deg,var(--hr-cyan),#0e7490)!important;box-shadow:0 2px 4px rgba(6,182,212,.15)}.hr-bar-val{font-weight:700;color:var(--hr-text);position:absolute;top:-1.4rem;left:50%;transform:translateX(-50%);background:#fff;padding:1px 6px;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.05)}.hr-bar-label,.hr-bar-val{font-size:.7rem;white-space:nowrap}.hr-bar-label{flex-shrink:0;text-align:center;line-height:1.2;word-wrap:break-word;overflow-wrap:break-word;max-width:100%;overflow:hidden;text-overflow:ellipsis}.hr-bar{width:100%;max-width:32px;background:linear-gradient(180deg,var(--hr-blue),var(--hr-primary));border-radius:8px 8px 0 0;min-height:4px;transition:opacity .15s;cursor:pointer}.hr-bar.secondary{background:linear-gradient(180deg,var(--hr-cyan),#0e7490)}.hr-bar:hover{opacity:.85}.hr-bar-label{font-size:.72rem;color:var(--hr-text-muted);font-weight:500}.hr-donut-large{display:flex;align-items:center;justify-content:center;position:relative;margin:1rem 0}.hr-donut-center{position:absolute;text-align:center}.hr-donut-center .val{font-size:1.85rem;font-weight:700;display:block;line-height:1}.hr-donut-center .label{font-size:.78rem;color:var(--hr-text-muted);display:block;margin-top:.3rem}.hr-donut-legend{display:flex;flex-direction:column;gap:.55rem;margin-top:1rem}.hr-legend-item{display:flex;align-items:center;gap:.55rem;font-size:.82rem}.hr-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.hr-legend-label{color:var(--hr-text-muted)}.hr-legend-val{margin-left:auto;font-weight:600}.hr-emp-table{width:100%;border-collapse:collapse;font-size:.86rem}.hr-emp-table thead{border-bottom:1px solid var(--hr-border)}.hr-emp-table th{padding:.7rem .5rem;text-align:left;font-size:.72rem;font-weight:600;color:var(--hr-text-muted);text-transform:uppercase;letter-spacing:.04em}.hr-emp-table tbody tr{border-bottom:1px solid var(--hr-bg);transition:background .15s}.hr-emp-table tbody tr:hover{background:var(--hr-bg)}.hr-emp-table td{padding:.75rem .5rem}.hr-emp-cell{gap:.6rem}.hr-emp-avatar,.hr-emp-cell{display:flex;align-items:center}.hr-emp-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--hr-blue),var(--hr-cyan));color:#fff;justify-content:center;font-size:.7rem;font-weight:600;flex-shrink:0}.hr-emp-meta{display:flex;flex-direction:column;gap:2px}.hr-emp-name{font-weight:600;font-size:.86rem}.hr-emp-email{font-size:.72rem;color:var(--hr-text-muted)}.hr-perf-pill{display:inline-block;padding:.25rem .85rem;border-radius:999px;font-size:.72rem;font-weight:600}.hr-perf-good{background:var(--hr-green-l);color:var(--hr-green)}.hr-perf-average{background:var(--hr-orange-l);color:var(--hr-orange)}.hr-perf-excellent{background:var(--hr-primary-l);color:var(--hr-primary)}.hr-perf-poor{background:var(--hr-red-l);color:var(--hr-red)}.hr-emp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:1rem;gap:1rem}.hr-emp-card{background:var(--hr-card);border-radius:var(--hr-radius);padding:1.4rem;box-shadow:var(--hr-shadow-sm);transition:all .2s;cursor:pointer}.hr-emp-card:hover{transform:translateY(-2px);box-shadow:var(--hr-shadow)}.hr-emp-card-head{display:flex;align-items:flex-start;gap:.85rem;margin-bottom:1rem}.hr-emp-card-avatar{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--hr-blue),var(--hr-cyan));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;flex-shrink:0}.hr-emp-card-name{font-size:.95rem;font-weight:600;margin-bottom:2px}.hr-emp-card-role{font-size:.78rem;color:var(--hr-text-muted)}.hr-emp-card-info{display:grid;grid-template-columns:1fr 1fr;grid-gap:.5rem;gap:.5rem;padding-top:1rem;border-top:1px solid var(--hr-border)}.hr-emp-card-info-label{font-size:.7rem;color:var(--hr-text-muted)}.hr-emp-card-info-val{font-size:.8rem;font-weight:600}.hr-badge{display:inline-block;padding:.2rem .6rem;border-radius:6px;font-size:.7rem;font-weight:600}.hr-badge-active{background:var(--hr-green-l);color:var(--hr-green)}.hr-badge-inactive{background:var(--hr-bg);color:var(--hr-text-muted)}.hr-badge-probation{background:var(--hr-orange-l);color:var(--hr-orange)}.hr-badge-blue{background:var(--hr-primary-l);color:var(--hr-primary)}.hr-badge-purple{background:var(--hr-purple-l);color:var(--hr-purple)}.hr-badge-cyan{background:var(--hr-cyan-l);color:var(--hr-cyan)}.hr-loading{padding:3rem;text-align:center;color:var(--hr-text-muted)}.hr-spinner{display:inline-block;width:24px;height:24px;border:3px solid var(--hr-border);border-top-color:var(--hr-primary);border-radius:50%;animation:hr-spin .6s linear infinite}@keyframes hr-spin{to{transform:rotate(1turn)}}.hr-tabs{display:flex;gap:1.5rem;border-bottom:1px solid var(--hr-border);margin-bottom:1.5rem}.hr-tab{padding:.75rem 0;font-size:.88rem;font-weight:500;color:var(--hr-text-muted);cursor:pointer;position:relative;background:none;border:none;font-family:inherit}.hr-tab.active{color:var(--hr-primary);font-weight:600}.hr-tab.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--hr-primary);border-radius:2px}@media (max-width:768px){.hr-app{flex-direction:column}.hr-sb{width:100%!important;height:auto;position:relative;border-right:none;border-bottom:1px solid var(--hr-border);max-height:60px;overflow-y:hidden;transition:max-height .3s ease}.hr-sb:focus-within,.hr-sb:hover{max-height:80vh;overflow-y:auto}.hr-sb-body{max-height:none}.hr-main{width:100%}.hr-content{padding:1rem!important}.hr-stat-row{grid-template-columns:1fr 1fr!important}.hr-row-1-1,.hr-row-2{grid-template-columns:1fr!important}.hr-tabs{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;gap:.8rem!important}.hr-tab{flex-shrink:0;font-size:.82rem}.hr-emp-table{font-size:.78rem}.hr-page-title{font-size:1.25rem}.hr-topbar{padding:.6rem 1rem!important;gap:.5rem!important}.hr-search{flex:1 1;min-width:0}}@media (max-width:480px){.hr-stat-row{grid-template-columns:1fr!important}.hr-card{border-radius:8px}.hr-stat-val{font-size:1.2rem}}.hr-content table{min-width:600px}@media (max-width:768px){.hr-card>div[style*=overflowX]{margin:0 -1rem;padding:0 1rem}}@media print{.hr-sb,.hr-topbar{display:none!important}.hr-main{width:100%!important}.hr-content{padding:0!important}body{background:#fff!important}}