/* ==========================================================================
   👑 CREATION CRM - ULTIMATE LUXURY ROYAL THEME SUITE (CLEAN & OPTIMIZED)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. كروت الإحصائيات الفخمة (Stats Cards)
   -------------------------------------------------------------------------- */
.fi-wi-stats-overview-stat {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 20px !important;
    transition: all 0.3s ease-in-out !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01) !important;
}

/* تأثير حركي انسيابي عند تمرير الماوس فوق الكروت */
.fi-wi-stats-overview-stat:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02) !important;
}

/* كروت النجاح والأرباح (اللون الأخضر) */
.fi-wi-stats-overview-stat.text-success-600, 
.fi-wi-stats-overview-stat[class*="success"] {
    border-right: 5px solid #10b981 !important;
    background: linear-gradient(to left, #f0fdf4, #ffffff) !important;
}

/* كروت المصاريف والعجز (اللون الروز/الأحمر) */
.fi-wi-stats-overview-stat.text-danger-600, 
.fi-wi-stats-overview-stat[class*="danger"] {
    border-right: 5px solid #f43f5e !important;
    background: linear-gradient(to left, #fff1f2, #ffffff) !important;
}

/* كروت المتابعة والتنبيهات (اللون البرتقالي) */
.fi-wi-stats-overview-stat.text-warning-600, 
.fi-wi-stats-overview-stat[class*="warning"] {
    border-right: 5px solid #f59e0b !important;
    background: linear-gradient(to left, #fffbeb, #ffffff) !important;
}

/* كروت العملاء والخدمات (اللون الأزرق الملوكي) */
.fi-wi-stats-overview-stat[class*="primary"],
.fi-wi-stats-overview-stat[class*="info"] {
    border-right: 5px solid #3b82f6 !important;
    background: linear-gradient(to left, #eff6ff, #ffffff) !important;
}

/* العناوين والأرقام داخل الكروت */
.fi-wi-stats-overview-stat-label {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #334155 !important;
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.05em !important;
    margin-top: 4px !important;
}

/* --------------------------------------------------------------------------
   2. التبويب فوق الجداول وجدول البيانات الرئيسي (Tabs & Tables)
   -------------------------------------------------------------------------- */
.fi-tabs {
    background-color: #f8fafc !important;
    border-radius: 12px !important;
    padding: 4px !important;
    border: 1px solid #e2e8f0 !important;
}

.fi-tabs-item {
    font-weight: 700 !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    padding: 6px 16px !important;
}

/* التبويب النشط حالياً ينطق بالأزرق */
.fi-tabs-item-active {
    background-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2) !important;
}

/* هيكل الجدول وعناوين الهيدر */
.fi-ta-ctn {
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
}

.fi-ta-header-cell {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    padding: 14px !important;
}

.fi-ta-row:hover {
    background-color: #f8fafc !important;
}

.fi-btn {
    border-radius: 10px !important;
    font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   3. السايد بار الملكي الفاخر والمحاذاة اليمين (Royal RTL Sidebar)
   -------------------------------------------------------------------------- */
/* هيكل السايد بار الرئيسي واللون الكحلي الغامق */
.fi-sidebar {
    background-color: #0f172a !important; 
    border-left: 1px solid #1e293b !important; 
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.15) !important;
}

/* إجبار التوجه والمحاذاة لليمين بالكامل غصب عن السيستم */
.fi-sidebar-nav, 
.fi-sidebar-nav-list,
.fi-sidebar-item,
.fi-sidebar-item-button,
.fi-sidebar-group-label {
    text-align: right !important;
    direction: rtl !important;
}

/* اسم البراند واللوجو أعلى السايد بار (ناطق ومنور أبيض) */
.fi-sidebar-header {
    background-color: #1e293b !important;
    border-bottom: 1px solid #334155 !important;
    padding: 20px !important;
}

.fi-sidebar-header a,
.fi-sidebar-header span,
.fi-sidebar-header h1,
.fi-sidebar-header-title {
    color: #ffffff !important; 
    font-weight: 900 !important; 
    font-size: 1.25rem !important; 
    letter-spacing: 0.5px !important; 
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important; 
}

/* تظبيط اللينك الرئيسي: الأيقونة والكلام جنب بعض بالملي */
.fi-sidebar-item-button {
    display: flex !important;
    flex-direction: row !important; /* ترتيب طبيعي من اليمين: أيقونة ثم نص */
    align-items: center !important;
    justify-content: flex-start !important; 
    gap: 12px !important; 
    padding: 10px 14px !important;
    margin: 4px 10px !important;
    border-radius: 12px !important;
    transition: all 0.25s ease-in-out !important;
    border-right: 3px solid transparent !important; 
}

/* نصوص اللينكات غير النشطة (أبيض ثلجي واضح جداً ومقروء) */
.fi-sidebar-item-button span, 
.fi-sidebar-item-button div,
.fi-sidebar-nav-label {
    color: #e2e8f0 !important; 
    font-weight: 700 !important;
    font-size: 14px !important;
}

/* الأيقونات غير النشطة (أزرق سماوي نيون هادي) */
.fi-sidebar-item-button svg {
    color: #38bdf8 !important;
    width: 20px !important;
    height: 20px !important;
    opacity: 0.9 !important;
    transition: all 0.25s ease !important;
}

/* تأثير الـ Hover الملكي مع الخط الجانبي الذهبي ⚜️ */
.fi-sidebar-item-button:hover {
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-right: 3px solid #fbbf24 !important; 
    color: #ffffff !important;
    padding-right: 11px !important; /* تعويض لـ 3px بتوع البوردر الذهبي */
}

.fi-sidebar-item-button:hover svg {
    transform: scale(1.1) !important; 
    color: #fbbf24 !important; 
}

/* 🌟 الرابط النشط حالياً (الـ Active Tab اللّي منور أزرق) */
.fi-sidebar-item-active .fi-sidebar-item-button {
    background: linear-gradient(to left, #2563eb, #1d4ed8) !important; 
    border-right: 3px solid #3b82f6 !important;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.35) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button span {
    color: #ffffff !important;
    font-weight: 800 !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button svg {
    color: #ffffff !important;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.6)) !important;
}

/* عناوين المجموعات الجانبية (إدارة المبيعات / الرقابة والتقارير) */
.fi-sidebar-group-label {
    display: flex !important;
    justify-content: flex-start !important;
    padding: 0 16px !important;
    margin-top: 22px !important;
    margin-bottom: 6px !important;
}

.fi-sidebar-group-label span {
    color: #94a3b8 !important; 
    font-weight: 800 !important;
    font-size: 12px !important;
    border-right: 3px solid #3b82f6 !important; 
    padding-right: 8px !important;
}

/* سهم فتح وقفل القائمة المنسدلة يطير أقصى اليسار أوتوماتيك */
.fi-sidebar-group-toggle-button {
    margin-right: auto !important;
    margin-left: 0 !important;
    color: #94a3b8 !important;
}

/* زرار التوجل (Sidebar Toggle) والأزرار العلوية لضمان ظهورها بالكامل */
.fi-sidebar-close-btn, 
button[aria-label*="Sidebar"], 
.fi-topbar button {
    z-index: 99999 !important;
    color: #1e293b !important;
}

/* الفواصل الزجاجية الناعمة داخل المنيو */
.fi-sidebar-nav hr {
    border-color: rgba(255, 255, 255, 0.05) !important;
    margin: 12px 0 !important;
}
/* 👑 CREATION CRM - BRAND LOGO MAXIMUM BRIGHTNESS FIX */

/* إلغاء الشفافية تماماً وإبراز الاسم باللون الأبيض الناصع */
.fi-sidebar-header,
.fi-sidebar-header a,
.fi-sidebar-header span,
.fi-sidebar-header h1,
.fi-sidebar-header-title,
.fi-sidebar-header div {
    opacity: 1 !important;
    color: #ffffff !important;
}

/* لو اللوجو عبارة عن أيقونة أو SVG تفتحه بالكامل */
.fi-sidebar-header svg {
    color: #ffffff !important;
    opacity: 1 !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important;
}
/* ==========================================================================
   👑 CREATION CRM - PREMIUM CENTERED LOGO & BRANDING WORK
   ========================================================================== */

/* تظبيط حاوية الهيدر بالكامل لتوسيط المحتوى وإعطائه هيبة */
.fi-sidebar-header {
    display: flex !important;
    justify-content: center !important; /* التوسيط الأفقي بالملي */
    align-items: center !important;    /* التوسيط الرأسي */
    padding: 24px 16px !important;     /* زيادة المساحة العلوية والسفلية لشياكة أكبر */
    background-color: #1e293b !important; /* لون متناسق مع السايد بار */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; /* خط فاصل زجاجي ناعم */
}

/* تجميل وهندسة نص البراند في السنتر */
.fi-sidebar-header a,
.fi-sidebar-header span,
.fi-sidebar-header h1,
.fi-sidebar-header-title {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    text-align: center !important;
    color: #ffffff !important; 
    opacity: 1 !important;
    font-weight: 900 !important; 
    font-size: 1.4rem !important; /* تكبير سنّة عشان الهيبة والمقاس */
    letter-spacing: 1px !important; /* تباعد ملوكي بين الحروف */
    
    /* تأثير الظل النيون الفخم يعطي عمق وثبات للنص */
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.3), 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    
    /* إضافة حشو زجاجي داخلي بسيط حول الكلمة لإبرازها كلوجو منفصل */
    background: rgba(255, 255, 255, 0.03) !important;
    padding: 6px 20px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease !important;
}

/* حركة خفيفة لما الماوس ييجي على اللوجو يزيد توهجه */
.fi-sidebar-header a:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    text-shadow: 0 0 15px rgba(56, 189, 248, 0.6), 0 2px 6px rgba(0, 0, 0, 0.6) !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
}