/* =========================================================================
   نظام رمال للموارد البشرية — التصميم
   Remal HR — premium dark "sand-on-charcoal" theme, RTL
   ========================================================================= */
/* ===== الوضع الفاتح | Light theme (الافتراضي) — Bamboo-style fresh green ===== */
:root{
  --bg:#f6f8f5;
  --bg-2:#ffffff;
  --bg-grad-1:#eef4ea;
  --bg-grad-2:#e6f0ea;
  --surface:#ffffff;
  --surface-2:#f3f7f1;
  --line:#16321612;
  --border:#e2e8dd;
  --sand:#16241a;
  --sand-dim:#52684f;
  --gold:#2f8f4e;          /* الأخضر الأساسي الاحترافي */
  --gold-soft:#46a865;
  --text:#1a2620;
  --muted:#6a7a6d;
  --green:#2f9b57;
  --red:#dc5a52;
  --amber:#d39528;
  --blue:#3f80c4;
  --scroll:#cdd9c8;
  --radius:14px;
  --shadow:0 10px 34px -20px rgba(30,90,50,.22);
  --font:'Tajawal',system-ui,sans-serif;
  --display:'Cairo',var(--font);
  --t:.22s cubic-bezier(.4,0,.2,1);
}

/* ===== الوضع الغامق | Dark theme ===== */
:root[data-theme="dark"]{
  --bg:#0f1512;
  --bg-2:#161d18;
  --bg-grad-1:#141c16;
  --bg-grad-2:#131a16;
  --surface:#19211b;
  --surface-2:#212a23;
  --line:#dff0e308;
  --border:#2e3a31;
  --sand:#eef3ec;
  --sand-dim:#b9c7ba;
  --gold:#4eb878;
  --gold-soft:#3c9862;
  --text:#eef3ec;
  --muted:#93a395;
  --green:#5cc183;
  --red:#e08980;
  --amber:#e0b766;
  --blue:#7fadd8;
  --scroll:#3a3528;
  --shadow:0 16px 44px -22px rgba(0,0,0,.6);
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{
  font-family:var(--font);
  background:
    radial-gradient(1200px 700px at 90% -10%, var(--bg-grad-1) 0%, transparent 55%),
    radial-gradient(900px 600px at -10% 110%, var(--bg-grad-2) 0%, transparent 50%),
    var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  transition:background var(--t), color var(--t);
}
html[dir="rtl"], body[dir="rtl"]{direction:rtl}
html[dir="ltr"], body[dir="ltr"]{direction:ltr}
body{direction:rtl}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--bg-2)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
/* انتقالات سلسة على عناصر الثيم */
.card,.nav-link,.btn,.badge,.kpi,.stat,.bal-card,.org-node,.cand,.pipe-col,
.modal,.hbar-track,input,select,textarea,table tr,.tab,.doc-row,.av,.user-chip{
  transition:background var(--t), color var(--t), border-color var(--t),
             box-shadow var(--t), transform var(--t);
}

/* ---------- التخطيط العام ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:264px;flex-shrink:0;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border-inline-start:1px solid var(--border);
  padding:26px 18px;
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;gap:6px;
  box-shadow:-4px 0 20px -10px rgba(0,0,0,.06);
  overflow-y:auto;
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px}
:root[data-theme="dark"] .sidebar{
  background:linear-gradient(180deg,#1b1812,#161410);
}
.main{flex:1;min-width:0;padding:30px 38px 60px}

/* ---------- البراند ---------- */
.brand{display:flex;align-items:center;gap:13px;padding:4px 8px 22px;
  border-bottom:1px solid var(--border);margin-bottom:14px}
.brand img{width:46px;height:46px;border-radius:11px;object-fit:contain;
  background:var(--surface-2)}
.brand .b-name{font-family:var(--display);font-weight:800;font-size:1.12rem;
  letter-spacing:.5px;color:var(--sand)}
.brand .b-sub{font-size:.62rem;letter-spacing:3px;color:var(--gold-soft);
  text-transform:uppercase;margin-top:2px}
.powered-by-side{text-align:center;font-size:.62rem;color:var(--muted);
  letter-spacing:.5px;padding:10px 0 4px;opacity:.75}
.powered-by-side b{color:var(--gold-soft)}

/* ---------- روابط التنقل ---------- */
.nav-group{font-size:.66rem;letter-spacing:2px;color:var(--muted);
  text-transform:uppercase;margin:16px 10px 6px;font-weight:700;opacity:.75}
.nav-link{display:flex;align-items:center;gap:12px;padding:11px 13px;
  border-radius:11px;color:var(--muted);font-weight:600;font-size:.92rem;
  transition:.18s;position:relative}
.nav-link svg{width:19px;height:19px;flex-shrink:0;opacity:.85}
.nav-link:hover{background:var(--surface-2);color:var(--text)}
.nav-link.active{background:linear-gradient(90deg,rgba(200,147,68,.18),rgba(200,147,68,.04));
  color:var(--sand)}
:root[data-theme="dark"] .nav-link.active{background:linear-gradient(90deg,#2c2719,#241f16)}
.nav-link.active::before{content:"";position:absolute;inset-inline-start:-18px;
  top:18%;height:64%;width:3px;border-radius:4px;background:var(--gold)}
.sidebar .spacer{flex:1}
.user-chip{display:flex;align-items:center;gap:11px;padding:11px 13px;
  border-radius:12px;background:var(--surface);border:1px solid var(--border)}
.user-chip .av{width:34px;height:34px;border-radius:9px;display:grid;
  place-items:center;background:var(--gold);color:#1a1812;font-weight:800}
.user-chip small{color:var(--muted);font-size:.72rem}

/* ---------- رأس الصفحة ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:26px;flex-wrap:wrap}
.page-head h1{font-family:var(--display);font-size:1.7rem;font-weight:800;
  color:var(--sand);letter-spacing:.3px}
.page-head .sub{color:var(--muted);font-size:.9rem;margin-top:4px}

/* ---------- البطاقات ---------- */
.card{background:linear-gradient(160deg,var(--surface),var(--bg-2));
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow)}
.card .c-head{padding:18px 22px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.card .c-head h3{font-family:var(--display);font-size:1.05rem;color:var(--sand)}
.card .c-body{padding:20px 22px}

/* ---------- KPIs ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:16px;margin-bottom:26px}
.kpi{background:linear-gradient(160deg,var(--surface),var(--bg-2));
  border:1px solid var(--border);border-radius:var(--radius);padding:20px;
  position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;inset-block-start:-40px;
  inset-inline-start:-40px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,#3a342410,transparent 70%)}
.kpi .k-ico{width:42px;height:42px;border-radius:11px;display:grid;
  place-items:center;background:var(--surface-2);margin-bottom:14px}
.kpi .k-ico svg{width:21px;height:21px;color:var(--gold)}
.kpi .k-val{font-family:var(--display);font-size:1.95rem;font-weight:800;
  color:var(--text);line-height:1}
.kpi .k-lbl{color:var(--muted);font-size:.85rem;margin-top:6px}
.kpi.accent{background:linear-gradient(160deg,var(--gold),var(--gold-soft));
  border-color:var(--gold-soft);color:#fff}
.kpi.accent .k-val,.kpi.accent .k-lbl{color:#fff}
.kpi.accent .k-ico{background:rgba(255,255,255,.18)}
.kpi.accent .k-ico svg{color:#fff}
:root[data-theme="dark"] .kpi.accent{background:linear-gradient(160deg,#2a2517,#221d12);
  border-color:#4a4126;color:var(--text)}
:root[data-theme="dark"] .kpi.accent .k-val{color:var(--gold)}
:root[data-theme="dark"] .kpi.accent .k-lbl{color:var(--muted)}
:root[data-theme="dark"] .kpi.accent .k-ico{background:var(--surface-2)}
:root[data-theme="dark"] .kpi.accent .k-ico svg{color:var(--gold)}

/* ---------- الجداول ---------- */
table{width:100%;border-collapse:collapse;font-size:.9rem}
thead th{text-align:start;padding:13px 16px;color:var(--gold-soft);
  font-weight:700;font-size:.74rem;letter-spacing:1px;text-transform:uppercase;
  border-bottom:1px solid var(--border)}
tbody td{padding:13px 16px;border-bottom:1px solid var(--border);color:var(--text)}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:none}
.t-name{font-weight:700;color:var(--sand)}
.t-sub{color:var(--muted);font-size:.78rem}

/* ---------- الشارات ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;
  border-radius:20px;font-size:.74rem;font-weight:700;border:1px solid transparent}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.b-green{color:var(--green);background:#2a3327;border-color:#3c4a37}
.b-red{color:var(--red);background:#332624;border-color:#4a3733}
.b-amber{color:var(--amber);background:#332d1e;border-color:#4a402a}
.b-blue{color:var(--blue);background:#243038;border-color:#34454f}
.b-muted{color:var(--muted);background:#26241d;border-color:#39342a}

/* ---------- الأزرار ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;
  border-radius:11px;border:1px solid var(--border);background:var(--surface-2);
  color:var(--text);font-family:var(--font);font-weight:700;font-size:.88rem;
  cursor:pointer;transition:.16s}
.btn:hover{border-color:var(--gold-soft);transform:translateY(-1px)}
.btn svg{width:17px;height:17px}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-soft));
  color:#1a1812;border:none}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost{background:transparent}
.btn-sm{padding:7px 13px;font-size:.8rem}
.btn-danger{color:var(--red);border-color:#4a3733}
.btn-danger:hover{background:#332624}

/* ---------- النماذج ---------- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.82rem;color:var(--sand-dim);font-weight:600}
.field input,.field select,.field textarea{
  background:var(--bg);border:1px solid var(--border);border-radius:10px;
  padding:11px 13px;color:var(--text);font-family:var(--font);font-size:.9rem;
  transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold-soft);box-shadow:0 0 0 3px #c9b48922}
.field .hint{font-size:.72rem;color:var(--muted)}

/* ---------- المودال ---------- */
.modal-bg{position:fixed;inset:0;background:#0c0b08cc;backdrop-filter:blur(5px);
  display:none;align-items:flex-start;justify-content:center;z-index:50;
  padding:40px 16px;overflow-y:auto}
.modal-bg.open{display:flex}
.modal{width:100%;max-width:680px;background:linear-gradient(160deg,var(--surface),var(--bg-2));
  border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);
  animation:pop .2s ease}
@keyframes pop{from{transform:translateY(14px) scale(.98);opacity:0}}
.modal .m-head{padding:20px 24px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between}
.modal .m-head h3{font-family:var(--display);color:var(--sand)}
.modal .m-body{padding:24px}
.modal .m-foot{padding:16px 24px;border-top:1px solid var(--border);
  display:flex;gap:10px;justify-content:flex-start}
.x-close{cursor:pointer;color:var(--muted);font-size:1.5rem;line-height:1;
  background:none;border:none}

/* ---------- فلاش ---------- */
.flash-wrap{position:fixed;top:20px;left:50%;transform:translateX(-50%);
  z-index:100;display:flex;flex-direction:column;gap:10px}
.flash{padding:13px 22px;border-radius:12px;font-weight:700;font-size:.9rem;
  box-shadow:var(--shadow);animation:slidein .3s}
@keyframes slidein{from{transform:translateY(-20px);opacity:0}}
.flash.success{background:#2a3327;color:var(--green);border:1px solid #3c4a37}
.flash.error{background:#332624;color:var(--red);border:1px solid #4a3733}

/* ---------- مساعدات ---------- */
.toolbar{display:flex;gap:12px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.toolbar .grow{flex:1}
.search{position:relative;min-width:240px}
.search input{width:100%;padding-inline-start:40px}
.search svg{position:absolute;inset-inline-start:13px;top:50%;
  transform:translateY(-50%);width:17px;color:var(--muted)}
.empty{text-align:center;padding:50px 20px;color:var(--muted)}
.empty svg{width:46px;height:46px;opacity:.4;margin-bottom:12px}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-3{display:grid;grid-template-columns:2fr 1fr;gap:20px}
.mono{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.dep-bar{height:7px;border-radius:6px;background:var(--surface-2);overflow:hidden;margin-top:7px}
.dep-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-soft))}
@media(max-width:980px){
  .sidebar{position:fixed;z-index:40;transform:translateX(100%);transition:.3s}
  .sidebar.show{transform:none}
  .main{padding:20px}
  .grid-2,.grid-3{grid-template-columns:1fr}
}

/* ===== المستخدمون والصلاحيات + رصيد الإجازات + المستندات ===== */
.b-gold{background:rgba(201,180,137,.16);color:var(--gold)}
.av-sm{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--gold),#9c8757);color:#1a1711;font-weight:800;font-size:.8rem;flex:none}
.icon-act{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;color:var(--muted);
  border:1px solid transparent}
.icon-act:hover{background:var(--card-2,#1f1c15);color:var(--sand)}
.icon-act.danger:hover{color:#d98a82}
.perm-legend{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;font-size:.88rem;color:var(--muted)}
.perm-legend .badge{margin-inline-end:6px}
@media(max-width:700px){.perm-legend{grid-template-columns:1fr}}

/* رصيد الإجازات */
.balance-strip{display:grid;grid-template-columns:repeat(3,auto) 1fr;gap:14px;align-items:center;
  background:linear-gradient(150deg,var(--surface),var(--bg-2));border:1px solid var(--border);border-radius:16px;
  padding:18px 20px;margin-bottom:20px}
@media(max-width:820px){.balance-strip{grid-template-columns:1fr 1fr}}
.bal-card{display:flex;align-items:center;gap:12px}
.bal-card.accent{background:rgba(201,180,137,.08);border-radius:12px;padding:8px 14px}
.bal-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--bg);
  border:1px solid var(--border);color:var(--gold)}
.bal-ic svg{width:20px;height:20px}
.bal-v{font-family:var(--display);font-size:1.6rem;font-weight:800;line-height:1}
.bal-k{font-size:.78rem;color:var(--muted);margin-top:3px}
.bal-bar-wrap{min-width:160px}
.bal-bar{height:8px;background:var(--bg);border-radius:6px;overflow:hidden;border:1px solid var(--border)}
.bal-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#9c8757)}

/* المستندات */
.doc-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.doc-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--bg);
  border:1px solid var(--border);color:var(--gold);flex:none}
.doc-ic svg{width:17px;height:17px}
.upload-box{margin-top:16px;padding-top:16px;border-top:1px dashed var(--border);display:flex;flex-direction:column;gap:10px}
.upload-box input[type=file]{font-size:.82rem;color:var(--muted)}

/* تصغير أيقونات عناوين الكروت */
.c-head h3 svg{width:18px;height:18px;vertical-align:-3px;margin-inline-end:7px;color:var(--gold)}
.c-head h3{display:flex;align-items:center}

/* ===== الرسوم والتحليلات + الهيكل التنظيمي ===== */
.tabs{display:inline-flex;gap:6px;background:#1f1c15;border:1px solid var(--border);border-radius:13px;padding:4px;margin-bottom:20px}
.tab{background:none;border:none;color:var(--muted);padding:9px 20px;border-radius:9px;font-weight:700;font-size:14px;
  text-decoration:none;display:inline-block}
.tab.on{background:var(--gold);color:#1a1711}
.hbars{display:flex;flex-direction:column;gap:15px;padding:6px 0}
.hbar-row{display:grid;grid-template-columns:130px 1fr auto;gap:14px;align-items:center}
.hbar-label{font-size:13.5px;color:var(--sand);font-weight:500}
.hbar-track{height:12px;background:var(--bg);border-radius:7px;overflow:hidden;border:1px solid var(--border)}
.hbar-track i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#9c8757);border-radius:7px}
.hbar-val{font-size:13.5px;font-weight:700;color:var(--gold);min-width:46px;text-align:end}

.orgchart{min-width:max-content;margin:0 auto;padding:10px}
.orgchart ul{display:flex;justify-content:center;padding-top:26px;position:relative;margin:0;list-style:none}
.orgchart li{text-align:center;position:relative;padding:26px 12px 0;display:flex;flex-direction:column;align-items:center}
.orgchart li::before,.orgchart li::after{content:"";position:absolute;top:0;width:50%;height:26px;border-top:2px solid var(--border)}
.orgchart li::before{inset-inline-start:50%;border-inline-start:2px solid var(--border)}
.orgchart li::after{inset-inline-end:50%}
.orgchart li:only-child::before,.orgchart li:only-child::after{display:none}
.orgchart li:only-child{padding-top:0}
.orgchart li:first-child::after,.orgchart li:last-child::before{border:0 none}
.orgchart li:last-child::after{border-inline-start:2px solid var(--border)}
.orgchart ul ul::before{content:"";position:absolute;top:0;inset-inline-start:50%;width:0;height:26px;border-inline-start:2px solid var(--border)}
.orgchart>ul>li::before,.orgchart>ul>li::after{display:none}
.org-node{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(165deg,var(--surface),var(--surface-2));
  border:1px solid var(--border);border-radius:13px;padding:12px 16px;min-width:150px;text-align:start;text-decoration:none;color:var(--sand)}
.org-node.root{flex-direction:column;gap:6px;background:linear-gradient(135deg,var(--gold),var(--gold-soft));border-color:var(--gold);color:#fff}
.org-node.root .org-nm,.org-node.root .org-role{color:#fff}
.org-node.root .org-av{background:rgba(255,255,255,.25);color:#fff}
.org-node.dept{background:linear-gradient(150deg,rgba(92,174,63,.10),var(--surface));flex-direction:column;gap:4px;text-align:center}
.org-node.emp{transition:.15s}
.org-node.emp:hover{border-color:var(--gold);transform:translateY(-2px)}
.org-av{width:32px;height:32px;border-radius:9px;background:linear-gradient(160deg,var(--gold),var(--gold-soft));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;flex:none}
.org-nm{font-weight:700;font-size:14px;color:var(--text)}
.org-role{font-size:11.5px;color:var(--muted);margin-top:2px}

/* ===== موديولات BambooHR الإضافية ===== */
.b-danger{background:rgba(217,138,130,.14);color:#d98a82}
.row-click{cursor:pointer}
.pipeline{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:860px){.pipeline{grid-template-columns:repeat(2,1fr)}}
.pipe-col{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px;min-height:90px}
.pipe-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cand{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:10px;padding:8px 10px;margin-bottom:8px}
.cand-av{width:28px;height:28px;border-radius:8px;background:linear-gradient(160deg,var(--gold),var(--gold-soft));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px;flex:none}
.cand .icon-act{transform:scaleX(-1)}
.ob-task{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--border);font-size:14px}
.ob-task:last-child{border:none}
.ob-task .done{color:var(--muted);text-decoration:line-through}
.ob-check{width:20px;height:20px;border-radius:6px;border:2px solid var(--border);display:grid;place-items:center;flex:none}
.ob-check.on{background:var(--gold);border-color:var(--gold);color:#1a1711}
.ob-check svg{width:13px;height:13px}
.ann-item{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--border)}
.ann-item:last-child{border:none}
.ann-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);margin-top:6px;flex:none;box-shadow:0 0 0 4px rgba(201,180,137,.12)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:760px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat{padding:20px}
.stat-v{font-family:var(--display);font-size:30px;font-weight:800;line-height:1}
.stat-k{font-size:12.5px;color:var(--muted);margin-top:7px}

/* شبكة صلاحيات التابات */
.mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 14px;margin-top:8px}
@media(max-width:640px){.mod-grid{grid-template-columns:repeat(2,1fr)}}
.mod-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sand-dim);cursor:pointer}
.mod-check input{width:16px;height:16px;accent-color:var(--gold);cursor:pointer}

/* روابط صغيرة (تعديل/حذف داخل الجداول) */
.lnk{background:none;border:none;color:var(--gold);font-size:11px;cursor:pointer;padding:0 4px;font-family:inherit}
.lnk.danger{color:#d8938a;text-decoration:none}
.lnk:hover{text-decoration:underline}

/* ===== حركات وانتقالات | Animations ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{opacity:0;transform:scale(.96)}100%{opacity:1;transform:scale(1)}}
.main > *{animation:fadeUp .4s cubic-bezier(.2,.7,.3,1) both}
.card{animation:fadeUp .45s cubic-bezier(.2,.7,.3,1) both}
.main .card:nth-child(2){animation-delay:.04s}
.main .card:nth-child(3){animation-delay:.08s}
.main .card:nth-child(4){animation-delay:.12s}
.kpi,.stat{animation:pop .4s cubic-bezier(.2,.7,.3,1) both}
.modal-bg.open .modal{animation:pop .26s cubic-bezier(.2,.7,.3,1)}
.flash{animation:fadeUp .35s ease both}

/* لمسات تفاعلية ألطف */
.card:hover{box-shadow:0 20px 50px -28px rgba(0,0,0,.55)}
.nav-link:hover{transform:translateX(-3px)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
table tbody tr:hover{background:var(--surface-2)}
.kpi:hover,.stat:hover{transform:translateY(-3px)}
.hbar-track i{transition:width .7s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion: reduce){
  *,.main>*,.card,.kpi,.stat{animation:none!important;transition:none!important}
}

/* زرار تبديل الثيم */
.theme-toggle{display:flex;align-items:center;gap:8px;width:100%;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;padding:9px 12px;color:var(--sand-dim);
  cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;margin-bottom:10px}
.theme-toggle:hover{border-color:var(--gold);color:var(--sand)}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle .sun{display:none}
.theme-toggle .moon{display:inline-block}
:root[data-theme="dark"] .theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:inline-block}

/* بوابة الموظف */
.grid-2-side{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:820px){.grid-2-side{grid-template-columns:1fr}}

/* شريط علوي + خروج + تبديل اللغة */
.topbar{display:flex;align-items:center;justify-content:flex-start;gap:12px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:8px 12px;margin-bottom:18px;box-shadow:var(--shadow)}
.user-pill{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.user-av{width:34px;height:34px;border-radius:10px;background:linear-gradient(160deg,var(--gold),var(--gold-soft));
  color:#fff;display:grid;place-items:center;font-weight:800}
.logout-btn{display:inline-flex;align-items:center;gap:6px;
  background:rgba(216,98,90,.1);color:#d8625a;padding:8px 12px;border-radius:10px;
  font-weight:700;font-size:13px;transition:var(--t)}
.logout-btn:hover{background:#d8625a;color:#fff}
.logout-btn svg{width:16px;height:16px}
.lang-toggle{background:var(--surface-2);border:1px solid var(--border);
  border-radius:9px;padding:7px 12px;cursor:pointer;font-family:inherit;font-weight:700;
  color:var(--sand-dim);font-size:12.5px;transition:var(--t)}
.lang-toggle:hover{background:var(--gold);color:#fff;border-color:var(--gold)}

/* أزرار الطي في الهيكل */
.org-node-wrap{position:relative;display:inline-block}
.org-collapse{position:absolute;top:-8px;inset-inline-end:-8px;width:22px;height:22px;
  border-radius:50%;background:var(--gold);color:#fff;border:none;cursor:pointer;
  font-weight:700;font-size:13px;line-height:1;display:grid;place-items:center;z-index:2;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.3)}
.org-collapse:hover{background:var(--gold-soft)}
li.collapsed > .org-children{display:none}
li.collapsed .org-collapse{background:var(--green)}
li.collapsed .org-collapse::after{content:""}
li.collapsed > .org-node-wrap .org-collapse::before{content:"+"}
li:not(.collapsed) > .org-node-wrap .org-collapse::before{content:"−"}

/* موظف معطّل في الهيكل */
.org-node.inactive{opacity:.55;background:linear-gradient(165deg,#e8e8e8,#dcdcdc);border-style:dashed}
.org-node.inactive .org-av{background:linear-gradient(160deg,#888,#666)}
:root[data-theme="dark"] .org-node.inactive{background:linear-gradient(165deg,#2a2520,#1f1c18)}

/* معاينة الملفات */
.file-preview{display:inline-flex;align-items:center;gap:10px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:10px;padding:8px 12px;margin:6px 0;cursor:pointer;
  transition:var(--t);text-decoration:none;color:var(--text)}
.file-preview:hover{border-color:var(--gold);transform:translateY(-1px)}
.file-thumb{width:42px;height:42px;border-radius:8px;background:var(--bg);
  display:grid;place-items:center;flex:none;overflow:hidden;border:1px solid var(--border)}
.file-thumb img{width:100%;height:100%;object-fit:cover}
.file-thumb .ext{font-weight:800;font-size:11px;color:var(--gold);letter-spacing:.5px}
.file-meta{flex:1;min-width:0}
.file-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-size{font-size:11px;color:var(--muted)}
.file-actions{display:flex;gap:4px}
.file-actions a{padding:6px;border-radius:7px;background:var(--surface);color:var(--muted)}
.file-actions a:hover{background:var(--gold);color:#fff}

/* الإشعارات */
.notif-wrap{position:relative}
.notif-btn{background:var(--surface-2);border:1px solid var(--border);
  border-radius:9px;width:38px;height:38px;font-size:17px;cursor:pointer;
  display:grid;place-items:center;position:relative;transition:var(--t)}
.notif-btn:hover{background:var(--gold);color:#fff}
.notif-badge{position:absolute;top:-4px;inset-inline-end:-4px;background:var(--red);
  color:#fff;font-size:10px;font-weight:800;padding:2px 6px;border-radius:10px;
  min-width:18px;text-align:center;border:2px solid var(--surface)}
.notif-panel{position:absolute;top:calc(100% + 8px);inset-inline-end:0;width:360px;
  background:#ffffff;border:1px solid var(--border);border-radius:14px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.4), 0 6px 20px -6px rgba(0,0,0,.2);
  opacity:0;pointer-events:none;transform:translateY(-6px);transition:var(--t);z-index:200}
:root[data-theme="dark"] .notif-panel{background:#1a1f15}
.notif-panel.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.notif-head{display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;border-bottom:1px solid var(--border)}
.notif-list{max-height:380px;overflow-y:auto}
.notif-item{display:block;padding:11px 14px;border-bottom:1px solid var(--border);
  text-decoration:none;color:var(--text);transition:var(--t)}
.notif-item:hover{background:var(--surface-2)}
.notif-item.unread{background:rgba(92,174,63,.08);border-inline-start:3px solid var(--gold)}
.notif-title{font-weight:700;font-size:13px;margin-bottom:3px}
.notif-msg{color:var(--muted);font-size:12px;line-height:1.5}
.notif-time{color:var(--muted);font-size:10.5px;margin-top:4px}

/* كرت الموظفين الجدد */
.welcome-card{background:linear-gradient(135deg,rgba(92,174,63,.08),rgba(123,194,94,.05));
  border-color:var(--gold-soft)}
.new-hire{display:flex;align-items:center;gap:12px;padding:10px 12px;
  border-radius:10px;text-decoration:none;color:var(--text);transition:var(--t);
  margin-bottom:6px}
.new-hire:hover{background:var(--surface-2);transform:translateX(-3px)}
.nh-av{width:42px;height:42px;border-radius:11px;background:linear-gradient(160deg,var(--gold),var(--gold-soft));
  color:#fff;display:grid;place-items:center;font-weight:800;flex:none;font-size:16px;
  box-shadow:0 6px 14px -6px rgba(92,174,63,.5)}

/* صفحة الموظف بأسلوب BambooHR */
.emp-hero{position:relative;border-radius:18px;overflow:hidden;margin-bottom:22px;
  background:linear-gradient(135deg,var(--gold),var(--gold-soft));color:#fff;
  box-shadow:0 20px 50px -22px rgba(92,174,63,.4)}
.emp-hero-bg{position:absolute;inset:0;background:
  radial-gradient(circle at 90% -20%, rgba(255,255,255,.2) 0%, transparent 40%),
  radial-gradient(circle at -10% 120%, rgba(255,255,255,.12) 0%, transparent 40%);pointer-events:none}
.emp-hero-content{position:relative;padding:22px 28px 28px;z-index:1}
.back-link{color:rgba(255,255,255,.9);font-size:13px;font-weight:600;display:inline-flex;
  align-items:center;gap:5px;text-decoration:none;margin-bottom:18px;transition:.15s}
.back-link:hover{color:#fff}
.back-link svg{width:14px;height:14px}
.emp-hero-main{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.emp-avatar-lg{width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.25);
  color:#fff;display:grid;place-items:center;font-weight:800;font-size:36px;flex:none;
  border:4px solid rgba(255,255,255,.35);box-shadow:0 10px 24px -10px rgba(0,0,0,.25)}
.emp-hero-info h1{font-family:var(--display);font-size:1.85rem;color:#fff;margin-bottom:4px}
.emp-hero-sub{font-size:1rem;opacity:.9;margin-bottom:10px}
.emp-hero-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;opacity:.92}
.emp-hero-meta span{display:inline-flex;align-items:center;gap:5px}

/* تابات صفحة الموظف */
.emp-tabs{display:flex;gap:4px;border-bottom:2px solid var(--border);margin-bottom:20px;
  overflow-x:auto;scrollbar-width:none}
.emp-tabs::-webkit-scrollbar{display:none}
.emp-tab{padding:12px 18px;text-decoration:none;color:var(--muted);font-weight:600;font-size:14px;
  border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:var(--t)}
.emp-tab:hover{color:var(--gold)}
.emp-tab.active{color:var(--gold);border-bottom-color:var(--gold)}

/* شبكة المعلومات key-value */
.kv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
  background:var(--border);border-radius:0 0 14px 14px;overflow:hidden}
.kv{background:var(--surface);padding:14px 20px}
.kv .k{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.kv .v{font-size:14.5px;font-weight:600;color:var(--text)}
.kv-total{background:linear-gradient(135deg,rgba(92,174,63,.1),rgba(123,194,94,.05))}
.kv-total .v{color:var(--gold);font-size:18px;font-weight:800}

.upload-form{padding:18px;margin-top:16px;background:var(--surface-2);border-radius:10px;
  border:1px dashed var(--border)}

.emp-hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.btn-light{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.3);
  padding:8px 14px;border-radius:9px;font-weight:600;font-size:13px;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:var(--t)}
.btn-light:hover{background:rgba(255,255,255,.3)}
.btn-light svg{width:14px;height:14px}

/* الحد الأقصى لأي SVG icon (يمنع الأيقونات من الانتفاخ في الفورمات) */
label svg, .field svg, .form-grid svg {width:14px;height:14px;vertical-align:-2px}
.field label svg {width:14px;height:14px}
/* SVG في وسط الفورم (مثل تحت قسم حساب الموظف) محدد ضمن field */
.form-grid > .field > label > svg {max-width:14px;max-height:14px}

.profile-photos-mini{margin:14px 0 18px;display:flex;gap:8px;flex-wrap:wrap}
.profile-photos-mini .btn{font-size:12px}