{{-- Icon Picker Modal --}}
<div class="modal fade" id="iconPickerModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">انتخاب آیکون</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-3">
                <input type="text" id="icon-search" class="form-control mb-3" placeholder="جستجوی آیکون... (مثال: home, user, cart)" dir="ltr" autocomplete="off">
                <div id="icon-grid" style="display:grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap:6px; max-height:420px; overflow-y:auto;"></div>
                <div id="icon-no-result" class="text-center text-muted py-4 d-none">آیکونی یافت نشد.</div>
            </div>
            <div class="modal-footer justify-content-between">
                <div class="d-flex align-items-center gap-2">
                    <span class="text-muted small">انتخاب شده:</span>
                    <i id="picker-selected-preview" class="ti ti-folder fs-5"></i>
                    <code id="picker-selected-name" class="small">folder</code>
                </div>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-outline-secondary" id="icon-clear-btn">حذف آیکون</button>
                    <button type="button" class="btn btn-primary" id="icon-confirm-btn">تایید</button>
                </div>
            </div>
        </div>
    </div>
</div>
