/* ══════════════════════════════════════════════════════════
   القائمة الجانبية — صفحة المساحة
   تفتح من جهة البداية (يمين بالعربي، يسار بالإنجليزي)
══════════════════════════════════════════════════════════ */

/* زر القائمة في الشريط */
.mis-app-menu{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;min-width:36px;padding:0;border-radius:11px;cursor:pointer;
  border:1px solid rgba(255,255,255,.16)!important;background:rgba(255,255,255,.06)!important;
  color:#fff!important;transition:background .16s,transform .16s;box-shadow:none!important;
}
.mis-app-menu:hover,.mis-app-menu:focus-visible{background:rgba(255,255,255,.14)!important}
.mis-app-menu:active{transform:scale(.94)}
.mis-app-menu svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* الحاوية */
.mdr{position:fixed;inset:0;z-index:100000;font-family:inherit;color:#fff}
.mdr[hidden]{display:none!important}
.mdr *{box-sizing:border-box}
.mdr-scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .28s ease;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.mdr.open .mdr-scrim{opacity:1}

.mdr-panel{
  position:absolute;top:0;bottom:0;inset-inline-start:0;
  width:min(340px,86vw);background:#141416;border-inline-end:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 60px rgba(0,0,0,.55);overflow:hidden;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.22,.8,.2,1);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
[dir=ltr] .mdr-panel,.mdr[dir=ltr] .mdr-panel{transform:translateX(-100%)}
.mdr.open .mdr-panel{transform:translateX(0)!important}

/* الصفحات داخل القائمة */
.mdr-page{position:absolute;inset:0;display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.22,.8,.2,1),opacity .2s;background:#141416}
.mdr-page:not(.on){pointer-events:none;opacity:0;transform:translateX(-24%)}
[dir=ltr] .mdr-page:not(.on){transform:translateX(24%)}
.mdr-page[data-page=main]:not(.on){transform:translateX(18%)}
[dir=ltr] .mdr-page[data-page=main]:not(.on){transform:translateX(-18%)}

/* الرأس */
.mdr-head{display:flex;align-items:center;gap:10px;padding:16px 14px 14px 16px;
  border-bottom:1px solid rgba(255,255,255,.07);flex:none}
.mdr-head.sub{padding:12px 12px}
.mdr-head.sub b{flex:1;font-size:15.5px;font-weight:800}
.mdr-who{flex:1;min-width:0;display:flex;align-items:center;gap:11px}
.mdr-who>div{min-width:0}
.mdr-who b{display:block;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdr-who small{display:block;font-size:12px;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.mdr-av{width:40px;height:40px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2a2a2e,#1c1c1f);border:1px solid rgba(255,255,255,.12);
  font-size:17px;font-weight:800;text-transform:uppercase}
.mdr-x,.mdr-back{flex:none;width:34px;height:34px;padding:0;border-radius:10px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent!important;border:1px solid transparent!important;color:rgba(255,255,255,.7)!important;box-shadow:none!important}
.mdr-x:hover,.mdr-back:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
.mdr-x svg,.mdr-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* القوائم */
.mdr-page[data-page=main]{overflow-y:auto;overscroll-behavior:contain}
.mdr-list{padding:8px}
.mdr-sep{height:1px;background:rgba(255,255,255,.07);margin:2px 16px}
.mdr-i{width:100%;display:flex;align-items:center;gap:12px;padding:11px 10px;margin:0;border-radius:12px;
  background:transparent!important;border:0!important;color:#fff!important;text-decoration:none!important;
  font:inherit;font-size:14.5px;text-align:start;cursor:pointer;box-shadow:none!important;
  transition:background .15s}
.mdr-i:hover,.mdr-i:focus-visible{background:rgba(255,255,255,.06)!important;outline:none}
.mdr-i:active{background:rgba(255,255,255,.1)!important}
.mdr-ic{width:36px;height:36px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.mdr-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mdr-l{flex:1;min-width:0;font-weight:700;line-height:1.25}
.mdr-l small{display:block;margin-top:3px;font-size:12px;font-weight:500;color:rgba(255,255,255,.48);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdr-chev{flex:none;color:rgba(255,255,255,.35);display:flex}
.mdr-chev svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mdr-badge{flex:none;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:#f5b400;color:#1d1600;
  font-style:normal;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.mdr-list .mdr-i[data-dr=form] .mdr-ic{background:#fff;color:#0f0f0f;border-color:#fff}

/* المحتوى الداخلي */
.mdr-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:12px 12px 24px}
.mdr-body h4{margin:16px 2px 8px;font-size:12px;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:.2px}
.mdr-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px;margin-bottom:12px}
.mdr-ch{display:flex;align-items:flex-start;gap:10px}
.mdr-ch>div{flex:1;min-width:0}
.mdr-ch b{display:block;font-size:15px;font-weight:800}
.mdr-ch small{display:block;margin-top:4px;font-size:12px;color:rgba(255,255,255,.5)}
.mdr-st{flex:none;font-style:normal;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.7)}
.mdr-st.gr{background:rgba(26,158,84,.16);color:#4ade80}
.mdr-st.go{background:rgba(245,180,0,.15);color:#f5c542}
.mdr-st.bl{background:rgba(59,130,246,.16);color:#7fb0ff}
.mdr-st.rd{background:rgba(214,54,56,.16);color:#ff7a7c}
.mdr-pg{margin-top:12px}
.mdr-pg small{display:block;margin-top:6px;font-size:12px;color:rgba(255,255,255,.55)}
.mdr-bar{height:7px;border-radius:7px;background:rgba(255,255,255,.08);overflow:hidden}
.mdr-bar.sm{height:5px;margin:5px 0 10px}
.mdr-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1a9e54,#4ade80)}
[dir=rtl] .mdr-bar i{margin-inline-start:0}
.mdr-q{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.mdr-q b{font-weight:800}
.mdr-qt h4{margin-top:14px}

.mdr-tasks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mdr-task{width:100%;display:flex;align-items:center;gap:10px;padding:9px 6px;border-radius:10px;
  background:transparent!important;border:0!important;color:#fff!important;font:inherit;font-size:13.5px;text-align:start;
  cursor:pointer;box-shadow:none!important}
.mdr-task:not([disabled]):hover{background:rgba(255,255,255,.06)!important}
.mdr-task[disabled]{cursor:default;opacity:.85}
.mdr-dot{width:8px;height:8px;border-radius:50%;flex:none;background:rgba(255,255,255,.3)}
.mdr-dot.gr{background:#4ade80}.mdr-dot.go{background:#f5c542}.mdr-dot.bl{background:#7fb0ff}.mdr-dot.rd{background:#ff7a7c}
.mdr-tl{flex:1;min-width:0;line-height:1.3}
.mdr-tl b{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdr-tl small{display:block;margin-top:2px;font-size:11.5px;color:rgba(255,255,255,.45)}
.mdr-hint{margin:10px 2px 0;font-size:12px;line-height:1.6;color:rgba(255,255,255,.5)}
.mdr-hint.in{margin:-4px 8px 10px}

.mdr-inv{display:flex;align-items:center;gap:11px;padding:12px;margin-bottom:8px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#fff!important;text-decoration:none!important;
  transition:background .15s,border-color .15s}
.mdr-inv:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.mdr-amt{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.mdr-amt b{font-size:14px;font-weight:800;white-space:nowrap}

.mdr-tabs{display:flex;gap:4px;padding:4px;margin-bottom:10px;border-radius:12px;background:rgba(255,255,255,.05)}
.mdr-tabs button{flex:1;padding:7px 6px;border-radius:9px;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;
  background:transparent!important;border:0!important;color:rgba(255,255,255,.6)!important;box-shadow:none!important}
.mdr-tabs button.on{background:#fff!important;color:#0f0f0f!important}
.mdr-files{list-style:none;margin:0;padding:0}
.mdr-files li[hidden]{display:none}
.mdr-files a{display:flex;align-items:center;gap:11px;padding:10px 8px;border-radius:12px;color:#fff!important;text-decoration:none!important}
.mdr-files a:hover{background:rgba(255,255,255,.06)}
.mdr-fi{width:38px;height:38px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.mdr-files .mdr-tl b{font-size:13.5px}

.mdr-empty{text-align:center;padding:48px 18px}
.mdr-empty span{display:block;font-size:38px;margin-bottom:12px}
.mdr-empty b{display:block;font-size:15.5px;font-weight:800}
.mdr-empty p{margin:8px auto 0;max-width:250px;font-size:13px;line-height:1.7;color:rgba(255,255,255,.55)}
.mdr-cta{margin-top:18px;padding:10px 22px;border-radius:30px;cursor:pointer;font:inherit;font-size:13.5px;font-weight:800;
  background:#fff!important;color:#0f0f0f!important;border:0!important;box-shadow:none!important}

/* إبراز البطاقة عند الانتقال لها من القائمة */
.mis-card.mdr-flash{animation:mdrFlash 1.8s ease}
@keyframes mdrFlash{0%,100%{box-shadow:0 0 0 0 rgba(245,197,66,0)}20%,60%{box-shadow:0 0 0 3px rgba(245,197,66,.75)}}

/* قفل التمرير خلف القائمة */
html.mdr-lock,html.mdr-lock body{overflow:hidden!important}

@media (prefers-reduced-motion:reduce){
  .mdr-panel,.mdr-page,.mdr-scrim{transition:none!important}
}
.mdr h4{font-family:inherit!important;line-height:1.3}