/* settings-drawer-widgets.css -- درج الإعدادات، معاينة الصور، شارات الباقات، التبويبات، المجلدات، التقدم، التذييل، التحميل. */
/* ---------------------------- درج الإعدادات الجانبي (Settings Drawer) ---------------------------- */
/* إصلاح (مصدر: better-layout skill): كانت قاعدة كاملة مكررة مرتين (RTL/LTR)
   بفرق سطر وحيد فعلياً (left مقابل right) -- inset-inline-end خاصية CSS
   منطقية تتحول تلقائياً: يمين الشاشة فعلياً بالـ LTR، يسار الشاشة فعلياً
   بالـ RTL (بالضبط نفس القيمتين المقصودتين بالكود القديم)، فتغني عن تكرار
   كل الخصائص المشتركة (خلفية، حدود، ظل...) مرتين. اتجاه transform نفسه ما
   ينحل بخاصية منطقية (فيزيائي دايماً بغض النظر عن الاتجاه) -- بدل ما نكرر
   قاعدة .settings-drawer كاملة لكل اتجاه بس عشان هذا السطر الوحيد (وهذا
   بالضبط اللي كان يسبب مشكلة أولى: html[dir=rtl] .settings-drawer صارت
   أقوى تخصصاً (specificity) من .settings-drawer.open فيفشل الفتح تماماً)،
   نمرر القيمة عبر متغير CSS يضبطه الاتجاه، والقاعدة الأساسية تقرأه فقط --
   .open تبقى أعلى تخصصاً من .settings-drawer الأساسية بشكل طبيعي */
html[dir="rtl"] { --settings-drawer-hidden-x: -110%; }
html[dir="ltr"] { --settings-drawer-hidden-x: 110%; }

.settings-drawer {
    position: fixed;
    top: calc(15px + env(safe-area-inset-top));
    bottom: calc(15px + env(safe-area-inset-bottom));
    inset-inline-end: calc(15px + env(safe-area-inset-right));
    width: 280px;
    height: calc(100% - 30px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 1001;
    /* إصلاح: كان يتحرك بتحريك left/right (خاصية تخطيط تحتاج --transition
       القديمة بصيغة "all") -- بعد ما صارت --transition تسمّي خصائصها
       بالتحديد (بدون left/right)، صار الدرج يقفز فجأة بدل ما ينزلق. الحل
       الصحيح أصلاً حسب معايير الحركة: transform (GPU، أداء أفضل، قابل للمقاطعة) */
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 400ms var(--ease-drawer);
    transform: translateX(var(--settings-drawer-hidden-x));
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .settings-drawer {
    background: rgba(15, 23, 42, 0.80) !important;
    border: 1.5px solid var(--border-color);
}

.settings-drawer.open { transform: translateX(0); }

.drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; border-bottom: 1.5px solid var(--border-color); padding-bottom: 10px; flex-shrink: 0; }
/* بدون flex:1 + overflow-y:auto هنا، محتوى الدرج (كل الإعدادات) كان يفيض
   بصمت خارج ارتفاع الدرج الثابت بدون أي سكرول، فتختفي الإعدادات السفلية
   تماماً عن المستخدم بدل إمكانية التمرير للوصول لها */
.drawer-body { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; overscroll-behavior: contain; }
.setting-item { margin-bottom: 16px; }
.setting-item label { font-size: 12px; font-weight: 700; margin-bottom: 6px; display: block; color: var(--text-muted); }
.setting-item button { width: 100% !important; margin: 0 !important; }
.setting-item button + button { margin-top: 8px !important; }

/* منتقي حجم الخط (صغير/متوسط/كبير) بدرج الإعدادات */
/* إصلاح (بلاغ حي: "الأزرار ذي يبيلها وزن" ثم "خلها نفس حجمها اول"): محاولة
   أولى استخدمت flex:1 لتوحيد عرض الأزرار الثلاثة (صغير/وسط/كبير) بالتساوي،
   لكن هذا بالضبط سبب مشكلة جديدة: "صغير" (أطول كلمة بالثلاث) صار عرضها
   المحسوب أضيق من اللازم فالنص التف لسطرين وصار الزر أطول ارتفاعاً من
   إخوته -- المستخدم لاحظ هذا التفاوت بالارتفاع حياً. الحل: رجعنا لعرض كل
   زر حسب محتواه الطبيعي (بدون flex:1) -- كل الأزرار بسطر واحد، نفس الارتفاع
   تلقائياً. أبقينا فقط الظل الخفيف على الزر النشط (تحسين حقيقي، ما سبب أي
   مشكلة) بدل تعبئة لون مسطّحة بلا عمق */
.font-size-picker {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.05);
    padding: 6px 10px;
    border-radius: 10px;
    border: 1.5px solid var(--border-color);
    margin-top: 6px;
}

/* ارتفاع ثابت صريح (34px) -- هذي القيمة تحديداً تأكّدت صحيحة عبر قياس
   DevTools فعلي من متصفح المستخدم (74.9333 × 34 لزر "صغير")، فرجعناها بعد
   تجربة align-items:stretch اللي طلعت أسوأ (بدون ارتفاع صريح، الزر يعتمد
   على line-height:1 بلا حشوة عمودية فيصير صغير جداً وغير متّسق) */
.font-dot-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-weight: 700;
    cursor: pointer;
    padding: 0 10px;
    height: 34px;
    line-height: 1;
    border-radius: 6px;
    transition: var(--transition);
    white-space: nowrap;
}

/* إصلاح (بلاغ حي، جولة ثانية): التلوين الشفاف الخفيف جداً (0.12) اللي حطيته
   أول مرة كان يبان "خفيف الوزن" جداً مقابل التعبئة الصلبة الكاملة بالزر
   النشط جنبه -- فرق التباين الكبير بين تعبئة شبه شفافة وتعبئة صلبة كاملة
   يخلي العين تحس إن الصندوقين مختلفين بصرياً (وهم بصري شائع: شكل فاتح
   خفيف على خلفية غامقة يبان "متفاوت" عن شكل صلب رغم تطابق الأبعاد الفعلي
   100% -- تأكدت بالقياس البرمجي). الحل: رفع الشفافية لنسبة أعلى (0.26)
   تدي "وزناً" بصرياً أقرب للزر النشط، مع خط حد خفيف يثبّت حواف الصندوق --
   يبقى واضح إنه مو الزر المختار (لسا أخف من التعبئة الصلبة) بس بتوازن أقرب */
@media (hover: hover) and (pointer: fine) {
    .font-dot-btn:hover {
        color: var(--primary);
        background: rgba(var(--primary-rgb), 0.26);
        box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), 0.3);
    }
}

.font-dot-btn.active {
    background: var(--primary-solid);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.4);
}

/* ---------------------------- معاينة الصور قبل الرفع ---------------------------- */
/* كرت مصغّر لكل صورة بقائمة انتظار الرفع (renderFilesPreviewGrid بـ main.js) */
.file-preview-card {
    position: relative;
    width: 95px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.preview-del-btn {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    left: auto !important;
    background: var(--danger) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) !important;
    z-index: 10 !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
}

@media (hover: hover) and (pointer: fine) {
    .preview-del-btn:hover {
        background: #dc2626 !important;
    }
}
.preview-del-btn:active { transform: scale(0.94) !important; }

/* ---------------------------- شارات الباقات (Plan Badges) ---------------------------- */
/* تُستخدم بجدول المستخدمين بلوحة الأدمن (renderAdminUsersTable بـ main.js) */
.badge-plan-free { background: rgba(148, 163, 184, 0.2); color: var(--text-muted); padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; border: 1px solid var(--border-color); }
.badge-plan-pro { background: rgba(37, 99, 235, 0.15); color: var(--primary); padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; border: 1px solid var(--primary); }
.badge-plan-ultimate { background: rgba(245, 158, 11, 0.2); color: var(--warning); padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; border: 1px solid var(--warning); }

/* كرت باقة اشتراك (نافذة عرض الباقات) */
.plan-card {
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    transition: var(--transition);
}

@media (hover: hover) and (pointer: fine) {
    .plan-card:hover {
        border-color: var(--primary);
    }
}

/* ---------------------------- تبويبات لوحة التحكم ---------------------------- */
/* switchTab() بـ main.js يبدّل كلاس "active" بين هذي التبويبات وأزرارها */
/* شريط التبويبات صار ثابتاً وزجاجياً شفافاً (طلب صاحب المشروع): يبقى
   بأعلى الشاشة أثناء التمرير بكل تبويبات لوحة التحكم، بخلفية شبه شفافة
   وضبابية بدل خلفية الصفحة العادية مباشرة */
/* نفس عطل sticky + backdrop-filter + border-radius على عنصر وحد (شوف
   .navbar فوق) -- فصلناها هنا وقائياً بنفس الطريقة قبل ما يصير نفس خط
   الانكسار: .tabs-nav غلاف الالتصاق فقط، .tabs-nav-inner يحمل المظهر
   الزجاجي وهو نفسه ليس sticky */
/* إصلاح تعارض شريطين لاصقين (بلاغ صاحب المشروع 2026-08-31: تجربة الجوال
   "دمار"): .navbar و.tabs-nav كانا كلاهما position:sticky بلا أي تنسيق top
   بينهما فيتصادمان بصرياً. أول إصلاح جرّب تنسيق top بمتغيّر --navbar-h
   الديناميكي (شوف updateNavbarHeightVar() بـmain.js) -- لكن بلاغ حي لاحق
   بنفس اليوم أثبت إن المشكلة أعمق من مجرد تصادم: شريط تبويبات لاصق دائماً
   بأعلى الشاشة (جوال أو حاسوب) يأكل مساحة رأسية دائمة طوال التمرير (قرابة
   ربع الشاشة بالجوال)، وهذا غير مرغوب أصلاً بغض النظر عن حل التصادم. الحل
   النهائي (طلب صريح: "الشريط حق التبويبات سواء بالجوال او باللابتوب مابيه
   يتبع الشاشة، ابيه ثابت بمكانه"): إلغاء sticky نهائياً لكل الشاشات --
   الشريط يبقى بموضعه الطبيعي بتدفق الصفحة ويمرّ مع باقي المحتوى. */
.tabs-nav { margin: 0 0 20px; }
.tabs-nav-inner { position: relative; display: flex; gap: 8px; padding: 10px 14px 8px; border-radius: 16px; border-bottom: 1px solid color-mix(in srgb, var(--border-color) 45%, transparent); flex-wrap: wrap; background: color-mix(in srgb, var(--bg-color) 72%, transparent); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 8px 20px -18px rgba(15, 23, 42, 0.4); }
/* إصلاح (بلاغ حي من المستخدم: "التظليل لما أشير أو أضغط على التبويب مو
   حلو"): كانت زوايا مستطيلة حادة (border-radius: 0) + تلوين hover/active
   بلون الوضع الفاتح مكتوب صراحة (37,99,235) حتى بالوضع الداكن (يفترض
   يستخدم --primary-rgb المتغيّر حسب الثيم) + تأثير الضغط العام
   (button:active { scale(0.97) }) يبان غير منسّق على تبويب عريض مسطّح.
   الحل: زوايا علوية ناعمة (شكل "تبويب" حديث)، تلوين hover/active يتبع
   لون الثيم الفعلي، وتعطيل تأثير الـscale العام لصالح تلوين أوضح عند الضغط */
.tab-btn {
    background: none;
    color: var(--text-muted);
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 10px 10px 0 0;
    padding: 10px 18px;
    font-weight: 400;
    cursor: pointer;
    transition: var(--transition);
}
@media (hover: hover) and (pointer: fine) { .tab-btn:hover { color: var(--primary); background: rgba(var(--primary-rgb), 0.06); } }
.tab-btn:active { transform: none; background: rgba(var(--primary-rgb), 0.14); }
.tab-btn.active {
    color: var(--primary);
    border-bottom-color: transparent;
    background: rgba(var(--primary-rgb), 0.1);
}

/* مؤشر تبويب متحرك (بلاغ حي: "أبيه يمشي وينتقل، حوافه دائرية مو خط ساده")
   -- شريط واحد يتحرك بسلاسة بين التبويبات بدل حد سفلي ثابت لكل واحد على
   حدة. موضعه وعرضه يُضبطان من updateTabIndicator() بـmain.js حسب التبويب
   النشط فعلياً، فيبقى متزامناً حتى لو تغيّر عرض النص (عربي/إنجليزي) */
.tab-indicator {
    position: absolute; left: 0; bottom: 2px; height: 3px; border-radius: 999px;
    background: var(--primary);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .tab-indicator { transition: none !important; } }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ---------------------------- شبكة المجلدات ---------------------------- */
.folders-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.folder-card { background: color-mix(in srgb, var(--card-bg) 88%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1.5px solid var(--border-color); border-radius: 18px; padding: 22px; transition: var(--transition); cursor: pointer; position: relative; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--shadow); }
@media (hover: hover) and (pointer: fine) { .folder-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 18px 34px -16px rgba(var(--primary-rgb), 0.4); } }
.folder-card:active { transform: scale(0.98); }
.folder-card h4 { color: var(--primary); font-size: 17px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; border-bottom: 1.5px solid var(--border-color); padding-bottom: 8px; font-weight: 800; }

.folder-card-stats { display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 700; }
.folder-stat-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
/* إصلاح: overflow:visible + text-overflow:clip كانا يخليان النص الطويل
   يفيض فعلياً خارج الصف بدل ما يُقص بمؤشر "…" -- min-width:0 لازم على
   العنصر المرن (flex child) حتى القص يشتغل أصلاً */
.folder-stat-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---------------------------- أشرطة التقدم (Progress Bars) ---------------------------- */
/* تُستخدم لعرض نسبة استخدام الباقة، ونسبة CPU/RAM بلوحة الأدمن */
.progress-bar-bg {
    width: 100%;
    height: 10px;
    background: rgba(0, 0, 0, 0.08) !important;
    border-radius: 6px;
    overflow: hidden;
    border: 1.5px solid var(--border-color) !important;
}

[data-theme="dark"] .progress-bar-bg {
    background: rgba(255, 255, 255, 0.1) !important;
}

#adminTab .stat-card div[style*="height: 12px"] {
    border: 1.5px solid var(--border-color) !important;
}

.progress-bar-fill { width: 0%; height: 100%; background: var(--primary); transition: width 0.3s ease; }

/* ---------------------------- روابط التواصل بالتذييل ---------------------------- */
.social-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1.5px solid var(--border-color); background: var(--card-bg); color: var(--text-main); text-decoration: none; font-size: 12px; font-weight: 700; transition: var(--transition); }
@media (hover: hover) and (pointer: fine) { .social-btn:hover { border-color: var(--primary); color: var(--primary); } }
.social-btn:active { transform: scale(0.96); }

footer { background-color: var(--card-bg); border-top: 1.5px solid var(--border-color); padding: 30px 5% 15px; margin-top: auto; font-size: 13px; color: var(--text-muted); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 25px; margin-bottom: 20px; }
/* اسم النظام بعمود "عن نظام MyBills" بالفوتر يبقى خفيف وصغير عمداً (بعكس
   الشعار بالهيدر/شاشة التحميل اللي يبرز بوزن 700) -- طلب صريح: الفوتر
   مكانه هادئ، مو واجهة العلامة التجارية الرئيسية */
.footer-col h4 { font-weight: 400; font-size: 15px; margin-bottom: 6px; color: var(--text-main); }
.footer-bottom { text-align: center; border-top: 1px solid var(--border-color); padding-top: 15px; font-size: 12px; font-weight: 400; }
.footer-version-tag { display: block; margin-top: 4px; font-size: 10px; font-weight: 400; opacity: 0.55; }
.footer-legal-links a { color: var(--text-muted); text-decoration: underline; }
@media (hover: hover) and (pointer: fine) { .footer-legal-links a:hover { color: var(--primary); } }

/* ---------------------------- شاشة التحميل والإشعارات المؤقتة ---------------------------- */
.loader-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 50vh; }
.spinner { width: 45px; height: 45px; border: 4px solid var(--border-color); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 15px; }
@keyframes spin { to { transform: rotate(360deg); } }


/* طلب صاحب المشروع صراحة: استبدال الحلقة الدوّارة بمؤثر "Banter Loader"
   (تسع مربعات تتبادل الأماكن) -- كود CSS/HTML أعطانيه مباشرة من uiverse.io،
   مطبَّق هنا بالحرف مع تعديل بسيط بالموضع فقط (relative + margin:auto
   بدل absolute+transform اللي كانت مصمَّمة أصلاً لتوسيط مطلق فوق الشاشة
   كاملة -- هنا العنصر أصلاً داخل حاوية ممركزة بالفعل) */
.banter-loader { position: relative; width: 72px; height: 72px; margin: 0 auto; }
.banter-loader__box { float: left; position: relative; width: 20px; height: 20px; margin-inline-end: 6px; }
.banter-loader__box:before {
    content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    background: var(--primary); border-radius: 50%;
}
/* بشاشة الافتتاح الخلفية نفسها متدرّج بلون العلامة، فالنقاط تبقى بيضاء
   هناك تحديداً عشان تتباين بوضوح فوقها */
.splash-spinner .banter-loader__box:before { background: #fff; }
.banter-loader__box:nth-child(3n) { margin-inline-end: 0; margin-bottom: 6px; }
.banter-loader__box:nth-child(1):before, .banter-loader__box:nth-child(4):before { margin-inline-start: 26px; }
.banter-loader__box:nth-child(3):before { margin-top: 52px; }
.banter-loader__box:last-child { margin-bottom: 0; }

@keyframes moveBox-1 { 9.0909090909% { transform: translate(-26px, 0); } 18.1818181818% { transform: translate(0px, 0); } 27.2727272727% { transform: translate(0px, 0); } 36.3636363636% { transform: translate(26px, 0); } 45.4545454545% { transform: translate(26px, 26px); } 54.5454545455% { transform: translate(26px, 26px); } 63.6363636364% { transform: translate(26px, 26px); } 72.7272727273% { transform: translate(26px, 0px); } 81.8181818182% { transform: translate(0px, 0px); } 90.9090909091% { transform: translate(-26px, 0px); } 100% { transform: translate(0px, 0px); } }
.banter-loader__box:nth-child(1) { animation: moveBox-1 4s infinite; }
@keyframes moveBox-2 { 9.0909090909% { transform: translate(0, 0); } 18.1818181818% { transform: translate(26px, 0); } 27.2727272727% { transform: translate(0px, 0); } 36.3636363636% { transform: translate(26px, 0); } 45.4545454545% { transform: translate(26px, 26px); } 54.5454545455% { transform: translate(26px, 26px); } 63.6363636364% { transform: translate(26px, 26px); } 72.7272727273% { transform: translate(26px, 26px); } 81.8181818182% { transform: translate(0px, 26px); } 90.9090909091% { transform: translate(0px, 26px); } 100% { transform: translate(0px, 0px); } }
.banter-loader__box:nth-child(2) { animation: moveBox-2 4s infinite; }
@keyframes moveBox-3 { 9.0909090909% { transform: translate(-26px, 0); } 18.1818181818% { transform: translate(-26px, 0); } 27.2727272727% { transform: translate(0px, 0); } 36.3636363636% { transform: translate(-26px, 0); } 45.4545454545% { transform: translate(-26px, 0); } 54.5454545455% { transform: translate(-26px, 0); } 63.6363636364% { transform: translate(-26px, 0); } 72.7272727273% { transform: translate(-26px, 0); } 81.8181818182% { transform: translate(-26px, -26px); } 90.9090909091% { transform: translate(0px, -26px); } 100% { transform: translate(0px, 0px); } }
.banter-loader__box:nth-child(3) { animation: moveBox-3 4s infinite; }
@keyframes moveBox-4 { 9.0909090909% { transform: translate(-26px, 0); } 18.1818181818% { transform: translate(-26px, 0); } 27.2727272727% { transform: translate(-26px, -26px); } 36.3636363636% { transform: translate(0px, -26px); } 45.4545454545% { transform: translate(0px, 0px); } 54.5454545455% { transform: translate(0px, -26px); } 63.6363636364% { transform: translate(0px, -26px); } 72.7272727273% { transform: translate(0px, -26px); } 81.8181818182% { transform: translate(-26px, -26px); } 90.9090909091% { transform: translate(-26px, 0px); } 100% { transform: translate(0px, 0px); } }
.banter-loader__box:nth-child(4) { animation: moveBox-4 4s infinite; }
@keyframes moveBox-5 { 9.0909090909% { transform: translate(0, 0); } 18.1818181818% { transform: translate(0, 0); } 27.2727272727% { transform: translate(0, 0); } 36.3636363636% { transform: translate(26px, 0); } 45.4545454545% { transform: translate(26px, 0); } 54.5454545455% { transform: translate(26px, 0); } 63.6363636364% { transform: translate(26px, 0); } 72.7272727273% { transform: translate(26px, 0); } 81.8181818182% { transform: translate(26px, -26px); } 90.9090909091% { transform: translate(0px, -26px); } 100% { transform: translate(0px, 0px); } }
.banter-loader__box:nth-child(5) { animation: moveBox-5 4s infinite; }
@keyframes moveBox-6 { 9.0909090909% { transform: translate(0, 0); } 18.1818181818% { transform: translate(-26px, 0); } 27.2727272727% { transform: translate(-26px, 0); } 36.3636363636% { transform: translate(0px, 0); } 45.4545454545% { transform: translate(0px, 0); } 54.5454545455% { transform: translate(0px, 0); } 63.6363636364% { transform: translate(0px, 0); } 72.7272727273% { transform: translate(0px, 26px); } 81.8181818182% { transform: translate(-26px, 26px); } 90.9090909091% { transform: translate(-26px, 0px); } 100% { transform: translate(0px, 0px); } }
.banter-loader__box:nth-child(6) { animation: moveBox-6 4s infinite; }
@keyframes moveBox-7 { 9.0909090909% { transform: translate(26px, 0); } 18.1818181818% { transform: translate(26px, 0); } 27.2727272727% { transform: translate(26px, 0); } 36.3636363636% { transform: translate(0px, 0); } 45.4545454545% { transform: translate(0px, -26px); } 54.5454545455% { transform: translate(26px, -26px); } 63.6363636364% { transform: translate(0px, -26px); } 72.7272727273% { transform: translate(0px, -26px); } 81.8181818182% { transform: translate(0px, 0px); } 90.9090909091% { transform: translate(26px, 0px); } 100% { transform: translate(0px, 0px); } }
.banter-loader__box:nth-child(7) { animation: moveBox-7 4s infinite; }
@keyframes moveBox-8 { 9.0909090909% { transform: translate(0, 0); } 18.1818181818% { transform: translate(-26px, 0); } 27.2727272727% { transform: translate(-26px, -26px); } 36.3636363636% { transform: translate(0px, -26px); } 45.4545454545% { transform: translate(0px, -26px); } 54.5454545455% { transform: translate(0px, -26px); } 63.6363636364% { transform: translate(0px, -26px); } 72.7272727273% { transform: translate(0px, -26px); } 81.8181818182% { transform: translate(26px, -26px); } 90.9090909091% { transform: translate(26px, 0px); } 100% { transform: translate(0px, 0px); } }
.banter-loader__box:nth-child(8) { animation: moveBox-8 4s infinite; }
@keyframes moveBox-9 { 9.0909090909% { transform: translate(-26px, 0); } 18.1818181818% { transform: translate(-26px, 0); } 27.2727272727% { transform: translate(0px, 0); } 36.3636363636% { transform: translate(-26px, 0); } 45.4545454545% { transform: translate(0px, 0); } 54.5454545455% { transform: translate(0px, 0); } 63.6363636364% { transform: translate(-26px, 0); } 72.7272727273% { transform: translate(-26px, 0); } 81.8181818182% { transform: translate(-52px, 0); } 90.9090909091% { transform: translate(-26px, 0); } 100% { transform: translate(0px, 0); } }
.banter-loader__box:nth-child(9) { animation: moveBox-9 4s infinite; }
@media (prefers-reduced-motion: reduce) {
    .banter-loader__box { animation: none !important; }
}

/* جداول لوحة الأدمن تصير قابلة للتمرير الرأسي بحد أقصى ارتفاع، مع تثبيت
   صف العناوين (sticky) بأعلى الجدول أثناء التمرير */
#adminTab div:has(> table),
#adminTab .table-responsive {
    max-height: 400px;
    overflow-y: auto;
    border-radius: 8px;
}

#adminTab table { width: 100%; }

#adminTab table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--primary-solid);
}

/* ---------------------------- الاستجابة للشاشات الصغيرة (Mobile) ---------------------------- */