.hr-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:22px 24px;margin-bottom:16px;border:1px solid #cbdde5;border-top:4px solid #008f86;border-radius:18px;background:linear-gradient(115deg,#fff 0%,#f1fbfa 100%)}
.hr-hero p{margin:0 0 5px;color:#008f86;font-size:11px;font-weight:800;letter-spacing:.16em}.hr-hero h1{margin:0;color:#0c2038;font-size:30px}.hr-hero span{display:block;margin-top:5px;color:#64748b}.hr-hero-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}.hr-hero-actions a{display:inline-flex;align-items:center;text-decoration:none}
.hr-kpis{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-bottom:16px}.hr-kpi{min-width:0;min-height:108px;text-align:left;padding:14px;border:1px solid #cad9e3;border-bottom:4px solid #163c60;border-radius:16px;background:#fff;color:#0c2038;cursor:pointer}.hr-kpi:disabled{cursor:default}.hr-kpi>span{display:block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#52677a}.hr-kpi b{display:block;margin:10px 0 3px;font-size:25px}.hr-kpi small{color:#64748b}.hr-kpi.hr-green{border-bottom-color:#0f9f6e}.hr-kpi.hr-purple{border-bottom-color:#8251df}.hr-kpi.hr-teal{border-bottom-color:#009b91}.hr-kpi.hr-amber{border-bottom-color:#e79500}.hr-kpi.hr-red{border-bottom-color:#d83b4c}
.hr-panel,.hr-import,.hr-settings-grid>section{padding:20px;border:1px solid #d6e1e7;border-radius:16px;background:#fff}.hr-panel>header,.hr-settings-grid section>header{display:flex;justify-content:space-between;align-items:center}.hr-panel h2,.hr-settings-grid h2{margin:3px 0 15px}.hr-panel header small{font-weight:800;color:#008f86;letter-spacing:.12em}
.hr-filters{display:grid;grid-template-columns:minmax(260px,2fr) repeat(2,minmax(170px,1fr)) auto auto auto;align-items:end;gap:10px;padding:15px;margin-bottom:16px;border:1px solid #d6e1e7;border-radius:16px;background:#fff}.hr-filters .field{margin:0}.hr-filters>span{align-self:center;color:#64748b;font-size:13px}.hr-table-card table{min-width:980px}.hr-table-card td small,.hr-table-card td b{display:block}.hr-table-card td small{margin-top:3px;color:#64748b}.hr-table-card .action-menu{display:inline-block}
.hr-status{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:#eaf2f5;color:#345267;font-size:11px;font-weight:800;white-space:nowrap}.hr-status-active,.hr-status-valid,.hr-status-create{background:#e2f7ef;color:#087351}.hr-status-urgent,.hr-status-expires-today{background:#ffe8eb;color:#b42335}.hr-status-upcoming,.hr-status-probation,.hr-status-update{background:#fff1d5;color:#945800}.hr-status-on-leave,.hr-status-paused{background:#eee8ff;color:#6240a9}
.hr-empty{display:grid;place-items:center;min-height:150px;text-align:center;color:#64748b}.hr-empty b{display:block;color:#0c2038;font-size:18px;margin-bottom:5px}.hr-form>section{margin:0 0 14px;padding:16px;border:1px solid #d8e3e8;border-radius:14px}.hr-form>section h3{margin:0 0 12px}.hr-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.hr-form-grid .field{margin:0}.hr-span-2{grid-column:span 2}
.hr-detail-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #d8e3e8;padding-bottom:15px}.hr-detail-head h2{margin:4px 0}.hr-detail-head small{color:#008f86;font-weight:800}.hr-detail-head span{color:#64748b}.hr-detail-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:16px 0}.hr-detail-grid>div{padding:12px;border-radius:12px;background:#f3f7f8}.hr-detail-grid small,.hr-detail-grid b{display:block}.hr-detail-grid small{color:#64748b;margin-bottom:5px}.hr-modal-section{padding-top:15px;border-top:1px solid #d8e3e8}.hr-modal-section article{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #edf2f4}.hr-modal-section article span{margin-left:auto}.hr-modal-section article small{color:#64748b}
.hr-milestones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.hr-milestones article{display:flex;gap:15px;padding:18px;border:1px solid #d6e1e7;border-radius:16px;background:#fff}.hr-avatar{display:grid;place-items:center;flex:0 0 54px;height:54px;border-radius:50%;background:#dff6f1;color:#087a71;font-weight:800}.hr-milestones h3{margin:4px 0}.hr-milestones p{margin:4px 0;color:#52677a}.hr-milestones small{color:#008f86;font-weight:700}
.hr-tabs{display:flex;gap:8px;margin-bottom:16px}.hr-tabs button{padding:11px 20px;border:1px solid #c8d8e1;border-radius:10px;background:#fff;font-weight:800}.hr-tabs button.active{background:#0c2038;color:#fff}.hr-danger{color:#c3293a!important;font-weight:800}
.hr-import{display:grid;grid-template-columns:minmax(280px,.7fr) minmax(500px,1.3fr);gap:24px}.hr-import>div+div{border-left:1px solid #d8e3e8;padding-left:24px}.hr-import h2{margin:4px 0}.hr-import>div>small{color:#008f86;font-weight:800;letter-spacing:.12em}.hr-import-totals{display:flex;gap:16px;margin:12px 0}.hr-import-totals span,.hr-import-totals b{padding:8px 12px;border-radius:8px;background:#f0f5f6}
.hr-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.hr-chips{display:flex;flex-wrap:wrap;gap:8px}.hr-chips span{padding:8px 11px;border:1px solid #cfdee5;border-radius:999px;background:#f5f8f9}.hr-settings-grid pre{max-height:240px;overflow:auto;padding:12px;border-radius:10px;background:#0d1f2d;color:#dff6f1}
@media(max-width:1200px){.hr-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.hr-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hr-detail-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hr-filters{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.hr-hero{display:block;padding:17px}.hr-hero h1{font-size:25px}.hr-hero-actions{justify-content:flex-start;margin-top:14px}.hr-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.hr-kpi{min-height:105px}.hr-filters,.hr-form-grid,.hr-detail-grid,.hr-milestones,.hr-import,.hr-settings-grid{grid-template-columns:1fr}.hr-span-2{grid-column:auto}.hr-import>div+div{border-left:0;border-top:1px solid #d8e3e8;padding:18px 0 0}.hr-modal-section article{align-items:flex-start;flex-direction:column}.hr-modal-section article span{margin:0}}