/* ===== الموارد البشرية — shared styles (parts add their own rules in hr-*.css-free blocks below) ===== */
.hr{display:flex;flex-direction:column;gap:1rem}
.hr-num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.hr-tabs{display:flex;gap:.3rem;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.35rem;position:sticky;top:0;z-index:5}
.hr-tab{border:0;background:transparent;padding:.55rem .95rem;border-radius:10px;font:inherit;font-weight:800;font-size:.86rem;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.hr-tab:hover{background:#f3f6f9;color:var(--ink)}
.hr-tab.on{background:var(--dark);color:#fff}
.hr-tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hr-body{min-height:200px}

.hr-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;margin-bottom:1rem}
.hr-card__h{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:.8rem}
.hr-card__h h3{margin:0;font-size:1rem}
.hr-toolbar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:.8rem}
.hr-toolbar .in{min-width:160px;width:auto}
.hr-toolbar .grow{flex:1}

.hr-widgets{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.8rem;margin-bottom:1rem}
.hr-widget{background:#fff;border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem;min-height:92px}
.hr-kpi{display:flex;flex-direction:column;gap:.2rem}
.hr-kpi small{color:var(--muted);font-weight:700;font-size:.8rem}
.hr-kpi b{font-size:1.6rem;line-height:1.2;font-variant-numeric:tabular-nums}
.hr-kpi em{font-style:normal;font-size:.78rem;color:var(--muted)}

.hr-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.hr-table{width:100%;border-collapse:collapse;font-size:.87rem}
.hr-table th{background:#f6f8fb;color:var(--muted);font-weight:800;font-size:.78rem;text-align:start;padding:.6rem .7rem;white-space:nowrap;border-bottom:1px solid var(--line)}
.hr-table td{padding:.6rem .7rem;border-bottom:1px solid #f0f2f6;vertical-align:middle}
.hr-table tr:last-child td{border-bottom:0}
.hr-table tbody tr:hover{background:#fafbfd}
.hr-table td small{display:block;color:var(--muted);font-size:.76rem}
.hr-act{white-space:nowrap;text-align:end}
.hr-act .btn{margin-inline-start:.25rem}

.hr-pill{display:inline-block;font-size:.72rem;font-weight:800;padding:.16rem .6rem;border-radius:20px;white-space:nowrap}
.hr-pill--ok{background:#eaf7ee;color:#166534}
.hr-pill--warn{background:#fff4e5;color:#92400e}
.hr-pill--bad{background:#fdeeee;color:#b3261e}
.hr-pill--info{background:#eaf4fb;color:#1f6f8f}
.hr-pill--muted{background:#f1f3f6;color:#5b6472}

.hr-empty{display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center;padding:2rem 1rem;color:var(--muted)}
.hr-empty b{color:var(--ink)}

.hr-alerts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.hr-alert{display:flex;justify-content:space-between;gap:.8rem;align-items:center;padding:.65rem .8rem;border-radius:10px;border:1px solid var(--line);border-inline-start:4px solid #1f8fbf;background:#fff}
.hr-alert--warn{border-inline-start-color:#d97706}
.hr-alert--bad{border-inline-start-color:#dc2626}
.hr-alert div:first-child{display:flex;flex-direction:column;gap:.15rem}
.hr-alert small{font-size:.8rem;color:#4b5563}
.hr-alert__act{display:flex;gap:.3rem;flex-shrink:0}

.hr-me{display:flex;gap:.9rem;align-items:center;background:linear-gradient(135deg,#20232a,#1f6f8f);color:#fff;border-radius:16px;padding:1rem 1.2rem}
.hr-me h2{margin:0;font-size:1.15rem}
.hr-me small{opacity:.85}
.hr-me__av{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.15);display:grid;place-items:center;font-size:1.4rem;font-weight:800;overflow:hidden;flex-shrink:0}
.hr-me__av img{width:100%;height:100%;object-fit:cover}

.hr-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.hr-modal .us-row,.hr-row{display:flex;gap:.8rem;flex-wrap:wrap}
.hr-row>.fld{flex:1 1 180px}
.hr-modal{max-height:70vh;overflow:auto}
.hr-section-h{margin:1rem 0 .5rem;font-size:.9rem;color:var(--muted);font-weight:800}
.hr-stat-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem}
.hr-stat-list div{background:#f6f8fb;border-radius:10px;padding:.55rem .7rem;display:flex;flex-direction:column}
.hr-stat-list small{color:var(--muted);font-size:.76rem;font-weight:700}
.hr-stat-list b{font-variant-numeric:tabular-nums}

@media (max-width:640px){
  .hr-tabs{overflow-x:auto;flex-wrap:nowrap}
  .hr-tab{white-space:nowrap}
  .hr-table thead{display:none}
  .hr-table tr{display:block;border-bottom:1px solid var(--line);padding:.4rem 0}
  .hr-table td{display:flex;justify-content:space-between;gap:.6rem;border:0;padding:.3rem .7rem}
  .hr-table td::before{content:attr(data-label);color:var(--muted);font-size:.76rem;font-weight:700;flex-shrink:0}
  .hr-table td>.hr-cell{text-align:end;min-width:0}
  .hr-act{text-align:start}
}