/* ===================================================================
   إصلاحات الأزرار + نافذة إضافة شخص + شارة مزامنة الخلفية
   مستخرَج حرفياً من: اعصار (2).html  (الأسطر 2031-2203)
   ⚠️ ترتيب الملفات في index.html يطابق ترتيب الكتل الأصلي — لا تغيّره (cascade).
   =================================================================== */

/* ══════════════════════════════════════════════════════
   إصلاح الأزرار التي لا تبدو أزراراً (نتيجة الفحص)
   ══════════════════════════════════════════════════════ */

/* زر الخروج — كان 21px بلا زوايا */
#scary-logout.confirm-mode {
    width: auto !important; min-width: 150px;
    border-radius: 12px !important; padding: 0 20px !important;
    height: 48px !important; min-height: 48px !important;
}

/* زر طلب المقطع المتأخر — كان بنفسجياً (rgba(176,0,255,...)/var(--neon-purple))؛
   نُقل للكهرماني (--warn): إجراءٌ يضيف رسماً/يحتاج انتباهاً، لا عملٌ بنيويّ (دم) ولا نجاح (أخضر) */
.hact-btn.hact-video {
    display: flex !important; align-items: center; gap: 9px;
    padding: 12px 18px !important; border-radius: 12px !important;
    border: 2px solid var(--warn-line) !important;
    background: linear-gradient(150deg,var(--warn-bg),rgba(18,12,4,.92)) !important;
    color: var(--warn) !important;
    font-family: 'Cairo',sans-serif; font-weight: bold; font-size: .86rem;
    min-height: 46px; cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
    transition: transform .15s ease, box-shadow .15s ease;
}
.hact-btn.hact-video:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,.6), 0 0 20px rgba(189,125,36,.32);
}

/* زر تأكيد الحجز المسبق — كان بلا إطار */
.btn-adv-confirm, button[onclick^="submitAdvanceBooking"] {
    border: 2px solid rgba(0,220,60,.5) !important;
    border-radius: 12px !important;
    background: linear-gradient(150deg,rgba(0,220,60,.18),rgba(0,14,4,.92)) !important;
    color: #00dc3c !important;
    font-family: 'Cairo',sans-serif !important; font-weight: bold !important;
    min-height: 48px !important; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05) !important;
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn-adv-confirm:hover, button[onclick^="submitAdvanceBooking"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.6), 0 0 20px rgba(0,220,60,.34) !important;
}

/* ضمان عام: أي زر ظاهر له حد أدنى للمس وزوايا */
button:not(.bmap-cell):not(.dw-face-preview) {
    min-height: 34px;
    border-radius: 8px;
}

/* ══ فئات مشتركة (كانت أنماطاً سطرية مكررة) ══ */
.x-shared-1 {
    display:none;
    position:relative;
    z-index:100;
    width:100%;
    max-width:1400px;
    margin-bottom:30px;
    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);
}
.x-shared-2 {
    background:#111;
    border:1px solid #333;
    color:#fff;
    -webkit-text-fill-color:#fff;
    padding:10px 12px;
    border-radius:6px;
    font-family:'Cairo';
    font-size:.95rem;
    width:100%;
    box-sizing:border-box;
}

/* ══════════════════════════════════════════════════════════════
   🆕 [Task 2] نافذة "إضافة شخص جديد وتعهد" — كل القواعد هنا مسبوقة
   بـ.new-waiver-modal- حصراً، صفر تداخل مع أي تصميم موجود بالنظام.
   متجاوبة بالكامل (جوال/تابلت/سطح مكتب)، بنفس لغة تصميم الموقع
   (خلفية داكنة، لمسات نيون، خط Cairo).
   ══════════════════════════════════════════════════════════════ */
.new-waiver-modal-overlay {
    display:none; position:fixed; inset:0; z-index:9200;
    background:rgba(0,0,0,.88); align-items:center; justify-content:center;
    padding:16px; box-sizing:border-box;
}
.new-waiver-modal-overlay.new-waiver-modal-open { display:flex; }
.new-waiver-modal-box {
    background:linear-gradient(160deg,#101010,#0a0a0a);
    border:1px solid rgba(0,180,255,.35);
    border-radius:14px;
    width:min(440px, 100%);
    max-height:90vh; overflow-y:auto;
    box-shadow:0 20px 60px rgba(0,0,0,.9), 0 0 0 1px rgba(0,180,255,.12);
}
.new-waiver-modal-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 18px; border-bottom:1px solid #1e1e1e;
    background:rgba(0,180,255,.07); border-radius:14px 14px 0 0;
}
.new-waiver-modal-title { color:var(--neon-blue,#00b4ff); font-family:'Cairo'; font-weight:bold; font-size:.95rem; }
.new-waiver-modal-close {
    background:transparent; border:1px solid #333; color:#888;
    width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:.9rem;
}
.new-waiver-modal-body { padding:18px; }
.new-waiver-modal-team { color:#888; font-family:'Cairo'; font-size:.8rem; margin-bottom:12px; }
.new-waiver-modal-input {
    width:100%; box-sizing:border-box; background:#0a0a0a; border:1px solid #333;
    color:#fff; padding:11px 12px; border-radius:6px; font-family:'Cairo';
    font-size:.9rem; margin-bottom:10px;
}
.new-waiver-modal-camrow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:4px; }
.new-waiver-modal-cambtn {
    background:rgba(0,180,255,.1); border:1px solid rgba(0,180,255,.3); color:var(--neon-blue,#00b4ff);
    padding:9px 16px; border-radius:6px; font-family:'Cairo'; font-size:.82rem; cursor:pointer;
}
.new-waiver-modal-facepreview {
    height:46px; width:46px; border-radius:50%; object-fit:cover;
    border:1px solid var(--neon-blue,#00b4ff); display:none;
}
.new-waiver-modal-facestatus { font-size:.75rem; color:#888; font-family:'Cairo'; }
.new-waiver-modal-agree {
    display:flex; align-items:flex-start; gap:8px; color:#ccc; font-family:'Cairo';
    font-size:.8rem; line-height:1.5; margin:14px 0 8px; cursor:pointer;
}
.new-waiver-modal-agree input { margin-top:3px; flex-shrink:0; width:16px; height:16px; cursor:pointer; }
.new-waiver-modal-hint { color:#666; font-family:'Cairo'; font-size:.72rem; line-height:1.6; }
.new-waiver-modal-status {
    margin-top:12px; padding:10px 12px; border-radius:7px; font-family:'Cairo';
    font-size:.8rem; line-height:1.6; background:rgba(0,180,255,.08); border:1px solid rgba(0,180,255,.3); color:#8fd4ff;
}
.new-waiver-modal-footer {
    display:flex; gap:10px; padding:14px 18px; border-top:1px solid #1e1e1e;
}
.new-waiver-modal-btn {
    flex:1; padding:12px; border-radius:7px; font-family:'Cairo'; font-weight:bold;
    font-size:.88rem; cursor:pointer; border:1px solid;
}
.new-waiver-modal-btn-cancel { background:transparent; border-color:#333; color:#999; }
.new-waiver-modal-btn-confirm { background:rgba(0,180,255,.14); border-color:rgba(0,180,255,.4); color:var(--neon-blue,#00b4ff); }
.new-waiver-modal-btn-confirm:disabled { opacity:.5; cursor:not-allowed; }
@media (max-width:480px) {
    .new-waiver-modal-box { width:100%; max-height:94vh; }
    .new-waiver-modal-body { padding:14px; }
}

/* ══════════════════════════════════════════════════════════════
   🚀 [تحسين أداء الإقلاع] شارة مزامنة السجلات القديمة بالخلفية —
   تظهر فقط أثناء تحميل الدفعة الخلفية، تختفي تلقائياً عند الاكتمال.
   ══════════════════════════════════════════════════════════════ */
#kb-sync-badge {
    position: fixed; bottom: 16px; left: 16px; z-index: 9970;
    display: none; align-items: center; gap: 8px;
    background: rgba(10,10,10,.92); border: 1px solid rgba(0,180,255,.35);
    border-radius: 20px; padding: 8px 14px 8px 10px;
    font-family: 'Cairo', sans-serif; font-size: .74rem; color: #ccc;
    box-shadow: 0 6px 20px rgba(0,0,0,.6);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    transition: opacity .3s ease, transform .3s ease;
}
#kb-sync-badge.kb-sync-done { border-color: rgba(0,255,68,.4); }
#kb-sync-spinner {
    width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid rgba(0,180,255,.25); border-top-color: var(--neon-blue,#00b4ff);
    animation: kbSyncSpin .7s linear infinite; flex-shrink: 0;
}
@keyframes kbSyncSpin { to { transform: rotate(360deg); } }
#kb-sync-bar-track { width: 46px; height: 4px; background: #222; border-radius: 3px; overflow: hidden; flex-shrink: 0; }
#kb-sync-bar-fill { height: 100%; background: var(--neon-blue,#00b4ff); width: 0%; transition: width .25s ease; border-radius: 3px; }

/* ══════════════════════════════════════════════════════
   أهداف اللمس — نتيجة تدقيق التجاوب (٣٧٥ · ٧٦٨ · ١٤٤٠)
   ══════════════════════════════════════════════════════
   التدقيق مسح ثلاثة مسارات (/ · ?staff=1 · ?exp=) بثلاثة عروض، فما وجد
   ولا حالة قصّ خط ولا نصاً خارج الشاشة ولا تمريراً أفقياً بأي منها.
   الشيء الوحيد الذي خرج: هدفا لمس تحت عُرف التطبيق نفسه. وهذا ليس
   معياراً مستورداً — قياس بقية الأزرار بهذي الشاشات: الوسيط ٥٠px،
   والشريحة العليا ٥٦px، وسبعة من أربعة عشر عنصراً فوق ٤٤px.

   ⚠️ العنصران يحملان نمطاً سطرياً (style="…")، والنمط السطري يغلب أي
   قاعدة هنا. لهذا كُتب الإصلاح بخصائص **لا يضبطها ذلك النمط**
   (padding / min-height) بدل إضافة !important فوق ما يضبطه — فالمظهر
   لا يتغيّر حرفاً، ولا نورّث للملف عادة !important التي حذّر منها
   CLAUDE.md بمكان آخر. */

/* «↩️ رجوع لصفحة الموقع» أسفل صندوق الدخول — كان ٢٢px، أصغر هدف بالنظام
   كله والوحيد تحت ٢٤. وهو المخرج الوحيد من شاشة الموظفين إلى الموقع:
   ضغطة تضيع عليه تترك زبوناً عالقاً بشاشة ليست له. النمط السطري يضبط
   text-align/margin-top/color/font-family/font-size/cursor — لا padding
   ولا min-height، فنضيفهما ونصل إلى ٤٤px بلا لمس المظهر. */
.login-box > div[onclick*="auBackToSite"] {
    padding: 11px 16px;
    min-height: 44px;
    box-sizing: border-box;
}

/* زرّا «🔒 قفل» و«🖨️ طباعة» بدفتر الصرفيات — كانا ٣٥px. وبقية أدوات
   الدفتر نفسه: أزرار الفترة ٣٩px · حقول الإدخال ٥٠-٥٥px · «حفظ الصرفية»
   ٥٦px — فهذان وحدهما الشاذّان على عُرف شاشتهما، لا على معيار خارجي.
   النمط السطري يضبط padding، فالإصلاح على min-height وحدها حتى لا نحتاج
   !important. أزرار 🗑 داخل صفوف القائمة متروكة عمداً: هي أيقونات داخل
   صف، وتكبيرها يغيّر تخطيط الصف نفسه. */
#kb-exp-main button[onclick*="kbExpenseLock"],
#kb-exp-main button[onclick*="kbExpensePrint"] {
    min-height: 40px;
}

/* ═══════════════════════════════════════════════════════════════════
   جرد الأموال داخل «نظرة عامة» (cashAuditAdmin.js)
   ═══════════════════════════════════════════════════════════════════

   الجدول نفسه متجاوب أصلاً: layout.css يحوّل .ca-table إلى بطاقات مكدّسة
   تحت ٧٠٠px. فما يُضاف هنا هو ما يخصّ **الموضع الجديد** وحده — الحشوة
   الجانبية التي يرثها الصندوق من قسمٍ عرضه ١٤٠٠px، وحجم الأهداف على
   هاتفٍ يمسكه المالك بيدٍ واحدة وهو واقف. لا !important بأي سطر: العناصر
   هنا تحمل أنماطاً سطرية، والإصلاح بخصائص لا تضبطها (نفس قاعدة الملف). */

#kb-adm-cash-audit .ca-grid { gap: 10px; }

@media (max-width: 700px) {
    /* الصندوق يمتد إلى حافتي الشاشة بدل حشوة ١٦px تسرق عمودين من الجدول */
    #kb-adm-cash-audit { padding: 12px 10px; }
    /* بطاقات الملخص عمودان لا عمود واحد: ستة أرقام بعمود واحد تعني تمريراً
       طويلاً قبل الوصول إلى أول صف من الجدول، وهي الأرقام المقصودة أصلاً */
    #kb-adm-cash-audit .ca-grid { grid-template-columns: repeat(2, 1fr); }
    /* زر التعديل داخل صفوف الجرد: أيقونةٌ داخل صف، لكنها هنا آخر ما يُلمس
       على شاشةٍ صغيرة وأصغر هدف بالبطاقة — نرفعه إلى ٤٤px بلا تغيير الصف */
    #kb-adm-cash-audit .ca-table td[data-lbl="الإجراءات"] .hist-act-btn {
        min-height: 44px;
        padding-inline: 14px;
    }
}

/* أهداف اللمس بالهاتف: الزر الطاوي وصفوف الجدول — القياس على ٣٧٥px */
#kb-adm-cash-audit .ca-card { min-height: 62px; }

/* ═══════════════════════════════════════════════════════════════
 * شاشة الغرفة على تلفازٍ أفقيٍّ قصير (720p وما دونه)
 *
 * ═══ البلاغ ═══
 * «شاشات الغرف أبعادها متخربطة».
 *
 * ═══ ما قِيس ═══
 * الحاوية `100dvh · overflow:hidden · justify-content:center`، فالفائض يُقصّ من
 * الطرفين معاً **بلا شريط تمرير ولا أي أثر يقول إن محتوى ضاع**. وأكبر سببٍ كان
 * طبقة رسالة الرعب تُقحَم بالتدفّق (أُصلح بـmain.css). والباقي بعده ١٦px على
 * 1280×720 وحده — من مجموع هوامشَ رأسية قدرها ٨٢px.
 *
 * ⚠️ والمقاس هنا ليس مقاس هاتف: هذه شاشةٌ **مثبَّتة بالجدار**، ولهذا مرّ العطل من
 * `responsive-audit` الذي يقيس 375/768/1440 — وهي المقاسات التي يقف أمامها إنسان.
 *
 * ⚠️ ولا يُلمس المؤقّت ولا حجم الخطّ: الرقم يُقرأ من آخر الغرفة، وتصغيرُه لتوفير
 * البكسلات يُبطل الغرض من الشاشة كلّها. الهوامش وحدها هي ما يُقلَّص.
 * ═══════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 820px) {
    #player-interface .player-hints { margin-top: 10px; }
    #player-interface #pl-help-btn   { margin-top: 18px; }
    #player-interface #pl-help-note  { margin-top: 6px; }
    #player-interface .pl-brand      { margin-bottom: 6px; }
}

/* ═══════════════════════════════════════════════════════════════════
 * لوحة «صلاحيات الموظفين» — إعادة تصميم بصري
 *
 * ═══ البلاغ ═══
 * «واجهة صلاحيات النظام شكلها أصبح غير مرضي ومتداخل».
 *
 * ═══ ما تغيّر، وما لم يتغيّر ═══
 * كل قاعدة هنا بصريةٌ بحتة، مرتبطة بمعرّف #users-list وحده — لا تلمس أي
 * منطق: saveUserRoles/togglePermBox يقرآن العناصر بمحدِّد صنف (querySelector)
 * لا بترتيب DOM ولا بأنماط سطرية، فبقاؤها كما هي مضمون. العناوين الجديدة
 * (🎭/🧩) تُضاف بـ::before — لا تدخل شجرة DOM إطلاقاً، فلا يمكن لأي كود
 * جافاسكربت أن "يجدها" أو يتفاعل معها بالخطأ. صناديق المحاسب الثلاثة نفسها
 * (accountantAdmin.js) أُصلحت من الجذر بدل تغطيتها بـCSS: كانت حاويتها
 * البصرية تُبنى ثم تُهمَل بالجافاسكربت قبل الإدراج — فلا CSS كان سيصلح
 * صندوقاً غير موجود أصلاً.
 *
 * ═══ لماذا `.booking-card` بقيت بلا `display:flex` ═══
 * `.btn-save-user` (css/main.css) يحمل `margin-top:auto` من الأصل — تنسيقٌ
 * بلا أثر لأن `.booking-card` ليست حاوية flex، فتُحسب "auto" صفراً. جُرِّب
 * تفعيلها (`#users-list .booking-card { display:flex; flex-direction:column }`)
 * فظهر عطلٌ حقيقي بمتصفّح فعلي: شرائح `.user-roles-group label` (وهي نفسها
 * `display:flex`) انزاحت أفقياً نحو ١٠٠px عن حدود حاويتها — عطل flexbox معروف
 * حين تتداخل حاويتا flex أفقية وعمودية بلا `min-width:0` صريحة على كل مستوى.
 * قِسناه بمتصفّح حقيقي (Chromium عبر Puppeteer) على ٣٧٥/٧٦٨/١٤٤٠ قبل الشحن،
 * لا افتراضاً — وهو بالضبط سبب وجود قسم "متى يحتاج التغيير متصفّحاً حقيقياً"
 * بهذا الملف. الفائدة (استقرار صفّ الأزرار بأسفل البطاقة) لم تكن مطلوبة أصلاً؛
 * أُزيلت بدل مطاردة تفاعل flexbox هش لمكسبٍ تجميلي ثانوي.
 * ═══════════════════════════════════════════════════════════════════ */

#users-list .user-roles-group {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 10px 0 4px 0; padding: 0;
}
#users-list .user-roles-group::before {
    content: '🎭 الأدوار الوظيفية';
    flex-basis: 100%;
    color: #888; font-family: 'Cairo', sans-serif; font-size: .72rem;
    margin-bottom: 2px;
}
#users-list .user-roles-group label {
    display: flex; align-items: center; gap: 6px;
    background: #141414; border: 1px solid #2a2a2a; border-radius: 20px;
    padding: 7px 14px; margin: 0; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    font-size: .82rem; color: #ccc;
}
#users-list .user-roles-group input[type="checkbox"] { margin: 0; }

/* التمييز اللوني عند التفعيل — بلا `:has()` تبقى الشرائح مرسومة وواضحة،
   فقط بلا لون تمييز إضافي عند التفعيل (تدهور رشيق على متصفح قديم جداً) */
#users-list .user-roles-group label:has(input:checked) {
    background: rgba(138,0,0,.16); border-color: var(--blood-bright); color: #fff; /* ١د: كان بنفسجياً rgba(176,0,255,.14)/var(--neon-purple) */
}
#users-list .user-roles-group label:has(input[value="admin"]:checked) {
    background: rgba(255,0,0,.12); border-color: var(--neon-red);
}

/* عنوان قسم "الصلاحيات الفرعية" — يظهر فقط إن وُجد صندوقٌ فعلياً بعد
   مجموعة الأدوار مباشرة (محدِّد الشقيق المجاور +)، فلا يظهر عنوانٌ فارغ
   لموظّفٍ بلا أي دور مفعَّل */
#users-list .user-roles-group + .perm-box::before {
    content: '🧩 الصلاحيات الفرعية بحسب الأدوار المفعّلة';
    display: block; color: #888; font-family: 'Cairo', sans-serif;
    font-size: .72rem; margin: 2px 0 6px 2px;
}

/* فاصل بصري قبل صفّ الأزرار (آخر عنصر دوماً — راجع accountantAdmin.js) */
#users-list .booking-card > div:last-child {
    margin-top: 14px; padding-top: 12px; border-top: 1px solid #262626;
}

/* ═══════════════════════════════════════════════════════════════════
 * لوحة «صلاحيات النظام» — إعادة تصميم بنيوي (v2)
 *
 * ═══ البلاغ ═══
 * «البطاقات كبيرة جداً ومزعجة جداً وغير عملية — كلش هواية خيارات وكلهن
 * ضاهرات، وباسفل البطاقة الأزرار متداخلة، ولما تضغط على الفرعيات تكبر
 * البطاقة أكثر وتخرب الشكل أكثر — هذه الواجهة بأكملها غير مريحة».
 *
 * ═══ الفكرة ═══
 * القسم فوگ (إعادة التصميم v1) حسّن هيئة الشرائح والصناديق، لكن أبقى كل
 * بطاقة "مفتوحة" دائماً — سبعة أدوار + كل صندوق صلاحيات فرعية ظاهرون معاً
 * لكل مستخدم، فالعشرة موظفين = عشرة كتل ضخمة متراصّة. الحل هنا بنيويٌ لا
 * تجميلي فقط:
 *   ١) القائمة عمودٌ واحد لا شبكة أعمدة — بطاقة تنتفخ بالتفاصيل لا "تُمدِّد"
 *      طول جاراتها (وهي بالضبط مشكلة `align-items:stretch` على شبكة CSS
 *      موثّقة أعلى هذا الملف بقسم "لماذا .booking-card بقيت بلا display:flex").
 *   ٢) كل بطاقة تعرض ترويسة مضغوطة + شارات أدوار مصغّرة فقط بشكلها الافتراضي؛
 *      تُفتح بضغطة على الترويسة (usersPanelUX.js يبدّل صنف kb-open) لتكشف
 *      الأدوار والصلاحيات الفرعية وأزرار الحفظ/الحذف.
 *   ٣) شريط بحث بالاسم/اسم الدخول — عشرات الحسابات تصير صفاً واحداً بدل
 *      شاشة تمرير طويلة.
 *
 * ═══ لماذا هذا لا يكسر شيئاً ═══
 * كل محدِّد هنا صنفٌ/وسمٌ على أبناء `.booking-card` المباشرين، لا ترقيمٌ
 * بمكان (nth-child) — فيتحمّل أي عدد من صناديق `.perm-box` تُضيفها
 * accountantAdmin.js أو أي إضافة مستقبلية بنفس النمط، بصرف النظر عن ترتيب
 * إدراجها. saveUserRoles وtogglePermBox وaccountantAdmin.js الثلاثة تقرأ
 * عناصرها بمحدِّدات صنف (querySelector/All) لا بالعرض المرئي — عنصر مخفي
 * بـ`display:none` يبقى موجوداً بالـDOM وقابلاً للقراءة تماماً كأي عنصر ظاهر،
 * فحفظ الصلاحيات وهي "مطوية" يعمل بلا أي فرق. الطيّ نفسه تبديل صنف CSS واحد
 * على `.booking-card` — بلا نقل ولا حذف ولا استنساخ لعنصر واحد.
 * ═══════════════════════════════════════════════════════════════════ */

/* القائمة: عمود واحد لا شبكة — id×id كي تفوز على قاعدة main.css المشتركة
   (`#bookings-list, #users-list, #advance-bookings-list { display:grid }`)
   بصرف النظر عن ترتيب تحميل الملفين */
#users-manage-section #users-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* شريط البحث — يُدرَج بواسطة usersPanelUX.js كشقيق ثابت لـ#users-list تحت
   #ut-access-pane (لا يُهدَم أبداً بإعادة رسم #users-list — راجع تعليق
   الوحدة نفسها) */
.kb-user-search-wrap { margin-bottom: 14px; }
.kb-user-search-wrap input {
    width: 100%; box-sizing: border-box;
    background: #111; border: 1px solid #333; color: #eee;
    padding: 11px 14px; border-radius: 8px;
    font-family: 'Cairo', sans-serif; font-size: .92rem;
}
.kb-user-search-wrap input:focus { border-color: var(--blood-bright); outline: none; } /* ١د: كان var(--neon-purple) */
.kb-user-search-wrap input::placeholder { color: #666; }

#users-manage-section #users-list .booking-card.kb-search-hidden { display: none; }

/* الترويسة قابلة للضغط — مؤشّر طيّ صغير قبل الاسم (::before فلا يدخل الـDOM
   ولا يتعارض مع شارة "نشط/موقوف" العائمة يساراً بنفس الترويسة) */
#users-manage-section #users-list .card-header {
    cursor: pointer;
    user-select: none;
}
#users-manage-section #users-list .card-header::before {
    content: '▸';
    display: inline-block;
    margin-left: 8px;
    color: var(--ash); /* ١د: كان var(--neon-purple) — مؤشّر طيّ محايد */
    font-size: .8em;
    transition: transform .18s ease;
}
#users-manage-section #users-list .booking-card.kb-open .card-header::before {
    transform: rotate(90deg);
}

/* شارات الأدوار المصغّرة — تُدرَج بواسطة usersPanelUX.js من بيانات اللقطة،
   تبقى ظاهرة مطويّاً كي يُرى دور كل حساب بلمحة بلا فتح بطاقته */
.kb-role-badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0 0; }
.kb-role-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: #161616; border: 1px solid #2a2a2a; border-radius: 6px;
    padding: 3px 7px; font-size: .82rem; line-height: 1;
}
.kb-role-badge-none { color: #666; font-family: 'Cairo', sans-serif; font-size: .72rem; padding: 3px 8px; }

/* مطويّاً (الحالة الافتراضية): كل شيء عدا الترويسة والشارات مخفيّ — عرضٌ لا حذف.
   !important لازم على صفّ الأزرار وحده: هو الوحيد بينهم يحمل `style="display:flex"`
   سطرياً بقالب userAdmin.js (`.user-roles-group`/`.perm-box`/`<p>` بلا display سطري
   إطلاقاً) — والسطري يفوز على أي قاعدة خارجية بصرف النظر عن التخصيص إلا بـ!important. */
#users-manage-section #users-list .booking-card > .user-roles-group,
#users-manage-section #users-list .booking-card > .perm-box,
#users-manage-section #users-list .booking-card > p {
    display: none;
}
#users-manage-section #users-list .booking-card > div:last-child {
    display: none !important;
}
#users-manage-section #users-list .booking-card.kb-open > .user-roles-group { display: grid; }
#users-manage-section #users-list .booking-card.kb-open > .perm-box { display: block; }
#users-manage-section #users-list .booking-card.kb-open > p { display: block; }
#users-manage-section #users-list .booking-card.kb-open > div:last-child {
    display: flex !important;
}
#users-manage-section #users-list .booking-card.kb-open > .user-roles-group {
    margin-top: 12px; padding-top: 12px; border-top: 1px dashed #262626;
}

/* الأدوار مفتوحاً: شبكة مضغوطة بدل صفٍّ يلتفّ بلا ترتيب ثابت.
   الشرائح نفسها (اللون/الحدود المستديرة عند التفعيل) من القسم v1 أعلاه —
   هنا فقط حاويتها تتحوّل من صفّ ملتفّ إلى شبكة أعمدة */
#users-manage-section #users-list .user-roles-group {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px;
}
#users-manage-section #users-list .user-roles-group::before {
    grid-column: 1 / -1;
}

/* الصلاحيات الفرعية: خيارات تتدفّق أفقياً (لا سطر لكل خيار) بحدّ أقصى
   للارتفاع — صندوق واحد بثمانية خيارات لم يعد يفرض تمريراً طويلاً للبطاقة.
   !important هنا لتجاوز `display:block` السطري في قالب userAdmin.js فقط
   على عنصر <label> — togglePermBox لا يلمس عناصر <label> إطلاقاً (يبدّل
   عرض .perm-body وحدها)، فلا تعارض مع طيّ/فتح الصندوق نفسه. */
#users-manage-section #users-list .perm-box .perm-body {
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;   /* شبكة أمان: تسمية طويلة تفيض عرضاً تُقطَع لا تُخرِج سكرولاً أفقياً */
}
#users-manage-section #users-list .perm-box label {
    display: inline-flex !important;
    align-items: flex-start;
    gap: 5px;
    background: #141414;
    border: 1px solid #242424;
    border-radius: 6px;
    padding: 5px 9px !important;
    margin: 3px 3px 0 0 !important;
    font-size: .74rem !important;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;   /* تسمية طويلة ("جرد الأموال (اليوم المحاسبي)") تلتفّ سطرين داخل الشريحة بدل أن تفيضها عرضاً */
}

/* صفّ الأزرار — يلتفّ بدل أن يتراكب مهما ضاق عرض البطاقة (هذا بالضبط
   البلاغ: "الأزرار متداخلة") */
#users-manage-section #users-list .booking-card > div:last-child {
    flex-wrap: wrap;
    gap: 8px;
}
#users-manage-section #users-list .booking-card > div:last-child > .btn-save-user {
    flex: 1 1 150px;
    width: auto;
    margin-top: 0;
    min-height: 42px;
}
#users-manage-section #users-list .booking-card > div:last-child > button:not(.btn-save-user) {
    flex: 1 1 110px;
    min-height: 42px;
    white-space: normal !important;
    text-align: center;
}
@media (max-width: 480px) {
    #users-manage-section #users-list .booking-card > div:last-child > button { flex-basis: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   نوافذ الموارد البشرية — طابع الرعب (2026-09-02)
   ───────────────────────────────────────────────────────────────
   البلاغ: «ليش اسود وابيض؟» — نوافذ الموظف/السلفة/تعديل الحجز كانت
   ألواناً مبعثرة inline (أخضر #00dc3c · أزرق --neon-blue · برتقالي)
   خارج لوحة الرعب. هنا تُلبَس رموز css/variables.css: أرضٌ سوداء
   دافئة (--ground-*) · دمٌ للحدود والتوكيد (--blood*) · نصٌّ عظميّ
   (--bone/--ash) · أرقامٌ أحادية (--font-mono).
   ⚠️ !important لأن بقيّة القيم مضبوطة inline في المصدر. المحدّدات
      الهشّة (ترويسات :first-child · تسميات nth-child) حُوِّلت إلى رموز
      inline في «اعصار (2).html» مباشرةً (2026-09-02) وحُذفت من هنا؛
      الباقي محدّدات id/class/attr متينة. الرجوع: احذف هذه الكتلة.
   ═══════════════════════════════════════════════════════════════ */
#add-staff-modal, #advance-modal, #edit-adv-modal {
    background: rgba(4, 2, 3, .92) !important;
}
#add-staff-modal > div, #advance-modal > div, #edit-adv-modal > div {
    background: linear-gradient(158deg, var(--ground-2), var(--ground-0) 72%) !important;
    border: 1px solid var(--blood-dim) !important;
    border-top: 1px solid var(--blood) !important;
    box-shadow: 0 26px 74px rgba(0, 0, 0, .92), 0 0 46px var(--blood-glow),
                inset 0 1px 0 rgba(200, 26, 26, .14) !important;
}
/* ⚠️ ترويسات نوافذ HR + خلية «المبلغ»/«سبب الخصم» صارت رموزاً inline في
   «اعصار (2).html» مباشرةً (لغة .section-title: شريط دمٍ + توهج) — لا محدّدات
   :first-child هشّة هنا بعد الآن. راجع staff-ui-redesign. */
/* الحقول — أرضٌ أعمق، حدُّ خيطٍ، نصٌّ عظميّ */
#add-staff-modal .as-inp,
#advance-modal input, #advance-modal select,
#edit-adv-modal input, #edit-adv-modal select {
    background: var(--ground-0) !important;
    border: 1px solid var(--line) !important;
    color: var(--bone) !important;
}
#add-staff-modal .as-inp::placeholder,
#advance-modal input::placeholder,
#edit-adv-modal input::placeholder { color: var(--ash-dim) !important; }
/* الأرقام والتواريخ بالخطّ الأحاديّ */
#advance-modal  input[type="number"],
#edit-adv-modal input[type="number"],
#edit-adv-modal input[type="tel"],
#edit-adv-modal input[type="date"],
#edit-adv-modal input[type="time"],
#add-staff-modal #as-salary { font-family: var(--font-mono) !important; }
/* التسميات الصغيرة — رمادٌ دافئ بدل #666 / #555 المبعثرة */
#add-staff-modal .as-lbl { color: var(--bone-dim); font-family: 'Cairo'; }
#edit-adv-modal > div div[style*="#666"] { color: var(--ash) !important; }
/* الفعل الأساسي — دمٌ لا نيون أخضر/أزرق */
#add-staff-modal button[onclick="saveNewStaff()"],
#advance-modal  #adv-modal-save-btn,
#edit-adv-modal button[onclick="saveEditAdvance()"] {
    background: var(--blood-dim) !important;
    border: 1px solid var(--blood) !important;
    color: var(--blood-ink) !important;
    transition: background var(--kb-dur-fast) var(--kb-ease-move),
                color var(--kb-dur-fast) var(--kb-ease-move);
}
#add-staff-modal button[onclick="saveNewStaff()"]:hover,
#advance-modal  #adv-modal-save-btn:hover,
#edit-adv-modal button[onclick="saveEditAdvance()"]:hover {
    background: var(--blood) !important;
    color: var(--bone) !important;
    box-shadow: 0 0 18px var(--blood-glow);
}
/* الإلغاء — شبحيّ */
#add-staff-modal button[onclick="closeAddStaff()"],
#advance-modal  button[onclick="closeAdvModal()"],
#edit-adv-modal button[onclick="closeEditAdvance()"] {
    background: transparent !important;
    border: 1px solid var(--line) !important;
    color: var(--ash) !important;
}
/* مبدّل «يملك حساب دخول» — كان بنفسجياً كاملاً */
#add-staff-modal .as-login-toggle {
    background: rgba(74, 13, 13, .14) !important;
    border: 1px solid var(--blood-dim) !important;
}
#add-staff-modal .as-login-toggle input { accent-color: var(--blood) !important; }
#add-staff-modal .as-login-toggle span  { color: var(--bone-dim) !important; }
#add-staff-modal .as-login-toggle small { color: var(--ash-dim) !important; }

/* ═══════════════════════════════════════════════════════════════
   بقيّة نوافذ النظام + زرّ «إضافة موظف» — طابع الرعب (2026-09-02)
   ───────────────────────────────────────────────────────────────
   امتداد للكتلة أعلاه. القائمة مأخوذة حرفياً من كتلة modalRise في
   css/layout.css. هنا **هيكل الصندوق واللون فقط** — لا لمس بنية ولا
   نصّ ولا معرّفات. الترويسات المخصّصة تُعالَج لكلٍّ على حدة (نوافذ HR
   + export-choice) لأن بنيتها الداخلية تختلف.
   الرجوع: احذف هذه الكتلة والكتلة أعلاها. صفر أثر على المنطق.
   ═══════════════════════════════════════════════════════════════ */

/* هيكل الصندوق الموحّد — أرضٌ سوداء دافئة · حدُّ دمٍ خافت · حافةٌ دمويّة علوية · وهج */
#inv-modal-overlay > div, #room-edit-modal > div, #recipient-picker > div,
#naked-tools-modal > div, #export-choice-modal > div, #edit-log-modal > div,
#cbs-modal > div, #scare-msg-modal > div, #newbranch-modal > div,
#nb-checklist-modal > div, #recipient-overlay > div {
    background: linear-gradient(158deg, var(--ground-2), var(--ground-0) 74%) !important;
    border: 1px solid var(--blood-dim) !important;
    border-top: 1px solid var(--blood) !important;
    box-shadow: 0 26px 74px rgba(0, 0, 0, .92), 0 0 44px var(--blood-glow),
                inset 0 1px 0 rgba(200, 26, 26, .12) !important;
}
#inv-modal-overlay, #room-edit-modal, #recipient-picker, #naked-tools-modal,
#export-choice-modal, #edit-log-modal, #cbs-modal, #scare-msg-modal,
#newbranch-modal, #nb-checklist-modal, #recipient-overlay {
    background: rgba(4, 2, 3, .9) !important;
}

/* نافذة اختيار صيغة التصدير — يفتحها زرّ «تصدير» في تقرير المحاسب.
   ترويستها صارت رمزاً inline في المصدر؛ يبقى هنا لونُ الأزرار فقط. */
#export-choice-modal button[onclick^="runExportChoice"] {
    background: var(--blood-dim) !important;
    border: 1px solid var(--blood) !important;
    color: var(--blood-ink) !important;
    transition: background var(--kb-dur-fast) var(--kb-ease-move);
}
#export-choice-modal button[onclick^="runExportChoice"]:hover {
    background: var(--blood) !important;
    color: var(--bone) !important;
}
#export-choice-modal button[onclick*="display='none'"] {
    background: transparent !important;
    border: 1px solid var(--line) !important;
    color: var(--ash) !important;
}

/* زرّ «إضافة موظف» — كان تدرّجاً أخضر نيون وسط شاشةٍ دمويّة (css/about.css) */
.staff-btn-add {
    background: linear-gradient(150deg, rgba(138, 0, 0, .30), rgba(10, 4, 5, .94)) !important;
    border-color: var(--blood) !important;
    color: var(--blood-ink) !important;
}
.staff-btn-add:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, .6), 0 0 22px var(--blood-glow) !important;
}