/* =================================================================== التصميم الأساسي والتخطيط العام مستخرَج حرفياً من: اعصار (2).html (الأسطر 2535-3711) ⚠️ ترتيب الملفات في index.html يطابق ترتيب الكتل الأصلي — لا تغيّره (cascade). =================================================================== */ body { background-color: var(--bg-color); color: var(--text-bright); font-family: 'Cairo', sans-serif; margin: 0; padding: 0; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; } /* 🔧 أُزيلت طبقة "خطوط الشاشة القديمة" (scanlines) التي كانت تغطي كامل الصفحة فوق كل شيء (z-index:9999) — كانت تمر فوق كل نص بالموقع وتصعّب القراءة، خصوصاً بالجداول والأرقام الكثيفة. الشعار (صورة) ما تأثر بيها بشكل واضح، لكن النصوص العادية تأثرت فعلاً. النبضة الخفيفة بالأسفل (خلف كل شيء) تبقى كافية للإحساس المرعب بدون أي تأثير على وضوح القراءة. /* 💓 نبضة خلفية خفيفة بكل الموقع — تحريك opacity فقط (أرخص شي بصرياً، لا يحرّك أي عنصر ولا يعيد حساب أي تخطيط) فما يأثر على سلاسة الاستخدام إطلاقاً */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse at 50% 28%, rgba(138,0,0,.18) 0%, rgba(0,0,0,0) 62%); animation: bgHeartbeat 4.4s ease-in-out infinite; } @keyframes bgHeartbeat { 0%, 100% { opacity: .5; } 10% { opacity: 1; } 20% { opacity: .55; } 30% { opacity: .85; } 42% { opacity: .5; } } /* ══ وضع التركيز لموظف الكونترول: ألوان مريحة للعين + تقليل التشتت ══ */ body.focus-mode::before { display: none; } /* ⚠️ الفلتر على لا على — وهذا ليس تفضيلاً بل شرط عمل القائمة الجانبية. عنصرٌ يحمل filter/transform/perspective يصير «الكتلة الحاوية» لكل سليل position:fixed تحته — فالفلتر على كان يقطع تثبيت #kbsb بالنافذة ويربطه بصندوق (بارتفاع المستند كلّه). مقيس: عند تشغيل التركيز يقفز ارتفاع الشريط من ٨٦٠ (النافذة) إلى ١١٥٩ (المستند)، وتمريرُ الصفحة ٤٠٠px يدفع أعلى الشريط إلى -٢٩٩ — أي أن القائمة تنزلق مع الصفحة ويهبط ذيلها (صوت/تركيز/خروج) خارج الشاشة. وأثرٌ ثانٍ يبدو «ميزة»: مساحة التنقّل تتّسع ٧٢٧→١٠٢٦ فتظهر عناصر كانت مخفيّة، وهو ما قُرئ «الخيارات تزيد بوضع التركيز». هو الجذر، فكتلته الحاوية هي النافذة نفسها، والمظهر لا يتغيّر بشيء. لا تُعِد الفلتر إلى body. */ html:has(body.focus-mode) { /* ⚠️ كان saturate(.5) brightness(.94) contrast(.94) — نصفُ التشبّع يغسل لوحة الرعب كلّها فتُقرأ «الشاشة صارت جداً باهتة» على كل تبويب بعد الدخول، خصوصاً إن بقي علمُ kaboos_focus_mode='1' مخزّناً بالجهاز من ضغطةٍ قديمة. الآن لمسةٌ خفيفة فقط — «مريحٌ للعين» لا «مغسول». التهدئةُ الفعلية تبقى من قواعد body.focus-mode أدناه (إسقاط الظلال والتوهّج). */ filter: saturate(.9) brightness(.98); } body.focus-mode #auth-section, body.focus-mode #header-section { background: #16171a !important; border-bottom: 1px solid #2c2c2e !important; box-shadow: none !important; } body.focus-mode .room-card { box-shadow: none !important; border-color: #2c2c2e !important; } body.focus-mode .timer-display, body.focus-mode .room-title { text-shadow: none !important; } body.focus-mode .rc2-team-bar span:last-child, body.focus-mode .tracker-note { display: none !important; /* نصوص هامشية غير ضرورية للتركيز اللحظي */ } /* ١د: كان سماوياً (rgba(0,229,255)/var(--neon-blue)) — نُقل لسُلّم الدم كبقية الحالات النشطة */ #btn-focus-mode.fm-active { background: rgba(138,0,0,.16) !important; border-color: var(--blood-bright) !important; color: var(--blood-ink) !important; } /* ══ شاشة الكونترول تتفاعل مع آخر 5 دقائق من أي غرفة نشطة — جو متوتر ومثير للحماس ══ */ /* ⚡ أداء: كانت هذي تحرّك background-color على نفسه — يعني إعادة رسم كامل الشاشة ٦٠ مرة بالثانية، بلا توقف، طول آخر ٥ دقائق من كل جولة. أغلى حركة بالنظام كله لأن مساحتها = الشاشة كاملة. البديل: يثبت على اللون الغامق، وطبقة ثابتة باللون الفاتح فوقه نحرّك opacity مالتها فقط (تركيب على الـGPU بلا أي إعادة رسم). النتيجة مطابقة بالبكسل: لون بشفافية α فوق لون ثاني = نفس الاستيفاء الخطي اللي يسويه المتصفح أصلاً لما يحرّك background-color بين اللونين. */ body.kb-ctrl-critical { background-color: #170000 !important; } /* z-index:-2 → فوق خلفية وتحت body::before (-1) وتحت كل المحتوى. ما تتعارض مع body::before لأنها ::after — العنصر الزائف الثاني كان فاضي. */ body.kb-ctrl-critical::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -2; background-color: #330000; animation: kbCriticalBg 1.1s ease-in-out infinite; } @keyframes kbCriticalBg { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } body.kb-ctrl-critical::before { background: radial-gradient(ellipse at 50% 28%, rgba(255,0,0,.5) 0%, rgba(0,0,0,0) 62%) !important; animation: bgHeartbeat 1.1s ease-in-out infinite !important; } body.kb-ctrl-critical #header-section { border-bottom-color: #ff2020 !important; box-shadow: 0 0 60px rgba(255,0,0,.4) !important; } body.kb-ctrl-critical .room-card { animation: kbCriticalCard 1.1s ease-in-out infinite; } @keyframes kbCriticalCard { 0%, 100% { box-shadow: 0 0 0 rgba(255,0,0,0); } 50% { box-shadow: 0 0 26px rgba(255,0,0,.35); } } /* -- 6) لون مميّز لكل دور — شريط علوي خفيف بأعلى الهيدر، يعرّفك بأي وضع انت بلمحة عين. لا يلمس border-bottom (يبقى مخصص لتنبيه kb-ctrl-critical). ١د: النيون المبعثر → السُلّم، مع بقاء تمييز الدور بلمحة (نفس منطق ألوان الغرف). القديم: admin --neon-purple · cashier --neon-green · mena --neon-orange · maze --neon-red · partner --neon-blue (control كان --room-ring). -- */ body.kb-role-admin #header-section { border-top-color: var(--blood); } body.kb-role-cashier #header-section { border-top-color: var(--alive); } body.kb-role-control #header-section { border-top-color: var(--room-ring); } body.kb-role-mena #header-section { border-top-color: var(--warn); } body.kb-role-maze #header-section { border-top-color: var(--blood-dim); } body.kb-role-partner #header-section { border-top-color: var(--ash); } /* --- أقسام لوحة التحكم --- */ #admin-interface { width: 100%; display: flex; flex-direction: column; align-items: center; padding-bottom: 50px; } #auth-section, #header-section { width: 100%; text-align: center; padding: 25px 20px; background: linear-gradient(180deg, #150000 0%, #050000 100%); border-bottom: 2px solid var(--blood-red); box-shadow: 0 0 40px rgba(255, 0, 0, 0.15); margin-bottom: 30px; position: relative; z-index: 100; box-sizing: border-box; border-top: 3px solid transparent; } #auth-section { background-image: linear-gradient(180deg, rgba(8,0,0,.72) 0%, rgba(5,0,0,.94) 100%), url('/images/auth_bg.jpg'); background-size: cover; background-position: center 20%; /* ١ه: توافق الأجهزة — يتوسّط عمودياً على الشاشات الطويلة، وينمو (تمرير لا قصّ) على القصيرة. حشو متجاوب. القديم: padding 60px 20px فقط. */ padding: clamp(24px, 6vh, 56px) 16px; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* [حُذف] @keyframes flicker — معرَّف ولا يستدعيه أي سلاكتور ولا أي style.animation بالجافاسكربت. logoFlicker أسفل هي المستعملة فعلاً. */ @keyframes logoFlicker { 0%, 18%, 22%, 25%, 53%, 57%, 83%, 100% { opacity: 1; filter: drop-shadow(0 0 12px rgba(255,0,0,0.8)) drop-shadow(0 0 25px rgba(138,0,0,0.6)); } 20%, 24%, 55%, 85% { opacity: 0.25; filter: drop-shadow(0 0 4px rgba(255,0,0,0.3)); } 21%, 84% { opacity: 0.9; } } .kaboos-logo { /* ✅ إصلاح تناسق الأبعاد: كان "max-width: 76%" نسبة لعرض الحاوية (متغيّر وغير موثوق بين الأجهزة)، بدّلناه لقاعدة مبنية على عرض الشاشة الفعلي (نفس أسلوب باقي شعارات الموقع: شاشة "من نحن"، شاشة التحميل، التعهد المطبوع) — يخليه يتناسق بنفس النسبة تماماً على الجوال والتابلت والشاشة الكبيرة، بدل ما يكبر أو يصغر بشكل غير متوقع حسب حاوية كل شاشة. ✅ إصلاح ثاني: أضفنا حد أقصى للارتفاع (max-height) — قبل إصلاح مسار الشعار، الصورة كانت تفشل بالتحميل (404) فتختفي بدون ما تاخذ أي ارتفاع، فما كان أحد يلاحظ إن شاشة الدخول تطول عن الشاشة. الان وهي شعار مربّع فعلي (1672×1672)، بدون حد أقصى للارتفاع كانت تضيف حتى 320px ارتفاع فوق صندوق الدخول — يخلي الصفحة تطول عن ارتفاع أغلب الأجهزة ويظهر تمرير عمودي ما كان موجود سابقاً. الان محدود بنسبة من ارتفاع الشاشة. */ display: block; margin: 0 auto 4px auto; width: min(240px, 58vw); max-height: 18vh; height: auto; background: transparent; animation: logoFlicker 5s infinite; filter: drop-shadow(0 0 10px rgba(255,0,0,0.85)) drop-shadow(0 0 26px rgba(138,0,0,0.7)); } @media (max-height: 560px) { /* شاشات قصيرة (جوال أفقي، نوافذ صغيرة) */ .kaboos-logo { max-height: 13vh; width: min(190px, 44vw); } } .kaboos-logo-sm { height: 30px; width: auto; margin: 0; display: inline-block; vertical-align: middle; background: transparent; animation: logoFlicker 5s infinite; filter: drop-shadow(0 0 6px rgba(255,0,0,0.8)); } .auth-container { display: flex; justify-content: center; margin-top: clamp(14px, 3.5vh, 32px); width: 100%; } /* ✅ إصلاح تناسق الأبعاد: كان عرض الصندوق ثابت 350px + padding 35px بدون box-sizing:border-box (يعني العرض الفعلي يتجاوز 420px) وبدون أي حد أقصى مرتبط بعرض الشاشة — على أغلب شاشات الجوال (~360-390px) كان الصندوق يفيض عن حدود الشاشة فعلياً. الان العرض يتقلّص تلقائياً ليناسب أي جهاز (جوال/ تابلت/شاشة كبيرة) بدل ما يبقى مقاس واحد ثابت يفيض على الشاشات الصغيرة. */ /* ١ه: بطاقة الدخول — أصغر ومتجاوبة. القديم: width min(350px,92vw)·padding 35px·gap 20px· h2 1.5rem·input padding 15px font 1.2rem·btn padding 15px font 1.3rem·error 1.1rem margin-top 20px */ .login-box { display: flex; flex-direction: column; align-items: center; gap: clamp(13px, 3.2vw, 18px); width: min(340px, 90vw); box-sizing: border-box; background: rgba(10, 10, 10, 0.85); padding: clamp(20px, 5.5vw, 32px); border: 1px solid #333; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.9); } .login-box h2 { color: #fff; font-size: clamp(1.1rem, 4vw, 1.35rem); margin: 0; border-bottom: 2px solid var(--blood-red); padding-bottom: 9px; width: 100%; letter-spacing: 1px; } .login-box input { width: 100%; padding: 12px 14px; background: rgba(0,0,0,0.5); border: 1px solid #555; color: var(--neon-red); font-family: 'Share Tech Mono', monospace; font-size: 1.02rem; text-align: center; outline: none; transition: 0.3s; box-sizing: border-box; border-radius: 5px; } .login-box input:focus { border-color: var(--neon-red); box-shadow: 0 0 15px rgba(255, 0, 0, 0.3); } .login-btn { width: 100%; padding: 13px; background: var(--blood-red); color: #fff; border: none; font-family: 'Cairo', sans-serif; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: 0.3s; border-radius: 5px; text-transform: uppercase; letter-spacing: 2px; } .login-btn:hover { background: var(--neon-red); box-shadow: 0 0 25px var(--neon-red); transform: translateY(-2px); } #login-error { color: var(--neon-red); font-size: .95rem; margin-top: 12px; min-height: 18px; font-weight: bold; text-shadow: 0 0 5px var(--neon-red); } #header-section { display: none; } .control-label { font-size: 1.4rem; color: #aaa; margin-top: 10px; } .control-label span { color: var(--neon-red); font-family: 'Share Tech Mono', monospace; font-size: 1.6rem; text-shadow: 0 0 10px var(--neon-red); font-weight: bold; } /* --- شريط التبديل السريع (Multi-Role) --- */ #role-switcher-bar { display: none; background: rgba(0,0,0,0.8); border: 1px solid #333; padding: 10px; margin: 15px auto 0; border-radius: 8px; justify-content: center; gap: 10px; flex-wrap: wrap; max-width: 800px; } .role-switch-btn { background: #111; color: #888; border: 1px dashed #555; padding: 8px 15px; font-family: 'Cairo'; font-weight: bold; cursor: pointer; border-radius: 4px; transition: 0.3s; } .role-switch-btn.active { background: rgba(0, 229, 255, 0.1); color: var(--neon-blue); border-color: var(--neon-blue); box-shadow: 0 0 10px rgba(0,229,255,0.3); } .role-switch-btn:hover:not(.active) { background: #222; color: #fff; } /* ١د: تلوين التنقّل — من السُلّم بدل الرماديات المتفرقة والبنفسجي. القديم: nav-btn bg #151515 color #aaa border #444 · hover #222/#fff/#888 · .active border var(--neon-red) glow rgba(255,0,0,...) · .admin-nav.active = rgba(176,0,255,.2)/var(--neon-purple)/توهج بنفسجي · site-mute-btn.muted border var(--neon-red) color #ff8080 · nav-menu-trigger #151515/#ccc/#444 · .open blood · .has-active var(--neon-purple)/#e0b0ff · nav-menu-dropdown border rgba(255,20,20,.35) glow rgba(255,0,40,.18) · dropdown .nav-btn:hover gradient rgba(255,20,40,.16) border var(--neon-red) */ .nav-btn { box-shadow: 0 2px 8px rgba(0,0,0,.4); transition: 0.3s; background: var(--ground-2); color: var(--ash); border: 1px solid var(--line); padding: 12px 25px; position: relative; z-index: 150; font-family: 'Cairo', sans-serif; font-size: 1.1rem; font-weight: bold; cursor: pointer; border-radius: 4px; text-decoration: none; display: inline-flex; justify-content: center; align-items: center; overflow: hidden; } .site-mute-btn.muted { background: linear-gradient(150deg,rgba(200,0,0,.22),rgba(20,0,0,.9)); border-color: var(--blood-bright); color: var(--blood-ink); box-shadow: 0 0 14px var(--blood-glow); } /* أشرطة التنقل تلتف على الشاشات الصغيرة حتى لا يحدث تجاوز أفقي */ #cashier-nav, #control-nav, #mena-nav, #maze-nav, #partner-nav, #admin-nav, #accountant-nav { flex-wrap: wrap; } @media (max-width: 700px) { #cashier-nav, #control-nav, #mena-nav, #maze-nav, #partner-nav, #admin-nav, #accountant-nav { gap: 8px !important; padding: 0 8px; box-sizing: border-box; width: 100%; } #cashier-nav .nav-btn, #control-nav .nav-btn, #mena-nav .nav-btn, #maze-nav .nav-btn, #partner-nav .nav-btn, #admin-nav .nav-btn, #accountant-nav .nav-btn { font-size: 0.78rem !important; padding: 9px 12px !important; flex: 0 1 auto; } body, html { overflow-x: hidden; } } .nav-btn.active { background: rgba(138, 0, 0, 0.2); color: var(--bone); border-color: var(--blood-bright); box-shadow: inset 0 0 15px rgba(200,26,26,0.14), 0 0 15px var(--blood-glow); } /* admin كان بنفسجياً — وُحّد للدم مثل بقية الرتب */ .nav-btn.admin-nav.active { background: rgba(138, 0, 0, 0.2); border-color: var(--blood-bright); box-shadow: inset 0 0 15px rgba(200,26,26,0.14), 0 0 15px var(--blood-glow); } .nav-btn:hover:not(.active) { background: var(--ground-3); color: var(--bone); border-color: var(--ash-dim); } /* ══════════════════════════════════════════════════════════════ ✅ إضافة بطلب المالك: قائمة تنقّل احترافية بمجموعات منسدلة — بدل صف طويل من الأزرار المتفرقة. تُستخدم لحساب الأدمن والشركاء. كل الأزرار جوّة القوائم تستخدم نفس onclick الأصلي بالضبط (صفر تغيير بالمنطق، تنظيم بصري بس). ══════════════════════════════════════════════════════════════ */ .nav-menu-bar { display: flex; justify-content: center; gap: 10px; margin-top: 25px; flex-wrap: wrap; position: relative; z-index: 200; } .nav-menu-group { position: relative; } .nav-menu-trigger { background: var(--ground-2); color: var(--bone-dim); border: 1px solid var(--line); padding: 12px 22px; border-radius: 6px; font-family: 'Cairo', sans-serif; font-size: 1rem; font-weight: bold; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: .2s; box-shadow: 0 2px 8px rgba(0,0,0,.4); } .nav-menu-trigger:hover { background: var(--ground-3); border-color: var(--ash-dim); color: var(--bone); } .nav-menu-trigger .nmt-arrow { font-size: .7rem; transition: transform .2s; opacity: .7; } .nav-menu-group.open .nav-menu-trigger { background: rgba(138,0,0,.2); border-color: var(--blood-bright); color: var(--bone); } .nav-menu-group.open .nmt-arrow { transform: rotate(180deg); } /* ✅ يبيّن الفئة نفسها "نشطة" إذا أحد أزرارها الداخلية هو التبويب المفتوح حالياً — كان بنفسجياً، وُحّد للدم */ .nav-menu-trigger.has-active { border-color: var(--blood); color: var(--blood-ink); } @keyframes kbDropdownIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .nav-menu-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 250; /* 🎨 [إعادة تصميم بصري] زجاج داكن (Glassmorphism) بدل الخلفية الرمادية المصمتة — شفافية جزئية + تمويه للمحتوى خلفها، مع إطار وتوهج أحمر نيون خفيف ينسجم مع ثيم الرعب (نفس --neon-red المستخدم أصلاً بحالة "القائمة مفتوحة" على الزر الأب، بدل إدخال لون جديد). backdrop-filter مدعومة بمعظم المتصفحات الحديثة؛ المتصفحات القديمة تتجاهلها بأمان وتبقى بخلفية شبه شفافة عادية بدون تمويه — تدهور سلس (Graceful degradation)، لا كسر. */ background: rgba(10,10,10,.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--blood-dim); border-radius: 10px; padding: 10px; /* 🔧 [تصحيح مبني على قياس فعلي] النسخة السابقة هنا حطّت min-width:250px — بس القياس الفعلي بمتصفح حقيقي (headless) لكل قوائم النظام الحالية بيّن أعرض عنصر فيها يحتاج ~226px بس — يعني min-width:250px نفسها كانت السبب المتبقي للفراغ الزائد رغم width:max-content (كانت هي القيد الفعلي المسيطر، لا المحتوى). خفّضناها لـ160px — تحت حاجة كل القوائم الحالية فعلياً، فتصير width:max-content هي المتحكّمة دائماً (كل قائمة تاخذ عرض محتواها بالضبط، مو رقماً موحّداً مفروضاً)، وتبقى فقط كأرضية درنيا لأي قائمة مستقبلية بعنصر واحد قصير جداً. */ width: max-content; min-width: 160px; max-width: 320px; box-shadow: 0 14px 34px rgba(0,0,0,.75), 0 0 22px var(--blood-glow), inset 0 0 0 1px rgba(255,255,255,.03); /* المسافة بين عناصر القائمة وُسِّعت 6px→8px بطلبك — بقية التباعد (padding الحاوية/العناصر) بلا تغيير لأنه المحاذاة الممتازة السابقة محفوظة كما هي */ flex-direction: column; gap: 8px; /* حركة ظهور انسيابية — animation على الكلاس نفسه تعني إنها تُشغَّل تلقائياً بالمتصفح في كل مرة JS يبدّل display من none لـflex (بدون أي حاجة نلمس JS) */ animation: kbDropdownIn .18s ease-out; } /* ✅ إصلاح (سياق التكديس المحاصر بـ#header-section): إظهار/إخفاء القائمة صار يُتحكم فيه مباشرة عبر JS (display inline-style) بدل هذا الـselector — لأن القائمة تنتقل فعلياً خارج .nav-menu-group وقت الفتح (راجع kbOpenNavMenu)، فما تبقى حفيدتها بالـDOM ليطابقها هذا الـselector أصلاً. */ /* ✅✅ إصلاح جذري ومهم (بلاغ: "الخيارات تاخذ نصف الشاشة، كبيرة بشكل غبي"): التعليق فوگ كان ناقص علامة الإغلاق — فبلعت ثلاث قواعد CSS التالية بالكامل (صارت جزء من التعليق نفسه، ما تنطبق إطلاقاً!). هذي بالضبط القواعد اللي تخلي أزرار القائمة المنسدلة مضغوطة ومرتبة (عرض كامل داخل القائمة، محاذاة لليسار، بدون تكبير) بدل ما ترجع لحجمها الطبيعي الكامل المصمَّم لشريط التنقل الأفقي — وده بالضبط اللي كان يخلي القائمة تبين "كبيرة وذاهبة لليمين" متل ما وصفته. */ .nav-menu-dropdown .nav-btn { width: 100%; justify-content: flex-start; padding: 11px 16px; font-size: .88rem; box-shadow: none; background: transparent; border-radius: 6px; /* 🎨 خط جانبي (border-right لأن RTL) محجوز بعرضه دائماً (شفاف افتراضياً) — يمنع أي "قفزة" بعرض العنصر لحظة ظهوره بالـhover؛ يتلوّن بس وقتها. */ border: 1px solid transparent; border-right: 2px solid transparent; transition: background .2s ease, border-color .2s ease, text-shadow .2s ease, color .2s ease; } .nav-menu-dropdown .nav-btn:hover:not(.active) { /* تدرج دم شفاف، خط جانبي دموي، وتوهج خفيف على النص */ background: linear-gradient(90deg, rgba(200,26,26,.16), rgba(200,26,26,0) 75%); border-right-color: var(--blood-bright); text-shadow: 0 0 8px var(--blood-glow); color: var(--bone); } .nav-menu-dropdown .nav-btn.active { border-color: var(--blood-bright); } /* ══════════════════════════════════════════════════════════════ 🟢 [ميزة جديدة] لوحة تتبّع الحضور اللحظي — Staff Presence Tracker. كل صنف مسبوق عمداً بـ .staff-tracker- (عزل كامل — صفر تعارض محتمل مع أي صنف موجود أو مستقبلي بالنظام). راجع staffTracker.* بالجافاسكربت. ══════════════════════════════════════════════════════════════ */ .staff-tracker-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; } .staff-tracker-search { flex: 1; min-width: 220px; background: #0d0d0d; border: 1px solid #333; color: #eee; padding: 11px 16px; border-radius: 8px; font-family: 'Cairo', sans-serif; font-size: .9rem; } .staff-tracker-search:focus { outline: none; border-color: var(--neon-red); } .staff-tracker-summary { color: #999; font-size: .8rem; font-family: 'Cairo', sans-serif; white-space: nowrap; } .staff-tracker-summary b { color: var(--neon-green); } .staff-tracker-group { margin-bottom: 22px; } .staff-tracker-group-title { display: flex; align-items: center; gap: 8px; color: #ccc; font-weight: bold; font-size: .92rem; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #222; } .staff-tracker-group-count { background: rgba(255,0,0,.12); color: #ff8080; border: 1px solid rgba(255,0,0,.3); border-radius: 20px; padding: 1px 9px; font-size: .72rem; font-weight: bold; } .staff-tracker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .staff-tracker-card { background: #0d0d0d; border: 1px solid #262626; border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; transition: border-color .2s ease, transform .2s ease; user-select: none; -webkit-user-select: none; } .staff-tracker-card:hover { border-color: #3a3a3a; transform: translateY(-2px); } .staff-tracker-card.is-online { border-color: rgba(0,255,68,.25); } .staff-tracker-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: #444; } .staff-tracker-card.is-online .staff-tracker-dot { background: var(--neon-green); box-shadow: 0 0 8px rgba(0,255,68,.7); animation: staffTrackerPulse 1.8s ease-in-out infinite; } @keyframes staffTrackerPulse { 0%, 100% { box-shadow: 0 0 6px rgba(0,255,68,.6); opacity: 1; } 50% { box-shadow: 0 0 14px rgba(0,255,68,.9); opacity: .75; } } .staff-tracker-info { min-width: 0; flex: 1; } .staff-tracker-name { color: #eee; font-weight: bold; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .staff-tracker-status { color: #777; font-size: .72rem; margin-top: 2px; } .staff-tracker-card.is-online .staff-tracker-status { color: var(--neon-green); } .staff-tracker-empty { text-align: center; color: #666; font-family: 'Cairo', sans-serif; padding: 30px; font-size: .85rem; } @media (max-width: 700px) { .staff-tracker-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .staff-tracker-card { padding: 10px 12px; } } @media (max-width: 420px) { .staff-tracker-grid { grid-template-columns: 1fr; } } @media (max-width: 700px) { .nav-menu-bar { gap: 6px !important; padding: 0 8px; box-sizing: border-box; width: 100%; } .nav-menu-trigger { font-size: .8rem !important; padding: 9px 12px !important; } .nav-menu-dropdown { right: auto; left: 0; min-width: 200px; } } /* --- التصميم الشبكي (Grid) --- */ .dashboard { display: none; /* ✅ إصلاح: كانت الشبكة تحجز ٤ أعمدة دائماً بشكل ثابت، حتى لو البطاقات الفعلية أقل (متل كونترول غرف الهروب بعد ما شلنا بطاقة المتاهة منه — صارت ٣ بطاقات بس، والعمود الرابع الفاضي يبقى محجوز فيبين فراغ وتنزاح البطاقات بدل ما تملي الشاشة). الان تتوسّع البطاقات تلقائياً لتملي العرض المتوفر مهما كان عددها — ٣ بالكونترول، ٤ بالكاشير — بدون ما نحتاج نفرّق بينهم بالكود. */ /* 🔧 [تحسين UI/UX] الحد الأدنى كان 300px — يعني ٤ بطاقات الكاشير ما تسع بصف واحد إلا على شاشة أوسع من ~1260px تقريباً (٤×300 + ٣×20 فجوة)، فتنزل الرابعة لصف ثاني وتحتاج تمرير عمودي رغم وجود مساحة كافية على أغلب شاشات الكاشير الفعلية (~1024-1280px). خفّضناها لـ250px (٤×250+٣×20=1060px) — تكفي براحة لصورة البطاقة ونصها وأزرارها (نفس المحتوى بالضبط)، وتخلي الأربع بطاقات تظهر بصف واحد على مدى أوسع من الشاشات الشائعة فعلياً. auto-fit نفسها ما تغيّرت — لسا تتقلّص/تتوسّع تلقائياً بغض النظر عن عدد البطاقات. */ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; padding: 20px; width: 100%; max-width: 1400px; z-index: 10; margin: 0 auto; box-sizing: border-box; } @media (max-width: 1100px) { .dashboard { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .dashboard { grid-template-columns: 1fr; } } /* ✅ إصلاح بطلب المالك (بلاغ متكرر: "عند الكونترول، بعض الأجهزة تضهر الغرف وحدة تحت الثانية" رغم وجود مساحة كافية): التعديل السابق هنا كان يفرض عمود وحد دائماً على الكونترول (!important)، بغض النظر عن عرض الشاشة — وهذا بالضبط سبب المشكلة المتكررة: أي جهاز واسع (تابلت بالعرض، شاشة مكتب) كان يُجبر على عمود وحد رغم وجود مساحة تكفي ٢-٣ أعمدة براحة. الحل: نلغي هذا الإجبار كلياً، ونخلي الكونترول يستخدم نفس الشبكة المرنة الطبيعية المستخدمة بكل مكان ثاني (تتوسّع تلقائياً حسب المساحة المتوفرة فعلياً، وتتقلّص لعمود وحد فقط على الشاشات الضيقة فعلياً — القاعدة اللي فوگ بالضبط، بدون أي استثناء إضافي للكونترول). البطاقة نفسها ما تصير ضيقة أبداً — minmax(300px,1fr) بالقاعدة الأساسية أصلاً يضمن عرض مريح لكل بطاقة قبل ما يضيف عمود ثاني بجنبها. */ /* ══════ بطاقة الغرفة — تصميم الكونترول ══════ */ .room-card-image { width: 100%; height: 0; background-size: cover; background-position: center; background-color: #050505; transition: height .35s ease; overflow: hidden; flex-shrink: 0; } .room-card-image.has-image { height: 130px; } .room-card { background: linear-gradient(160deg, #0a0000 0%, #090909 60%, #0d0000 100%); border: 1px solid rgba(138,0,0,.25); border-radius: 10px; padding: 0; position: relative; overflow: hidden; box-shadow: 0 6px 30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.02); /* transform مضاف للقائمة حتى يشتغل رفع التحويم أسفل — بلا ذكره هنا كان الرفع يقفز فوراً بدل ما ينزلق (خاصية غير مذكورة = بلا انتقال). */ transition: border-color .3s, box-shadow .3s, transform var(--kb-dur-base) var(--kb-ease-move); display: flex; flex-direction: column; box-sizing: border-box; } .room-card.busy-state { border-color: rgba(200,0,0,.5) !important; box-shadow: 0 6px 30px rgba(0,0,0,.9), 0 0 20px rgba(138,0,0,.12) !important; } /* -- 6) هوية الغرفة على بطاقتها: طبقة تلوين قطرية خافتة جداً + خطّ لون الغرفة. ⚠️ (2026-08-29) كان خطّ الهوية شريطاً عمودياً ٣px على الحافة الابتدائية مرسوماً كطبقة background — وهذا خطأ بصريّ: صورة الغرفة (عنصر ابن معتم بارتفاع ١٣٠px أعلى البطاقة) تحجب الشريط تماماً، فيبدأ من نقطة مختلفة على كل بطاقة، لا يمتد كامل الارتفاع، وتقصّ الزوايا الدائرية طرفيه — «شكله مو متطابق». استُبدل بخطٍّ أفقيّ نظيف بعرض البطاقة عند حدّ الصورة/الرأس (border-top على .rc2-head): موضعه وطوله متطابقان تماماً على البطاقات الثلاث لأن كل صورة بنفس الارتفاع، ولا تمسّه الزوايا لأنه داخل البطاقة لا على حافتها. لون كل غرفة يُمرَّر عبر متغيّر --rc-accent تقرؤه .rc2-head. الطبقة القطرية الخافتة كما هي. -- */ #card-nun { --rc-accent: var(--room-nun); background: linear-gradient(160deg, var(--room-nun-bg) 0%, transparent 55%), linear-gradient(160deg, #0a0000 0%, #090909 60%, #0d0000 100%); } #card-annabelle { --rc-accent: var(--room-annabelle); background: linear-gradient(160deg, var(--room-annabelle-bg) 0%, transparent 55%), linear-gradient(160deg, #0a0000 0%, #090909 60%, #0d0000 100%); } #card-ring { --rc-accent: var(--room-ring); background: linear-gradient(160deg, var(--room-ring-bg) 0%, transparent 55%), linear-gradient(160deg, #0a0000 0%, #090909 60%, #0d0000 100%); } /* -- 9) "تنفّس" الغرفة النشطة — إشارة أن العدّاد يشتغل، تُقرأ بلمحة عين من بعيد. ⚠️ تاريخ هذي القاعدة يستاهل يُكتب: كانت مكتوبة بـfilter: drop-shadow متحرّك على البطاقة كاملة، **وما اشتغلت ولا مرة** — لأن ولا سطر جافاسكربت كان يضيف كلاس busy-state أصلاً (أربع قواعد كانت معلّقة عليه: هذي، والحدّ الأحمر، وخط المسح، ووميض CCTV — كلها ميتة). صار يُضاف الحين من updateRoomUI. ولمّا صارت تشتغل فعلاً، صار لازم تكون رخيصة: drop-shadow **يعيد رسم** البطاقة كل إطار، وهذي حلقة ٥ ثوانٍ لا تنتهي طوال الجلسة، على ثلاث بطاقات بوقت واحد، على آيباد داخل الغرفة. البديل هنا يعطي نفس المظهر تقريباً بصفر إعادة رسم: طبقة ::after ثابتة (الوهج مرسوم مرة وحدة كـbox-shadow داخلي)، والمتحرّك الوحيد هو opacity — خاصية مركِّبة صرفة تعيش على الـGPU وحدها. ::before محجوز أصلاً لخط المسح العلوي (تحت)، فـ::after هو الحر. -- */ .room-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0; box-shadow: inset 0 0 34px rgba(140,140,140,.16); } /* التجهيز: كهرماني وأسرع — «هذي تحتاج فعلاً منك» مقابل «هذي شغّالة». الفرق بين الحالتين يجب يُقرأ بلمحة من آخر الغرفة، فاللون هو الفارق لا الشدّة. */ .room-card.prep-state::after { box-shadow: inset 0 0 34px rgba(255,157,0,.20); animation: kbLiveBreathe 2.6s var(--kb-ease-move) infinite; } .room-card.busy-state::after { animation: kbLiveBreathe 5s var(--kb-ease-move) infinite; } @keyframes kbLiveBreathe { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } /* ✅ وهج فوز قصير على البطاقة لحظة "نجاة" — يشارك نفس الطبقة أعلاه (لون واحد يفوز لأنه أخص)، فما نضيف عنصراً ولا طبقة تركيب ثانية للبطاقة. يُضاف الكلاس من kbCelebrate ويُرفع بعد ٢.٦ ثانية. */ .room-card.kb-win::after { box-shadow: inset 0 0 46px rgba(0,255,68,.30); animation: kbWinGlow 2.4s var(--kb-ease-out) 1; } @keyframes kbWinGlow { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .room-card.busy-state::after, .room-card.prep-state::after, .room-card.kb-win::after { animation: none; } /* الشبكة العامة تسحق المدة لا الحركة، فبلا هذا السطر يبقى وهج الانشغال عالقاً على الإطار الأخير (opacity:0 للتنفّس — سليم) — نصرّح به عمداً حتى ما يعتمد المظهر على أي إطار أخير قد يتغيّر لاحقاً. الحالة تبقى مقروءة: وهج ثابت بدل نابض، فما يخسر شي غير الحركة. */ .room-card.busy-state::after, .room-card.prep-state::after { opacity: .55; } } /* ✅ أنيميشن 4: دائرة التموّج عند الضغط */ .kb-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.4); transform: scale(0); animation: kbRippleAnim .6s ease-out forwards; pointer-events: none; z-index: 5; } @keyframes kbRippleAnim { to { transform: scale(1); opacity: 0; } } /* ✅ لحظة "شكراً" الجميلة بعد الضغط على زر تحديث الصفحة — أيقونة تنبثق بارتداد خفيف + نص يتلاشى للداخل بعدها بلحظة، وتضل ظاهرة فترة كافية يشوفها الموظف بوضوح قبل ما الصفحة فعلياً تحمّل من جديد */ #force-reload-thanks-panel.kb-show { display: flex !important; } #force-reload-thanks-icon { animation: kbThanksIconPop .6s var(--kb-ease-pop) both; filter: drop-shadow(0 0 22px rgba(255,60,60,.65)); } @keyframes kbThanksIconPop { 0% { transform: scale(0) rotate(-20deg); opacity: 0; } 55% { transform: scale(1.2) rotate(6deg); opacity: 1; } 75% { transform: scale(.92) rotate(-2deg); } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } #force-reload-thanks-text { animation: kbThanksTextIn .5s ease .18s both; } @keyframes kbThanksTextIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ✅ أنيميشن 5: بادج "جاري تجهيز الفاتورة..." */ #kb-printing-badge { position: fixed; bottom: 20px; right: 20px; z-index: 2147483000; background: rgba(10,10,10,.92); border: 1px solid rgba(255,0,0,.4); border-radius: 10px; padding: 10px 16px; display: flex; align-items: center; gap: 10px; font-family: 'Cairo', sans-serif; font-size: .85rem; color: #ddd; box-shadow: 0 10px 30px rgba(0,0,0,.6); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s; } #kb-printing-badge.kb-printing-show { opacity: 1; transform: translateY(0); } .kb-printing-icon { display: inline-block; animation: kbPrintingBounce .6s ease-in-out infinite; font-size: 1.2rem; } @keyframes kbPrintingBounce { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-8deg); } } /* ✅ أنيميشن 3: نبض تحذيري على بطاقة الغرفة اللي وقتها قارب ينتهي تحديداً */ .room-card.room-card-critical { animation: roomCardCriticalPulse 1.1s ease-in-out infinite; border-color: #ff2020 !important; } @keyframes roomCardCriticalPulse { 0%, 100% { box-shadow: 0 6px 30px rgba(0,0,0,.9), 0 0 14px rgba(255,0,0,.3); } 50% { box-shadow: 0 6px 30px rgba(0,0,0,.9), 0 0 34px rgba(255,0,0,.65); } } /* ✅ شارة صحة الاتصال (kb-health-badge) — تصير أوضح لما فيه مشكلة فعلية بدل ما تبقى نقطة صغيرة خافتة بالزاوية سهل تفوت الموظف وهو مشغول */ #kb-health-badge.kb-health-alert { animation: kbHealthAlertPulse 1.3s ease-in-out infinite; border: 1px solid rgba(255,32,32,.6) !important; } #kb-health-badge:hover { opacity: 1 !important; } @keyframes kbHealthAlertPulse { 0%, 100% { box-shadow: 0 0 6px rgba(255,32,32,.35); } 50% { box-shadow: 0 0 16px rgba(255,32,32,.85); } } /* ✅ إضافة: لوحة الفحص الفوري (تفتح بالضغط على شارة الاتصال) */ #kb-health-popup { position: fixed; top: 36px; right: 8px; z-index: 2147483647; background: #0d0d0d; border: 1px solid #333; border-radius: 10px; padding: 12px 14px; font-family: 'Cairo'; font-size: .78rem; color: #ccc; min-width: 220px; box-shadow: 0 14px 34px rgba(0,0,0,.7); direction: rtl; animation: kbRowIn var(--kb-dur-base) var(--kb-ease-out) both; } /* ✅ لمسة احتفال بسيطة للموظفين — تلعب لحظة "نجاة" فريق (غرف أو متاهة)، لثانية وحدة بس، ما توقف أي شي وما تحتاج تفاعل. هدفها كسر الرتابة بلحظات النجاح فقط. */ .kb-confetti-piece { position: fixed; top: -20px; z-index: 999998; pointer-events: none; border-radius: 2px; opacity: 0; will-change: transform, opacity; animation: kbConfettiFall 1.1s ease-in forwards; } @keyframes kbConfettiFall { 0% { opacity: 1; transform: translateY(0) rotate(0deg); } 100% { opacity: 0; transform: translateY(70vh) rotate(540deg); } } /* ✅ بطاقة المتاهة المدمجة بشبكة الحجز المباشر — نفس الوزن البصري لبطاقات الغرف */ /* ١ج: بطاقة «كابوس مايز» بشبكة الكاشير — كانت بنفسجية بالكامل (rgba(176,0,255)/#c77dff). المتاهة ليست غرفة هروب ولا لون خاص لها — وُحّدت للدم. القديم بالتعليق للرجوع: card:hover border rgba(176,0,255,.55) glow rgba(176,0,255,.18) · badge bg rgba(176,0,255,.1) color #c77dff border rgba(176,0,255,.35) · open-btn bg #111 border rgba(176,0,255,.4) color #c77dff · open-btn:hover bg rgba(176,0,255,.15) border #c77dff */ .maze-entry-card { cursor: pointer; align-self: start; transition: border-color .25s, transform .15s, box-shadow .25s; } .maze-entry-card:hover, .maze-entry-card:active { border-color: rgba(200,26,26,.55); box-shadow: 0 6px 30px rgba(0,0,0,.85), 0 0 22px var(--blood-glow); transform: scale(1.01); } .maze-entry-body { padding: 16px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; } .maze-entry-badge { display: inline-block; background: rgba(138,0,0,.10); color: var(--blood-ink); border: 1px solid var(--blood-dim); border-radius: 20px; padding: 8px 18px; font-family: 'Share Tech Mono', monospace; font-size: .9rem; } .maze-entry-badge.busy { background: rgba(255,0,0,.1); color: var(--neon-red); border-color: var(--blood-red); } .maze-entry-open-btn { width: 100%; padding: 11px; background: var(--ground-2); font-family: 'Cairo', sans-serif; font-size: .95rem; font-weight: 700; cursor: pointer; border: 1px solid var(--blood-dim); color: var(--blood-ink); border-radius: 6px; transition: .25s; } .maze-entry-open-btn:hover, .maze-entry-open-btn:active { background: rgba(138,0,0,.16); border-color: var(--blood-bright); } .room-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(138,0,0,.7), transparent); opacity: 0; transition: opacity .3s; } .room-card.busy-state::before { opacity: 1; } /* رفع بسيط عند التحويم — transform وحده (طبقة مركِّبة، بلا تخطيط ولا إعادة رسم). ⚠️ مقيّد بـhover:hover: على الآيباد واللمس عموماً «التحويم» يلتصق بعد أول لمسة فتبقى البطاقة مرفوعة حتى تُلمس غيرها — سلوك يبان عطلاً لا لمسة تصميم. */ @media (hover: hover) { .room-card:hover { transform: translateY(-2px); } } .room-card:hover { border-color: rgba(200,0,0,.4); box-shadow: 0 8px 50px rgba(0,0,0,.95), 0 0 20px rgba(100,0,0,.15); } .room-photo { width: 100%; height: 130px; object-fit: cover; border-radius: 6px; margin-bottom: 12px; border: 1px solid #333; filter: brightness(0.75) contrast(1.1); box-shadow: 0 0 20px rgba(138,0,0,0.25); } .dw-pick { background: #0a0a0a; border: 1px solid var(--blood-red); color: #ddd; padding: 8px 12px; border-radius: 4px; cursor: pointer; font-family: 'Cairo'; font-weight: bold; font-size: 0.78rem; box-shadow: 0 3px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); transition: .2s; display: inline-flex; align-items: center; gap: 6px; } .dw-pick:hover { background:rgba(138,0,0,0.3); color:#fff; } .dw-pick-cam { background: linear-gradient(150deg,rgba(0,255,68,.14),rgba(0,14,4,.92)); border-color: var(--neon-red); color: var(--neon-green); } /* ١ج: حقول الكاشير (الخصم/السعر) — لون فقط. القديم: inv-adj border #2e2e2e · inv-row label #999 · inv-row input bg #0d0d0d color #fff border #333 · inv-final color var(--neon-green) border #333 · price-hint color var(--neon-red) · room-title border-bottom #444 */ .inv-adj { background:rgba(0,0,0,0.35); border:1px solid var(--line); border-radius:5px; padding:9px 10px; margin-top:6px; } .inv-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; } .inv-row label { color:var(--ash); font-size:0.78rem; min-width:52px; font-family:'Cairo'; } .inv-row input { flex:1; background:var(--ground-1) !important; color:var(--bone) !important; -webkit-text-fill-color:var(--bone) !important; border:1px solid var(--line); border-radius:4px; padding:7px 9px; font-family:'Cairo'; font-size:0.85rem; } .inv-final { color:var(--alive); font-weight:bold; font-size:0.9rem; text-align:center; border-top:1px dashed var(--line); padding-top:7px; margin-top:3px; } .price-hint { background: rgba(138,0,0,0.12); border: 1px dashed var(--blood-red); color: var(--blood-ink); font-size: 0.85rem; text-align: center; padding: 8px; border-radius: 4px; margin-top: 4px; font-weight: bold; } /* كان الخطّ السفليّ على .room-title وحده (عنصر flex الأوسط)، فيمتدّ من نقطة الحالة (يسار) إلى أيقونة الغرفة (يمين) بمقدارين مختلفين — خطّ متطرّف لا يحاذي شيئاً. نُقل إلى .rc2-head فصار بعرض الرأس كاملاً ومتماثلاً على البطاقات، مع حَشوٍ جانبيّ يحاذي حقول الإدخال أسفله (١٦px) بدل التصاق العنوان بالحافة. */ .room-title { font-family:'Cairo',sans-serif; font-size: 2.2rem; margin: 0; color: #fff; text-align: center; letter-spacing: 3px; text-shadow: 0 2px 5px rgba(0,0,0,0.5); word-break: break-word; } .rc2-head { display: flex; align-items: center; gap: 10px; position: relative; padding: 13px 16px 12px; border-top: 3px solid var(--rc-accent, var(--blood-dim)); border-bottom: 1px solid var(--line); } .rc2-head .room-title { flex: 1; min-width: 0; } /* ✅ إضافة بطلب المالك (بلاغ: "اسم الفريق يخرج من حافة البطاقة، شكله غير مرضي"): هذا العنصر ما كان له أي تنسيق أصلاً — اسم فريق طويل كان يمتد بدون التفاف ولا هامش، فيبين ملتصق بحافة البطاقة أو خارجها بصرياً. الحين يلتف بشكل مضبوط ويحترم حدود البطاقة دائماً بغض النظر عن طول الاسم. */ .rc2-team-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 8px 14px; box-sizing: border-box; width: 100%; } .rc2-team-bar span:first-child { word-break: break-word; overflow-wrap: break-word; min-width: 0; } .room-icon-badge { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(200,0,0,.45); box-shadow: 0 0 14px rgba(200,0,0,.35); } .room-icon-badge svg { width: 100%; height: 100%; display: block; } /* [حُذف] .cctv-btn وقاعدة الوميض التابعة لها — العنصر نفسه أُزيل من بطاقة الغرفة، فما عاد له وجود بأي ماركب ولا بأي جافاسكربت (تحققت بمسح js/ كلها وindex.html والأصل: صفر ذكر خارج CSS). كانت القاعدة ميتة لسببين مستقلين في آنٍ واحد — الكلاس busy-state ما كان يُضاف أصلاً، والعنصر غير موجود. @keyframes blink بقي: ما زال مستعملاً بـ.player-paused-msg أسفل. */ @keyframes blink { 50% { opacity: 0; } } .team-info { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; } .row-inputs { display: flex; gap: 12px; } /* ⚠️ المرحلة ١ج: نصّ الحقول كان var(--neon-red) (#ff0000) — يخلي «مستوى الرعب» والقيم المكتوبة حمراء فاقعة وسط حقول رمادية. صار عظمياً موحّداً. الحواف والتركيز للدم بدل الأحمر الصرف. البُنية (أبعاد/حشو/حدود) لم تُمَسّ. للرجوع اليدوي: color: var(--neon-red); + border-color: var(--neon-red); box-shadow: 0 0 10px rgba(255,0,0,.25); */ .team-info input, .team-info select { background: var(--ground-2); border: 1px solid var(--line); color: var(--bone); padding: 12px; font-family: 'Cairo', sans-serif; font-size: 1rem; outline: none; width: 100%; box-sizing: border-box; transition: 0.3s; border-radius: 4px; } .team-info input::placeholder { color: var(--ash-dim); } .team-info input:focus, .team-info select:focus { border-color: var(--blood-bright); box-shadow: 0 0 10px var(--blood-glow); } .video-select.paid { border-color: var(--neon-green) !important; color: var(--neon-green) !important; text-shadow: 0 0 5px var(--neon-green); box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.1); } /* ══ زر حالة الغرفة ══ */ .status-btn { width: 100%; padding: 14px 12px; font-family: 'Cairo', sans-serif; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: all .25s ease; outline: none; border: 1px solid; border-radius: 6px; background: transparent; letter-spacing: 2px; text-transform: uppercase; } .status-btn.empty { /* ١ج: كان #3a3a3a / #2a2a2a / hover #666 #444 */ color: var(--ash-dim); border-color: var(--line-soft); background: rgba(255,255,255,.01); } .status-btn.empty:hover { color: var(--ash); border-color: var(--line); } .status-btn.prep { color: var(--neon-red); border-color: var(--neon-red); background: rgba(200,0,0,.06); text-shadow: 0 0 12px rgba(255,0,0,.6); animation: prepPulse 2s ease-in-out infinite alternate; } @keyframes prepPulse { from { box-shadow: 0 0 8px rgba(255,0,0,.15); } to { box-shadow: 0 0 20px rgba(255,0,0,.3); } } .status-btn.busy { color: var(--neon-red); border-color: var(--neon-red); background: rgba(200,0,0,.08); text-shadow: 0 0 15px var(--neon-red); box-shadow: inset 0 0 25px rgba(200,0,0,.15), 0 0 15px rgba(200,0,0,.1); animation: busyFlicker 3s ease-in-out infinite; } .status-btn.busy.busy-critical { color: #fff; border-color: var(--neon-red); background: rgba(255,0,0,.18); text-shadow: 0 0 15px var(--neon-red); } @keyframes busyFlicker { 0%,96%,100% { opacity: 1; } 97% { opacity: .88; } 98% { opacity: 1; } 99% { opacity: .92; } } .cashier-booking-panel { background: rgba(138, 0, 0, 0.1); border: 1px dashed var(--blood-red); padding: 15px; text-align: center; margin-top: 10px; display: none; border-radius: 4px; } .btn-send-booking { width: 100%; padding: 12px; background: var(--blood-red); color: white; border: none; font-family: 'Cairo', sans-serif; font-size: 1.2rem; font-weight: bold; cursor: pointer; transition: 0.3s; border-radius: 4px; } .btn-send-booking:hover:not(:disabled) { background: var(--blood-bright); box-shadow: 0 0 15px var(--blood-glow); } /* --- الأقسام المشتركة وتنسيق السجلات المحسن --- */ /* ✅ إصلاح بطلب المالك (بلاغ: "حجوزات الغرف الفورية أبعادها تتخربط، تبين بجانب الصفحة مو بالمنتصف"): width:100% + max-width بدون margin:auto يخلي العنصر يلتصق ببداية التخطيط (يمين الشاشة بصفحة RTL) بدل يتوسّط، بس على الشاشات الأعرض من 1400px. نفس الإصلاح ينطبق على كل الأقسام المشتركة هنا تلقائياً. */ #bookings-section, #video-requests-section, #history-section, #users-manage-section, #advance-bookings-section { display: none; position: relative; z-index: 100; width: 100%; max-width: 1400px; margin: 0 auto 30px auto; padding: 25px; background: rgba(15, 15, 15, 0.95); border: 1px solid #333; border-radius: 8px; box-sizing: border-box; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); } /* عناوين الأقسام — صيغة واحدة موحّدة (استعادة هوية الرعب: بديل «الشريط المحجوب»). كانت ٤ ألوان حلوى مختلفة تُقرأ فوضى. الآن: عظمي + شريط دم على الحافة الابتدائية + تدرّج خافت. ⚠️ للرجوع اليدوي (لا يوجد git) أعِد الأسطر الأربعة: #bookings-section .section-title { color: var(--neon-blue); border-bottom-color: rgba(0,229,255,.3); text-shadow: 0 0 10px rgba(0,229,255,.4); } #video-requests-section .section-title{ color: var(--neon-green); border-bottom-color: rgba(0,255,68,.3); text-shadow: 0 0 10px rgba(0,255,68,.4); } #history-section .section-title { color: var(--neon-orange); border-bottom-color: rgba(255,157,0,.3); text-shadow: 0 0 10px rgba(255,157,0,.4); } #users-manage-section .section-title { color: var(--neon-purple); border-bottom-color: rgba(176,0,255,.3); text-shadow: 0 0 10px rgba(176,0,255,.4); } (وعنوانا «الحجوزات المسبقة» و«جرد الأموال» يحملان لون inline في index.html — يُزال لاحقاً من المصدر.) */ .section-title { border-bottom: 2px solid var(--line); padding-bottom: 10px; margin-top: 0; font-size: 1.6rem; margin-bottom: 20px; color: var(--bone); border-inline-start: 5px solid var(--blood); padding-inline-start: 12px; background: linear-gradient(to left, rgba(138, 0, 0, .28), transparent 62%); } /* ✅ إصلاح بطلب المالك (بلاغ: "البطاقات والصفوف غير متناسقة بالجوال"): كانت 320px كحد أدنى لعرض البطاقة — على أضيق الأجهزة الشائعة (خصوصاً بعد حساب هوامش الصفحة الجانبية)، هذا يخلي البطاقة أعرض من المساحة المتوفرة فعلياً، فتضطر الشاشة تسوي سكرول أفقي أو تضغط المحتوى. 260px يضمن عمود واحد مريح على أي جهاز شائع، وبنفس الوقت يفسح المجال لأكثر من عمود بالشاشات الأوسع. */ #bookings-list, #users-list, #advance-bookings-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; align-items: stretch; width: 100%; } /* سجل المقاطع وسجل الفرق: جدول واحد يأخذ العرض كاملاً ولا يُحشر في عمود */ #video-requests-list, #history-list { display: block; width: 100%; } .booking-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.8); border-color: #444; } /* ✅ إصلاح: نفس مشكلة اسم الفريق الطويل اللي انصلحت ببطاقة الكونترول سابقاً — هنا بعنوان بطاقة الحجز/المستخدم، ما كان له أي حماية من فيض النص. */ .card-header { font-weight: bold; font-size: 1.3rem; border-bottom: 1px dashed #333; padding-bottom: 8px; margin-bottom: 5px; word-break: break-word; overflow-wrap: break-word; } .card-detail { font-size: 1rem; color: #aaa; word-break: break-word; overflow-wrap: break-word; } .card-detail span { color: #eee; } .empty-state-msg { color: #666; font-size: 1.2rem; text-align: center; grid-column: 1 / -1; padding: 30px; background: rgba(0,0,0,0.3); border: 1px dashed #333; border-radius: 8px; } .action-buttons { display: flex; gap: 10px; margin-top: auto; width: 100%; padding-top: 15px; } .btn-confirm, .btn-whatsapp, .btn-warning { flex: 1; padding: 10px; font-family: 'Cairo', sans-serif; font-size: 1rem; font-weight: bold; border-radius: 4px; cursor: pointer; transition: 0.3s; text-align: center; text-decoration: none; border: 1px solid; } .btn-whatsapp { background: rgba(37, 211, 102, 0.1); color: #25D366; border-color: #25D366; } .btn-whatsapp:hover { background: #25D366; color: #000; box-shadow: 0 0 15px rgba(37, 211, 102, 0.5); } .btn-confirm { background: rgba(0, 229, 255, 0.1); color: var(--neon-blue); border-color: var(--neon-blue); } .btn-confirm:hover { background: var(--neon-blue); color: #000; box-shadow: 0 0 15px rgba(0, 229, 255, 0.5); } .btn-warning { background: rgba(255, 0, 0, 0.15); color: #ff4444; border-color: #ff4444; width: 100%; margin-top: auto; } .btn-warning:hover:not(:disabled) { background: #ff0000; color: #fff; border-color: #ff0000; box-shadow: 0 0 20px rgba(255, 0, 0, 0.8); } .user-roles-group { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; background: #0a0a0a; padding: 10px; border-radius: 4px; border: 1px solid #222; } .user-roles-group label { display: flex; align-items: center; gap: 10px; cursor: pointer; color: #ccc; font-size: 1.1rem; } /* ١د: كانت بنفسجية (accent var(--neon-purple) · btn bg rgba(176,0,255,.1) border/color var(--neon-purple) · hover bg var(--neon-purple) توهج rgba(176,0,255,.5)) — نُقلت لسُلّم الدم */ .user-roles-group input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--blood-bright); cursor: pointer; } .btn-save-user { background: rgba(138, 0, 0, 0.12); border: 1px solid var(--blood-bright); color: var(--blood-ink); padding: 10px; border-radius: 4px; cursor: pointer; font-family: 'Cairo'; font-weight: bold; transition: 0.3s; width: 100%; margin-top: auto; } .btn-save-user:hover { background: var(--blood); color: #fff; box-shadow: 0 0 15px var(--blood-glow); } .timer-container { display: none; flex-direction: column; align-items: center; margin-top: 20px; padding-top: 20px; border-top: 1px dashed #444; } /* ══════════════════════════════════════════════════════════════════════════ المرحلة ١ج — كتلة المؤقّت (الكونترول): ألوان من السُلّم بدل النيون المبعثر. لم تُمَسّ أي أبعاد/حشو/خط/حركة — لون فقط. للرجوع اليدوي (لا git): .sfx-board button : background #1a1a1a; border #444; color #aaa; .sfx-board button:hover : background #333; color #fff; border-color #666; .time-adjust button : background #111; border #555; color #ccc; .time-adjust button:hover : background #333; color #fff; border-color var(--neon-blue); .timer-display : color var(--neon-red); text-shadow 0 0 20px rgba(255,0,0,.6); .tracker-box : background #111; border #444; color var(--neon-orange); .tracker-box.warnings : color #ff4444; border-color #ff4444; .tracker-note : color #555; .btn : background #111; border #555; color #ccc; .btn-pause : border-color/color var(--neon-orange); .btn-pause:hover : background rgba(255,157,0,.15); box-shadow 0 0 15px rgba(255,157,0,.3); .btn-reset:hover : background #333; color #fff; border-color #fff; .end-game-group : border-top 1px solid #333; .btn-win : background rgba(0,255,68,.05); border var(--neon-green); color var(--neon-green); .btn-win:hover : background rgba(0,255,68,.2); box-shadow 0 0 15px rgba(0,255,68,.4); .btn-lose : background rgba(255,0,0,.05); border var(--neon-red); color var(--neon-red); .btn-lose:hover : background rgba(255,0,0,.2); box-shadow 0 0 15px rgba(255,0,0,.4); ══════════════════════════════════════════════════════════════════════════ */ .sfx-board { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-bottom: 20px; } .sfx-board button { flex: 1 1 calc(33.333% - 6px); min-width: 78px; background: var(--ground-2); border: 1px solid var(--line); color: var(--ash); padding: 8px 5px; font-family: 'Cairo', sans-serif; font-size: 0.95rem; cursor: pointer; transition: 0.2s; border-radius: 4px; } .sfx-board button:hover { background: var(--ground-3); color: var(--bone); border-color: var(--ash-dim); } .sfx-active { background: var(--blood-red) !important; color: #fff !important; border-color: var(--blood-bright) !important; box-shadow: 0 0 15px var(--blood-glow); } .time-adjust { display: flex; gap: 15px; margin-bottom: 10px; width: 100%; justify-content: center; } .time-adjust button { background: var(--ground-2); border: 1px solid var(--line); color: var(--bone-dim); padding: 8px 20px; cursor: pointer; font-family: 'Share Tech Mono', monospace; font-size: 1.2rem; transition: 0.2s; border-radius: 4px; } .time-adjust button:hover { background: var(--ground-3); color: var(--bone); border-color: var(--blood-bright); } /* ✅ إصلاح بطلب المالك (بلاغ: "شاشات الغرف بعض الأجهزة ماتبين كاملة وحلوة"): كان حجم الخط ثابت تماماً (4.5rem) بدون أي تجاوب مع عرض الشاشة — على جهاز ضيق (تابلت أصغر أو بنسبة عرض مختلفة)، هذا الحجم الكبير الثابت يقدر يفيض خارج المساحة المتوفرة بسهولة، خصوصاً مع overflow:hidden على الحاوية الأم (يعني الفيض ينقطع/يختفي بصمت بدل ما يظهر كسكرول). clamp() يخلي الحجم يتقلّص تلقائياً على الشاشات الضيقة، ويبقى بنفس حجمه الأصلي على الشاشات الواسعة — صفر تغيير على الأجهزة اللي أصلاً شغّالة صح. */ .timer-display { font-family: 'Share Tech Mono', monospace; font-size: clamp(2.6rem, 13vw, 4.5rem); color: var(--blood-ink); margin-bottom: 10px; text-shadow: 0 0 20px var(--blood-glow); transition: color 0.3s, text-shadow 0.3s; line-height: 1; } .trackers { display: flex; gap: 15px; width: 100%; margin-bottom: 20px; } .tracker-box { flex: 1; display: flex; justify-content: space-between; align-items: center; background: var(--ground-2); border: 1px solid var(--line); padding: 8px 12px; color: var(--warn); font-size: 1rem; border-radius: 4px; } .tracker-box.warnings { color: var(--danger); border-color: var(--danger-line); } .tracker-note { color: var(--ash-dim); font-size:0.7rem; } .tracker-btn { background: rgba(255,255,255,0.05); border: 1px solid currentColor; color: inherit; cursor: pointer; padding: 4px 12px; font-weight: bold; transition: 0.2s; border-radius: 3px; } .tracker-btn:hover { background: currentColor; color: #000; } .btn-group { display: flex; gap: 15px; width: 100%; margin-bottom: 15px;} .btn { flex: 1; padding: 10px; background: var(--ground-2); font-family: 'Cairo', sans-serif; font-size: 1.1rem; font-weight: 700; cursor: pointer; border: 1px solid var(--line); color: var(--bone-dim); transition: 0.3s; border-radius: 4px; } .btn-pause { border-color: var(--warn); color: var(--warn); } .btn-pause:hover { background: var(--warn-bg); box-shadow: 0 0 15px var(--warn-bg); } .btn-reset:hover { background: var(--ground-3); color: var(--bone); border-color: var(--ash); } .end-game-group { display: flex; gap: 15px; width: 100%; border-top: 1px solid var(--line); padding-top: 15px;} .btn-win, .btn-lose { flex: 1; cursor: pointer; font-family: 'Cairo'; font-weight: bold; font-size: 1.1rem; padding: 10px; transition: 0.3s; border-radius: 4px; } .btn-win { background: var(--alive-bg); border: 1px solid var(--alive-line); color: var(--alive); } .btn-win:hover { background: rgba(74, 154, 92, 0.22); box-shadow: 0 0 15px var(--alive-bg); } .btn-lose { background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger); } .btn-lose:hover { background: rgba(255, 42, 42, 0.22); box-shadow: 0 0 15px var(--danger-bg); } /* --- شاشة اللاعبين --- */ .player-hints { display: flex !important; align-items: center; justify-content: center; gap: 1.4vh; flex-wrap: wrap; flex-shrink: 0; font-family: 'Cairo', sans-serif; font-size: 3vw; color: var(--neon-orange); margin-top: 20px; letter-spacing: .04em; text-shadow: 0 0 20px var(--neon-orange); } .player-paused-msg { color: var(--neon-green); font-size: 3vw; font-family: 'Cairo'; margin-top: 20px; animation: blink 1.5s infinite; display: none; } /* --- تصميم مرعب لشاشة الغرفة (iPad داخل الغرفة) --- */ /* ✅ إصلاح بطلب المالك (بلاغ: "الأبعاد تتخربط أحياناً عند تحديث الصفحة أو تغيير الجهاز") — نفس نمط الإصلاح المطبّق أصلاً بأماكن ثانية بالموقع: 100vh لحالها على الجوال ما تحسب شريط عنوان المتصفح (يظهر/يختفي حسب التمرير)، فالقيمة الفعلية تتغيّر بين تحميلة وثانية بنفس الجهاز. 100dvh (وحدة حديثة، fallback آمن للمتصفحات الأقدم اللي ما تدعمها) تحسب الارتفاع المرئي الحقيقي دائماً. */ #player-interface { height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; overflow: hidden; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 2vh 3vw; box-sizing: border-box; width: 100vw; background: #000; position: relative; } .pl-fog { position:absolute; inset:0; pointer-events:none; z-index:1; background: radial-gradient(ellipse 130% 60% at 50% -10%, rgba(200,0,0,0.34) 0%, rgba(0,0,0,0) 60%), radial-gradient(ellipse 120% 50% at 50% 110%, rgba(150,0,0,0.28) 0%, rgba(0,0,0,0) 60%), radial-gradient(circle at 10% 35%, rgba(130,0,0,0.16) 0%, rgba(0,0,0,0) 40%), radial-gradient(circle at 90% 65%, rgba(130,0,0,0.16) 0%, rgba(0,0,0,0) 40%); animation: plBreathe 6s ease-in-out infinite; } @keyframes plBreathe { 0%,100%{opacity:.7; transform:scale(1);} 50%{opacity:1; transform:scale(1.04);} } /* خطوط عمودية للرعب */ /* ⚡ أداء: كانت تحرّك background-position على طبقة بمساحة الشاشة كاملة — إعادة رسم للتدرّج المتكرر بكل إطار، ١٥ ثانية بالدورة وبلا نهاية، على جهاز الغرفة اللي يضل شغّال طول الليل. البديل: نمدّ الطبقة ٨٠ بكسل لليسار (طول دورة النقش بالضبط) ونحرّكها بـ transform. النتيجة مطابقة بالبكسل — الإزاحة بمقدار دورة كاملة تعني إن النقش يعيد نفسه تماماً — و#player-interface عنده overflow:hidden فالزيادة تنقص. */ #player-interface::after { content: ''; position: absolute; inset: 0 0 0 -80px; background: repeating-linear-gradient( 90deg, rgba(138,0,0,.03) 0px, rgba(138,0,0,.03) 1px, transparent 1px, transparent 80px ); pointer-events: none; z-index: 2; animation: linesDrift 15s linear infinite; } @keyframes linesDrift { from{transform:translateX(0);} to{transform:translateX(80px);} } /* ومضات حمراء في الزوايا */ #player-interface::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 30% 30% at 0% 0%, rgba(138,0,0,.15) 0%, transparent 70%), radial-gradient(ellipse 30% 30% at 100% 100%, rgba(100,0,0,.1) 0%, transparent 70%); pointer-events: none; z-index: 2; animation: cornerGlow 5s ease-in-out infinite alternate; } @keyframes cornerGlow { from { opacity:.5; } to { opacity:1; } } /* ⚡ أداء: كانت تحرّك box-shadow بنصف قطر ضبابي ١٧٠→٢٢٠ بكسل على طبقة بمساحة الشاشة كاملة — الظل الضبابي العريض من أغلى ما يُعاد رسمه، وهنا يتكرر بلا نهاية على جهاز الغرفة. البديل: الوهج الأحمر ينتقل لطبقة زائفة بظل ثابت عند أقوى حالة، ونحرّك opacity بس. (٠.٦٥ × ٠.٥٢ ≈ ٠.٣٤ = نفس شدة الحالة الخافتة الأصلية بالضبط؛ نصف القطر يثبت على ٢٢٠ بدل ما ينكمش لـ١٧٠ — فرق غير محسوس داخل نبضة ٤.٥ ثانية خلف تعتيم ثقيل، مقابل إلغاء إعادة الرسم بالكامل.) ملاحظة: الظل الثابت القديم (١٩٠ بكسل) انشال من هنا — كانت الحركة تلغيه طول الوقت، فلو بقي بعد نقل الحركة كان بيتجمع فوق الطبقة الجديدة ويضاعف الوهج. */ .pl-vignette { position:absolute; inset:0; pointer-events:none; z-index:2; background: radial-gradient(ellipse at 50% 50%, transparent 24%, rgba(0,0,0,0.88) 100%), repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0px, rgba(0,0,0,0.22) 1px, transparent 1px, transparent 4px); } .pl-vignette::after { content:''; position:absolute; inset:0; pointer-events:none; box-shadow: inset 0 0 220px rgba(210,0,0,0.52); animation: plVig 4.5s ease-in-out infinite; } @keyframes plVig { 0%,100%{ opacity:.65; } 50%{ opacity:1; } } /* ⚠️ والطبقات المطلقة تُستثنى صراحةً. أولوية هذا المحدّد (id + صنفان) تتغلّب على `.pl-hidden-msg { position: absolute }`، فكانت طبقة رسالة الرعب تُقحَم بالتدفّق وتحجز ١٥٤px وهي شفّافة (opacity:0). ومجموع الأبناء مع الهوامش صار ١١٣٦ في ١٠٣٧ متاح، والحاوية overflow:hidden مع justify-content:center — فيُقصّ الفائض من الطرفين بلا شريط تمرير ولا أي أثر يدلّ على أن محتوى ضاع. ولا يظهر إلا على **التلفاز الأفقي** المثبّت بالغرف (1920×1080 و 1280×720)؛ والشاشات بالطول ومقاسات الهواتف سليمة — ولهذا مرّ من responsive-audit الذي يقيس 375/768/1440. */ #player-interface > *:not(.pl-fog):not(.pl-vignette):not(.pl-hidden-msg) { position: relative; z-index: 3; } /* --- تأثير "تشويش" مفاجئ + رسائل مخفية بصالة الانتظار (قبل بدء الجولة) --- */ @keyframes plGlitchShift { 0% { transform: translate(0,0); filter:none; } 10% { transform: translate(-6px,2px); filter: hue-rotate(90deg); } 20% { transform: translate(5px,-3px) skewX(2deg); } 30% { transform: translate(-4px,0); filter: hue-rotate(-60deg); } 40% { transform: translate(3px,3px); } 50% { transform: translate(-2px,-2px) skewX(-1deg); filter: hue-rotate(40deg); } 60% { transform: translate(4px,1px); } 70% { transform: translate(-3px,-1px); filter:none; } 100% { transform: translate(0,0); filter:none; } } #player-interface.pl-glitching { animation: plGlitchShift .35s steps(2, end) 1; } #player-interface.pl-glitching::after { opacity: .9; } #player-interface.pl-glitching .player-room-name, #player-interface.pl-glitching .player-timer { text-shadow: -2px 0 #00eaff, 2px 0 #ff0000, 0 0 24px rgba(255,0,0,.8); } .pl-hidden-msg { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4vw; pointer-events: none; font-family: 'Share Tech Mono', monospace; font-size: clamp(1.6rem, 6vw, 4rem); font-weight: bold; color: #ff1414; text-shadow: -2px 0 #00eaff, 2px 0 #6b0000, 0 0 30px rgba(255,0,0,.9); letter-spacing: .08em; opacity: 0; background: rgba(0,0,0,.35); } .pl-hidden-msg.pl-msg-show { opacity: 1; transition: opacity .12s ease-in; } .pl-hidden-msg.pl-msg-hide { opacity: 0; transition: opacity 1.1s ease-out; } .player-room-name { font-family:'Cairo',sans-serif; font-size: 4vw; color: #8b1414 !important; position: absolute; top: 20px; letter-spacing: 15px; animation: plNameFlicker 4.5s infinite; text-shadow: 0 0 22px rgba(255,0,0,0.6), 0 0 55px rgba(150,0,0,0.55), 0 3px 0 #1a0000; } @keyframes plNameFlicker { 0%,15%,17%,20%,52%,55%,78%,100%{opacity:1;} 16%,19%,53%,79%{opacity:0.2;} 18%{opacity:0.75;} } .player-timer { font-family: 'Share Tech Mono', monospace; font-size: 18vw; color: var(--neon-red); text-shadow: 0 0 50px var(--neon-red), 0 0 100px var(--blood-red); margin: 0; line-height: 1; animation: plPulse 3.2s ease-in-out infinite; transition: color .4s; } @keyframes plPulse { 0%,100%{ text-shadow:0 0 55px var(--neon-red),0 0 110px var(--blood-red);} 50%{ text-shadow:0 0 80px #ff2a2a,0 0 170px #ff0000;} } .player-timer.pl-critical { color:#ff2020 !important; animation: plCritical .9s ease-in-out infinite; } @keyframes plCritical { 0%,100%{ text-shadow:0 0 60px #ff0000,0 0 120px #8a0000; opacity:1;} 50%{ text-shadow:0 0 110px #ff3a3a,0 0 220px #ff0000; opacity:.88;} } /* خلفية صورة الغرفة — يضبطها roomAtmosphere.js على #player-interface نفسه (تدرّج تعتيمٍ داكن + url) فتبقى الأجواء الحمراء والعدّاد مقروءَين فوقها. الطبقات المطلقة (pl-fog · pl-vignette · ::before · ::after) تبقى فوقها. */ #player-interface.has-room-bg { background-size: cover; background-position: center; background-repeat: no-repeat; } /* ومضة لحظة إرسال طلب المساعدة — لقطة واحدة .6s، filter فقط (GPU، بلا إعادة رسم ظل). يضيفها/يزيلها roomAtmosphere.js مع .pl-glitching. */ #player-interface.pl-help-flash { animation: plHelpFlash .6s ease-out 1; } @keyframes plHelpFlash { 0% { filter: none; } 18% { filter: brightness(1.7) saturate(2.4) hue-rotate(-12deg) contrast(1.15); } 40% { filter: brightness(.82) saturate(1.4); } 68% { filter: brightness(1.25) saturate(1.8); } 100% { filter: none; } } /* ===== زر المساعدة — تصميم مرعب (جزء من ديكور الغرفة) ===== */ #pl-help-btn { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: .2em; line-height: 1.1; flex-shrink: 0; font-size: 3.6vw; padding: 2.8vh 9vw; margin-top: 4.5vh; min-width: 42vw; min-height: 9vh; -webkit-tap-highlight-color: transparent; touch-action: manipulation; font-family:'Cairo',sans-serif; font-weight: 900; letter-spacing: 4px; /* ✅ إصلاح 10: الألوان القديمة (نص وحدود قريبة من الأسود على خلفية سوداء) كانت تخلي الزر يبدو "مختفي" تماماً بغرفة مظلمة قبل ما يصير مفعّل — رفعنا التباين شوي وخلينا وهج خفيف ثابت حتى بحالة الإيقاف، بدون ما نلغي الفرق الواضح عن حالة التفعيل (النبض الأحمر القوي أدناه). */ color: #8a3838; background: radial-gradient(ellipse at 50% 30%, #380a0a 0%, #160404 70%); border: 3px solid #6a1c1c; border-radius: 14px; cursor: not-allowed; text-shadow: 0 0 8px rgba(255,0,0,0.25); position: relative; overflow: hidden; box-shadow: inset 0 0 40px rgba(0,0,0,0.9), 0 8px 26px rgba(0,0,0,0.85), 0 0 14px rgba(255,0,0,0.12); transition: all .45s ease; } #pl-help-btn::after { content:''; position:absolute; inset:0; pointer-events:none; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.28) 0px, rgba(0,0,0,0.28) 1px, transparent 1px, transparent 3px); } #pl-help-btn:disabled { filter: grayscale(.5) brightness(.6); } #pl-help-btn:not(:disabled) { cursor:pointer; color:#fff5f5; background: radial-gradient(ellipse at 50% 25%, #c40000 0%, #6a0000 55%, #2a0000 100%); border-color:#ff2a2a; text-shadow:0 0 14px #fff, 0 0 30px #ff0000, 0 0 60px #ff0000; box-shadow: 0 0 30px rgba(255,0,0,0.6), 0 0 70px rgba(200,0,0,0.4), inset 0 0 30px rgba(255,60,60,0.25); animation: plHelpAlive 2.2s ease-in-out infinite; } /* النبض بالتوهج فقط — بدون تحريك الزر حتى يبقى الضغط عليه دقيقاً على الآيباد */ @keyframes plHelpAlive { 0%,100%{ box-shadow:0 0 26px rgba(255,0,0,0.5), 0 0 60px rgba(200,0,0,0.3), inset 0 0 26px rgba(255,60,60,0.2); border-color:#c41f1f; } 50%{ box-shadow:0 0 50px rgba(255,0,0,0.95), 0 0 120px rgba(255,0,0,0.6), inset 0 0 44px rgba(255,80,80,0.4); border-color:#ff4a4a; } } #pl-help-btn:not(:disabled):active { transform:scale(.96); filter:brightness(1.4); } #pl-help-note { color:#4d4d4d; font-family:'Cairo'; font-size:2vw; margin-top:1.6vh; text-align:center; padding:0 6vw; letter-spacing:1px; } #pl-help-sent { display:none; color:#ff4d4d; font-family:'Cairo',sans-serif; font-weight:bold; font-size:2.6vw; margin-top:1.8vh; letter-spacing:2px; text-shadow:0 0 20px rgba(255,0,0,0.8); animation: plSent 1.4s infinite; } #pl-help-error { display:none; color:#fff; background:rgba(140,0,0,0.55); border:2px solid #ff2a2a; border-radius:10px; font-family:'Cairo',sans-serif; font-weight:bold; font-size:2.1vw; margin-top:1.8vh; padding:1.6vh 5vw; text-align:center; max-width:80vw; text-shadow:0 0 12px rgba(0,0,0,0.9); box-shadow:0 0 30px rgba(255,0,0,0.5); animation: plErrShake .45s ease; } @keyframes plErrShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-8px);} 75%{transform:translateX(8px);} } @keyframes plSent { 0%,100%{opacity:1;} 50%{opacity:0.35;} } /* --- شريط تنبيه طلب المساعدة (للكاشير/الكونترول) --- */ #help-alert-bar { position:fixed; top:0; left:0; right:0; z-index:10001; } .help-alert { background:linear-gradient(90deg,#3a0000,#c40000,#3a0000); background-size:200% 100%; color:#fff; font-family:'Cairo',sans-serif; font-weight:bold; padding:13px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border-bottom:2px solid #ff2a2a; box-shadow:0 4px 26px rgba(255,0,0,0.6); animation: helpFlash 1.1s linear infinite; } @keyframes helpFlash { 0%,100%{background-position:0% 0; filter:brightness(1);} 50%{background-position:100% 0; filter:brightness(1.45);} } .help-alert .ha-txt { font-size:1rem; } .help-alert button { background:#fff; color:#8a0000; border:none; padding:8px 16px; border-radius:5px; font-family:'Cairo'; font-weight:bold; cursor:pointer; white-space:nowrap; } @media (max-width:600px){ #pl-help-btn{font-size:5vw; padding:2.4vh 10vw;} #pl-help-note{font-size:3vw;} #pl-help-sent{font-size:3.6vw;} } /* 🌀 شاشة الزبون لكابوس مايز: لا يوجد فيها زر مساعدة إطلاقاً (ولا عدّاد مساعدات) — كلاس على body يُضاف فور تحديد أن الشاشة مايز (انظر playerRoomId==='maze' بالسكربت). الأولوية هنا أعلى من قاعدة #pl-help-btn الأساسية (المعرّفة بـ !important) بسبب تحديد أعلى (كلاس + آيدي)، فتُخفى فوراً بلا أي وميض أو تأخير. */ body.kb-maze-player #pl-help-btn, body.kb-maze-player #pl-help-note, body.kb-maze-player #pl-help-sent, body.kb-maze-player #pl-help-error, body.kb-maze-player .player-hints { display: none !important; } /* ══════════════════════════════════════════════════════════════ ✅ إضافات جمالية / تسهيلات استخدام — كل قاعدة هنا إضافية بحتة (كلاسات جديدة أو تحسين تباين لقاعدة موجودة)، ما تلغي ولا تغيّر أي سلوك أو تخطيط قديم. آمنة 100% لأنها CSS بصري بحت. ══════════════════════════════════════════════════════════════ */ /* -- 1) Skeleton loading: هيكل رمادي متحرك بدل نص "جاري التحميل" -- */ .kb-skel-wrap { padding: 2px 0; } .kb-skel-card { background:#0d0d0d; border:1px solid #232323; border-radius:8px; padding:14px; margin-bottom:9px; } .kb-skel-line { height: 13px; border-radius: 5px; margin: 9px 0; background: linear-gradient(90deg, #141414 25%, #262626 37%, #141414 63%); background-size: 400% 100%; animation: kbSkelShimmer 1.4s ease-in-out infinite; } .kb-skel-line:first-child { margin-top: 2px; } .kb-skel-w40 { width: 40%; } .kb-skel-w60 { width: 60%; } .kb-skel-w80 { width: 80%; } @keyframes kbSkelShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { .kb-skel-line { animation: none; opacity:.5; } } /* -- 2) حالة "فاضي" أوضح: أيقونة زخرفية فوق أي رسالة "لا توجد ..." -- */ .empty-state-msg { position: relative; } .empty-state-msg::before { content: '🕸️'; display: block; font-size: 2.3rem; margin-bottom: 8px; opacity: .32; filter: grayscale(.25); } /* -- 3) دخول تدريجي خفيف للصفوف/البطاقات الجديدة (ظهورها مو فجائي) -- */ @keyframes kbRowIn { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:translateY(0); } } .adv-row, .hist-table tbody tr, .vid-table tbody tr, .kb-skel-card, #mena-branch-buttons > button, #mena-video-branch-buttons > button, .au-room-card { animation: kbRowIn var(--kb-dur-slow) var(--kb-ease-out) both; } @media (prefers-reduced-motion: reduce) { .adv-row, .hist-table tbody tr, .vid-table tbody tr, .kb-skel-card, #mena-branch-buttons > button, #mena-video-branch-buttons > button, .au-room-card { animation: none; } } /* -- 4) ألوان مميّزة لكل غرفة — تُستخدم بأي مكان يعرض اسم/أيقونة الغرفة -- */ .kb-room-nun { color: var(--room-nun) !important; } .kb-room-annabelle { color: var(--room-annabelle) !important; } .kb-room-ring { color: var(--room-ring) !important; } .kb-room-maze { color: var(--ash) !important; } /* ١د: كان var(--neon-purple) — المايز ليست غرفة هروب، فلا لون هوية */ /* -- 8) عدد الحجوزات القادمة تحت اسم كل فرع بشاشة اختيار الفرع -- */ .mena-branch-count-badge { display:block; margin-top:6px; font-size:.68rem; font-weight:normal; color: var(--neon-orange); min-height: 1em; } /* -- 8) شارة "الأنشط اليوم" — ركن مطلق الموضع فوگ بطاقة الغرفة (.room-card إلها position:relative + overflow:hidden أصلاً)، ما تدخل بتخطيط .rc2-head -- */ .kb-hot-room-badge { position: absolute; top: 10px; left: 10px; z-index: 6; background: rgba(255,60,0,.9); border: 1px solid #ff6b00; color: #fff; font-size: .66rem; font-weight: bold; padding: 3px 10px; border-radius: 12px; font-family: 'Cairo'; white-space: nowrap; box-shadow: 0 2px 10px rgba(255,60,0,.35); animation: kbNextPulse 1.6s ease-in-out infinite; } /* ✅ إضافة بطلب المالك: شارات #2 و#3 لباقي الغرف حسب شعبيتها اليوم — نفس مكان شارة "🔥 الأنشط اليوم" بالضبط، بس بلون أهدأ وبدون نبض حتى تبقى شارة #1 هي الأبرز بصرياً دائماً. */ .kb-rank2-badge, .kb-rank3-badge { position: absolute; top: 10px; left: 10px; z-index: 6; font-size: .64rem; font-weight: bold; padding: 3px 10px; border-radius: 12px; font-family: 'Cairo'; white-space: nowrap; } .kb-rank2-badge { background: rgba(180,180,190,.18); border: 1px solid rgba(200,200,210,.55); color: #d8d8de; } .kb-rank3-badge { background: rgba(180,120,60,.18); border: 1px solid rgba(205,140,80,.55); color: #d9a876; } /* -- طباعة سجل الصرفيات — داخل نفس الصفحة (window.print مباشر، بدون نافذة جديدة) لأنها أوثق من window.open() بوضع PWA مستقل على آيفون -- */ body.kb-printing-expenses > *:not(#kb-expense-app) { display: none !important; } body.kb-printing-expenses #kb-expense-app { background: #fff !important; } body.kb-printing-expenses #kb-expense-app > *:not(#kb-exp-print-area) { display: none !important; } body.kb-printing-expenses #kb-exp-print-area { display: block !important; background: #fff; color: #000; padding: 24px; font-family: Tahoma, Arial, sans-serif; direction: rtl; min-height: 100vh; min-height: 100dvh; } body.kb-printing-expenses #kb-exp-print-area .kb-exp-row { border-bottom: 1px solid #ccc; padding: 10px 0; background: none !important; } body.kb-printing-expenses #kb-exp-print-area .kb-exp-del-btn { display: none !important; } @media print { body.kb-printing-expenses #kb-exp-print-area * { color: #000 !important; } } /* زر حذف صرفية على الهاتف — قِيس 28×34px، وهو أصغر هدف لمس بالنظام كله وأخطرها: حذفُ سجل مصروف بضغطة على مساحة أضيق من الإصبع. الحجم يأتي من style سطري (padding:5px 9px بـexpenseMode.js)، فنضبطه بـmin-width/min-height — وهما غير موجودين بذلك السطر، فلا حاجة لـ!important ولا لتعديل الملف الأصلي. ⚠️ المحدِّد مؤهَّل بـ#kb-expense-app عن قصد: القاعدة العامة بـfixes.css (`button:not(.bmap-cell):not(.dw-face-preview)`) وزنها (0,2,1) — أي أنها تتغلّب على `.kb-exp-del-btn` وحدها مهما تأخّر ملفها بالترتيب، لأن الأولوية تسبق الترتيب. أول نسخة من هذا الإصلاح ضبطت العرض ولم تضبط الارتفاع لهذا السبب بالضبط، والقياس هو ما كشفه (44×34 بدل 44×44). */ @media (max-width: 700px) { #kb-expense-app .kb-exp-del-btn { min-width: 44px; min-height: 44px; } } /* -- 5) نافذة اختيار فترة مخصّصة (تحليلات/إيرادات) -- */ /* ⚠️ #kb-admin-notice-modal ينضم لنفس القاعدة عمداً: تنبيه الإدارة نافذة إجبارية بمنتصف الشاشة مثلهما بالضبط — الفرق الوحيد أنه بلا إغلاق بالضغط خارجها، وذاك سلوك جافاسكربت لا تنسيق. مفهوم تنسيق جديد هنا يعني ثلاث نوافذ تنحرف عن بعضها. */ #kb-custom-period-modal, #kb-emerg-modal, #kb-admin-notice-modal { position: fixed; inset: 0; z-index: 2147483000; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 20px; animation: kbRowIn var(--kb-dur-base) var(--kb-ease-out) both; } .kb-cp-box { background: #111; border: 1px solid #333; border-radius: 12px; padding: 22px; width: min(360px, 92vw); } .kb-cp-inp { width: 100%; box-sizing: border-box; background: #0a0a0a; border: 1px solid #333; color: #ddd; padding: 9px; border-radius: 6px; font-family: 'Cairo'; } /* -- 14) تنبيه التراجع المؤقت بعد حذف حرج -- */ /* ✅ إصلاح بطلب المالك (بلاغ: "هاي الأزرار تزعجني أثناء التصفح"): كان بأسفل الشاشة تماماً بمنتصفها — يتداخل مباشرة مع أزرار مهمة بنفس المنطقة (زر "حفظ الفاتورة" بنافذة التعديل، مثلاً — واضح بالصور المرفقة). نقلناه لأعلى الشاشة بدل أسفلها، بعيداً تماماً عن منطقة الأزرار الرئيسية بكل الواجهات. */ #kb-undo-toast { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 2147483000; background: #1a0000; border: 1px solid var(--blood-red); border-radius: 30px; padding: 10px 18px; display: flex; align-items: center; gap: 12px; font-family: 'Cairo'; font-size: .82rem; color: #ddd; box-shadow: 0 10px 30px rgba(0,0,0,.6); animation: kbRowIn var(--kb-dur-base) var(--kb-ease-out) both; } #kb-undo-toast button#kb-undo-btn { background: rgba(0,180,255,.15); border: 1px solid #00b4ff; color: #5ec8ff; padding: 5px 12px; border-radius: 16px; font-family: 'Cairo'; font-weight: bold; font-size: .78rem; cursor: pointer; white-space: nowrap; } #kb-undo-toast span#kb-undo-count { color: #666; font-size: .72rem; min-width: 16px; text-align: center; } /* -- معالج "فتح فرع جديد": بطاقات غرف واضحة بدل حقول فضفاضة، ورفع صورة بزر منسّق بدل input خام -- */ .nb-room-card { background:#111; border:1px solid #262626; border-radius:10px; padding:16px; margin-top:14px; } .nb-room-card-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; } .nb-room-num { width:24px; height:24px; border-radius:50%; background:rgba(0,255,68,.12); border:1px solid rgba(0,220,60,.4); color:var(--neon-green,#3ecf5e); font-family:'Cairo'; font-weight:bold; font-size:.75rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .nb-room-card-title { color:#ddd; font-family:'Cairo'; font-weight:bold; font-size:.9rem; } .nb-room-preview { height:130px; border-radius:8px; background-color:#0a0a0a; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; border:1px dashed #333; margin-bottom:12px; } .nb-room-preview.has-img { border-style:solid; border-color:#333; } .nb-room-preview-hint { color:#555; font-family:'Cairo'; font-size:.78rem; } .nb-room-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .nb-room-upload { grid-column:1/-1; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .nb-upload-btn { display:inline-block; background:rgba(0,180,255,.1); border:1px solid #00b4ff; color:#5ec8ff; padding:9px 16px; border-radius:6px; font-family:'Cairo'; font-size:.8rem; cursor:pointer; white-space:nowrap; } .nb-upload-btn:hover { background:rgba(0,180,255,.18); } .nb-upload-status { color:#666; font-size:.74rem; font-family:'Cairo'; } .nb-clone-row { background:#0d0d0d; border:1px dashed #333; border-radius:8px; padding:12px 14px; margin-bottom:16px; } /* -- 5) تحسين تباين النصوص الرمادية الغامقة جداً (كانت صعبة القراءة بإضاءة قوية) -- */ .adv-by { color: #7a7a7a; } .adv-notes { color: #8f8f8f; } .adv-src { color: #8a8a8a; } /* -- 6) تنبيه أوضح لشارة "⏰ التالي" -- */ .adv-next-badge { animation: kbNextPulse 1.6s ease-in-out infinite; } @keyframes kbNextPulse { 0%,100% { box-shadow: 0 0 0 rgba(255,157,0,0); } 50% { box-shadow: 0 0 12px rgba(255,157,0,.7); } } @media (prefers-reduced-motion: reduce) { .adv-next-badge { animation: none; } } /* -- 11) تلوين خفيف لصف الحجز حسب قرب الموعد -- */ .adv-row-soon { border-color: rgba(255,157,0,.45) !important; background: rgba(255,157,0,.045); } .adv-row-urgent { border-color: rgba(255,60,60,.55) !important; background: rgba(255,40,40,.06); } /* -- 13) شارة "معدّلة" صغيرة بجانب أي فاتورة اتعدّلت -- */ .hist-badge.hist-edited { background: rgba(0,153,255,.12); color: #4db8ff; border: 1px solid rgba(0,153,255,.35); } /* -- 8) نبضة خفيفة على شارة "قيد اللعب" — تميّزها عن النتائج المكتملة (نجاة/فشل) -- */ .hist-badge.hist-playing { background: rgba(0,229,255,.1); color: var(--neon-blue); border: 1px solid rgba(0,229,255,.3); animation: kbHistPlayingPulse 1.8s ease-in-out infinite; } @keyframes kbHistPlayingPulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hist-badge.hist-playing { animation: none; } } /* -- 14) رأس مجموعة يوم بسجل الفرق (طي/فتح) — بنفس روح adv-day-head بس كصف جدول -- */ .hist-day-head-row { cursor: pointer; user-select: none; } .hist-day-head-row td { background:linear-gradient(90deg, rgba(255,165,0,0.12), rgba(0,0,0,0)) !important; border-right:4px solid var(--neon-orange) !important; color:var(--neon-orange) !important; font-family:'Cairo'; font-weight:bold; font-size:0.92rem !important; padding:10px 14px !important; white-space:normal !important; } .hist-day-head-row:hover td { background:linear-gradient(90deg, rgba(255,165,0,0.2), rgba(0,0,0,0)) !important; } .hist-day-arrow { display:inline-block; width:16px; text-align:center; margin-left:6px; } .hist-day-count { color:#999; font-size:0.76rem; font-weight:normal; margin-right:8px; } /* -- 17/18) لوحة الإدارة: مقارنة إيرادات اليوم مع أمس + شارة تلقائية -- */ .adm-cmp-wrap { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; } .adm-cmp-bar-track { flex:1; min-width:120px; height:8px; background:#1a1a1a; border-radius:5px; overflow:hidden; } .adm-cmp-bar-fill { height:100%; border-radius:5px; transition: width .5s ease; } .adm-cmp-txt { font-family:'Cairo'; font-size:.78rem; color:#aaa; white-space:nowrap; } .adm-trend-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:20px; font-family:'Cairo'; font-weight:bold; font-size:.78rem; white-space:nowrap; } .adm-trend-up { background: rgba(0,255,68,.12); color: var(--neon-green); border:1px solid rgba(0,255,68,.35); } .adm-trend-down { background: rgba(255,157,0,.12); color: var(--neon-orange); border:1px solid rgba(255,157,0,.35); } .adm-trend-flat { background: rgba(150,150,150,.1); color: #999; border:1px solid rgba(150,150,150,.3); } /* -- 20) علامة صح خضراء لحظية بعد أي حفظ ناجح -- */ #kb-success-flash { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.6); z-index: 99999; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle, rgba(0,255,68,.22) 0%, rgba(0,0,0,0) 70%); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; } #kb-success-flash svg { width: 56px; height: 56px; } #kb-success-flash circle { fill: none; stroke: var(--neon-green); stroke-width: 6; stroke-dasharray: 151; stroke-dashoffset: 151; } #kb-success-flash path { fill: none; stroke: var(--neon-green); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; } #kb-success-flash.kb-flash-active { animation: kbFlashPop .9s ease forwards; } #kb-success-flash.kb-flash-active circle { animation: kbFlashCircle .5s ease forwards; } #kb-success-flash.kb-flash-active path { animation: kbFlashCheck .3s ease .35s forwards; } @keyframes kbFlashPop { 0% { opacity:0; transform: translate(-50%,-50%) scale(0.6); } 15% { opacity:1; transform: translate(-50%,-50%) scale(1); } 75% { opacity:1; transform: translate(-50%,-50%) scale(1); } 100% { opacity:0; transform: translate(-50%,-50%) scale(0.95); } } @keyframes kbFlashCircle { to { stroke-dashoffset: 0; } } @keyframes kbFlashCheck { to { stroke-dashoffset: 0; } } /* -- 22) "آخر تحديث: منذ ..." تحت القوائم الحيّة -- */ .kb-live-updated { color:#6a6a6a; font-size:.7rem; font-family:'Cairo'; text-align:center; margin-top:8px; display:flex; align-items:center; justify-content:center; gap:5px; } .kb-live-dot { width:6px; height:6px; border-radius:50%; background:var(--neon-green); box-shadow:0 0 5px var(--neon-green); animation: kbLiveDotPulse 1.8s ease-in-out infinite; } @keyframes kbLiveDotPulse { 0%,100%{ opacity:.4; } 50%{ opacity:1; } } /* -- 24) ضباب/خدش خفيف جداً بخلفية شاشة تسجيل الدخول -- */ #auth-section { position: relative; overflow: hidden; } #auth-section::before { content: ''; position: absolute; inset: -12%; z-index: 1; pointer-events: none; background: radial-gradient(circle at 22% 28%, rgba(120,0,0,.11) 0%, transparent 45%), radial-gradient(circle at 78% 68%, rgba(80,0,0,.09) 0%, transparent 50%), radial-gradient(circle at 50% 95%, rgba(60,0,0,.07) 0%, transparent 55%); filter: blur(20px); animation: kbFogDrift 28s ease-in-out infinite alternate; } #auth-section::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5; mix-blend-mode: overlay; background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px, transparent 1px, transparent 90px), repeating-linear-gradient(65deg, rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px, transparent 1px, transparent 140px); } @keyframes kbFogDrift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-3%,2%) scale(1.08); } } .auth-container { position: relative; z-index: 2; } @media (prefers-reduced-motion: reduce) { #auth-section::before { animation: none; } } /* ═══════════════════════════════════════════════════════════════════ طبقة الحركة القابلة لإعادة الاستعمال ─────────────────────────────────────────────────────────────────── أربع حركات تغطي كل حالات الدخول والخروج بالنظام، كلها transform + opacity حصراً (تركيب على الـGPU، بلا إعادة تخطيط ولا إعادة رسم)، وكلها لقطة واحدة بـboth — ولا وحدة منها infinite. الحركة اللانهائية مبررة فقط لما تعني «هذا يحتاج انتباهك الآن»؛ غير هيك تصير ضوضاء بصرية يتوقف الدماغ عن ملاحظتها خلال دقيقة، وتاكل معالج بلا نهاية على أجهزة الغرف. المدد والمنحنيات كلها من متغيرات css/variables.css — لا أرقام حرفية هنا. ═══════════════════════════════════════════════════════════════════ */ @keyframes kbFadeUp { from { opacity:0; transform: translate3d(0,8px,0); } to { opacity:1; transform:none; } } @keyframes kbFadeIn { from { opacity:0; } to { opacity:1; } } @keyframes kbScaleIn { from { opacity:0; transform: scale(.96); } to { opacity:1; transform:none; } } @keyframes kbFadeOut { from { opacity:1; } to { opacity:0; transform: translate3d(0,6px,0); } } .kb-in { animation: kbFadeUp var(--kb-dur-base) var(--kb-ease-out) both; } .kb-in-fade { animation: kbFadeIn var(--kb-dur-base) var(--kb-ease-out) both; } .kb-in-pop { animation: kbScaleIn var(--kb-dur-base) var(--kb-ease-pop) both; } /* الخروج أسرع من الدخول دائماً — الأشياء تروح أسرع مما تجي، وهذا وحده يخلي الواجهة تُحَسّ سريعة بلا ما يقدر أحد يسمّي السبب */ .kb-out { animation: kbFadeOut var(--kb-dur-fast) var(--kb-ease-in) both; } /* ── التتابع: عناصر القائمة تدخل ورا بعض بفارق بسيط بدل دفعة واحدة ── أداة اختيارية تُضاف على الحاوية عن قصد — لم تُطبَّق تلقائياً على أي قائمة بيانات. السبب: قوائم مثل #bookings-list و#history-list يُعاد رسمها مع كل تحديث لحظي من فايربيس، فحركة دخول متتابعة عليها معناها رمشة متكررة كل ما تغيّرت البيانات — أسوأ من عدم وجود حركة أصلاً. استعملها حيث الرسم يصير مرة واحدة بفعل من المستخدم، مو حيث البيانات تتدفق. */ .kb-stagger > * { animation: kbFadeUp var(--kb-dur-base) var(--kb-ease-out) both; } .kb-stagger > *:nth-child(2) { animation-delay: calc(var(--kb-stagger) * 1); } .kb-stagger > *:nth-child(3) { animation-delay: calc(var(--kb-stagger) * 2); } .kb-stagger > *:nth-child(4) { animation-delay: calc(var(--kb-stagger) * 3); } .kb-stagger > *:nth-child(5) { animation-delay: calc(var(--kb-stagger) * 4); } .kb-stagger > *:nth-child(6) { animation-delay: calc(var(--kb-stagger) * 5); } .kb-stagger > *:nth-child(7) { animation-delay: calc(var(--kb-stagger) * 6); } .kb-stagger > *:nth-child(8) { animation-delay: calc(var(--kb-stagger) * 7); } .kb-stagger > *:nth-child(9) { animation-delay: calc(var(--kb-stagger) * 8); } /* سقف: أي عنصر بعد العاشر يدخل مع العاشر — تتابع بلا سقف يعني آخر صف بقائمة طويلة ينتظر ثواني قبل ما يظهر */ .kb-stagger > *:nth-child(n+10) { animation-delay: calc(var(--kb-stagger) * 9); } /* ── دخول أقسام التبويبات ── switchAdminTab أكثر إجراء يتكرر بالنظام (١٢ تبويب)، وكان التبديل قفزة مفاجئة بلا أي انتقال. tabs.js يبدّل display بين none وblock/grid، وتبديل display من none يعيد تشغيل حركة CSS تلقائياً — فما نحتاج ولا سطر JS. آمنة من الرمشة: switchAdminTab تُستدعى من أفعال المستخدم فقط (تحققت — ولا استدعاء من مستمع لحظي)، وضبط display على نفس قيمته ما يعيد تشغيل الحركة، فالتبديل الحقيقي وحده يحرّكها. ملاحظة لمن يعدّل لاحقاً: transform على حاوية يجعلها containing block لأي position:fixed بداخلها. تحققت أن الأقسام الستة لا تحوي أي عنصر ثابت. ✅ توسيع: كانت ستة أقسام من أصل ثمانية عشر — أي أن ثلثي التبويبات كانت تقفز والثلث ينزلق. هذا أسوأ من غياب الحركة أصلاً: عدم الاتساق يُقرأ عطلاً، بينما السكون التام يُقرأ تصميماً. القائمة الحين تطابق KB_ADMIN_SECTIONS في js/core/tabs.js (وهي المصدر الوحيد الذي تقرأ منه switchAdminTab ومراقب الشاشة الفارغة) + أقسام الكاشير/المتاهة. أُعيد فحص الاثني عشر المضافة: ولا واحد منها يحوي position:fixed لا بالماركب ولا بما ترسمه دواله. */ #main-dashboard, #bookings-section, #video-requests-section, #history-section, #users-manage-section, #advance-bookings-section, #payroll-section, #waivers-section, #screens-section, #admin-overview-section, #maze-history-section, #admin-rooms-cards-section, #attendance-section, #allbranches-section, #diag-section, #analytics-section, #passwords-section, #staff-presence-section, #cash-audit-section, #maze-cashier-section, #maze-section { animation: kbFadeUp var(--kb-dur-slow) var(--kb-ease-out) both; } /* ⚠️ إصلاح عطل حيّ (كان قائماً على الأقسام الستة قبل التوسيع، لا عيباً جديداً): html.is-scrolling * يوقف كل الحركات بـanimation-play-state (layout.css)، وscrollPause يرفع الكلاس بعد ١٤٠ms من آخر تمرير. وحركة الدخول هذي تبدأ من opacity:0 — فتبديل تبويب أثناء التمرير (وهو شائع: تمرّر لتشوف، ثم تضغط تبويب) كان يترك القسم **غير مرئي** حتى ١٤٠ms. النتيجة وميض «شاشة فاضية» بالضبط بالشكل الذي بُني له الحارس الطارئ داخل switchAdminTab. إيقاف الحركة أثناء التمرير منطقي للحركات الزخرفية اللانهائية، لا لحركة دخول تحمل ظهور المحتوى نفسه — فهذي تُستثنى صراحةً. */ html.is-scrolling #main-dashboard, html.is-scrolling #bookings-section, html.is-scrolling #video-requests-section, html.is-scrolling #history-section, html.is-scrolling #users-manage-section, html.is-scrolling #advance-bookings-section, html.is-scrolling #payroll-section, html.is-scrolling #waivers-section, html.is-scrolling #screens-section, html.is-scrolling #admin-overview-section, html.is-scrolling #maze-history-section, html.is-scrolling #admin-rooms-cards-section, html.is-scrolling #attendance-section, html.is-scrolling #allbranches-section, html.is-scrolling #diag-section, html.is-scrolling #analytics-section, html.is-scrolling #passwords-section, html.is-scrolling #staff-presence-section, html.is-scrolling #cash-audit-section, html.is-scrolling #maze-cashier-section, html.is-scrolling #maze-section { animation-play-state: running !important; } /* ── الاهتزاز: رفض يُحَسّ، لا يُقرأ ── شاشة اللاعب عندها plErrShake من زمان؛ شاشة الموظفين ما كان عندها مقابل — الرمز الخاطئ كان يبدّل نصاً صغيراً أحمر تحت الحقل، وهو أسهل شي يفوت على موظف مستعجل بغرفة مظلمة. transform وحده (بلا لون ولا حجم) حتى تبقى رسالة الخطأ النصية هي مصدر التفاصيل، والاهتزاز مجرد جرس انتباه. */ @keyframes kbShake { 0%, 100% { transform: translate3d(0,0,0); } 20% { transform: translate3d(-6px,0,0); } 40% { transform: translate3d(5px,0,0); } 60% { transform: translate3d(-3px,0,0); } 80% { transform: translate3d(2px,0,0); } } .kb-shake { animation: kbShake .42s var(--kb-ease-move) 1; } /* ══════════════════════════════════════════════════════════════════════════ القائمة الجانبية —

يبنيها tools/additions/components/sidebarNav.js من الصفر، وتنقل إليها العناصر الحقيقية (بمعرّفاتها). #header-section الأصلي يُخفى بوضع الموظف. مطابِقة لمخطط الهوية (سلاكتور .sb بالبروتوتايب): • مسطّحة مع الصفحة — لا ظِلّ، لا لوحة أفتح، خلفية شبه سوداء كالمحتوى، يفصلها عنه خيطٌ واحد بلون الدم الداكن على جهة المحتوى فقط. • أيقونات هندسية (▣ ▶ ◷ ▤ ≣ ▦ ◆ ◉ ⚿) لا إيموجي — عبر data-ico + ::before. • بلا شريط تمرير ظاهر (طلب المالك) — scrollbar مخفيّ مع بقاء التمرير. • العنصر النشط: خلفية ground-2 + شريط دم 3px على الحافة الابتدائية، لا صندوق أحمر. للرجوع: احذف هذه الكتلة + الوحدة + مدخل المانيفست، ويعود #header-section شريطاً علوياً. ══════════════════════════════════════════════════════════════════════════ */ #kbsb { display: none; } #kbsb-tgl { display: none; } #kbsb-scrim { display: none; } /* الغطاء الخلفي لدرج الجوال — لا يظهر إلا داخل @media (max-width:900px) */ /* لا تظهر أيّ واجهة موظف فوق شاشة تحميل ما بعد الدخول — تبقى مخفيّة حتى تُزال (#kb-login-loader). ⚠️ #naked-tools-btn مضافٌ هنا: z-index له ٩٩٩٩٠ — تحت الغطاء (٩٩٩٩٨) فيُغطَّى بصريّاً، لكن أثناء تلاشي الغطاء (٥٥٠ms) أو أيّ لحظةٍ تُكشف فيها واجهة الدور قبل ركوب الغطاء كان يظهر وحده فوق شاشة الدخول. الآن يُخفى مع القائمة. */ body:has(#kb-login-loader) #kbsb, body:has(#kb-login-loader) #kbsb-tgl, body:has(#kb-login-loader) #naked-tools-btn { display: none !important; } /* سطر الحساب — سطرٌ واحد هادئ في كل المقاسات. القواعد الأساسية للصفحة القديمة تجعل .control-label span أحمر ١٫٦rem بوهج (يُقرأ صارخاً في شريطٍ نحيف)، و router.js يفرض لون الرتبة inline — فكلاهما يلزمه !important هنا. */ #kbsb .kbsb-acct { min-width: 0; } #kbsb .kbsb-acct .control-label { font-size: .7rem !important; color: var(--ash) !important; margin: 4px 0 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #kbsb .kbsb-acct .control-label span, #kbsb .kbsb-acct .control-label #logged-user-name { font-size: .72rem !important; font-family: 'Cairo', sans-serif !important; color: var(--bone-dim) !important; text-shadow: none !important; font-weight: 700; } /* تلميحة الشريط المطويّ — عنصرٌ على تضعه sidebarNav.js. ⚠️ لا يمكن أن تكون ::after داخل الزرّ: #kbsb يقصّ (overflow:hidden) و.kbsb-body يقصّ أيضاً (overflow-y:auto)، فأي نصٍّ داخل الزرّ يُقتطع عند ٥٢px. ولا يكفي `title`: تأخيره نحو ثانية ولا يظهر بلوحة المفاتيح — والشريط المطويّ هو الحالة الافتراضية، أي القائمة التي يراها الموظف كل يوم. بلا انتقال على top/right: التلميحة تقفز بين زرٍّ وآخر، وتحريكُها يجعلها تلاحق المؤشّر بتأخّرٍ يُقرأ بطئاً. */ #kbsb-tip { position: fixed; z-index: 500; transform: translateY(-50%); padding: 5px 10px; border-radius: 6px; pointer-events: none; background: var(--ground-2); border: 1px solid var(--blood-dim); color: var(--bone); font-family: 'Cairo', sans-serif; font-size: .78rem; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.55); opacity: 0; visibility: hidden; transition: opacity .12s ease; } #kbsb-tip.on { opacity: 1; visibility: visible; } /* موسّعةً لا تلميحة — النصّ ظاهر أصلاً، وتكرارُه ضجيج. */ body:not(.kbsb-collapsed) #kbsb-tip { display: none; } @media (min-width: 901px) { body[class*="kb-role-"] #header-section { display: none !important; } /* ⚠️ الإزاحة على لا على #admin-interface — والفرق ليس تنظيماً. شاشاتُ المحتوى ليست كلّها داخل #admin-interface: إحدى عشرة منها **شقيقةٌ** له مباشرةً تحت — #admin-overview-section (صفحة هبوط الإدارة) وشاشات المحاسب التسع (#acct-*) و#player-interface. فإزاحةٌ على #admin-interface وحده تترك تلك الشاشات تمتدّ **تحت** الشريط. مقيس على ١٤٤٠ والقائمة موسّعة: ٢٢٤px من «نظرة عامة» مغطّاة، و١٥ عقدة نصّ مقصوصة منها «إجمالي الدخل» و«٠ د.ع» و«◀ السابق» — أي أرقام يقرؤها المالك. هو الأب المشترك الوحيد، فالإزاحة عليه تغطّي الشاشات الحالية وأي شاشة تُضاف لاحقاً. و#kbsb يبقى fixed فلا تمسّه. الأبناء الثابتون (٣٣ منهم: النوافذ والطبقات) لا تتأثّر بحشو الأب. */ body[class*="kb-role-"] { padding-inline-start: 236px; /* ٠٫١٦s لا ٠٫٢: كل إطارٍ هنا يُعيد تخطيط شاشة المحتوى الظاهرة (حشو يوسّع #admin-interface فتُعاد لفّ الجداول/الشبكات) — إطاراتٌ أقلّ = تقطيعٌ أقلّ، ويُقرأ «سريع الاستجابة» لا «متثاقل». المنحنى كما هو (--kb-ease-move). */ transition: padding-inline-start .16s var(--kb-ease-move); } body[class*="kb-role-"] #admin-interface { align-items: stretch; box-sizing: border-box; overflow-x: hidden; /* أي محتوى أعرض من المساحة يُقصّ بدل أن ينزلق تحت الشريط */ } body[class*="kb-role-"] #admin-interface > * { max-width: 100%; box-sizing: border-box; } /* الشريط: خلفية شبه مطابقة لأرضية الصفحة (#020202) + خيط فاصل واحد. لا ظِلّ. طيّ/فتح: عرضٌ واحد يتحرّك على طبقة مركِّبة، ٢٠٠ms، منحنى مادّي قياسي. */ body[class*="kb-role-"] #kbsb { display: flex; flex-direction: column; font-family: 'Cairo', sans-serif; position: fixed; inset-block: 0; inset-inline-start: 0; width: 236px; z-index: 400; background: linear-gradient(180deg, #0a0607 0%, #050303 55%, #020202 100%); border-inline-end: 1px solid var(--blood-dim); overflow: hidden; transition: width .16s var(--kb-ease-move); /* عزلٌ صريح: تغيّرُ العرض أثناء الطيّ/الفتح يبقى تخطيطُه داخل الشريط، لا يمسّ الصفحة. (fixed + overflow:hidden يوحيان بذلك؛ contain يجعله يقيناً ويسمح للمتصفح بتخطّي إعادة حساب ما وراء الشريط.) ⚠️ أُزيلت will-change:width — لا تفيد خصائص التخطيط (تُفيد transform/opacity فقط)، وتُبقي طبقةً تركيبيّةً بلا مقابل. */ contain: layout; } .kbsb-head { padding: 13px 20px 10px; flex-shrink: 0; border-bottom: 1px solid var(--line-soft); } .kbsb-brand { /* شعار الصورة الشفّاف بدل كلمة «كابوس». الوهج الدموي نفسه، ثابتاً، ليقرأ الشعار الداكن على أرضية الشريط الداكنة (نفس معالجة .kaboos-logo بشاشة الدخول). */ display: block; width: 150px; max-width: 100%; height: auto; margin: 0; filter: drop-shadow(0 0 16px var(--blood-glow)) drop-shadow(0 0 3px rgba(255,90,90,.55)); } /* سطر الحساب: القواعد المشتركة أعلاه (خارج الميديا) تكفي — display:block هنا فقط. */ #kbsb .kbsb-acct .control-label { display: block; } .kbsb-sub { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 8px; } .kbsb-sub #kb-presence-badge { margin: 0 !important; } .kbsb-sub #branch-switcher-bar select { width: 100%; max-width: 100%; } /* التنقّل — أسلوب المواقع العالمية: الرأس والذيل مثبّتان، القائمة وحدها تُمرَّر، بلا أي شريط تمرير مرئيّ، والتمرير لا يتسرّب إلى الصفحة خلفه. لا حركة تمرير مُنعَّمة (تُبطئ عجلة الماوس وتُقرأ «مزعجة»). التقارب مضبوط ليتّسع بلا تمرير على أي شاشة عادية. */ .kbsb-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 1px; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; } /* ⚠️ «بلا شريط تمرير» كان يعني «بلا أي دليل على وجود المزيد»، وهذا ما جعل القائمة تُقرأ معوَّقة. مقيس على ١٤٤٠×٦٦٠ — وهو ارتفاع لابتوب عادي — قائمةُ الإدارة ٥٨٣px داخل ٥٢٧px: ثلاثة عناصر (صلاحيات النظام · كلمات السر · الأدوات التقنية) غير مرئية ولا شيء يقول إنها هناك. وهي نفسها العناصر التي «ظهرت» بوضع التركيز حين كسر الفلترُ التثبيت. فالشريط الآن **شعرة ٤px** لا تظهر إلا عند تحويم القائمة أو أثناء التمرير — لا يزاحم التصميم ولا يكذب على القارئ. */ /* ⚠️ كان شريطاً بعرض ٤px ولونٍ rgba(104,26,26,.42) — أي شعرةٌ لا تكاد تُرى على أرضيةٍ شبه سوداء، فقُرئ «التمرير انكسر»: الشريط الافتراضي مطويّ (سكّة أيقونات) وقائمةُ الإدارة ~٢٨ عنصراً تفيض أي شاشة، ولا شيء يقول إنها تُمرَّر. الآن شريطٌ رفيعٌ لكن مرئيّ فعلاً حين يوجد فائض (أسلوب المواقع العالمية: رفيع، هادئ، لكنه موجود)، يشتدّ عند التحويم والتمرير. */ .kbsb-body { scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color .18s ease; } .kbsb-body::-webkit-scrollbar { width: 9px; height: 0; } .kbsb-body::-webkit-scrollbar-track { background: transparent; } .kbsb-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; transition: background .18s ease; } #kbsb.kbsb-scrollable .kbsb-body { scrollbar-color: rgba(158,46,46,.6) transparent; } #kbsb.kbsb-scrollable .kbsb-body::-webkit-scrollbar-thumb { background: rgba(158,46,46,.6); background-clip: padding-box; } #kbsb:hover .kbsb-body, .kbsb-body.kbsb-scrolling { scrollbar-color: var(--blood-ink) transparent; } #kbsb:hover .kbsb-body::-webkit-scrollbar-thumb, .kbsb-body.kbsb-scrolling::-webkit-scrollbar-thumb { background: var(--blood-ink); background-clip: padding-box; } #kbsb .kbsb-body:hover::-webkit-scrollbar-thumb { background: var(--blood-bright); background-clip: padding-box; } /* تلاشٍ عند الحافة السفلى للتنقّل — يظهر فقط حين يوجد ما تحته فعلاً (صفّ kbsb-more-down تضعه الوحدة). ⚠️ ١٨px فقط وشفافيةٌ متدرّجة: هذا ليس mask-image (رُفض سابقاً لأنه كان **يخفي** أوّل العناصر وآخرها) — العنصر الأخير يبقى مقروءاً كاملاً، وإنما تُعتم بضعةُ بكسلات عند الحدّ لتقول «القائمة تكمل». */ #kbsb .kbsb-foot { position: relative; } #kbsb .kbsb-foot::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: 18px; background: linear-gradient(to top, #050303 0%, rgba(5,3,3,.72) 45%, transparent 100%); opacity: 0; transition: opacity .18s ease; pointer-events: none; } #kbsb.kbsb-more-down .kbsb-foot::before { opacity: 1; } #kbsb .kbsb-body > div { display: none; flex-direction: column; align-items: stretch; gap: 1px; width: 100%; margin: 0; } body.kb-role-admin #kbsb #admin-nav, body.kb-role-control #kbsb #control-nav, body.kb-role-cashier #kbsb #cashier-nav, body.kb-role-mena #kbsb #mena-nav, body.kb-role-maze #kbsb #maze-nav, body.kb-role-partner #kbsb #partner-nav, body.kb-role-accountant #kbsb #accountant-nav { display: flex; } /* عناوين المجموعات (nav-menu-trigger مُعاد توظيفه) */ #kbsb .nav-menu-group { width: 100%; } #kbsb .nav-menu-trigger { background: none !important; border: 0 !important; box-shadow: none !important; pointer-events: none; cursor: default; color: var(--ash-dim); font-weight: 700; font-size: .62rem; padding: 9px 12px 3px; width: 100%; justify-content: flex-start; } #kbsb .nav-menu-trigger .nmt-arrow { display: none; } #kbsb .nav-menu-dropdown { display: flex !important; position: static !important; width: 100%; min-width: 0; max-width: none; background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0; animation: none; flex-direction: column; gap: 1px; } /* عناصر التنقّل — .sb-item من المخطط. التحويم: تغيير خلفية/لون فقط — لا إزاحة حشو (تُسبّب اهتزاز تخطيط وتقطيعاً). */ #kbsb .nav-btn { display: flex; align-items: center; gap: 11px; position: relative; width: 100%; margin: 0; padding: 6px 12px; border-radius: 6px; background: transparent; border: 0; box-shadow: none; color: var(--ash); font-size: .85rem; font-weight: 600; text-align: start; justify-content: flex-start; white-space: nowrap; overflow: hidden; text-overflow: clip; transition: color .12s ease, background .12s ease; } #kbsb .nav-btn::before { content: attr(data-ico); font-family: 'Segoe UI Symbol', 'Cairo', system-ui, sans-serif; font-size: .95rem; width: 18px; text-align: center; opacity: .7; flex-shrink: 0; transition: opacity .12s ease, color .12s ease; } #kbsb .nav-btn:hover:not(.active) { color: var(--bone-dim); background: var(--ground-2); } #kbsb .nav-btn:hover::before { opacity: 1; } #kbsb .nav-btn:active { background: var(--ground-3); } #kbsb .nav-btn.active { color: var(--bone); background: var(--ground-2); font-weight: 700; } #kbsb .nav-btn.active::before { opacity: 1; color: var(--blood-ink); } #kbsb .nav-btn.active::after { content: ""; position: absolute; inset-inline-start: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--blood-bright); box-shadow: 0 0 10px var(--blood-glow); } /* شارة عدّاد نظيفة داخل الزرّ (مثل 3 بالمخطط) */ #kbsb .nav-btn > b, #kbsb .nav-btn .nav-badge { font-family: var(--font-mono); font-size: .7rem; color: var(--alive); background: var(--alive-bg); border: 1px solid var(--alive-line); border-radius: 100px; padding: 1px 7px; flex-shrink: 0; margin-inline-start: auto; } /* الذيل — ثلاثة أزرار متساوية: رمزٌ فوق تسمية عربية (data-label) حتى يكون واضحاً ماذا يفعل كلٌّ منها. المحدِّد يبدأ بـ#kbsb ليتغلّب على #scary-logout (id، دائرة ثابتة ٥٤px). النصّ الخام مخفيّ (font-size:0)، والرمز/التسمية من ::before/::after. */ #kbsb .kbsb-foot { display: flex; gap: 6px; padding: 8px 9px; border-top: 1px solid var(--line-soft); flex-shrink: 0; } #kbsb .kbsb-foot .kbsb-util { flex: 1 1 0 !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: var(--ground-1) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; color: var(--bone-dim) !important; font-size: 0 !important; padding: 6px 2px !important; line-height: 1; box-shadow: none !important; position: static !important; inset: auto !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; z-index: auto !important; cursor: pointer; transition: background .14s, border-color .14s, color .14s; } #kbsb .kbsb-foot .kbsb-util::before { content: attr(data-ico); font-size: 1.05rem; line-height: 1; font-family: 'Segoe UI Symbol', system-ui, sans-serif; } #kbsb .kbsb-foot .kbsb-util::after { content: attr(data-label); font-size: .62rem; font-weight: 700; white-space: nowrap; font-family: 'Cairo', sans-serif; color: var(--ash); } #kbsb .kbsb-foot .kbsb-util:hover { background: var(--ground-2) !important; border-color: var(--ash-dim) !important; color: var(--bone) !important; } #kbsb .kbsb-foot .kbsb-util:hover::after { color: var(--bone-dim); } #kbsb .kbsb-foot .kbsb-out { color: var(--blood-ink) !important; border-color: var(--blood-dim) !important; } #kbsb .kbsb-foot .kbsb-out::after { color: var(--blood-ink); } #kbsb .kbsb-foot .kbsb-out:hover { background: rgba(138,0,0,.16) !important; border-color: var(--blood-bright) !important; color: #fff !important; } #kbsb .kbsb-foot .kbsb-util.muted { color: var(--blood-ink) !important; border-color: var(--blood-bright) !important; background: rgba(138,0,0,.14) !important; } #kbsb .kbsb-foot .kbsb-util.muted::after { content: "مكتوم"; color: var(--blood-ink); } /* زرّ الطيّ — صغير، داخل الشريط قرب حافته الداخلية، لا يطفو فوق المحتوى */ body[class*="kb-role-"] #kbsb-tgl { display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center; position: fixed; top: 15px; inset-inline-start: 198px; z-index: 402; width: 28px; height: 28px; border-radius: 5px; padding: 0; background: var(--ground-2); border: 1px solid var(--line); cursor: pointer; /* يتحرّك مع الشريط بنفس التوقيت. لا will-change على inset-inline-start — خاصيّةُ تخطيط، والتلميح لا يفيدها. */ transition: inset-inline-start .16s var(--kb-ease-move), background .15s, border-color .15s; } /* يبقى همبرغر ☰ دائماً — لا يتحوّل إلى ✕ (يوحي «إغلاق» وهو أصلاً مطويّ). نمط YouTube/Gmail. */ #kbsb-tgl span { width: 14px; height: 2px; background: var(--bone-dim); border-radius: 2px; transition: background .15s; } #kbsb-tgl:hover { background: var(--ground-3); border-color: var(--ash-dim); } #kbsb-tgl:hover span { background: var(--blood-ink); } body.kbsb-collapsed #kbsb-tgl { inset-inline-start: 12px; } /* ── مطويّة: شريط أيقونات نحيف (.sb-mini من المخطط) ── */ body.kbsb-collapsed[class*="kb-role-"] #kbsb { width: 52px; background: #080506; } body.kbsb-collapsed[class*="kb-role-"] { padding-inline-start: 52px; } /* الشعار يُخفى؛ زرّ الطيّ (☰) يصير مرساةَ الأعلى (نمط YouTube المطويّ) */ body.kbsb-collapsed .kbsb-head { padding: 38px 0 6px; text-align: center; } body.kbsb-collapsed .kbsb-brand { display: none; } body.kbsb-collapsed .kbsb-acct, body.kbsb-collapsed .kbsb-sub { display: none; } body.kbsb-collapsed .kbsb-body { padding: 8px 0; align-items: center; gap: 2px; } body.kbsb-collapsed #kbsb .kbsb-body > div { align-items: center; gap: 2px; } body.kbsb-collapsed #kbsb .nav-menu-trigger { display: none; } body.kbsb-collapsed #kbsb .nav-menu-dropdown { align-items: stretch; } /* لا عرض ثابت — الزرّ يضيق مع الشريط (عرضه %) فلا يقفز لحجمٍ صغير والشريط ما زال عريضاً. النصّ (عقدة نصّ حرّة لا ) يُخفى بـfont-size:0، والأيقونة تبقى عبر ::before. */ body.kbsb-collapsed #kbsb .nav-btn { padding: 9px 0; gap: 0; justify-content: center; border-radius: 4px; font-size: 0; } body.kbsb-collapsed #kbsb .nav-btn > span, body.kbsb-collapsed #kbsb .nav-btn > b, body.kbsb-collapsed #kbsb .nav-btn .nav-badge { display: none; } body.kbsb-collapsed #kbsb .nav-btn::before { width: auto; font-size: 1rem; } body.kbsb-collapsed #kbsb .nav-btn:hover:not(.active) { background: var(--ground-2); } body.kbsb-collapsed #kbsb .nav-btn.active { background: var(--ground-2); border-inline-start: 2px solid var(--blood-bright); } body.kbsb-collapsed #kbsb .nav-btn.active::after { display: none; } body.kbsb-collapsed #kbsb .kbsb-foot { flex-direction: column; padding: 8px 6px; gap: 5px; } body.kbsb-collapsed #kbsb .kbsb-foot .kbsb-util { flex: none !important; width: 36px !important; padding: 8px 0 !important; margin: 0 auto !important; gap: 0; } body.kbsb-collapsed #kbsb .kbsb-foot .kbsb-util::after { display: none; } /* لا تسمية عند الطيّ — الرمز فقط + tooltip */ /* أثناء الطيّ/الفتح: يتحرّك عرض الشريط وحشو المحتوى فقط — كلّ انتقالات العناصر الداخلية مُعطَّلة حتى لا تتصارع مع حركة العرض فيحدث تقطيع. */ body.kbsb-anim #kbsb *, body.kbsb-anim #kbsb *::before, body.kbsb-anim #kbsb *::after { transition: none !important; } /* حامل الإزاحة صار نفسه، فالتجميد/التزامن ينتقلان إليه مع #admin-interface (يبقى بالقائمة لأن قواعد قديمة قد تحرّكه، ووجوده هنا لا يكلّف شيئاً). */ body.kbsb-anim, body.kbsb-anim #kbsb, body.kbsb-anim #admin-interface, body.kbsb-anim #kbsb-tgl { transition-duration: .16s !important; transition-timing-function: var(--kb-ease-move) !important; } body.kbsb-notrans, body.kbsb-notrans #kbsb, body.kbsb-notrans #admin-interface, body.kbsb-notrans #kbsb-tgl { transition: none !important; } } @media (max-width: 900px) { body[class*="kb-role-"] #header-section { display: none !important; } /* ⚠️ زرّ الهمبرغر ثابتٌ فوق المحتوى (يسار الأعلى) ولم يكن أحدٌ يحجز له مكاناً، فكان يجلس على أوّل بطاقةٍ بالصفحة — وهذا نصف شكوى «تاخذ من مساحة الصفحة» على الشاشات الصغيرة (نصفها الآخر كان الإزاحة الموضوعة على العنصر الخطأ). الحشو هنا يفتح له صفّاً خاصّاً به بدل أن يستعير من المحتوى. */ body[class*="kb-role-"] { padding-block-start: 54px; } /* قفل تمرير الصفحة والدرج مفتوح — هو عنصر التمرير هنا. */ html.kbsb-lock, html.kbsb-lock body { overflow: hidden !important; } /* ⚠️ الدرج الآن **ابنٌ مباشر لـ** لا داخل #admin-interface — sidebarNav.js ينقله. #admin-interface على الجوال حاويةُ تمرير (overflow-x:hidden ⇒ overflow-y يُحسَب auto)، ودرجٌ position:fixed داخل حاويةِ تمرير هو أشهرُ مصادر عطبِ سفاري iOS: الطبقة تُنشأ ولا تُرسَم (يبدو «شفافاً»)، أو تنزلق نصفَها، ومنطقةُ لمسها تبقى في موضعها القديم — وهو البلاغ حرفاً بحرف، وقد تكرّر رغم إزالة will-change/contain لأن الحاوية نفسها كانت المتغيّر. الإخراجُ منها يزيله. ما زالت will-change/contain مطفأتين — قرارٌ سابق لم يُختبَر عكسُه على جهاز. */ body[class*="kb-role-"] #kbsb { display: flex; flex-direction: column; font-family: 'Cairo', sans-serif; position: fixed; inset-block: 0; right: 0; left: auto; width: min(280px, 82vw); z-index: 9996; background-color: #050303; /* أرضيةٌ صلبة تحت التدرّج — تُرسَم حتى لو تعثّر التدرّج على المركِّب */ background-image: linear-gradient(180deg, #0a0607, #050303 55%, #020202); border-inline-start: 1px solid var(--blood-dim); /* مغلقاً: خارج الشاشة **و** hidden **و** لا يلتقط لمساً — الثلاثة معاً، فلا تنفذ نقرةٌ إليه ولو بقيت طبقتُه القديمة في مكانها. visibility تُعطي المركِّب إشارةً صريحة «صار ظاهراً الآن، ارسمه» لحظةَ الفتح — وهذا نصفُ العلاج للطبقة الشفّافة. الغطاء صار عنصراً حقيقياً (#kbsb-scrim) لا ::after. */ transform: translateX(100%); visibility: hidden; pointer-events: none; transition: transform .2s var(--kb-ease-out), visibility 0s .2s; /* ⚠️ overflow:hidden لا auto — كان الدرج وجسمُه كلاهما حاويةَ تمرير، فالإصبع يقع أحياناً على الخارجية التي لا شيء فيها لتمرّره فتبدو عالقة. حاويةٌ واحدة تمرّر: .kbsb-body. */ overflow: hidden; overscroll-behavior: contain; } body.kbsb-open[class*="kb-role-"] #kbsb { transform: translateX(0); visibility: visible; pointer-events: auto; transition: transform .2s var(--kb-ease-out), visibility 0s 0s; } body.kbsb-notrans[class*="kb-role-"] #kbsb { transition: none !important; } /* الجوال: زرّ الهمبرغر يسار الشاشة (الحافة المكشوفة للدرج المنزلق من اليمين) */ body[class*="kb-role-"] #kbsb-tgl { display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; position: fixed; top: 10px; left: 12px; right: auto; inset-inline-start: auto; z-index: 9997; width: 40px; height: 40px; border-radius: 8px; padding: 0; background: var(--ground-2); border: 1px solid var(--line); cursor: pointer; touch-action: manipulation; /* بلا تأخّر/ازدواج نقرٍ على الجوال */ } #kbsb-tgl span { width: 17px; height: 2px; background: var(--bone-dim); border-radius: 2px; } .kbsb-head { padding: 20px 18px 12px; border-bottom: 1px solid var(--line-soft); } .kbsb-brand { display: block; width: 160px; max-width: 62%; height: auto; filter: drop-shadow(0 0 16px var(--blood-glow)); } .kbsb-acct .control-label { display: block; margin: 5px 0 0; font-size: .72rem; font-weight: 600; color: var(--ash); } .kbsb-sub { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 10px; } .kbsb-body { flex: 1; min-height: 0; padding: 10px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 1px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: transparent transparent; } /* شعرةٌ تظهر أثناء التمرير باللمس فقط — لا تحويم على الجوال ليكشف المخفيّ، ولذلك التلاشي أسفل القائمة (kbsb-more-down) هو الدليل الأهمّ هنا. مقيس: ٥٨٠ داخل ٨٢٦ — أي ٢٤٦px من القائمة كانت تختفي بلا أثر. */ .kbsb-body::-webkit-scrollbar { width: 6px; } .kbsb-body::-webkit-scrollbar-track { background: transparent; } .kbsb-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; } /* على الجوال أشرطة التمرير تراكبيّة وتختفي وحدها، فيكفي إظهارُها حين يوجد فائض (وتشتدّ أثناء التمرير باللمس) — لا داعي لإخفائها كلياً كما كان. */ #kbsb.kbsb-scrollable .kbsb-body { scrollbar-color: rgba(158,46,46,.55) transparent; } #kbsb.kbsb-scrollable .kbsb-body::-webkit-scrollbar-thumb { background: rgba(158,46,46,.55); } .kbsb-body.kbsb-scrolling { scrollbar-color: var(--blood-ink) transparent; } .kbsb-body.kbsb-scrolling::-webkit-scrollbar-thumb { background: var(--blood-ink); } #kbsb .kbsb-foot { position: relative; } #kbsb .kbsb-foot::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: 22px; background: linear-gradient(to top, #050303 0%, rgba(5,3,3,.72) 45%, transparent 100%); opacity: 0; transition: opacity .18s ease; pointer-events: none; } #kbsb.kbsb-more-down .kbsb-foot::before { opacity: 1; } #kbsb .kbsb-body > div { display: none; flex-direction: column; gap: 1px; } body.kb-role-admin #kbsb #admin-nav, body.kb-role-control #kbsb #control-nav, body.kb-role-cashier #kbsb #cashier-nav, body.kb-role-mena #kbsb #mena-nav, body.kb-role-maze #kbsb #maze-nav, body.kb-role-partner #kbsb #partner-nav, body.kb-role-accountant #kbsb #accountant-nav { display: flex; } #kbsb .nav-btn { display: flex; align-items: center; gap: 11px; position: relative; width: 100%; padding: 12px 14px; border-radius: 6px; background: transparent; border: 0; color: var(--ash); font-size: .9rem; font-weight: 600; text-align: start; justify-content: flex-start; /* ٤٤px حدّ اللمس بالإصبع — padding وحده يبلغ ٤١px، والدرج حاويةُ تمرير رأسيّة فالزيادة لا تكسر تخطيطاً. (responsive-audit: ١٩٠ TAP_TARGET) */ min-height: 44px; touch-action: manipulation; } #kbsb .nav-btn::before { content: attr(data-ico); font-family: 'Segoe UI Symbol','Cairo',system-ui,sans-serif; font-size: 1rem; width: 18px; text-align: center; opacity: .7; flex-shrink: 0; } #kbsb .nav-btn.active { color: var(--bone); background: var(--ground-2); } #kbsb .nav-btn.active::before { color: var(--blood-ink); opacity: 1; } #kbsb .nav-btn.active::after { content: ""; position: absolute; inset-inline-start: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--blood-bright); } #kbsb .nav-btn > b, #kbsb .nav-btn .nav-badge { font-family: var(--font-mono); font-size: .7rem; color: var(--alive); background: var(--alive-bg); border: 1px solid var(--alive-line); border-radius: 100px; padding: 1px 7px; margin-inline-start: auto; } #kbsb .nav-menu-trigger { pointer-events: none; color: var(--ash-dim); font-size: .62rem; font-weight: 700; padding: 14px 14px 5px; background: none !important; border: 0 !important; } #kbsb .nav-menu-trigger .nmt-arrow { display: none; } /* ⚠️ backdrop-filter يجب أن يُلغى هنا كما يُلغى في كتلة الديسكتوب — نسيانُه ترك **سبع** طبقات blur(8px) حيّة داخل حاوية تتمرّر على الجوال: سبع تمريرات GPU تُعاد عند كل إطار تمرير، وهي سبب ثقل التمرير داخل الدرج. وهي أيضاً المستطيلات الباهتة التي كانت تلتفّ حول كل مجموعةٍ فتبدو كصناديق لا كقائمة. */ #kbsb .nav-menu-dropdown { display: flex !important; position: static !important; width: 100%; background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0 !important; padding: 0; flex-direction: column; gap: 1px; } /* الذيل على الجوال: نفس فكرة سطح المكتب — رمز فوق تسمية، ثلاثة أزرار متساوية */ #kbsb .kbsb-foot { padding: 12px; border-top: 1px solid var(--line-soft); display: flex; gap: 8px; } #kbsb .kbsb-foot .kbsb-util { flex: 1 1 0 !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 2px !important; font-size: 0 !important; background: var(--ground-1) !important; border: 1px solid var(--line) !important; color: var(--bone-dim) !important; border-radius: 8px !important; box-shadow: none !important; position: static !important; inset: auto !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; z-index: auto !important; } #kbsb .kbsb-foot .kbsb-util::before { content: attr(data-ico); font-size: 1.15rem; line-height: 1; font-family: 'Segoe UI Symbol', system-ui, sans-serif; } #kbsb .kbsb-foot .kbsb-util::after { content: attr(data-label); font-size: .68rem; font-weight: 700; font-family: 'Cairo', sans-serif; color: var(--ash); white-space: nowrap; } #kbsb .kbsb-foot .kbsb-out { color: var(--blood-ink) !important; border-color: var(--blood-dim) !important; } #kbsb .kbsb-foot .kbsb-out::after { color: var(--blood-ink); } #kbsb .kbsb-foot .kbsb-util.muted { color: var(--blood-ink) !important; border-color: var(--blood-bright) !important; background: rgba(138,0,0,.14) !important; } #kbsb .kbsb-foot .kbsb-util.muted::after { content: "مكتوم"; color: var(--blood-ink); } /* الغطاء الخلفي — عنصرٌ حقيقيّ (#kbsb-scrim) شقيقٌ للدرج تحت ، لا ::after. ::after يقلب pointer-events على الجوال نقطةُ ضعفٍ معروفةٌ في اختبار لمس سفاري iOS (قد يبقى الغطاء يلتقط اللمس بعد إغلاق الدرج، أو لا يلتقطه وهو مفتوح)، وجعلُ الدرج والغطاء شقيقين

بـz-index صريح هو النمط المضمون. sidebarNav.js يبنيه ويربط النقر عليه بإغلاق الدرج. يخفت ويظهر بنعومة مع انزلاق الدرج. */ #kbsb-scrim { display: block; position: fixed; inset: 0; z-index: 9995; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .24s var(--kb-ease-out); } body.kbsb-open[class*="kb-role-"] #kbsb-scrim { opacity: 1; pointer-events: auto; } body.kbsb-notrans[class*="kb-role-"] #kbsb-scrim { transition: none !important; } } /* ══════════════════════════════════════════════════════════════════════════ شاشة دخول الطاقم (?staff=1) — إعادة تصميم كاملة (2026-08-28) ─────────────────────────────────────────────────────────────────── شكوى المالك: البطاقة الرمادية ضخمة، والصفحة تتمرّر عمودياً. المطلوب: جوّ رعبٍ مريحٌ للعين، بطاقة أصغر، وملء الشاشة بالضبط بلا أي تمرير على كل جهاز. • #auth-section يصير طبقةً ثابتة (position:fixed) بحجم النافذة تماماً، فلا يتأثّر بحشو #admin-interface السفلي ولا بأي هامش — وبهذا يختفي التمرير. يُخفيه login.js بعد الدخول (style.display='none') فينتهي أثره تلقائياً. • الخلفية: images/auth_bg.jpg (جدار متقشّر + مرآة الراهبة «DON'T TRUST WHAT YOU SEE» + مغسلة صدئة) — تمويهٌ خفيف وتعتيمٌ متدرّج يُبقي المشهد مقروءاً (كان shadow.jpg معتّماً وممّوهاً بشدّة فقُرئ «الشاشة باهتة») + vignette + توهّج دمٍ من الأعلى + خطوط CRT خافتة — إيحاءٌ لا ملصق. • البطاقة: زجاجٌ أسود ضيّق (≤300px) بحدّ دمٍ داكن، عنوانٌ عبر ::before، إطارٌ مزدوج عبر ::after — بلا الصندوق الرمادي القديم. • هذه كتلةٌ مستقلّة في نهاية الملف: للرجوع، احذفها كلّها فيعود التصميم القديم. ══════════════════════════════════════════════════════════════════════════ */ #auth-section { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; min-height: 0; margin: 0; padding: clamp(14px, 3vh, 28px) 16px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 3.5vh, 30px); background: var(--ground-0); border: 0; box-shadow: none; overflow: hidden; overscroll-behavior: none; z-index: 100; } /* حشو #admin-interface السفلي (50px) لا لزوم له وشاشة الدخول ظاهرة — يُصفَّر حتى لا يُنتج ارتفاعاً زائداً خلف الطبقة الثابتة. */ #admin-interface:has(> #auth-section:not([style*="display: none"])) { padding-bottom: 0; } /* الطبقة ٠: صورة الخلفية المموّهة + تعتيم متدرّج */ #auth-section::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; --auth-zoom: 1.28; background: linear-gradient(180deg, rgba(2,1,1,.95) 0%, rgba(3,2,2,.74) 14%, rgba(4,2,2,.26) 36%, rgba(3,2,2,.34) 62%, rgba(2,1,1,.8) 84%, rgba(1,1,1,.96) 100%), url("/images/auth_bg.jpg"); background-size: cover; background-position: 50% 40%; filter: blur(1.4px) brightness(.82) contrast(1.05) saturate(1); transform: scale(var(--auth-zoom)); animation: kbAuthDrift 44s ease-in-out infinite alternate; } /* على الشاشات الضيّقة/الطولية تُقرَّب الصورة أكثر حتى يخرج نصّ الملصق المطبوع (شعار كابوس أعلاها والعبارة أسفلها) خارج الإطار تماماً */ @media (max-width: 820px) { #auth-section::before { --auth-zoom: 1.62; background-position: 50% 50%; } } /* الطبقة ١: توهّج الدم من الأعلى + vignette + خطوط CRT */ #auth-section::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .82; background: radial-gradient(circle at 50% -6%, rgba(150,0,0,.3) 0%, transparent 55%), radial-gradient(ellipse 135% 100% at 50% 42%, transparent 0%, rgba(3,2,2,.16) 48%, rgba(2,1,1,.74) 100%), repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0px, rgba(255,255,255,.016) 1px, transparent 1px, transparent 3px); } @keyframes kbAuthDrift { 0% { transform: scale(var(--auth-zoom)) translate(0, 0); } 100% { transform: scale(calc(var(--auth-zoom) * 1.05)) translate(-1.6%, 1%); } } /* المحتوى فوق الطبقتين */ #auth-section > * { position: relative; z-index: 2; } #auth-section .auth-container { margin: 0; width: auto; display: flex; justify-content: center; animation: kbAuthIn .5s var(--kb-ease-out, cubic-bezier(.2,.8,.2,1)) both; } @keyframes kbAuthIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } } /* الشعار — أكبر وأوضح بهذه الواجهة (بلاغ المالك)، محدود بارتفاع الشاشة، ووهجٌ دمويّ أضيق وأنصع ليقرأ الشعار حادّاً لا مغبَّشاً. الوميض يبقى للهوية لكنه هنا لا يهبط إلى 0.25 (يُغبّش الشعار على شاشة الدخول) بل بين 1 و0.72. */ #auth-section .kaboos-logo { width: min(480px, 80vw); max-height: 30vh; height: auto; margin: 0 auto; animation: kbAuthLogoFlicker 5s infinite; filter: drop-shadow(0 0 14px rgba(220,34,34,.6)) drop-shadow(0 0 40px rgba(138,0,0,.4)); } @keyframes kbAuthLogoFlicker { 0%, 18%, 22%, 25%, 53%, 57%, 83%, 100% { opacity: 1; } 20%, 24%, 55%, 85% { opacity: 0.72; } 21%, 84% { opacity: 0.95; } } @media (prefers-reduced-motion: reduce) { #auth-section .kaboos-logo { animation: none; opacity: 1; } } /* البطاقة — زجاجٌ أسود ضيّق بحدّ دمٍ داكن */ #auth-section .login-box { width: min(300px, 86vw); gap: clamp(10px, 2.3vh, 13px); padding: clamp(18px, 4.5vw, 24px) clamp(18px, 5vw, 22px) clamp(14px, 3.5vw, 18px); background: linear-gradient(160deg, rgba(15,10,11,.85) 0%, rgba(5,3,4,.93) 100%); border: 1px solid rgba(138,0,0,.5); border-radius: 12px; -webkit-backdrop-filter: blur(9px) saturate(1.1); backdrop-filter: blur(9px) saturate(1.1); box-shadow: 0 26px 64px -14px rgba(0,0,0,.88), 0 0 0 1px rgba(0,0,0,.55), 0 0 44px -8px var(--blood-glow), inset 0 1px 0 rgba(255,255,255,.045); position: relative; overflow: hidden; } /* عنوان البطاقة (بلا تعديل markup) */ #auth-section .login-box::before { content: "دخول الطاقم"; display: block; width: 100%; text-align: center; font-family: 'Cairo', sans-serif; font-weight: 800; font-size: .98rem; letter-spacing: normal; color: var(--bone); padding-bottom: 10px; border-bottom: 1px solid var(--blood-dim); text-shadow: 0 0 18px rgba(200,26,26,.25); } /* إطارٌ داخليّ مزدوج خفيف */ #auth-section .login-box::after { content: ""; position: absolute; inset: 6px; border-radius: 9px; border: 1px solid transparent; border-top-color: rgba(200,26,26,.42); border-bottom-color: rgba(200,26,26,.22); pointer-events: none; } /* الحقول — نصّ عظميّ، تركيزٌ دمويّ */ #auth-section .login-box input { width: 100%; padding: 11px 13px; background: rgba(0,0,0,.42); border: 1px solid var(--line); border-radius: 7px; color: var(--bone); font-family: var(--font-mono); font-size: .98rem; letter-spacing: normal; text-align: center; outline: none; box-sizing: border-box; transition: border-color .2s, box-shadow .2s, background .2s; } /* التلميح عربيّ — خطّ Cairo حتى تتّصل الحروف (الأحادي يكسر الوصل) */ #auth-section .login-box input::placeholder { color: var(--ash-dim); letter-spacing: normal; font-family: 'Cairo', sans-serif; } #auth-section .login-box input:focus { border-color: var(--blood-bright); background: rgba(0,0,0,.55); box-shadow: 0 0 0 3px rgba(200,26,26,.12), 0 0 18px -4px var(--blood-glow); } /* الزرّ */ #auth-section .login-btn { width: 100%; padding: 12px; margin-top: 2px; background: linear-gradient(180deg, var(--blood-bright) 0%, var(--blood) 100%); color: #fff; border: 1px solid rgba(255,90,90,.35); border-radius: 7px; font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: normal; cursor: pointer; text-transform: none; box-shadow: 0 8px 22px -8px rgba(138,0,0,.7); transition: transform .15s, box-shadow .25s, filter .2s; } #auth-section .login-btn:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 10px 30px -8px var(--blood-glow), 0 0 24px -6px rgba(200,26,26,.5); } #auth-section .login-btn:active { transform: translateY(0); filter: brightness(.95); } /* رسالة الخطأ — لا تحجز أي فراغ ما لم تظهر فعلاً */ #auth-section #login-error { color: var(--blood-ink); font-family: 'Cairo', sans-serif; font-size: .82rem; font-weight: 700; letter-spacing: normal; margin: 0; min-height: 0; text-shadow: 0 0 10px rgba(255,90,90,.4); } #auth-section #login-error:empty { display: none; } /* رابط الرجوع — يبقى هدف لمسٍ ٤٤px (من fixes.css)، بلون اللوحة */ #auth-section .login-box > div[onclick*="auBackToSite"] { padding: 9px 16px; min-height: 44px; margin-top: 2px !important; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: 6px; color: var(--ash) !important; opacity: 1 !important; font-size: .72rem !important; transition: color .2s, background .2s; } #auth-section .login-box > div[onclick*="auBackToSite"]:hover { color: var(--bone-dim) !important; background: rgba(255,255,255,.03); } @media (prefers-reduced-motion: reduce) { #auth-section::before { animation: none; } #auth-section .auth-container { animation: none; } } /* شاشات قصيرة (جوال أفقي، نوافذ صغيرة) — يبقى ملء الشاشة بلا تمرير */ @media (max-height: 620px) { #auth-section { gap: 9px; padding: 10px 14px; } #auth-section .kaboos-logo { max-height: 14vh; width: min(210px, 50vw); } #auth-section .login-box { gap: 9px; padding: 13px 16px; width: min(288px, 88vw); } #auth-section .login-box::before { font-size: .88rem; padding-bottom: 8px; } #auth-section .login-box input { padding: 9px 12px; font-size: .92rem; } #auth-section .login-btn { padding: 10px; font-size: .98rem; } #auth-section .login-box > div[onclick*="auBackToSite"] { min-height: 40px; padding: 8px 14px; } } @media (max-height: 480px) { #auth-section { gap: 6px; padding: 8px 12px; } #auth-section .kaboos-logo { max-height: 58px; width: auto; } #auth-section .login-box { gap: 6px; padding: 10px 14px; border-radius: 10px; } #auth-section .login-box::before { font-size: .82rem; padding-bottom: 6px; } #auth-section .login-box::after { inset: 4px; } #auth-section .login-box input { padding: 7px 11px; font-size: .88rem; } #auth-section .login-btn { padding: 8px; font-size: .95rem; } #auth-section .login-box > div[onclick*="auBackToSite"] { min-height: 34px; padding: 6px 12px; } }