/* =====================================================================
   staff.css: هيكل لوحة المشرف والجهة الداعمة (الشريط الجانبي، والشريط العلوي على الجوال،
   ودرج التنقل، وقائمة المستخدم، وحاوية الأقسام). يستهلك رموز base.css فقط.
   ===================================================================== */

.staff{display:grid;grid-template-columns:minmax(0,1fr);min-block-size:100vh;min-block-size:100dvh;background:var(--bg)}
.shell-main{min-inline-size:0;display:flex;flex-direction:column}

/* ============ الشريط الجانبي (من 1024 بكسل) ============ */
.side{display:none}
.side__brand{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-1) var(--sp-2) var(--sp-5);margin-block-end:var(--sp-3);border-block-end:1px solid var(--line);color:inherit;text-decoration:none;border-radius:var(--r-sm) var(--r-sm) 0 0} /* حافة سفلية مستقيمة: الفاصل خط لا ينحني عند الزوايا */
.side__brand:hover{text-decoration:none}
.side__logo{--wm-h:30px}
.side__sep{inline-size:1px;block-size:28px;background:var(--line-2);flex-shrink:0}
.side__t{display:grid;line-height:1.35;min-inline-size:0}
.side__t b{font-size:var(--fs-sm);font-weight:var(--fw-b);white-space:nowrap}
.side__t small{font-size:var(--fs-2xs);color:var(--ink-3);white-space:nowrap}
.side__nav{position:relative;display:grid;gap:var(--sp-0);align-content:start}
.side__nav > div{display:grid;gap:var(--sp-0)}
.side__ind{position:absolute;inset-block-start:0;inset-inline:0;z-index:0;border-radius:var(--r-md);background:var(--brand-soft);pointer-events:none;opacity:0;transition:transform var(--d-spring) var(--ease-spring),block-size var(--d-spring) var(--ease-spring),opacity var(--d2) var(--ease)}
/* شريط رفيع عند بداية السطر يؤكد القسم الحالي وينزلق مع المؤشر */
.side__ind::before{content:"";position:absolute;inset-block:10px;inset-inline-start:0;inline-size:3px;border-start-end-radius:3px;border-end-end-radius:3px;background:var(--brand)}
.side__empty{font-size:var(--fs-sm);color:var(--ink-3);padding:var(--sp-3)}
.nv{--ic-a:transparent;position:relative;z-index:1;display:flex;align-items:center;gap:var(--sp-3);inline-size:100%;padding:var(--sp-2) var(--sp-3);min-block-size:var(--tap);border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:var(--fw-sb);color:var(--ink-2);text-decoration:none;transition:background-color var(--d1) var(--ease),color var(--d1) var(--ease)}
.nv:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.nv:active{transform:scale(.985)}
.nv .icon{inline-size:20px;block-size:20px;transition:transform var(--d2) var(--ease-out)}
.nv[aria-current="page"]{--ic-a:var(--turq-soft);color:var(--brand-ink)}
.side .nv[aria-current="page"],.side .nv[aria-current="page"]:hover{background:transparent}
.navdrawer .nv[aria-current="page"]{background:var(--brand-soft)}
.nv__l{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nv__n{min-inline-size:22px;block-size:22px;border-radius:11px;background:var(--yellow-solid);color:var(--ink-solid);font-size:var(--fs-2xs);font-weight:var(--fw-b);display:grid;place-items:center;padding:0 6px;font-variant-numeric:tabular-nums}
.side__foot{position:relative;margin-block-start:auto;padding-block-start:var(--sp-4);border-block-start:1px solid var(--line)}
/* «بدعم من السبيعي الخيرية» */
.side__donor{display:flex;justify-content:center;margin-block-start:var(--sp-3);padding:var(--sp-3) var(--sp-2) var(--sp-1);border-block-start:1px solid var(--line)}
.side__donor .donor{gap:var(--sp-2)}
/* بطاقة المستخدم */
.ucard{display:flex;align-items:center;gap:var(--sp-3);inline-size:100%;padding:var(--sp-2);min-block-size:56px;border:0;border-radius:var(--r-md);background:transparent;color:inherit;text-align:start;transition:background-color var(--d1) var(--ease)}
.ucard:hover,.ucard[aria-expanded="true"]{background:var(--surface-2)}
.ucard .avatar{inline-size:var(--av);block-size:var(--av)}
.ucard__b{flex:1;min-inline-size:0;display:grid;line-height:1.4}
.ucard__b b{font-size:var(--fs-sm);font-weight:var(--fw-sb);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ucard__b small{font-size:var(--fs-2xs);color:var(--ink-3)}
.ucard > .icon{inline-size:18px;block-size:18px;color:var(--ink-3)}
/* قائمة المستخدم المنبثقة */
.umenu{position:absolute;inset-block-end:calc(100% + var(--sp-2));inset-inline-start:0;inline-size:min(320px,calc(100vw - 2 * var(--sp-4)));z-index:var(--z-menu);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:var(--sp-3)}
.umenu.is-in{animation:menuIn var(--d-spring) var(--ease-spring) both}
.umenu--sheet{position:static;inline-size:auto;border:0;box-shadow:none;padding:0;animation:none}
.umenu__h{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-1) var(--sp-1) var(--sp-3);border-block-end:1px solid var(--line);margin-block-end:var(--sp-3)}
.avatar--lg{inline-size:48px;block-size:48px;font-size:var(--fs-md)}
.umenu__who{flex:1;display:grid;gap:var(--sp-0);min-inline-size:0;justify-items:start}
.umenu__who b{font-weight:var(--fw-b);line-height:1.4}
.umenu__who small{display:block;max-inline-size:100%;font-size:var(--fs-xs);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* البريد لاتيني: الاقتطاع من نهايته (supervisor@demo.ja…) لا من بدايته */
.umenu__who small{direction:ltr;text-align:end;unicode-bidi:isolate}
.umenu .menu__i b{font-size:var(--fs-sm)}
.umenu .segc{display:flex;inline-size:100%}
.umenu .segc button{flex:1 1 0;min-inline-size:0;padding-inline:var(--sp-2)}
/* داخل الشريط الجانبي: القائمة بعرض الشريط نفسه، لأن تمريره (overflow) يقص ما يتجاوزه */
.side .umenu{inset-inline:0;inline-size:auto}
.side .umenu .segc button{padding-inline:var(--sp-1);gap:var(--sp-1)}
.umenu__l{font-size:var(--fs-xs);font-weight:var(--fw-sb);color:var(--ink-3);margin:0 var(--sp-1) var(--sp-2)}
.umenu__acts{margin-block-start:var(--sp-3);padding-block-start:var(--sp-2);border-block-start:1px solid var(--line)}
@keyframes menuIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}

/* ============ الشريط العلوي (الجوال والأجهزة اللوحية) ============ */
.topwrap{position:sticky;inset-block-start:0;z-index:var(--z-sticky)}
.topwrap .sim-banner{position:static}
.topbar{display:flex;align-items:center;gap:var(--sp-2);min-block-size:var(--header-h);padding:var(--sp-2) var(--sp-3);padding-block-start:calc(var(--sp-2) + env(safe-area-inset-top,0px));background:var(--bg);border-block-end:1px solid var(--line)}
.topbar__t{flex:1;min-inline-size:0;display:flex;align-items:center;gap:var(--sp-2)}
.topbar__t b{font-size:var(--fs-md);font-weight:var(--fw-b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar__mark{--wm-h:24px}
.sim-banner__a{color:inherit;font-weight:var(--fw-b);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;padding:var(--sp-1) var(--sp-2);margin-inline-start:var(--sp-1);border-radius:var(--r-sm)}

/* ============ حاوية الأقسام ============ */
.page{flex:1;padding:var(--sp-6) var(--page-x) var(--sp-16);min-inline-size:0}
.page:focus{outline:none}
.page__in{inline-size:100%;max-inline-size:var(--content-max);margin-inline:auto;min-inline-size:0}
.page__in > .empty--block{margin-block-start:var(--sp-8)}

/* ============ درج التنقل (الجوال) ============ */
.navdrawer{position:fixed;inset-block:0;inset-inline-start:0;inset-inline-end:auto;margin:0;block-size:100%;max-block-size:100dvh;inline-size:min(320px,86vw)}
.navdrawer__in{display:flex;flex-direction:column;gap:var(--sp-2);block-size:100%;overflow-y:auto;background:var(--surface);padding:calc(var(--sp-4) + env(safe-area-inset-top,0px)) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom,0px));box-shadow:var(--sh-3);animation:navIn var(--d-sheet) var(--ease-sheet) both}
.navdrawer.is-closing .navdrawer__in{animation:navOut var(--d2) var(--ease) both}
.navdrawer.is-closing::backdrop{animation:fadeOut var(--d2) var(--ease) both}
.navdrawer__h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-block-end:var(--sp-2)}
.navdrawer__h .side__brand{border:0;margin:0;padding:var(--sp-1)}
.navdrawer .side__nav{gap:var(--sp-1)}
.navdrawer .nv{min-block-size:48px;font-size:var(--fs-base)}
.navdrawer__f{margin-block-start:auto;padding-block-start:var(--sp-3);border-block-start:1px solid var(--line)}
.navdrawer__f .side__donor{margin-block-start:var(--sp-2)}
@keyframes navIn{from{transform:translateX(100%)}to{transform:none}} /* من اليمين: بداية السطر في RTL */
@keyframes navOut{to{transform:translateX(100%)}}

/* ============ الكمبيوتر ============ */
@media (min-width:64rem){
  .staff{grid-template-columns:var(--side-w) minmax(0,1fr)}
  .side{display:flex;flex-direction:column;position:sticky;inset-block-start:0;block-size:100vh;block-size:100dvh;overflow-y:auto;background:var(--surface);border-inline-end:1px solid var(--line);padding:var(--sp-5) var(--sp-3) var(--sp-4);view-transition-name:side}
  .topbar{display:none}
  .topwrap{view-transition-name:none}
  .topwrap .sim-banner{position:sticky}
  .page{padding-block-start:var(--sp-8)}
}
@media (max-width:63.99rem){
  .topwrap{view-transition-name:topbar}
}
::view-transition-old(side),::view-transition-new(side),::view-transition-old(topbar),::view-transition-new(topbar){animation:none}
::view-transition-old(side):only-child,::view-transition-old(topbar):only-child{animation:vtFadeOut var(--d-vt-out) var(--ease) both}
@media (max-width:22.5rem){ /* 360 */
  .topbar__mark{display:none}
}