/* غطاء قفل الميزات/التطبيق فوق أي صفحة — ثيم التطبيق، تعتيم خفيف عشان
   يُظهر شكل الصفحة التي تحته بوضوح، ولا يخفيها بالكامل */
.page{position:relative;}
.feature-lock-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,15,13,.55),rgba(8,15,13,.72));backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:30px;border-radius:12px;}
html[data-theme="light"] .feature-lock-overlay{background:linear-gradient(180deg,rgba(240,245,242,.6),rgba(240,245,242,.78));}
.feature-lock-overlay .flo-icon-wrap{width:52px;height:52px;border-radius:50%;background:var(--bg2);border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold2);box-shadow:0 4px 18px rgba(0,0,0,.3);}
.feature-lock-overlay .flo-title{font-size:16px;font-weight:800;color:var(--cream);text-shadow:0 2px 8px rgba(0,0,0,.5);}
.feature-lock-overlay .flo-desc{font-size:13px;color:var(--cream2);max-width:280px;line-height:1.6;text-shadow:0 2px 8px rgba(0,0,0,.5);}

/* خريطة Leaflet + OpenStreetMap — مجانية بالكامل، بلا API key وبلا كرت
   بنكي. تلوين البلاطات بثيم أرفيكس (أخضر زمردي/ذهبي) عبر CSS filter
   بدل خدمة "أنماط مخصّصة" المدفوعة التي تقدّمها خرائط غوغل فقط. الفلتر
   يتغيّر تلقائيًا مع تبديل الوضع الداكن/الفاتح لأنه معرّف بـ data-theme. */
.addr-map-canvas-wrap{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--border);box-shadow:0 4px 20px rgba(0,0,0,.25);}
#addr-map-canvas{width:100%;height:300px;background:var(--bg2);}
#addr-map-canvas .addr-map-tiles{filter:grayscale(1) invert(1) brightness(0.92) contrast(1.05) hue-rotate(140deg) saturate(1.3);}
html[data-theme="light"] #addr-map-canvas .addr-map-tiles{filter:grayscale(.25) brightness(1.02) saturate(1.15) hue-rotate(-8deg);}
#addr-map-canvas .leaflet-control-zoom{border:1px solid var(--border)!important;border-radius:9px!important;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.3)!important;}
#addr-map-canvas .leaflet-control-zoom a{background:var(--bg3)!important;color:var(--cream)!important;border-color:var(--border)!important;}
#addr-map-canvas .leaflet-control-zoom a:hover{background:var(--bg4)!important;color:var(--gold2)!important;}
#addr-map-canvas .leaflet-control-attribution{background:rgba(8,15,13,.72)!important;color:var(--cream2)!important;font-size:9.5px!important;border-radius:6px 0 0 0;padding:1px 6px!important;}
#addr-map-canvas .leaflet-control-attribution a{color:var(--gold2)!important;}
#addr-map-canvas .leaflet-tooltip{background:var(--bg3)!important;color:var(--cream)!important;border:1px solid var(--gold)!important;border-radius:8px!important;font-size:11px!important;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.3)!important;}
#addr-map-canvas .leaflet-tooltip-top:before{border-top-color:var(--gold)!important;}
.addr-pin{filter:drop-shadow(0 3px 6px rgba(0,0,0,.45));}
.addr-locate-btn{position:absolute;bottom:10px;left:10px;z-index:401;width:36px;height:36px;border-radius:50%;background:var(--bg3);border:1px solid var(--border);color:var(--gold2);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.3);cursor:pointer;}
.addr-locate-btn:hover{background:var(--bg4);}
.addr-search-wrap{position:relative;margin-bottom:10px;}
.addr-suggest-box{display:none;position:absolute;top:calc(100% + 4px);right:0;left:0;background:var(--bg3);border:1px solid var(--border);border-radius:10px;overflow:hidden;z-index:50;max-height:220px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.35);}
.addr-suggest-row{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:12.5px;color:var(--cream2);cursor:pointer;border-bottom:1px solid var(--border);line-height:1.5;}
.addr-suggest-row:last-child{border-bottom:none;}
.addr-suggest-row:hover{background:var(--bg4);color:var(--cream);}

/* ── Misc ── */
.sec-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.sec-title{font-size:16px;font-weight:800;}
.empty{text-align:center;padding:44px 20px;color:var(--muted);}
.empty-ico{font-size:40px;margin-bottom:12px;}
.divider{height:1px;background:var(--border);margin:12px 0;}
.mix-ing-row{display:flex;gap:7px;align-items:center;padding:7px;background:var(--bg2);border-radius:8px;margin-bottom:6px;flex-wrap:wrap;}
.mix-ing-pick-btn{flex:1 1 150px;min-width:120px;max-width:260px;display:flex;align-items:center;justify-content:space-between;gap:6px;background:var(--bg3);border:1px solid var(--border);border-radius:7px;padding:7px 10px;color:var(--cream2);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;text-align:right;transition:border-color .13s;}
.mix-ing-pick-btn:hover{border-color:var(--gold2);}
.mix-ing-pick-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mix-ing-pick-name.ph{color:var(--muted);font-weight:500;}
.mix-ing-qty{flex:0 1 78px;min-width:64px;}
.mix-ing-note{flex:1 1 120px;min-width:100px;}
.mix-ing-remove{flex-shrink:0;}
.mpp-list{max-height:min(360px,50vh);overflow-y:auto;border:1px solid var(--border);border-radius:8px;}
.mix-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;}
.mix-card-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex-shrink:0;}
.mv-ing-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 10px;background:var(--bg2);border-radius:7px;margin-bottom:5px;font-size:13px;flex-wrap:wrap;}
.mv-ing-name{font-weight:700;}
.mv-ing-qty{color:var(--gold2);font-weight:700;flex-shrink:0;}
.mv-log-entry{padding:9px 11px;background:var(--bg2);border-radius:8px;margin-bottom:7px;font-size:12.5px;line-height:1.9;}
.mp-row{display:flex;align-items:center;gap:10px;padding:9px 10px;background:var(--bg2);border-radius:8px;margin-bottom:6px;flex-wrap:wrap;}
.mp-row-done{opacity:.68;}
.mp-row-label{display:flex;align-items:center;gap:8px;cursor:pointer;flex:1 1 160px;}
.mp-row-label input[type="checkbox"]{width:16px;height:16px;accent-color:var(--gold);cursor:pointer;flex-shrink:0;}
.mp-row-name{font-weight:700;font-size:13px;}
.mp-row-qty{font-size:12.5px;color:var(--muted);font-weight:700;}
.mp-row-status{font-size:11.5px;color:#7dca7d;font-weight:700;margin-inline-start:auto;}
/* غلاف حقل اسم المكوّن بخلطة (js/src/05-mixtures-suppliers-purchases.js) —
   عرضه ثابت (بيتحسب بالجافاسكربت حسب أطول اسم مكوّن مختار بكل الأسطر)
   عشان كل أعمدة الأسماء تصير بنفس العرض، وحقل الكمية ياخد الباقي. */
.mix-ing-name-wrap{position:relative;flex:0 0 auto;width:130px;}
.rate-card{background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:13px;display:flex;align-items:center;gap:11px;margin-bottom:12px;}
.rate-flag{font-size:24px;}
.rate-info{flex:1;}
.rate-name{font-size:11px;color:var(--muted);}
.rate-val{font-size:18px;font-weight:800;color:var(--gold2);}
.t-gold{color:var(--gold2);}.t-green{color:#7dca7d;}.t-red{color:#e08080;}.t-muted{color:var(--muted);}
.fw8{font-weight:800;}.fs11{font-size:11px;}
.low-stk{color:#e08080!important;font-weight:700;}
.prog-track{background:var(--bg2);border:1px solid var(--border);border-radius:6px;height:9px;overflow:hidden;margin:8px 0 6px;}
.prog-fill{height:100%;background:linear-gradient(135deg,var(--gold),var(--gold2));border-radius:6px;transition:width .3s;}

/* ── درس تفاعلي (Tour): تظليل عنصر حقيقي بالواجهة + فقاعة شرح جنبه ── */
.tour-overlay{position:fixed;inset:0;z-index:20000;pointer-events:auto;}
.tour-hole{position:absolute;border-radius:12px;box-shadow:0 0 0 9999px rgba(0,0,0,.8);transition:all .3s ease;pointer-events:none;outline:2px solid var(--gold2);}
.tour-tooltip{position:fixed;max-width:290px;background:var(--bg3);border:1px solid var(--gold);border-radius:12px;padding:14px 16px;z-index:20001;pointer-events:auto;box-shadow:0 8px 30px rgba(0,0,0,.55);}
.tour-tooltip .tt-title{font-weight:800;color:var(--gold2);margin-bottom:5px;font-size:14px;}
.tour-tooltip .tt-desc{font-size:12.5px;color:var(--cream2);line-height:1.65;margin-bottom:12px;}
.tour-tooltip .tt-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;}
.tour-progress{font-size:11px;color:var(--muted);flex-shrink:0;}
.tour-skip-btn{position:fixed;top:14px;left:14px;z-index:20002;}
.tour-center-card{position:fixed;inset:0;z-index:20001;display:flex;align-items:center;justify-content:center;pointer-events:auto;background:rgba(0,0,0,.8);padding:20px;}
.tour-center-inner{background:var(--bg3);border:1px solid var(--border);border-radius:16px;padding:26px 22px;max-width:340px;width:100%;text-align:center;}

/* ── SPLASH SCREEN (سينمائي: ظلام → الحروف وحد وحد → وقفة ترقب → ضربة سيف → انفجار علامة الصح → استقرار) ── */
.splash-screen{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  background:#040605;
  overflow:hidden;
  transition:opacity .7s ease;
}
.splash-screen.splash-hide{ opacity:0; pointer-events:none; }

.splash-anim-root{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; }

.splash-flash{
  position:fixed; inset:0; z-index:7; pointer-events:none;
  background:#eafff6; opacity:0; mix-blend-mode:screen;
  animation: splashFlashPop .5s ease 2.15s 1;
}
@keyframes splashFlashPop{ 0%{opacity:0;} 22%{opacity:.4;} 100%{opacity:0;} }

.splash-bg{ position:absolute; inset:0; }
.splash-grid{
  position:absolute; inset:-50%;
  background-image:
    linear-gradient(rgba(18,200,135,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,200,135,0.07) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:0;
  animation: splashGridMove 22s linear infinite, splashFadeIn 1.6s ease 2.3s forwards;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 5%, transparent 62%);
  mask-image: radial-gradient(ellipse at 50% 45%, #000 5%, transparent 62%);
}
@keyframes splashGridMove{ from{ transform:translate(0,0); } to{ transform:translate(44px,44px); } }
.splash-glow{ position:absolute; border-radius:50%; filter:blur(70px); opacity:0; animation: splashGlowIn 1.6s ease .2s forwards, splashGlowPulse 4s ease-in-out 3s infinite; }
.splash-glow-1{ width:280px;height:280px; background:#12c887; top:27%; left:29%; }
.splash-glow-2{ width:240px;height:240px; background:#0d9e6e; top:48%; left:57%; animation-delay:.4s,3.2s; }
@keyframes splashGlowIn{ from{ opacity:0; transform:scale(.6); } to{ opacity:.24; transform:scale(1); } }
@keyframes splashGlowPulse{ 0%,100%{ opacity:.2; } 50%{ opacity:.4; } }

/* ضربة السيف — خط ضوء قطري يعبر الشاشة كلها */
.splash-slash{
  position:fixed; top:50%; left:50%; width:230vmax; height:5px;
  background:linear-gradient(90deg, transparent 0%, transparent 40%, rgba(255,255,255,.95) 47%, rgba(70,255,190,1) 50%, rgba(70,255,190,.65) 54%, transparent 63%, transparent 100%);
  box-shadow:0 0 20px 3px rgba(70,255,190,.9), 0 0 46px 12px rgba(70,255,190,.45);
  transform:translate(-50%,-50%) rotate(-30deg) scaleX(0);
  transform-origin:78% 50%;
  opacity:0; z-index:6; pointer-events:none;
  animation: splashSlashMove .3s cubic-bezier(.2,.85,.15,1) 1.9s 1;
}
@keyframes splashSlashMove{
  0%{ opacity:0; transform:translate(-50%,-50%) rotate(-30deg) scaleX(0); }
  10%{ opacity:1; }
  60%{ opacity:1; transform:translate(-50%,-50%) rotate(-30deg) scaleX(1); }
  100%{ opacity:0; transform:translate(-50%,-50%) rotate(-30deg) scaleX(1); }
}

.splash-logo-wrap{
  position:relative; display:flex;align-items:center;justify-content:center; margin-bottom:32px; z-index:2;
  animation: splashShake .32s ease 2.16s 1;
}
@keyframes splashShake{
  0%,100%{ transform:translate(0,0); }
  18%{ transform:translate(-5px,3px); }
  38%{ transform:translate(5px,-4px); }
  58%{ transform:translate(-4px,3px); }
  78%{ transform:translate(2px,-2px); }
}
.splash-ambient-ring{
  position:absolute; width:280px;height:280px; border-radius:50%;
  border:1px dashed rgba(18,200,135,.22);
  opacity:0;
  animation: splashFadeIn .8s ease 3s forwards, splashSpinCW 11s linear 3s infinite;
}
@keyframes splashSpinCW{ from{transform:rotate(0);} to{transform:rotate(360deg);} }

.splash-logo-stage{ position:relative; height:76px; width:228.5px; z-index:2; }
.splash-logo-letters, .splash-logo-check{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }

/* الحروف تظهر وحد وحد: A ثم R ثم فراغ (مكان الصح) ثم I ثم X */
.splash-logo-letters{
  opacity:1;
  clip-path:inset(0 100% 0 0);
  filter:drop-shadow(0 0 0 rgba(18,200,135,0));
  animation: splashLettersReveal .95s cubic-bezier(.5,.05,.35,1) .3s forwards;
}
@keyframes splashLettersReveal{
  0%{  clip-path:inset(0 100% 0 0); }
  8%{  clip-path:inset(0 100% 0 0); }
  24%{ clip-path:inset(0 70% 0 0); }
  38%{ clip-path:inset(0 70% 0 0); }
  54%{ clip-path:inset(0 53% 0 0); }
  68%{ clip-path:inset(0 53% 0 0); }
  86%{ clip-path:inset(0 26% 0 0); }
  94%{ clip-path:inset(0 26% 0 0); }
  100%{clip-path:inset(0 0% 0 0); }
}

/* شبح خافت بمكان علامة الصح أثناء وقفة الترقب */
.splash-check-ghost{
  position:absolute; left:58.5%; top:42.5%; width:64px;height:64px;
  transform:translate(-50%,-50%) scale(.7); border-radius:50%;
  background:radial-gradient(circle, rgba(20,255,170,.4) 0%, transparent 70%);
  filter:blur(9px); opacity:0; z-index:1;
  animation: splashGhostPulse .65s ease-in-out 1.3s 1;
}
@keyframes splashGhostPulse{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.7); }
  50%{ opacity:.75; transform:translate(-50%,-50%) scale(1.15); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1); }
}

/* علامة الصح — تطير وتنزل بقوة بعد ضربة السيف */
.splash-logo-check{
  opacity:0; transform:translate(46px,-34px) rotate(-24deg) scale(.35);
  filter:drop-shadow(0 0 0 rgba(20,255,160,0)) brightness(2.6);
  animation: splashCheckSlam .5s cubic-bezier(.22,1.9,.4,1) 2.16s forwards, splashCheckGlow 2.2s ease-in-out 2.9s infinite;
}
@keyframes splashCheckSlam{
  0%{  opacity:0; transform:translate(46px,-34px) rotate(-24deg) scale(.35); filter:drop-shadow(0 0 0 rgba(20,255,160,0)) brightness(2.8); }
  55%{ opacity:1; transform:translate(0,0) rotate(5deg) scale(1.3); filter:drop-shadow(0 0 32px rgba(20,255,160,1)) brightness(1.85); }
  78%{ opacity:1; transform:translate(0,0) rotate(-2deg) scale(.94); filter:drop-shadow(0 0 20px rgba(20,255,160,.9)) brightness(1.3); }
  100%{opacity:1; transform:translate(0,0) rotate(0deg) scale(1); filter:drop-shadow(0 0 14px rgba(20,255,160,.75)) brightness(1.1); }
}
@keyframes splashCheckGlow{
  0%,100%{ filter:drop-shadow(0 0 10px rgba(20,255,160,.6)) brightness(1.05); }
  50%{ filter:drop-shadow(0 0 24px rgba(20,255,160,.95)) brightness(1.28); }
}

.splash-check-glow{
  position:absolute; left:58.5%; top:42.5%; width:130px; height:130px;
  transform:translate(-50%,-50%) scale(0); border-radius:50%;
  background:radial-gradient(circle, rgba(120,255,205,.95) 0%, rgba(18,200,135,.55) 38%, transparent 72%);
  filter:blur(6px); opacity:0; z-index:1;
  animation: splashBurstFlash 1s ease 2.16s 1;
}
@keyframes splashBurstFlash{
  0%{  opacity:0; transform:translate(-50%,-50%) scale(.25); }
  25%{ opacity:1; transform:translate(-50%,-50%) scale(1.7); }
  62%{ opacity:.4; transform:translate(-50%,-50%) scale(1.15); }
  100%{opacity:0; transform:translate(-50%,-50%) scale(1); }
}

.splash-shock{
  position:absolute; left:58.5%; top:42.5%; width:24px; height:24px; border-radius:50%;
  border:1.5px solid rgba(90,255,200,.9);
  transform:translate(-50%,-50%) scale(0); opacity:0; z-index:1;
}
.splash-shock-1{ animation: splashShockOut 1.5s cubic-bezier(.2,.7,.3,1) 2.17s 1; }
.splash-shock-2{ animation: splashShockOut 1.5s cubic-bezier(.2,.7,.3,1) 2.3s 1; }
.splash-shock-3{ animation: splashShockOut 1.5s cubic-bezier(.2,.7,.3,1) 2.43s 1; }
@keyframes splashShockOut{
  0%{  transform:translate(-50%,-50%) scale(.4); opacity:.95; }
  100%{transform:translate(-50%,-50%) scale(13); opacity:0; }
}

/* شظايا متطايرة من نقطة اشتعال علامة الصح */
.splash-spark{
  position:absolute; left:58.5%; top:42.5%; width:4px;height:4px; border-radius:50%;
  background:#a8ffdc; box-shadow:0 0 7px 2px rgba(130,255,200,.95);
  opacity:0; z-index:2;
  animation: splashSparkFly .65s cubic-bezier(.15,.8,.3,1) 2.19s 1;
}
@keyframes splashSparkFly{
  0%{  opacity:1; transform:translate(-50%,-50%) translate(0,0) scale(1); }
  100%{opacity:0; transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) scale(.25); }
}

.splash-loader{ z-index:2; margin-bottom:14px; opacity:0; animation: splashFadeIn .5s ease 3s forwards; }
.splash-spinner{ width:32px;height:32px; animation: splashSpinCW 1s linear infinite; }
.splash-spinner-track{ fill:none; stroke:rgba(255,255,255,0.08); stroke-width:3; }
.splash-spinner-arc{ fill:none; stroke:#12c887; stroke-width:3; stroke-linecap:round; stroke-dasharray:30 119; }
.splash-text{ z-index:2; font-size:13px; color:#8ab8a8; letter-spacing:.5px; opacity:0; animation: splashFadeIn .5s ease 3.1s forwards; display:flex; align-items:center; gap:2px; margin-bottom:14px; }
.splash-dots span{ animation: splashDotBlink 1.4s infinite; opacity:0; }
.splash-dots span:nth-child(1){ animation-delay:0s; }
.splash-dots span:nth-child(2){ animation-delay:.2s; }
.splash-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes splashDotBlink{ 0%,100%{opacity:0;} 50%{opacity:1;} }
@keyframes splashFadeIn{ to{ opacity:1; } }

.splash-progress-track{ width:150px;height:3px;border-radius:3px;background:rgba(255,255,255,.08); overflow:hidden; opacity:0; animation: splashFadeIn .5s ease 3.15s forwards; z-index:2; }
.splash-progress-fill{ height:100%; width:0%; border-radius:3px; background:linear-gradient(90deg,#0d9e6e,#12c887); box-shadow:0 0 8px rgba(18,200,135,.6); animation: splashProgressFill 2.1s ease 3.15s forwards; }
@keyframes splashProgressFill{ from{width:0%;} to{width:100%;} }

/* ── دعم اتجاه LTR (English وأي لغة LTR مستقبلية) — مرآة للعناصر يلي إلها جهة ثابتة يمين/شمال ── */
html[dir="ltr"] .sidebar{ border-left:none; border-right:1px solid var(--border); }
html[dir="ltr"] .ni{ border-right:none; border-left:3px solid transparent; }
html[dir="ltr"] .ni.on{ border-left-color:var(--gold); }
html[dir="ltr"] #theme-fab{ left:auto !important; right:16px !important; }
html[dir="ltr"] #guest-banner{ text-align:left !important; }
html[dir="ltr"] th{ text-align:left; }
html[dir="ltr"] #auth-email, html[dir="ltr"] #auth-pass{ text-align:left !important; }
html[dir="ltr"] #auth-pass{ padding-left:12px !important; padding-right:44px !important; }
html[dir="ltr"] #pass-eye{ left:auto !important; right:12px !important; }
html[dir="ltr"] #done-body{ text-align:left !important; }
html[dir="ltr"] #ov-legal .modal-lg{ text-align:left !important; }
html[dir="ltr"] .pi-low{ border-right:none !important; border-left:3px solid var(--red); }
@media (max-width:768px){
  html[dir="ltr"] .sidebar{ right:auto; left:-220px; box-shadow:4px 0 20px rgba(0,0,0,0.5); transition:left .25s ease; }
  html[dir="ltr"] .sidebar.open{ left:0; }
}

/* ── Icons ── */
.ni-icon svg{width:17px;height:17px;stroke:currentColor;flex-shrink:0;}
.pg-title svg{width:22px;height:22px;stroke:currentColor;vertical-align:middle;margin-left:6px;}
.btn svg{width:15px;height:15px;stroke:currentColor;}
.stat-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;}
.stat-icon svg{width:18px;height:18px;stroke:currentColor;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}

/* ══ MOBILE ══════════════════════════════════ */
@media (max-width: 768px){
  body{ overflow:auto; }
  .app{ flex-direction:column; height:auto; min-height:100vh; }

  /* القائمة الجانبية تصير overlay */
  .sidebar{
    position:fixed; top:0; right:-220px; height:100vh;
    width:220px; z-index:1000;
    transition:right .25s ease;
    box-shadow:-4px 0 20px rgba(0,0,0,0.5);
  }
  .sidebar.open{ right:0; }

  /* overlay خلفي */
  .sidebar-overlay{
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,0.5); z-index:999;
  }
  .sidebar-overlay.on{ display:block; }

  /* شريط علوي للموبايل */
  .mobile-bar{
    display:flex !important;
    align-items:center; justify-content:space-between;
    padding:12px 16px;
    background:var(--bg2);
    border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:100;
  }
  .mobile-bar-title{ font-size:16px; font-weight:900; color:var(--gold2); }
  .hamburger{
    background:none; border:none; cursor:pointer;
    display:flex; flex-direction:column; gap:5px; padding:4px;
  }
  .hamburger span{
    display:block; width:22px; height:2px;
    background:var(--gold2); border-radius:2px;
    transition:all .2s;
  }

  .main{ width:100%; }
  .page{ padding:12px; }

  /* stats صف واحد بعمودين */
  .stats-row{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .stat .val{ font-size:18px; }

  /* جداول قابلة للتمرير */
  .tw{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* أزرار أكبر */
  .btn{ padding:10px 14px; font-size:14px; }

  /* نوافذ modal بعرض كامل */
  .modal{ width:95vw !important; max-width:95vw !important; margin:0 auto; }
  .ov{ align-items:flex-end; padding:0; }
  .modal{ border-radius:18px 18px 0 0 !important; max-height:90vh; overflow-y:auto; }

  /* الشبكات */
  .row2{ grid-template-columns:1fr !important; }
  .prod-grid{ grid-template-columns:1fr 1fr !important; }
}

/* desktop: إخفاء عناصر الموبايل + تحسين تناسق العرض على الشاشات الواسعة */