<?php
// ── تحديد الصفحة الحالية لتمييز الرابط النشط ──
$currentPage = basename($_SERVER['PHP_SELF']);
function isActive($page) {
    global $currentPage;
    if (is_array($page)) return in_array($currentPage, $page) ? 'active' : '';
    return $currentPage === $page ? 'active' : '';
}
?>

<!-- ══════════════════════════════════════════════
     SIDEBAR.PHP — القائمة الجانبية
     تعمل مع darkmode.php تلقائياً
══════════════════════════════════════════════ -->

<div class="sidebar-overlay" onclick="toggleSidebar()"></div>

<div id="sidebar" class="sidebar" dir="rtl">

    <!-- Header -->
    <div class="sidebar-head">
        <div class="sidebar-brand">
            <div class="sidebar-brand-icon">🏪</div>
            <div class="sidebar-brand-text">
                <span class="sidebar-brand-name">متجري</span>
                <span class="sidebar-brand-sub">لوحة التحكم</span>
            </div>
        </div>
        <button class="sidebar-close" onclick="toggleSidebar()" title="إغلاق">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                <line x1="18" y1="6" x2="6" y2="18"/>
                <line x1="6" y1="6" x2="18" y2="18"/>
            </svg>
        </button>
    </div>

    <!-- Menu -->
    <nav class="sidebar-nav">

        <div class="sidebar-section-label">الإدارة</div>

        <a href="index.php" class="sidebar-item <?= isActive('index.php') ?>">
            <span class="sidebar-item-icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/>
                </svg>
            </span>
            <span class="sidebar-item-text">المنتجات</span>
        </a>

        <a href="manage_categories.php" class="sidebar-item <?= isActive('manage_categories.php') ?>">
            <span class="sidebar-item-icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
                    <rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
                </svg>
            </span>
            <span class="sidebar-item-text">الفئات والخصائص</span>
        </a>

        <div class="sidebar-section-label">الطلبات</div>

        <a href="orders.php" class="sidebar-item <?= isActive('orders.php') ?>">
            <span class="sidebar-item-icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/>
                    <line x1="3" y1="6" x2="21" y2="6"/>
                    <path d="M16 10a4 4 0 01-8 0"/>
                </svg>
            </span>
            <span class="sidebar-item-text">إدارة الطلبات</span>
            <?php
            // عداد الطلبات الجديدة (اختياري — يعمل فقط لو $pdo متاح)
            if (isset($pdo)) {
                try {
                    $pendingCount = (int)$pdo->query("SELECT COUNT(*) FROM orders WHERE status_id=1")->fetchColumn();
                    if ($pendingCount > 0) echo '<span class="sidebar-badge">' . ($pendingCount > 99 ? '99+' : $pendingCount) . '</span>';
                } catch (Exception $e) {}
            }
            ?>
        </a>

        <a href="trash_orders.php" class="sidebar-item <?= isActive('trash_orders.php') ?>">
            <span class="sidebar-item-icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="3 6 5 6 21 6"/>
                    <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a1 1 0 011-1h4a1 1 0 011 1v2"/>
                </svg>
            </span>
            <span class="sidebar-item-text">سلة المحذوفات</span>
            <?php
            if (isset($pdo)) {
                try {
                    $trashC = (int)$pdo->query("SELECT COUNT(*) FROM deleted_orders")->fetchColumn();
                    if ($trashC > 0) echo '<span class="sidebar-badge sidebar-badge-red">' . ($trashC > 99 ? '99+' : $trashC) . '</span>';
                } catch (Exception $e) {}
            } elseif (isset($trashCount) && $trashCount > 0) {
                echo '<span class="sidebar-badge sidebar-badge-red">' . ($trashCount > 99 ? '99+' : $trashCount) . '</span>';
            }
            ?>
        </a>

        <div class="sidebar-section-label">المالية والتوصيل</div>

        <a href="companies.php" class="sidebar-item <?= isActive('companies.php') ?>">
            <span class="sidebar-item-icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="1" y="3" width="15" height="13"/>
                    <path d="M16 8h4l3 3v5h-7V8z"/>
                    <circle cx="5.5" cy="18.5" r="2.5"/>
                    <circle cx="18.5" cy="18.5" r="2.5"/>
                </svg>
            </span>
            <span class="sidebar-item-text">أسعار التوصيل</span>
        </a>

        <a href="profit_loss.php" class="sidebar-item <?= isActive(['profit_loss.php','profits.php']) ?>">
            <span class="sidebar-item-icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="12" y1="1" x2="12" y2="23"/>
                    <path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/>
                </svg>
            </span>
            <span class="sidebar-item-text">الأرباح والخسائر</span>
        </a>

        <a href="profit_loss2.php" class="sidebar-item <?= isActive('profit_loss2.php') ?>">
            <span class="sidebar-item-icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
                </svg>
            </span>
            <span class="sidebar-item-text">تحليل ذكي للمنتجات</span>
            <span class="sidebar-new-badge">جديد</span>
        </a>

        <div class="sidebar-section-label">الذكاء الاصطناعي</div>

        <!-- زر المساعد الذكي — معطّل حالياً -->
        <button class="sidebar-item sidebar-ai-btn" onclick="openAiComingSoon()" type="button">
            <span class="sidebar-item-icon sidebar-ai-icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 2a2 2 0 012 2v2a2 2 0 01-2 2 2 2 0 01-2-2V4a2 2 0 012-2z"/>
                    <path d="M12 8v4"/>
                    <path d="M8.5 14.5A5.5 5.5 0 0112 13a5.5 5.5 0 013.5 1.5"/>
                    <path d="M3 19c0-3.3 2.7-6 6-6h6c3.3 0 6 2.7 6 6"/>
                    <circle cx="12" cy="12" r="10" stroke-dasharray="3 2"/>
                </svg>
            </span>
            <span class="sidebar-item-text">
                مساعد المبيعات AI
                <small class="sidebar-ai-sub">اكتشاف الطلبات الجادة</small>
            </span>
            <span class="sidebar-soon-badge">قريباً</span>
        </button>

        <div class="sidebar-section-label">الإعدادات</div>

        <a href="settings.php" class="sidebar-item <?= isActive('settings.php') ?>">
            <span class="sidebar-item-icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="3"/>
                    <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/>
                </svg>
            </span>
            <span class="sidebar-item-text">الإعدادات</span>
        </a>

        <a href="theme-customizer.php" class="sidebar-item <?= isActive('theme-customizer.php') ?>">
            <span class="sidebar-item-icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/>
                    <circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/>
                    <circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/>
                    <circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/>
                    <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 011.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/>
                </svg>
            </span>
            <span class="sidebar-item-text">تخصيص الثيم</span>
        </a>

    </nav>

    <!-- Footer -->
    <div class="sidebar-footer">
        <a href="logout.php" class="sidebar-logout">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/>
                <polyline points="16 17 21 12 16 7"/>
                <line x1="21" y1="12" x2="9" y2="12"/>
            </svg>
            تسجيل الخروج
        </a>
        <div class="sidebar-version">v1.0 — متجري</div>
    </div>

</div>

<!-- ══════════════════════════════════════════════
     SIDEBAR CSS
══════════════════════════════════════════════ -->
<style>
/* ── Core Structure ── */
.sidebar {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: -4px 0 30px rgba(0,0,0,0.12);
    transition: right 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    font-family: 'Tajawal', sans-serif;
    overflow: hidden;
}

.sidebar.active { right: 0; }

.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0);
    z-index: 999;
    display: none;
    transition: background 0.3s ease;
    backdrop-filter: blur(0px);
}

.sidebar-overlay.active {
    background: rgba(15,23,42,0.55);
    backdrop-filter: blur(3px);
}

/* ── Header ── */
.sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 18px 16px;
    border-bottom: 1px solid #EEF2FF;
    background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
    flex-shrink: 0;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-brand-icon {
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border: 1px solid rgba(255,255,255,0.25);
}

.sidebar-brand-name {
    display: block;
    font-size: 15px;
    font-weight: 900;
    color: white;
    line-height: 1.2;
}

.sidebar-brand-sub {
    display: block;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}

.sidebar-close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.sidebar-close:hover {
    background: rgba(255,255,255,0.28);
    transform: scale(1.08);
}

/* ── Navigation ── */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 10px;
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 10px; }

.sidebar-section-label {
    font-size: 10px;
    font-weight: 800;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 14px 12px 6px;
    user-select: none;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    margin-bottom: 2px;
    position: relative;
}

.sidebar-item:hover {
    background: #EFF6FF;
    color: #1D4ED8;
    padding-right: 16px;
}

.sidebar-item.active {
    background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
    color: #1D4ED8;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(59,130,246,0.15);
    border: 1px solid rgba(59,130,246,0.2);
}

.sidebar-item.active .sidebar-item-icon {
    color: #1D4ED8;
    background: rgba(59,130,246,0.1);
}

.sidebar-item-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    flex-shrink: 0;
    transition: all 0.2s;
}

.sidebar-item:hover .sidebar-item-icon {
    background: rgba(59,130,246,0.1);
    color: #1D4ED8;
}

.sidebar-item-text {
    flex: 1;
    line-height: 1.3;
}

/* ── Badges ── */
.sidebar-badge {
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    padding: 0 6px;
    background: #1D4ED8;
    color: white;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse-badge 2s ease-in-out infinite;
    flex-shrink: 0;
}

.sidebar-badge-red {
    background: #DC2626;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.12); }
}

.sidebar-new-badge {
    font-size: 9px;
    font-weight: 800;
    background: linear-gradient(135deg, #7C3AED, #4F46E5);
    color: white;
    padding: 2px 7px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

/* ── Footer ── */
.sidebar-footer {
    padding: 14px 14px 18px;
    border-top: 1px solid #EEF2FF;
    flex-shrink: 0;
}

.sidebar-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: #DC2626;
    font-size: 13px;
    font-weight: 700;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    transition: all 0.2s;
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
}

.sidebar-logout:hover {
    background: #DC2626;
    color: white;
    border-color: #DC2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220,38,38,0.3);
}

.sidebar-version {
    text-align: center;
    font-size: 10px;
    color: #CBD5E1;
    font-weight: 600;
}

/* ══════════════════════════════════════════════
   DARK MODE OVERRIDES FOR SIDEBAR
══════════════════════════════════════════════ */
[data-theme="dark"] .sidebar {
    background: #161D30;
    box-shadow: -4px 0 30px rgba(0,0,0,0.5);
}

[data-theme="dark"] .sidebar-head {
    background: linear-gradient(135deg, #1E3A8A 0%, #1E2D52 100%);
    border-color: #2A3554;
}

[data-theme="dark"] .sidebar-section-label {
    color: #3D4E70;
}

[data-theme="dark"] .sidebar-item {
    color: #C0CCEE;
}

[data-theme="dark"] .sidebar-item:hover {
    background: #1C2540;
    color: #93C5FD;
}

[data-theme="dark"] .sidebar-item.active {
    background: linear-gradient(135deg, #0F1E40, #1C2540);
    color: #93C5FD;
    border-color: rgba(59,130,246,0.3);
    box-shadow: 0 2px 8px rgba(59,130,246,0.1);
}

[data-theme="dark"] .sidebar-item.active .sidebar-item-icon {
    background: rgba(59,130,246,0.15);
    color: #93C5FD;
}

[data-theme="dark"] .sidebar-item-icon {
    background: #1C2540;
    color: #5A6888;
}

[data-theme="dark"] .sidebar-item:hover .sidebar-item-icon {
    background: rgba(59,130,246,0.15);
    color: #93C5FD;
}

[data-theme="dark"] .sidebar-footer {
    border-color: #2A3554;
}

[data-theme="dark"] .sidebar-logout {
    background: #2D0A0A;
    border-color: #7F1D1D;
    color: #FCA5A5;
}

[data-theme="dark"] .sidebar-logout:hover {
    background: #DC2626;
    color: white;
    border-color: #DC2626;
}

[data-theme="dark"] .sidebar-version {
    color: #2A3554;
}

[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb {
    background: #2A3554;
}

/* ── Active item indicator bar (left accent) ── */
.sidebar-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: #1D4ED8;
    border-radius: 0 3px 3px 0;
}

[data-theme="dark"] .sidebar-item.active::before {
    background: #3B82F6;
}

/* ── AI Button ── */
.sidebar-ai-btn {
    width: 100%;
    text-align: right;
    cursor: pointer;
    font-family: 'Tajawal', sans-serif;
    background: linear-gradient(135deg, #F5F3FF, #EDE9FE);
    border: 1.5px dashed #A78BFA;
    position: relative;
    overflow: hidden;
}

.sidebar-ai-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(167,139,250,0.08), transparent);
    animation: ai-shimmer 2.5s ease-in-out infinite;
}

@keyframes ai-shimmer {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.sidebar-ai-btn:hover {
    background: linear-gradient(135deg, #EDE9FE, #DDD6FE);
    border-color: #7C3AED;
    color: #5B21B6;
    padding-right: 16px;
}

.sidebar-ai-icon {
    background: linear-gradient(135deg, #7C3AED, #4F46E5) !important;
    color: white !important;
}

.sidebar-ai-sub {
    display: block;
    font-size: 10px;
    color: #7C3AED;
    font-weight: 600;
    margin-top: 1px;
    opacity: 0.8;
}

.sidebar-soon-badge {
    font-size: 9px;
    font-weight: 800;
    background: linear-gradient(135deg, #7C3AED, #4F46E5);
    color: white;
    padding: 3px 8px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    flex-shrink: 0;
    animation: pulse-soon 2s ease-in-out infinite;
}

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

[data-theme="dark"] .sidebar-ai-btn {
    background: linear-gradient(135deg, #1A0E3A, #1C1040) !important;
    border-color: #5B21B6 !important;
    color: #C4B5FD !important;
}

[data-theme="dark"] .sidebar-ai-btn:hover {
    background: linear-gradient(135deg, #1E1044, #221248) !important;
    border-color: #7C3AED !important;
    color: #DDD6FE !important;
}

[data-theme="dark"] .sidebar-ai-sub {
    color: #A78BFA !important;
}

/* ══════════════════════════════════════════════
   AI COMING SOON MODAL
══════════════════════════════════════════════ */
.ai-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,15,40,0.7);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(6px);
}

.ai-modal-overlay.open { display: flex; }

.ai-modal {
    background: white;
    border-radius: 24px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.25);
    overflow: hidden;
    animation: ai-modal-in 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes ai-modal-in {
    from { opacity:0; transform: scale(0.85) translateY(30px); }
    to   { opacity:1; transform: scale(1)   translateY(0);     }
}

.ai-modal-header {
    background: linear-gradient(135deg, #4C1D95 0%, #5B21B6 40%, #7C3AED 80%, #4F46E5 100%);
    padding: 32px 28px 28px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ai-modal-header::before {
    content: '';
    position: absolute;
    top: -60px; left: -60px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
}

.ai-modal-header::after {
    content: '';
    position: absolute;
    bottom: -40px; right: -20px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
}

.ai-modal-robot {
    font-size: 56px;
    margin-bottom: 14px;
    display: block;
    position: relative;
    z-index: 1;
    animation: robot-float 3s ease-in-out infinite;
}

@keyframes robot-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

.ai-modal-title {
    font-size: 22px;
    font-weight: 900;
    color: white;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
    font-family: 'Tajawal', sans-serif;
}

.ai-modal-subtitle {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    position: relative;
    z-index: 1;
    font-family: 'Tajawal', sans-serif;
    line-height: 1.6;
}

.ai-modal-body {
    padding: 26px 28px;
}

.ai-features-title {
    font-size: 13px;
    font-weight: 800;
    color: #374151;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Tajawal', sans-serif;
}

.ai-features-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
}

.ai-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #F8F7FF;
    border: 1px solid #EDE9FE;
    transition: all 0.2s;
}

.ai-feature-item:hover {
    border-color: #A78BFA;
    background: #F5F3FF;
}

.ai-feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.ai-feature-icon.purple { background: #EDE9FE; }
.ai-feature-icon.blue   { background: #EFF6FF; }
.ai-feature-icon.green  { background: #ECFDF5; }
.ai-feature-icon.amber  { background: #FFFBEB; }
.ai-feature-icon.rose   { background: #FFF1F2; }

.ai-feature-text strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #1F2937;
    margin-bottom: 2px;
    font-family: 'Tajawal', sans-serif;
}

.ai-feature-text span {
    font-size: 11px;
    color: #6B7280;
    line-height: 1.5;
    font-family: 'Tajawal', sans-serif;
}

.ai-status-bar {
    background: linear-gradient(135deg, #F5F3FF, #EDE9FE);
    border: 1.5px solid #DDD6FE;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.ai-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #F59E0B;
    flex-shrink: 0;
    animation: status-pulse 1.5s ease-in-out infinite;
}

@keyframes status-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.5); }
    50%       { box-shadow: 0 0 0 6px rgba(245,158,11,0); }
}

.ai-status-text {
    font-size: 12px;
    color: #5B21B6;
    font-weight: 700;
    font-family: 'Tajawal', sans-serif;
}

.ai-modal-footer {
    padding: 0 28px 26px;
}

.ai-modal-close-btn {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #7C3AED, #4F46E5);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    font-family: 'Tajawal', sans-serif;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ai-modal-close-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(124,58,237,0.35);
}

/* Dark mode for modal */
[data-theme="dark"] .ai-modal {
    background: #161D30;
}

[data-theme="dark"] .ai-features-title {
    color: #C0CCEE;
}

[data-theme="dark"] .ai-feature-item {
    background: #1C2540;
    border-color: #2A3554;
}

[data-theme="dark"] .ai-feature-item:hover {
    border-color: #7C3AED;
    background: #1A0E3A;
}

[data-theme="dark"] .ai-feature-text strong {
    color: #E8EEFF;
}

[data-theme="dark"] .ai-feature-text span {
    color: #5A6888;
}

[data-theme="dark"] .ai-feature-icon.purple { background: #1A0E3A; }
[data-theme="dark"] .ai-feature-icon.blue   { background: #0F1E40; }
[data-theme="dark"] .ai-feature-icon.green  { background: #052E1E; }
[data-theme="dark"] .ai-feature-icon.amber  { background: #2A1A00; }
[data-theme="dark"] .ai-feature-icon.rose   { background: #2D0812; }

[data-theme="dark"] .ai-status-bar {
    background: linear-gradient(135deg, #1A0E3A, #1C1040);
    border-color: #5B21B6;
}

[data-theme="dark"] .ai-status-text {
    color: #C4B5FD;
}

/* ── Mobile ── */
@media (max-width: 480px) {
    .sidebar { width: 280px; }
    .ai-modal { border-radius: 18px; }
    .ai-modal-header { padding: 24px 20px; }
    .ai-modal-body { padding: 20px; }
    .ai-modal-footer { padding: 0 20px 22px; }
}
</style>

<!-- ══════════════════════════════════════════════
     SIDEBAR JS
══════════════════════════════════════════════ -->
<!-- ══ AI COMING SOON MODAL ══ -->
<div class="ai-modal-overlay" id="aiModal" onclick="if(event.target===this)closeAiModal()">
    <div class="ai-modal">

        <div class="ai-modal-header">
            <span class="ai-modal-robot">🤖</span>
            <div class="ai-modal-title">مساعد المبيعات الذكي</div>
            <div class="ai-modal-subtitle">
                نظام ذكاء اصطناعي مخصص لمتجرك<br>
                سيتعلم من بياناتك ليساعدك على زيادة المبيعات
            </div>
        </div>

        <div class="ai-modal-body">

            <div class="ai-status-bar">
                <div class="ai-status-dot"></div>
                <div class="ai-status-text">⚙️ قيد التطوير — سيكون متاحاً قريباً بعد تدريب النموذج على بياناتك</div>
            </div>

            <div class="ai-features-title">🎯 ما الذي سيفعله هذا المساعد؟</div>

            <div class="ai-features-list">

                <div class="ai-feature-item">
                    <div class="ai-feature-icon purple">🎯</div>
                    <div class="ai-feature-text">
                        <strong>كشف الطلبات الجادة أولاً</strong>
                        <span>يحلل أنماط الطلبات ويحدد العملاء الأكثر احتمالاً للشراء الفعلي بناءً على سلوكهم السابق ووقت الطلب وموقعهم</span>
                    </div>
                </div>

                <div class="ai-feature-item">
                    <div class="ai-feature-icon blue">📞</div>
                    <div class="ai-feature-text">
                        <strong>قائمة الأولويات للتواصل</strong>
                        <span>يرتب طلبات اليوم من الأعلى أولوية للأدنى — تتصل بالجاد أولاً وتوفر وقتك على المشكوك فيهم</span>
                    </div>
                </div>

                <div class="ai-feature-item">
                    <div class="ai-feature-icon rose">⚠️</div>
                    <div class="ai-feature-text">
                        <strong>تنبيه خطر الإلغاء</strong>
                        <span>يكشف الطلبات المعرضة للإلغاء قبل أن تُرسل — بناءً على الولاية والمنتج والتوقيت وتاريخ العميل</span>
                    </div>
                </div>

                <div class="ai-feature-item">
                    <div class="ai-feature-icon green">📊</div>
                    <div class="ai-feature-text">
                        <strong>تحليل أنماط الشراء</strong>
                        <span>يكتشف أي منتجات تُباع معاً، أوقات الذروة في طلباتك، والمناطق الأكثر تحويلاً</span>
                    </div>
                </div>

                <div class="ai-feature-item">
                    <div class="ai-feature-icon amber">💡</div>
                    <div class="ai-feature-text">
                        <strong>توصيات تشغيلية يومية</strong>
                        <span>كل صباح يعطيك ملخصاً: "اتصل بهؤلاء الـ5 أولاً"، "هذا المنتج سيشح"، "الأربعاء أفضل يوم للشحن"</span>
                    </div>
                </div>

            </div>

            <div style="font-size:11px;color:#9CA3AF;text-align:center;font-family:'Tajawal',sans-serif;line-height:1.7;padding:0 4px">
                🔒 النموذج سيُدرَّب <strong>فقط على بيانات متجرك</strong> — لا تُشارك بيانات مع أي طرف خارجي
            </div>

        </div>

        <div class="ai-modal-footer">
            <button class="ai-modal-close-btn" onclick="closeAiModal()">
                ✓ فهمت، أنتظر الإطلاق
            </button>
        </div>

    </div>
</div>

<script>
(function() {
    'use strict';

    window.toggleSidebar = function() {
        var sidebar  = document.getElementById('sidebar');
        var overlay  = document.querySelector('.sidebar-overlay');
        var isActive = sidebar.classList.contains('active');

        if (isActive) {
            sidebar.classList.remove('active');
            if (overlay) {
                overlay.classList.remove('active');
                setTimeout(function() { overlay.style.display = 'none'; }, 300);
            }
        } else {
            if (overlay) { overlay.style.display = 'block'; }
            requestAnimationFrame(function() {
                requestAnimationFrame(function() {
                    sidebar.classList.add('active');
                    if (overlay) overlay.classList.add('active');
                });
            });
        }
    };

    window.openAiComingSoon = function() {
        var modal = document.getElementById('aiModal');
        if (modal) {
            modal.classList.add('open');
            // إغلاق القائمة الجانبية عند فتح المودال على الموبايل
            var sb = document.getElementById('sidebar');
            if (sb && window.innerWidth < 768) toggleSidebar();
        }
    };

    window.closeAiModal = function() {
        var modal = document.getElementById('aiModal');
        if (modal) modal.classList.remove('open');
    };

    // إغلاق بـ Escape
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            var modal = document.getElementById('aiModal');
            if (modal && modal.classList.contains('open')) { closeAiModal(); return; }
            var sb = document.getElementById('sidebar');
            if (sb && sb.classList.contains('active')) toggleSidebar();
        }
    });

})();
</script>