<!-- 0. DASHBOARD VIEW -->
<div id="view-dashboard" class="view-section h-full p-6 flex flex-col overflow-y-auto">
    <div id="dashboard-filters" class="mb-6 flex gap-3 flex-wrap items-end bg-gray-800/40 p-4 rounded-xl border border-gray-700/50 backdrop-blur-sm shadow-lg">
        <div id="dashboard-owner-filter-wrap" class="flex flex-col gap-1.5">
            <label class="text-[11px] font-bold text-gray-400 mr-1 flex items-center gap-1">
                <i class="fa-solid fa-user-tie text-blue-400"></i> فیلتر مسئول
            </label>
            <select id="dashboard-owner-filter" class="input bg-gray-900 border-gray-700 text-sm w-full md:w-64 focus:ring-blue-500/50" onchange="app.loadDashboard()">
                <option value="">همه مسئول‌ها (کل سیستم)</option>
            </select>
        </div>
        <div class="flex flex-col gap-1.5">
            <label class="text-[11px] font-bold text-gray-400 mr-1 flex items-center gap-1">
                <i class="fa-solid fa-circle-info text-yellow-400"></i> وضعیت معاملات
            </label>
            <select id="dashboard-status-filter" class="input bg-gray-900 border-gray-700 text-sm w-full md:w-48 focus:ring-yellow-500/50" onchange="app.loadDashboard()">
                <option value="all">همه وضعیت‌ها</option>
                <option value="Pending">جاری (در جریان)</option>
                <option value="Won">موفق (برنده شده)</option>
                <option value="Lost">ناموفق (باخته شده)</option>
            </select>
        </div>
        <button onclick="app.loadDashboard()" class="btn-primary h-[42px] px-6 rounded-lg text-sm transition-all hover:bg-blue-600 flex items-center gap-2">
            <i class="fa-solid fa-arrows-rotate"></i> بروزرسانی داشبورد
        </button>
    </div>
    <div id="dashboard-content"></div>
</div>

<!-- 0.1 PERFORMANCE DASHBOARD VIEW -->
<div id="view-performance-dashboard" class="view-section h-full p-6 hidden flex flex-col overflow-y-auto">
    <div id="performance-dashboard-content"></div>
</div>

<!-- 1.0 OPERATION MANAGER VIEW -->
<div id="view-operation-manager" class="view-section h-full p-6 hidden flex flex-col overflow-y-auto">
    <div class="flex flex-col xl:flex-row gap-4">
        <div class="xl:w-[68%] flex flex-col gap-4">
            <div class="glass p-4 border border-gray-700/60">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-4">
                    <div>
                        <h3 class="text-lg font-bold text-white flex items-center gap-2">
                            <i class="fa-solid fa-sliders text-yellow-500"></i>
                            مدیریت عملیات
                        </h3>
                        <p class="text-xs text-gray-400 mt-1">فیلتر ترکیبی لید، معامله، فعالیت، پرداخت و تاریخچه مسئول</p>
                    </div>
                    <div class="flex gap-2 flex-wrap">
                        <button onclick="app.previewOperationManager(1)" class="btn-primary px-4 py-2 rounded text-sm flex items-center gap-2">
                            <i class="fa-solid fa-magnifying-glass"></i>
                            پیش‌نمایش
                        </button>
                        <button onclick="app.exportOperationManagerResults()" class="bg-emerald-700 hover:bg-emerald-600 text-white px-4 py-2 rounded text-sm flex items-center gap-2 border border-emerald-600">
                            <i class="fa-solid fa-file-csv"></i>
                            خروجی CSV
                        </button>
                        <button onclick="app.clearOperationManagerFilters()" class="bg-gray-800 hover:bg-gray-700 text-gray-200 px-4 py-2 rounded text-sm border border-gray-700">
                            <i class="fa-solid fa-rotate-left ml-1"></i>
                            پاکسازی
                        </button>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-3">
                    <div>
                        <label class="text-xs text-gray-400 mb-1 block">جستجو</label>
                        <input id="om-search" type="text" class="input w-full bg-gray-900" placeholder="نام، موبایل، کد مشتری" onkeypress="if(event.key==='Enter') app.previewOperationManager(1)">
                    </div>
                    <div class="relative">
                        <label class="text-xs text-gray-400 mb-1 block">مسئول فعلی</label>
                        <div id="om-owner-filter-wrap" class="relative">
                            <button type="button" id="om-owner-filter-btn" onclick="app.toggleOmOwnerDropdown()" class="input w-full bg-gray-900 text-right flex items-center justify-between cursor-pointer">
                                <span id="om-owner-filter-label" class="truncate text-gray-300">همه مسئول‌ها</span>
                                <i class="fa-solid fa-chevron-down text-gray-500 text-xs mr-2 flex-shrink-0"></i>
                            </button>
                            <div id="om-owner-filter-dropdown" class="hidden absolute z-40 top-full right-0 left-0 mt-1 bg-gray-900 border border-gray-600 rounded shadow-xl max-h-56 overflow-y-auto">
                                <label class="flex items-center gap-2 px-3 py-2 hover:bg-gray-800 cursor-pointer border-b border-gray-700 text-xs text-gray-400">
                                    <input type="checkbox" id="om-owner-all" class="accent-yellow-500" checked onchange="app.omOwnerFilterToggleAll(this.checked)">
                                    همه مسئول‌ها
                                </label>
                                <label class="flex items-center gap-2 px-3 py-2 hover:bg-gray-800 cursor-pointer border-b border-gray-700 text-xs text-cyan-300">
                                    <input type="checkbox" class="accent-yellow-500 om-owner-check" value="__pool:crm_leads" onchange="app.omOwnerFilterChange()">
                                    لید CRM (مخزن بدون مسئول)
                                </label>
                                <div id="om-owner-filter-list"></div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <label class="text-xs text-gray-400 mb-1 block">مسئول قبلی</label>
                        <select id="om-prev-owner-filter" class="input w-full bg-gray-900">
                            <option value="">همه مسئول‌های قبلی</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-xs text-gray-400 mb-1 block">وضعیت فروش لید</label>
                        <select id="om-sale-status-filter" class="input w-full bg-gray-900">
                            <option value="">همه</option>
                            <option value="1">موفق</option>
                            <option value="0">ناموفق</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-xs text-gray-400 mb-1 block">وضعیت آخرین معامله</label>
                        <select id="om-deal-status-filter" class="input w-full bg-gray-900">
                            <option value="">همه</option>
                            <option value="Pending">در جریان</option>
                            <option value="Won">موفق</option>
                            <option value="Lost">ناموفق</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-xs text-gray-400 mb-1 block">مخزن لید</label>
                        <select id="om-pool-filter" class="input w-full bg-gray-900">
                            <option value="">همه مخزن‌ها</option>
                            <option value="crm_leads">لید CRM</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-xs text-gray-400 mb-1 block">پرداخت</label>
                        <select id="om-has-payment-filter" class="input w-full bg-gray-900">
                            <option value="">همه</option>
                            <option value="1">دارای پرداخت</option>
                            <option value="0">بدون پرداخت</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-xs text-gray-400 mb-1 block">آخرین معامله قدیمی‌تر از</label>
                        <input id="om-deal-older-than-days" type="number" min="1" class="input w-full bg-gray-900" placeholder="مثلا 30 روز">
                    </div>
                    <div>
                        <label class="text-xs text-gray-400 mb-1 block">از تاریخ ثبت لید</label>
                        <input id="om-lead-date-from" type="text" class="input w-full bg-gray-900" placeholder="1403/01/01">
                    </div>
                    <div>
                        <label class="text-xs text-gray-400 mb-1 block">تا تاریخ ثبت لید</label>
                        <input id="om-lead-date-to" type="text" class="input w-full bg-gray-900" placeholder="1403/12/29">
                    </div>
                    <div>
                        <label class="text-xs text-gray-400 mb-1 block">از آخرین فعالیت</label>
                        <input id="om-last-activity-from" type="text" class="input w-full bg-gray-900" placeholder="1403/01/01">
                    </div>
                    <div>
                        <label class="text-xs text-gray-400 mb-1 block">تا آخرین فعالیت</label>
                        <input id="om-last-activity-to" type="text" class="input w-full bg-gray-900" placeholder="1403/12/29">
                    </div>
                    <div>
                        <label class="text-xs text-gray-400 mb-1 block">از آخرین معامله</label>
                        <input id="om-last-deal-from" type="text" class="input w-full bg-gray-900" placeholder="1403/01/01">
                    </div>
                    <div>
                        <label class="text-xs text-gray-400 mb-1 block">تا آخرین معامله</label>
                        <input id="om-last-deal-to" type="text" class="input w-full bg-gray-900" placeholder="1403/12/29">
                    </div>
                    <div>
                        <label class="text-xs text-gray-400 mb-1 block">از آخرین پرداخت</label>
                        <input id="om-last-payment-from" type="text" class="input w-full bg-gray-900" placeholder="1403/01/01">
                    </div>
                    <div>
                        <label class="text-xs text-gray-400 mb-1 block">تا آخرین پرداخت</label>
                        <input id="om-last-payment-to" type="text" class="input w-full bg-gray-900" placeholder="1403/12/29">
                    </div>
                </div>
                <label class="mt-4 inline-flex items-center gap-2 text-sm text-gray-300">
                    <input id="om-no-owner-filter" type="checkbox" class="accent-yellow-500">
                    فقط لیدهای بدون مسئول
                </label>
            </div>

            <div class="glass border border-gray-700/60 overflow-hidden">
                <div class="p-4 border-b border-gray-700/60 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
                    <div id="om-preview-summary" class="text-sm text-gray-300">برای مشاهده نتایج، پیش‌نمایش را اجرا کنید.</div>
                    <div class="flex gap-3 items-center flex-wrap text-xs text-gray-400">
                        <label class="inline-flex items-center gap-2">
                            <input id="om-select-all-matching" type="checkbox" class="accent-yellow-500" onchange="app.toggleOperationManagerAllMatching(this.checked)">
                            انتخاب همه موارد مطابق فیلتر
                        </label>
                        <button onclick="app.clearOperationManagerSelection()" class="text-yellow-400 hover:text-yellow-300">پاک کردن انتخاب</button>
                    </div>
                </div>
                <div id="om-results" class="overflow-x-auto"></div>
                <div id="om-pagination" class="p-4 border-t border-gray-700/60"></div>
            </div>
        </div>

        <div class="xl:w-[32%] flex flex-col gap-4">
            <div class="glass p-4 border border-gray-700/60">
                <h4 class="font-bold text-white mb-3 flex items-center gap-2">
                    <i class="fa-solid fa-bolt text-yellow-500"></i>
                    عملیات گروهی
                </h4>
                <div class="space-y-3">
                    <div>
                        <label class="text-xs text-gray-400 mb-1 block">نوع عملیات</label>
                        <select id="om-operation-type" class="input w-full bg-gray-900" onchange="app.updateOperationManagerActionVisibility()">
                            <option value="change_owner">تغییر مسئول</option>
                            <option value="move_to_crm_pool">انتقال به لید CRM و حذف مسئول</option>
                            <option value="mark_lost_and_pool">ناموفق کردن آخرین معامله و انتقال به لید CRM</option>
                        </select>
                    </div>
                    <div id="om-operation-owner-wrap">
                        <label class="text-xs text-gray-400 mb-1 block">مسئول جدید</label>
                        <select id="om-operation-owner" class="input w-full bg-gray-900">
                            <option value="">انتخاب مسئول</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-xs text-gray-400 mb-1 block">دلیل / یادداشت</label>
                        <textarea id="om-operation-reason" rows="2" class="input w-full bg-gray-900" placeholder="مثلا عدم توانمندی کارشناس فروش"></textarea>
                    </div>
                    <button id="om-execute-btn" onclick="app.executeOperationManager()" class="w-full btn-primary py-2 rounded text-sm flex items-center justify-center gap-2">
                        <i class="fa-solid fa-play"></i>
                        اجرای عملیات
                    </button>
                </div>
            </div>

            <div class="glass p-4 border border-gray-700/60">
                <div class="flex items-center justify-between gap-2 mb-3">
                    <h4 class="font-bold text-white flex items-center gap-2">
                        <i class="fa-solid fa-clock-rotate-left text-cyan-400"></i>
                        شرط‌های خودکار
                    </h4>
                    <button onclick="app.fillDefaultOperationRule()" class="text-xs text-yellow-400 hover:text-yellow-300">قالب یک ماهه</button>
                </div>
                <div class="space-y-3">
                    <input id="om-rule-id" type="hidden">
                    <div>
                        <label class="text-xs text-gray-400 mb-1 block">نام شرط</label>
                        <input id="om-rule-name" class="input w-full bg-gray-900" placeholder="مثلا انتقال لیدهای بدون پرداخت">
                    </div>
                    <div class="grid grid-cols-2 gap-2">
                        <label class="inline-flex items-center gap-2 text-sm text-gray-300 bg-gray-900 border border-gray-700 rounded p-2">
                            <input id="om-rule-active" type="checkbox" class="accent-yellow-500" checked>
                            فعال
                        </label>
                        <select id="om-rule-schedule-type" class="input w-full bg-gray-900">
                            <option value="daily">روزانه</option>
                            <option value="hourly">ساعتی</option>
                            <option value="manual">دستی</option>
                        </select>
                    </div>
                    <div class="bg-gray-900/60 border border-gray-700 rounded p-3">
                        <div class="flex items-center justify-between gap-2 mb-3">
                            <div>
                                <div class="text-sm font-bold text-white">شرط‌ها</div>
                                <div class="text-[11px] text-gray-500 mt-0.5">همه شرط‌های زیر باید برقرار باشند</div>
                            </div>
                            <button onclick="app.addOperationRuleCondition()" class="text-xs bg-cyan-500/10 hover:bg-cyan-500/20 text-cyan-200 border border-cyan-700/60 px-2 py-1 rounded">
                                <i class="fa-solid fa-plus ml-1"></i>
                                شرط جدید
                            </button>
                        </div>
                        <div id="om-rule-condition-builder" class="space-y-2"></div>
                    </div>
                    <div class="bg-gray-900/60 border border-gray-700 rounded p-3">
                        <div class="text-sm font-bold text-white mb-3">عملیات خودکار</div>
                        <div class="space-y-3">
                            <div>
                                <label class="text-xs text-gray-400 mb-1 block">نوع عملیات</label>
                                <select id="om-rule-operation-type" class="input w-full bg-gray-900" onchange="app.syncOperationRuleBuilderToJson()">
                                    <option value="mark_lost_and_pool">ناموفق کردن آخرین معامله و انتقال به لید CRM</option>
                                    <option value="move_to_crm_pool">انتقال به لید CRM و حذف مسئول</option>
                                    <option value="change_owner">تغییر مسئول</option>
                                </select>
                            </div>
                            <div id="om-rule-operation-owner-wrap" class="hidden">
                                <label class="text-xs text-gray-400 mb-1 block">مسئول جدید</label>
                                <select id="om-rule-operation-owner" class="input w-full bg-gray-900" onchange="app.syncOperationRuleBuilderToJson()">
                                    <option value="">انتخاب مسئول</option>
                                </select>
                            </div>
                            <div>
                                <label class="text-xs text-gray-400 mb-1 block">دلیل</label>
                                <input id="om-rule-operation-reason" class="input w-full bg-gray-900" value="عدم توانمندی کارشناس فروش" oninput="app.syncOperationRuleBuilderToJson()">
                            </div>
                        </div>
                    </div>
                    <details id="om-rule-json-details" class="bg-gray-950/70 border border-gray-800 rounded p-3">
                        <summary class="cursor-pointer text-xs text-gray-300 select-none">JSON پیشرفته</summary>
                        <div class="mt-3 space-y-3">
                            <div>
                                <label class="text-xs text-gray-400 mb-1 block">Filter JSON</label>
                                <textarea id="om-rule-json-filter" rows="3" class="input w-full bg-gray-900 dir-ltr text-left font-mono text-xs"></textarea>
                            </div>
                            <div>
                                <label class="text-xs text-gray-400 mb-1 block">Condition JSON</label>
                                <textarea id="om-rule-json-condition" rows="4" class="input w-full bg-gray-900 dir-ltr text-left font-mono text-xs" oninput="app.syncOperationRuleJsonToBuilder()"></textarea>
                            </div>
                            <div>
                                <label class="text-xs text-gray-400 mb-1 block">Operation JSON</label>
                                <textarea id="om-rule-json-operation" rows="5" class="input w-full bg-gray-900 dir-ltr text-left font-mono text-xs" oninput="app.syncOperationRuleJsonToBuilder()"></textarea>
                            </div>
                        </div>
                    </details>
                    <div class="flex gap-2">
                        <button id="om-rule-save-btn" onclick="app.saveOperationManagerRule()" class="btn-primary flex-1 py-2 rounded text-sm">ذخیره شرط</button>
                        <button onclick="app.resetOperationManagerRuleForm()" class="bg-gray-800 hover:bg-gray-700 text-gray-200 px-3 py-2 rounded text-sm border border-gray-700">جدید</button>
                    </div>
                </div>
                <div id="om-rules-list" class="mt-4 space-y-2"></div>
            </div>

            <div class="glass p-4 border border-gray-700/60">
                <h4 class="font-bold text-white mb-3 flex items-center gap-2">
                    <i class="fa-solid fa-box-archive text-emerald-400"></i>
                    مخزن لید CRM
                </h4>
                <div id="om-pools-list" class="space-y-2 text-sm"></div>
            </div>

            <div class="glass p-4 border border-gray-700/60">
                <h4 class="font-bold text-white mb-3 flex items-center gap-2">
                    <i class="fa-solid fa-list-check text-blue-400"></i>
                    آخرین اجراها
                </h4>
                <div id="om-runs-list" class="space-y-2 text-sm"></div>
            </div>
        </div>
    </div>
</div>

<!-- 1. LEADS VIEW -->
<div id="view-leads" class="view-section h-full p-6 hidden flex flex-col">
    <!-- Mobile: Filter Toggle Button -->
    <div class="mb-4 flex gap-3 flex-wrap items-center">
        <div class="grid grid-cols-[minmax(0,1fr)_9rem_auto] md:grid-cols-[minmax(18rem,1fr)_10rem_auto] gap-2 w-full md:w-auto flex-1 min-w-0">
            <input type="text" id="leads-search" placeholder="جستجو..." class="input min-w-0 touch-input" onkeypress="if(event.key==='Enter') app.loadLeads(1)">
            <input type="text" id="leads-customer-code-search" placeholder="کد مشتری" class="input min-w-0 touch-input" onkeypress="if(event.key==='Enter') app.loadLeads(1)">
            <button type="button" onclick="app.loadLeads(1)" class="btn-primary px-4 py-2 rounded text-sm whitespace-nowrap touch-input">
                <i class="fa-solid fa-magnifying-glass ml-1"></i> جستجو
            </button>
        </div>

        <!-- Mobile: Filter Toggle -->
        <button type="button" onclick="app.toggleFilters('leads')" class="btn-primary px-4 py-2 rounded text-sm flex items-center gap-2 touch-input mobile-only filter-toggle-btn">
            <i class="fa-solid fa-filter"></i>
            <span>فیلترها</span>
            <span id="leads-filter-count" class="filter-count-badge mobile-only hidden">0</span>
        </button>

        <?php if(isAdmin()): ?>
        <button onclick="app.openDidarSearchModal()" class="btn-primary px-4 py-2 rounded text-sm desktop-only">
            <i class="fa-solid fa-search ml-1"></i> جستجو در دیدار
        </button>
        <?php endif; ?>
    </div>

    <!-- Collapsible Filters Container -->
    <div id="leads-filters" class="filters-collapsible glass p-4 mb-4">
        <div class="flex justify-between items-center mb-4 mobile-only">
            <h3 class="font-bold text-white text-sm"><i class="fa-solid fa-filter ml-2"></i>فیلترهای لیدها</h3>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <!-- Stage Filter -->
            <div>
                <label class="text-xs text-gray-400 mb-1 block">وضعیت فروش</label>
                <select id="leads-stage-filter" class="input bg-gray-800 w-full touch-input filter-input" onchange="app.onFilterChange('leads')">
                    <option value="all">همه لیدها</option>
                    <option value="success">موفق</option>
                    <option value="failed">ناموفق</option>
                </select>
            </div>

            <!-- Owner Filter -->
            <?php if(isAdminOrCrmSpecialist()): ?>
            <div>
                <label class="text-xs text-gray-400 mb-1 block">مسئول لید</label>
                <select id="leads-owner-filter" class="input bg-gray-800 w-full touch-input filter-input" onchange="app.onFilterChange('leads')">
                    <option value="">همه مسئول‌ها</option>
                </select>
            </div>
            <?php endif; ?>

            <!-- Register Date Range -->
            <div>
                <label class="text-xs text-gray-400 mb-1 block">از تاریخ ثبت</label>
                <input type="text" id="leads-register-from" class="input w-full touch-input filter-input" placeholder="۱۴۰۳/۰۱/۰۱" onkeypress="if(event.key==='Enter') app.loadLeads(1)">
            </div>
            <div>
                <label class="text-xs text-gray-400 mb-1 block">تا تاریخ ثبت</label>
                <input type="text" id="leads-register-to" class="input w-full touch-input filter-input" placeholder="۱۴۰۳/۱۲/۲۹" onkeypress="if(event.key==='Enter') app.loadLeads(1)">
            </div>

            <!-- Activity Date Range -->
            <div>
                <label class="text-xs text-gray-400 mb-1 block">از تاریخ فعالیت</label>
                <input type="text" id="leads-activity-from" class="input w-full touch-input filter-input" placeholder="۱۴۰۳/۰۱/۰۱" onkeypress="if(event.key==='Enter') app.loadLeads(1)">
            </div>
            <div>
                <label class="text-xs text-gray-400 mb-1 block">تا تاریخ فعالیت</label>
                <input type="text" id="leads-activity-to" class="input w-full touch-input filter-input" placeholder="۱۴۰۳/۱۲/۲۹" onkeypress="if(event.key==='Enter') app.loadLeads(1)">
            </div>

            <!-- Product Filter -->
            <div>
                <label class="text-xs text-gray-400 mb-1 block">محصول / خدمت</label>
                <select id="leads-product-filter" class="input bg-gray-800 w-full touch-input filter-input" onchange="app.onFilterChange('leads')">
                    <option value="">محصول / خدمت</option>
                </select>
            </div>

            <!-- Customer Level Filter -->
            <div>
                <label class="text-xs text-gray-400 mb-1 block">سطح مشتری</label>
                <select id="leads-customer-level-filter" class="input bg-gray-800 w-full touch-input filter-input" onchange="app.onFilterChange('leads')">
                    <option value="">سطح مشتری</option>
                    <option value="طلایی">طلایی</option>
                    <option value="نقره‌ای">نقره‌ای</option>
                    <option value="برنز">برنز</option>
                </select>
            </div>
        </div>

        <!-- Mobile: Sticky Action Buttons -->
        <div class="sticky-filter-actions mobile-only mt-4">
            <button onclick="app.clearAllFilters('leads')" class="clear-filters-btn flex-1">
                <i class="fa-solid fa-trash ml-1"></i>حذف فیلتر
            </button>
            <button onclick="app.applyFilters('leads')" class="btn-primary flex-1">
                <i class="fa-solid fa-check ml-1"></i>اعمال فیلتر
            </button>
        </div>
    </div>

    <!-- Desktop: Show action buttons inline -->
    <div class="mb-4 flex gap-2 flex-wrap desktop-only">
        <button type="button" id="leads-desktop-filter-toggle" onclick="app.toggleFilters('leads')" class="btn-primary px-4 py-2 rounded text-sm flex items-center gap-2">
            <i id="leads-desktop-filter-toggle-icon" class="fa-solid fa-chevron-down transition-transform"></i>
            <span id="leads-desktop-filter-toggle-text">نمایش فیلترها</span>
            <span id="leads-desktop-filter-count" class="filter-count-badge hidden">0</span>
        </button>
        <button type="button" onclick="app.openLocalMobileLookup()" class="btn-primary px-4 py-2 rounded text-sm">
            <i class="fa-solid fa-mobile-screen ml-1"></i> استعلام سریع شماره
        </button>
        <?php if(isAdmin()): ?>
        <button type="button" onclick="app.openBulkPhoneLookupModal()" class="btn-primary px-4 py-2 rounded text-sm flex items-center gap-2">
            <i class="fa-solid fa-magnifying-glass-chart"></i>
            استعلام انبوه از فایل
        </button>
        <?php endif; ?>
        <?php if(isAdmin()): ?>
        <button onclick="app.openDidarSearchModal()" class="btn-primary px-4 py-2 rounded text-sm">
            <i class="fa-solid fa-search ml-1"></i> جستجو در دیدار
        </button>
        <button type="button" onclick="app.openImportLeadsModal()" class="btn-primary px-4 py-2 rounded text-sm flex items-center gap-2">
            <i class="fa-solid fa-file-import"></i>
            ایمپورت از اکسل
        </button>
        <?php endif; ?>
        <button type="button" id="leads-add-btn" onclick="app.openLeadModal()" class="btn-primary px-4 py-2 rounded text-sm flex items-center gap-2">
            <i class="fa-solid fa-user-plus"></i>
            ثبت لید جدید
        </button>
        <button type="button" onclick="app.clearAllFilters('leads')" class="clear-filters-btn px-4 py-2 rounded text-sm">
            <i class="fa-solid fa-trash ml-1"></i>حذف فیلتر
        </button>
        <button onclick="app.loadLeads(1)" class="btn-primary px-6 rounded-lg">اعمال فیلتر</button>
    </div>

    <!-- Mobile: Bottom Sheet Filter Button (Alternative) - REMOVED -->
    <!-- <div class="mb-4 mobile-only">
        <button type="button" onclick="app.openBottomSheetFilters('leads')" class="w-full btn-primary py-3 rounded-lg touch-input">
            <i class="fa-solid fa-sliders ml-2"></i>
            فیلترهای پیشرفته
            <span id="leads-bottom-filter-count" class="filter-count-badge mobile-only hidden">0</span>
        </button>
    </div> -->

    <!-- Content Area -->
    <div class="flex-1 overflow-y-auto pb-24">
        <div id="leads-list" class="grid grid-cols-1 gap-4"></div>
        <div id="leads-pagination" class="pagination-spacer"></div>
    </div>

    <!-- Mobile: Sticky Pagination -->
    <div id="leads-sticky-pagination" class="sticky-pagination mobile-only hidden"></div>
</div>

<!-- 1.1 BLATAKLIF LEADS VIEW -->
<div id="view-blataklif-leads" class="view-section h-full p-6 hidden flex flex-col">
    <div class="mb-4 flex gap-3 flex-wrap">
        <input type="text" id="blataklif-leads-search" placeholder="جستجو..." class="input w-full md:w-72 lg:w-80" onkeypress="if(event.key==='Enter') app.loadBlataklifLeads(1)">
        <select id="blataklif-leads-sale-status-filter" class="input bg-gray-800 w-full md:w-48">
            <option value="all">همه</option>
            <option value="success">موفق</option>
            <option value="failed">ناموفق</option>
        </select>
        <button onclick="app.loadBlataklifLeads(1)" class="btn-primary px-6 rounded-lg">فیلتر</button>
        <div class="text-xs text-gray-400 flex items-center gap-2">
            <span class="px-2 py-1 bg-gray-800 rounded">این لیست از «لیدها» جداست</span>
        </div>
    </div>
    <div class="flex-1 overflow-y-auto pb-24">
        <div id="blataklif-leads-list" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4"></div>
        <div id="blataklif-leads-pagination"></div>
    </div>
</div>

<!-- 2. DEALS VIEW -->
<div id="view-deals" class="view-section h-full p-6 hidden flex flex-col">
    <div class="glass flex-1 overflow-hidden flex flex-col">
        <div class="p-4 border-b border-gray-700/50 flex flex-col gap-4">
            <div class="flex justify-between items-center">
                <h3 class="font-bold text-yellow-500 text-lg flex items-center gap-2">
                    <i class="fa-solid fa-sack-dollar text-xl"></i>
                    لیست معاملات
                </h3>
                <span class="text-[10px] text-gray-500 bg-gray-800/50 px-2.5 py-1 rounded-full border border-gray-700/30">
                    <i class="fa-solid fa-cloud-arrow-down ml-1"></i>
                    مستقیم از دیدار
                </span>
            </div>

            <!-- Horizontal Filter Bar -->
            <div class="flex flex-wrap gap-3 items-center bg-gray-900/30 p-3 rounded-2xl border border-gray-800/50">
                <!-- Search -->
                <div class="relative flex-[2_1_24rem] min-w-[220px]">
                    <i class="fa-solid fa-search absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 text-xs"></i>
                    <input type="text" id="deals-search" placeholder="جستجوی معامله یا مشتری..."
                        class="input bg-gray-800/50 border-gray-700/50 pr-9 text-xs w-full focus:ring-yellow-500/30"
                        onkeypress="if(event.key==='Enter') app.loadDeals()">
                </div>
                <div class="relative flex-[0_0_10rem]">
                    <i class="fa-solid fa-id-card absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 text-xs"></i>
                    <input type="text" id="deals-customer-code-search" placeholder="کد مشتری"
                        class="input bg-gray-800/50 border-gray-700/50 pr-9 text-xs w-full focus:ring-yellow-500/30"
                        onkeypress="if(event.key==='Enter') app.loadDeals()">
                </div>

                <!-- Status Filter -->
                <div class="flex flex-col gap-1">
                    <select id="deals-status-filter" class="input bg-gray-800/50 border-gray-700/50 text-[11px] h-9 min-w-[120px] focus:ring-yellow-500/30" onchange="app.loadDeals()">
                        <option value="all">همه وضعیت‌ها</option>
                        <option value="pending">جاری</option>
                        <option value="won">موفق</option>
                        <option value="lost">ناموفق</option>
                    </select>
                </div>

                <div class="flex flex-col gap-1">
                    <select id="deals-bucket-filter" class="input bg-gray-800/50 border-gray-700/50 text-[11px] h-9 min-w-[120px] focus:ring-yellow-500/30" onchange="app.loadDeals()">
                        <option value="all">همه مسیرها</option>
                        <option value="active">غیر پارک‌شده</option>
                        <option value="parked">پارک‌شده</option>
                    </select>
                </div>

                <div class="flex flex-col gap-1">
                    <select id="deals-requested-service-filter" class="input bg-gray-800/50 border-gray-700/50 text-[11px] h-9 min-w-[150px] focus:ring-yellow-500/30" onchange="app.loadDeals()">
                        <option value="">همه خدمات درخواستی</option>
                    </select>
                </div>

                <!-- Stage Filter -->
                <div class="flex flex-col gap-1">
                    <select id="deals-pipeline-filter" class="input bg-gray-800/50 border-gray-700/50 text-[11px] h-9 min-w-[140px] focus:ring-yellow-500/30" onchange="app.loadDeals()">
                        <option value="all">همه مراحل کاریز</option>
                        <option value="بلاتکلیف">بلاتکلیف</option>
                        <option value="معامله جدید">معامله جدید</option>
                        <option value="تماس عدم پاسخ">تماس عدم پاسخ</option>
                        <option value="تماس پیگیری">تماس پیگیری</option>
                        <option value="ارسال لینک پرداخت">ارسال لینک پرداخت</option>
                        <option value="پرداخت">پرداخت</option>
                        <option value="پیگیری مانده حساب">پیگیری مانده حساب</option>
                        <option value="برگزاری دوره">برگزاری دوره</option>
                        <option value="پشتیبانی">پشتیبانی</option>
                        <option value="ارجاع به CRM">ارجاع به CRM</option>
                    </select>
                </div>

                <!-- Owner Filter (Admin only) -->
                <?php if(isAdminOrCrmSpecialist()): ?>
                <div class="flex flex-col gap-1">
                    <select id="deals-owner-filter" class="input bg-gray-800/50 border-gray-700/50 text-[11px] h-9 min-w-[140px] focus:ring-yellow-500/30" onchange="app.loadDeals()">
                        <option value="">همه مسئول‌ها</option>
                    </select>
                </div>
                <?php endif; ?>

                <!-- Date Filter -->
                <div class="flex gap-2">
                    <input type="text" id="deals-register-from" class="input bg-gray-800/50 border-gray-700/50 text-[11px] h-9 w-28 focus:ring-yellow-500/30" placeholder="از تاریخ ثبت" onkeypress="if(event.key==='Enter') app.loadDeals()">
                    <input type="text" id="deals-register-to" class="input bg-gray-800/50 border-gray-700/50 text-[11px] h-9 w-28 focus:ring-yellow-500/30" placeholder="تا تاریخ ثبت" onkeypress="if(event.key==='Enter') app.loadDeals()">
                </div>

                <div class="flex gap-2">
                    <input type="text" id="deals-activity-from" class="input bg-gray-800/50 border-gray-700/50 text-[11px] h-9 w-28 focus:ring-yellow-500/30" placeholder="از تاریخ فعالیت" onkeypress="if(event.key==='Enter') app.loadDeals()">
                    <input type="text" id="deals-activity-to" class="input bg-gray-800/50 border-gray-700/50 text-[11px] h-9 w-28 focus:ring-yellow-500/30" placeholder="تا تاریخ فعالیت" onkeypress="if(event.key==='Enter') app.loadDeals()">
                </div>

                <!-- Refresh Button -->
                <button onclick="app.loadDeals()" class="btn-primary h-9 px-4 rounded-xl text-xs transition-all hover:scale-105 flex items-center gap-2">
                    <i class="fa-solid fa-arrows-rotate"></i>
                    بروزرسانی
                </button>
                <?php if(isAdmin()): ?>
                <button onclick="app.runLostKarizReconcile()" class="h-9 px-4 rounded-xl text-xs transition-all border border-red-500/30 bg-red-500/10 text-red-200 hover:bg-red-500/20 flex items-center gap-2">
                    <i class="fa-solid fa-broom"></i>
                    خروج ناموفق‌ها از کاریز
                </button>
                <?php endif; ?>
            </div>

            <!-- Quick Filter Chips -->
            <div class="flex gap-2 overflow-x-auto pb-1 no-scrollbar">
                <button onclick="app.setQuickStatusFilter('all')" class="quick-filter-chip active" data-status="all">همه</button>
                <button onclick="app.setQuickStatusFilter('pending')" class="quick-filter-chip" data-status="pending">جاری</button>
                <button onclick="app.setQuickStatusFilter('won')" class="quick-filter-chip" data-status="won">موفق</button>
                <button onclick="app.setQuickStatusFilter('lost')" class="quick-filter-chip" data-status="lost">ناموفق</button>
            </div>
        </div>
        <div class="overflow-y-auto p-4 pb-24">
            <div id="deals-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-5"></div>
        </div>
    </div>
</div>

<!-- Legacy Deals View -->
<div id="view-legacy-deals" class="view-section h-full p-6 hidden flex flex-col">
    <div class="glass flex-1 overflow-hidden flex flex-col">
        <div class="p-4 border-b border-gray-700 flex flex-col gap-4">
            <div class="flex justify-between items-center">
                <h3 class="font-bold text-purple-400 text-lg flex items-center gap-2">
                    <i class="fa-solid fa-clock-rotate-left text-xl"></i>
                    معاملات گذشته دیدار
                </h3>
                <span class="text-[10px] text-gray-500 bg-gray-800/50 px-2.5 py-1 rounded-full border border-gray-700/30">
                    فقط معاملات ایمپورت شده
                </span>
            </div>
            <div class="flex flex-wrap gap-3 items-center bg-gray-900/30 p-3 rounded-2xl border border-gray-800/50">
                <div class="relative flex-1 min-w-[200px]">
                    <i class="fa-solid fa-search absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 text-xs"></i>
                    <input type="text" id="legacy-deals-search" placeholder="جستجو در معاملات گذشته..."
                        class="input bg-gray-800/50 border-gray-700/50 pr-9 text-xs w-full focus:ring-yellow-500/30"
                        onkeypress="if(event.key==='Enter') app.loadLegacyDeals()">
                </div>

                <div class="flex flex-col gap-1">
                    <select id="legacy-deals-status-filter" class="input bg-gray-800/50 border-gray-700/50 text-[11px] h-9 min-w-[120px] focus:ring-yellow-500/30" onchange="app.loadLegacyDeals()">
                        <option value="all">همه وضعیت‌ها</option>
                        <option value="pending">در جریان</option>
                        <option value="won">موفق</option>
                        <option value="lost">ناموفق</option>
                    </select>
                </div>

                <?php if(isAdminOrCrmSpecialist()): ?>
                <div class="flex flex-col gap-1">
                    <select id="legacy-deals-owner-filter" class="input bg-gray-800/50 border-gray-700/50 text-[11px] h-9 min-w-[140px] focus:ring-yellow-500/30" onchange="app.loadLegacyDeals()">
                        <option value="">همه مسئول‌ها</option>
                    </select>
                </div>
                <?php endif; ?>

                <button onclick="app.loadLegacyDeals()" class="btn-primary h-9 px-4 rounded-xl text-xs transition-all hover:scale-105 flex items-center gap-2">
                    <i class="fa-solid fa-arrows-rotate"></i>
                    به‌روزرسانی
                </button>
            </div>
        </div>
        <div class="overflow-y-auto p-4 pb-24">
            <div id="legacy-deals-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-5"></div>
            <div id="legacy-deals-pagination" class="flex justify-center mt-6">
                <button id="legacy-deals-load-more" onclick="app.loadMoreLegacyDeals()" class="btn-primary px-6 py-2 rounded-lg hidden">
                    نمایش بیشتر
                </button>
            </div>
        </div>
    </div>
</div>

<?php if(isAdminOrCrmSpecialist()): ?>
<!-- 3. REFERRALS VIEW -->
<div id="view-referrals" class="view-section h-full p-6 hidden flex flex-col">
    <div class="glass flex-1 overflow-hidden flex flex-col">
        <div class="p-4 border-b border-gray-700 flex justify-between items-center">
            <h3 class="font-bold text-pink-500">ارجاع‌های به CRM</h3>
            <button class="text-xs text-gray-400 hover:text-white" onclick="app.loadReferrals()"><i class="fa-solid fa-rotate-right ml-1"></i> بروزرسانی</button>
        </div>
        <div class="overflow-y-auto pb-24">
            <div class="cc-queue-scroll">
                <table class="w-full text-sm text-right min-w-[800px]">
                    <thead class="bg-gray-800 text-gray-400 text-xs">
                        <tr>
                            <th class="p-3">لید</th>
                            <th class="p-3">شماره‌ها</th>
                            <th class="p-3">ارجاع‌دهنده</th>
                            <th class="p-3">تاریخ ارجاع</th>
                            <th class="p-3">توضیحات</th>
                        </tr>
                    </thead>
                    <tbody id="referrals-list" class="text-gray-300 text-xs"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<?php endif; ?>

<!-- 4. SETTINGS VIEW -->
<div id="view-settings" class="view-section flex-1 min-h-0 p-4 sm:p-6 hidden flex flex-col overflow-y-auto pb-24">
    <div class="glass w-full max-w-6xl mx-auto p-4 sm:p-6 mb-6">
        <h3 class="font-bold text-white mb-6 text-lg sm:text-xl">تنظیمات</h3>

        <div class="mb-6 p-3 bg-gray-900/30 border border-gray-800 rounded-xl">
            <p class="text-xs text-gray-400 mb-2">پرش سریع بین بخش‌ها</p>
            <div class="flex flex-wrap gap-2">
                <button type="button" class="px-3 py-2 rounded-lg text-xs border border-gray-700 bg-gray-800/60 text-gray-200" data-settings-section-btn="account" onclick="app.switchSettingsSection('account')">حساب کاربری</button>
                <button type="button" class="px-3 py-2 rounded-lg text-xs border border-gray-700 bg-gray-800/60 text-gray-200" data-settings-section-btn="integration" onclick="app.switchSettingsSection('integration')">یکپارچه‌سازی</button>
                <button type="button" class="px-3 py-2 rounded-lg text-xs border border-gray-700 bg-gray-800/60 text-gray-200" data-settings-section-btn="system" onclick="app.switchSettingsSection('system')">فلگ‌های سیستمی</button>
            </div>
        </div>

        <div id="settings-section-account" class="space-y-6" data-settings-section="account">
            <?php if(isAdmin()): ?>
            <div class="border border-gray-700 rounded-lg p-4 sm:p-6 bg-gradient-to-br from-purple-900/20 to-blue-900/20">
                <h4 class="text-lg font-bold text-purple-400 mb-4">
                    <i class="fa-solid fa-master-key ml-2"></i> رمز عبور اصلی
                </h4>
                <p class="text-xs text-gray-400 mb-4">
                    <i class="fa-solid fa-info-circle ml-1"></i>
                    با تنظیم رمز عبور اصلی، می‌توانید با همین رمز وارد حساب سایر کاربران شوید.
                </p>
                <form onsubmit="app.setMasterPassword(event)" class="space-y-4">
                    <div>
                        <label class="text-sm text-gray-400 mb-1 block">رمز عبور مدیر (فعلی)</label>
                        <input type="password" name="current_admin_password" id="master-current-admin" placeholder="رمز عبور مدیر" class="input" required>
                    </div>
                    <div>
                        <label class="text-sm text-gray-400 mb-1 block">رمز عبور اصلی جدید</label>
                        <input type="password" name="new_master_password" id="master-new-password" placeholder="حداقل 6 کاراکتر" class="input" required minlength="6">
                    </div>
                    <div>
                        <label class="text-sm text-gray-400 mb-1 block">تأیید رمز عبور اصلی</label>
                        <input type="password" name="confirm_master_password" id="master-confirm-password" placeholder="تکرار رمز عبور اصلی" class="input" required minlength="6">
                    </div>
                    <button type="submit" class="btn-primary w-full py-2 rounded-lg bg-purple-600 hover:bg-purple-500">
                        <i class="fa-solid fa-save ml-2"></i> ذخیره رمز عبور اصلی
                    </button>
                </form>
            </div>
            <?php endif; ?>

            <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
                <div class="border border-gray-700 rounded-lg p-4 sm:p-6">
                    <h4 class="text-lg font-bold text-yellow-500 mb-4">
                        <i class="fa-solid fa-key ml-2"></i> تغییر رمز عبور
                    </h4>
                    <form onsubmit="app.changePasswordFromSettings(event)" class="space-y-4">
                        <input type="hidden" name="user_id" id="settings-change-password-user-id" value="<?php echo $_SESSION['user_id'] ?? 0; ?>">
                        <div>
                            <label class="text-sm text-gray-400 mb-1 block">رمز عبور فعلی</label>
                            <input type="password" name="current_password" id="settings-current-password" placeholder="رمز عبور فعلی" class="input" required>
                        </div>
                        <div>
                            <label class="text-sm text-gray-400 mb-1 block">رمز عبور جدید</label>
                            <input type="password" name="new_password" id="settings-new-password" placeholder="حداقل 6 کاراکتر" class="input" required minlength="6">
                        </div>
                        <div>
                            <label class="text-sm text-gray-400 mb-1 block">تأیید رمز عبور جدید</label>
                            <input type="password" name="confirm_password" id="settings-confirm-password" placeholder="تکرار رمز عبور جدید" class="input" required minlength="6">
                        </div>
                        <button type="submit" class="btn-primary w-full py-2 rounded-lg">
                            <i class="fa-solid fa-save ml-2"></i> ذخیره رمز عبور
                        </button>
                    </form>
                </div>

                <div class="border border-gray-700 rounded-lg p-4 sm:p-6">
                    <h4 class="text-lg font-bold text-yellow-500 mb-4">
                        <i class="fa-solid fa-user ml-2"></i> اطلاعات کاربری
                    </h4>
                    <div class="space-y-3 text-sm">
                        <div class="flex justify-between gap-3">
                            <span class="text-gray-400 shrink-0">نام:</span>
                            <span class="text-white text-left break-words"><?php echo htmlspecialchars($_SESSION['name'] ?? ''); ?></span>
                        </div>
                        <div class="flex justify-between gap-3">
                            <span class="text-gray-400 shrink-0">ایمیل:</span>
                            <span class="text-white text-left break-all"><?php echo htmlspecialchars($_SESSION['email'] ?? ''); ?></span>
                        </div>
                        <div class="flex justify-between gap-3">
                            <span class="text-gray-400 shrink-0">نقش:</span>
                            <span class="text-white text-left"><?php
                                $role = $_SESSION['role'] ?? '';
                                echo $role === 'admin' ? 'مدیر' : ($role === 'crm_specialist' ? 'کارشناس CRM' : 'کارشناس');
                            ?></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="settings-section-integration" class="space-y-6 hidden" data-settings-section="integration">
            <?php if(isAdmin()): ?>
            <div class="border border-gray-700 rounded-lg p-4 sm:p-6">
                <div class="flex items-center justify-between gap-3 mb-4">
                    <h4 class="text-lg font-bold text-yellow-500">
                        <i class="fa-solid fa-cloud-arrow-up ml-2"></i> تنظیمات ارسال به دیدار
                    </h4>
                    <span id="settings-badge-didar-write" class="text-[11px] px-2 py-1 rounded-full border border-gray-700 text-gray-300 bg-gray-800/70">بدون تغییر</span>
                </div>
                <p class="text-xs text-gray-400 mb-4">در صورت غیرفعال بودن، لید و فعالیت جدید فقط در سیستم ثبت می‌شود و به دیدار ارسال نمی‌شود.</p>
                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
                    <label class="flex items-start gap-2 text-sm">
                        <input type="checkbox" id="settings-didar-write-enabled" class="accent-yellow-500">
                        <span class="leading-relaxed">ارسال لید و فعالیت جدید به دیدار</span>
                    </label>
                    <button type="button" onclick="app.saveDidarWriteSettings()" class="btn-primary w-full lg:w-auto px-4 py-2 rounded text-xs">ذخیره</button>
                </div>
                <p class="text-[11px] text-gray-500 mt-3">اثر: ارسال خودکار به دیدار | ریسک: احتمال ایجاد داده ناخواسته در دیدار | زمان استفاده: در حالت عملیاتی عادی روشن باشد.</p>
                <p class="text-xs text-gray-500 mt-2" id="settings-didar-write-status"></p>
            </div>

            <div class="border border-gray-700 rounded-lg p-4 sm:p-6 bg-gray-900/20">
                <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-3 mb-4">
                    <div>
                        <h4 class="text-lg font-bold text-yellow-500">
                            <i class="fa-solid fa-plug-circle-bolt ml-2"></i> API خارجی
                        </h4>
                        <p class="text-xs text-gray-400 mt-2">کلید مشترک برای اتصال Soodran و اپلیکیشن‌های داخلی به SaleOs.</p>
                    </div>
                    <span id="settings-badge-external-api" class="text-[11px] px-2 py-1 rounded-full border border-gray-700 text-gray-300 bg-gray-800/70 self-start">بدون تغییر</span>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                    <div class="space-y-3">
                        <label class="flex items-start gap-2 text-sm">
                            <input type="checkbox" id="settings-external-api-enabled" class="accent-yellow-500 mt-1">
                            <span class="leading-relaxed">فعال بودن API خارجی</span>
                        </label>
                        <div>
                            <label class="text-xs text-gray-400 mb-1 block">Endpoint</label>
                            <input type="text" id="settings-external-api-endpoint" class="input text-left ltr" readonly value="/?api=get_lead_assignment">
                        </div>
                        <div>
                            <label class="text-xs text-gray-400 mb-1 block">کلید فعلی</label>
                            <input type="text" id="settings-external-api-token-masked" class="input text-left ltr" readonly placeholder="هنوز کلیدی ساخته نشده">
                        </div>
                        <p class="text-xs text-gray-500" id="settings-external-api-status"></p>
                    </div>

                    <div class="space-y-3">
                        <div>
                            <label class="text-xs text-gray-400 mb-1 block">رمز عبور ادمین برای ساخت/حذف کلید</label>
                            <input type="password" id="settings-external-api-admin-password" class="input" autocomplete="current-password" placeholder="رمز عبور ادمین">
                        </div>
                        <div id="settings-external-api-new-token-box" class="hidden border border-yellow-500/40 bg-yellow-500/10 rounded-lg p-3">
                            <div class="text-xs text-yellow-300 mb-2">کلید جدید فقط همین حالا کامل نمایش داده می‌شود.</div>
                            <textarea id="settings-external-api-new-token" class="input text-left ltr min-h-[86px]" readonly></textarea>
                            <button type="button" onclick="app.copyExternalApiToken()" class="mt-2 px-3 py-1.5 rounded bg-gray-700 hover:bg-gray-600 text-xs">
                                <i class="fa-solid fa-copy ml-1"></i> کپی کلید
                            </button>
                        </div>
                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
                            <button type="button" onclick="app.saveExternalApiSettings()" class="btn-primary px-4 py-2 rounded text-xs">ذخیره وضعیت</button>
                            <button type="button" onclick="app.generateExternalApiToken()" class="px-4 py-2 rounded text-xs bg-green-700 hover:bg-green-600 text-white">ساخت کلید</button>
                            <button type="button" onclick="app.revokeExternalApiToken()" class="px-4 py-2 rounded text-xs bg-red-700 hover:bg-red-600 text-white">حذف کلید</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="border border-gray-700 rounded-lg p-4 sm:p-6 bg-gray-900/20">
                <div class="flex items-center justify-between gap-3 mb-4">
                    <h4 class="text-lg font-bold text-yellow-500">
                        <i class="fa-solid fa-user-gear ml-2"></i> تنظیمات ورودی اپ
                    </h4>
                    <span id="settings-badge-service-governance" class="text-[11px] px-2 py-1 rounded-full border border-gray-700 text-gray-300 bg-gray-800/70">بدون تغییر</span>
                </div>
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
                    <div>
                        <label class="text-xs text-gray-400 mb-1 block">مسئول پیش‌فرض لیدهای اپ</label>
                        <select id="settings-app-default-owner" class="input">
                            <option value="">-- انتخاب کاربر --</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-xs text-gray-400 mb-1 block">کد منبع</label>
                        <input type="text" id="settings-app-source-code" class="input ltr text-left" placeholder="mobile_app">
                    </div>
                    <div>
                        <label class="text-xs text-gray-400 mb-1 block">انتخاب معامله VIP مؤثر</label>
                        <select id="settings-vip-effective-deal-strategy" class="input">
                            <option value="latest_vip_deal">آخرین معامله VIP</option>
                            <option value="latest_paid_vip_deal">آخرین معامله VIP تسویه‌شده</option>
                        </select>
                    </div>
                </div>
                <div class="mt-4 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
                    <p class="text-xs text-gray-500" id="settings-service-governance-status"></p>
                    <button type="button" onclick="app.saveServiceGovernanceSettings()" class="btn-primary w-full lg:w-auto px-4 py-2 rounded text-xs">ذخیره تنظیمات اپ</button>
                </div>
            </div>

            <div class="border border-gray-700 rounded-lg p-4 sm:p-6">
                <div class="flex items-center justify-between gap-3 mb-4">
                    <h4 class="text-lg font-bold text-yellow-500">
                        <i class="fa-solid fa-database ml-2"></i> مایگریشن خودکار
                    </h4>
                    <span id="settings-badge-auto-migration" class="text-[11px] px-2 py-1 rounded-full border border-gray-700 text-gray-300 bg-gray-800/70">بدون تغییر</span>
                </div>
                <p class="text-xs text-gray-400 mb-4">در صورت فعال بودن، در بارگذاری‌های معمول وب نیز مایگریشن اجرا می‌شود (توصیه: فقط هنگام نیاز فعال شود).</p>
                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
                    <label class="flex items-start gap-2 text-sm">
                        <input type="checkbox" id="settings-auto-migration-enabled" class="accent-yellow-500">
                        <span class="leading-relaxed">اجرای خودکار مایگریشن در شروع برنامه</span>
                    </label>
                    <button type="button" onclick="app.saveAutoMigrationSettings()" class="btn-primary w-full lg:w-auto px-4 py-2 rounded text-xs">ذخیره</button>
                </div>
                <p class="text-[11px] text-gray-500 mt-3">اثر: اجرای خودکار تغییرات ساختاری | ریسک: کندی بارگذاری یا خطای غیرمنتظره | زمان استفاده: فقط هنگام استقرار/تغییرات دیتابیس.</p>
                <p class="text-xs text-gray-500 mt-2" id="settings-auto-migration-status"></p>
            </div>

            <div class="border border-gray-700 rounded-lg p-4 sm:p-6">
                <div class="flex items-center justify-between gap-3 mb-4">
                    <h4 class="text-lg font-bold text-yellow-500">
                        <i class="fa-solid fa-plug-circle-bolt ml-2"></i> API خارجی لید
                    </h4>
                    <span id="settings-badge-external-api" class="text-[11px] px-2 py-1 rounded-full border border-gray-700 text-gray-300 bg-gray-800/70">بدون تغییر</span>
                </div>
                <p class="text-xs text-gray-400 mb-4">این بخش برای اپ‌های داخلی دیگر است تا با API مشترک، وضعیت اختصاص کارشناس فروش برای لید را از `SaleOs` بخوانند.</p>
                <div class="space-y-4">
                    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
                        <label class="flex items-start gap-2 text-sm">
                            <input type="checkbox" id="settings-external-api-enabled" class="accent-yellow-500">
                            <span class="leading-relaxed">فعال بودن API خارجی</span>
                        </label>
                        <button type="button" onclick="app.saveExternalApiSettings()" class="btn-primary w-full lg:w-auto px-4 py-2 rounded text-xs">ذخیره وضعیت</button>
                    </div>

                    <div class="grid grid-cols-1 xl:grid-cols-[minmax(0,1fr)_220px] gap-3 items-end">
                        <div>
                            <label class="text-sm text-gray-400 mb-1 block">API Key فعلی</label>
                            <input type="text" id="settings-external-api-token" class="input font-mono text-xs" value="" readonly>
                        </div>
                        <div>
                            <label class="text-sm text-gray-400 mb-1 block">آدرس endpoint</label>
                            <input type="text" id="settings-external-api-endpoint" class="input font-mono text-xs" value="/?api=get_lead_assignment" readonly>
                        </div>
                    </div>

                    <div>
                        <label class="text-sm text-gray-400 mb-1 block">رمز عبور مدیر برای ایجاد/حذف key</label>
                        <input type="password" id="settings-external-api-admin-password" class="input" placeholder="رمز عبور فعلی مدیر">
                    </div>

                    <div class="flex flex-col sm:flex-row gap-3">
                        <button type="button" onclick="app.generateExternalApiToken()" class="btn-primary w-full sm:w-auto px-4 py-2 rounded text-xs bg-emerald-600 hover:bg-emerald-500">
                            <i class="fa-solid fa-wand-magic-sparkles ml-2"></i> ایجاد یا بازتولید API Key
                        </button>
                        <button type="button" onclick="app.revokeExternalApiToken()" class="btn-primary w-full sm:w-auto px-4 py-2 rounded text-xs bg-red-600 hover:bg-red-500">
                            <i class="fa-solid fa-trash ml-2"></i> حذف API Key
                        </button>
                    </div>

                    <div class="border border-gray-800 rounded-lg px-3 py-3 bg-gray-900/40">
                        <p class="text-xs text-gray-400">آخرین key ساخته‌شده فقط در همان لحظه نمایش داده می‌شود. بعد از رفرش صفحه فقط نسخه masked آن نمایش داده می‌شود.</p>
                        <p class="text-xs text-gray-500 mt-2" id="settings-external-api-status"></p>
                    </div>
                </div>
            </div>
            <?php else: ?>
            <div class="border border-gray-700 rounded-lg p-4 sm:p-6 bg-gray-900/30 text-sm text-gray-400">تنظیمات یکپارچه‌سازی فقط برای مدیر سیستم قابل دسترسی است.</div>
            <?php endif; ?>
        </div>

        <div id="settings-section-system" class="space-y-6 hidden" data-settings-section="system">
            <?php if(isAdmin()): ?>
            <div class="border border-gray-700 rounded-lg p-4 sm:p-6 bg-gray-900/30">
                <div class="flex items-center justify-between gap-3 mb-4">
                    <h4 class="text-lg font-bold text-yellow-500">
                        <i class="fa-solid fa-flask ml-2"></i> فلگ‌های سیستمی
                    </h4>
                    <span id="settings-badge-feature-flags" class="text-[11px] px-2 py-1 rounded-full border border-gray-700 text-gray-300 bg-gray-800/70">بدون تغییر</span>
                </div>
                <p class="text-xs text-gray-400 mb-4">این گزینه‌ها رفتار ناوبری SPA و جلوگیری از نمایش داده‌های قدیمی در مودال را کنترل می‌کنند.</p>
                <div class="space-y-4">
                    <div class="border border-gray-800 rounded-lg px-3 py-3 bg-gray-900/40">
                        <label class="flex items-start sm:items-center justify-between gap-4">
                            <span class="text-sm text-gray-200 leading-relaxed">فعال‌سازی History داخلی SPA</span>
                            <input type="checkbox" id="settings-feature-history-enabled" class="accent-yellow-500 shrink-0 mt-1 sm:mt-0">
                        </label>
                        <p class="text-[11px] text-gray-500 mt-2">اثر: دکمه Back/Forward داخل اپ کار می‌کند | ریسک: تداخل با جریان قدیمی ناوبری | زمان استفاده: پس از تست کامل داخلی.</p>
                    </div>
                    <div class="border border-gray-800 rounded-lg px-3 py-3 bg-gray-900/40">
                        <label class="flex items-start sm:items-center justify-between gap-4">
                            <span class="text-sm text-gray-200 leading-relaxed">محافظت از تازگی داده مودال‌ها</span>
                            <input type="checkbox" id="settings-feature-freshness-enabled" class="accent-yellow-500 shrink-0 mt-1 sm:mt-0">
                        </label>
                        <p class="text-[11px] text-gray-500 mt-2">اثر: پاسخ قدیمی درخواست‌ها وارد UI نمی‌شود | ریسک: در شبکه بسیار ناپایدار برخی پاسخ‌ها نادیده گرفته می‌شوند | زمان استفاده: برای جلوگیری از نمایش داده اشتباه همیشه روشن بماند.</p>
                    </div>
                </div>
                <div class="mt-4 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
                    <p class="text-xs text-gray-500" id="settings-feature-flags-status"></p>
                    <button type="button" onclick="app.saveFeatureFlagSettings()" class="btn-primary w-full lg:w-auto px-4 py-2 rounded text-xs">ذخیره فلگ‌های سیستمی</button>
                </div>
            </div>
            <?php else: ?>
            <div class="border border-gray-700 rounded-lg p-4 sm:p-6 bg-gray-900/30 text-sm text-gray-400">مدیریت فلگ‌های سیستمی فقط برای مدیر سیستم فعال است.</div>
            <?php endif; ?>
        </div>
    </div>
</div>

<?php if(isAdmin()): ?>
<!-- 4.4 LOOKUPS VIEW (ADMIN) -->
<div id="view-lookups" class="view-section h-full p-6 hidden flex flex-col overflow-y-auto pb-24">
    <!-- Tabs -->
    <div class="flex gap-3 mb-4 border-b border-gray-700">
        <button onclick="app.switchLookupTab('groups')" class="lookup-tab px-4 py-2 text-sm text-gray-400 hover:text-white border-b-2 border-transparent active" data-tab="groups">
            <i class="fa-solid fa-list ml-1"></i> Lookup Groups
        </button>
        <button onclick="app.switchLookupTab('fields')" class="lookup-tab px-4 py-2 text-sm text-gray-400 hover:text-white border-b-2 border-transparent" data-tab="fields">
            <i class="fa-solid fa-sliders ml-1"></i> Field Configurations
        </button>
    </div>

    <!-- Field Configurations Tab (Removed separate tab, merged into groups) -->
    <div id="lookup-groups-tab" class="lookup-tab-content glass p-6">
        <div class="flex justify-between items-center mb-4">
            <h3 class="font-bold text-white">مدیریت لوکاپ‌ها و فیلدها</h3>
            <button onclick="app.loadLookupAdmin(true)" class="text-xs text-gray-400 hover:text-white">
                <i class="fa-solid fa-rotate-right ml-1"></i> بروزرسانی
            </button>
        </div>

        <div class="grid grid-cols-1 gap-6 mb-6">
            <div class="bg-gray-900/40 p-4 rounded-xl border border-gray-800">
                <label class="block text-xs font-bold text-blue-400 mb-2 uppercase tracking-wider">انتخاب فیلد یا گروه جهت تنظیمات</label>
                <select id="lookup-group-select" class="input bg-gray-800 w-full border-gray-700 focus:ring-blue-500/50" onchange="app.onLookupGroupChange()">
                    <option value="">-- انتخاب کنید --</option>
                </select>
            </div>
        </div>

        <!-- Field Configuration Settings Panel -->
        <div id="field-advanced-settings" class="hidden bg-gray-800/40 p-5 rounded-xl border border-gray-700/50 mb-6">
            <h4 class="text-sm font-bold text-blue-400 mb-4 flex items-center gap-2">
                <i class="fa-solid fa-sliders"></i> تنظیمات فیلد
            </h4>

            <!-- Row 1: Basic Settings -->
            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-4">
                <label class="flex items-center gap-2 text-xs text-gray-400 cursor-pointer group bg-gray-900/40 p-3 rounded-lg border border-gray-700/50 hover:border-blue-500/50 transition-colors">
                    <input type="checkbox" id="fc-is-required" onchange="app.saveFieldConfigurationMerged()" class="w-4 h-4 rounded border-gray-600 bg-gray-900 text-blue-600">
                    <span class="group-hover:text-white">اجباری</span>
                    <i class="fa-solid fa-circle-info text-gray-600 text-[10px]" title="این فیلد برای ثبت الزامی است"></i>
                </label>
                <label class="flex items-center gap-2 text-xs text-gray-400 cursor-pointer group bg-gray-900/40 p-3 rounded-lg border border-gray-700/50 hover:border-blue-500/50 transition-colors">
                    <input type="checkbox" id="fc-is-editable" onchange="app.saveFieldConfigurationMerged()" class="w-4 h-4 rounded border-gray-600 bg-gray-900 text-blue-600" checked>
                    <span class="group-hover:text-white">قابل ویرایش</span>
                    <i class="fa-solid fa-circle-info text-gray-600 text-[10px]" title="کاربران مجاز می‌توانند این فیلد را ویرایش کنند"></i>
                </label>
                <label class="flex items-center gap-2 text-xs text-gray-400 cursor-pointer group bg-gray-900/40 p-3 rounded-lg border border-gray-700/50 hover:border-blue-500/50 transition-colors">
                    <input type="checkbox" id="fc-is-editable-after-create" onchange="app.saveFieldConfigurationMerged()" class="w-4 h-4 rounded border-gray-600 bg-gray-900 text-blue-600" checked>
                    <span class="group-hover:text-white">ویرایش پس از ثبت</span>
                    <i class="fa-solid fa-circle-info text-gray-600 text-[10px]" title="آیا پس از اولین ثبت قابل ویرایش است؟"></i>
                </label>
                <label class="flex items-center gap-2 text-xs text-gray-400 cursor-pointer group bg-gray-900/40 p-3 rounded-lg border border-gray-700/50 hover:border-blue-500/50 transition-colors">
                    <input type="checkbox" id="fc-is-active" onchange="app.saveFieldConfigurationMerged()" class="w-4 h-4 rounded border-gray-600 bg-gray-900 text-blue-600" checked>
                    <span class="group-hover:text-white">فعال</span>
                    <i class="fa-solid fa-circle-info text-gray-600 text-[10px]" title="اگر غیرفعال شود، این فیلد نمایش داده نمی‌شود"></i>
                </label>
            </div>

            <!-- Row 2: Role Permissions -->
            <div class="bg-gray-900/40 p-4 rounded-lg border border-gray-700/50 mb-4">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-[10px] text-gray-500 uppercase font-bold mb-2">دسترسی ویرایش:</label>
                        <div class="flex flex-wrap items-center gap-3" id="fc-roles-container">
                            <label class="flex items-center gap-1 text-[11px] text-gray-400 cursor-pointer hover:text-white">
                                <input type="checkbox" value="admin" onchange="app.saveFieldConfigurationMerged()" class="role-checkbox w-3 h-3 rounded"> مدیر
                            </label>
                            <label class="flex items-center gap-1 text-[11px] text-gray-400 cursor-pointer hover:text-white">
                                <input type="checkbox" value="crm_specialist" onchange="app.saveFieldConfigurationMerged()" class="role-checkbox w-3 h-3 rounded"> CRM
                            </label>
                            <label class="flex items-center gap-1 text-[11px] text-gray-400 cursor-pointer hover:text-white">
                                <input type="checkbox" value="agent" onchange="app.saveFieldConfigurationMerged()" class="role-checkbox w-3 h-3 rounded"> کارشناس
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-[10px] text-gray-500 uppercase font-bold mb-2">دسترسی حذف:</label>
                        <div class="flex flex-wrap items-center gap-3" id="fc-delete-roles-container">
                            <label class="flex items-center gap-1 text-[11px] text-gray-400 cursor-pointer hover:text-white">
                                <input type="checkbox" value="admin" onchange="app.saveFieldConfigurationMerged()" class="delete-role-checkbox w-3 h-3 rounded"> مدیر
                            </label>
                            <label class="flex items-center gap-1 text-[11px] text-gray-400 cursor-pointer hover:text-white">
                                <input type="checkbox" value="crm_specialist" onchange="app.saveFieldConfigurationMerged()" class="delete-role-checkbox w-3 h-3 rounded"> CRM
                            </label>
                            <label class="flex items-center gap-1 text-[11px] text-gray-400 cursor-pointer hover:text-white">
                                <input type="checkbox" value="agent" onchange="app.saveFieldConfigurationMerged()" class="delete-role-checkbox w-3 h-3 rounded"> کارشناس
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-[10px] text-gray-500 uppercase font-bold mb-2">نقش‌های مشاهده:</label>
                        <div class="flex flex-wrap items-center gap-3" id="fc-view-roles-container">
                            <label class="flex items-center gap-1 text-[11px] text-gray-400 cursor-pointer hover:text-white">
                                <input type="checkbox" value="admin" onchange="app.saveFieldConfigurationMerged()" class="view-role-checkbox w-3 h-3 rounded"> مدیر
                            </label>
                            <label class="flex items-center gap-1 text-[11px] text-gray-400 cursor-pointer hover:text-white">
                                <input type="checkbox" value="crm_specialist" onchange="app.saveFieldConfigurationMerged()" class="view-role-checkbox w-3 h-3 rounded"> CRM
                            </label>
                            <label class="flex items-center gap-1 text-[11px] text-gray-400 cursor-pointer hover:text-white">
                                <input type="checkbox" value="agent" onchange="app.saveFieldConfigurationMerged()" class="view-role-checkbox w-3 h-3 rounded"> کارشناس
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Row 3: Advanced Settings -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
                <div>
                    <label class="block text-[10px] text-gray-500 uppercase font-bold mb-1">برچسب فیلد (نمایش فارسی)</label>
                    <input type="text" id="fc-field-label" class="input bg-gray-900 text-xs w-full" placeholder="مثال: 4 رقم آخر کارت" onchange="app.saveFieldConfigurationMerged()">
                </div>
                <div>
                    <label class="block text-[10px] text-gray-500 uppercase font-bold mb-1">مقدار پیش‌فرض</label>
                    <input type="text" id="fc-default-value" class="input bg-gray-900 text-xs w-full" placeholder="مثال: card_reader" onchange="app.saveFieldConfigurationMerged()">
                </div>
                <div>
                    <label class="block text-[10px] text-gray-500 uppercase font-bold mb-1">گروه/تب</label>
                    <input type="text" id="fc-group-name" class="input bg-gray-900 text-xs w-full" placeholder="مثال: اطلاعات مالی" onchange="app.saveFieldConfigurationMerged()">
                </div>
            </div>

            <!-- Row 4: Validation & Help -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                <div>
                    <label class="block text-[10px] text-gray-500 uppercase font-bold mb-1">الگوی اعتبارسنجی (Regex)</label>
                    <input type="text" id="fc-validation-pattern" class="input bg-gray-900 text-xs w-full font-mono" placeholder="مثال: ^\d{4}$" onchange="app.saveFieldConfigurationMerged()">
                    <p class="text-[9px] text-gray-600 mt-1">فقط کاراکترهایی که با این الگو مطابقت دارند مجاز هستند</p>
                </div>
                <div>
                    <label class="block text-[10px] text-gray-500 uppercase font-bold mb-1">متن راهنما (Tooltip)</label>
                    <textarea id="fc-help-text" class="input bg-gray-900 text-xs w-full h-16 resize-none" placeholder="این متن به عنوان راهنما در کنار فیلد نمایش داده می‌شود..." onchange="app.saveFieldConfigurationMerged()"></textarea>
                </div>
            </div>

            <!-- Row 5: Conditional Logic -->
            <div class="bg-gray-900/40 p-4 rounded-lg border border-gray-700/50">
                <label class="block text-[10px] text-gray-500 uppercase font-bold mb-2">
                    <i class="fa-solid fa-code-branch text-yellow-500 ml-1"></i>
                    منطق شرطی (اختیاری)
                </label>
                <p class="text-[10px] text-gray-600 mb-2">این فیلد را فقط زمانی نمایش بده که شرط زیر برقرار باشد:</p>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <input type="text" id="fc-conditional-field" class="input bg-gray-800 text-xs" placeholder="نام فیلد وابسته (مثال: payment_method)">
                    <select id="fc-conditional-operator" class="input bg-gray-800 text-xs">
                        <option value="=">=  برابر</option>
                        <option value="!=">≠  نابرابر</option>
                        <option value="in">در لیست</option>
                        <option value="not_empty">پر باشد</option>
                        <option value="empty">خالی باشد</option>
                    </select>
                    <input type="text" id="fc-conditional-value" class="input bg-gray-800 text-xs" placeholder="مقدار (مثال: card_to_card)">
                </div>
                <input type="hidden" id="fc-conditional-logic">
                <button type="button" onclick="app.applyConditionalLogicFromUI()" class="text-[10px] text-blue-400 hover:text-blue-300 mt-2">
                    <i class="fa-solid fa-check ml-1"></i> اعمال شرط
                </button>
            </div>
        </div>

        <div id="lookup-items-section" class="hidden mt-6">
            <div class="flex flex-wrap items-center justify-between gap-4 mb-4 bg-gray-800/30 p-4 rounded-xl border border-gray-700/50">
                <div class="flex items-center gap-3">
                    <h4 class="text-sm font-bold text-gray-300 flex items-center gap-2">
                        <i class="fa-solid fa-list-ul text-blue-400"></i> گزینه‌های لیست
                    </h4>
                    <button id="lookup-add-item-btn" onclick="app.addLookupRow()" class="btn-primary px-4 py-1.5 rounded-lg text-[11px] font-bold">
                        <i class="fa-solid fa-plus ml-1"></i> افزودن گزینه جدید
                    </button>
                </div>
            </div>

            <div class="overflow-x-auto border border-gray-800 rounded-xl">
                <table class="w-full text-right text-sm">
                    <thead class="bg-gray-800/80 text-gray-400">
                        <tr>
                            <th class="p-3 font-medium">عنوان نمایش</th>
                            <th class="p-3 font-medium">مقدار (Value)</th>
                            <th class="p-3 font-medium">کد (Code)</th>
                            <th class="p-3 font-medium">Meta JSON</th>
                            <th id="lookup-col-header-service-price" class="p-3 font-medium hidden">قیمت (تومان)</th>
                            <th id="lookup-col-header-service-price-list-code" class="p-3 font-medium hidden">کد لیست قیمت</th>
                            <th id="lookup-col-header-service-products" class="p-3 font-medium hidden">محصولات لینک‌شده</th>
                            <th id="lookup-col-header-destination-bank-name" class="p-3 font-medium hidden">نام بانک</th>
                            <th id="lookup-col-header-destination-account-type" class="p-3 font-medium hidden">نوع حساب</th>
                            <th id="lookup-col-header-destination-card" class="p-3 font-medium hidden">کارت</th>
                            <th id="lookup-col-header-destination-account" class="p-3 font-medium hidden">حساب</th>
                            <th id="lookup-col-header-destination-sheba" class="p-3 font-medium hidden">شبا</th>
                            <th id="lookup-col-header-destination-owner" class="p-3 font-medium hidden">صاحب حساب</th>
                            <th id="lookup-col-header-destination-tafsili" class="p-3 font-medium hidden">کد تفصیلی</th>
                            <th id="lookup-col-header-stage-disabled-users" class="p-3 font-medium hidden">عدم نمایش برای کاربران</th>
                            <th class="p-3 font-medium">والد</th>
                            <th class="p-3 font-medium w-20 text-center">ترتیب</th>
                            <th class="p-3 font-medium w-20 text-center">فعال</th>
                            <th class="p-3 font-medium w-20 text-center">نمایش</th>
                            <th class="p-3 font-medium text-center">عملیات</th>
                        </tr>
                    </thead>
                    <tbody id="lookup-items-table" class="divide-y divide-gray-800 text-gray-300 bg-gray-900/20"></tbody>
                </table>
            </div>
            <p class="text-[10px] text-gray-500 mt-3 italic">* تغییرات آیتم‌ها بصورت ردیفی اعمال می‌شود. برای هر ردیف دکمه ذخیره وجود دارد.</p>
        </div>

        <div id="lookup-products-manager-section" class="hidden mt-6">
            <div class="flex flex-wrap items-center justify-between gap-4 mb-4 bg-gray-800/30 p-4 rounded-xl border border-gray-700/50">
                <div class="flex items-center gap-3">
                    <h4 class="text-sm font-bold text-gray-300 flex items-center gap-2">
                        <i class="fa-solid fa-box text-yellow-400"></i> مدیریت محصولات
                    </h4>
                    <button id="lookup-add-product-btn" onclick="app.addLookupProductRow()" class="btn-primary px-4 py-1.5 rounded-lg text-[11px] font-bold">
                        <i class="fa-solid fa-plus ml-1"></i> افزودن محصول
                    </button>
                </div>
                <div class="text-xs text-gray-500">در این بخش می‌توانید هر محصول را به یک خدمت از لیست خدمات قابل ارائه لینک کنید.</div>
            </div>
            <div class="overflow-x-auto border border-gray-800 rounded-xl">
                <table class="w-full text-right text-sm">
                    <thead class="bg-gray-800/80 text-gray-400">
                        <tr>
                            <th class="p-3 font-medium">نام محصول</th>
                            <th class="p-3 font-medium">خدمت لینک‌شده</th>
                            <th class="p-3 font-medium text-center">عملیات</th>
                        </tr>
                    </thead>
                    <tbody id="lookup-products-table" class="divide-y divide-gray-800 text-gray-300 bg-gray-900/20"></tbody>
                </table>
            </div>
        </div>

        <div id="lookup-rbac-manager-section" class="hidden mt-6">
            <!-- Scoped layout rules for the RBAC capability editor. The bundled tailwind.min.css
                 is missing several utilities (min-w-0, truncate, shrink-0, break-words), so these
                 deterministic rules guarantee permission rows never overflow or overlap. -->
            <style>
                #rbac-capabilities-container .rbac-cell { min-width: 0; flex: 1 1 0%; }
                #rbac-capabilities-container .rbac-labelwrap { display: flex; align-items: flex-start; gap: 6px; min-width: 0; flex-wrap: wrap; }
                #rbac-capabilities-container .rbac-label { overflow-wrap: anywhere; word-break: break-word; line-height: 1.4; }
                #rbac-capabilities-container .rbac-key { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: right; }
                #rbac-capabilities-container .rbac-badge { flex: 0 0 auto; white-space: nowrap; }
                #rbac-capabilities-container .rbac-cb { flex: 0 0 auto; }
                #rbac-capabilities-container .rbac-tab { flex: 0 0 auto; }
            </style>
            <div class="flex flex-wrap items-center justify-between gap-4 mb-4 bg-gray-800/30 p-4 rounded-xl border border-gray-700/50">
                <div class="flex items-center gap-3">
                    <h4 class="text-sm font-bold text-gray-300 flex items-center gap-2">
                        <i class="fa-solid fa-user-shield text-cyan-400"></i> مدیریت نقش‌ها و دسترسی‌ها (RBAC)
                    </h4>
                    <button type="button" onclick="app.loadLookupRbacManagerData(true)" class="px-3 py-1 rounded bg-gray-700 hover:bg-gray-600 text-xs">
                        <i class="fa-solid fa-rotate-right ml-1"></i> بروزرسانی
                    </button>
                </div>
                <div class="text-xs text-gray-500">نسخه اولیه فاز 2: مدیریت نقش، دسترسی‌ها و scope داده‌ها</div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
                <div class="glass p-4 space-y-3">
                    <div>
                        <label class="block text-xs text-gray-400 mb-1">نقش‌ها</label>
                        <select id="rbac-role-select" class="input bg-gray-800 w-full" onchange="app.onLookupRbacRoleChange()">
                            <option value="">-- انتخاب نقش --</option>
                        </select>
                    </div>
                    <div class="grid grid-cols-1 gap-2">
                        <input type="hidden" id="rbac-role-id" value="">
                        <input type="text" id="rbac-role-key" class="input bg-gray-800 text-xs" placeholder="role_key (مثال: sales_viewer)">
                        <input type="text" id="rbac-role-title" class="input bg-gray-800 text-xs" placeholder="عنوان نقش">
                        <div class="flex items-center gap-2">
                            <label class="text-xs text-gray-400 flex items-center gap-2">
                                <input type="checkbox" id="rbac-role-active" class="accent-yellow-500" checked>
                                فعال
                            </label>
                            <span id="rbac-role-system-badge" class="text-[10px] px-2 py-0.5 rounded bg-gray-700 text-gray-300 hidden">سیستمی</span>
                        </div>
                        <button type="button" onclick="app.saveLookupRbacRole()" class="btn-primary py-2 text-xs rounded">
                            <i class="fa-solid fa-floppy-disk ml-1"></i> ذخیره مشخصات نقش
                        </button>
                        <button type="button" id="rbac-delete-role-btn" onclick="app.deleteLookupRbacRole()" class="py-2 text-xs rounded bg-red-700 hover:bg-red-600 text-white hidden">
                            <i class="fa-solid fa-trash ml-1"></i> حذف نقش
                        </button>
                    </div>

                    <div class="border-t border-gray-700 pt-3 space-y-2">
                        <div class="text-xs text-gray-400 font-bold">ایجاد نقش جدید از تمپلیت</div>
                        <input type="text" id="rbac-clone-role-key" class="input bg-gray-800 text-xs" placeholder="new_role_key">
                        <input type="text" id="rbac-clone-role-title" class="input bg-gray-800 text-xs" placeholder="عنوان نقش جدید">
                        <select id="rbac-clone-template-role" class="input bg-gray-800 text-xs">
                            <option value="">-- تمپلیت نقش --</option>
                        </select>
                        <button type="button" onclick="app.cloneLookupRbacRole()" class="px-3 py-2 rounded bg-cyan-600 hover:bg-cyan-500 text-xs text-white w-full">
                            <i class="fa-solid fa-copy ml-1"></i> ساخت از تمپلیت
                        </button>
                    </div>
                </div>

                <div class="glass p-4 lg:col-span-2" style="grid-column: span 2 / span 2;">
                    <div class="space-y-4">
                        <div class="min-w-0">
                            <div class="flex items-center justify-between mb-2">
                                <h5 class="text-sm font-bold text-white">دسترسی‌ها (Capabilities)</h5>
                                <button type="button" onclick="app.saveLookupRbacCapabilities()" class="px-3 py-1 rounded bg-blue-600 hover:bg-blue-500 text-xs">ذخیره دسترسی‌ها</button>
                            </div>
                            <input id="rbac-capabilities-search" type="text" class="input bg-gray-800 text-xs w-full mb-2" placeholder="جستجو در عنوان یا کلید فنی..." oninput="app.renderLookupRbacCapabilities()">
                            <div class="flex items-center gap-2 mb-2">
                                <span class="text-[10px] text-gray-500">فیلتر:</span>
                                <button type="button" data-rbac-filter-btn="all" onclick="app.setRbacCapabilityFilter('all')" class="rbac-filter-chip px-2.5 py-1 rounded-full text-[11px] border border-gray-700 text-gray-300 hover:border-cyan-600">همه</button>
                                <button type="button" data-rbac-filter-btn="active" onclick="app.setRbacCapabilityFilter('active')" class="rbac-filter-chip px-2.5 py-1 rounded-full text-[11px] border border-gray-700 text-gray-300 hover:border-cyan-600">فعال‌ها</button>
                                <button type="button" data-rbac-filter-btn="sensitive" onclick="app.setRbacCapabilityFilter('sensitive')" class="rbac-filter-chip px-2.5 py-1 rounded-full text-[11px] border border-gray-700 text-gray-300 hover:border-rose-600">حساس‌ها</button>
                            </div>
                            <div id="rbac-capabilities-container" class="max-h-[70vh] overflow-y-auto border border-gray-800 rounded-lg p-3 space-y-3 bg-gray-900/30">
                                <div class="text-center text-gray-500 text-xs py-6">ابتدا یک نقش انتخاب کنید</div>
                            </div>
                        </div>

                        <div class="border-t border-gray-800 pt-4">
                            <div class="flex items-center justify-between mb-2">
                                <h5 class="text-sm font-bold text-white">محدوده داده‌ها (Scopes)</h5>
                                <button type="button" onclick="app.saveLookupRbacScopes()" class="px-3 py-1 rounded bg-green-600 hover:bg-green-500 text-xs">ذخیره Scope</button>
                            </div>
                            <div id="rbac-scopes-container" class="space-y-3">
                                <div class="text-center text-gray-500 text-xs py-6 border border-gray-800 rounded-lg bg-gray-900/30">ابتدا یک نقش انتخاب کنید</div>
                            </div>
                            <p class="text-[10px] text-gray-500 mt-2">برای `selected_users` کاربران موردنظر را انتخاب کنید.</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Per-user overrides (capability allow/deny + data scope override) -->
            <div class="glass p-4 mt-4 space-y-3">
                <div class="flex items-center justify-between flex-wrap gap-3">
                    <h5 class="text-sm font-bold text-white flex items-center gap-2">
                        <i class="fa-solid fa-user-gear text-amber-400"></i> دسترسی‌های اختصاصی کاربر (Overrides)
                    </h5>
                    <select id="rbac-user-select" class="input bg-gray-800 text-xs" style="min-width:240px" onchange="app.onLookupRbacUserChange()">
                        <option value="">-- انتخاب کاربر --</option>
                    </select>
                </div>
                <p class="text-[10px] text-gray-500">«مجاز» یک دسترسی را به نقش کاربر اضافه و «ممنوع» آن را حذف می‌کند (ممنوع بر مجاز اولویت دارد). محدوده اختصاصی، محدوده نقش را بازنویسی می‌کند؛ «ارث‌بری» یعنی بدون بازنویسی.</p>
                <div id="rbac-user-override-body" class="hidden grid grid-cols-1 xl:grid-cols-2 gap-4">
                    <div>
                        <div class="flex items-center justify-between mb-2">
                            <h6 class="text-xs font-bold text-gray-200">دسترسی‌ها (Override)</h6>
                            <button type="button" onclick="app.saveLookupRbacUserCapabilities()" class="px-3 py-1 rounded bg-blue-600 hover:bg-blue-500 text-xs">ذخیره دسترسی کاربر</button>
                        </div>
                        <input id="rbac-user-capabilities-search" type="text" class="input bg-gray-800 text-xs w-full mb-2" placeholder="جستجو..." oninput="app.renderLookupRbacUserCapabilities()">
                        <div id="rbac-user-capabilities-container" class="max-h-[360px] overflow-y-auto border border-gray-800 rounded-lg p-3 space-y-3 bg-gray-900/30"></div>
                    </div>
                    <div>
                        <div class="flex items-center justify-between mb-2">
                            <h6 class="text-xs font-bold text-gray-200">محدوده داده اختصاصی (Scope Override)</h6>
                            <button type="button" onclick="app.saveLookupRbacUserScopes()" class="px-3 py-1 rounded bg-green-600 hover:bg-green-500 text-xs">ذخیره Scope کاربر</button>
                        </div>
                        <div id="rbac-user-scopes-container" class="space-y-3 max-h-[360px] overflow-y-auto"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Hidden separate tab content (removed UI, but kept container for JS compatibility if needed) -->
    <div id="lookup-fields-tab" class="hidden"></div>
</div>
<?php endif; ?>
<!-- 4.5 FINANCIAL PAYMENTS & CHEQUES VIEW -->
<div id="view-cheques" class="view-section h-full p-6 hidden flex flex-col overflow-y-auto pb-24">
    <div class="glass p-6">
        <div class="flex justify-between items-center mb-4">
            <h3 class="font-bold text-white">مدیریت پرداخت و چک</h3>
            <button onclick="app.refreshFinancialPaymentsCheques()" class="text-xs text-gray-400 hover:text-white">
                <i class="fa-solid fa-rotate-right ml-1"></i> بروزرسانی
            </button>
        </div>

        <div class="mb-5">
            <div class="inline-flex items-center gap-1 rounded-xl border border-gray-800 bg-gray-950/45 p-1">
                <button type="button" id="financial-tab-payments" onclick="app.switchFinancialTab('payments')" class="financial-tab-btn min-w-[160px] px-6 py-2 rounded-lg text-sm font-bold bg-yellow-500 shadow-sm" style="color:#000;">
                    <i class="fa-solid fa-credit-card ml-1"></i> پرداخت‌ها
                </button>
                <button type="button" id="financial-tab-cheques" onclick="app.switchFinancialTab('cheques')" class="financial-tab-btn min-w-[160px] px-6 py-2 rounded-lg text-sm font-bold text-gray-400 hover:text-white hover:bg-gray-800/70">
                    <i class="fa-solid fa-money-check-dollar ml-1"></i> چک‌ها
                </button>
            </div>
        </div>

        <div id="financial-payments-panel">
            <div class="financial-payment-filters-grid grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-3 mb-4 rounded border border-gray-800 bg-gray-900/35 p-3">
                <div>
                    <label class="block text-xs text-gray-400 mb-1">وضعیت ثبت سپیدار</label>
                    <select id="payments-filter-sepidar" class="input bg-gray-800">
                        <option value="">همه</option>
                        <option value="pending">ثبت نشده</option>
                        <option value="registered">ثبت شده</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs text-gray-400 mb-1">مسئول لید</label>
                    <select id="payments-filter-lead-owner" class="input bg-gray-800">
                        <option value="">همه مسئول‌ها</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs text-gray-400 mb-1">محصول / خدمت</label>
                    <select id="payments-filter-service" class="input bg-gray-800">
                        <option value="">همه خدمات</option>
                    </select>
                </div>
                <div class="grid grid-cols-2 gap-2">
                    <div>
                        <label class="block text-xs text-gray-400 mb-1">از تاریخ</label>
                        <input id="payments-filter-date-from" type="text" class="input bg-gray-800 text-center ltr" placeholder="1405/03/01" autocomplete="off" onkeydown="if(event.key==='Enter')app.applyFinancialPaymentFilters()">
                    </div>
                    <div>
                        <label class="block text-xs text-gray-400 mb-1">تا تاریخ</label>
                        <input id="payments-filter-date-to" type="text" class="input bg-gray-800 text-center ltr" placeholder="1405/03/31" autocomplete="off" onkeydown="if(event.key==='Enter')app.applyFinancialPaymentFilters()">
                    </div>
                </div>
                <div>
                    <label class="block text-xs text-gray-400 mb-1">کد تفصیلی</label>
                    <select id="payments-filter-tafsili" class="input bg-gray-800">
                        <option value="">همه</option>
                        <option value="has">دارای کد تفصیلی</option>
                        <option value="missing">بدون کد تفصیلی</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs text-gray-400 mb-1">فیش / تصویر چک</label>
                    <select id="payments-filter-image" class="input bg-gray-800">
                        <option value="">همه</option>
                        <option value="has">دارای تصویر</option>
                        <option value="missing">بدون تصویر</option>
                    </select>
                </div>
                <div class="xl:col-span-2">
                    <label class="block text-xs text-gray-400 mb-1">جستجو (مشتری / موبایل / معامله)</label>
                    <div class="relative">
                        <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none"></i>
                        <input id="payments-filter-search" class="input bg-gray-800 pr-10 pl-10" placeholder="جستجو..." autocomplete="off" oninput="app.handleFinancialPaymentsSearchInput(this)" onkeydown="if(event.key==='Enter')app.applyFinancialPaymentFilters()">
                        <button id="payments-filter-search-clear" type="button" class="hidden absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white w-7 h-7 items-center justify-center rounded" onclick="app.clearFinancialPaymentsSearch()" aria-label="پاک کردن جستجو">
                            <i class="fa-solid fa-xmark"></i>
                        </button>
                    </div>
                </div>
                <div class="financial-payment-filter-actions md:col-span-2 xl:col-span-2">
                    <label class="block text-xs text-gray-400 mb-1" style="visibility:hidden;" aria-hidden="true">&nbsp;</label>
                    <div class="grid grid-cols-2 gap-3">
                        <button type="button" class="input financial-payment-filter-apply text-sm font-black" onclick="app.applyFinancialPaymentFilters()">
                            اعمال فیلترها
                        </button>
                        <button type="button" class="input financial-payment-filter-clear text-sm font-bold" onclick="app.clearFinancialPaymentFilters()">
                            پاک کردن فیلترها
                        </button>
                    </div>
                </div>
            </div>
            <div class="overflow-x-auto rounded border border-gray-800 shadow-inner">
                <table class="min-w-[2050px] w-full text-right text-sm">
                    <thead class="bg-gray-900 sticky top-0 z-10">
                        <tr class="text-xs text-gray-400 border-b border-gray-700">
                            <th class="py-3 px-3 font-medium w-[120px]">مسئول معامله</th>
                            <th class="py-3 px-3 font-medium w-[260px]">معامله</th>
                            <th class="py-3 px-3 font-medium w-[150px]">نام مشتری</th>
                            <th class="py-3 px-3 font-medium w-[170px]">پرداخت‌کننده</th>
                            <th class="py-3 px-3 font-medium w-[150px]">مسئول پرداخت</th>
                            <th class="py-3 px-3 font-medium w-[90px] text-center">کد مشتری</th>
                            <th class="py-3 px-3 font-medium w-[120px] text-center">شماره موبایل</th>
                            <th class="py-3 px-3 font-medium w-[150px] text-center">مبلغ خدمات</th>
                            <th class="py-3 px-3 font-medium w-[150px] text-center">مبلغ پرداختی</th>
                            <th class="py-3 px-3 font-medium w-[150px] text-center">تاریخ ثبت پرداخت</th>
                            <th class="py-3 px-3 font-medium w-[150px] text-center">وضعیت پورسانت</th>
                            <th class="py-3 px-3 font-medium w-[110px] text-center">کد تفصیلی بانک</th>
                            <th class="py-3 px-3 font-medium w-[90px] text-center">فیش</th>
                            <th class="py-3 px-3 font-medium w-[140px] text-center">وضعیت سپیدار</th>
                            <th class="py-3 px-3 font-medium w-[130px] text-center">عملیات</th>
                        </tr>
                    </thead>
                    <tbody id="financial-payments-tbody">
                        <tr><td colspan="14" class="text-center text-gray-400 py-6">برای بارگذاری روی منو کلیک کنید</td></tr>
                    </tbody>
                </table>
            </div>
            <div id="financial-payments-pagination" class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3 text-sm text-gray-300"></div>
        </div>

        <div id="financial-cheques-panel" class="hidden">
            <div class="financial-cheque-filters-grid mb-4">
                <div class="financial-cheque-filter-status">
                    <label class="block text-xs text-gray-400 mb-1">وضعیت چک</label>
                    <select id="cheques-filter-status" class="input bg-gray-800">
                        <option value="">همه</option>
                        <option value="pending">در انتظار</option>
                        <option value="approved">تایید</option>
                        <option value="rejected">رد</option>
                    </select>
                </div>
                <div class="financial-cheque-filter-collection">
                    <label class="block text-xs text-gray-400 mb-1">وضعیت وصول</label>
                    <select id="cheques-filter-collection" class="input bg-gray-800">
                        <option value="">همه</option>
                        <option value="pending">در انتظار</option>
                        <option value="collected">وصول</option>
                        <option value="returned">برگشت</option>
                        <option value="blataklif">بلاتکلیف</option>
                    </select>
                </div>
                <div class="financial-cheque-filter-dates grid grid-cols-2 gap-2">
                    <div>
                        <label class="block text-xs text-gray-400 mb-1">از تاریخ سررسید</label>
                        <input id="cheques-filter-date-from" type="text" class="input bg-gray-800 text-center ltr" placeholder="1405/03/01" autocomplete="off" onkeydown="if(event.key==='Enter')app.applyChequeFilters()">
                    </div>
                    <div>
                        <label class="block text-xs text-gray-400 mb-1">تا تاریخ سررسید</label>
                        <input id="cheques-filter-date-to" type="text" class="input bg-gray-800 text-center ltr" placeholder="1405/03/31" autocomplete="off" onkeydown="if(event.key==='Enter')app.applyChequeFilters()">
                    </div>
                </div>
                <div class="financial-cheque-filter-search">
                    <label class="block text-xs text-gray-400 mb-1">جستجو (شماره چک / نام / معامله)</label>
                    <input id="cheques-filter-search" class="input bg-gray-800" placeholder="جستجو..." onkeydown="if(event.key==='Enter')app.applyChequeFilters()">
                </div>
                <div class="financial-cheque-filter-actions financial-payment-filter-actions">
                    <label class="block text-xs text-gray-400 mb-1" style="visibility:hidden;" aria-hidden="true">&nbsp;</label>
                    <div class="grid grid-cols-2 gap-3">
                        <button type="button" class="input financial-payment-filter-apply text-sm font-black" onclick="app.applyChequeFilters()">
                            اعمال فیلترها
                        </button>
                        <button type="button" class="input financial-payment-filter-clear text-sm font-bold" onclick="app.clearChequeFilters()">
                            پاک کردن فیلترها
                        </button>
                    </div>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-right">
                    <thead>
                        <tr class="text-xs text-gray-400 border-b border-gray-700">
                            <th class="py-2 px-2 font-medium">مشتری</th>
                            <th class="py-2 px-2 font-medium">معامله</th>
                            <th class="py-2 px-2 font-medium">شماره چک</th>
                            <th class="py-2 px-2 font-medium">بانک مبدا</th>
                            <th class="py-2 px-2 font-medium">مبلغ</th>
                            <th class="py-2 px-2 font-medium">سررسید</th>
                            <th class="py-2 px-2 font-medium">وضعیت چک</th>
                            <th class="py-2 px-2 font-medium">وضعیت وصول</th>
                            <th class="py-2 px-2 font-medium">عملیات</th>
                        </tr>
                    </thead>
                    <tbody id="cheques-tbody">
                        <tr><td colspan="9" class="text-center text-gray-400 py-6">برای بارگذاری روی منو کلیک کنید</td></tr>
                    </tbody>
                </table>
            </div>
            <div id="cheques-pagination" class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3 text-sm text-gray-300"></div>
        </div>
    </div>
</div>

<div id="view-exports" class="view-section h-full p-6 hidden flex flex-col overflow-y-auto pb-24">
    <div class="glass p-6">
        <div class="flex justify-between items-center mb-4">
            <h3 class="font-bold text-white">گزارشات</h3>
            <button onclick="app.loadExportCatalog(true)" class="text-xs text-gray-400 hover:text-white">
                <i class="fa-solid fa-rotate-right ml-1"></i> بروزرسانی
            </button>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
            <div>
                <label class="block text-xs text-gray-400 mb-1">نوع خروجی</label>
                <select id="export-dataset" class="input bg-gray-800 w-full" onchange="app.onExportDatasetChange()">
                    <option value="">در حال بارگذاری...</option>
                </select>
            </div>
            <div>
                <label class="block text-xs text-gray-400 mb-1">فرمت</label>
                <select id="export-format" class="input bg-gray-800 w-full">
                    <option value="csv">CSV</option>
                    <option value="xlsx">Excel (XLSX)</option>
                </select>
                <p class="text-[11px] text-gray-500 mt-1">برای خروجی‌های بزرگ، CSV سریع‌تر و مطمئن‌تر است.</p>
            </div>
            <div class="flex items-end">
                <button onclick="app.submitExport()" class="btn-primary w-full py-2 rounded">
                    <i class="fa-solid fa-download ml-1"></i> دانلود خروجی
                </button>
            </div>
        </div>

        <div id="export-filters" class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-3"></div>

        <div class="mt-6">
            <div class="flex items-center justify-between gap-3 mb-2">
                <h4 class="font-bold text-white text-sm">ستون‌ها</h4>
                <div class="flex gap-2 items-center">
                    <input id="export-columns-search" type="text" class="input bg-gray-800 text-xs w-56" placeholder="جستجوی ستون..." oninput="app.filterExportColumns()">
                    <button type="button" class="px-3 py-2 rounded bg-gray-700 hover:bg-gray-600 text-xs" onclick="app.selectAllExportColumns(true)">انتخاب همه</button>
                    <button type="button" class="px-3 py-2 rounded bg-gray-700 hover:bg-gray-600 text-xs" onclick="app.selectAllExportColumns(false)">حذف همه</button>
                </div>
            </div>
            <div id="export-columns" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2"></div>
        </div>

        <form id="export-form" method="POST" action="?api=export_run" class="hidden">
            <input type="hidden" name="dataset" id="export-form-dataset" value="">
            <input type="hidden" name="format" id="export-form-format" value="">
            <input type="hidden" name="columns_json" id="export-form-columns" value="[]">
            <input type="hidden" name="filters_json" id="export-form-filters" value="{}">
        </form>
    </div>
</div>

<!-- 4.6 AUDIT LOGS VIEW (ADMIN) -->
<div id="view-audit-logs" class="view-section h-full p-6 hidden flex flex-col overflow-y-auto pb-24">
    <div class="glass p-6">
        <div class="flex justify-between items-center mb-4">
            <h3 class="font-bold text-white">لاگ فعالیت کاربران (سیستمی و رابط کاربری)</h3>
            <button onclick="app.loadAuditLogs(true)" class="text-xs text-gray-400 hover:text-white">
                <i class="fa-solid fa-rotate-right ml-1"></i> بروزرسانی
            </button>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-3 mb-4">
            <div>
                <label class="block text-xs text-gray-400 mb-1">نوع عملیات</label>
                <select id="audit-filter-action" class="input bg-gray-800 w-full" onchange="app.loadAuditLogs(true)">
                    <option value="">همه</option>
                    <option value="login">ورود به سیستم</option>
                    <option value="logout">خروج</option>
                    <option value="delete">حذف</option>
                    <option value="owner_change">تغییر مسئول</option>
                    <option value="Click">کلیک‌ها (UI)</option>
                    <option value="HTTP POST">تغییرات داده (POST)</option>
                    <option value="HTTP GET">مشاهده صفحات</option>
                </select>
            </div>
            <div>
                <label class="block text-xs text-gray-400 mb-1">نوع رکورد</label>
                <select id="audit-filter-entity" class="input bg-gray-800 w-full" onchange="app.loadAuditLogs(true)">
                    <option value="">همه</option>
                    <option value="person">لید</option>
                    <option value="deal">معامله</option>
                    <option value="activity">فعالیت</option>
                    <option value="payment">پرداخت</option>
                    <option value="system">سیستم</option>
                    <option value="client_ui">رابط کاربری</option>
                </select>
            </div>
            <div>
                <label class="block text-xs text-gray-400 mb-1">جستجوی شخص (نام/موبایل)</label>
                <input id="audit-filter-person" type="text" class="input bg-gray-800 w-full" placeholder="نام یا شماره..." onkeypress="if(event.key==='Enter') app.loadAuditLogs(true)">
            </div>
            <div>
                <label class="block text-xs text-gray-400 mb-1">از تاریخ (شمسی)</label>
                <input id="audit-filter-from" type="text" class="input bg-gray-800 w-full" placeholder="1403/10/01" onkeypress="if(event.key==='Enter') app.loadAuditLogs(true)" data-jalali-picker="1">
            </div>
            <div>
                <label class="block text-xs text-gray-400 mb-1">تا تاریخ (شمسی)</label>
                <input id="audit-filter-to" type="text" class="input bg-gray-800 w-full" placeholder="1403/10/30" onkeypress="if(event.key==='Enter') app.loadAuditLogs(true)" data-jalali-picker="1">
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-right text-sm min-w-[1000px]">
                <thead class="bg-gray-800 text-gray-400">
                    <tr>
                        <th class="p-3">زمان</th>
                        <th class="p-3">کاربر</th>
                        <th class="p-3">شخص مرتبط</th>
                        <th class="p-3">IP</th>
                        <th class="p-3">عملیات</th>
                        <th class="p-3">نوع</th>
                        <th class="p-3">جزئیات</th>
                        <th class="p-3">اقدام</th>
                    </tr>
                </thead>
                <tbody id="audit-logs-table" class="divide-y divide-gray-700 text-gray-300"></tbody>
            </table>
        </div>

        <div class="flex justify-between items-center mt-4 text-xs text-gray-400">
            <button class="px-3 py-2 rounded bg-gray-700 hover:bg-gray-600" onclick="app.auditLogsPrev()">قبلی</button>
            <span id="audit-logs-info">-</span>
            <button class="px-3 py-2 rounded bg-gray-700 hover:bg-gray-600" onclick="app.auditLogsNext()">بعدی</button>
        </div>
    </div>
</div>

<!-- 5. DATABASE MAINTENANCE VIEW (ADMIN) -->
<div id="view-maintenance" class="view-section h-full p-6 hidden flex flex-col overflow-y-auto pb-24">
    <div class="flex items-center justify-between flex-wrap gap-3 mb-6">
        <div>
            <h3 class="font-bold text-white">نگهداری دیتابیس و Backfill</h3>
            <p class="text-xs text-gray-400 mt-1">اجرای migration، بررسی schema، backfill دفتر پرداخت و backup/restore دیتابیس</p>
        </div>
        <div class="flex gap-2 flex-wrap">
            <button onclick="app.loadMaintenanceDashboard()" class="btn-primary px-4 py-2 rounded text-xs bg-slate-700 hover:bg-slate-600">
                <i class="fa-solid fa-rotate ml-1"></i> بروزرسانی وضعیت
            </button>
            <button onclick="app.runMigration()" class="btn-primary px-4 py-2 rounded text-xs bg-blue-600 hover:bg-blue-700">
                <i class="fa-solid fa-code-branch ml-1"></i> اجرای Migration
            </button>
            <button onclick="app.maintenanceCreateBackup()" class="btn-primary px-4 py-2 rounded text-xs bg-emerald-700 hover:bg-emerald-600">
                <i class="fa-solid fa-floppy-disk ml-1"></i> ساخت Backup
            </button>
        </div>
    </div>

    <div class="grid grid-cols-1 xl:grid-cols-3 gap-4">
        <div class="glass p-5 xl:col-span-2">
            <div class="flex items-center justify-between mb-4">
                <h4 class="font-bold text-white text-sm">وضعیت schema و داده‌های جدید</h4>
                <span id="maintenance-health-badge" class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-300">در انتظار بررسی</span>
            </div>
            <div id="maintenance-health" class="text-sm text-gray-300 min-h-[140px]">
                <div class="text-gray-500">برای مشاهده وضعیت، بروزرسانی را اجرا کنید.</div>
            </div>
        </div>

        <div class="glass p-5">
            <h4 class="font-bold text-white text-sm mb-4">Backfill دفتر پرداخت</h4>
            <label class="block text-xs text-gray-400 mb-1">Limit اختیاری</label>
            <input id="maintenance-backfill-limit" type="number" min="0" value="0" class="input bg-gray-800 w-full mb-3" placeholder="0 یعنی بدون محدودیت">
            <div class="grid grid-cols-1 gap-2">
                <button onclick="app.maintenanceBackfillPreview()" class="btn-primary px-4 py-2 rounded text-xs bg-cyan-700 hover:bg-cyan-600">
                    <i class="fa-solid fa-magnifying-glass-chart ml-1"></i> Dry-run / Preview
                </button>
                <button onclick="app.maintenanceBackfillVerify()" class="btn-primary px-4 py-2 rounded text-xs bg-indigo-700 hover:bg-indigo-600">
                    <i class="fa-solid fa-shield-check ml-1"></i> Verify
                </button>
                <button onclick="app.maintenanceBackfillRun()" class="btn-primary px-4 py-2 rounded text-xs bg-amber-700 hover:bg-amber-600">
                    <i class="fa-solid fa-play ml-1"></i> اجرای Backfill با Backup
                </button>
            </div>
            <p class="text-[11px] text-gray-500 mt-3 leading-5">اجرای واقعی قبل از تغییر داده، backup خودکار pre-backfill می‌سازد.</p>
        </div>

        <div class="glass p-5">
            <h4 class="font-bold text-white text-sm mb-4">Backfill کد تفصیلی پرداخت‌ها</h4>
            <label class="block text-xs text-gray-400 mb-1">Limit اختیاری</label>
            <input id="maintenance-tafsili-backfill-limit" type="number" min="0" value="0" class="input bg-gray-800 w-full mb-3" placeholder="0 یعنی بدون محدودیت">
            <div class="grid grid-cols-1 gap-2">
                <button onclick="app.maintenanceTafsiliBackfillPreview()" class="btn-primary px-4 py-2 rounded text-xs bg-cyan-700 hover:bg-cyan-600">
                    <i class="fa-solid fa-magnifying-glass-chart ml-1"></i> Dry-run / Preview
                </button>
                <button onclick="app.maintenanceTafsiliBackfillVerify()" class="btn-primary px-4 py-2 rounded text-xs bg-indigo-700 hover:bg-indigo-600">
                    <i class="fa-solid fa-shield-check ml-1"></i> Verify
                </button>
                <button onclick="app.maintenanceTafsiliBackfillRun()" class="btn-primary px-4 py-2 rounded text-xs bg-amber-700 hover:bg-amber-600">
                    <i class="fa-solid fa-play ml-1"></i> اجرای Backfill با Backup
                </button>
            </div>
            <p class="text-[11px] text-gray-500 mt-3 leading-5">کد تفصیلی از lookup بانک مقصد خوانده می‌شود و اجرای واقعی قبل از تغییر داده backup خودکار می‌سازد.</p>
        </div>
    </div>

    <div class="grid grid-cols-1 xl:grid-cols-2 gap-4 mt-4">
        <div class="glass p-5">
            <div class="flex items-center justify-between mb-4">
                <h4 class="font-bold text-white text-sm">Backupهای دیتابیس</h4>
                <button onclick="app.loadMaintenanceDashboard()" class="px-3 py-2 rounded bg-gray-800 hover:bg-gray-700 text-xs text-gray-200">بارگذاری مجدد</button>
            </div>
            <div id="maintenance-backups" class="space-y-2 text-sm text-gray-300 min-h-[120px]">
                <div class="text-gray-500">Backup موجودی بارگذاری نشده است.</div>
            </div>
        </div>

        <div class="glass p-5">
            <h4 class="font-bold text-white text-sm mb-4">Restore از Backup</h4>
            <label class="block text-xs text-gray-400 mb-1">فایل backup</label>
            <select id="maintenance-restore-file" class="input bg-gray-800 w-full mb-3" onchange="app.updateMaintenanceRestorePhrase()"></select>
            <div class="text-[11px] text-gray-500 mb-2">عبارت تایید لازم:</div>
            <code id="maintenance-restore-phrase" class="block direction-ltr text-left bg-gray-950 border border-gray-800 rounded p-2 text-xs text-amber-200 mb-3">-</code>
            <label class="block text-xs text-gray-400 mb-1">عبارت تایید را دقیق وارد کنید</label>
            <input id="maintenance-restore-confirmation" type="text" class="input bg-gray-800 w-full mb-3 direction-ltr text-left" placeholder="RESTORE saleos-db-....sql">
            <button onclick="app.maintenanceRestoreBackup()" class="btn-primary px-4 py-2 rounded text-xs bg-red-700 hover:bg-red-600 w-full">
                <i class="fa-solid fa-clock-rotate-left ml-1"></i> Restore با Backup قبل از اجرا
            </button>
            <p class="text-[11px] text-gray-500 mt-3 leading-5">قبل از restore یک backup جدید با برچسب pre-restore ساخته می‌شود.</p>
        </div>
    </div>

    <div class="glass p-5 mt-4">
        <h4 class="font-bold text-white text-sm mb-4">گزارش آخرین عملیات</h4>
        <div id="maintenance-validation-summary" class="hidden mb-4 rounded-lg border p-4 text-sm leading-7"></div>
        <pre id="maintenance-report" class="direction-ltr text-left bg-gray-950 border border-gray-800 rounded p-4 text-xs text-gray-200 overflow-auto max-h-[420px]">-</pre>
    </div>
</div>

<!-- 5. USERS VIEW (ADMIN) -->
<div id="view-users" class="view-section h-full p-6 hidden flex flex-col overflow-y-auto pb-24">
    <div class="glass p-6">
        <div class="flex justify-between mb-6">
            <h3 class="font-bold text-white">کاربران و کارشناسان</h3>
            <div class="flex gap-2">
                <button onclick="app.syncDidarUsers()" class="btn-primary px-4 py-2 rounded text-xs bg-purple-600 hover:bg-purple-700" title="همگام‌سازی کاربران با Didar برای درست کردن Owner IDs">
                    <i class="fa-solid fa-sync ml-1"></i> همگام‌سازی Didar
                </button>
                <button onclick="app.runMigration()" class="btn-primary px-4 py-2 rounded text-xs bg-blue-600 hover:bg-blue-700">
                    <i class="fa-solid fa-database ml-1"></i> اجرای Migration
                </button>
                <button onclick="app.runActivityTypeRepair()" class="btn-primary px-4 py-2 rounded text-xs bg-amber-600 hover:bg-amber-700">
                    <i class="fa-solid fa-wrench ml-1"></i> ترمیم نوع فعالیت‌ها
                </button>
                <button onclick="app.runWonKarizReconcile()" class="btn-primary px-4 py-2 rounded text-xs bg-emerald-700 hover:bg-emerald-600">
                    <i class="fa-solid fa-broom ml-1"></i> ترمیم کاریز معاملات موفق
                </button>
                <button onclick="app.openUserModal()" class="btn-primary px-4 py-2 rounded text-xs">افزودن کاربر</button>
            </div>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-right text-sm min-w-[700px]">
                <thead class="bg-gray-800 text-gray-400">
                    <tr>
                        <th class="p-3">نام</th>
                        <th class="p-3">نام کاربری</th>
                        <th class="p-3">نقش</th>
                        <th class="p-3">Didar ID</th>
                        <th class="p-3">عملیات</th>
                    </tr>
                </thead>
                <tbody id="users-table" class="divide-y divide-gray-700 text-gray-300"></tbody>
            </table>
        </div>
    </div>
    <div class="glass p-6 mt-6 space-y-4">
        <div class="flex items-center justify-between flex-wrap gap-3">
            <h4 class="font-bold text-white text-sm flex items-center gap-2">
                <i class="fa-solid fa-sitemap text-cyan-400"></i> ساختار پورسانت کاربران
            </h4>
            <button type="button" onclick="app.saveUserHierarchy()" class="btn-primary px-4 py-2 rounded text-xs">
                <i class="fa-solid fa-floppy-disk ml-1"></i> ذخیره ساختار
            </button>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-5 gap-3">
            <select id="hierarchy-user-select" class="input bg-gray-800 text-xs"></select>
            <select id="hierarchy-supervisor-select" class="input bg-gray-800 text-xs"></select>
            <select id="hierarchy-manager-select" class="input bg-gray-800 text-xs"></select>
            <input id="hierarchy-effective-from" type="date" class="input bg-gray-800 text-xs">
            <input id="hierarchy-effective-to" type="date" class="input bg-gray-800 text-xs">
        </div>
        <div class="overflow-x-auto border border-gray-800 rounded-lg">
            <table class="w-full text-right text-xs min-w-[760px]">
                <thead class="bg-gray-800 text-gray-400">
                    <tr>
                        <th class="p-3">کاربر</th>
                        <th class="p-3">سرپرست</th>
                        <th class="p-3">مدیر</th>
                        <th class="p-3">از تاریخ</th>
                        <th class="p-3">تا تاریخ</th>
                        <th class="p-3">ثبت</th>
                    </tr>
                </thead>
                <tbody id="user-hierarchy-table" class="divide-y divide-gray-800 text-gray-300"></tbody>
            </table>
        </div>
    </div>
    <div id="crm-owner-settings" class="glass p-6 mt-6 space-y-3">
        <div class="flex items-center justify-between">
            <div>
                <h4 class="font-bold text-white text-sm">کارشناس CRM پیش‌فرض</h4>
                <p class="text-xs text-gray-400 mt-1">لیدهای ارجاع‌شده به این کارشناس منتقل می‌شوند</p>
            </div>
            <button type="button" onclick="app.saveCrmOwner()" class="btn-primary px-4 py-2 rounded text-xs">ذخیره</button>
        </div>
        <select id="crm-owner-select" class="input bg-gray-800">
            <option value="">در حال بارگذاری کاربران دیدار...</option>
        </select>
        <p class="text-xs text-gray-500" id="crm-owner-current"></p>
    </div>
    <div class="glass p-6 mt-6 space-y-4">
        <div class="flex items-center justify-between">
            <div>
                <h4 class="font-bold text-white text-sm">رمز عبور اصلی</h4>
                <p class="text-xs text-gray-400 mt-1">ورود به حساب سایر کاربران با رمز عبور اصلی</p>
            </div>
            <span id="master-password-status" class="text-xs px-2 py-1 rounded bg-slate-800 text-slate-300">نامشخص</span>
        </div>
        <form onsubmit="app.setMasterPassword(event)" class="grid grid-cols-1 md:grid-cols-3 gap-3">
            <input type="password" name="current_admin_password" placeholder="رمز عبور مدیر" class="input" required>
            <input type="password" name="new_master_password" placeholder="رمز عبور اصلی جدید" class="input" required minlength="6">
            <div class="flex gap-2">
                <input type="password" name="confirm_master_password" placeholder="تأیید رمز" class="input flex-1" required minlength="6">
                <button type="submit" class="btn-primary px-4 py-2 rounded bg-purple-600 hover:bg-purple-500 whitespace-nowrap">ذخیره</button>
            </div>
        </form>
    </div>
</div>

<!-- KPI DASHBOARD VIEW -->
<div id="view-kpi-dashboard" class="view-section h-full p-6 hidden flex flex-col overflow-y-auto">
    <div id="kpi-dashboard-content" class="space-y-6">
        <div class="text-sm text-gray-400">در حال بارگذاری داشبورد KPI...</div>
    </div>
</div>

<div id="view-commissions" class="view-section h-full p-6 hidden flex flex-col overflow-y-auto pb-24">
    <div class="glass p-5 mb-5">
        <div class="flex flex-wrap gap-3 justify-between items-center">
            <h3 class="text-yellow-500 font-bold text-lg"><i class="fa-solid fa-percent ml-2"></i>مدیریت پورسانت</h3>
            <div class="flex gap-2">
                <button id="commission-matrix-toggle-btn" class="btn-primary px-4 py-2 rounded text-sm" onclick="app.scrollToCommissionMatrix()">
                    <i class="fa-solid fa-wand-magic-sparkles ml-1"></i> رفتن به فرم تنظیم قوانین
                </button>
                <button class="btn-primary px-4 py-2 rounded text-sm bg-green-600 hover:bg-green-700" onclick="app.loadCommissions()">
                    <i class="fa-solid fa-rotate ml-1"></i> بروزرسانی
                </button>
            </div>
        </div>
    </div>

    <section id="commission-matrix-section" class="commission-wizard-shell commission-inline-matrix w-full p-0 overflow-visible mb-10">
            <div class="commission-wizard-header flex justify-between items-start gap-4 p-5 border-b border-gray-700/70">
                <div>
                    <p class="text-[11px] text-emerald-600 mb-1">Set Rules & Assignments</p>
                    <h3 class="font-bold text-white text-xl">تنظیم قوانین و تخصیص پورسانت</h3>
                    <p class="text-xs text-gray-400 mt-1">قانون را بسازید، فرمول مالی را مشخص کنید، سپس آن را به کارشناس و محصول وصل کنید.</p>
                </div>
                <div class="text-[11px] text-gray-500 bg-white/70 border border-slate-200 rounded-full px-3 py-1">همیشه باز</div>
            </div>

            <div class="commission-wizard-steps px-5 py-4 border-b border-gray-800 flex flex-col md:flex-row gap-3">
                <button type="button" class="commission-step-tab is-active" data-commission-step-tab="1" onclick="app.goCommissionWizardStep(1)">
                    <span>1</span>
                    <strong>اطلاعات پایه قانون</strong>
                    <small>نام، نوع و بازه اعمال</small>
                </button>
                <button type="button" class="commission-step-tab" data-commission-step-tab="2" onclick="app.goCommissionWizardStep(2)">
                    <span>2</span>
                    <strong>ماتریس / پلکان</strong>
                    <small>مبلغ ثابت یا جدول پلکانی</small>
                </button>
                <button type="button" class="commission-step-tab" data-commission-step-tab="3" onclick="app.goCommissionWizardStep(3)">
                    <span>3</span>
                    <strong>تخصیص‌ها</strong>
                    <small>کارشناسان و محصولات</small>
                </button>
            </div>

            <div class="commission-wizard-body p-5 overflow-y-auto">
                <form onsubmit="app.saveCommissionRule(event)" id="commission-matrix-form">
                    <input type="hidden" id="commission-rule-id" value="">

                    <section class="commission-wizard-panel" data-commission-step="1">
                        <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
                            <div class="lg:col-span-5 commission-card-soft">
                                <div class="commission-block-label"><span>Block 1</span> اطلاعات پایه قانون</div>
                                <label class="text-xs text-gray-300 mb-1 block">نوع قانون</label>
                                <select id="commission-rule-type" class="input bg-gray-800 relative z-[80]" onchange="app.onCommissionRuleTypeChange(); app.updateCommissionRulePreview();">
                                    <option value="TIERED_RULE">پلکانی بر اساس مبلغ واریزی</option>
                                    <option value="FIXED_RULE">ثابت بر اساس فروش/محصول</option>
                                </select>
                                <p class="text-[11px] text-gray-500 mt-2">نوع قانون مشخص می‌کند مرحله بعد «مبلغ ثابت/درصد» باشد یا جدول پلکان‌ها.</p>
                                <div class="commission-date-note mt-3">
                                    <i class="fa-solid fa-calendar-days ml-1"></i>
                                    قوانین تاریخ انقضا ندارند؛ بازه محاسبه از فیلتر تاریخ پرداخت‌ها در جدول پایین مشخص می‌شود.
                                </div>
                            </div>
                            <div class="lg:col-span-7 commission-card-soft border-emerald-700/40">
                                <div class="flex items-start gap-3">
                                    <div class="w-10 h-10 rounded-2xl bg-emerald-500/15 text-emerald-300 flex items-center justify-center">
                                        <i class="fa-solid fa-wand-magic-sparkles"></i>
                                    </div>
                                    <div class="flex-1">
                                        <label class="text-xs text-gray-300 mb-1 block">نام قانون</label>
                                        <div id="commission-rule-name-preview" class="text-white font-bold text-base">نام بعد از انتخاب نوع و فرمول ساخته می‌شود</div>
                                        <p class="text-[11px] text-gray-500 mt-2">برای جلوگیری از نام‌های مبهم، نام قانون بر اساس نوع و تنظیمات مالی به‌صورت خودکار توسط سیستم ساخته می‌شود.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="commission-wizard-actions">
                            <button type="button" class="btn-secondary px-4 py-2 rounded" onclick="app.resetCommissionRuleForm()">پاک‌سازی فرم</button>
                            <button type="button" class="btn-primary px-5 py-2 rounded commission-next-btn" onclick="app.nextCommissionWizardStep()">مرحله بعد <i class="fa-solid fa-arrow-left mr-1"></i></button>
                        </div>
                    </section>

                    <section class="commission-wizard-panel hidden" data-commission-step="2">
                        <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
                            <div class="lg:col-span-4 commission-card-soft">
                                <div class="commission-block-label"><span>Block 2</span> ماتریس / پلکان</div>
                                <h4 class="text-white font-bold mb-2">فرمول محاسبه</h4>
                                <p id="commission-finance-helper" class="text-xs text-gray-400 leading-6">ابتدا نوع قانون را انتخاب کنید تا فقط فیلدهای مرتبط نمایش داده شود.</p>
                                <div class="mt-4 rounded-xl bg-blue-500/10 border border-blue-500/20 p-3 text-xs text-blue-100 leading-6">
                                    <i class="fa-solid fa-circle-info ml-1"></i>
                                    محاسبه پورسانت بر اساس مجموع پرداخت‌های واقعی در بازه تاریخ انتخاب‌شده انجام می‌شود.
                                </div>
                            </div>
                            <div class="lg:col-span-8 space-y-4">
                                <div id="commission-fixed-fields" class="commission-rule-mode-section commission-card-soft">
                                    <h4 class="text-sm text-white font-bold mb-3">قانون ثابت</h4>
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                        <div>
                                            <label class="text-xs text-gray-400 mb-1 block">مبلغ ثابت (اختیاری)</label>
                                            <input id="commission-fixed-budget-amount" type="text" inputmode="numeric" class="input" placeholder="مثلاً 10,000,000">
                                            <p class="text-[11px] text-gray-500 mt-1">اگر مبلغ ثابت وارد شود، همان مبلغ به عنوان پورسانت محاسبه می‌شود.</p>
                                        </div>
                                        <div id="commission-base-rate-wrap">
                                            <label class="text-xs text-gray-400 mb-1 block">درصد پورسانت</label>
                                            <input id="commission-base-rate-percent" type="number" step="0.0001" min="0.0001" class="input" placeholder="2.5" required>
                                            <p class="text-[11px] text-gray-500 mt-1">اگر مبلغ ثابت خالی باشد، این درصد روی مجموع پرداخت‌ها اعمال می‌شود.</p>
                                        </div>
                                    </div>
                                </div>
                                <div id="commission-tiers-section" class="commission-rule-mode-section commission-card-soft">
                                    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-3">
                                        <div>
                                            <h4 class="text-sm text-white font-bold" id="commission-tiers-title">تعریف پلکان‌های مبلغی</h4>
                                            <p class="text-[11px] text-gray-500 mt-1">نکته: حداقل پلکان بعدی باید دقیقاً ۱ واحد بیشتر از حداکثر پلکان قبلی باشد.</p>
                                        </div>
                                        <button type="button" class="btn-primary px-3 py-2 rounded text-xs" onclick="app.addCommissionConstraintRow()">
                                            <i class="fa-solid fa-plus ml-1"></i>افزودن پلکان
                                        </button>
                                    </div>
                                    <div class="commission-tier-grid-head hidden md:grid grid-cols-12 gap-2 text-[11px] text-gray-500 px-2 mb-1">
                                        <span class="col-span-4">از مبلغ</span>
                                        <span class="col-span-4">تا مبلغ</span>
                                        <span class="col-span-3">درصد پورسانت</span>
                                        <span class="col-span-1"></span>
                                    </div>
                                    <div id="commission-constraints-rows" class="space-y-2"></div>
                                </div>
                            </div>
                        </div>
                        <div class="commission-wizard-actions">
                            <button type="button" class="btn-secondary px-4 py-2 rounded" onclick="app.prevCommissionWizardStep()"><i class="fa-solid fa-arrow-right ml-1"></i>قبلی</button>
                            <div class="flex items-center gap-2">
                                <button type="submit" form="commission-matrix-form" class="btn-primary px-5 py-2 rounded bg-emerald-700 hover:bg-emerald-600"><i class="fa-solid fa-floppy-disk ml-1"></i>ذخیره قانون</button>
                                <button type="button" class="btn-primary px-5 py-2 rounded commission-next-btn" onclick="app.nextCommissionWizardStep()">تخصیص قانون <i class="fa-solid fa-arrow-left mr-1"></i></button>
                            </div>
                        </div>
                    </section>
                </form>

                <section class="commission-wizard-panel hidden" data-commission-step="3">
                    <div class="commission-assignment-board grid grid-cols-1 xl:grid-cols-2 gap-5">
                        <form onsubmit="app.assignCommissionRules(event)" class="commission-assignment-panel commission-assignment-form-panel" id="commission-assignment-form">
                            <div class="flex items-start justify-between gap-3 mb-5">
                                <div>
                                    <h4 class="commission-assignment-title">تخصیص جدید</h4>
                                    <p class="commission-assignment-subtitle">قانون را انتخاب کنید و به کارشناس یا دامنه محصول وصل کنید.</p>
                                </div>
                                <span class="commission-assignment-chip">Block 3</span>
                            </div>

                            <div class="space-y-4">
                                <div>
                                    <div class="flex items-center justify-between mb-1.5">
                                        <label class="commission-assignment-label">قانون</label>
                                        <div class="flex gap-2">
                                            <button type="button" class="commission-mini-action" onclick="app.selectAllCommissionAssignmentRules()">انتخاب همه</button>
                                            <button type="button" class="commission-mini-action is-muted" onclick="app.clearCommissionAssignmentRules()">پاک‌کردن همه</button>
                                        </div>
                                    </div>
                                    <select id="commission-assignment-rule-ids" class="input relative z-[80] commission-multi-select commission-assignment-select" multiple required></select>
                                </div>

                                <div>
                                    <div class="flex items-center justify-between mb-1.5">
                                        <label class="commission-assignment-label">هدف</label>
                                        <div class="flex gap-2">
                                            <button type="button" class="commission-mini-action" onclick="app.selectAllCommissionAssignmentAgents()">انتخاب همه</button>
                                            <button type="button" class="commission-mini-action is-muted" onclick="app.clearCommissionAssignmentAgents()">پاک‌کردن همه</button>
                                        </div>
                                    </div>
                                    <select id="commission-salesperson-user-id" class="input relative z-[80] commission-multi-select commission-assignment-select" multiple required></select>
                                </div>

                                <div class="commission-product-scope-wrap">
                                    <label class="commission-assignment-label mb-1.5 block">محصول (اختیاری)</label>
                                    <select id="commission-product-id" class="hidden" multiple></select>
                                    <div id="commission-product-picker"></div>
                                    <p class="commission-assignment-help">اگر محصولی انتخاب نشود، تخصیص برای همه محصولات معتبر است.</p>
                                </div>

                                <button type="submit" class="commission-assignment-submit">
                                    <i class="fa-solid fa-link ml-2"></i>تخصیص
                                </button>
                            </div>

                            <div class="commission-wizard-actions !mt-5">
                                <button type="button" class="btn-secondary px-4 py-2 rounded" onclick="app.prevCommissionWizardStep()"><i class="fa-solid fa-arrow-right ml-1"></i>قبلی</button>
                            </div>
                        </form>

                        <div class="commission-assignment-panel commission-assignment-list-panel">
                            <div class="flex items-start justify-between gap-3 mb-4">
                                <div>
                                    <h4 class="commission-assignment-title">تخصیص‌های فعال</h4>
                                    <p id="commission-assignments-count" class="commission-assignment-subtitle">در حال بارگذاری...</p>
                                </div>
                                <i class="fa-solid fa-user-check text-yellow-500 text-xl mt-1"></i>
                            </div>
                            <div id="commission-assignments-list" class="commission-assignments-list"></div>
                        </div>
                    </div>

                    <div class="mt-5 commission-rules-admin-wrap">
                        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-2 mb-2">
                            <h4 class="text-sm text-gray-300">مدیریت قوانین ثبت‌شده</h4>
                            <span class="text-[11px] text-gray-500">ویرایش، حذف و بررسی قوانین ثابت و پلکانی</span>
                        </div>
                        <div id="commission-rules-list" class="overflow-x-auto commission-rules-list"></div>
                    </div>
                </section>
            </div>
    </section>

    <div class="glass p-4">
        <div class="mb-4">
            <div class="flex flex-wrap gap-2 items-center justify-between">
                <h4 class="text-sm text-cyan-300 font-bold">چرخه پرداخت پورسانت (Manager Payroll)</h4>
                <div class="flex gap-2">
                    <button class="btn-primary px-3 py-1.5 rounded text-xs bg-indigo-600 hover:bg-indigo-500" onclick="app.aggregateCommissionPayoutCycles()">
                        <i class="fa-solid fa-calculator ml-1"></i> تجمیع ماه جاری
                    </button>
                    <button class="btn-primary px-3 py-1.5 rounded text-xs" onclick="app.loadCommissionPayoutQueue()">
                        <i class="fa-solid fa-rotate ml-1"></i> بروزرسانی صف
                    </button>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-2 mt-3">
                <input id="commission-filter-date-from" type="text" data-jalali-picker="1" class="input" placeholder="از تاریخ">
                <input id="commission-filter-date-to" type="text" data-jalali-picker="1" class="input" placeholder="تا تاریخ">
                <select id="commission-filter-salesperson" class="input bg-gray-800">
                    <option value="">همه کارشناسان</option>
                </select>
                <select id="commission-filter-status" class="input bg-gray-800">
                    <option value="">همه وضعیت‌ها</option>
                    <option value="PENDING_MANAGER_REVIEW">Pending</option>
                    <option value="APPROVED">Approved</option>
                    <option value="REJECTED">Rejected</option>
                    <option value="SETTLED">Settled</option>
                </select>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-2 mt-2">
                <input id="commission-filter-amount-min" type="number" step="0.01" class="input" placeholder="حداقل مبلغ">
                <input id="commission-filter-amount-max" type="number" step="0.01" class="input" placeholder="حداکثر مبلغ">
                <div class="flex gap-2">
                    <button class="btn-primary px-3 py-1.5 rounded text-xs w-full" onclick="app.loadCommissions()"><i class="fa-solid fa-filter ml-1"></i>اعمال فیلتر</button>
                </div>
                <div class="flex gap-2">
                    <button class="btn-primary px-3 py-1.5 rounded text-xs w-full bg-emerald-700 hover:bg-emerald-600" onclick="app.batchApproveVisibleCommissions()"><i class="fa-solid fa-check-double ml-1"></i>تایید گروهی</button>
                </div>
            </div>
            <div class="mt-2">
                <button id="commission-bulk-delete-btn" class="btn-primary px-3 py-1.5 rounded text-xs bg-red-700 hover:bg-red-600 opacity-60 cursor-not-allowed" disabled onclick="app.bulkDeleteSelectedCommissions()">
                    <i class="fa-solid fa-trash ml-1"></i> حذف گروهی
                </button>
            </div>
            <div id="commission-payout-queue" class="overflow-x-auto mt-3"></div>
        </div>
        <div id="commissions-list" class="overflow-x-auto">
            <div class="text-gray-400 text-sm">در حال بارگذاری...</div>
        </div>
    </div>
</div>

<div id="view-finance-inbox" class="view-section h-full p-6 hidden flex flex-col overflow-y-auto pb-24">
    <div class="glass p-4">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-3">
            <h3 class="text-yellow-500 font-bold text-lg">
                <i class="fa-solid fa-file-invoice-dollar ml-2"></i>کارتابل مالی پورسانت (چک‌ها)
            </h3>
            <div class="flex items-center gap-2">
                <button class="btn-primary px-4 py-2 rounded text-xs" onclick="app.loadFinanceChequeInbox()">
                    <i class="fa-solid fa-rotate ml-1"></i>بروزرسانی
                </button>
            </div>
        </div>
        <div id="finance-inbox-list" class="overflow-x-auto mt-4"></div>
    </div>
</div>

<!-- COMMISSION CALC MODULE (محاسبه پورسانت) — additive, reuses existing endpoints -->
<div id="view-commission-calc" class="view-section h-full p-6 hidden flex flex-col overflow-y-auto pb-24">
    <style>
    #view-commission-calc .cc-seg{display:inline-flex;background:#0f172a;border:1px solid #334155;border-radius:10px;padding:4px;gap:4px}
    #view-commission-calc .cc-seg button{padding:8px 22px;border-radius:7px;font-size:13px;font-weight:bold;color:#94a3b8;background:transparent;border:none;cursor:pointer}
    #view-commission-calc .cc-seg button.active{background:#1f2937;color:#eab308}
    #view-commission-calc .cc-subtabs{display:inline-flex;gap:3px;background:#0b1220;border:1px solid #334155;border-radius:9px;padding:3px;margin-bottom:16px}
    #view-commission-calc .cc-subtab{padding:8px 16px;font-size:13px;color:#94a3b8;cursor:pointer;border-radius:6px;font-weight:bold}
    #view-commission-calc .cc-subtab.active{color:#eab308;background:#1f2937}
    #view-commission-calc .cc-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    #view-commission-calc .cc-kpi{background:var(--bg-card,#1f2937);border:1px solid #334155;border-radius:12px;padding:16px}
    #view-commission-calc .cc-kpi.cc-clickable-card{cursor:pointer;transition:border-color .15s ease,transform .15s ease,background .15s ease}
    #view-commission-calc .cc-kpi.cc-clickable-card:hover{border-color:#eab308;background:#202f45;transform:translateY(-1px)}
    #view-commission-calc .cc-kpi .l{font-size:12px;color:#94a3b8}
    #view-commission-calc .cc-kpi .v{font-size:26px;font-weight:bold;margin-top:6px}
    #view-commission-calc .cc-kpi .bar{height:4px;border-radius:3px;width:44px;margin-top:10px}
    #view-commission-calc .cc-lanes{display:flex;gap:14px;flex-wrap:wrap}
    #view-commission-calc .cc-lane{flex:1;min-width:230px;background:var(--bg-card,#1f2937);border:1px solid #334155;border-radius:12px;overflow:hidden}
    #view-commission-calc .cc-lane.dragover{border-color:#eab308;box-shadow:0 0 0 2px rgba(234,179,8,.3)}
    #view-commission-calc .cc-lane h4{padding:12px 14px;border-bottom:1px solid #334155;font-size:13px;font-weight:bold}
    #view-commission-calc .cc-lane .cc-lane-foot{padding:10px 14px;border-top:1px solid #334155;font-size:11.5px;color:#eab308}
    #view-commission-calc .cc-chip{display:flex;align-items:center;gap:8px;background:#0f172a;border:1px solid #334155;border-radius:9px;padding:8px 10px;margin:8px;font-size:12.5px;cursor:grab}
    #view-commission-calc .cc-chip.dragging{opacity:.4}
    #view-commission-calc .cc-queue-scroll{overflow-x:auto;padding-bottom:2px}
    #view-commission-calc table.cc-table{width:100%;font-size:12.5px;border-collapse:separate;border-spacing:0 10px}
    #view-commission-calc table.cc-table td,#view-commission-calc table.cc-table th{padding:10px 12px;text-align:right;white-space:nowrap}
    #view-commission-calc table.cc-table th{font-size:11px;color:#94a3b8;font-weight:900;border-bottom:0}
    #view-commission-calc table.cc-table tbody tr.cc-cycle-row td{background:#0f172a;border-top:1px solid #1e3a5f;border-bottom:1px solid #1e3a5f}
    #view-commission-calc table.cc-table tbody tr.cc-cycle-row td:first-child{border-right:1px solid #1e3a5f;border-radius:0 12px 12px 0}
    #view-commission-calc table.cc-table tbody tr.cc-cycle-row td:last-child{border-left:1px solid #1e3a5f;border-radius:12px 0 0 12px}
    #view-commission-calc .cc-cycle-row.open td{background:#111c2f!important;border-color:#2563eb!important}
    #view-commission-calc .cc-queue-person{display:flex;flex-direction:column;gap:3px}
    #view-commission-calc .cc-queue-person-link{width:100%;text-align:right;background:transparent;border:0;padding:0;cursor:pointer}
    #view-commission-calc .cc-queue-person-link:hover strong{color:#facc15;text-decoration:underline}
    #view-commission-calc .cc-queue-person strong{color:#f8fafc;font-size:13px}
    #view-commission-calc .cc-queue-person small{color:#64748b;font-size:10px}
    #view-commission-calc .cc-queue-money{font-weight:900;color:#e5e7eb}
    #view-commission-calc .cc-queue-actions{display:flex;align-items:center;gap:6px;justify-content:flex-start}
    #view-commission-calc .cc-queue-action{display:inline-flex;align-items:center;gap:5px;border-radius:8px;padding:6px 9px;font-size:11px;font-weight:900;border:1px solid transparent}
    #view-commission-calc .cc-queue-action.approve{background:#065f46;color:#d1fae5;border-color:#047857}
    #view-commission-calc .cc-queue-action.reject{background:#7f1d1d;color:#fee2e2;border-color:#991b1b}
    #view-commission-calc .cc-queue-action:hover{filter:brightness(1.08)}
    #view-commission-calc .cc-build-queue-btn{display:inline-flex;align-items:center;gap:7px;background:#eab308;color:#111827;border:1px solid #ca8a04;border-radius:10px;padding:10px 12px;font-size:12px;font-weight:900;box-shadow:0 8px 18px rgba(234,179,8,.16);white-space:nowrap}
    #view-commission-calc .cc-build-queue-btn:hover{background:#facc15}
    #view-commission-calc .cc-build-queue-btn:disabled{opacity:.7;cursor:wait}
    #view-commission-calc .cc-build-summary,.swal2-popup.cc-commission-build-modal .cc-build-summary{direction:rtl;text-align:right;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
    #view-commission-calc .cc-build-summary div,.swal2-popup.cc-commission-build-modal .cc-build-summary div{background:#0f172a;border:1px solid #334155;border-radius:10px;padding:10px}
    #view-commission-calc .cc-build-summary small,.swal2-popup.cc-commission-build-modal .cc-build-summary small{display:block;color:#94a3b8;font-size:11px;margin-bottom:4px;font-weight:900}
    #view-commission-calc .cc-build-summary strong,.swal2-popup.cc-commission-build-modal .cc-build-summary strong{display:block;color:#f8fafc;font-size:15px;font-weight:900;margin-bottom:5px}
    #view-commission-calc .cc-build-summary span,.swal2-popup.cc-commission-build-modal .cc-build-summary span{display:block;color:#94a3b8;font-size:10px;line-height:1.7}
    .swal2-popup.cc-commission-build-modal .cc-build-diagnostics{direction:rtl;text-align:right;margin-top:12px;display:flex;flex-direction:column;gap:9px}
    .swal2-popup.cc-commission-build-modal .cc-build-diagnostic{background:#111827;border:1px solid #334155;border-radius:10px;padding:10px}
    .swal2-popup.cc-commission-build-modal .cc-build-diagnostic h4{font-size:12px;font-weight:900;color:#facc15;margin:0 0 7px}
    .swal2-popup.cc-commission-build-modal .cc-build-diagnostic-summary{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
    .swal2-popup.cc-commission-build-modal .cc-build-diagnostic-summary span{background:#0f172a;border:1px solid #263852;border-radius:999px;color:#cbd5e1;font-size:10px;font-weight:900;padding:4px 8px}
    .swal2-popup.cc-commission-build-modal .cc-build-diagnostic-list,.swal2-popup.cc-commission-build-modal .cc-build-diagnostic-people{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}
    .swal2-popup.cc-commission-build-modal .cc-build-diagnostic-people{margin-top:7px;border-top:1px solid rgba(148,163,184,.16);padding-top:7px}
    .swal2-popup.cc-commission-build-modal .cc-build-diagnostic-list li,.swal2-popup.cc-commission-build-modal .cc-build-diagnostic-people li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;background:#0f172a;border:1px solid #263852;border-radius:8px;padding:7px 8px;color:#e5e7eb;font-size:11px;font-weight:900}
    .swal2-popup.cc-commission-build-modal .cc-build-diagnostic-people li{grid-template-columns:minmax(100px,.7fr) minmax(0,1fr) auto}
    .swal2-popup.cc-commission-build-modal .cc-build-diagnostic-people small{color:#94a3b8;font-size:10px;font-weight:800;white-space:normal}
    .swal2-popup.cc-commission-build-modal .cc-build-diagnostic-list b,.swal2-popup.cc-commission-build-modal .cc-build-diagnostic-people b{color:#facc15}
    .swal2-popup.cc-commission-build-modal{direction:rtl;background:#111827!important;color:#e5e7eb!important;border:1px solid #334155!important;border-radius:14px!important}
    .swal2-popup.cc-commission-build-modal .swal2-title{color:#f8fafc!important;font-size:24px!important}
    .swal2-popup.cc-commission-build-modal .swal2-html-container{text-align:right!important}
    .swal2-popup.cc-commission-build-modal .swal2-confirm{background:#eab308!important;color:#111827!important;border-radius:10px!important;font-weight:900!important}
    .cc-build-note{color:#cbd5e1;font-size:12px;line-height:1.9;margin:12px 0 0;text-align:right}
    .cc-build-meta{color:#94a3b8;font-size:11px;line-height:1.8;margin:6px 0 0;text-align:right}
    .deal-payment-commission-card{box-shadow:inset 0 0 0 1px rgba(234,179,8,.08)}
    .deal-payment-commission-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .deal-payment-commission-meta div{min-width:0;border:1px solid rgba(148,163,184,.12);background:rgba(2,6,23,.22);border-radius:8px;padding:8px}
    .deal-payment-commission-meta span{display:block;color:#9ca3af;font-size:10px;font-weight:900;margin-bottom:5px}
    .deal-payment-commission-meta strong{display:block;color:#f3f4f6;font-size:12px;font-weight:900;line-height:1.8;overflow:hidden;text-overflow:ellipsis}
    #view-commission-calc .cc-preview-panel{border:1px solid #1e3a5f;background:#0f172a;border-radius:14px;padding:14px;margin-top:14px}
    #view-commission-calc .cc-preview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
    #view-commission-calc .cc-preview-head h5{color:#eab308;font-weight:900;font-size:14px}
    #view-commission-calc .cc-preview-head p{color:#94a3b8;font-size:11px;margin-top:4px}
    #view-commission-calc .cc-preview-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px}
    #view-commission-calc .cc-preview-summary>div,#view-commission-calc .cc-preview-summary-card{border:1px solid #263852;border-radius:10px;background:#111c2f;padding:10px;text-align:right;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease}
    #view-commission-calc .cc-preview-summary-card:hover{border-color:#eab308;background:#17233a;transform:translateY(-1px)}
    #view-commission-calc .cc-preview-summary small{display:block;color:#94a3b8;font-size:10px;font-weight:900;margin-bottom:5px}
    #view-commission-calc .cc-preview-summary strong{display:block;color:#f8fafc;font-size:14px;font-weight:900}
    #view-commission-calc .cc-preview-table{width:100%;border-collapse:separate;border-spacing:0 8px;font-size:12px}
    #view-commission-calc .cc-preview-table th{color:#94a3b8;font-size:11px;font-weight:900;text-align:right;padding:6px 9px}
    #view-commission-calc .cc-preview-table td{background:#111827;border-top:1px solid #263852;border-bottom:1px solid #263852;padding:9px;white-space:nowrap}
    #view-commission-calc .cc-preview-table td:first-child{border-right:1px solid #263852;border-radius:0 10px 10px 0}
    #view-commission-calc .cc-preview-table td:last-child{border-left:1px solid #263852;border-radius:10px 0 0 10px}
    #view-commission-calc .cc-preview-table .ok td{background:rgba(6,95,70,.18);border-color:rgba(16,185,129,.4)}
    #view-commission-calc .cc-preview-status{display:inline-flex;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:900}
    #view-commission-calc .cc-preview-status.ok{background:#064e3b;color:#34d399}
    #view-commission-calc .cc-preview-status.skip{background:#3f1d1d;color:#fca5a5}
    #view-commission-calc .cc-preview-detail-btn{border:1px solid #334155;background:#0f172a;color:#cbd5e1;border-radius:8px;padding:5px 8px;font-size:10px;font-weight:900}
    #view-commission-calc .cc-preview-people{display:flex;flex-direction:column;gap:12px}
    #view-commission-calc .cc-preview-person{border:1px solid #263852;border-radius:13px;background:#111827;padding:12px}
    #view-commission-calc .cc-preview-person-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
    #view-commission-calc .cc-preview-person-head strong{color:#f8fafc;font-size:14px;font-weight:900}
    #view-commission-calc .cc-preview-person-head small{display:block;color:#94a3b8;font-size:10px;margin-top:3px}
    #view-commission-calc .cc-preview-person-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid #334155;background:#0f172a;color:#cbd5e1;border-radius:8px;padding:7px 10px;font-size:11px;font-weight:900;white-space:nowrap}
    #view-commission-calc .cc-preview-person-toggle:hover{border-color:#eab308;color:#facc15}
    #view-commission-calc .cc-preview-person-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:8px}
    #view-commission-calc .cc-preview-person-stats div,#view-commission-calc .cc-preview-person-stats button{background:#0f172a;border:1px solid #263852;border-radius:9px;padding:8px;text-align:right;cursor:pointer;transition:border-color .15s ease,background .15s ease}
    #view-commission-calc .cc-preview-person-stats button:hover{border-color:#eab308;background:#17233a}
    #view-commission-calc .cc-preview-person-stats small{display:block;color:#94a3b8;font-size:9px;font-weight:900;margin-bottom:4px}
    #view-commission-calc .cc-preview-person-stats strong{display:block;color:#e5e7eb;font-size:12px;font-weight:900}
    #view-commission-calc .cc-preview-reasons{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 9px}
    #view-commission-calc .cc-preview-reasons button{display:inline-flex;align-items:center;gap:6px;background:#1f1a10;border:1px solid #854d0e;color:#fcd34d;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:900}
    #view-commission-calc .cc-preview-reasons button:hover{border-color:#facc15;background:#2a2110}
    #view-commission-calc .cc-preview-reasons b{background:rgba(250,204,21,.14);border-radius:999px;padding:1px 6px;color:#fde68a}
    #view-commission-calc .cc-preview-person-note{border:1px dashed #334155;background:rgba(15,23,42,.55);border-radius:9px;color:#94a3b8;font-size:10px;font-weight:800;line-height:1.8;padding:7px 9px;margin-bottom:10px}
    #view-commission-calc .cc-detail-cell{padding:0 12px 12px!important;background:transparent!important}
    #view-commission-calc .cc-detail-toggle{display:inline-flex;align-items:center;gap:5px;background:#111c2f;border:1px solid #334155;color:#cbd5e1;border-radius:8px;padding:6px 9px;font-size:11px;font-weight:900}
    #view-commission-calc .cc-detail-toggle.open{background:#1e3a8a;border-color:#3b82f6;color:#bfdbfe}
    #view-commission-calc .cc-detail-toggle i{transition:transform .15s ease}
    #view-commission-calc .cc-detail-toggle.open i{transform:rotate(180deg)}
    #view-commission-calc .cc-nested-panel{border:1px solid rgba(59,130,246,.42);background:linear-gradient(180deg,rgba(37,99,235,.11),rgba(15,23,42,.62));border-radius:12px;padding:12px;margin-top:-6px}
    #view-commission-calc .cc-nested-title{color:#93c5fd;font-weight:900;font-size:12px;margin-bottom:10px}
    #view-commission-calc .cc-nested-table{width:100%;border-collapse:collapse;font-size:12px}
    #view-commission-calc .cc-nested-table th,#view-commission-calc .cc-nested-table td{padding:8px;border-bottom:1px solid rgba(148,163,184,.18);text-align:right;white-space:nowrap}
    #view-commission-calc .cc-nested-table th{color:#bfdbfe;font-size:11px;font-weight:800}
    #view-commission-calc .cc-nested-table tbody tr:last-child td{border-bottom:0}
    #view-commission-calc .cc-nested-empty{border:1px dashed #334155;border-radius:10px;padding:12px;color:#94a3b8;font-size:12px}
    #view-commission-calc .cc-nested-links,.cc-drill-links{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
    #view-commission-calc .cc-nested-links button,.cc-drill-links button{display:inline-flex;align-items:center;gap:4px;background:#0f172a;border:1px solid #334155;color:#93c5fd;border-radius:7px;padding:4px 7px;font-size:10px;font-weight:900}
    #view-commission-calc .cc-nested-links button:hover,.cc-drill-links button:hover{border-color:#eab308;color:#facc15}
    .swal2-popup.cc-drill-modal{direction:rtl;background:#0b1220!important;color:#e5e7eb!important;border:1px solid #334155!important;border-radius:14px!important;padding:16px!important}
    .swal2-popup.cc-drill-modal .swal2-title{font-size:18px!important;color:#facc15!important;text-align:right!important}
    .swal2-popup.cc-drill-modal .swal2-html-container{margin:0!important;text-align:right!important;overflow:visible!important}
    .cc-drill-loading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:160px;color:#cbd5e1;font-size:13px}
    .cc-drill{direction:rtl;text-align:right;display:flex;flex-direction:column;gap:12px;max-height:78vh;overflow:auto;padding-left:4px}
    .cc-drill-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border:1px solid #263852;background:#111827;border-radius:12px;padding:12px}
    .cc-drill-head h3{font-size:17px;font-weight:900;color:#f8fafc;margin:0}
    .cc-drill-head p{font-size:11px;color:#94a3b8;margin:5px 0 0}
    .cc-drill-tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-start}
    .cc-drill-tabs button{background:#0f172a;border:1px solid #334155;color:#cbd5e1;border-radius:8px;padding:7px 10px;font-size:11px;font-weight:900}
    .cc-drill-tabs button.active,.cc-drill-tabs button:hover{border-color:#eab308;color:#facc15;background:rgba(234,179,8,.08)}
    .cc-drill-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
    .cc-drill-cards div{background:#111827;border:1px solid #263852;border-radius:10px;padding:10px;min-width:0}
    .cc-drill-cards small{display:block;color:#94a3b8;font-size:10px;font-weight:900;margin-bottom:5px}
    .cc-drill-cards strong{display:block;color:#f8fafc;font-size:13px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .cc-drill-table-wrap{overflow:auto;border:1px solid #263852;border-radius:12px;background:#0f172a}
    .cc-drill-table{width:100%;border-collapse:separate;border-spacing:0;min-width:1280px;font-size:11.5px}
    .cc-drill-table th{position:sticky;top:0;background:#111827;color:#93c5fd;padding:9px;border-bottom:1px solid #263852;z-index:1;white-space:nowrap}
    .cc-drill-table td{padding:9px;border-bottom:1px solid rgba(148,163,184,.14);vertical-align:top;white-space:nowrap}
    .cc-drill-table td strong{display:block;color:#f8fafc;font-size:12px;margin-bottom:3px}
    .cc-drill-table td small{display:block;color:#94a3b8;font-size:10px;line-height:1.6}
    .cc-drill-table code{display:inline-block;direction:ltr;background:#020617;border:1px solid #1f2937;border-radius:7px;padding:5px 7px;color:#c4b5fd;font-size:10px;white-space:nowrap}
    .cc-drill-money{color:#34d399;font-weight:900}
    .cc-drill-empty{color:#94a3b8;text-align:center;padding:18px!important}
    .cc-cycle-picker{direction:rtl;text-align:right;display:flex;flex-direction:column;gap:8px}
    .cc-cycle-picker-summary,.cc-cycle-picker-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#111827;border:1px solid #263852;border-radius:10px;padding:10px}
    .cc-cycle-picker-summary span{color:#94a3b8;font-size:12px;font-weight:900}
    .cc-cycle-picker-summary strong,.cc-cycle-picker-row b{color:#facc15;font-size:13px;font-weight:900}
    .cc-cycle-picker-row strong{display:block;color:#f8fafc;font-size:13px;margin-bottom:4px}
    .cc-cycle-picker-row small{display:block;color:#94a3b8;font-size:10px}
    .cc-cycle-picker-row>div:last-child{display:flex;align-items:center;gap:8px;white-space:nowrap}
    .cc-cycle-picker-row button{background:#0f172a;border:1px solid #334155;color:#93c5fd;border-radius:8px;padding:6px 10px;font-size:11px;font-weight:900}
    .cc-cycle-picker-row button:hover{border-color:#eab308;color:#facc15}
    @media (max-width:900px){.cc-drill-head{flex-direction:column}.cc-drill-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.cc-drill{max-height:74vh}}
    #view-commission-calc .cc-trend-fallback{height:240px;display:flex;align-items:flex-end;gap:10px;border:1px solid #334155;border-radius:12px;background:#0f172a;padding:14px 12px 10px;direction:ltr}
    #view-commission-calc .cc-trend-fallback .bar{flex:1;min-width:34px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
    #view-commission-calc .cc-trend-fallback .fill{width:100%;max-width:46px;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,#facc15,#d97706);min-height:8px}
    #view-commission-calc .cc-trend-fallback .value{font-size:10px;color:#facc15;font-weight:900;white-space:nowrap}
    #view-commission-calc .cc-trend-fallback .month{font-size:10px;color:#94a3b8;white-space:nowrap}
    #view-commission-calc .cc-team-workspace{background:rgba(15,23,42,.45);color:#e5e7eb;border:1px solid #334155;border-radius:14px;padding:14px;direction:rtl}
    #view-commission-calc .cc-team-hero{background:#1f2937;border:1px solid #334155;color:#f8fafc;border-radius:12px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
    #view-commission-calc .cc-team-hero .title{font-size:18px;font-weight:900}
    #view-commission-calc .cc-team-hero .meta{font-size:12px;color:#94a3b8;margin-top:4px}
    #view-commission-calc .cc-team-add{background:#eab308;border:1px solid #ca8a04;color:#0f172a;border-radius:10px;padding:10px 14px;font-size:13px;font-weight:900}
    #view-commission-calc .cc-team-shell{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
    #view-commission-calc .cc-team-shell section>div:first-child input{background:#0f172a;border:1px solid #334155;color:#e5e7eb;border-radius:10px;padding:10px 12px;font-size:13px;min-width:220px}
    #view-commission-calc .cc-team-side{background:#1f2937;border:1px solid #334155;border-radius:14px;padding:16px;box-shadow:none;position:sticky;top:12px}
    #view-commission-calc .cc-team-side h4{font-size:16px;font-weight:900;margin-bottom:12px;color:#eab308}
    #view-commission-calc .cc-team-field{margin-top:12px}
    #view-commission-calc .cc-team-field-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
    #view-commission-calc .cc-team-field-head label,#view-commission-calc .cc-team-side label{display:block;font-size:12px;color:#94a3b8;font-weight:900;margin:0}
    #view-commission-calc .cc-team-field-head span{font-size:10px;color:#eab308;background:rgba(234,179,8,.1);border:1px solid rgba(234,179,8,.22);border-radius:999px;padding:3px 8px;white-space:nowrap}
    #view-commission-calc .cc-team-side select,#view-commission-calc .cc-team-side input{width:100%;background:#0f172a;border:1px solid #334155;border-radius:10px;color:#e5e7eb;padding:10px 12px;font-size:13px}
    #view-commission-calc .cc-team-pick-search{margin-bottom:7px}
    #view-commission-calc .cc-team-pick-actions{display:flex;align-items:center;gap:6px;margin:7px 0}
    #view-commission-calc .cc-team-pick-actions button{background:#0f172a;border:1px solid #334155;color:#cbd5e1;border-radius:8px;padding:5px 8px;font-size:10px;font-weight:900}
    #view-commission-calc .cc-team-member-picker{background:#0f172a;border:1px solid #334155;border-radius:10px;padding:8px;display:grid;grid-template-columns:1fr;gap:6px;max-height:260px;overflow:auto}
    #view-commission-calc .cc-team-member-choice{display:flex;align-items:center;justify-content:flex-start;gap:0;background:#111c2f;border:1px solid #263852;border-radius:9px;padding:8px 10px;color:#e5e7eb;font-size:12px;font-weight:800;cursor:pointer;min-height:40px}
    #view-commission-calc .cc-team-member-choice input{width:16px;height:16px;accent-color:#eab308;flex-shrink:0;margin:0 0 0 16px}
    #view-commission-calc .cc-team-member-choice span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    #view-commission-calc .cc-team-member-choice:has(input:checked){border-color:#eab308;background:rgba(234,179,8,.08);color:#facc15}
    #view-commission-calc .cc-team-primary{width:100%;background:#eab308;color:#0f172a;border-radius:10px;padding:12px;font-weight:900;margin-top:14px}
    #view-commission-calc .cc-team-note{background:rgba(234,179,8,.08);border:1px solid #b9770e;color:#eab308;border-radius:10px;padding:10px;font-size:11px;line-height:1.7;margin-top:12px}
    #view-commission-calc .cc-team-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;align-items:stretch}
    #view-commission-calc .cc-team-column{background:#1f2937;border:1px solid #334155;border-radius:14px;min-height:430px;overflow:hidden;display:flex;flex-direction:column;box-shadow:none}
    #view-commission-calc .cc-team-column.dragover{border-color:#eab308;box-shadow:0 0 0 3px rgba(234,179,8,.2)}
    #view-commission-calc .cc-team-head{padding:12px 14px;border-bottom:1px solid #334155;display:flex;align-items:center;justify-content:space-between;gap:10px}
    #view-commission-calc .cc-team-head h5{font-size:15px;font-weight:900;color:#f8fafc}
    #view-commission-calc .cc-team-head p{font-size:11px;color:#94a3b8;margin-top:4px}
    #view-commission-calc .cc-team-rule-summary{display:inline-flex;align-items:center;gap:5px;color:#eab308;background:rgba(234,179,8,.08);border:1px solid rgba(234,179,8,.2);border-radius:999px;padding:4px 8px;font-size:10px;font-weight:900;margin-top:8px}
    #view-commission-calc .cc-team-head-actions{display:flex;align-items:center;gap:8px}
    #view-commission-calc .cc-team-delete{width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:#3b1212;border:1px solid #7f1d1d;color:#fca5a5}
    #view-commission-calc .cc-team-delete:hover{background:#7f1d1d;color:#fee2e2}
    #view-commission-calc .cc-team-members{padding:12px;display:flex;flex-direction:column;gap:9px;flex:1}
    #view-commission-calc .cc-team-member{background:rgba(234,179,8,.07);border:1px dashed #b9770e;border-radius:10px;padding:9px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;cursor:grab;color:#eab308}
    #view-commission-calc .cc-team-member.dragging{opacity:.45}
    #view-commission-calc .cc-team-member.no-rule{background:#0f172a;border-color:#1f2937;border-style:solid;color:#e5e7eb}
    #view-commission-calc .cc-team-member .name{font-weight:900;color:#eab308;font-size:13px}
    #view-commission-calc .cc-team-member .rule{font-size:10px;color:#eab308;margin-top:3px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    #view-commission-calc .cc-team-member.no-rule .name{color:#e5e7eb}
    #view-commission-calc .cc-team-member.no-rule .rule{color:#94a3b8}
    #view-commission-calc .cc-team-member-actions{display:flex;align-items:center;gap:6px;justify-content:flex-start}
    #view-commission-calc .cc-team-member-action{width:28px;height:28px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;background:#111c2f;border:1px solid #263852;color:#94a3b8;font-size:11px}
    #view-commission-calc .cc-team-member-action.remove{width:auto;height:auto;background:transparent;border:0;border-radius:0;color:#fca5a5;padding:2px;font-size:13px}
    #view-commission-calc .cc-team-member-action.remove:hover{color:#fecaca}
    #view-commission-calc .cc-team-member-action:not(.remove):hover{border-color:#eab308;color:#facc15}
    #view-commission-calc .cc-team-drop-hint{border:1.5px dashed #475569;border-radius:12px;padding:12px;text-align:center;color:#94a3b8;font-weight:900;font-size:12px}
    #view-commission-calc .cc-team-assign-wrap{margin-top:6px}
    #view-commission-calc .cc-team-foot{border-top:1px solid #334155;background:#0f172a;color:#eab308;font-size:11px;font-weight:900;padding:12px 14px;min-height:44px}
    #view-commission-calc .cc-team-assign-cta{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:#eab308;border:1px solid #ca8a04;color:#0f172a;border-radius:9px;padding:10px 12px;font-size:12px;font-weight:900}
    #view-commission-calc .cc-team-assign-cta:hover{background:#facc15}
    #view-commission-calc .cc-team-rate-cta{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:#111c2f;border:1px solid #334155;color:#facc15;border-radius:9px;padding:10px 12px;font-size:12px;font-weight:900}
    #view-commission-calc .cc-team-rate-cta:hover{border-color:#eab308;background:rgba(234,179,8,.08)}
    .swal2-popup.cc-team-rule-modal{background:#111827!important;color:#e5e7eb!important;border:1px solid #334155!important;border-radius:14px!important}
    .swal2-popup.cc-team-rule-modal .swal2-title{color:#f8fafc!important;font-size:24px!important}
    .cc-team-rule-modal-body{direction:rtl;text-align:right}
    .cc-team-rule-modal-hint{color:#94a3b8;font-size:12px;margin-bottom:12px}
    .cc-team-rule-modal-list{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow:auto;padding-left:4px}
    .cc-team-rule-modal-item{display:flex;align-items:center;gap:0;background:#0f172a;border:1px solid #334155;border-radius:10px;padding:10px;color:#e5e7eb;cursor:pointer}
    .cc-team-rule-modal-item input{width:16px;height:16px;accent-color:#eab308;margin:0 0 0 16px;flex-shrink:0}
    .cc-team-rule-modal-item .title{font-weight:900;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .cc-team-rule-modal-item small{margin-right:auto;color:#94a3b8}
    .cc-team-rule-modal-item:has(input:checked){border-color:#eab308;background:rgba(234,179,8,.08)}
    .cc-team-modal-field{margin-bottom:12px}
    .cc-team-modal-field label{display:block;color:#94a3b8;font-size:12px;font-weight:900;margin-bottom:6px}
    .cc-team-modal-field select,.cc-team-modal-field input[type="text"]{width:100%;background:#0f172a;border:1px solid #334155;border-radius:10px;color:#e5e7eb;padding:10px 12px;font-size:13px}
    .cc-team-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .cc-team-modal-help{color:#94a3b8;font-size:11px;line-height:1.8;margin-top:8px}
    .swal2-popup.cc-rule-edit-modal .cc-rule-edit-body{text-align:right;direction:rtl}
    .swal2-popup.cc-rule-edit-modal .cc-tier-builder-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:10px 0 12px}
    .swal2-popup.cc-rule-edit-modal .cc-tier-kicker{display:inline-flex;align-items:center;background:rgba(234,179,8,.12);border:1px solid rgba(234,179,8,.35);color:#facc15;border-radius:999px;padding:3px 9px;font-size:10px;font-weight:900;margin-bottom:6px}
    .swal2-popup.cc-rule-edit-modal .cc-tier-title{display:block;color:#f8fafc;font-size:13px;font-weight:900}
    .swal2-popup.cc-rule-edit-modal .cc-tier-builder-head p{color:#94a3b8;font-size:11px;line-height:1.7;margin-top:4px}
    .swal2-popup.cc-rule-edit-modal .cc-tier-add{display:inline-flex;align-items:center;gap:7px;background:#eab308;color:#0f172a;border:1px solid #ca8a04;border-radius:9px;padding:8px 11px;font-size:12px;font-weight:900;white-space:nowrap}
    .swal2-popup.cc-rule-edit-modal .cc-tier-column-head{display:grid;grid-template-columns:minmax(0,1fr) 88px 34px;gap:8px;padding:0 12px 6px;color:#64748b;font-size:10px;font-weight:900}
    .swal2-popup.cc-rule-edit-modal #cc-edit-tier-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
    .swal2-popup.cc-rule-edit-modal .cc-tier-row{display:grid;grid-template-columns:34px minmax(0,1fr) 88px 34px;gap:8px;align-items:center;background:#111c2f;border:1px solid #334155;border-radius:10px;padding:9px;min-width:0}
    .swal2-popup.cc-rule-edit-modal .cc-tier-index{width:30px;height:30px;border-radius:8px;background:rgba(234,179,8,.12);border:1px solid rgba(234,179,8,.28);color:#facc15;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900}
    .swal2-popup.cc-rule-edit-modal .cc-tier-range{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);gap:7px;align-items:center;min-width:0}
    .swal2-popup.cc-rule-edit-modal .cc-tier-range-sep{color:#64748b;text-align:center;font-size:11px;font-weight:900}
    .swal2-popup.cc-rule-edit-modal .cc-tier-row input{height:38px;border-radius:8px;font-size:12px}
    .swal2-popup.cc-rule-edit-modal .cc-tier-pct-wrap{position:relative}
    .swal2-popup.cc-rule-edit-modal .cc-tier-pct-wrap .cc-tier-pct{padding-left:25px;text-align:center;font-weight:900;color:#f8fafc}
    .swal2-popup.cc-rule-edit-modal .cc-tier-pct-wrap span{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:#eab308;font-size:11px;font-weight:900;pointer-events:none}
    .swal2-popup.cc-rule-edit-modal .cc-tier-remove{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:#1f2937;color:#f87171;border:1px solid #334155}
    #view-commission-calc .cc-team-empty{background:var(--bg-card,#1f2937);border:1px dashed #475569;border-radius:14px;padding:28px;text-align:center;color:#94a3b8;font-size:13px}
    @media (max-width:1200px){#view-commission-calc .cc-team-shell{grid-template-columns:1fr}#view-commission-calc .cc-team-side{position:static}#view-commission-calc .cc-team-board{grid-template-columns:repeat(2,minmax(260px,1fr))}}
    @media (max-width:760px){#view-commission-calc .cc-team-board{grid-template-columns:1fr}#view-commission-calc .cc-team-hero{align-items:flex-start;flex-direction:column}}
    #view-commission-calc .cc-drill{background:#0f1a2e;border:1px solid #1e3a5f;border-radius:8px}
    #view-commission-calc .cc-badge{font-size:11px;padding:2px 9px;border-radius:12px;font-weight:bold}
    #view-commission-calc .cc-b-pending{background:#3b2f0b;color:#eab308}
    #view-commission-calc .cc-b-approved{background:#0b2f24;color:#10b981}
    #view-commission-calc .cc-b-paid{background:#0b2540;color:#3b82f6}
    #view-commission-calc .cc-b-rejected{background:#3b1212;color:#ef4444}
    #view-commission-calc .cc-tier-builder-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
    #view-commission-calc .cc-tier-kicker{display:inline-flex;align-items:center;background:rgba(234,179,8,.12);border:1px solid rgba(234,179,8,.35);color:#facc15;border-radius:999px;padding:3px 9px;font-size:10px;font-weight:900;margin-bottom:6px}
    #view-commission-calc .cc-tier-title{display:block;color:#f8fafc;font-size:13px;font-weight:900}
    #view-commission-calc .cc-tier-builder-head p{color:#94a3b8;font-size:11px;line-height:1.7;margin-top:4px}
    #view-commission-calc .cc-tier-add{display:inline-flex;align-items:center;gap:7px;background:#eab308;color:#0f172a;border:1px solid #ca8a04;border-radius:9px;padding:8px 11px;font-size:12px;font-weight:900;white-space:nowrap}
    #view-commission-calc .cc-tier-add:hover{background:#facc15}
    #view-commission-calc .cc-tier-builder{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:12px;align-items:stretch}
    #view-commission-calc .cc-tier-list{min-width:0}
    #view-commission-calc .cc-tier-column-head{display:grid;grid-template-columns:minmax(0,1fr) 88px 34px;gap:8px;padding:0 12px 6px;color:#64748b;font-size:10px;font-weight:900}
    #view-commission-calc #cc-tier-rows{display:flex;flex-direction:column;gap:8px}
    #view-commission-calc .cc-tier-row{display:grid;grid-template-columns:34px minmax(0,1fr) 88px 34px;gap:8px;align-items:center;background:#111c2f;border:1px solid #334155;border-radius:10px;padding:9px;min-width:0}
    #view-commission-calc .cc-tier-row:focus-within{border-color:#eab308;box-shadow:0 0 0 3px rgba(234,179,8,.14)}
    #view-commission-calc .cc-tier-index{width:30px;height:30px;border-radius:8px;background:rgba(234,179,8,.12);border:1px solid rgba(234,179,8,.28);color:#facc15;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900}
    #view-commission-calc .cc-tier-range{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);gap:7px;align-items:center;min-width:0}
    #view-commission-calc .cc-tier-range-sep{color:#64748b;text-align:center;font-size:11px;font-weight:900}
    #view-commission-calc .cc-tier-row input{height:38px;border-radius:8px;font-size:12px}
    #view-commission-calc .cc-tier-pct-wrap{position:relative}
    #view-commission-calc .cc-tier-pct-wrap .cc-tier-pct{padding-left:25px;text-align:center;font-weight:900;color:#f8fafc}
    #view-commission-calc .cc-tier-pct-wrap span{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:#eab308;font-size:11px;font-weight:900;pointer-events:none}
    #view-commission-calc .cc-tier-remove{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:#1f2937;color:#f87171;border:1px solid #334155}
    #view-commission-calc .cc-tier-remove:hover{background:#3b1212;border-color:#ef4444;color:#fecaca}
    #view-commission-calc .cc-tier-preview{background:#0f172a;border:1px solid #334155;border-radius:12px;padding:10px;display:flex;flex-direction:column;min-height:168px}
    #view-commission-calc .cc-tier-preview-head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#94a3b8;font-size:11px;font-weight:900;margin-bottom:8px}
    #view-commission-calc .cc-tier-preview-head strong{color:#eab308;font-size:11px}
    #view-commission-calc .cc-av{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#0b1220;font-weight:bold;font-size:12px;flex-shrink:0}
    #view-commission-calc .cc-av.lg{width:42px;height:42px;font-size:15px}
    #view-commission-calc .cc-tier-chart{flex:1;display:flex;align-items:flex-end;gap:7px;height:132px;border-right:0;padding-right:0;min-width:0}
    #view-commission-calc .cc-tier-chart .col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%}
    #view-commission-calc .cc-tier-chart .bk{width:100%;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#facc15,#d97706);min-height:6px;box-shadow:0 8px 18px rgba(234,179,8,.14)}
    #view-commission-calc .cc-tier-chart .rt{font-size:11px;font-weight:bold;color:#eab308}
    #view-commission-calc .cc-tier-chart .rg{font-size:9px;color:#94a3b8;max-width:46px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr}
    #view-commission-calc .cc-tier-empty{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:#64748b;border:1px dashed #334155;border-radius:10px;font-size:11px;line-height:1.8;padding:10px}
    #view-commission-calc .cc-pill{display:inline-flex;background:#0f172a;border:1px solid #334155;border-radius:8px;padding:3px;gap:3px;font-size:12px}
    #view-commission-calc .cc-pill span{padding:6px 12px;border-radius:6px;color:#94a3b8;font-weight:bold;cursor:pointer}
    #view-commission-calc .cc-pill span.active{background:#1f2937;color:#eab308}
    #view-commission-calc .cc-tier-mode{width:100%;justify-content:space-between}
    #view-commission-calc .cc-tier-mode span{flex:1;text-align:center}
    @media (max-width:900px){#view-commission-calc .cc-tier-builder{grid-template-columns:1fr}#view-commission-calc .cc-tier-preview{min-height:150px}#view-commission-calc .cc-tier-chart{height:112px}}
    @media (max-width:640px){#view-commission-calc .cc-tier-builder-head{flex-direction:column}#view-commission-calc .cc-tier-add{width:100%;justify-content:center}#view-commission-calc .cc-tier-column-head{display:none}#view-commission-calc .cc-tier-row{grid-template-columns:30px minmax(0,1fr) 34px;grid-template-areas:"idx range del" ". pct del"}#view-commission-calc .cc-tier-index{grid-area:idx}#view-commission-calc .cc-tier-range{grid-area:range;grid-template-columns:1fr}#view-commission-calc .cc-tier-range-sep{display:none}#view-commission-calc .cc-tier-pct-wrap{grid-area:pct}#view-commission-calc .cc-tier-remove{grid-area:del}}
    #view-commission-calc .cc-product-scope{background:#111c2f;border:1px solid #334155;border-radius:12px;padding:12px;margin:12px 0 14px}
    #view-commission-calc .cc-product-scope-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
    #view-commission-calc .cc-product-scope-title{display:flex;flex-direction:column;gap:3px;color:#e5e7eb;font-size:12px;font-weight:900}
    #view-commission-calc .cc-product-scope-title small{color:#94a3b8;font-size:10px;font-weight:700}
    #view-commission-calc .cc-product-all,.swal2-popup.cc-team-rule-modal .cc-product-all{display:inline-flex;align-items:center;gap:10px;background:#0f172a;border:1px solid #263852;border-radius:999px;padding:7px 10px;color:#cbd5e1;font-size:11px;font-weight:900;cursor:pointer;white-space:nowrap;margin-bottom:10px}
    #view-commission-calc .cc-product-all input,#view-commission-calc .cc-product-choice input,.swal2-popup.cc-team-rule-modal .cc-product-all input,.swal2-popup.cc-team-rule-modal .cc-product-choice input{width:16px;height:16px;accent-color:#eab308;flex-shrink:0}
    #view-commission-calc .cc-product-picker,.swal2-popup.cc-team-rule-modal .cc-product-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;max-height:166px;overflow:auto;padding-left:4px}
    #view-commission-calc .cc-product-choice,.swal2-popup.cc-team-rule-modal .cc-product-choice{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:40px;background:#0f172a;border:1px solid #263852;border-radius:10px;padding:8px 10px;color:#cbd5e1;font-size:12px;font-weight:800;cursor:pointer}
    #view-commission-calc .cc-product-choice:hover,.swal2-popup.cc-team-rule-modal .cc-product-choice:hover{border-color:#eab308}
    #view-commission-calc .cc-product-choice span,.swal2-popup.cc-team-rule-modal .cc-product-choice span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    #view-commission-calc .cc-asn-user-picker{background:#111c2f;border:1px solid #334155;border-radius:12px;padding:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;max-height:210px;overflow:auto;margin-bottom:12px}
    #view-commission-calc .cc-asn-user-choice{display:flex;align-items:center;justify-content:flex-end;gap:16px;min-height:42px;background:#0f172a;border:1px solid #263852;border-radius:10px;padding:8px 10px;color:#cbd5e1;font-size:12px;font-weight:900;cursor:pointer}
    #view-commission-calc .cc-asn-user-choice:hover{border-color:#eab308}
    #view-commission-calc .cc-asn-user-choice:has(input:checked){border-color:#eab308;background:rgba(234,179,8,.08);color:#facc15}
    #view-commission-calc .cc-asn-user-choice input{width:16px;height:16px;accent-color:#eab308;flex-shrink:0}
    #view-commission-calc .cc-asn-user-choice span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    #view-commission-calc .cc-asn-user-choice .meta{display:block;color:#64748b;font-size:10px;margin-top:3px;font-weight:800}
    #view-commission-calc .cc-asn-actions{display:flex;align-items:center;gap:7px;margin:7px 0}
    #view-commission-calc .cc-asn-actions button{background:#0f172a;border:1px solid #334155;color:#cbd5e1;border-radius:8px;padding:5px 9px;font-size:10px;font-weight:900}
    #view-commission-calc .cc-assign-list{display:flex;flex-direction:column;gap:10px}
    #view-commission-calc .cc-assign-card{position:relative;background:#0f172a;border:1px solid #1e3a5f;border-radius:12px;padding:28px 14px 12px;display:grid;grid-template-columns:minmax(150px,.8fr) minmax(180px,1fr) minmax(150px,.8fr) minmax(150px,.8fr) auto;gap:12px;align-items:center}
    #view-commission-calc .cc-assign-card.is-inactive{opacity:.68;border-style:dashed}
    #view-commission-calc .cc-assign-status{position:absolute;top:8px;right:12px}
    #view-commission-calc .cc-assign-cell{min-width:0}
    #view-commission-calc .cc-assign-cell small{display:block;color:#64748b;font-size:10px;font-weight:900;margin-bottom:4px}
    #view-commission-calc .cc-assign-cell strong{display:block;color:#e5e7eb;font-size:13px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    #view-commission-calc .cc-assign-products{color:#94a3b8;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    #view-commission-calc .cc-assign-products-row{display:flex;align-items:center;gap:8px;min-width:0}
    #view-commission-calc .cc-assign-products-row .cc-assign-products{flex:1}
    #view-commission-calc .cc-assign-product-detail{display:inline-flex;align-items:center;justify-content:center;background:#111c2f;border:1px solid #334155;border-radius:8px;color:#93c5fd;font-size:10px;font-weight:900;padding:5px 8px;white-space:nowrap}
    #view-commission-calc .cc-assign-product-detail:hover{border-color:#3b82f6;color:#bfdbfe}
    #view-commission-calc .cc-assign-toggle{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:128px}
    #view-commission-calc .cc-assign-actions{display:flex;align-items:center;gap:6px}
    #view-commission-calc .cc-assign-actions button{width:30px;height:30px;border-radius:8px;background:#111c2f;border:1px solid #263852;display:inline-flex;align-items:center;justify-content:center;font-size:11px}
    #view-commission-calc .cc-assign-actions .edit{color:#93c5fd}
    #view-commission-calc .cc-assign-actions .delete{color:#fca5a5}
    #view-commission-calc .cc-assign-actions button:hover{border-color:#eab308}
    .swal2-popup.cc-products-modal{background:#111c2f!important;color:#e5e7eb!important;border:1px solid #334155!important;border-radius:14px!important;padding:16px!important;box-shadow:0 24px 80px rgba(0,0,0,.45)!important}
    .swal2-popup.cc-products-modal .swal2-title{font-size:18px!important;line-height:1.6!important;color:#facc15!important;margin:0 0 8px!important;padding:0!important}
    .swal2-popup.cc-products-modal .swal2-html-container{margin:0!important;padding:0!important}
    .swal2-popup.cc-products-modal .swal2-actions{margin-top:12px!important}
    .swal2-popup.cc-products-modal .swal2-confirm{background:#eab308!important;color:#0f172a!important;border-radius:10px!important;font-size:12px!important;font-weight:900!important;padding:8px 18px!important}
    .cc-products-modal-meta{direction:rtl;text-align:right;color:#94a3b8;font-size:11px;font-weight:800;margin:0 0 10px}
    .cc-products-modal-body{direction:rtl;text-align:right;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;max-height:300px;overflow:auto;padding-left:4px}
    .cc-products-modal-item{min-width:0;background:#0f172a;border:1px solid #263852;border-radius:9px;color:#e5e7eb;font-size:12px;font-weight:900;padding:8px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    @media (max-width:980px){#view-commission-calc .cc-assign-card{grid-template-columns:1fr 1fr;grid-template-areas:"agent rule" "date products" "toggle toggle"}#view-commission-calc .cc-assign-toggle{grid-area:toggle;justify-content:flex-start}}
    @media (max-width:640px){#view-commission-calc .cc-assign-card{grid-template-columns:1fr;grid-template-areas:none}#view-commission-calc .cc-asn-user-picker,#view-commission-calc .cc-product-picker{grid-template-columns:1fr}#view-commission-calc .cc-preview-person-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.swal2-popup.cc-commission-build-modal .cc-build-summary{grid-template-columns:1fr}}
    #view-commission-calc .cc-rule-fixed-box{margin-top:18px}
    #view-commission-calc .cc-whatif{background:rgba(20,184,166,.08);border:1px solid #0f766e;border-radius:12px;padding:12px;margin:12px 0;color:#d1fae5}
    #view-commission-calc .cc-whatif-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
    #view-commission-calc .cc-whatif .l{font-size:13px;font-weight:900;color:#2dd4bf}
    #view-commission-calc .cc-whatif p{font-size:11px;color:#99f6e4;line-height:1.7;margin-top:4px}
    #view-commission-calc .cc-whatif-head>span{background:rgba(45,212,191,.12);border:1px solid rgba(45,212,191,.28);border-radius:999px;color:#5eead4;font-size:10px;font-weight:900;padding:3px 8px;white-space:nowrap}
    #view-commission-calc .cc-whatif-row{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:10px;align-items:stretch}
    #view-commission-calc .cc-whatif-input-wrap{min-width:0}
    #view-commission-calc .cc-whatif-input-wrap input{height:42px;font-size:13px}
    #view-commission-calc .cc-whatif-input-wrap small{display:block;color:#5eead4;font-size:10px;margin-top:5px}
    #view-commission-calc .cc-whatif-result{background:#0f172a;border:1px solid rgba(45,212,191,.28);border-radius:10px;padding:9px 10px;display:flex;flex-direction:column;justify-content:center;min-width:0}
    #view-commission-calc .cc-whatif-result small{font-size:10px;color:#94a3b8;margin-bottom:4px}
    #view-commission-calc .cc-whatif-res{font-size:14px;font-weight:900;color:#2dd4bf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    #view-commission-calc .cc-rule-library-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
    #view-commission-calc .cc-rule-library-head h4{font-size:14px;font-weight:900;color:#facc15}
    #view-commission-calc .cc-rule-library-head p{font-size:11px;color:#94a3b8;margin-top:4px}
    #view-commission-calc .cc-rule-library-head button{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:#0f172a;border:1px solid #334155;border-radius:9px;color:#cbd5e1}
    #view-commission-calc .cc-rule-library-head button:hover{border-color:#eab308;color:#eab308}
    #view-commission-calc .cc-rules-list{display:flex;flex-direction:column;gap:10px}
    #view-commission-calc .cc-rule-card{background:#0f172a;border:1px solid #1e3a5f;border-radius:12px;padding:12px;display:grid;grid-template-columns:minmax(320px,1.45fr) minmax(180px,.8fr) auto auto;gap:14px;align-items:center}
    #view-commission-calc .cc-rule-card.is-inactive{opacity:.66;border-style:dashed}
    #view-commission-calc .cc-rule-identity{min-width:0;display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:center}
    #view-commission-calc .cc-rule-name-wrap{min-width:0}
    #view-commission-calc .cc-rule-name{font-size:15px;font-weight:900;color:#f8fafc;line-height:1.6;overflow:hidden;text-overflow:ellipsis}
    #view-commission-calc .cc-rule-meta{display:flex;flex-wrap:wrap;gap:7px;color:#94a3b8;font-size:11px;margin-top:7px}
    #view-commission-calc .cc-rule-meta>span{display:inline-flex;align-items:center;gap:5px;background:#111c2f;border:1px solid #263852;border-radius:999px;padding:4px 8px}
    #view-commission-calc .cc-rule-scope{display:flex;align-items:center;gap:5px;flex-wrap:wrap;max-width:100%;min-width:0}
    #view-commission-calc .cc-rule-scope>i{color:#94a3b8;font-size:10px;margin-left:1px}
    #view-commission-calc .cc-rule-scope-chip{display:inline-flex;align-items:center;max-width:128px;background:#111c2f;border:1px solid #263852;border-radius:999px;padding:4px 8px;color:#cbd5e1;font-size:10.5px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    #view-commission-calc .cc-rule-scope-chip.all{color:#67e8f9;border-color:rgba(34,211,238,.24);background:rgba(34,211,238,.08)}
    #view-commission-calc .cc-rule-scope-more{display:inline-flex;align-items:center;justify-content:center;height:24px;min-width:38px;border-radius:999px;background:rgba(234,179,8,.12);border:1px solid rgba(234,179,8,.32);color:#facc15;font-size:10.5px;font-weight:900;padding:0 9px}
    #view-commission-calc .cc-rule-scope-more:hover{background:rgba(234,179,8,.2);border-color:#eab308}
    #view-commission-calc .cc-rule-stats{display:flex;flex-wrap:nowrap;gap:8px;justify-content:flex-start}
    #view-commission-calc .cc-rule-stat{background:#111c2f;border:1px solid #263852;border-radius:10px;padding:7px 9px;min-width:86px}
    #view-commission-calc .cc-rule-stat small{display:block;color:#64748b;font-size:10px;margin-bottom:3px}
    #view-commission-calc .cc-rule-stat strong{display:block;color:#e5e7eb;font-size:12px;font-weight:900}
    #view-commission-calc .cc-rule-viz{width:92px;height:54px;background:#111c2f;border:1px solid #263852;border-radius:10px;padding:8px;display:flex;align-items:flex-end;justify-content:center}
    #view-commission-calc .cc-rule-rate-badge{display:inline-flex;align-items:center;justify-content:center;min-width:62px;height:34px;border-radius:999px;background:rgba(234,179,8,.12);border:1px solid rgba(234,179,8,.25);color:#facc15;font-weight:900;font-size:13px}
    #view-commission-calc .cc-rule-actions{display:flex;align-items:center;gap:8px}
    #view-commission-calc .cc-rule-actions button{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:#111c2f;border:1px solid #263852}
    #view-commission-calc .cc-rule-actions .edit{color:#93c5fd}
    #view-commission-calc .cc-rule-actions .delete{color:#f87171}
    #view-commission-calc .cc-rule-actions button:hover{border-color:#eab308}
    #view-commission-calc .cc-rule-state{display:flex;align-items:center;justify-content:flex-end;gap:9px;min-width:112px}
    #view-commission-calc .cc-card-bars{display:flex;align-items:flex-end;gap:3px;height:26px}
    #view-commission-calc .cc-card-bars i{width:9px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#facc15,#ca8a04);min-height:4px}
    #view-commission-calc .cc-banner{background:linear-gradient(135deg,#1f2937,#3b2f0b);border:1px solid #4b3a0a;border-radius:14px;padding:16px 18px}
    #view-commission-calc .cc-chip.norule{border-style:dashed;border-color:#b9770e;background:rgba(234,179,8,.06)}
    #view-commission-calc .cc-addchip{border:1.5px dashed #475569;border-radius:9px;padding:8px;text-align:center;font-size:12px;color:#94a3b8;cursor:pointer;margin:8px}
    #view-commission-calc .cc-mut-foot{background:#3b2f0b;color:#eab308;border-top-color:#4b3a0a}
    #view-commission-calc .cc-b-tiered{background:#0b2540;color:#22d3ee}
    #view-commission-calc .cc-overlap{background:rgba(234,179,8,.08);border:1px solid #b9770e;color:#eab308;border-radius:10px;padding:9px 12px;font-size:12px;margin-bottom:8px}
    #view-commission-calc .cc-switch{width:38px;height:22px;border-radius:12px;background:#475569;position:relative;cursor:pointer;display:inline-block;flex-shrink:0}
    #view-commission-calc .cc-switch::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;right:3px}
    #view-commission-calc .cc-switch.on{background:#10b981}
    #view-commission-calc .cc-switch.on::after{right:auto;left:3px}
    .swal2-popup.cc-rule-products-modal{background:#111827!important;color:#e5e7eb!important;border:1px solid #334155!important;border-radius:14px!important}
    .swal2-popup.cc-rule-products-modal .swal2-title{color:#facc15!important;font-size:20px!important;font-weight:900!important}
    .cc-rule-products-modal-body{text-align:right;direction:rtl}
    .cc-rule-products-modal-body h4{margin:0 0 12px;color:#f8fafc;font-size:14px;font-weight:900;line-height:1.8}
    .cc-rule-products-modal-list{display:flex;flex-wrap:wrap;gap:8px;max-height:360px;overflow:auto;padding:2px 0 4px}
    .cc-rule-products-modal-list span{display:inline-flex;align-items:center;background:#0f172a;border:1px solid #263852;border-radius:999px;color:#cbd5e1;font-size:12px;font-weight:900;padding:7px 10px}
    .cc-rule-products-empty{background:#0f172a;border:1px dashed #334155;border-radius:10px;color:#94a3b8;font-size:13px;padding:16px;text-align:center}
    @media (max-width:1100px){#view-commission-calc .cc-rule-card{grid-template-columns:minmax(260px,1fr) auto auto;grid-template-areas:"identity actions state" "stats stats stats"}#view-commission-calc .cc-rule-identity{grid-area:identity}#view-commission-calc .cc-rule-stats{grid-area:stats}#view-commission-calc .cc-rule-actions{grid-area:actions}#view-commission-calc .cc-rule-state{grid-area:state}}
    @media (max-width:760px){#view-commission-calc .cc-rule-card{grid-template-columns:1fr;grid-template-areas:"identity" "stats" "actions" "state"}#view-commission-calc .cc-rule-identity{grid-template-columns:80px minmax(0,1fr)}#view-commission-calc .cc-rule-viz{width:80px}#view-commission-calc .cc-rule-actions,#view-commission-calc .cc-rule-state{justify-content:flex-start}#view-commission-calc .cc-whatif-row{grid-template-columns:1fr}#view-commission-calc .cc-whatif-result{min-height:64px}}
    </style>

    <!-- Header + Operations/Settings switch -->
    <div class="glass p-4 mb-4 flex flex-col md:flex-row md:items-center justify-between gap-3">
        <h3 class="text-yellow-500 font-bold text-lg"><i class="fa-solid fa-calculator ml-2"></i>محاسبه پورسانت</h3>
        <div class="cc-seg">
            <button id="cc-seg-ops" class="active" onclick="app.ccSwitchPane('ops')">عملیات</button>
            <button id="cc-seg-settings" onclick="app.ccSwitchPane('settings')">تنظیمات</button>
        </div>
    </div>

    <!-- ===== OPERATIONS PANE ===== -->
    <div id="cc-pane-ops">
        <div class="cc-kpis mb-4">
            <div class="cc-kpi"><div class="l">در انتظار تأیید</div><div class="v" id="cc-kpi-pending">—</div><div class="bar" style="background:#3b82f6"></div></div>
            <div class="cc-kpi"><div class="l">پورسانت‌های قابل پرداخت</div><div class="v text-yellow-500" id="cc-kpi-payable">—</div><div class="bar" style="background:#eab308"></div></div>
            <div class="cc-kpi"><div class="l">تأییدشده / آماده پرداخت</div><div class="v" id="cc-kpi-approved">—</div><div class="bar" style="background:#10b981"></div></div>
        </div>

        <div class="glass p-4 mb-4">
            <div class="flex flex-wrap items-center justify-between gap-2 mb-3">
                <h4 class="font-bold text-gray-200 text-sm">صف تأیید پورسانت</h4>
                <div class="flex flex-wrap items-center gap-2">
                    <input id="cc-date-from" type="text" data-jalali-picker="1" class="input text-xs" style="width:130px" placeholder="از تاریخ" onchange="app.ccRefreshOps()">
                    <input id="cc-date-to" type="text" data-jalali-picker="1" class="input text-xs" style="width:130px" placeholder="تا تاریخ" onchange="app.ccRefreshOps()">
                    <select id="cc-q-status" class="input text-xs" style="width:auto" onchange="app.ccLoadQueue()">
                        <option value="">همه وضعیت‌ها</option>
                        <option value="pending">در انتظار تأیید</option>
                        <option value="approved">تأییدشده / آماده</option>
                        <option value="paid">پرداخت‌شده</option>
                        <option value="rejected">ردشده</option>
                    </select>
                    <button class="cc-build-queue-btn" onclick="app.ccCalculateLedger(event)" title="پرداخت‌های بازه انتخاب‌شده را به خطوط پورسانت و صف تأیید تبدیل می‌کند">
                        <i class="fa-solid fa-wand-magic-sparkles"></i>محاسبه از پرداخت‌ها و ساخت صف
                    </button>
                    <button class="cc-detail-toggle" onclick="app.ccPreviewLedger(event)" title="قبل از ساخت صف نشان می‌دهد هر پرداخت چرا وارد محاسبه می‌شود یا نمی‌شود">
                        <i class="fa-solid fa-magnifying-glass-chart ml-1"></i>پیش‌نمایش محاسبه
                    </button>
                    <button class="btn-primary px-3 py-2 rounded text-xs" onclick="app.ccBulkApprove()"><i class="fa-solid fa-check-double ml-1"></i>تأیید گروهی</button>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="cc-table">
                    <thead><tr>
                        <th><input type="checkbox" id="cc-q-all" onclick="app.ccToggleAll(this)"></th>
                        <th>ذینفع</th><th>نقش</th><th>پرداخت مبدأ</th><th>نرخ</th>
                        <th>تاریخ ملاک محاسبه</th><th>مبلغ پورسانت</th><th>وضعیت</th><th>اقدامات</th>
                    </tr></thead>
                    <tbody id="cc-queue-body"><tr><td colspan="9" class="text-center text-gray-500 py-6">در حال بارگذاری…</td></tr></tbody>
                </table>
            </div>
            <div id="cc-preview-panel" class="cc-preview-panel hidden">
                <div id="cc-preview-body" class="text-gray-500 text-sm">برای دیدن جزئیات، پیش‌نمایش محاسبه را اجرا کنید.</div>
            </div>
        </div>

        <div class="glass p-4">
            <div class="flex items-center justify-between mb-3">
                <h4 class="font-bold text-gray-200 text-sm">روند پورسانت</h4>
                <select id="cc-trend-range" class="input text-xs" style="width:auto" onchange="app.ccLoadTrend()">
                    <option value="12">۱۲ ماه اخیر</option>
                    <option value="6">۶ ماه اخیر</option>
                </select>
            </div>
            <div id="cc-trend-chart" style="min-height:240px"></div>
        </div>
    </div>

    <!-- ===== SETTINGS PANE ===== -->
    <div id="cc-pane-settings" class="hidden">
        <div class="cc-subtabs">
            <div class="cc-subtab active" id="cc-sub-tab-rules" onclick="app.ccSwitchSub('rules')">کتابخانه قوانین</div>
            <div class="cc-subtab" id="cc-sub-tab-assign" onclick="app.ccSwitchSub('assign')">تخصیص قوانین</div>
            <div class="cc-subtab" id="cc-sub-tab-teams" onclick="app.ccSwitchSub('teams')">تیم‌ها و دسته‌بندی</div>
        </div>

        <!-- Rules library -->
        <div id="cc-sub-rules" class="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <div class="glass p-4">
                <h4 class="text-yellow-500 font-bold text-sm mb-3">ساخت / ویرایش قانون</h4>
                <form onsubmit="event.preventDefault(); app.ccSaveRule();">
                    <input type="hidden" id="cc-rule-id">
                    <label class="text-xs text-gray-400">نام قانون</label>
                    <input id="cc-rule-title" class="input w-full mb-2" placeholder="مثلاً پلکان طلایی">
                    <label class="text-xs text-gray-400">نوع قانون</label>
                    <select id="cc-rule-type" class="input w-full mb-2" onchange="app.ccOnRuleTypeChange()">
                        <option value="FIXED_RULE">قانون ثابت</option>
                        <option value="TIERED_RULE">پلکانی</option>
                    </select>
                    <div class="grid grid-cols-2 gap-2 mb-2">
                        <div><label class="text-xs text-gray-400">معتبر از</label><input id="cc-rule-from" class="input w-full" placeholder="1403/01/01"></div>
                        <div><label class="text-xs text-gray-400">معتبر تا</label><input id="cc-rule-to" class="input w-full" placeholder="نامحدود"></div>
                    </div>
                    <div id="cc-rule-fixed" class="cc-rule-fixed-box">
                        <label class="text-xs text-gray-400">نوع مقدار ثابت</label>
                        <div class="cc-pill cc-fixed-kind mb-2" id="cc-fixed-kind">
                            <span class="active" data-mode="percent" onclick="app.ccSetFixedValueMode('percent')">درصد از فروش</span>
                            <span data-mode="amount" onclick="app.ccSetFixedValueMode('amount')">مبلغ ثابت</span>
                        </div>
                        <label class="text-xs text-gray-400" id="cc-rule-rate-label">درصد ثابت (%)</label>
                        <input id="cc-rule-rate" class="input w-full mb-2" inputmode="decimal" placeholder="مثلاً 4" oninput="app.ccFormatRuleRate(this); app.ccWhatIf()">
                    </div>
                    <div id="cc-rule-tiered" class="hidden">
                        <div class="cc-tier-builder-head">
                            <div>
                                <div class="cc-tier-kicker">تعریف پلکان</div>
                                <label class="cc-tier-title">پله‌های مبلغ و نرخ پورسانت</label>
                                <p>هر پله بازه مبلغی خودش را دارد؛ سقف آخرین پله می‌تواند خالی بماند.</p>
                            </div>
                            <button type="button" class="cc-tier-add" onclick="app.ccAddTierRow()">
                                <i class="fa-solid fa-plus"></i>
                                <span>افزودن پله</span>
                            </button>
                        </div>
                        <div class="cc-tier-builder">
                            <div class="cc-tier-list">
                                <div class="cc-tier-column-head">
                                    <span>بازه مبلغ</span>
                                    <span>نرخ</span>
                                </div>
                                <div id="cc-tier-rows"></div>
                            </div>
                            <div class="cc-tier-preview">
                                <div class="cc-tier-preview-head">
                                    <span>نمای پلکان</span>
                                    <strong id="cc-tier-count">0 پله</strong>
                                </div>
                                <div id="cc-tier-chart" class="cc-tier-chart"></div>
                            </div>
                        </div>
                        <div class="cc-pill cc-tier-mode mt-3" id="cc-tier-mode">
                            <span class="active" data-mode="marginal" onclick="app.ccSetTierMode('marginal')">تجمعی</span>
                            <span data-mode="retroactive" onclick="app.ccSetTierMode('retroactive')">کل مبلغ</span>
                        </div>
                    </div>
                    <div class="cc-whatif">
                        <div class="cc-whatif-head">
                            <div>
                                <div class="l"><i class="fa-solid fa-calculator ml-1"></i>پیش‌نمایش پورسانت</div>
                                <p>یک مبلغ پرداخت فرضی وارد کن تا نتیجه همین قانون قبل از ذخیره نمایش داده شود.</p>
                            </div>
                            <span>اختیاری</span>
                        </div>
                        <div class="cc-whatif-row">
                            <div class="cc-whatif-input-wrap">
                                <input id="cc-whatif-amount" class="input" inputmode="numeric" placeholder="مثلاً 500,000,000" oninput="app.ccFormatWhatIfAmount(this); app.ccWhatIf()">
                                <small>مبلغ پرداخت مشتری به تومان</small>
                            </div>
                            <div class="cc-whatif-result">
                                <small>پورسانت تقریبی</small>
                                <div class="cc-whatif-res" id="cc-whatif-res">—</div>
                            </div>
                        </div>
                    </div>
                    <div class="cc-product-scope">
                        <div class="cc-product-scope-head">
                            <div class="cc-product-scope-title">
                                <span>دامنه محصول</span>
                                <small>برای قانون عمومی همه محصولات را فعال بگذار؛ برای قانون محصولی چند محصول را تیک بزن.</small>
                            </div>
                            <label class="cc-product-all">
                                <input id="cc-rule-products-all" type="checkbox" checked onchange="app.ccToggleAllRuleProducts(this.checked)">
                                <span>همه محصولات</span>
                            </label>
                        </div>
                        <select id="cc-rule-products" class="hidden" multiple></select>
                        <div id="cc-rule-product-picker" class="cc-product-picker"></div>
                    </div>
                    <button class="btn-primary px-4 py-2 rounded text-sm w-full">ذخیره قانون</button>
                </form>
            </div>
            <div class="glass p-4 lg:order-first cc-rule-library">
                <div class="cc-rule-library-head">
                    <div>
                        <h4>کتابخانه قوانین</h4>
                        <p>قوانین فعال و غیرفعال پورسانت برای تخصیص به تیم‌ها</p>
                    </div>
                    <button type="button" onclick="app.ccLoadRules()" title="بروزرسانی"><i class="fa-solid fa-rotate"></i></button>
                </div>
                <div id="cc-rules-overlap" class="hidden"></div>
                <div id="cc-rules-list" class="cc-rules-list"><div class="text-gray-500 text-sm">در حال بارگذاری…</div></div>
            </div>
        </div>

        <!-- Teams & grouping -->
        <div id="cc-sub-teams" class="hidden">
            <div class="cc-team-workspace">
                <div class="cc-team-hero">
                    <button type="button" class="cc-team-add" onclick="app.ccOpenCreateTeamModal()"><i class="fa-solid fa-plus ml-1"></i>افزودن تیم</button>
                    <div class="text-right">
                        <div class="title" id="cc-team-hero-title">ساختار تیم فروش</div>
                        <div class="meta" id="cc-team-hero-meta">در حال بارگذاری…</div>
                    </div>
                </div>
                <div class="cc-team-shell">
                    <aside class="cc-team-side hidden">
                        <h4>ساخت و تخصیص تیم</h4>
                        <div class="cc-team-field">
                            <div class="cc-team-field-head"><label>سرپرست تیم</label></div>
                            <select id="cc-team-supervisor" onchange="app.ccRenderTeamMemberPicker()"></select>
                        </div>
                        <div class="cc-team-field">
                            <div class="cc-team-field-head">
                                <label>اعضا برای تیم جدید</label>
                                <span id="cc-team-members-count">0 انتخاب</span>
                            </div>
                            <input id="cc-team-member-filter" class="cc-team-pick-search" type="text" placeholder="جستجوی کارشناس..." oninput="app.ccRenderTeamMemberPicker()">
                            <select id="cc-team-members" multiple class="hidden"></select>
                            <div class="cc-team-pick-actions">
                                <button type="button" onclick="app.ccSelectAllTeamMembers()">انتخاب همه</button>
                                <button type="button" onclick="app.ccClearTeamMembers()">پاک‌کردن</button>
                            </div>
                            <div id="cc-team-members-picker" class="cc-team-member-picker"></div>
                        </div>
                        <div class="cc-team-field">
                            <div class="cc-team-field-head"><label>اعمال از تاریخ</label></div>
                            <input id="cc-team-eff" type="text" data-jalali-picker="1" placeholder="امروز">
                        </div>
                        <button type="button" class="cc-team-primary" onclick="app.ccSaveTeamBoardSelection()">ذخیره / تخصیص به تیم</button>
                        <div class="cc-team-note"><i class="fa-solid fa-circle-info ml-1"></i>جابجایی کارشناس بین تیم‌ها با drag انجام می‌شود و از همین تاریخ ثبت می‌گردد. پورسانت ماه‌های قبل تغییر نمی‌کند.</div>
                    </aside>
                    <section>
                        <div class="flex flex-wrap items-center justify-between gap-2 mb-3">
                            <input id="cc-team-search" type="text" placeholder="جستجوی کارشناس یا تیم…" oninput="app.ccRenderTeamBoard()">
                        </div>
                        <div id="cc-team-board" class="cc-team-board">
                            <div class="cc-team-empty">در حال بارگذاری…</div>
                        </div>
                    </section>
                </div>
                <div id="cc-supervisor-history" class="cc-team-side mt-4 hidden"></div>
            </div>
        </div>

        <!-- Rule assignment -->
        <div id="cc-sub-assign" class="hidden grid grid-cols-1 lg:grid-cols-2 gap-4">
            <div class="glass p-4">
                <h4 class="text-yellow-500 font-bold text-sm mb-3">تخصیص جدید</h4>
                <label class="text-xs text-gray-400">هدف</label>
                <select id="cc-asn-target" class="input w-full mb-2" onchange="app.ccOnAssignTargetChange()">
                    <option value="user">کارشناس مشخص</option>
                    <option value="team">تیم فروش</option>
                    <option value="all">همه کارشناسان</option>
                </select>
                <div id="cc-asn-user-wrap">
                    <label class="text-xs text-gray-400">کارشناس‌ها</label>
                    <select id="cc-asn-user" class="hidden" multiple></select>
                    <div class="cc-asn-actions">
                        <button type="button" onclick="app.ccSelectAllAssignUsers()">انتخاب همه</button>
                        <button type="button" onclick="app.ccClearAssignUsers()">پاک کردن</button>
                    </div>
                    <div id="cc-asn-user-picker" class="cc-asn-user-picker"></div>
                </div>
                <div id="cc-asn-team-wrap" class="hidden">
                    <label class="text-xs text-gray-400">تیم‌های فروش</label>
                    <div class="cc-asn-actions">
                        <button type="button" onclick="app.ccSelectAllAssignTeams()">انتخاب همه</button>
                        <button type="button" onclick="app.ccClearAssignTeams()">پاک کردن</button>
                    </div>
                    <div id="cc-asn-team-picker" class="cc-asn-user-picker"></div>
                    <p class="text-[11px] text-gray-500 leading-6 mb-2">قانون به اعضای فعلی تیم‌های فروش انتخاب‌شده تخصیص داده می‌شود؛ تیم‌های مدیریتی اینجا قانون مستقیم نمی‌گیرند.</p>
                </div>
                <label class="text-xs text-gray-400">قانون‌ها</label>
                <select id="cc-asn-rule" class="hidden" multiple></select>
                <div class="cc-asn-actions">
                    <button type="button" onclick="app.ccSelectAllAssignRules()">انتخاب همه</button>
                    <button type="button" onclick="app.ccClearAssignRules()">پاک کردن</button>
                </div>
                <div id="cc-asn-rule-picker" class="cc-asn-user-picker"></div>
                <button class="btn-primary px-4 py-2 rounded text-sm w-full" onclick="app.ccAssign()">تخصیص</button>
            </div>
            <div class="glass p-4 lg:order-first">
                <div class="flex items-center justify-between mb-3"><h4 class="text-yellow-500 font-bold text-sm">تخصیص‌های فعال</h4><span id="cc-assign-count" class="text-xs text-gray-400"></span></div>
                <div id="cc-assign-list" class="cc-assign-list"><div class="text-gray-500 text-sm">در حال بارگذاری…</div></div>
            </div>
        </div>
    </div>
</div>

<!-- 6. PERSONS VIEW -->
<div id="view-persons" class="view-section h-full p-6 hidden flex flex-col">
    <div class="glass flex-1 overflow-hidden flex flex-col">
        <div class="p-4 border-b border-gray-700 flex justify-between items-center">
            <h3 class="font-bold text-yellow-500">لیست اشخاص</h3>
            <input type="text" id="persons-search" placeholder="جستجو..." class="input w-full md:w-64 bg-gray-800">
        </div>
        <div class="overflow-y-auto p-4 pb-24">
            <div id="persons-list" class="space-y-2"></div>
        </div>
    </div>
</div>

<!-- 7. REMINDERS VIEW -->
<div id="view-reminders" class="view-section h-full p-6 hidden flex flex-col">
    <div class="glass flex-1 overflow-hidden flex flex-col">
        <div class="p-4 border-b border-gray-700 flex justify-between items-center">
            <h3 class="font-bold text-blue-500">لیست یادآوری‌های فعالیت</h3>
            <button class="btn-primary px-4 py-2 rounded text-sm flex items-center gap-2" onclick="app.loadReminders()">
                <i class="fa-solid fa-rotate-right"></i>
                بروزرسانی
            </button>
        </div>
        <div class="flex-1 overflow-y-auto p-4 pb-24">
            <div id="reminders-list-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                <div class="text-center text-gray-500 py-10 col-span-full">در حال بارگذاری...</div>
            </div>
        </div>
    </div>
</div>

<!-- Customer access requests inbox (support) -->
<div id="view-customer-access" class="view-section h-full p-6 hidden flex flex-col">
    <div class="glass flex-1 overflow-hidden flex flex-col">
        <div class="p-4 border-b border-gray-700 flex justify-between items-center flex-wrap gap-2">
            <h3 class="font-bold text-yellow-500">درخواست‌های دسترسی مشتری</h3>
            <div class="flex items-center gap-2">
                <button class="btn-primary px-4 py-2 rounded text-sm flex items-center gap-2" onclick="app.loadAccessRequestInbox()">
                    <i class="fa-solid fa-rotate-right"></i>
                    بروزرسانی
                </button>
            </div>
        </div>
        <div class="flex-1 overflow-y-auto p-4 pb-24">
            <div id="access-inbox-list" class="space-y-4">
                <div class="text-center text-gray-500 py-10">در حال بارگذاری...</div>
            </div>
        </div>
    </div>
</div>
