/* toast-lightbox-misc.css -- Toast، Tooltips، Lightbox، شريط الإجراءات الجماعي، قائمة الانتظار غير المتصلة، جدول مقارنة الباقات، وما تبقّى. */
/* ---------------------------- تكبير أشرطة أداء السيرفر (CPU & RAM) ---------------------------- */
/* فرض ارتفاع أوضح وحواف أنعم لأشرطة تقدم CPU/RAM بلوحة الأدمن، بغض النظر عن أي inline style موجود */
#adminTab .progress-bar-bg,
#adminTab .stat-card div[style*="height: 12px"] {
    height: 14px !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, 0.35) !important;
}

/* ============================================================================
   المرحلة 31: شاشة ترحيب/تحميل (Splash Screen)
   ============================================================================ */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-dark) 0%, #0f172a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.splash-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

.splash-content {
    text-align: center;
    color: white;
}

.splash-logo h1 {
    font-size: 40px;
    font-weight: 800;
    margin: 0;
}

.splash-logo p {
    font-size: 14px;
    margin: 8px 0 0 0;
    opacity: 0.9;
    font-weight: 500;
}

/* المرحلة 31: مؤشر تحميل داخل Splash */
.splash-spinner {
    margin-top: 30px;
}

.spinner-circle {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================================================
   المرحلة 32: تأثيرات انتقال ناعمة (Smooth Transitions)
   ============================================================================ */
/* Modal transitions */
.modal {
    transition: opacity 0.15s ease-out, transform 0.15s ease-out !important;
}

/* ملاحظة: قاعدتا .modal.show و .modal:not(.show) اللي كانتا هنا (animation:
   slideIn/slideOut)، ودالتا openModalWithTransition/closeModalWithTransition
   بـ main.js اللي كانتا تضيفان/تزيلان كلاس show، كنّ من نظام مودالات بديل
   ما يُستخدم فعلياً بأي مكان بالكود -- openModal()/closeModal() الفعليتان
   تتحكمان بالفتح/الإغلاق يدوياً عبر style.opacity/transform مباشرة، بدون
   كلاس show. وبما إن كل مودال ما عنده كلاس show أصلاً (النظام الفعلي ما
   يضيفه)، كانت قاعدة :not(.show) تُطبَّق فوراً على أي مودال يُفتح، فيشغّل
   CSS انيميشن slideOut (اختفاء) بنفس لحظة ما JS يشغّل تأثير الظهور --
   انيميشنان متعاكسان بنفس الوقت، وهذا سبب "الرمشة" (يفتح ويقفل بجزء
   من الثانية) اللي لاحظها المستخدم بكل نافذة منبثقة بالموقع. الدالتان
   و@keyframes slideIn/slideOut المرتبطتان بهذا النظام البديل اتحذفن نهائياً --
   لا تُعاد أي منهن */

/* Tab switching transitions */
/* إصلاح: كانت هذي القاعدة تُعرّف @keyframes fadeIn ثانية بنفس الاسم اللي
   يستخدمه .screen بأعلى الملف (opacity + translateY) -- بما إن التعريف
   الثاني الأحدث بترتيب الملف يطغى على الأول بكل استخدامات نفس الاسم بـ CSS،
   كان دخول .screen يفقد صمتاً حركة translateY(8px) المقصودة وتصير مجرد
   fade بالشفافية فقط. إضافة لذلك، animation: fadeIn/fadeOut هنا كانت تتعارض
   مباشرة مع الـ transition اللي يضيفه switchTab() بـ main.js يدوياً على
   opacity لنفس العنصر بنفس الوقت -- تماماً نفس علّة "الرمشة" الموثّقة أعلاه
   بالمودالات (حركتان متعاكستان على نفس الخاصية بنفس اللحظة). الحل: احذف
   قاعدتي animation هنا وخلّ الـ transition اللي يضبطه main.js هو المتحكم
   الوحيد بظهور التبويب، بنفس أسلوب حل مشكلة المودالات بالضبط */
.tab-content {
    transition: opacity 0.2s var(--ease-out);
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ============================================================================
   المرحلة 34: مؤشرات تحميل هيكلية (Skeleton Loading)
   ============================================================================ */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--border-color) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        var(--border-color) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
    border-radius: 6px;
    color: transparent;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Skeleton for invoice cards */
.skeleton-invoice-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 12px;
}

.skeleton-invoice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.skeleton-invoice-header .skeleton {
    height: 16px;
    width: 60%;
}

.skeleton-invoice-header .skeleton:last-child {
    width: 30%;
}

.skeleton-invoice-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.skeleton-invoice-detail .skeleton {
    height: 14px;
    width: 100%;
}

/* Skeleton for analytics */
.skeleton-chart {
    width: 100%;
    height: 300px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* المرحلة 36: إشعارات نجاح عابرة (Toast Notifications) */
#toastNotice {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom));
    right: calc(24px + env(safe-area-inset-right));
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 350px;
}

.toast-item {
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    color: var(--text-main);
    /* إصلاح: كان الدخول فقط متحرّك (keyframe) والخروج فوري (toast.remove()
       المباشر بـ main.js) -- اختفاء بلا حركة بعد ظهور متحرّك يعتبر "تغيّر
       مفاجئ" (jarring change) بمعايير مهارة animate. الحين الدخول والخروج
       كلاهما transition (يقبل المقاطعة لو المستخدم فتح toast جديد بنفس
       اللحظة)، بنفس المسار (يمين) بالاتجاهين، بنسبة % من عرض العنصر نفسه
       بدل بكسل ثابت (400px) -- يشتغل صح بأي عرض toast */
    opacity: 1;
    transform: translateX(0);
    transition: opacity 400ms ease, transform 400ms ease;

    @starting-style {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* toast-hide تُضاف من showToast() بـ main.js قبل الحذف من الـ DOM مباشرة --
   خروج أسرع من الدخول (200ms مقابل 400ms) لأنه استجابة نظام (تلقائي/إغلاق)
   مو لحظة يقررها المستخدم */
.toast-item.toast-hide {
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

/* المرحلة 36: كل ألوان toast أدناه تُرسم كطبقة شفافة فوق خلفية var(--card-bg)
   الصلبة (background-color + background-image) بدل استبدالها بلون rgba
   منخفض الشفافية فقط -- بدون خلفية صلبة تحتها، كانت التنبيهات تظهر شبه
   شفافة تماماً وغير واضحة بالوضع الداكن (تظهر فوق خلفية الصفحة الداكنة
   أصلاً بلا أي تباين تقريباً)، رغم أنها تبدو مقبولة بالوضع الفاتح فقط */
.toast-item.toast-success {
    border-color: var(--success);
    background-color: var(--card-bg);
    background-image: linear-gradient(rgba(5, 150, 105, 0.12), rgba(5, 150, 105, 0.12));
    color: var(--success);
}

.toast-item.toast-error {
    border-color: var(--danger);
    background-color: var(--card-bg);
    background-image: linear-gradient(rgba(220, 38, 38, 0.12), rgba(220, 38, 38, 0.12));
    color: var(--danger);
}

.toast-item.toast-info {
    border-color: var(--primary);
    background-color: var(--card-bg);
    background-image: linear-gradient(rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.12));
    color: var(--primary);
}

.toast-item.toast-warning {
    border-color: var(--warning);
    background-color: var(--card-bg);
    background-image: linear-gradient(rgba(217, 119, 6, 0.12), rgba(217, 119, 6, 0.12));
    color: var(--warning);
}

/* المرحلة 101: تلميحات بسيطة (Tooltips) */
[title] {
    position: relative;
    cursor: help;
}

/* تلميح عند الـ hover - CSS بسيط بدون مكتبة */
[data-tooltip] {
    position: relative;
}

/* :focus-visible مضاف جنب :hover -- بدونها التلميح ما يظهر أبداً لمستخدم
   الكيبورد اللي يوصل للعنصر بـ Tab بدل الماوس (WCAG) */
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    right: 50%;
    transform: translateX(50%);
    background: var(--text-main);
    color: var(--card-bg);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    animation: fadeInTooltip 0.2s var(--ease-out); /* ease-in يُبطئ بالضبط باللحظة اللي يتابعها المستخدم -- ممنوع بالحركات الداخلة */
}

[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
    content: '';
    position: absolute;
    bottom: 115%;
    right: 50%;
    transform: translateX(50%);
    border: 6px solid transparent;
    border-top-color: var(--text-main);
    z-index: 1000;
    pointer-events: none;
}

@keyframes fadeInTooltip {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* المرحلة 47: Lightbox عرض الصور بحجم مكبّر */
/* إصلاح: كان الدخول متحرّك (keyframe) والخروج فوري (closeLightbox() تضبط
   display:none مباشرة بلا أي انتقال) -- نفس علّة "التغيّر المفاجئ" اللي
   اتصلحت بالـ Toast. الحين transition + @starting-style للدخول (يشتغل مع
   تبديل display:none↔flex نفسه، هذا بالضبط الاستخدام المعتمد لـ
   starting-style)، وكلاس lightbox-hide يضيفه closeLightbox() بـ main.js
   للخروج -- خروج أسرع من الدخول (150ms مقابل 250ms) لأنه استجابة إغلاق */
.lightbox-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
    opacity: 1;
    transition: opacity 250ms var(--ease-out);

    @starting-style {
        opacity: 0;
    }
}

.lightbox-overlay.lightbox-hide {
    opacity: 0;
    transition: opacity 150ms var(--ease-out);
}

.lightbox-container {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

@media (hover: hover) and (pointer: fine) {
    .lightbox-close:hover {
        background-color: rgba(255, 255, 255, 0.2);
        border-color: white;
    }
}

/* المرحلة 50: شريط الإجراءات الجماعي (Bulk Actions Bar) */
.bulk-actions-bar {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    background-color: var(--card-bg);
    border-top: 2px solid var(--primary);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1500;
    animation: slideUpBulkBar 0.3s ease-out;
}

.bulk-actions-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 5% calc(12px + env(safe-area-inset-bottom));
    flex-wrap: wrap;
    gap: 16px;
}

/* إضافة مساحة في الأسفل لقائمة الفواتير عند ظهور شريط الإجراءات الجماعي */
body.bulk-bar-open #invoicesTab,
body.bulk-bar-open #archiveTab {
    padding-bottom: 90px;
}

@media (max-width: 768px) {
    .bulk-actions-content {
        flex-direction: column;
        justify-content: center;
    }
}

@keyframes slideUpBulkBar {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* المرحلة 25: نمط شريط قائمة الانتظار المحلية (Offline Queue Bar) */
.offline-queue-bar {
    animation: slideUpBulkBar 0.3s ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .offline-queue-bar button:hover {
        background: rgba(255, 255, 255, 0.3) !important;
        transition: background-color 0.2s;
    }
}

/* ============================================================================
   المرحلة 56 + 57: تحسين التباين والوضوح (Accessibility)
   ============================================================================ */
/* اختيار عالي التباين (accessible) لعناصر الإدخال والأزرار */
/* :focus-visible مو :focus (مصدر: better-accessibility skill) -- المتصفح
   يظهرها للتنقل بالكيبورد بس ويخفيها عند نقر الفأرة، حيث التركيز واضح
   أصلاً بصرياً. button:focus, button:focus-visible القديمة كانت تُظهر
   الحلقة حتى بنقر الفأرة العادي لأن :focus وحدها كانت تكفي لمطابقتها */
input:focus-visible, select:focus-visible, textarea:focus-visible {
    border-width: 2px;
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* تحسين وضوح النصوص الصغيرة على الخلفيات المختلفة */
.text-muted, [class*="muted"] {
    color: var(--text-muted) !important;
    font-weight: 600;
}

/* تحسين التباين للشارات والميتاجات */
.badge-sys, .badge-warn, .badge-folder {
    font-weight: 800;
    border-width: 2px;
}

/* تحسين التباين لأزرار حالات disabled */
button:disabled {
    opacity: 0.55;
    cursor: not-allowed !important;
}

/* مستخدم يفضّل تباين أعلى (prefers-contrast: more -- المصدر: apple-design
   skill): نرجع سماكة الحدود لـ2px بدل 1.5px المعتمدة بباقي الموقع (تخفيف
   بصري مقصود لبقية المستخدمين)، ونشيل شفافية الهيدر/الدرج تماماً */
@media (prefers-contrast: more) {
    .navbar-inner, .card, .stat-card, .invoice-item, .folder-card, .auth-container,
    .modal-content, .tools-bar, input, select, textarea, .icon-btn,
    .admin-table-container, .custom-chk-card, .folder-btn-icon {
        border-width: 2px !important;
    }
    .navbar-inner, .settings-drawer {
        background: var(--card-bg) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ============================================================================
   المرحلة 90 + 91 + 139: دعم اتجاه RTL الكامل (Right-to-Left)
   ============================================================================ */
/* شريط الأدوات البحث والفلترة: محاذاة RTL */
html[dir="rtl"] .tools-bar {
    flex-direction: row-reverse;
}

html[dir="rtl"] .search-box {
    text-align: right;
}

/* أزرار التنقل (Pagination): عكس اتجاه الأيقونات */
html[dir="rtl"] .pagination-bar button {
    flex-direction: row-reverse;
}

/* الجداول: محاذاة RTL للنصوص */
html[dir="rtl"] .admin-table {
    text-align: right;
}

/* النوافذ المنبثقة: ترتيب العناصر RTL */
/* تحسين بصري لجدول مقارنة الخطط (بلاغ حي: شكله بدائي) -- إضافات فقط
   (hover، ظل خفيف على الرأس) بدون لمس أي من أنماط الجدول الديناميكية
   المضبوطة inline بـmain.js، فمنطق بناء الجدول نفسه يبقى بلا أي تغيير */
@media (hover: hover) and (pointer: fine) { #plansComparisonTable tbody tr:hover td { background: rgba(var(--primary-rgb), 0.07) !important; } }
#plansComparisonTable thead th { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }
#plansComparisonTable td, #plansComparisonTable th { transition: background-color 0.2s ease; }

html[dir="rtl"] .modal-content {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .modal-content input,
html[dir="rtl"] .modal-content select,
html[dir="rtl"] .modal-content textarea {
    direction: rtl;
    text-align: right;
}

/* الأيقونات وضع النصوص RTL */
html[dir="rtl"] button {
    flex-direction: row-reverse;
}

/* نفس عطل row-reverse المضاعف اللي انصلح بـ .navbar/.tabs-nav فوق: direction: rtl
   الموروثة تعكس محور row تلقائياً (الأيقونة أول عنصر بالـ DOM تظهر أقصى
   اليمين مباشرة)، فـ row-reverse هنا كانت تدفع الأيقونة لليسار والنص لليمين
   بعكس الترتيب المتوقع. تحقق حي بمتصفح (getBoundingClientRect): بعد
   الإصلاح الأيقونة تطلع يمين النص كما هو متوقع */
html[dir="rtl"] .stat-card {
    flex-direction: row;
}

/* الشريط العلوي (Navbar)
   ملاحظة: بدون flex-direction: row فوق هذي، كانت هذي العناصر تعتمد على
   row-reverse بدل الافتراضي؛ لكن direction: rtl الموروثة من html[dir=rtl]
   أصلاً تعكس محور row تلقائياً (أول عنصر بالـ DOM يظهر بأقصى اليمين)،
   فإضافة row-reverse فوقها كانت تعكسها مرّتين: تدفع الشعار لليسار وأزرار
   الإجراءات (ومنها زر الإعدادات ⚙️) لليمين، بعكس اتجاه القراءة العربي
   الطبيعي، وتخلي درج الإعدادات يفتح بعيداً عن الزر اللي فتحه */
html[dir="rtl"] .navbar-inner {
    flex-direction: row;
}

html[dir="rtl"] .logo-container {
    flex-direction: row;
}

html[dir="rtl"] .nav-actions {
    flex-direction: row;
}

/* شاشة التسجيل */
html[dir="rtl"] .auth-container {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] label {
    text-align: right;
    display: block;
}

/* الفواتير والكروت */
html[dir="rtl"] .invoice-item {
    flex-direction: row-reverse;
}

html[dir="rtl"] .card h3 {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* القوائم المنسدلة (Dropdowns)
   right: 0 هنا افتراضي (يخدم وضع LTR/الإنجليزي حيث تظهر أزرار الإجراءات
   بأقصى يمين الهيدر) -- كان معرّف inline بـindex.html بدل هنا، فكان
   يتفوق دائماً على override الـrtl تحت وتخلي القائمة تفتح خارج الشاشة
   لليسار وقت الوضع العربي (أزرار الإجراءات هناك بأقصى يسار الهيدر). */
.notification-dropdown {
    right: 0;
}

html[dir="rtl"] .notification-dropdown {
    left: 0;
    right: auto;
}

/* تبويبات ltr و rtl
   نفس ملاحظة الـ navbar أعلاه: direction: rtl الموروثة تعكس محور row
   تلقائياً، فـ row-reverse هنا كانت تعكسها مرّتين وتدفع "الرئيسية"
   (أول تبويب بالـ DOM) لأقصى يسار الشاشة بدل يمينها */
html[dir="rtl"] .tabs-nav-inner {
    flex-direction: row;
}

/* شريط الإجراءات الجماعية -- نفس عطل row-reverse المضاعف: تحقق حي
   بمتصفح (getBoundingClientRect) أكّد إن row-reverse هنا كانت تدفع أزرار
   الإجراءات (حذف/أرشفة/إلغاء) لأقصى يمين الشريط وعدّاد التحديد ("N محددة")
   لليسار -- بعكس ترتيب القراءة المتوقع (المفروض تشوف العدّاد أول شي على
   اليمين). justify-content: flex-end بقيت كما هي (مو جزء من العطل -- هي
   اللي تجمّع المحتوى عند حافة الشريط بدل تفريقه على كامل العرض) */
html[dir="rtl"] .bulk-actions-content {
    flex-direction: row;
    justify-content: flex-end;
}

html[dir="rtl"] .bulk-actions-content > div:first-child {
    flex-direction: row;
}

/* فيز 5 (تصدير/استيراد بيانات المستخدم مع الصور): بطاقات اختيار قابلة
   للنقر (نطاق التصدير، وضع الصلاحية) -- بديل صفوف الراديو النصية البسيطة
   اللي كانت بلا أي تمييز بصري بين الخيارات ولا حالة "محدد" واضحة */
.option-choice-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.option-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) { .option-choice:hover { border-color: rgba(var(--primary-rgb), 0.5); } }

.option-choice input[type="radio"] {
    accent-color: var(--primary-solid);
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin: 0;
}

.option-choice i {
    font-size: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.option-choice span { font-size: 14px; }

/* .selected يُضبط يدوياً بـmain.js (_syncOptionChoiceSelection) عند كل
   تغيير راديو -- جُرّب :has(input:checked) بديلاً بلا JS، لكن اختبار حي
   بالمتصفح كشف إنه لا يُحدَّث بصرياً بشكل موثوق لعناصر مجموعة راديو واحدة
   عند تبدّل التحديد بينها (يبقى شكل العنصر القديم "عالقاً")، فاستُبدل بكلاس
   يدوي بسيط، مضمون النتيجة بكل المتصفحات. */
.option-choice.selected {
    border-color: var(--primary-solid);
    background: rgba(var(--primary-rgb), 0.08);
}

.option-choice.selected i { color: var(--primary); }

/* حقل نصي مع أيقونة داخلية ثابتة (رمز قفل التصدير/الاستيراد) */
.input-with-icon { position: relative; }

.input-with-icon > i {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 15px;
    pointer-events: none;
}

.input-with-icon > input {
    width: 100%;
    padding: 8px 12px;
    padding-inline-start: 34px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-main);
}

/* إشعار تقدّم مهمة خلفية دائم (تصدير أو استيراد -- فيز 8: نفس المكوّن
   لكليهما) -- يبقى ظاهراً بكل تبويبات الموقع (طلب صاحب المشروع بعد
   الاختبار الحي: يتابع التقدّم حتى لو تنقّل بين الصفحات). عضو داخل نفس
   صندوق #toastNotice (أسفل يمين الشاشة فعلياً، لا "معلَّق" بمسافة ثابتة
   أعلاه) -- order:1 يضمن بقاءه دايماً بقاع المكدّس (أقرب زاوية الشاشة
   الفعلية)، وأي toast عابر (order:0 الافتراضي) يرتّب نفسه فوقه تلقائياً
   بلا أي تداخل، بغض النظر عن ترتيب الإضافة الفعلي بالـDOM (طلب صاحب
   المشروع صراحة بعد اختبار حي ثانٍ). */
.job-progress-widget {
    order: 1;
    width: 300px;
    max-width: calc(100vw - 48px);
    background: var(--card-bg);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 16px;
}

.job-progress-widget-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.job-progress-widget-header i { color: var(--primary); font-size: 16px; }

.job-progress-widget-header span { flex: 1; font-weight: 600; font-size: 14px; }

.job-progress-widget-header .icon-btn { width: 26px; height: 26px; font-size: 13px; }

.job-progress-widget-track {
    background: var(--bg-color);
    border-radius: 8px;
    height: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}

.job-progress-widget-fill {
    background: var(--primary-solid);
    height: 100%;
    transition: width 0.4s ease;
}

.job-progress-widget-status { margin: 0; font-size: 12px; color: var(--text-muted); }

.job-progress-widget-download-btn {
    width: 100%;
    margin-top: 12px;
    background-color: var(--success);
}

@media (max-width: 480px) {
    /* بعرض جوال ضيق: العنصر عضو داخل #toastNotice (max-width:350px أصلاً
       تكفي)، فقط نلغي عرضه الثابت (300px) عشان ما يفيض عن عرض الشاشة */
    .job-progress-widget { width: auto; }
}

/* زر اختيار ملف بطابع الموقع -- بديل زر "تصفّح..." الافتراضي بالمتصفح
   (شكله يختلف حسب نظام التشغيل ولا يقدر أي موقع يغيّره مباشرة). الحقل
   الحقيقي <input type="file"> مخفي بصرياً فقط (لا display:none ولا
   visibility:hidden -- يبقى بالـDOM قابلاً للتركيز والوصول بلوحة
   المفاتيح/قارئ الشاشة)، وتسمية <label for="..."> تتولى العرض والنقر. */
.file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.file-input-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    border: 1.5px dashed var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) { .file-input-label:hover { border-color: var(--primary); color: var(--primary); } }

.file-input-label.file-chosen {
    border-style: solid;
    border-color: var(--primary-solid);
    color: var(--text-main);
    background: rgba(var(--primary-rgb), 0.06);
}

/* :focus-visible على الحقل المخفي نفسه (تنقّل بالكيبورد/Tab) -- يبرز
   التسمية المرئية بدل ما يبقى التركيز غير مرئي تماماً للمستخدم */
.file-input-hidden:focus-visible + .file-input-label {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}