/* FDX_HR_CSS */
/* ==========================================================================
   FuHR — نظام تصميم منصّة شؤون الموظفين
   --------------------------------------------------------------------------
   [أ] القسم الأول من هذا الملف **منقولٌ حرفياً عن `work.css`** (معجم منصّة Work):
       الأسماء والمتغيّرات والقيَم كما هي، كي يبدو سطح HR جزءاً من Work لا ضيفاً
       عليه. لا تغيّر اسم كلاس هنا؛ إن احتجت سلوكاً مختلفاً فأضف كلاساً بسابقة hr-.
       المعجم المنقول: :root · الصدفة (sidebar/nav/topbar/main) · .icon · .btn ·
       .card/.grid-cards/.kpi · .chip/.st-<الحالة>/.tag · .field/.input/.search-box ·
       .table-wrap/table.table · .tabs/.tab · .timeline · .day-cols/.task-card ·
       .modal-* · .toast · .spinner · .empty/.error-box · .avatar · الأدوات
       (.row .stack .spread .muted .small .ltr …) · التجاوب · معجم p_requests ·
       .dec-* (صندوق القرارات) · .jr-sec* (عناوين الأقسام) · مفتاح تثبيت القائمة.
   [ب] القسم الثاني (آخر الملف) إضافات **HR وحدها**، وكلّها بسابقة `hr-`:
       .hr-matrix (مصفوفة الجاهزية) · .hr-ring (حلقة الاكتمال) · .hr-cal (تقويم
       الغياب) · .hr-radar (رادار ٣٠ يوماً) · .hr-ladder (تدرّج الجزاءات) ·
       .hr-payline (صفوف المسير) · .hr-stage (شريط المراحل) · .hr-person (رأس
       الملف 360) · .hr-unmeasured (تعذّر القياس) وأخواتها.
   --------------------------------------------------------------------------
   RTL بالكامل · خط Tajawal · صفر مكتبات · صفر إيموجي · أيقونات outline فقط.
   الوضع الليلي غير مطلوب (Work فاتح) — لا تُضِف تعقيداً.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   القسم [أ] — معجم Work المنقول حرفياً
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- إعادة ضبط وأساس ---------- */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;scrollbar-color:#c6c9da transparent}
body{
  margin:0;
  font-family:'Tajawal','Readex Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.svg-sprite{display:none}
::selection{background:rgba(255,87,0,.2)}
:focus-visible{outline:2.5px solid var(--fdx-orange);outline-offset:2px;border-radius:4px}

:root{
  --fdx-orange:#FF5700;
  --fdx-orange-dark:#e14c00;
  --fdx-orange-soft:#ffece3;
  --fdx-purple:#3A2666;
  --fdx-purple-2:#4b3488;
  --fdx-purple-deep:#251743;
  --purple-soft:#efeafa;
  --bg:#f5f6fa;
  --panel:#ffffff;
  --line:#e5e7f0;
  --line-2:#d7dae6;
  --ink:#20233a;
  --ink-2:#6c7288;
  --ink-3:#9aa0b5;
  --good:#188a55;  --good-bg:#e4f6ec;
  --warn:#b06010;  --warn-bg:#fdf2e0;
  --bad:#c22f2f;   --bad-bg:#fcebeb;
  --info:#2757c9;  --info-bg:#e9effd;
  --radius:14px;
  --radius-sm:10px;
  --shadow-1:0 1px 3px rgba(25,18,56,.06);
  --shadow-2:0 10px 30px rgba(25,18,56,.12);
  --side-w:64px;
  --side-w-open:288px;
  --topbar-h:60px;
  --bottbar-h:62px;
}

/* ---------- الصدفة: التخطيط العام ---------- */
.app{
  display:grid;
  grid-template-columns:var(--side-w) minmax(0,1fr);
  height:100vh;
  height:100dvh;
}
.content{display:flex;flex-direction:column;min-width:0;min-height:0}

/* السايدبار: **درج ينفتح قائمةً كاملة** لا شريط تلميحات.
   ساكناً: رصيف أيقونات 64px. عند مرور الماوس فوقه (أو تركيز لوحة المفاتيح داخله)
   يتمدّد إلى --side-w-open فوق المحتوى ويكشف عناوين المجموعات وأسماء البنود
   ووصف كل بند — قائمة واحدة كاملة تُقرأ دفعةً واحدة، لا اسماً معزولاً لبند واحد.

   لماذا التمدّد فوق المحتوى لا بدفعه: عمود الشبكة يبقى 64px دائماً، فلا يقفز
   عرض الإطار المضمَّن ولا تُعاد صياغة الصفحة عند كل مرور ماوس. الزرّ «تثبيت»
   وحده يحجز العرض فعلياً (.app.nav-pinned) لمن يريد القائمة دائمة. */
.sidebar{
  position:relative;
  z-index:70;
  width:var(--side-w);
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
  padding:14px 0;
  background:linear-gradient(196deg,var(--fdx-purple-2) 0%,var(--fdx-purple) 44%,var(--fdx-purple-deep) 100%);
  color:#efecfb;
  overflow:hidden auto;
  overscroll-behavior:contain;
  transition:width .18s ease,box-shadow .18s ease;
}
.brand{
  flex:none;display:flex;align-items:center;gap:9px;width:100%;
  padding:0 12px 6px;border-bottom:0;
}
.brand-logo{
  flex:none;width:40px;text-align:center;
  font-size:1.2rem;font-weight:800;letter-spacing:.3px;line-height:1.2;
}
.brand-logo .b1{color:var(--fdx-orange)}
.brand-logo .b2{color:#fff}
.brand-sub{font-size:.7rem;color:#b9b0d8;white-space:nowrap}
.brand-logo .b2,.brand-sub{display:none}
.nav{display:flex;flex-direction:column;gap:10px;width:100%;min-height:0}
.nav-loading{display:flex;justify-content:center;padding:18px 0}
.wk-nav-group{
  display:flex;flex-direction:column;gap:4px;width:100%;
  padding-top:10px;border-top:1px solid rgba(255,255,255,.10);
}
.wk-nav-group:first-child{padding-top:0;border-top:0}
/* عنوان المجموعة: خطّ فاصل ساكناً، نصّ ظاهر حين تنفتح القائمة */
.nav-group-title{
  height:14px;margin:0 12px 2px;
  font-size:.66rem;font-weight:800;letter-spacing:.4px;color:#a99ecd;
  white-space:nowrap;overflow:hidden;
  opacity:0;transition:opacity .14s ease;
}
.nav-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  width:40px;height:40px;
  margin:0 12px;
  padding:0;
  border:0;
  border-radius:11px;
  background:transparent;
  color:#cfc7e8;
  cursor:pointer;
  overflow:hidden;
  transition:background .15s,color .15s,width .18s ease;
}
.nav-item:hover{background:rgba(255,255,255,.09);color:#fff}
.nav-item.active{
  background:rgba(255,87,0,.2);
  color:#fff;
}
.nav-item.active::before{
  content:"";position:absolute;top:9px;bottom:9px;
  right:0;width:3px;border-radius:0 3px 3px 0;background:var(--fdx-orange);
}
.nav-item .icon{flex:none;width:19px;height:19px;margin-inline-start:10px;opacity:.92}
.nav-text{
  flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;
  opacity:0;transition:opacity .14s ease;
}
.nav-label{
  font-size:.83rem;font-weight:700;line-height:1.35;color:inherit;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-desc{
  font-size:.68rem;line-height:1.3;color:#a99ecd;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-badge{
  position:absolute;
  top:-3px;
  inset-inline-end:-3px;
  min-width:17px;height:17px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 4px;
  border-radius:999px;
  background:var(--fdx-orange);
  color:#fff;
  font-size:.65rem;font-weight:800;line-height:1;
  box-shadow:0 0 0 2px var(--fdx-purple);
}
.side-foot{display:none}
/* زرّ التثبيت — يظهر مع القائمة المفتوحة فقط */
.nav-pin{
  flex:none;align-self:flex-start;
  display:flex;align-items:center;gap:8px;
  margin:2px 12px 0;padding:0;height:32px;width:40px;
  border:0;border-radius:9px;background:transparent;
  color:#a99ecd;font:inherit;font-size:.72rem;cursor:pointer;
  opacity:0;pointer-events:none;
  overflow:hidden;white-space:nowrap;
  transition:opacity .14s ease,background .15s,color .15s,width .18s ease;
}
.nav-pin .icon{flex:none;width:15px;height:15px;margin-inline-start:12px}
.nav-pin:hover{background:rgba(255,255,255,.09);color:#fff}

/* ---------- حالة الانفتاح ---------- */
/* بمرور الماوس على الشريط، أو بتنقّل لوحة المفاتيح داخله، أو بالتثبيت اليدوي.
   **قاعدتان منفصلتان عمداً لا قائمة واحدة بفواصل**: لو لم يدعم متصفّحٌ :has()
   لأسقط المحرّك القاعدة كلها ومعها :hover — فيموت الدرج تماماً. الفصل يضمن أن
   يبقى المرور بالماوس عاملاً مهما كان المتصفّح.
   ولماذا :has(:focus-visible) لا :focus-within: النقر بالماوس على بند يترك
   التركيز داخل الشريط، فيبقى الدرج مفتوحاً فوق المحتوى إلى الأبد بعد أول نقرة
   (شوهد حيّاً). و:focus-visible لا يُضبط إلا لتركيز لوحة المفاتيح. */
@media (hover:hover) and (min-width:901px){
  .sidebar:hover{
    width:var(--side-w-open);
    box-shadow:14px 0 34px rgba(15,9,35,.28);
  }
  .sidebar:hover .nav-item,.sidebar:hover .nav-pin{width:calc(var(--side-w-open) - 24px)}
  .sidebar:hover .nav-text,.sidebar:hover .nav-group-title,
  .sidebar:hover .brand-sub,.sidebar:hover .nav-pin{opacity:1}
  .sidebar:hover .nav-pin{pointer-events:auto}
  .sidebar:hover .brand-logo .b2,.sidebar:hover .brand-sub{display:inline}
  .sidebar:hover .brand-logo{width:auto;text-align:start;padding-inline-start:12px}
}
@media (hover:hover) and (min-width:901px){
  .sidebar:has(:focus-visible){
    width:var(--side-w-open);
    box-shadow:14px 0 34px rgba(15,9,35,.28);
  }
  .sidebar:has(:focus-visible) .nav-item,
  .sidebar:has(:focus-visible) .nav-pin{width:calc(var(--side-w-open) - 24px)}
  .sidebar:has(:focus-visible) .nav-text,
  .sidebar:has(:focus-visible) .nav-group-title,
  .sidebar:has(:focus-visible) .brand-sub,
  .sidebar:has(:focus-visible) .nav-pin{opacity:1}
  .sidebar:has(:focus-visible) .nav-pin{pointer-events:auto}
  .sidebar:has(:focus-visible) .brand-logo .b2,
  .sidebar:has(:focus-visible) .brand-sub{display:inline}
  .sidebar:has(:focus-visible) .brand-logo{width:auto;text-align:start;padding-inline-start:12px}
}
/* مثبّتة: العرض محجوز فعلياً في الشبكة فلا تغطّي المحتوى */
.app.nav-pinned{--side-w:var(--side-w-open)}
.app.nav-pinned .sidebar{box-shadow:none}
.app.nav-pinned .nav-item,.app.nav-pinned .nav-pin{width:calc(var(--side-w-open) - 24px)}
.app.nav-pinned .nav-text,.app.nav-pinned .nav-group-title,
.app.nav-pinned .nav-pin,.app.nav-pinned .brand-sub{opacity:1}
.app.nav-pinned .nav-pin{pointer-events:auto}
.app.nav-pinned .nav-pin{color:#fff;background:rgba(255,87,0,.18)}
.app.nav-pinned .brand-logo .b2,.app.nav-pinned .brand-sub{display:inline}
.app.nav-pinned .brand-logo{width:auto;text-align:start;padding-inline-start:12px}
@media (prefers-reduced-motion:reduce){
  .sidebar,.nav-item,.nav-text,.nav-group-title,.nav-pin{transition:none}
}

/* الرأس العلوي */
.topbar{
  flex:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:var(--topbar-h);
  padding:0 clamp(14px,2.6vw,28px);
  background:#fff;
  border-bottom:1px solid var(--line);
}
.page-title{
  font-size:1.12rem;font-weight:800;color:var(--fdx-purple);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.topbar-actions{display:flex;align-items:center;gap:10px;flex:none}
.user-box{display:flex;align-items:center;gap:10px;min-width:0}
.user-meta{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.user-name{font-weight:800;font-size:.83rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.user-role{font-size:.7rem;color:var(--ink-2);font-weight:600}

/* حاوية الرندر */
.main{
  flex:1;min-height:0;
  overflow-y:auto;
  padding:20px clamp(14px,2.6vw,28px) 30px;
}
.main:focus{outline:none}
.main.is-embed{padding:0;overflow:hidden;display:flex;flex-direction:column}
.main.is-embed>*{flex:1;min-height:0}

/* ---------- الأيقونات ---------- */
.icon{width:19px;height:19px;flex:none}
.icon.sm{width:15px;height:15px}
.icon.lg{width:26px;height:26px}
.icon.xl{width:34px;height:34px}

/* ---------- الأزرار ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 15px;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  background:#fff;color:var(--ink);
  font-weight:700;font-size:.86rem;line-height:1.4;
  cursor:pointer;user-select:none;white-space:nowrap;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .06s;
}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn .icon{width:17px;height:17px}
.btn-primary{background:var(--fdx-orange);color:#fff;box-shadow:0 2px 8px rgba(255,87,0,.28)}
.btn-primary:hover{background:var(--fdx-orange-dark)}
.btn-soft{background:var(--fdx-orange-soft);color:#c94500}
.btn-soft:hover{background:#ffdfd0}
.btn-purple{background:var(--fdx-purple);color:#fff}
.btn-purple:hover{background:#31205a}
.btn-ghost{background:#fff;border-color:var(--line-2)}
.btn-ghost:hover{background:#f3f4f9}
.btn-danger{background:var(--bad-bg);color:var(--bad)}
.btn-danger:hover{background:#f9dcdc}
.btn-danger.solid{background:#d43535;color:#fff}
.btn-danger.solid:hover{background:#bd2c2c}
.btn-sm{padding:4px 10px;font-size:.78rem;border-radius:8px}
.btn-sm .icon{width:14px;height:14px}
.btn-icon{width:38px;height:38px;padding:8px}
.btn-sm.btn-icon{width:30px;height:30px;padding:5px}

/* ---------- البطاقات والشبكات ---------- */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 18px;
  box-shadow:var(--shadow-1);
  min-width:0;
}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.card-title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.95rem}
.card-title .icon{color:var(--fdx-purple)}
.card.tight{padding:12px 14px}
.card.click{cursor:pointer;transition:box-shadow .15s,border-color .15s,transform .15s}
.card.click:hover{border-color:#c9bfe8;box-shadow:var(--shadow-2);transform:translateY(-2px)}
.card.off{opacity:.8;border-style:dashed;box-shadow:none}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.grid-cards.wide{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:14px;align-items:start}
.pagehead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.pagehead-title{font-size:1.02rem;font-weight:800}

.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow-1);
}
.kpi-value{font-size:1.55rem;font-weight:800;line-height:1.2;color:var(--fdx-purple)}
.kpi-label{font-size:.78rem;color:var(--ink-2);font-weight:600;margin-top:2px}
.kpi.accent .kpi-value{color:var(--fdx-orange)}
.kpi.good .kpi-value{color:var(--good)}
.kpi.warn .kpi-value{color:var(--warn)}
.kpi.bad .kpi-value{color:var(--bad)}

/* ---------- الشيبس وحالات البنود ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 10px;border-radius:999px;
  background:#eef0f6;color:var(--ink-2);
  font-size:.75rem;font-weight:700;line-height:1.7;white-space:nowrap;
}
.chip[class*="st-"]::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.st-new{background:var(--info-bg);color:var(--info)}
.st-study{background:var(--purple-soft);color:#6a48c0}
.st-accepted{background:#e0f4f0;color:#0d8a72}
.st-in_progress{background:var(--warn-bg);color:var(--warn)}
.st-done{background:var(--good-bg);color:var(--good)}
.st-approved{background:var(--good-bg);color:var(--good)}
.st-rejected{background:var(--bad-bg);color:var(--bad)}
.st-deferred{background:#eceef4;color:#5f6579}
.chip-orange{background:var(--fdx-orange-soft);color:#c94500}
.chip-purple{background:var(--purple-soft);color:var(--fdx-purple)}
.tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:1px 8px;border-radius:7px;
  background:#eef0f6;color:var(--ink-2);
  font-size:.72rem;font-weight:700;
}

/* ---------- النماذج ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field>label{font-size:.82rem;font-weight:800}
.field .req{color:var(--bad)}
.hint{font-size:.75rem;color:var(--ink-3)}
.input{
  width:100%;
  padding:9px 12px;
  border:1.5px solid var(--line-2);
  border-radius:var(--radius-sm);
  background:#fff;color:var(--ink);
  transition:border-color .15s,box-shadow .15s;
}
.input::placeholder{color:var(--ink-3)}
.input:focus{outline:none;border-color:var(--fdx-orange);box-shadow:0 0 0 3px rgba(255,87,0,.14)}
textarea.input{min-height:110px;resize:vertical}
.input.invalid{border-color:var(--bad);box-shadow:0 0 0 3px rgba(194,47,47,.12)}
.field-err{font-size:.75rem;color:var(--bad);font-weight:700}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.search-box{position:relative;min-width:200px}
.search-box .icon{
  position:absolute;inset-inline-start:11px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--ink-3);pointer-events:none;
}
.search-box .input{padding-inline-start:36px}

/* ---------- الجداول ---------- */
.table-wrap{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow-x:auto;box-shadow:var(--shadow-1);
}
.table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:560px}
.table th{
  text-align:start;font-size:.74rem;color:var(--ink-2);font-weight:800;
  padding:10px 14px;border-bottom:1px solid var(--line);
  background:#fafbfe;white-space:nowrap;
}
.table td{padding:10px 14px;border-bottom:1px solid #f0f1f7;vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:#fafafe}
.table tr.click{cursor:pointer}

/* ---------- التبويبات ---------- */
.tabs{display:inline-flex;gap:4px;background:#eaecf3;padding:4px;border-radius:12px}
.tab{
  border:0;background:transparent;
  padding:6px 16px;border-radius:9px;
  font-weight:800;font-size:.84rem;color:var(--ink-2);
  cursor:pointer;transition:background .15s,color .15s;
}
.tab:hover{color:var(--ink)}
.tab.active{background:#fff;color:var(--fdx-purple);box-shadow:0 1px 4px rgba(24,16,56,.12)}

/* ---------- سجل الأحداث الزمني ---------- */
.timeline{display:flex;flex-direction:column;margin:4px 0}
.tl-item{position:relative;padding-inline-start:24px;padding-bottom:16px}
.tl-item::before{
  content:"";position:absolute;inset-inline-start:4.5px;top:14px;bottom:0;
  width:2px;background:var(--line);
}
.tl-item:last-child{padding-bottom:2px}
.tl-item:last-child::before{display:none}
.tl-dot{
  position:absolute;inset-inline-start:0;top:5px;
  width:11px;height:11px;border-radius:50%;
  background:var(--fdx-orange);
  box-shadow:0 0 0 3px var(--fdx-orange-soft);
}
.tl-item.gray .tl-dot{background:var(--ink-3);box-shadow:0 0 0 3px #eceef4}
.tl-text{font-size:.86rem;font-weight:600}
.tl-meta{font-size:.73rem;color:var(--ink-3)}

/* ---------- أعمدة لوحتي وبطاقات المهام ---------- */
.day-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.day-col{
  background:#eef0f6;border-radius:var(--radius);
  padding:12px;display:flex;flex-direction:column;gap:10px;min-height:220px;
}
.day-col-head{
  display:flex;align-items:center;justify-content:space-between;
  font-weight:800;font-size:.88rem;color:var(--ink-2);padding:2px 4px;
}
.day-col-head .chip{background:#fff}
.day-col.is-overdue{background:#fbecec}
.day-col.is-overdue .day-col-head{color:var(--bad)}
.day-col.is-today{background:#fff0e7}
.day-col.is-today .day-col-head{color:#c94500}
.day-col.is-later{background:#f2f3f8}
.day-col.is-later .day-col-head{color:var(--ink-3)}
.task-card{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;display:flex;flex-direction:column;gap:6px;
  box-shadow:var(--shadow-1);cursor:pointer;
  transition:box-shadow .15s,transform .12s;
}
.task-card:hover{box-shadow:var(--shadow-2);transform:translateY(-1px)}
.task-title{font-weight:700;font-size:.85rem;line-height:1.5}
.task-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.73rem;color:var(--ink-2)}
.task-meta .icon{width:13px;height:13px}
.task-due{display:inline-flex;align-items:center;gap:4px;font-weight:700}
.task-due.overdue{color:var(--bad)}

/* ---------- المودال ---------- */
.modal-backdrop{
  position:fixed;inset:0;z-index:80;
  background:rgba(23,15,46,.52);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:18px;
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.modal-backdrop.open{opacity:1;pointer-events:auto}
.modal{
  background:#fff;border-radius:16px;
  width:100%;max-width:540px;max-height:88vh;
  display:flex;flex-direction:column;
  box-shadow:0 24px 70px rgba(20,12,50,.35);
  transform:translateY(14px);transition:transform .18s ease;
}
.modal-backdrop.open .modal{transform:none}
.modal.wide{max-width:760px}
.modal-head{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 20px;border-bottom:1px solid var(--line);
}
.modal-title{font-size:1rem;font-weight:800;display:flex;align-items:center;gap:8px}
.modal-body{padding:18px 20px;overflow-y:auto}
.modal-foot{
  flex:none;display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:13px 20px;border-top:1px solid var(--line);
  background:#fafbfe;border-radius:0 0 16px 16px;
}
body.modal-open{overflow:hidden}

/* ---------- التوست ---------- */
.toast-root{
  position:fixed;bottom:18px;inset-inline-end:18px;z-index:95;
  display:flex;flex-direction:column;gap:10px;
  width:min(92vw,360px);pointer-events:none;
}
.toast{
  pointer-events:auto;
  display:flex;align-items:flex-start;gap:10px;
  background:#281a4d;color:#f4f1ff;
  padding:12px 15px;border-radius:13px;
  border-inline-start:4px solid #7d739f;
  box-shadow:0 12px 34px rgba(18,10,44,.35);
  font-size:.85rem;font-weight:600;line-height:1.55;
  animation:toast-in .22s ease;
}
.toast .icon{width:18px;height:18px;flex:none;margin-top:2px}
.toast.ok{border-inline-start-color:#2fbf82}
.toast.ok .icon{color:#2fbf82}
.toast.err{border-inline-start-color:#ff7b6b}
.toast.err .icon{color:#ff7b6b}
.toast.info{border-inline-start-color:#7aa2ff}
.toast.info .icon{color:#7aa2ff}
.toast.out{animation:toast-out .18s ease forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1}}
@keyframes toast-out{to{opacity:0;transform:translateY(8px)}}

/* ---------- السبينر والتحميل ---------- */
.spinner{
  display:inline-block;flex:none;
  width:18px;height:18px;border-radius:50%;
  border:2.5px solid rgba(58,38,102,.16);
  border-top-color:var(--fdx-orange);
  animation:spin .8s linear infinite;
}
.spinner.lg{width:34px;height:34px;border-width:3px}
.spinner.on-dark{border-color:rgba(255,255,255,.22);border-top-color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}
.page-loading{
  min-height:46vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:var(--ink-2);font-weight:600;
}

/* ---------- الحالة الفارغة والخطأ ---------- */
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-align:center;padding:42px 18px;
  background:#fff;border:1.5px dashed var(--line-2);border-radius:var(--radius);
  color:var(--ink-2);
}
.empty .icon{width:34px;height:34px;color:var(--ink-3);margin-bottom:4px}
.empty-title{font-weight:800;color:var(--ink);font-size:.95rem}
.empty-text{font-size:.82rem;max-width:46ch}
.empty .btn{margin-top:10px}
.error-box{
  display:flex;flex-direction:column;gap:8px;
  background:var(--bad-bg);border:1px solid #f2c8c8;border-radius:var(--radius);
  padding:16px 18px;color:#8c2323;
}
.error-title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.9rem}
.error-title .icon{color:var(--bad)}
.error-box .btn{align-self:flex-start;margin-top:4px}
.noscript-note{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);color:var(--ink);
  font-weight:700;padding:20px;text-align:center;
}

/* ---------- الصور الرمزية ---------- */
.avatar{
  width:34px;height:34px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--purple-soft);color:var(--fdx-purple);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.9rem;
  object-fit:cover;
}
.avatar.lg{width:52px;height:52px;font-size:1.15rem}

/* ---------- أدوات مساعدة ---------- */
.row{display:flex;align-items:center;gap:10px}
.stack{display:flex;flex-direction:column;gap:10px}
.spread{justify-content:space-between}
.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.center{text-align:center}
.muted{color:var(--ink-2)}
.small{font-size:.78rem}
.hide{display:none!important}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.sep{border:0;height:1px;background:var(--line);margin:14px 0}
.link{color:#5b3fa8;font-weight:700;cursor:pointer}
.link:hover{text-decoration:underline}

/* ---------- أشرطة التمرير ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:#cdd0df;border-radius:10px;
  border:2.5px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:#b3b7cc;border:2.5px solid transparent;background-clip:content-box}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border:2.5px solid transparent;background-clip:content-box}

/* ---------- التجاوب ---------- */
@media (max-width:1200px){
  .day-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .app{display:flex;flex-direction:column;height:100dvh}
  .sidebar{
    position:fixed;bottom:0;inset-inline:0;z-index:70;
    height:calc(var(--bottbar-h) + env(safe-area-inset-bottom,0px));
    flex-direction:row;align-items:stretch;gap:6px;
    padding:5px 8px calc(5px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(0deg,var(--fdx-purple-deep),var(--fdx-purple));
    overflow:hidden;
  }
  .brand,.side-foot,.nav-pin,.nav-group-title,.nav-desc{display:none}
  .nav{flex-direction:row;flex:1;gap:3px;overflow-x:auto;overflow-y:hidden}
  .wk-nav-group{
    flex-direction:row;width:auto;gap:3px;padding-top:0;border-top:0;
    border-inline-start:1px solid rgba(255,255,255,.12);padding-inline-start:5px;
  }
  .wk-nav-group:first-child{border-inline-start:0;padding-inline-start:0}
  .nav-item{
    flex:1 0 auto;min-width:58px;max-width:96px;width:auto;height:auto;margin:0;
    flex-direction:column;justify-content:center;gap:3px;
    padding:4px 6px;border-radius:9px;
    font-size:.6rem;text-align:center;
  }
  /* على الجوال يعود الاسم سطراً تحت الأيقونة — لا درج ولا تمدد (لا hover أصلاً) */
  .nav-text{opacity:1;flex:none;align-items:center;gap:0}
  .nav-label{font-size:.6rem;font-weight:700;max-width:88px}
  .nav-item .icon{width:20px;height:20px;margin-inline-start:0}
  .nav-item.active{box-shadow:none;background:rgba(255,255,255,.16)}
  .nav-item.active::before{display:none}
  .nav-badge{
    position:absolute;top:1px;inset-inline-end:8px;
    min-width:15px;height:15px;font-size:.58rem;padding:0 4px;
  }
  .content{flex:1;min-height:0}
  .topbar{height:54px;padding:0 14px}
  .main{padding-bottom:calc(var(--bottbar-h) + 26px)}
  .main.is-embed{padding-bottom:var(--bottbar-h)}
  .toast-root{bottom:calc(var(--bottbar-h) + 14px)}
}
@media (max-width:640px){
  .day-cols{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .user-role{display:none}
  .user-name{max-width:110px}
  .page-title{font-size:1rem}
  .main{padding-inline:12px}
}

/* ---------- توافق صفحة الطلبات (p_requests) — أُضيف في مرحلة التجميع ----------
   كلاسات يستهلكها p_requests.js ولا مقابل لها في المعجم أعلاه؛ تغطية موجزة بنفس الرموز. */
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.toolbar .list-summary{flex:1;min-width:0;font-size:.78rem}
.chips{display:inline-flex;gap:4px;background:#eaecf3;padding:4px;border-radius:12px}
.chips .chip{background:transparent;cursor:pointer;border:0;font-weight:800;padding:5px 14px;border-radius:9px;color:var(--ink-2)}
.chips .chip:hover{color:var(--ink)}
.chips .chip-active{background:#fff;color:var(--fdx-purple);box-shadow:0 1px 4px rgba(24,16,56,.12)}
.cards{display:flex;flex-direction:column;gap:10px}
.item-card{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.item-card:hover{border-color:#c9bfe8;box-shadow:var(--shadow-2)}
.card-meta{font-size:.76rem}
.card-note{font-size:.8rem;background:var(--purple-soft);color:var(--fdx-purple);border-radius:9px;padding:7px 11px;margin-top:8px}
.card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.fb-badge{display:inline-flex;align-items:center;gap:5px;padding:1px 9px;border-radius:999px;background:var(--fdx-orange-soft);color:#c94500;font-size:.72rem;font-weight:800}
.fb-badge:hover{background:#ffdfd0}
.modal-x{border:0;background:transparent;font-size:1.3rem;line-height:1;color:var(--ink-3);cursor:pointer;padding:2px 8px;border-radius:8px}
.modal-x:hover{background:#f3f4f9;color:var(--ink)}
.boards-list{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto}
.board-row{text-align:start;border:1.5px solid var(--line-2);background:#fff;border-radius:var(--radius-sm);padding:9px 12px;font-weight:700;font-size:.85rem;cursor:pointer;transition:border-color .15s,background .15s}
.board-row:hover{border-color:#c9bfe8}
.board-row.sel{border-color:var(--fdx-orange);background:var(--fdx-orange-soft);color:#c94500}
.empty.loading{border-style:solid;color:var(--ink-3)}
.empty.err{color:var(--bad);border-color:#f2c8c8}
.detail-head{margin-bottom:6px}
.detail-kind{font-size:.74rem;margin-bottom:2px}
.detail-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.detail-title{font-weight:800;font-size:1rem}
.detail-meta{font-size:.78rem;margin-bottom:10px}
.detail-text{background:#fafbfe;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 13px;font-size:.87rem;white-space:pre-wrap;margin-bottom:10px}
.detail-decision{background:var(--purple-soft);color:var(--fdx-purple);border-radius:9px;padding:8px 12px;font-size:.82rem;font-weight:700;margin-bottom:10px}
.detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.detail-section{border-top:1px solid var(--line);padding-top:12px;margin-top:6px}
.section-title{font-weight:800;font-size:.85rem;margin-bottom:10px}
.detail-comment{display:flex;gap:8px;align-items:flex-start;margin-top:12px}
.detail-comment .input{flex:1}
.tl-line{font-size:.84rem}
.tl-action{font-weight:800}
.tl-note{font-size:.8rem;color:var(--ink-2);background:#fafbfe;border-inline-start:2.5px solid var(--line-2);padding:5px 10px;border-radius:7px;margin-top:4px}
.tl-dot.tl-dec{background:var(--fdx-purple);box-shadow:0 0 0 3px var(--purple-soft)}

/* ---------- تقليل الحركة ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* ===== عناوين الأقسام داخل الصفحة (منقولة عن Work: معجم .jr-) =====
   .jr-lead سطر افتتاحي عريض | .jr-sec قسم > .jr-sec-title + .jr-sec-sub
   .jr-entry-head رأس بطاقة (أيقونة + عنوان) | .jr-list قائمة بعلامات صح
   (مسار المحطات .jr-track/.jr-stage والروتين .rt-* لم يُنقلا — لا تستعملهما). */
.jr-lead{
  font-size:.95rem;line-height:1.95;color:var(--ink-2);
  max-width:76ch;margin:0 0 22px;
}
.jr-sec{margin:0 0 30px}
.jr-sec-title{
  font-size:1.02rem;font-weight:800;color:var(--fdx-purple);
  margin:0 0 4px;padding-inline-start:11px;position:relative;
}
.jr-sec-title::before{
  content:"";position:absolute;inset-inline-start:0;top:.28em;bottom:.28em;
  width:4px;border-radius:3px;background:var(--fdx-orange);
}
.jr-sec-sub{font-size:.82rem;color:var(--ink-3);margin:0 0 14px;padding-inline-start:11px}
.jr-entry-head{
  display:flex;align-items:center;gap:9px;
  font-size:.92rem;font-weight:800;color:var(--fdx-purple);margin-bottom:8px;
}
.jr-entry-head .icon{flex:none;color:var(--fdx-orange)}
.jr-list{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.jr-list li{display:flex;align-items:flex-start;gap:8px;font-size:.83rem;line-height:1.7}
.jr-list .icon{flex:none;width:15px;height:15px;margin-top:4px;color:var(--good,#1c7c4a)}


/* صندوق القرارات في عين الطائر */
.dec-box{margin-bottom:16px}
.dec-list{display:flex;flex-direction:column;gap:8px}
.dec-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--bg);transition:background .12s;
}
.dec-item:hover{background:#fff}
.dec-dot{flex:none;width:9px;height:9px;border-radius:50%;margin-top:6px;background:var(--ink-3)}
.dec-item.sev-high .dec-dot{background:var(--bad)}
.dec-item.sev-mid .dec-dot{background:var(--warn)}
.dec-item.sev-low .dec-dot{background:var(--info)}
.dec-body{flex:1;min-width:0}
.dec-text{font-size:.85rem;font-weight:700;line-height:1.6}
.dec-hint{font-size:.72rem;color:var(--ink-3);margin-top:2px}
.dec-item .wk-ic{flex:none;color:var(--ink-3);margin-top:3px}


/* مفتاح تثبيت القائمة (FDX_WORK_UI_2408) + خط فاصل بين مجموعات الشريط */
/* [أ] مفتاح التثبيت */
.nav-pin{
  width:calc(var(--side-w-open) - 24px);
  justify-content:space-between;padding:0 12px;gap:10px;
}
.nav-pin .nav-pin-txt{flex:1;text-align:start;overflow:hidden;text-overflow:ellipsis}
.nav-pin .switch{
  flex:none;position:relative;width:34px;height:19px;border-radius:99px;
  background:rgba(255,255,255,.20);transition:background .18s ease;
}
.nav-pin .switch>i{
  position:absolute;top:2px;inset-inline-start:2px;
  width:15px;height:15px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:transform .18s ease;
}
/* الحركة **فيزيائية لا منطقية**: المفتاح يمشي يميناً/يساراً بصرياً في RTL وLTR
   سواءً — والخاصية المنطقية كانت ستعكس اتجاهه مع اتجاه القراءة. */
.nav-pin.is-on .switch{background:var(--fdx-orange)}
.nav-pin.is-on .switch>i{transform:translateX(-15px)}
:where([dir="ltr"]) .nav-pin.is-on .switch>i{transform:translateX(15px)}
.nav-pin.is-on{color:#fff;background:transparent}
.nav-pin.is-on:hover{background:rgba(255,255,255,.09)}
.app.nav-pinned .nav-pin{background:transparent}
.app.nav-pinned .nav-pin:hover{background:rgba(255,255,255,.09)}

/* خط فاصل بين مجموعات الشريط — «ثم نضغط خط وبعده تأتي الأقسام» (أبوأحمد 08-24) */
.nav .wk-nav-group + .wk-nav-group,
#nav .wk-nav-group + .wk-nav-group{
  border-top:1px solid rgba(255,255,255,.10);
  margin-top:8px;padding-top:8px;
}


/* ══════════════════════════════════════════════════════════════════════════
   القسم [ب] — إضافات FuHR وحدها. كل كلاس هنا بسابقة `hr-`
   إلا امتدادَ عقد Work نفسه: `.chip` + `.st-<اسم الحالة في الباك-اند>`
   (هذه ليست تسميةً جديدة، بل تكملة لقاعدة Work المعلنة في المعجم أعلاه).
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- حالات FuHR على عقد .chip.st-* ----------
   الأسماء **مطابقة لقيم الحالة في الخادم** حرفياً (docs/leave/pay/conduct). */
.st-ok{background:var(--good-bg);color:var(--good)}
.st-expiring{background:var(--warn-bg);color:var(--warn)}
.st-expired{background:var(--bad-bg);color:var(--bad)}
.st-missing{background:#eceef4;color:#5f6579}
.st-pending{background:var(--info-bg);color:var(--info)}
.st-pending_manager{background:var(--warn-bg);color:var(--warn)}
.st-pending_hr{background:var(--fdx-orange-soft);color:#c94500}
.st-draft{background:#eceef4;color:#5f6579}
.st-finance{background:var(--info-bg);color:var(--info)}
.st-approval{background:var(--purple-soft);color:#6a48c0}
.st-locked{background:#e3dff2;color:var(--fdx-purple)}
.st-published{background:var(--good-bg);color:var(--good)}
.st-active{background:var(--good-bg);color:var(--good)}
.st-inactive{background:#eceef4;color:#5f6579}
.st-probation{background:var(--warn-bg);color:var(--warn)}
.st-left{background:#eceef4;color:#5f6579}
.st-verbal{background:#eef0f6;color:var(--ink-2)}
.st-written{background:var(--info-bg);color:var(--info)}
.st-deduction{background:var(--warn-bg);color:var(--warn)}
.st-suspension{background:#fdeadf;color:#b3510e}
.st-termination{background:var(--bad-bg);color:var(--bad)}
.st-paid{background:var(--good-bg);color:var(--good)}
.st-unpaid{background:var(--bad-bg);color:var(--bad)}
.st-open{background:var(--info-bg);color:var(--info)}
.st-closed{background:#eceef4;color:#5f6579}

/* ---------- «تعذّر القياس» — المكوّن الحاكم: لا رقم مختلق، والمصدر مذكور ----------
   HR.unmeasured(source) — عنصر أنيق لا رسالة خطأ. داخل .kpi استعمل الشكل المضغوط. */
.hr-unmeasured{
  display:inline-flex;align-items:flex-start;gap:9px;
  padding:9px 12px;
  border:1.5px dashed var(--line-2);border-radius:var(--radius-sm);
  background:repeating-linear-gradient(135deg,#fbfbfe 0 7px,#f4f5fb 7px 14px);
  color:var(--ink-2);text-align:start;
}
.hr-unmeasured .icon{flex:none;color:var(--ink-3);margin-top:2px}
.hr-unm-body{min-width:0}
.hr-unm-title{font-size:.82rem;font-weight:800;color:var(--ink-2);line-height:1.4}
.hr-unm-src{font-size:.7rem;font-weight:700;color:var(--ink-3)}
.hr-unm-why{font-size:.7rem;color:var(--ink-3);margin-top:2px;word-break:break-word}
.hr-unmeasured.block{display:flex;width:100%}
.hr-unmeasured.compact{
  padding:0;border:0;background:none;gap:7px;align-items:center;
}
.hr-unmeasured.compact .hr-unm-title{font-size:1.02rem;font-weight:800;color:var(--ink-3)}
.hr-unmeasured.compact .hr-unm-src{font-size:.66rem}

/* ---------- شريط ملاحظة داخل الصفحة (تنبيه تضخّم الأرصدة، فجوة الاستئذانات…) ---------- */
.hr-note{
  display:flex;align-items:flex-start;gap:10px;
  margin:0 0 12px;padding:10px 13px;
  border-radius:var(--radius-sm);
  background:var(--warn-bg);border:1px solid #f0dcbc;color:#6a4a15;
  font-size:.82rem;line-height:1.7;
}
.hr-note .icon{flex:none;color:var(--warn);margin-top:2px}
.hr-note.info{background:var(--info-bg);border-color:#cfdcfa;color:#22417f}
.hr-note.info .icon{color:var(--info)}
.hr-note.bad{background:var(--bad-bg);border-color:#f2c8c8;color:#8c2323}
.hr-note.bad .icon{color:var(--bad)}
.hr-note.good{background:var(--good-bg);border-color:#c7e8d6;color:#126640}
.hr-note.good .icon{color:var(--good)}

/* ---------- صفوف أزرار: لغم الـ360px (صفٌّ يتجاوز ٤ أزرار ينهار أربعة أسطر) ----------
   .hr-actions يلتف   |   .hr-toolbar شريط سطرٍ واحد يتمرّر أفقياً داخل نفسه. */
.hr-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hr-toolbar{
  display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  overflow-x:auto;overscroll-behavior-x:contain;
  padding-bottom:4px;margin-bottom:10px;scrollbar-width:thin;
}
.hr-toolbar>*{flex:none}
.hr-toolbar .grow{flex:1 1 auto;min-width:150px}
.hr-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.hr-filters .field{margin-bottom:0;min-width:150px}
.hr-filters .search-box{flex:1 1 220px;min-width:180px}

/* ---------- أرقام جدوليّة ---------- */
.hr-num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.hr-pos{color:var(--good);font-weight:800}
.hr-neg{color:var(--bad);font-weight:800}
.hr-dash{color:var(--ink-3)}

/* ---------- ثنائيات مفتاح/قيمة (بطاقة البيانات والعقد في ملف 360) ---------- */
.hr-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:11px 16px}
.hr-kv-item{min-width:0}
.hr-kv-k{font-size:.71rem;font-weight:800;color:var(--ink-3)}
.hr-kv-v{font-size:.86rem;font-weight:700;line-height:1.6;word-break:break-word}

/* ---------- تخطيط عمودين (محتوى + عمود جانبي) ---------- */
.hr-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:14px;align-items:start}

/* ---------- شريط تقدّم بسيط ---------- */
.hr-bar{height:8px;border-radius:99px;background:#eceef4;overflow:hidden}
.hr-bar>i{display:block;height:100%;border-radius:99px;background:var(--fdx-orange);transition:width .45s ease}
.hr-bar.good>i{background:var(--good)}
.hr-bar.warn>i{background:var(--warn)}
.hr-bar.bad>i{background:var(--bad)}
.hr-bar.sm{height:6px}

/* ---------- توزيع القوى العاملة (قسم/عقد/مدّة خدمة) ---------- */
.hr-dist{display:flex;flex-direction:column;gap:9px}
.hr-dist-row{display:grid;grid-template-columns:minmax(84px,32%) minmax(0,1fr) auto;gap:10px;align-items:center}
.hr-dist-k{font-size:.79rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-dist-v{font-size:.78rem;font-weight:800;color:var(--ink-2);min-width:32px;text-align:end}

/* ══════════ .hr-matrix — مصفوفة الجاهزية (موظفون × مستندات) ══════════
   العمود الأول لاصق باسم الموظف، والتمرير الأفقي **داخل الحاوية وحدها**
   فلا تتمرّر الصفحة أفقياً أبداً. border-spacing لا collapse كي يعمل sticky. */
.hr-matrix-wrap{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  overflow-x:auto;overscroll-behavior-x:contain;max-width:100%;
}
.hr-matrix-wrap.tall{max-height:70vh;overflow-y:auto}
.hr-matrix{
  width:100%;min-width:720px;
  border-collapse:separate;border-spacing:0;
  font-size:.82rem;
}
.hr-matrix th,.hr-matrix td{
  padding:8px 10px;text-align:center;white-space:nowrap;
  background:#fff;border-bottom:1px solid #f0f1f7;
}
.hr-matrix thead th{
  position:sticky;top:0;z-index:3;
  background:#fafbfe;color:var(--ink-2);
  font-size:.7rem;font-weight:800;border-bottom:1px solid var(--line);
}
.hr-matrix thead th.hr-m-name{z-index:4}
.hr-matrix .hr-m-name{
  position:sticky;inset-inline-start:0;z-index:2;
  text-align:start;min-width:168px;max-width:240px;
  border-inline-end:1px solid var(--line-2);
}
.hr-matrix .hr-m-name .hr-m-person{display:flex;align-items:center;gap:8px;min-width:0}
.hr-matrix .hr-m-name .hr-m-t{min-width:0}
.hr-matrix .hr-m-nm{font-weight:800;font-size:.82rem;overflow:hidden;text-overflow:ellipsis}
.hr-matrix .hr-m-dp{font-size:.68rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}
.hr-matrix tbody tr:hover td{background:#fafafe}
.hr-matrix tbody tr:last-child td{border-bottom:0}
.hr-matrix .hr-m-score{min-width:96px}
.hr-matrix th.hr-m-rot{font-weight:800;max-width:96px;white-space:normal;line-height:1.35}

/* خلية الحالة — الأسماء مطابقة لقيم الخادم: ok expiring expired missing pending */
.hr-cell{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  min-width:34px;height:26px;padding:0 8px;
  border:1px solid transparent;border-radius:8px;
  font-size:.7rem;font-weight:800;line-height:1;
}
.hr-cell .icon{width:13px;height:13px}
.hr-cell.is-ok{background:var(--good-bg);color:var(--good)}
.hr-cell.is-expiring{background:var(--warn-bg);color:var(--warn)}
.hr-cell.is-expired{background:var(--bad-bg);color:var(--bad)}
.hr-cell.is-missing{background:#f7f8fc;color:var(--ink-3);border-color:var(--line-2);border-style:dashed}
.hr-cell.is-pending{background:var(--info-bg);color:var(--info)}
.hr-cell.click{cursor:pointer;transition:box-shadow .14s,transform .1s}
.hr-cell.click:hover{box-shadow:0 0 0 2px rgba(58,38,102,.12);transform:translateY(-1px)}

/* دليل الألوان تحت المصفوفة */
.hr-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:.75rem;color:var(--ink-2)}
.hr-legend-item{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.hr-legend-sw{width:13px;height:13px;border-radius:4px;border:1px solid transparent;flex:none}
.hr-legend-sw.is-ok{background:var(--good-bg);border-color:#bfe3cf}
.hr-legend-sw.is-expiring{background:var(--warn-bg);border-color:#eed9b6}
.hr-legend-sw.is-expired{background:var(--bad-bg);border-color:#f0c5c5}
.hr-legend-sw.is-missing{background:#f7f8fc;border-color:var(--line-2);border-style:dashed}
.hr-legend-sw.is-pending{background:var(--info-bg);border-color:#c9d8f8}

/* ══════════ .hr-ring — حلقة اكتمال الملف ══════════
   HR.ring(pct,{size,stroke,label,tone}) — والقيمة null تعطي حلقةً «غير مقيسة». */
.hr-ring{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none}
.hr-ring svg{display:block;transform:rotate(-90deg)}
.hr-ring-track{fill:none;stroke:#eceef4}
.hr-ring-val{fill:none;stroke:var(--fdx-orange);stroke-linecap:round;transition:stroke-dashoffset .55s ease}
.hr-ring.good .hr-ring-val{stroke:var(--good)}
.hr-ring.warn .hr-ring-val{stroke:var(--warn)}
.hr-ring.bad .hr-ring-val{stroke:var(--bad)}
.hr-ring.purple .hr-ring-val{stroke:var(--fdx-purple)}
.hr-ring.is-unknown .hr-ring-val{stroke:var(--line-2);stroke-dasharray:3 6}
.hr-ring-cap{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  text-align:center;padding:6px;
}
.hr-ring-num{font-size:1.2rem;font-weight:800;color:var(--fdx-purple);line-height:1.1}
.hr-ring.is-unknown .hr-ring-num{font-size:1rem;color:var(--ink-3)}
.hr-ring-lab{font-size:.65rem;font-weight:700;color:var(--ink-3);line-height:1.3}

/* ══════════ .hr-cal — تقويم الغياب الشهري (٧ أعمدة) ══════════ */
.hr-cal-wrap{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px}
.hr-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;min-width:560px}
.hr-cal-head{
  font-size:.7rem;font-weight:800;color:var(--ink-3);
  text-align:center;padding:2px 0 4px;
}
.hr-cal-day{
  min-height:92px;padding:6px;
  display:flex;flex-direction:column;gap:4px;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:10px;
}
.hr-cal-day.is-out{background:#fafbfe;border-style:dashed;opacity:.65}
.hr-cal-day.is-weekend{background:#f7f8fc}
.hr-cal-day.is-today{border-color:var(--fdx-orange);box-shadow:0 0 0 2px var(--fdx-orange-soft)}
.hr-cal-day.is-clash{border-color:#eec49c;background:#fff8f1}
.hr-cal-n{font-size:.72rem;font-weight:800;color:var(--ink-2);line-height:1}
.hr-cal-day.is-today .hr-cal-n{color:var(--fdx-orange)}
.hr-cal-slips{display:flex;flex-direction:column;gap:3px;min-height:0;overflow:hidden}
.hr-cal-slip{
  font-size:.68rem;font-weight:700;line-height:1.5;
  padding:1px 6px;border-radius:6px;
  background:var(--purple-soft);color:var(--fdx-purple);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hr-cal-slip.good{background:var(--good-bg);color:var(--good)}
.hr-cal-slip.warn{background:var(--warn-bg);color:var(--warn)}
.hr-cal-slip.bad{background:var(--bad-bg);color:var(--bad)}
.hr-cal-slip.info{background:var(--info-bg);color:var(--info)}
.hr-cal-more{font-size:.65rem;font-weight:700;color:var(--ink-3)}

/* ══════════ .hr-radar — رادار الثلاثين يوماً ══════════ */
.hr-radar{display:flex;flex-direction:column;gap:8px}
.hr-radar-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:9px 12px;
  background:var(--bg);border:1px solid var(--line);
  border-inline-start:3px solid var(--ink-3);
  border-radius:var(--radius-sm);
}
.hr-radar-item.bad{background:var(--bad-bg);border-color:#f2c8c8;border-inline-start-color:var(--bad)}
.hr-radar-item.warn{background:var(--warn-bg);border-color:#f0dcbc;border-inline-start-color:var(--warn)}
.hr-radar-item.info{background:var(--info-bg);border-color:#cfdcfa;border-inline-start-color:var(--info)}
.hr-radar-item .icon{flex:none;margin-top:2px;color:var(--ink-3)}
.hr-radar-item.bad .icon{color:var(--bad)}
.hr-radar-item.warn .icon{color:var(--warn)}
.hr-radar-item.info .icon{color:var(--info)}
.hr-radar-body{flex:1;min-width:0}
.hr-radar-title{font-size:.85rem;font-weight:800;line-height:1.5}
.hr-radar-meta{font-size:.72rem;color:var(--ink-2);font-weight:600}
.hr-radar-days{
  flex:none;align-self:center;
  padding:2px 10px;border-radius:999px;background:#fff;
  font-size:.72rem;font-weight:800;white-space:nowrap;
}

/* ══════════ .hr-ladder — تدرّج الجزاءات (مخالفة × تكرار) ══════════ */
.hr-ladder-wrap{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-1);overflow-x:auto;overscroll-behavior-x:contain;
}
.hr-ladder{width:100%;min-width:600px;border-collapse:separate;border-spacing:0;font-size:.82rem}
.hr-ladder th{
  position:sticky;top:0;z-index:3;
  padding:9px 10px;text-align:center;white-space:nowrap;
  background:#fafbfe;color:var(--ink-2);font-size:.7rem;font-weight:800;
  border-bottom:1px solid var(--line);
}
.hr-ladder td{padding:7px 10px;text-align:center;background:#fff;border-bottom:1px solid #f0f1f7}
.hr-ladder tr:last-child td{border-bottom:0}
.hr-ladder .hr-lad-rule{
  position:sticky;inset-inline-start:0;z-index:2;
  text-align:start;font-weight:700;min-width:196px;white-space:normal;line-height:1.55;
  border-inline-end:1px solid var(--line-2);
}
.hr-ladder th.hr-lad-rule{z-index:4}
.hr-ladder tbody tr:hover td{background:#fafafe}
.hr-lad-step{
  display:inline-block;padding:2px 10px;border-radius:7px;
  font-size:.72rem;font-weight:800;white-space:nowrap;
}
.hr-lad-step.s1{background:#eef0f6;color:var(--ink-2)}
.hr-lad-step.s2{background:var(--info-bg);color:var(--info)}
.hr-lad-step.s3{background:var(--warn-bg);color:var(--warn)}
.hr-lad-step.s4{background:#fdeadf;color:#b3510e}
.hr-lad-step.s5{background:var(--bad-bg);color:var(--bad)}
.hr-lad-step.is-now{box-shadow:0 0 0 2px rgba(255,87,0,.42)}

/* ══════════ .hr-payline — صفوف المسير ══════════ */
.hr-payline-wrap{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-1);overflow-x:auto;overscroll-behavior-x:contain;
}
.hr-payline{
  width:100%;min-width:820px;border-collapse:separate;border-spacing:0;
  font-size:.84rem;font-variant-numeric:tabular-nums;
}
.hr-payline th{
  position:sticky;top:0;z-index:3;
  padding:9px 12px;white-space:nowrap;text-align:start;
  background:#fafbfe;color:var(--ink-2);font-size:.71rem;font-weight:800;
  border-bottom:1px solid var(--line);
}
.hr-payline th.hr-num{text-align:right}
.hr-payline td{padding:8px 12px;background:#fff;border-bottom:1px solid #f0f1f7;white-space:nowrap}
.hr-payline tbody tr:hover td{background:#fafafe}
.hr-payline .hr-pl-emp{
  position:sticky;inset-inline-start:0;z-index:2;
  min-width:180px;font-weight:800;border-inline-end:1px solid var(--line-2);
}
.hr-payline th.hr-pl-emp{z-index:4}
.hr-payline .hr-pl-net{font-weight:800;color:var(--fdx-purple)}
.hr-payline tfoot td{
  position:sticky;bottom:0;
  background:#f7f8fd;font-weight:800;
  border-top:2px solid var(--line-2);border-bottom:0;
}

/* ══════════ .hr-stage — شريط المراحل (مسودة ← مالية ← اعتماد ← مقفل ← منشور) ══════════ */
.hr-stage{
  display:flex;align-items:center;gap:4px;flex-wrap:nowrap;
  overflow-x:auto;overscroll-behavior-x:contain;
  padding:2px 0 6px;scrollbar-width:thin;
}
.hr-stage-step{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:9px;
  background:#eef0f6;color:var(--ink-2);
  font-size:.78rem;font-weight:800;white-space:nowrap;
}
.hr-stage-step.is-done{background:var(--good-bg);color:var(--good)}
.hr-stage-step.is-now{background:var(--fdx-orange);color:#fff;box-shadow:0 2px 9px rgba(255,87,0,.3)}
.hr-stage-num{
  flex:none;width:19px;height:19px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(58,38,102,.09);font-size:.68rem;line-height:1;
}
.hr-stage-step.is-now .hr-stage-num{background:rgba(255,255,255,.28)}
.hr-stage-sep{flex:none;color:var(--ink-3);font-weight:800}

/* ══════════ .hr-person — رأس ملف الموظف 360 ══════════ */
.hr-person{
  display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding:18px 20px;margin:0 0 16px;
  background:linear-gradient(160deg,var(--purple-soft) 0%,#fff 64%);
  border:1px solid var(--line);border-radius:var(--radius);
}
.hr-person-id{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 260px}
.hr-person-t{min-width:0}
.hr-person-name{font-size:1.16rem;font-weight:800;color:var(--fdx-purple);line-height:1.35}
.hr-person-title{font-size:.85rem;font-weight:600;color:var(--ink-2)}
.hr-person-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.hr-person-ring{flex:none;margin-inline-start:auto}
.hr-person-actions{display:flex;gap:8px;flex-wrap:wrap;width:100%;padding-top:4px}
.avatar.xl{width:64px;height:64px;font-size:1.45rem}

/* ---------- التجاوب: يعمل من 360px صعوداً ---------- */
@media (max-width:900px){
  .hr-split{grid-template-columns:minmax(0,1fr)}
  .hr-person-ring{margin-inline-start:0}
}
@media (max-width:640px){
  .hr-kv{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .hr-cal-day{min-height:70px;padding:4px}
  .hr-cal-slip{font-size:.63rem;padding:1px 4px}
  .hr-matrix .hr-m-name{min-width:132px;max-width:150px}
  .hr-person{padding:14px}
  .hr-person-name{font-size:1.04rem}
  .hr-dist-row{grid-template-columns:minmax(72px,38%) minmax(0,1fr) auto}
}
@media (max-width:400px){
  /* لغم فيودكس الموثّق: صفّ أزرارٍ يتجاوز أربعة ينهار أربعة أسطر على 360px.
     الأزرار داخل .hr-actions تتقاسم السطر بدل أن يقفز كلٌّ منها لسطره. */
  .hr-actions>.btn{flex:1 1 calc(50% - 4px);justify-content:center}
  .hr-filters .field,.hr-filters .search-box{min-width:100%}
}

/* ---------- تصحيحٌ لازم على القاعدة المنقولة (لا تحذفه عند تحديث المعجم) ----------
   عند ≤900px يصير الشريط الجانبي شريطاً سفلياً `position:fixed; inset-inline:0`،
   لكنّ `width:var(--side-w)` من الحالة المكتبية يبقى ساريَ المفعول فيتقيّد العرض
   بـ64px؛ وفي RTL تُهمَل الحافة الأخرى (CSS 2.1 §10.3.7) فيلتصق الشريط بيمين
   الشاشة بعرض أيقونةٍ واحدة. إعادة width إلى auto تعيده شريطاً كامل العرض.
   (في Work يعالَج هذا في m-shell.css المنفصل، ولا وجود له هنا.) */
@media (max-width:900px){
  .sidebar{width:auto}
}