/* navbar-buttons-admin-tables.css -- الشريط العلوي، الأزرار والمدخلات، جداول لوحة الأدمن. */
/* ---------------------------- الشريط العلوي (Navbar) ---------------------------- */
/* sticky بدل الوضع الطبيعي: يبقى ظاهر أعلى الشاشة دايماً أثناء التمرير
   لأسفل، عشان زر تبديل اللغة وزر الإعدادات يبقون بمتناول المستخدم دايماً.
   كلاس .scrolled يُضاف عبر main.js بعد النزول أكتر من 50px (شوف مستمع
   scroll) ويصغّر الشعار والحشوة بـ transition ناعم بدل قفزة مفاجئة. */
/* شريط علوي عائم على شكل كبسولة (Floating Pill Nav، طلب صاحب المشروع
   استلهاماً من مواقع شركات كبرى مثل Moyasar) بدل شريط ملاصق للحواف --
   هامش من كل الجهات + زوايا دائرية كاملة + ظل واضح يعطي إحساس "يطفو"
   فوق الصفحة */
/* بلاغ حي متكرر: انكسار لوني عند الزاوية المدوّرة (خصوصاً السفلية) ما
   انحل حتى مع إجبار طبقة Compositing -- عطل معروف بالمتصفحات (Chromium
   خصوصاً): وضع backdrop-filter + border-radius على نفس العنصر اللي عليه
   position:sticky تحديداً هو المشكلة، بغض النظر عن أي محاولة إصلاح ثانية
   على نفس العنصر. الحل الجذري: فصل العنصرين -- .navbar يبقى غلاف
   الالتصاق فقط (بلا أي تصميم مرئي)، و.navbar-inner بداخله يحمل كل
   المظهر الزجاجي (الحدود الدائرية، الضبابية، الظل) وهو نفسه مو sticky،
   فيتفادى المتصفح مسار العطل تماماً */
.navbar { position: sticky; top: 14px; z-index: 100; margin: 14px 16px 0; }
.navbar-inner { display: flex; justify-content: space-between; align-items: center; width: auto; max-width: 100%; box-sizing: border-box; padding: 10px 26px; border-radius: 999px; background-color: color-mix(in srgb, var(--card-bg) 65%, transparent); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 32px -10px rgba(15, 23, 42, 0.35); border: 1px solid color-mix(in srgb, var(--border-color) 35%, transparent); flex-wrap: wrap; gap: 12px; transition: padding 0.25s ease, box-shadow 0.25s ease, border-radius 0.25s ease; }
/* شفافية تُلغى لمن يفضّل تقليل الشفافية (المصدر: apple-design skill، مبدأ
   "Reduced Motion & Accessibility" -- prefers-reduced-transparency): خلفية
   صلبة كاملة بدل blur، بدون فقدان أي وظيفة */
@media (prefers-reduced-transparency: reduce) {
    .navbar-inner, .settings-drawer {
        background: var(--card-bg) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}
.navbar.scrolled { margin-top: 8px; }
.navbar.scrolled .navbar-inner { padding: 6px 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 22px -10px rgba(15, 23, 42, 0.3); }
.logo-container { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 700; color: var(--primary); transition: font-size 0.25s ease; }
.navbar.scrolled .logo-container { font-size: 18px; }
.logo-img-wrap { position: relative; display: inline-flex; }
/* المرحلة 143: الشعار الجديد (MyBillslogo.png) عبارة عن كلمة "MyBills"
   مصمّمة بنفسها بخلفية شفافة (بلا مربع أبيض حولها كالشعار القديم)، لذا
   أزلنا الخلفية/الحشوة/الإطار اللي كانت تحيطه بمربع أيقونة -- تركناه
   يطفو حراً بنفس الارتفاع تماماً (72px / 46px بحالة scrolled) عشان
   الهيدر ما يكبر ولا يتغيّر، فقط يتّسع أفقياً حسب نسبة الشعار الجديد. */
.logo-container img { height: 72px; width: auto; object-fit: contain; image-rendering: -webkit-optimize-contrast; transition: height 0.25s ease; }
.navbar.scrolled .logo-container img { height: 46px; }
.brand-name-wrap { position: relative; display: inline-flex; align-items: center; }
.brand-name { font-size: 26px; font-weight: 700; letter-spacing: 0.2px; color: var(--text-main); transition: font-size 0.25s ease; }
.navbar.scrolled .brand-name { font-size: 18px; }
[data-theme="dark"] .brand-name { color: #ffffff; }
/* المرحلة 144: اسم البراند صار كلمة واحدة فقط حسب اللغة الحالية
   (فواتيري بالعربي، My Bills بالإنجليزي -- شوف brand_name_short بدل
   الجمع الثابت "My Bills | فواتيري" اللي كان يظهر دايماً بغض النظر عن
   اللغة). بما إن brand-name-wrap صار يحتوي كلمة واحدة بس، شارة V3 ترجع
   لنص مسطّح بدون خلفية (بدون pill هذي المرة)، لكن بموضع absolute واضح
   فوق يمين الكلمة تحديداً (بدل التمركز الغامض فوق منتصف كلمتين كان
   بالتصميم الأقدم) -- ما فيه لبس الآن لأنها فوق كلمة وحيدة دائماً. */
/* المرحلة 148: كانت 12px/10px -- المستخدم طلب تكبيرها بوضوح (مثال:
   "لو هي 14 بكسل خلها 20"). كذلك شاشة التحميل (splash) كان عندها شارة
   V3 منفصلة تماماً بستايل inline مختلف (top:-8px; right:-20px;
   font-size:13px) بدل استخدام نفس هذا الكلاس -- فموضعها ما يطابق شارة
   الهيدر أبداً رغم إن نص "فواتيري" بالحالتين نفس الحجم (40px). وحّدنا
   شاشة التحميل لتستخدم نفس .version-badge بدل ستايل منفصل، فأي تعديل
   هنا ينعكس تلقائياً بالمكانين معاً بدل تكرار الضبط بمكانين مختلفين. */
.version-badge { position: absolute; top: -13px; right: -6px; font-size: 14px; font-weight: 800; color: var(--primary); background: transparent; padding: 0; line-height: 1; white-space: nowrap; transition: font-size 0.25s ease; }
.navbar.scrolled .version-badge { font-size: 11px; top: -9px; }
[data-theme="dark"] .version-badge { color: #60a5fa; }
/* شاشة التحميل بخلفية زرقاء داكنة دائماً (splash-screen)، بعكس الهيدر
   اللي يتغيّر لونه حسب الوضع الفاتح/الداكن -- الشارة هناك تبقى بيضاء
   شبه شفافة دائماً بدل اعتمادها على متغيرات الثيم العادية. */
.splash-logo .version-badge { color: #ffffff; opacity: 0.85; }

.nav-actions { display: flex; gap: 8px; align-items: center; }
/* إصلاح (بلاغ حي: "اللون مختلف بزاوية الإشعارات عن زاوية الشعار") --
   أزرار icon-btn كانت ترث بالخطأ توهّج الظل الأزرق من قاعدة button{} العامة
   (مصمَّم أصلاً للأزرار الصلبة) رغم إنها شفافة بالمظهر -- هنا نصفّر الظل
   صراحة ونعطيها مظهرها الزجاجي الخاص المتّسق مع باقي الكبسولة العلوية */
.icon-btn { background: color-mix(in srgb, var(--card-bg) 35%, transparent); box-shadow: none; border: 1.5px solid var(--border-color); padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 400; cursor: pointer; color: var(--text-main); transition: var(--transition); display: inline-flex; align-items: center; gap: 6px; }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { border-color: var(--primary); background-color: rgba(37, 99, 235, 0.08); transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(var(--primary-rgb), 0.35); } }
.icon-btn:active { box-shadow: none; }
.icon-btn:active { transform: scale(0.97); }

/* زر إجراء أيقونة موحّد (تعديل/حذف/تصدير) -- يُستخدم بكرت المجلد، دفتر
   المتاجر، مراكز التكلفة، سجلات العُهد، دفتر الموردين، وإقرارات ضريبة القيمة
   المضافة. إصلاح (طلب المستخدم صراحة): كانت 4 جداول إدارية (متاجر/مراكز
   تكلفة/عُهد/موردين) تكرّر بالضبط نفس نمط تعديل/حذف بخلفية صلبة مربّعة عبر
   inline style يتجاوز كلاس .icon-btn الشفاف الأصلي بكل مكان -- بينما نفس
   الزرين بجدول إقرارات الضريبة (الشكل المرجعي اللي فضّله المستخدم) شفافين
   بحدود فقط بدون تعبئة صلبة. هذا الكلاس الآن هو المصدر الموحّد الوحيد:
   شفاف افتراضياً، حجم أكبر (40px بدل 34px)، تعبئة لونية خفيفة فقط عند
   hover بدل خلفية صلبة دائمة -- ولون الحدود/الأيقونة هو الحامل للمعنى
   (أحمر=حذف، أزرق=تعديل، رمادي=إجراء محايد كالتصدير) بدل الخلفية الصلبة */
.folder-btn-icon {
    background: transparent;
    color: var(--danger);
    border: 1.5px solid var(--danger);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}
@media (hover: hover) and (pointer: fine) {
    .folder-btn-icon:hover {
        background-color: rgba(220, 38, 38, 0.12);
    }
}
.folder-btn-icon:active { transform: scale(0.94); }

/* تعديل = أزرق (اللون الأساسي للبراند) بدل البرتقالي القديم -- توحيد
   الدلالة اللونية مع بقية الموقع (تعديل=أزرق دائماً، حذف=أحمر دائماً) */
.folder-btn-icon.edit-icon {
    color: var(--primary);
    border-color: var(--primary);
}
@media (hover: hover) and (pointer: fine) {
    .folder-btn-icon.edit-icon:hover {
        background-color: rgba(var(--primary-rgb), 0.12);
    }
}

/* إجراء محايد (تصدير Excel/PDF مثلاً) -- بلا دلالة تحذيرية أو تأكيدية */
.folder-btn-icon.neutral-icon {
    color: var(--text-muted);
    border-color: var(--border-color);
}
@media (hover: hover) and (pointer: fine) {
    .folder-btn-icon.neutral-icon:hover {
        background-color: rgba(37, 99, 235, 0.08);
        color: var(--primary);
        border-color: var(--primary);
    }
}

/* ---------------------------- الأزرار والمدخلات (Buttons & Inputs) ---------------------------- */
/* إحساس عمق خفيف (Light 3D) بالأزرار (طلب صاحب المشروع): ظل مزدوج (تماس +
   انتشار) بدل ظل مسطّح، ولمعة داخلية علوية رفيعة تحاكي انعكاس ضوء بسيط --
   يبقى نفس اللون/الحجم/السلوك تماماً، فرق بصري فقط */
button { background-color: var(--primary-solid); color: white; border: none; padding: 10px 18px; border-radius: 10px; cursor: pointer; font-size: 14px; transition: var(--transition); font-weight: 400; display: inline-flex; align-items: center; justify-content: center; gap: 6px; position: relative; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 18px -8px rgba(var(--primary-rgb), 0.55); }
@media (hover: hover) and (pointer: fine) { button:hover { background-color: var(--primary-solid-hover); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 2px 4px rgba(0, 0, 0, 0.1), 0 12px 22px -8px rgba(var(--primary-rgb), 0.6); } }
/* استجابة فورية للضغط (emil-design-eng: "Buttons must feel responsive") -- تعمل بنفس الشكل بالفأرة واللمس */
button:active { transform: translateY(0) scale(0.97); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 10px -6px rgba(var(--primary-rgb), 0.5); }
/* أزرار ثانوية/سياقية (نقل، أرشفة، تعديل، حذف، إغلاق مودال...) -- إصلاح
   (طلب المستخدم صراحة): كانت هذي تعبئة صلبة بنفس ثقل زر الإجراء الأساسي
   (button المجرّد)، فتتنافس بصرياً معه بدل ما تبين أقل أهمية -- الحين
   شفافة (ghost/outline): حدود ولون نص يحملان المعنى، تلوين خفيف بس عند
   hover. button المجرّد (بلا كلاس) يبقى صلب كما هو -- هو الإجراء الأساسي
   الحقيقي بالشاشة (حفظ، تسجيل دخول...) ولازم يبقى الأبرز */
button.danger { background: transparent; color: var(--danger-text); border: 1.5px solid var(--danger); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { button.danger:hover { background-color: rgba(220, 38, 38, 0.1); transform: translateY(-1px); box-shadow: 0 8px 16px -10px rgba(220, 38, 38, 0.4); } }
button.warning { background: transparent; color: var(--warning-text); border: 1.5px solid var(--warning); font-weight: 400; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { button.warning:hover { background-color: rgba(245, 158, 11, 0.12); transform: translateY(-1px); box-shadow: 0 8px 16px -10px rgba(245, 158, 11, 0.4); } }
button.secondary { background: transparent; color: var(--text-main); border: 1.5px solid var(--border-color); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { button.secondary:hover { border-color: var(--primary); background-color: rgba(var(--primary-rgb), 0.08); transform: translateY(-1px); box-shadow: 0 8px 16px -10px rgba(var(--primary-rgb), 0.3); } }

/* نسخة صلبة اختيارية (بلاغ حي: زر "رفع وحفظ"/"إغلاق" الشفاف بان "غريب"
   وسط صف أزرار ملوّنة صلبة زاهية جنبه -- مشاركة/PDF/علامة/اختيار صورة،
   كلها bare button بخلفية صلبة مخصّصة). الشكل الشفاف مناسب لما يكون الزر
   لحاله وسط نص عادي (قائمة الفواتير، إغلاق مودال بسيط) لكن يبين أضعف من
   اللازم لو حواليه أزرار صلبة ثانية بنفس الصف -- هذا الكلاس يرجّعه صلب
   بس بالسياقات اللي تحتاجها، بدون ما يمس الشكل الشفاف بباقي الموقع */
button.warning.solid-action { background: var(--warning); color: #000; border-color: transparent; }
@media (hover: hover) and (pointer: fine) { button.warning.solid-action:hover { background: #d97706; } }
button.secondary.solid-action { background: #475569; color: #ffffff; border-color: transparent; }
[data-theme="dark"] button.secondary.solid-action { background: #334155; }
@media (hover: hover) and (pointer: fine) { button.secondary.solid-action:hover { background: var(--primary-solid-hover); color: #ffffff; } }

/* عمق خفيف "غاطس" (Light 3D) بالحقول: ظل داخلي رفيع يحاكي حفرة بسيطة بدل
   سطح مسطّح -- نفس فكرة الأزرار البارزة، بس بالاتجاه المعاكس (الحقل يبين
   "مغروس" شوي بدل "طافي") */
input, select, textarea { width: 100%; padding: 11px 14px; margin: 6px 0 14px; border: 1.5px solid var(--border-color); border-radius: 10px; background-color: var(--input-bg); color: var(--text-main); outline: none; transition: var(--transition); font-size: 14px; font-weight: 400; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); }
/* :focus-visible مو :focus -- نفس مبدأ button:focus-visible بالأسفل (سطر ~1679):
   الحلقة تظهر بس للتنقل بالكيبورد، مو لكل نقرة فأرة عادية */
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--primary); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03), 0 0 0 3px rgba(37, 99, 235, 0.25); }

/* نبضة خفيفة عند الكتابة الفعلية بأي حقل (بلاغ حي: "ابي الأرقام وانا
   اكتبها تدخل دخول فخم") -- الكلاس is-typing-pulse يُضاف/يُزال من JS
   (main.js) بكل ضغطة حرف، بلا أي تأثير على القيمة أو منطق الحقل نفسه */
@keyframes fieldTypePulse {
    0% { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 0 0 0 rgba(var(--primary-rgb), 0.32); }
    100% { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 0 0 5px rgba(var(--primary-rgb), 0); }
}
input.is-typing-pulse { animation: fieldTypePulse 0.35s ease-out; }
@media (prefers-reduced-motion: reduce) { input.is-typing-pulse { animation: none !important; } }

/* ---------------------------- جداول لوحة الأدمن ---------------------------- */
/* جداول الأدمن والشركات/الأعمال (كل الجداول بالموقع تشترك بهذا الكلاس)
   تأخذ نفس زجاجية .card المعتدلة -- تنعكس تلقائياً على جداول المتاجر،
   الموردين، مراكز التكلفة، العهد، إقرارات الضريبة، وكل جداول لوحة الأدمن */
.admin-table-container {
    width: 100%;
    overflow-x: auto;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    background: color-mix(in srgb, var(--card-bg) 88%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.admin-table th {
    background-color: var(--primary-solid);
    color: #ffffff;
    font-weight: 400;
    padding: 12px 10px;
    border-bottom: 1.5px solid var(--border-color);
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.admin-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    font-weight: 400;
    transition: var(--transition);
}
@media (hover: hover) and (pointer: fine) {
    .admin-table tr:hover td {
        background-color: rgba(37, 99, 235, 0.08);
        cursor: pointer;
    }
}

/* قص النصوص الطويلة بالجدول (مثلاً رسائل الأخطاء) بثلاث نقاط (...) بدل
   كسر الجدول -- يُستخدم على خلايا عمود "الحدث / الخطأ" بجدول السجل */
.admin-table-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}

/* بادج أحمر لتمييز صفوف الأخطاء عن صفوف الأحداث العادية */
.badge-error {
    display: inline-block;
    background-color: var(--danger);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* بطاقة جلسة نشطة (نافذة "نشاط الحساب والجلسات") -- كانت style مضمَّناً
   inline (flex row: معلومات + زر)، حُوِّلت لكلاس عشان تقدر تُعاد تصميمها
   بعرض جوال بلا لمس سطح المكتب (شوف mobile override تحت). */
.session-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.session-card-info { flex: 1; min-width: 0; }
.session-card-revoke { min-width: 100px; flex-shrink: 0; }

/* كرت اختيار بشكل مربّع تحديد كبير (نافذتي "إضافة فواتير لمجلد" و"نقل مجموعة
   فواتير") -- الكلاس .selected يضيفه/يزيله toggleCardSelection() بـ main.js */
.custom-chk-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
}
@media (hover: hover) and (pointer: fine) {
    .custom-chk-card:hover {
        border-color: var(--primary);
        background: rgba(37, 99, 235, 0.08);
    }
}
.custom-chk-card.selected {
    border-color: var(--primary);
    background: rgba(37, 99, 235, 0.15);
}
/* إصلاح (اكتُشف حياً 2026-08-31 أثناء فحص جوال لنافذة "إقرار ضريبي
   جديد"): القاعدة العامة input,select,textarea{width:100%} (أعلى الملف)
   تمتد لأي input بلا استثناء صريح، بما فيها radio/checkbox داخل
   .radio-check-flow-row (نطاق الإقرار، أرباع السنة) -- ما كان ظاهراً
   بصرياً بالتخطيط الأفقي القديم (label نفسه كان ضيقاً بالتفاف)، لكن
   بمجرد ما صار كل خيار ياخذ سطراً كاملاً (إصلاح الجوال تحت)، صار مربع/
   دائرة الاختيار يتمدد لعرض السطر كاملاً (~240px) بدل حجمه الطبيعي --
   نفس عطل .custom-chk-card فوقه بالضبط، بنفس الحل. */
.radio-check-flow-row input[type="checkbox"],
.radio-check-flow-row input[type="radio"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
    margin: 0;
}
.custom-chk-card input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: var(--primary);
    cursor: pointer;
    margin: 0;
}